1.解构
在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量，即将数组或对象中的值，拆成一个一个变量。
解构：自动解析数组或对象中的值，并赋值给指定的变量。、
1.1****数组解构
1var arr = [3,4,5]; 2 var [a, b, c] = arr; 3 console.log(a, b, c); 4 5 //还可以忽略值 需要使用,占位 6 var arr = [3,4,5]; 7 var [a,, c] = arr; 8 console.log(a, c); 9 10 //函数返回值为数组，进行解构 11 function f5(){ 12 return [1,2,3]; 13 } 14 var [a, b, c] = f5(); 15 console.log(a, b, c);
1.2对象解构
将对象中的成员值，取出并赋值给多个变量(变量名与对象成员名一致)
1var person = { 2 "nickname": "老三", 3 "age": 30, 4 "sex": "男" 5}; 6//解构时 {}中的变量名，不能加引号 7var {nickname, age, sex} = person; 8console.log(nickname, age, sex); 9//可以忽略值 直接忽略 不需要占位 10var {nickname, sex} = person; 11console.log(nickname, sex);
1.3函数参数与解构
函数参数使用解构数组或解构对象形式
1//1.函数形参，使用解构数组形式，调用函数时需要传递数组实参 2function f1([x,y,z]){ 3 console.log(x,y,z); 4} 5var arr = [1,2,3]; 6f1(arr); 7 8//相当于 9/* 10function f1(a){ 11 var [x,y,z] = a; 12 console.log(x,y,z); 13} 14var arr = [1,2,3]; 15f1(arr); 16*/ 17 18//2.函数形参，使用解构对象形式，调用函数时需要传递对象实参 19function f2({nickname,age,sex}){ 20 //变量名与对象成员名一致 21 console.log(nickname,age,sex); 22} 23var obj = {"nickname":"zhangsan", "age":40, "sex":"男"}; 24f2(obj); 25 26//相当于 27/* 28function f1(a){ 29 var {nickname, age, sex} = a; 30 console.log(nickname,age,sex); 31} 32var obj = {"nickname":"zhangsan", "age":40, "sex":"男"}; 33f2(obj); 34*/
1.4默认值与解构数组
函数参数使用解构数组 并设置默认值
1<script> 2//1.函数参数使用解构数组，调用函数不传参数会报错 3function fn([x, y, z]){ 4 console.log(x, y, z); 5} 6fn(); //会报错 7</script> 8 9<script> 10//2.函数参数使用解构数组，对整个数组设置默认值为空数组 11function f1([x, y, z] = []){ 12 console.log(x, y, z); 13} 14f1(); //不报错 x y z 都是 undefined 15 16//3.函数参数使用解构数组，对整个数组设置默认值,数组中每个变量对应一个默认值 17function f2([x, y, z] = [1,2,3]){ 18 console.log(x, y, z); 19} 20f2(); //不报错 x=1 y=2 z=3 21f2([4,5,6]); // x=4 y=5 z=6 22 23 24//4.函数参数使用解构数组，对整个数组设置默认值为空数组, 在解构数组中对每个变量设置一个默认值 25function f3([x=1, y=2, z=3]=[]){ 26 console.log(x, y, z); 27} 28f3(); //不报错 x=1 y=2 z=3 29f3([4,5,6]); // x=4 y=5 z=6 30</script>
1.5默认值与解构对象
函数参数使用解构对象 并设置默认值
1<script> 2//1.函数参数使用解构对象，调用函数不传参数会报错 3function fn({x, y, z}){ 4 console.log(x, y, z); 5} 6fn(); //会报错 7</script> 8 9<script> 10//2.函数参数使用解构对象，对整个对象设置默认值为空对象 11function f1({x, y, z} = {}){ 12 console.log(x, y, z); 13} 14f1(); //不报错 x y z 都是 undefined 15 16//3.函数参数使用解构对象，对整个对象设置默认值,对象中每个变量对应一个默认值 17function f2({x, y, z} = {"x":1,"y":2,"z":3}){ 18 console.log(x, y, z); 19} 20f2(); //不报错 x=1 y=2 z=3 21f2({"x":4,"y":5,"z":6}); // x=4 y=5 z=6 22 23 24//4.函数参数使用解构对象，对整个对象设置默认值为空对象, 在解构对象中对每个变量设置一个默认值 25function f3({x=1, y=2, z=3}={}){ 26 console.log(x, y, z); 27} 28f3(); //不报错 x=1 y=2 z=3 29f3({"x":4,"y":5,"z":6}); // x=4 y=5 z=6 30</script>
2.Symbol数据类型
ES5数据类型：6种： string number boolean null undefined object
ES6新增了一种数据类型：Symbol，表示独一无二的值，Symbol最大的用途是用来定义对象的唯一属性名
1var symbol1 = Symbol(); 2 3var symbol2 = Symbol("Alice"); 4 5console.log(symbol1, symbol2) // 输出：Symbol() Symbol(Alice)
Symbol类型的值是一个独一无二的值，Symbol函数的参数只是表示对当前Symbol值的描述，因此相同参数的Symbol函数的返回值是不相等的。
1var attr_name = Symbol(); 2var obj = { 3 [attr_name]: "Alice" 4}; 5console.log(obj[attr_name]); 6 7var obj = { 8 [Symbol()]:"Alice" 9}; 10console.log(obj);
注：Symbol值作为对象属性名时，不能用点运算符。由于点运算符后面总是字符串，所以不会读取attr_name作为标识名所指代的那个值。
使用[]方括号，里面的attr_name不带引号，表示attr_name是一个变量.
3.箭头函数
ES6可以使用“箭头”（=>）定义函数，注意是普通函数，不要使用这种方式定义类（构造器）。
3.1****语法
具有一个参数并直接返回的函数
1var f1 = a=>a; 2//相当于 var f1 = function(a){ return a;}; 3console.log(f1('hello'));//'hello'
没有参数的需要用在箭头前加上小括号
1var f2 = () => '来了老弟'; 2console.log(f2());
多个参数需要用到小括号，参数间逗号间隔
1var f3 = (a, b) => a+b; 2console.log(f3(3,4));//7
函数体多条语句需要用到大括号
1var f4 = (a, b) => { 2 console.log('来了老弟'); 3 return a+b; 4} 5console.log(f4(5,6));//11
返回对象时需要用小括号包起来，因为大括号被占用解释为代码块
1var f5 = () => { 2 return ({"name":"老弟", "age":40}); 3} 4 5//var f5 = () => ({"name":"老弟", "age":40}); 6console.log(f5());
直接作为事件处理函数
1<input type="button" value="点击" id="btn"> 2<script> 3 document.getElementById('btn').onclick = evt=>{ 4 console.log(evt);//evt 事件对象 5 } 6</script>
赋值为对象的方法
1var obj = {}; 2obj.say = ()=>{return "hello,我是obj的say方法";} 3console.log(obj.say());
作为回调函数
1var f6 = (f)=>{ 2 console.log(f(100)); 3}; 4// f6(a=>a); 5var f7 = a=>a; 6f6(f7);
1.2注意点
typeof 判断箭头函数 结果为function
1var f1 = a=>a; 2console.log(typeof f1);//'function'
instanceof判断是否Function的实例，结果为true
1var f1 = a=>a; 2console.log(f1 instanceof Function);//true
箭头函数不绑定this, 内外this指向固定不变
1var obj = { 2 say:function(){ 3 //非箭头函数 4 var _this = this; 5 var f1 = function(){ 6 console.log(_this);//obj 7 console.log(this);//window 8 }; 9 f1(); 10 //箭头函数 11 var f2 = ()=>{ 12 console.log(this); 13 }; 14 f2(); 15 } 16}; 17obj.say();
箭头函数不能做构造函数，不能用new实例化，也没有prototype属性
1var Person = ()=>{}; 2console.log(Person.prototype);//undefined 3var p = new Person();//报错
不能使用arguments
1var f1 = ()=>{ 2 console.log(arguments); 3}; 4f1(); //报错
箭头函数也支持默认参数、剩余参数、解构
1var f1 = (x=1,y)=>{ 2 console.log(x, y); //3 4 3}; 4f1(3,4); 5var f2 = (...x)=>{ 6 console.log(x); //[3,4] 7}; 8f2(3,4); 9var f3 = ([x,y]=[])=>{ 10 console.log(x, y); //3 4 11}; 12f3([3,4]);