ES6 - 技术教程文章
vue+webpack+sass 入坑 配置ES6 编译【代码】
Install 是不可少的事情1 npm install --save-dev babel-core babel-preset-es20151 npm install --save-dev babel-loader配置 .babelrc1{ 2 "presets": ["es2015"] 3 }详细可看npm原文：http://www.cnblogs.com/hasubasora/p/7081894.html
ES6的async/await 在循环中的使用注意事项【代码】
使用async/await使for/map等等循环方法中的异步操作变为串行：当然首先当想到的是如下，使用Promise.all，但是结果并不尽人意，多个asyncWorker最终执行的结果依然是乱序的；// 使用async await 处理异步操作 let results = await Promise.all(arr.map(async (item) => {// 等待异步操作完成，返回执行结果return await asyncWorker(item); }));解决： 使用for /for...of等循环即可，因为map、forEach这些循环方法是直接调用回调函...
ES6 class——getter setter音乐播放器【代码】
<!DOCTYPE html><html><head><meta charset="utf-8"><title>getter与setter——音乐播放器例子 </title><style type="text/css">div{font-size: 299x;}</style></head><body><div id="app"><div class="play-btn"></div></div><script>class AudioPlayer{constructor(){this._status =0; //要修改的属性this.status =0; //程序初始化时候的值this.init();}init(){const audio =new Audio();audio.src =‘...‘;audio.oncanplay =...
ES6中的Promise对象的理解【图】
Promise的含义promise是异步编程的一种解决方法。所谓promise，简单说是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，从语法上说，promise是一个对象，从它可以获取异步操作的消息，promise提供了统一的API，各种异步操作都可以用同样的方法进行处理。Promise对象的特点（1）对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已...
es6中promise ALL Race Resolve Reject finish的实现【代码】
function mypromise(func){this.statue = "pending";this.data = null;this.resolveCallback = [];this.rejectCallback = [];this._final = null;var self = this;var resolve = function(data){if (data instanceof mypromise) {data.then(resolve,reject)return;}setTimeout(function(){if(self.statue != "pending") return;self.data = data;self.statue = "resolve";for(var i = 0; i < self.resolveCallback.length; i++){va...
es6字符串方法【图】
用来确定字符串A是否包含字符串B，ES6有提供了三种新方法：需要注意的是，这三个方法都接受第二个参数-一个数字n。前两个均表示从第n个开始查询，而，endsEith()是指针对前n个字符。repeat()将原字符串重复n次。字符串对象，一共有四个方法可以使用正则表达式：match()、replace()、search()、split(). 原文：https://www.cnblogs.com/yadiblogs/p/9025946.html
ES6之Array.from()方法【代码】
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。 那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。 1、将类数组对象转换为真正数组：let arrayLike = {0: ‘tom‘, 1: ‘65‘,2: ‘男‘,3: [‘jane‘,‘john‘,‘Mary‘],‘length‘: 4 } let arr = Array.from(arrayLike) console.log(arr) // [‘tom‘,‘65‘,‘男‘,[‘jane‘,‘john‘,‘Mary‘]]那么，如果...
ES6, 函数的扩展（剩余参数，箭头函数），art-template，symbol, set和map数据结构【代码】
一、函数扩展:1.剩余参数:1) 语法：...变量名（形参名）2) 返回值：数组3) 注意：必须将剩余参数放到最后一个形参的位置 // function m1({x=10,y=20}){// console.log(x,y)// }// function m2({x=10,y=20}={}){// console.log(x,y)// }// function m3({x,y}={x:10,y:20}){// console.log(x,y)// }// m1({})// m2({})// m3({})// 剩余参数// type number string boolean undefined function object// function fn() {...
《深入理解ES6》笔记——扩展对象的功能性（4）【代码】
变量功能被加强了、函数功能被加强了，那么作为JavaScript中最普遍的对象，不加强对得起观众吗？对象类别在ES6中，对象分为下面几种叫法。（不需要知道概念）1、普通对象2、特异对象3、标准对象4、内建对象对象字面量语法拓展随便打开一个js文件，对象都无处不在，看一个简单的对象。{a: 2 } ES6针对对象的语法扩展了一下功能1、属性初始值简写//ES5 function a(id) {return {id: id}; };//ES6 const a = (id) => ({id }) 2、对象方...
ES6的拓展
1、String的拓展① str.includes("abc");② str.startWith("abc");③ str.endWith("abc");④ str.repeat(5) 2、Number的拓展① 二进制数值：0b, 八进制数值：0o② Number.isFinite(i) 是否是有限大的数③ Number.isNaN(i)④ Number.isInteger(i) 是否是整数⑤ Number.parseInt(str)⑥ Number.trunc(i) 直接去除小数部分 3、Arrary的拓展① Array.from(value) 将伪数组或可遍历对象转换为真数组② Array.of(v1, v2, v3) 将一系...
【ES6新增语法详述】 𠀶【代码】
目录1. 变量的定义letconst2. 模版字符串3. 数据解构4. 函数扩展设置默认值箭头函数5. 类的定义 class6. 对象的单体模式原文: http://blog.gqylpy.com/gqy/275"@ ES6新增了关于变量的定义，函数扩展，数据结构，类，模块等概念，本文将详细介绍常用的ES6语法。 ***1. 变量的定义letES6中新增了let语法，用来声明变量，用法类似var。 ==let定义的变量只在当前代码块内有效.== 如下示例：<script>if (true) {var username = 'zyk';l...
ES6 中箭头函数 this 指向问题【代码】
在上一讲当中，我们知道了es5 中函数的 this 指向问题，即：指向直接调用它的那个对象。那么，在es6 中，箭头函数中的 this 指向是不是会有所不同呢？答案是必然的，今天我们就来聊聊箭头函数的this指向~ 首先来简单对比一下：【es5普通函数】// es5: var str = ‘window‘var obj = {str: ‘obj‘,fn: function () {console.log(this.str)} }obj.fn() // obj 【es6箭头函数】var str = ‘window‘var obj = {str: ‘obj‘,fn: ()...
ES6 解构赋值【代码】
解构赋值解构赋值可以方便快速的从数组或者对象中提取赋值给定义的变量。获取数组中的值从数组中获取值并赋值到变量中，变量的顺序与数组中对象顺序对应。 1var foo = [1,2,3,4,5]2 3var [one,twe,three] = foo4 console.log(one)//1 5 console.log(twe)//2 6 console.log(three)//3 7 8如果想要会略某些值，则可以910var [first,,last] = foo 11 console.log(first)//112 console.log(last)//51314也可以先声明变量 1516var a,b 1...
es6的class类封装轮播图【代码】
话不多说，直接上代码<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script></script><style>* {margin: 0;padding: 0;}.box {width: 400px;height: 350px;border: 1px solid red;overflow: hidden;margin: auto;margin-top: 50px;position: relative;top: 0;left: 0;}.outer {list-style: none;position: absolute;top: 0;left: 0;transition: .3s all linear;}.img {width: 400px;height:...
ES6（阮一峰）学习总结【代码】
以下所写都是个人的理解，可能会有不正确的地方。1.let和var的区别var a= []; for (let i = 0; i <10; i++) {a[i]=function(){console.log(i);}; }console.log(i); //i is not definedlet声明的变量在循环体外是不可访问的，是个局部变量。var a= []; for (var i = 0; i <10; i++) {a[i]=function(){console.log(i);}; } console.log(i); //10var声明的变量是个全局变量，所以循环体外可以访问，值为循环结束后的值：10。...
ES6学习之-let 和const命令【代码】
let 和const命令let命令 用来声明变量，类似于var 。let声明的变量 只在let命令所在的代码块内有效。 在for循环里也是如此 每次循环其实都是一个代码块function fn() {let a = 1; } console.log(a); //undefined//像以前一个经典案例：for循环绑定一个按钮点击事件，最后点击时却报错的情况,可以不用闭包 直接使用let声明变量i 即可解决；var btns = document.querySelectorAll(".btn"); for(let i = 0; i < btns.length; i++){btn...
ES6 语法
一：搭建ES6 开发环境 安装:npm i -g babel-cli二：npm i --save-dev babel-preset-es2015 babel-cli三：babel src/index.js -o dist/index.jssrc: es6 语法的文件位置dist: es6 转es 5运行文件位置（四：简化babel src/index.js -o dist/index.js）在packjson 中的" script“下把"test"换成"build"并且value值设置为"babel src/index.js -o dist/index.js" 运行时：npm run build ES6常用语法：1.多条变量赋值：let [a,b,...
es6的Symbol【代码】
ES6中引入了一种新的数据类型：Symbol，可以作为对象属性的标识符使用ES6引入Symbol的原因：防止属性名的冲突（ES5的对象属性名都是字符串，容易造成属性名的冲突）Symbol函数前不能使用new命令，否则会报错Symbol值不能与其他类型的值进行运算Symbol函数可以接受一个字符串作为参数（可选），表示对 Symbol 实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分在js文件中定义的Symbol，不能在其他文件中共享每个...
ES6 入门系列 （一）ES6的前世今生
要学好javascript , ECMAScript标准比什么都强， ESMAScript标准已经用最严谨的语言和最完美的角度展现了语言的实质和特性。理解语言的本质后，你已经从沙堆里挑出了珍珠，能经得起时光的磨砺。 有很多问题在网络上被包装了太多次，解释的千奇百怪，但用规范的语言来描述竟是如此简单。 什么是ES6， 刚开始学ES6的时候我以为它就是ECMAScript2015， 然而ES6是一个泛指， 它是指5.1版本后JavaScript的下一代标准，它涵盖了...
ES6（简介及常用）-下【代码】
八、Iterator 和 for of 值遍历（谷歌浏览器无）1、Iterator（遍历器）的概念JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据...
es64 const【代码】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>const命令</title><script src="../../../vendor/traceur.js"></script><script src="../../../vendor/bootstrap.js"></script><script type="text/traceur">const Pi =3.1415926535;//只能赋一次值 console.log(Pi);Pi =3; // Pi is read-only -- Error console.log(Pi);const Pi =3.1415926535;console.log(Pi); //3.1415926535 console.log(5* ...
[ES6深度解析]15：模块 Module【代码】
JavaScript项目已经发展到令人瞠目结舌的规模，社区已经开发了用于大规模工作的工具。你需要的最基本的东西之一是一个模块系统，这是一种将你的工作分散到多个文件和目录的方法——但仍然要确保你的所有代码片段可以根据需要相互访问——而且还要能够有效地加载所有代码。所以很自然，JavaScript有一个模块系统。实际上,有不少模块系统。还有一些包管理器，用于安装所有这些软件和处理高级依赖关系的工具。你可能会认为，拥有新的模...
ES6 Promise 对象【代码】
es6 Promise 对象是异步编程的一种解决方案。（在javascript世界里，是单线程顺序执行的）从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，...
es6 Set数据结构【代码】
原文 http://es6.ruanyifeng.com/#docs/set-mapSet类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) {console.log(i); } // 2 3 5 4上面代码通过add方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。 // 例一 const set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3...
ES6之展开运算符(...)【代码】
https://www.jianshu.com/p/3935a80342a0合并 对象/数组let a = [1,2,3]; let b = [4,5,6]; let c = [...a,...b]; // [1,2,3,4,5,6]浅拷贝对象/数组用扩展运算符对数组或者对象进行拷贝时，只能扩展和深拷贝第一层的值，对于第二层极其以后的值，扩展运算符将不能对其进行打散扩展，也不能对其进行深拷贝，即拷贝后和拷贝前第二层中的对象或者数组仍然引用的是同一个地址，其中一方改变，另一方也跟着改变。var obj = {name:‘范顺...
ES6遍历器以及generator函数的说明
从es5之后，js被各种人玩烂了之后，不得不提起的性能摆在台面上。可能是这些原因，js把底层的一些更深层的东西都开放出来了。1.遍历器 iterator在了解这个东西之前，需要先了解一下计算机对内存的处理。原文：http://www.cnblogs.com/xiongmaoblog/p/7722977.html
ES6---axios执行原理【代码】【图】
ES6---axios执行原理Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中http://www.axios-js.com/zh-cn/docs/ 1. axios.get(‘1111.json‘).then(response => {console.log(response.data);}).catch(error => {console.log(error);}); console: 2. axios.get(‘1111.json‘).then(response => {console.log(response.data);}).catch(error => {console.log(error);});console.log(123); console:3. axi...
ES6 class setTimeout promise async/await 测试Demo【代码】
class Person {async getVersion () {returnnew Promise((resolve, reject) => {setTimeout(function () {resolve(‘1.0‘); // reject(‘fail‘)}, 1000);})} }const start = async () => {var p = new Person();const data = await p.getVersion();console.log(20180716090040, data); }start(); // 20180716090040 "1.0" 原文：https://www.cnblogs.com/CyLee/p/9315997.html
ES6标准学习： 2、解构赋值【代码】
解构赋值 1、基本使用方法es6允许按照一定的方式，从数组和对象中提取值，从而对变量进行赋值，这种模式被称为解构。以前，我们为一个变量赋值，通常这么写：1var a = 1 2var b = 2 3var c = 3 而在es6中，我们可以这么写：1var [a, b, c] = [1, 2 , 3] 上面的代码表示，我们可以从数组中提取值，并按照位置的对应关系对变量进行赋值。嵌套的解构赋值也是允许的：1 let [a, [[b], c]] = [1, [[2], 3]]某些位置没有需要被赋值的变量...
ES6新特性【代码】【图】
字符串扩展ES6为字符串扩展了几个新的API：includes()：返回布尔值，表示是否找到了参数字符串。startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。 ES6中提供了`来作为字符串模板标记。我们可以这么玩：在两个`之间的部分都会被作为字符串的值，不管你任意换行，甚至加入js脚本键盘是的1的左侧，tab的上侧，esc的正下方解构表达式数组解构比如有一个...