https://es6.ruanyifeng.com/#docs/destructuring
1）let 和const
- let和const（const 在声明变量的时候必须得有初始值）
- 声明的变量不会进行变量提升
- 在同一个作用域，不允许变量重名
- 有块级作用域的概念
- 暂时性死区
console.log(a); //Cannot access 'a' before initializationlet a;
报错：Identifier ‘a’ has already been declared；（标识a已经被声明过了）let a=3; let a=4;
但是这个不会被报错，在不同的作用域中，可以重名
let a=5;
{
let a=3;
console.log(a);
}
console.log(a)
let a=3;
{
let a=4;
console.log(a);
}
console.log(a);
在es5中 用typeof 检测一个没有声明过的变量，不会报错，而会得到一个“undefined”，在es6中，用typeof 检测的时候 会直接报错,因为有了暂时性死区的概念
typeof a;
let a=3;
2）解构赋值
1）数组的解构赋值
- 要求左右的结构和顺序保持一致
- 如果只需要取个别项，我们不需要的项，也需要用逗号进行占位
- 如果右边没有对应的值，获取的结果就是undefined
我们也可以进行默认赋值
let [a,b,c]=[1,2,3]; console.log(a,b,c);let [a,[b,c],d]=[1,[2,3],4]let [a,,c=10]=[4,5]let a=1,b=2; [a,b]=[b,a]; //交换a和b的值 a的值给b b的值给a console.log(a); console.log(b);2)对象的解构赋值
解构的时候是按照属性名进行的，所以属性名得保持一致，如果后面想改也可以起别名
如果没有此属性，对应的值就是undefined
- 也可以用等号赋默认值，如果右边绝对等于undefined，那就走默认值。（=） ``` let {age=10}={name:”li”};
- 解构出来的值，不想用原有的属性名字，可以起一个别名。（用：）
let {name:a,age}={name:”li”,age:10}
- 如果属性名和属性值相同，可以省去一个
function fn(){}; let obj={ fn }
<a name="3ZUii"></a>
#### 3)函数的参数解构赋值
function fn([x=10,y=12]){ console.log(x,y)
}
fn([1,2])
```
function fn(x=10,y=12){
console.log(x,y)
}
fn()
3）展开运算符（剩余运算符）
1)展开运算符【形参】
想要拼接数组
var ary1=[1,2,3];
var ary2=[4,5,6];
var ary3=ary1.concat(ary2);
//==========>想要实现数组的拼接，还可以用扩展运算符
var ary4=[...ary1,...ary2]
想要拼接对象
var obj1={name:"li"}
var obj2={age:10}
var obj3=Object.assign(obj1,obj2)
console.log(obj3);//{name: "li", age: 10}
//=============还可以
var obj={...obj1,...obj2};
console.log(Math.max(...arr));//展开运算符
2)剩余运算符【实参的时候】
function fn(...arg){
console.log(arg);//[1,2,3]; 把剩余的值放到数组中装起来
}
fn(1,2,3)
//c拿数组第一项，剩余的所有项都放在数组里给d
let arr=[1,2,3];
let [c,...d]=arr; //剩余运算符
console.log(c,d);//1,[2,3]
4)箭头函数
- 箭头函数，如果返回值是一个对象，简写的时候，需要加一个小括号，不然返回值不是此对象，而是undefined
- 箭头函数中没有this，如果用了this,会按照作用域链进行查找
- 箭头函数中也没有arguments，不过我们可以用剩余运算符
var fn=(x)=>({name:"li"})
5)类
箭头函数不能当成构造函数
let B=()=>{console.log(1)}; //B is not a constructor
let f=new B();
// function fn(x,y){
// this.x=100;
// this.y="y";
// }
// fn.prototype.getX=function(){
// return "getX"
// }
// fn.mm="mm";
class fn{
constructor(x,y){
this.x=100;
this.y="y";
}
getX(){
return "getX"
}
static mm="mm";
}
var f1=new fn(1,2);
console.log(f1);
//fn(); 类不能当成普通函数运行 Class constructor fn cannot be invoked without 'new'
类的继承
class A{
constructor(x,y){
console.log("a--"+x)
this.x=100;
}
getX(){
console.log("gex");
}
static a=200;
static b=200;
y="y";
}
var a=new A();
class B extends A{
constructor(a){
//super(); 用在构造函数中，必须在使用this之前调用 用来访问父对象的函数
super(100);// 相当于call继承
this.f=a
}
getZ(){
console.log("z")
}
ss(){
super.getX();//super 还可以调用A类原型上的方法
}
}
let b=new B(1);
6）Set 数据结构
Set 是一个内置类，是一种数据结构，不是数据类型，和数组类似。
Set 实例中的每项，不允许重复，（在识别重复的时候，不能进行数据转换，”1”和1 认为是不重复项）
Set（）里面的参数可以是：
- 数组
- 类数组
- 字符串 ``` var a=new Set([4,5,6]); console.log(a);//{4,5,6};
var a=new Set(“abcd”); console.log(a);//{“a”,”b”,”c”,”d”};
利用Set不重复项的特点，可以完成数组去重
var ary=[1,2,1,1,1,3]; var a=new Set(ary);//{1,2,3} var a=[…a];
Set 原型上的一些方法：
- add 添加项
- delete 删除
- clear 清空
- has（a）;
var a=new Set([1,2,3]); a.add(8); console.log(a);//{1,2,3,8}; a.has(2);//返回值是布尔，有的话，返回true，没有返回false a.delete(“2”);//返回值是布尔，true代表删除掉 a.clear();//删除所有项;//{}
数组<br />1）Array of (1,2,3);//把一组数转为数组
var ary=[1,2,1,1,1] var ary2=Array.of(…new Set(ary))
2）Array from() 把类数组转为数组
var ary=Array.from(new Set([1,2,3]));
<a name="z11rm"></a>
### 7) ES6新增 普通对象 如果属性名和属性值的变量名字相同，我们可以像以下这样简写👇
```javascript
const fn=function fn(){
console.log(this);
}
let obj={
name:"OBG",
//fn:fn;//
fn
}
如果对象的属性是一个函数可以这样简写👇
// let obj={
// fn:function(){
// console.log("哈哈");
// }
// }
// obj.fn();
// 简写方式
let obj={
fn(){
console.log("哈哈");
}
}
obj.fn();
若有收获，就点个赞吧
0 人点赞
