ES6常用语法1一解构赋值...

一、解构赋值===常用
例如：结构一一对应，但是左右两边不在乎是否一样的个数
let 左边是一个结构,右边是数据
1.数组的解构赋值

let [a,b]=[10,20];
console.log(a);//10
console.log(b);//20

let[a,b,c]=[10,20]
console.log(a);//10
console.log(b);//20
console.log(c);//undefined,因为c不存在

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

其他的解构方式
例如1.


例如2.

let [a,b]=[1,[2,3]] [1];//[1,[2,3]] [1];属于表达式，先转为数据(运算)，再解构赋值，此处属于下标为1，取值为[2,3]
console.log(a);//2
console.log(b);//3

例如3.结构嵌套结构

例如4.报错，结构不一致

2.对象的解构赋值
1)对象中的左边结构的内容调换位置并不影响相应的赋值，因为对象没有顺序可言，只要属性对应即可

//定义变量 xx和yy 变量
let{n:xx,a:yy} = {n:"lcaicai",a:18};
console.log(xx);//caicai
console.log(yy);//18

2)对象进阶表达方式

//定义变量 a和n
let{n:n,a:a} = {n:"lcaicai",a:18};

//定义的变量名和属性相同的时候可以简写
let{n,a} = {n:"lcaicai",a:18};
console.log(n);//caicai
console.log(a);//18

//定义的变量名和属性不相同的时候不可以简写
//定义变量 age和n
let{n,a:age} = {n:"lcaicai",a:18};
console.log(n);//caicai
console.log(age);//18

//定义变量 random floor
//let {random:random,floor:floor}=Math;//Math是一个对象
//let {random:random,floor:floor}={random:function(){console.log("r")},floor:function(){console.log("f")}
};
let {random,floor}=Math;
console.log(random());

3)解构赋值的应用

function show(obj){
	console.log(`${obj.name}同学是一位${obj.age}岁的可爱的${obj.sex}同学`)//小菜同学是一位18岁的可爱的女同学
}
show({name:"小菜",age:18,sex:"女"})

//使用解构赋值
function show(obj){
let {name,age,sex}=obj
	console.log(`${name}同学是一位${age}岁的可爱的${sex}同学`)//小菜同学是一位18岁的可爱的女同学
}
show({name:"小菜",age:18,sex:"女"})

3.函数参数解构赋值
例如1.单纯的传参，只是字符串相加


例如2.解构赋值
数组

例如3.对象，直接传入属性

属性名不一样必须写全属性和变量名

4.字符串的解构赋值：下标取值===了解

5.解构默认值===在ajax也会应用到
1）数组的默认值：只允许最后一位可以设置默认值
有值就用自己的值，没值就用设定的默认值

//左边设置默认值
let[a,b,c=40]=[10,20]
console.log(a,b,c);//10,20,40

//右边自己有值
let[a,b,c=40]=[10,20,30]
console.log(a,b,c);//10,20,30

2）对象的默认值


简写

3）函数解构的默认值，使用在后端传数据，通过传参的形式拿取相应的数据

例如：函数参数的默认值

例如：设置参数默认值的时候，有实参用实参，没有实参用默认值

例如：解构默认值和参数默认值的结合

4）什么时候会使用默认值?
有且仅有值是undefined的时候，才会使用到默认值（左边设置的默认值）
例如：

二、“…”扩展运算符(ES6新增的运算符：点点点)
作用：应用于拆解 数组（拥有iterator接口）数据
例如：Math中只能传入数字，数组传不了


例如2.如何取出一个数组的最大值？
使用"…"进行拆解

console.log(Math.max(1,2,3))//打印3
console.log(Math.max( ...[4,5,60 ) );//使用...拆解数组，去掉[]符号
console. log(Mat.h.max( 4,5,6 ) ) ;//拆解后的模样，得到一个解构：数据逗号数据逗号数据，打印6

例如3.如何拆解一个字符串

例如4.如何把两个数组组成一个数组，除了使用concat连接以外

三、数组的rest参数,区别于arguments,arguments不能使用forEach，得到的是一个对象，rest可以使用forEach，并且得到的是一个纯数组，可以使用reduce求和
使用在求和，但是参数不确定
学会使用rest操作参数求和的方法
一般求不确定的参数方法：arguments


函数的参数不确定的求法二

function sum(a,b,...c){
//...c代表数组，存储除了其他参数之外的参数，放入数组之中
	console.log(a,b,c)
}
sum(1,2);//1 2 {}
sum(1,2,3);//1 2 {3}
sum(1,2,4,5);//1 2 {4,5}
sum(1,2,6,5);//1 2 {6，5}

//实参的集合写法
function sum(...c){
//...c代表数组，存储除了其他参数之外的参数，放入数组之中
	console.log(c)
}
sum(1,2);// {1,2}
sum(1,2,3);//{1,2,3}
sum(1,2,4,5);//{1,2,4,5}
sum(6,5);//{6，5}

//reduce求和
function sum(...c){
//...c代表数组，存储除了其他参数之外的参数，放入数组之中
	console.log(c.reduce((a,b)=>a+b));//reduce求和函数，固定写法，其中a+b可以写成其它的
}
sum(1,2);// 3
sum(1,2,3);//6
sum(1,2,4,5);//12
sum(6,5);//11

四、let与const
1)let或const定义的变量的特性：暂时性死区：只要当前作用域中声明过某个变量，那么声明使用该变量就会报错（必记）
例如：


如何避免暂时性锁区？
建议：同个作用域所有的定义全部写在最前面
假如不知道需不需要赋值，则可以采取先不赋值，然后再赋值即可
例如：

2）const与let的区别
const是常量，但是不改变引用，都不会报错
例如
报错：

不会报错

const a={
	name:"lala"
}；
	a.age=10;
	console.log(a);

五、不建议使用块级作用域（了解)
大括号{}

单独出现的{}，相当于一个独立的作用域，类似于函数自执行

六、顶层对象（了解）
1）在全局作用域下用var定义的变量等价于windows对象的属性
例如


2）区别于ES6中的let,全局作用域的顶层对象不是windows,但是不会污染全局的变量（好处）

3）不允许无中生有：如果没有使用关键词定义变量，则是挂在全局作用域的
例如：

但是区别其他的，下列不是无中生有


考题，连等号
b是不会被定义的，是b=20

六、总结===>掌握

暂时性锁区
解构赋值 {} []
解构赋值的默认值
函数参数的解构赋值
函数参数的默认值