学习总结常用的 ES6 语法（一）

一、 变量（let）与常量定义（const）

1. let的命令

1. let 不允许重复声明

var 变量可以重复声明
let 变量不允许在相同作用域内重复声明(const一样)(通常说一个{}就是一个作用域)

2. let不存在变量提升

var 和function 命令存在变量提升(var只会先提前声明 function既提前声明又定义)
let命令不存在变量提升(const一样)

3. let为块级作用域

在块级作用域下 var和function声明的变量还是会提升到全局作用域下
在块级作用域下 let声明的变量是私有的(const一样)(在if(){}中的function命令只会声明 条件为true时才会定义)

4. let存在暂时性死区

在一个块级作用域中，使用let/const声明变量时，只要变量还没有声明完成前就使用，就会报错，这就时暂时性死区。
它主要是为了减少运行时错误，防止在声明变量未完成之前使用。

5. let命令声明的变量在一个叫script作用域下(const一样)

2. cost命令

const实际上保证的并不是变量的值不得改动，而是变量指向的内存地址所保存的数据不得改动。
主要针对简单类型的数据（number、string、boolean），值就保存在内存地址中，等同于常量。
对于复合类型（对象和数组），变量指向的内存地址只是一个指向实际数据的指针，只能保证指针是固定的，无法控制数据结构是否可变.

const obj = {};
//obj指向一个对象，存储的是一个地址可以为它添加属性
obj.num = 123;
obj.num //123
//不能将它指向另一个对象，会报错，不能将它指向另一个地址。但对象本质是可变的
obj = {}//TypeError: obj是一个只读的

1. const声明一个只读的常量，一旦声明常量的值就不能改变
2. const只声明不赋值，会报错
3. const作用域与let命令相同，只在声明的块级作用域内有效
4. 不提升，同样存在暂时性死区，只能在声明的位置后面使用
5. const声明的常量和let一样不可以重复声明
6. var命令和function命令声明的全局变量，依旧是顶层属性；let,const,class命令声明的全局变量，不属于顶层对象的属性，全局变量将逐步与顶层对象的属性脱钩

二. 解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

A. 数组解构基本用法

1. 这种写法属于模式匹配，只要等号两边的模式相同，左边的变量就会被赋予对应的值

let [a,b,c] = [1,2,3];// 左右对等
console.log(a,b,c);//1,2,3
let [num,[[ab],abc]] = [1,[[2],3]];//左右对等
console.log(num ,ab,abc);// 1,2,3
let [,,name] = ['zhou','zhao','li'];//,,占位
console.log(name);// 'li'
let [aa,,cc] = [1,2,3];
console.log(aa,cc);//1,3
let [nums,...rest] = [1,2,3,4];//...取剩余
console.log(nums,rest);//1,[2,3,4]
let [x,y,...z] = ['a']; //命名未赋值
console.log(x,y,z);//'a',undefined,[]

2. 解构不成功时值会等于undefined

let [aaa] = [];
console.log(aaa);//undefined
let [abc,aab] = [1];
console.log(abc,aab);//1,undefined

3. 不完全解构，等号左边的模式，只匹配一部分等号右边的数组，这种情况下依然解构成功

let [a,b] = [1,2,3];
console.log(a,b);//1,2
let [ab,[[aa],ac]] = [1,[2,3],4];
console.log(ab,aa,ac);//1,2,4

4. 如果等号右边不是数组，转为对象以后不具备Iterator(迭代)接口，或本身不具备Iterator接口,报错

let [a] = 1;
console.log(a);//TypeError: 1 is not iterable
let [b] = false;
console.log(b);//TypeError: 1 is not iterable
let [c] = NaN;
console.log(c);//TypeError: 1 is not iterable
let [d] = undefined;
console.log(d);//TypeError: 1 is not iterable
let [e] = null;
console.log(e);//TypeError: 1 is not iterable
let [f] = {};
console.log(f);//TypeError: 1 is not iterable

5. 解构赋值允许指定默认值

let [abc = true] = [];
console.log(abc);// true
let [x,y = 'a'] = ['b'];
console.log(x,y);// x = 'b',y = 'a'
let [x,y = 'b'] = ['a',undefined];
console.log(x,y);// x = 'a',y = 'b' 
//es6内部使用严格相等运算符（===），判断一个位置是否有值。
//只有当一个数组成员严格等于_undefined_,默认值才会生效
let [x = 1] = [undefined];
console.log(x);// 1
let [x= 1] = [null]; //注意
console.log(x);// null 因为null不严格等于undefined
let [x = 1,y = x ] = [];
console.log(x,y);//x = 1, y = 1
let [x = 1,y = x ] = [2];
console.log(x,y);// x =2,y= 2
let [x = 1, y = x] = [1,2];
console.log(x,y)// x = 1, y = 2
let [x = y ,y = 1]  = [];
console.log(x,y);//ReferenceError : y is not defined  y未定义

B. 对象解构

对象解构与数组的不同：数组按次序排列，变量的取值由位置决定；
而对象的属性没有次序，变量必须与属性同名，才能取到正确的值

// 1. 对象结构的基本用法
let {x,y} = {x :'a', y : 'b'};
console.log(x,y);//'a','b'
let {x1} = {y1 : 'aa',xy1 : 'bb'};
console.log(x1);// undefined 没有对应的属性名取不到值，等于undefined
let {xy : xy2} = {xy : 'aa' , xy2 : 'bb' };
console.log(xy2);// 'aa'
let obj1 = {first : 'hello', last : 'world'};
let {first : f, last : l} = obj1;
console.log(f, l);// 'hello','world'变量名和属性名不一致的情况下，可以

//2. 对象的解构赋值内部机制，
// 先找到同名属性，然后再赋给对应的变量，真正被赋值的是后者不是前者
//真正的解构赋值的形式是 ☟☟☟
let {x : x, y : y } = {x : 'a', y : 'b'};
console.log(x,y);// 'a','b'
let {x1 : xy1} = {x1 : 'b', y1 : 'a'};
console.log(x1,xy1);//undefined 'b'
//x1是匹配的模式，xy1才是变量，真正被赋值的变量

//3. 对象解构可以用于嵌套结构的对象
let obj = {
	x:[
		'吕布',
		{y: '貂蝉'}
	]
};
let {x, x:[a,{y}]} = obj;
console.log(a,y);//吕布 貂蝉
console.log(x); //{'吕布'，{y:'貂蝉'}}
const obj1 = {
	one:{
		name:{
			names: 'san',
			age: '18'
		}
	}
};
let {one,one:{name},one:{name:{names}}} = obj1;
console.log(one);// object name:{name: 'san',age:'18'}
console.log(name);// object {age:'18',names:'san'}
console.log(names)// san
//分别对one、name、names三个属性的解构赋值，最后一次的解构赋值中，只有names是变量，one和names都是模式，不是变量

//4. 嵌套赋值
let obj = {};
let arr = [];
({x:obj.name,y:arr[0]} = {x:'san',y: true});
console.log(obj,arr)//{name:'san',[true]}

let {x1:{y1}} = {y1:'san'};
console.log(y1);//TypeError: Cannot read property 'y1' of undefined
//对象x1属性对应一个子对象，这时解构时x1等于undefined，所以其子对象属性就会报错

//5. 对象的结构赋值可以取到继承的属性
const obj1 = {};
const obj2 = {x:'san'};
Object.setPrototypeOf(obj1,obj2);
const {x} = obj1;
console.log(x); // san

//6. 对象的结构赋值可以指定默认值
let {xy = 3} = {};
console.log(xy);//3
let {x1,yy =1 } = {x1:2};
console.log(x1,yy);//2,1
let {x2:y1 = 3} = {};
console.log(y1);//3
let {x3:y2 = 4} = {x3: 5};
console.log(y2);//5
let {obj1:name='san'} = {};
console.log(name);//san
let {x4 = 5} = {x4 :undefined};
console.log(x4);//5
let {x5 = 6} = {x5: null};
console.log(x5);//null
//默认值生效的条件时对象的属性值严格等于undefined

//7.已经声明的变量用于解构赋值时，可以将整个解构赋值语句放在一个圆括号里
let x;
{x} = {x:1}
console.log(x);//SyntaxError:syntax error
//正确的写法
let y;
({y} = {y:1});
console.log(y)//1

//8. 解构赋值允许等号左边的模式，不放置任何变量名
({} = [true,false]);
({} = 'xy');
({} = []);
// 语法合理可以执行

//9. 对数组进行对象属性的解构
let arr = [1,2,3];
let {0:one,[arr.length-1]:three} = arr;
console.log(one,three);//1,3

C. 字符串的解构赋值

//类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值
let {length:len} = 'hello';
console.log(len);// 5
//此时字符串被转换成了一个类似于数组的对象
let [a,b,c,d,e]= 'hello';
console.log(a,b,c,d,e)//h,e,l,l,o

D. 函数参数的解构赋值

function fn([x,y]){
	return x+y
};
console.log(fn([1,2]));//3
//函数fn的参数表面是数组，但是传参就解构成变量x，y
function fn1({x = 0,y = 0}={}){
	return [x,y]
};
console.log(fn1({x:1,y:2}));//[1,2]
console.log(fn1({x:3}));//[3,0]
console.log(fn1({y:4}));//[0,4]
console.log(fn1({}));//[0,0]
console.log(fn1());//[0,0]
//函数fn1的参数是一个对象，通过对这个对象进行解构，得到变量x，和y的值
//如果解构失败，x，y就等于默认值
function fn2({x,y}={x:0,y:0}){
	return [x,y]
}
console.log(fn2({x:1,y:2}));//[1,2]
console.log(fn2({x:3}));//[3,undefined]
console.log(fn2({y:4}));//[undefined,4]
console.log(fn2({}));//[undefined,undefined]
console.log(fn2());//[undefined,undefined]
//为函数fn2的参数指定默认值，不是为变量x，y指定默认值
function fun3(){
	return [1,2]
};
let [a,b] = fun3();
console.log(a,b)//1,2

map方法详解点这里

E.小结:

1. 实现了Iterator接口的对象能被foreach遍历，
   内部的vaild.current,key方法会一次被调用，
   返回值是key和value,终止条件根据vaild方法的返回而定，一次循环结束之后将调用next进行下一次循环
2. 解构赋值：
   a. 交换变量的值；
   b. 交换变量的值（放在数组或者对象里返回）
   c. 函数参数的定义；
   d. 提取JSON的数据；
   e. 函数参数的默认值；
   f. 遍历 Map解构…

三、进制的转化

// 0b -----> 二进制
// 0o -----> 十进制
// 0x -----> 十六进制
console.log('10的二进制'+0b10)
console.log('10的十进制'+0o10)
console.log('10的十六进制'+0x10)
let num = 20;
console.log(num.toString(8))// 将num转换成8进制
console.log(num.toString(14))// 将num转换成14进制
// 变量数值.toString(数字)-----------数字是指定多少进制的

四、字符串模板

let name = '张三';
console.log(`我是${name}`)// 字符串中嵌入变量使用
let age = `我今年18了！ // 什么鬼？`
console.log(age)
//用反引号(``)表示;如果嵌入变量需要将变量名写在 ${} 之中

五、rest参数和扩展运算符（…）

// rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中,
//注意：rest参数之后不能再有其它参数；
function fn(a,b,...rest){
	console.log(rest)
};
fn(1,2,3,4,5,6,7,8);//3,4,5,6,7,8
// ...可变长参数定义格式：  在函数参数部分 (...参数)
 //...它可以给函数参数传递多个参数，也可以传递一个值
 function fn1(...arr){
	 console.log(arr)	
 };
 fn1(1,2,3,4,5,6,7);
 // 更多的应用可以...复制数组也可以...合并数组
 const arr = [0,1,2];
 const arr0 = [...arr];// 复制
 arr0[3] = 3;
 console.log(arr);//0,1,2
 console.log(arr0);// 0,1,2,3
 const arr1 = [1,2,3];
 const arr2 = [4,5,6];
 const arr3 = [...arr1,...arr2];//合并 
 console.log(arr3);//1,2,3,4,5,6

六、箭头函数

//箭头函数相当于匿名函数，并且简化了函数定义。箭头函数有两种格式，一种只包含一个表达式，连{ ... }和return都省略掉了。
//还有一种可以包含多条语句，这时候就不能省略{ ... }和return：

(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

//加括号的函数体返回对象字面表达式：
参数=> ({foo: bar})

//支持剩余参数和默认参数
(参数1, 参数2, ...rest) => {函数声明}
(参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}

//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

//五种常见的箭头函数
// 1. 参数，两个参数
let a = (x,y) => {return x+y};
console.log(a(1,2));//3
// 2. 没有参数
let b = () => `没有参数的简写`;
console.log(b());// 没有参数的简写
// 3. 可变（多个）参数
let c = (x,y,...z) => {
	z.forEach(val=>console.log(val))
};
console.log(c(1,2,3,4,5,6,7,8))//3,4,5,6,7,8
// 4. 使用三元运算符
let arr4 = [1,2,3,4,5,6,7,8]
let d = arr4.filter(newArr => newArr%2 ==0? newArr:0);
console.log(d);// 2,4,6,8
// 5. 默认值和闭包
let e = (x = 0)=> () => (++x);
let f = e();
console.log(f());//1
console.log(f());//2

学习总结常用的ES6语法（二）