脚本宝典收集整理的这篇文章主要介绍了ES6学习总结（1），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
半个月前就决定要将ES6的学习总结一遍，结果拖延症一犯，半个月就过去了，现在补起来，惭愧惭愧。
阮一峰的《ES6标准入门》这本书有300页左右，除了几个新的API和js语法的扩展,真正有价值的内容并不多。所谓“存在即合理”，每部分的内容都对相应的人群有价值，我将结合我在实习中接触过的ES6的部分和我的个人理解来对这本书的内容做个总结。如有不足或者谬误指出，还请拍砖。
总结主要从三个方面展开：1. 语法扩展；2. ES6新API; 3. 模块化方案。
1. 语法扩展
（1）let、const与块级作用域
// let/const不存在变量提升
console.LOG(foo); // undefined
VAR foo = "abc";
console.log(lish); // 未定义报错,ReferenceError
let lish = "hello";
let、const暂时性死区:已经声明了变量，在声明变量之前，该变量都是不可用的。在局部作用域中，即使已经存在全局的同名变量，还是无法在局部声明之前访问该变量，有点绕，直接上代码。
// 暂时性死区
var num = 1;
const add = () => {
console.log(num);
let num;
}
add(); // 报错，num is not defined
（2）@L_406_12@
解构赋值说白了就是“模式匹配”，从等号两边对应的位置取出对应的值
数组的解构赋值
let [a, b, c] = [1, 2, 3];
// 从对应位置拿出对应值，相当于我们声明了三个变量
// let a = 1, b = 2, c = 3;需要指出一点，只要某种数据具有Iterator接口，就可以采用数组形式的解构赋值(其中就包括字符串)，Iterator我们会在总结（2）提到。 举个例子
// Set是ES6新增的一种数据类型，拥有Iterator接口
let [x, y, z] = new Set([1, 2, 3]); // x = 1, y = 2, z = 3解构允许指定默认值。默认值有undefined触发
let [x = 1, y = 2] = [44]; // x = 44, y = 2;
let [x = 1, y = 2] = [44, undefined]; // 与上面等价对象的解构赋值
只要我们知道这是模式匹配，就比较好理解了,先通过键找到对应的值，将值赋给等式左边相同键名对应的变量，{foo}就是{foo: foo}的简写形式，这属于对象的扩展，接下来会提到。
let { foo, bar } = { foo: 'hello', bar: 'world' }; // foo = 'hello', bar = 'world'
let {foo: val, bar} = { foo: 'hello', bar: 'world' }; // val = 'hello', bar = 'world';和数组解构类似，也可以为对象解构赋默认值let {x = 3} = {};,默认值由undefined触发。
需要注意的一点是，大括号不能出现在行首，会被解析为代码块，比如{x} = {x: 1};
函数参数的解构赋值
参数可以为数组或对象
比如：我们为函数直接传一个数组，在函数内部我们直接可以使用解构后的值
const add = ([x, y]) => {
return x + y;
}
console.log(add([1, 2]); // 3
console.log(add.length); // 1上面代码中，比较好理解的是add.length，代表函数参数的个数，但是我们为参数指定默认值时, length为0，原因就是函数的length属性为没有指定默认值的参数的个数，而且不包括rest参数
const add = ([x, y] = [0, 0]) => {
return x + y;
}
console.log(add()); // 0
console.log(add.length); // 0（3）模板字符串
字符串扩展中，最有用的就是模板字符串，用反引号（`）标识，模板字符串中可以使用变量，省去了用连接符来拼接字符串的麻烦。
let foo = 'hello';
console.log(`${foo} world!`); // hello world看了上面，相信大家都会在模板字符串中使用变量了，就是讲变量写在${}中就行了。
另外，模板字符串中还可以使用表达式（包括函数调用，运算等），同样，将表达式写在${}中就行了。
（4）扩展运算符（...）与 rest参数
扩展运算符
作用：将一个数组(姑且先说是数组)转换为用逗号分隔的参数序列。
console.log([1, 2, ...[2, 3, 4]]); // [1, 2, 2, 3, 4]
console.log(...'hello'); // h e l l o
// generator函数
let go = function* () {
yield 1;
yield 2;
yield 3;
};
console.log(...go()); // 1 2 3问题来了：扩展运算符可以作用于哪些数据类型呢？
回答这个问题很关键，直接说答案吧：拥有Iterator接口的数据类型
rest参数
阮大神的书上原话：rest参数（...变量名），用于获取函数多余的参数，放进一个数组中。
const add = function (arg1, ...values) {
return values;
};
console.log(add(1, 3, 5, 7)); // [3, 5, 7]
个人之见，这句话有点问题，rest参数好比是扩展运算符的逆运算，怎么能只用于获取函数多余的参数呢，事实证明，rest不仅仅用于获取函数参数。
我们看上的函数定义部分的参数和函数调用部分的参数，这不就是一个模式匹配吗？arg1对应第一个参数，...values对应剩余的参数。说道模式匹配，不得不说解构赋值，那么我们在解构赋值中应用rest参数呢，下面我们试试看
let values, num;
[num, ...values] = [1, 3, 5, 7];
console.log(values); // [3, 5, 7]实验证明rest参数也可以用于解构赋值中，要注意的是rest参数只能放在其他参数的后面，否则rest参数无法判断里面参数的个数
（5）数组的扩展
所谓类似数组的对象，关键在于有没有一个length属性表示对象中属性的个数
var obj = {0: 'hello', 'sayName': 'hi', 1: 'world', length: 2};
console.log(Array.from(obj)); //['hello', 'world'];
上面转换的只是键名为数字的属性
findIndex(),与find()类似，返回的是数组的索引。
for(let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for(let value of ['a', 'b'].values()) {
console.log(value);
}
// a
// b
for(let [index, value] of ['a', 'b'].entries()){
console.log(index, value);
}
// 0 a
// 1 bincludes()
作用：判断数组是否包含某个值，属于es7，客户端使用要使用Babel进行转码，为了弥补indexOf()的不足，indexOf()内部使用“===”进行判断，对于NaN的判断会出错，而includes()解决了这个问题
console.log([NaN, NaN].indexOf(NaN)); // -1
console.log([NaN, NaN].includes(NaN)); // true（6）函数的扩展
函数参数的解构赋值，默认值在第一部分已经提到，这里就不再总结，在函数扩展这一部分，我主要总结箭头函数的使用
ES6中可以使用箭头函数定义函数，方式如下：
const f = (arg1) => {
return arg1 * 2;
}
const f = arg1 => arg1*2; // 等同于上面的定义当参数只有一个时，可以省略括号，当函数体只有return语句一条语句时，可以省略大括号和return关键字
使用箭头函数需要注意的几点
箭头函数没有自己的this,导致内部的this就是外层代码的this,所以不能用作构造函数，也不能使用call()、apply()、bind()改变this的指向
（7）对象的扩展
属性的简洁表示法
变量名转属性名
let foo = 'hello';
let obj = {foo: foo};
// 简写形式
let foo = 'hello';
let obj = {foo}; // 变量名直接转为属性名方法的简写
let obj = {
sayName: function() {
return 'hello';
}
}
// 简写形式
let obj = {
sayName() {
return "hello";
}
};ES6允许字面量定义对象时使用表达式作为对象的属性名
将表达式放在中括号中，但是属性名表达式与简洁表示法不能同时使用
let obj = {
['a' + 'bc']: 123
}
Object.is()
用来比较两个值是否严格相等，与“===”行为基本一致，不同之处在于： +0不等于-0，NaN等于自身
Object.assign()
将源对象的所有可枚举的自有属性复制（浅复制）到目标对象Object.assign(target, source1, source2 ...),返回target,可以处理数组，将其视为对象
let target = {a: 1};
let source1 = {b: 2};
let source2 = {c: 3};
Object.assign(target, source1, source2);
// target => {a: 1, b: 2, c: 3};一般情况下，我们不希望改变对象，只希望合并对象的属性，那么可以将target设为空对象{}， Object.assign({}, source1, source2);
需要注意的是Object.assign()执行的是浅复制， 如果源对象的属性为引用类型，那么target中对应的属性和源对象中的属性引用同一个值
let source1 = {b: {test: 'hello world'}};
let target = Object.assign({}, source1);
console.log(target.b); // { test: 'hello world' }
source1.b.test = 111111;
console.log(target.b); // {test: 111111}对象的属性的遍历
for...in 循环遍历对象自身和继承的可枚举属性（不含Symbol属性），Symbol是ES6中的一种新的数据类型，表示一个独一无二的值，在第二大部分，我将会讲到这个类型。
Object.keys(obj) 返回数组，包括对象自身的所有可枚举属性（不含Symbol属性）
Object.getOwnPropertynames(obj) 返回数组，包含对象自身的所有属性（包括不可枚举属性，不包含Symbol属性）
说白了，就是ES5中遍历方法都无法获取到Symbol属性
Object.getOwnPropertySymbols(obj)返回数组，包含自身的所有Symbol属性
Reflect.ownKeys(obj)返回一个数组，包含对象自身的所有属性（包括不可枚举和Symbol）， Reflect是ES6中的新API，其目的之一就是将Object对象上一些属于语言层面的方法放到该对象身上，并修改某些方法，让其变得更合理。
Reflect.enumerate(obj)返回一个Iterator对象，遍历对象自身和继承的所有可枚举属性（不含Symbol），与for...in相同
在红宝书中就已经提到过__proto__属性，表示的是引用类型实例的一个内部指针，指向该实例的构造函数的原型对象。一般不建议我们直接使用，因为这是一个非标准属性，但是所有浏览器都部署了这个属性，node中也可以使用
// 利用__proto__实现继承
function Animal(name) {
this.name = name;
}
Animal.prototype.sayName = function() {
console.log(this.name);
};
function Dog(name, leg) {
Animal.call(this, name);
this.leg = leg;
}
Dog.prototype.__proto__ = Animal.prototype;
Dog.prototype.constructor = Dog;
var dog = new Dog("Genkle", 4);
dog.sayName(); // Genkle
Object.setPrototype(object, prototype)用于设置一个对象的prototype对象，相当于object.__proto__ = prototype,是ES6中设置原型对象的方法。
以上是脚本宝典为你收集整理的ES6学习总结（1）全部内容，希望文章能够帮你解决ES6学习总结（1）所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。