ES6----基础知识（1）

简单介绍一下啦！

ES6（ECMAScript6）：
1、ECMAScript 于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。
2、作用：使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言

一、基础知识

1、let的基本用法

（1）在局部代码块内或作用域内有效
（2）变量声明不提升
（3）暂时性死去：初始化声明之前不能使用
（4）不可重复声明：不能在同一作用域或代码块内重复声明，不会覆盖，会报错

let m =1;
{
    let m = 2;
    let bar = "one";
    console.log(m);
    console.log(bar);
}
console.log(m);

2、let与var声明变量的比较

（1）
var的定义可以在代码块外部获取到，因为变量声明提前
let定义的是局部变量，所以代码/作用域外获取不到
（2）
在使用for循环的时候，var定义时，容易产生闭包问题
而let则不会产生闭包问题

3、const的使用

（1）声明常量时使用const
（2）且const声明后不允许常量再次发生改变
（3）使用const在声明常量时需要立即赋值

4、数组的解构赋值

（1）不完全解构

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

（2）集合解构

…是一个扩展运算符，用…结构为数组模式

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

（3）默认值

当变量严格的等于undefined时，就会输出默认值；
如果有匹配值，就输出匹配值
如果匹配的值为null或‘’字符串 就输出null或‘’

let [a,b,c,d='hello']=[1,2,3]
console.log(a,b,c,d);
当默认值为函数时：

function test(){
    console.log("hello");
    return 2;
}
let [x=test] = [1]; //默认值为test函数 因为有哦匹配值 所以输出是1
let [x=test] = []; //默认值为test函数 因为没有匹配值 所以输出test函数
let [x=test()] = [];  //默认值为执行test函数的结果 因为没有匹配值，所以显示默认值 输出是hello和2
let [x=test()] = [1];  //输出1
console.log(x);

注意：
一些特殊的格式的数组结构，根据后面的格式进行格式匹配

5、对象解构赋值—解构对象，进行赋值

（1）对象的属性没有次序，变量必须与属性同名，才能取到正确的值
（2）如果对象需要重命名，就使用：newName

let {username:name,age,gender}={username:"zs",age:12}
console.log(age,gender,name);

（3）嵌套结构
数组种嵌套对象，使用数组解构数组，对象解构对象

let [a,{username}]=["hello",{username:"zs"}];
console.log(a,username);
对象嵌套数组，

//如果只是解构对象  前面直接给friend
let {friend}={friend:["tom","jerry"]}
console.log(friend);

//在数组的基础上进行解构，a,b,对应的是数组里面的值
let {friend:[a,b]}={friend:["tom","jerry"]}
console.log(a,b);

（4）属性扩展

let age = 12;
let name =  'zs';
let gender = "male";
let person={
    name ,//等同于name=name，就可以省略
    age ,
    gender
}
console.log(person);
console.log(person);

6、字符串、数组、布尔值的解构赋值

（1）使用对象解构字符串
解构字符串时，会将字符串转换为string()构造器类型；string的一些属性一样可以使用了；
trim（）方法与String（）包装器原型中的trim方法是一样的

（2）对象解构number

let {valueOf}=123;
console.log(valueOf);
console.log(valueOf  === Number.prototype.valueOf);

（3）对象解构boolean类型

let {toString} =true;
console.log(toString);
console.log(Boolean.prototype.toString === toString);

（4）注意：
string、number、boolean基本数据类型，没有属性和方法，只有值；

在调用string、number、boolean基本数据类型的属性和方法的时候会隐式的将基本数据类型转换为包装器数据类型String、Number、Boolean

7、函数参数的解构赋值

（1）传递参数 不传递显示默认值； 没有默认值就是undefined；
（2）实参传递一个空数组 ，其他值都是undefined ；有默认值显示默认值 ，但是报错Cannot read property

8、解构常见的变量

（1）交换变量
注意：以下情况会报错：
小括号开头的前一条语句和中括号开头的前一条语句

let x=2,y=5;
[x,y]=[y,x];
console.log(x,y);

（2）从函数返回多个对象

function test(){
    return {username:"zs",age:23};
}
let {username,age}=test()
console.log(username,age);

（3）提取数据

let obj={id:23,status:"OK",data:[23,43]};
let {id,status,data:number}=obj;

9、扩展运算符

（1）… 将后面的值展开 逆向运算

let arr=[..."hello"];
console.log(arr);

（2）复制数组，但是存储的地址不同

let arr2=[1,2,3,4,2,3];
let arr3=[...arr2];
//修改arr2的值 并不会改变arr3 因为不是同一个地址
arr2[1]=100;
console.log(arr2,arr3);
console.log(arr2 === arr3);
console.log(...arr2);

（3）赋值对象

let obj={username:"zs",age:23};
let obj2={...obj};
console.log(obj,obj2);
console.log(obj === obj2);
//console.log(...obj);