ES6完整版知识点总结一（持续更新中）ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会）在标准ECM

整理ES6完整知识点，持续更新中......

Babel转码器

 babel
    - 把高级语法转成低级语法的一个工具
    - 安装
        @babel/core @babel/preset-env @babel/preset-react @babel/cli
    - 创建配置文件 .babelrc ,位置是项目的根目录
        {
            "presets":[
                "@babel/env"
            ],
            "plugins":[]
        }
    - 运行
        npx babel xxx.js
        npx babel xxx.js -o build.js
        npx babel src -d dist

1.Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码。

2.Babel的安装和配置：

1.安装Babel npm init -y // 初始化package.json

npm i -D @babel/core

2.安装规则集

npm i -D @babel/preset-env // es6->es5的规则集

3.创建配置文件 .babelrc文件中

{
   "presets":[
       "@babel/env"  
   ]
}

3.命令行运行

安装命令行工具@babel/cli

npm i -D @babel/cli

语法

npx babel target.js / -o buidle.js / -d dir

let

1.ES6新增了let命令用来声明变量，用法类似以var，但是let声明的变量，只能在let命令所在的代码块内有效。

2.用法：let num = 100;

3.let块级作用域

在ES6中，只要出现{}，就会产生作用域，let声明的变量如果在{}中，那么这个变量就是局部变量。如果let声明的变量出现在for循环中，这个变量也是局部变量，只能在for循环的大括号中使用

4.不存在变量提升

如果出现"str not defined"报错信息，说明使用变量在前，声明变量在后。

5.不允许重复声明

如果出现"Identifier 'str' has already been declared"报错信息，说明变量重复声明了。

6.暂时性死区

var count = 1;
{
   console.log(count);
   let count = 3;
}

这时候会报错，报错信息是"Cannot access 'count' before initialization"。

7.顶层对象的属性

ES6为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。

8.globalThis对象

全局环境中，this会返回顶层对象，但是Node模块和ES6模块中，this返回的是当前模块。

函数里面的this，如果函数不是作为对象的方法运行，而是单纯作为函数运行，this会指向顶层对象，但是在严格模式下，这时候的this会返回undefined。

const

1.const声明一个只读的常量，一旦声明，常量的值就不能改变。

2.用法

const url = '我是一个常量';

3.一旦声明，常量的值就不能改变

修改值的时候，会报错："Assignment to constant variable";

如果常量保存是一个对象，那么这个常量其实只保存了一个地址，和对象中的具体内容没关系。

4.let的几个特点，const全都有

变量的结构赋值

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

2.数组结构赋值：定义变量的结构和目标数组的结构一致，那么对应的位置的变量就能获取道对应位置的值。

 // 数组结构赋值的默认值：
 let [a1=2] = [];
 // rest参数
 // 语法：[a1,...rest] = [1,2,3,4,5];
 // 作用：获取匹配后剩余的所有元素。

3.对象的结构赋值：定义变量名称和对象中的属性名一致，那么就能获取到对应属性名的值。

解构也可以用于嵌套解构的对象，这是p是模式，不是变量，因此不会被赋值。

let obj = {
    p:[
       'Hello',
       {y:'world'}
    ]
}
let { p:[x,{y}] } = obj;

// 如果p也要作为变量赋值，可以这样写：
let {p, p:[x, {y} ]} = obj;

修改变量名，uname: uname1

let obj = {
    uname: 'weirui',
    firneds: {
       1:{uname: 'f1'},
       2:{uname: 'f2'}
    }
};

let {uname:uname1,firends:{1:{uname:uname2},2:{uname}}} = obj;
console.log(uname) // f2
console.log(uname1) // weirui
console.log(uname2) // f1

变量名和匹配路径上的模式的区别

// 以uname:uname1为例，如果uname就是最终想获取的值，uname1就是修改变量名；

// 以uname:{1}为例，如果uname时候最终获取值的路径上的名称，uname就是模式；

4.函数的参数也可以使用结构赋值

1.形参解构赋值
2.实参结构赋值

// 函数参数的解构赋值
function demo([a1,a2,a3,a4,a5]){
    console.log(a1,a2,a3,a4,a5)
}
// 调用函数
demo([1,2,3,4,5]);


function demo2({a:first,b}){
    console.log(first,b)
}
demo2({a:1,b:2})

// ...rest参数
function demo3({a,...rest}){
    console.log(a,rest)
}
demo3({a:1,b:2,c:3,d:4})

function demo4([a,...rest]){
    console.log(a,rest)
}
demo4([4,6,8,4])


// 实参的解构赋值
function demo5(a,b){
    console.log(a,b)
}
let obj = {
    pic_huge:'http://xxx.com/111',
    title:'歌曲名称',
    song_id:'12345645',
    author:'歌手名字'
}
let {title,author}=obj
demo5(title,author)


// 默认值
function demo6({a=5,b=6} = {}){
    console.log(a,b)
}
// demo6({b:2})
demo6();

function demo7([a=8,b=9]=[]){
    console.log(a,b)
}
demo7()

5.rest参数

 let [a1,...rest] = [1,2,3,4,5];
 let {user,...rest} ={user:'xx',age:12,sex:'男'};

字符串拓展

1.模板字符串：定义字符串的新的支付方式，这种方式中可以随意换行，可以写变量，这个变量也可以直接被解析。

2.语法`${num}`

// 模板字符串
let obj ={
    str1:'举头望明月'
}
let str2 = '低头思故乡'
let str = `
    床前明月光,
    疑是地上霜。
    ${obj.str1},
    ${str2}。
`;
console.log(str); //  床前明月光,疑是地上霜。举头望明月,低头思故乡。

数组扩展

1.扩展运算符

语法：...num

let arr = [1,2,'a','b',true];
console.log(arr[0],arr[1],arr[2],arr[3],arr[4]); 1,2,'a','b',true
console.log(...arr);  // 1,2,'a','b',true

作用：能把数组中的元素直接释放出来，成为一个个的值
应用场景：

替代函数的apply方法

function demo(a1,a2,a3,a4,a5){
    console.log(a1,a2,a3,a4,a5)
}
// demo.apply(null,arr)
demo(...arr)

复制数组或者复制对象

let arr2 = [1,2,3];
let arr3 = [...arr2];
// 浅拷贝
console.log(arr3,arr2); / [1, 2, 3] [1, 2, 3]

let arr4 = [{name:'kevin'},1,'a'];
let arr5 = [...arr4];
arr4[0].name='lily';
arr4[1] = 2;
console.log(arr5[0].name); // lily
console.log(arr5[1]); // 1

let obj3 = {
    a:1,b:2
}
let obj4 = {...obj3}
console.log(obj4); // {a:1,b:2}

合并数组或者合并对象

let obj = {
    a:1,
    b:2,
    c:3
}
let obj2 = {
    d:4,
    c:5
}
obj2 = {...obj2,...obj};
console.log(obj2) // {d: 4, c: 3, a: 1, b: 2}

扩展运算符和rest参数有一个显著的区别是：扩展运算符永远出现在等号的右边，或者直接使用，rest参数一般都在等号的左边。
实现了Iterator接口的对象，都可以用扩展运算符转为真正的数组

// 实现了 Iterator 接口的对象,都可以用扩展运算符转为真正的数组
function demo2(){
    console.log(arguments)
    let arr = [...arguments];
    arr.push(10,11,12)
    console.log(arr)
}
demo2(1,2,3,4,5,6,7,8,9);

Map和Set结构，Generator函数原生具备Iterator接口的数据结构如下：Array Map Set String TypedArray 函数的arguments对象 NodeList对象

2.`Array.from()`：将数组转化为真正的数组

Array.from()方法用于将两类对象转为真正的数组，类似数组的对象（array-like object）和可遍历（iterable）的对象，包括ES6新增的数据结构Set和Map。

let obj5 ={
    0:'a',
    1:'b',
    2:'hello',
    length:3
}
let arr6 = Array.from(obj5)
console.log(arr6); // ['a', 'b', 'hello']

3.`Array.of()`：方法用于将一组值，转换为数组

// Array.of()
let arr7 = new Array(3);
console.log(arr7) // [empty × 3]
let arr8 = new Array(9,4);
console.log(arr8);// [9, 4]
let arr9 = Array.of(2)
console.log(arr9) // [2]
let arr10 = Array.of(3,4)
console.log(arr10) // [3, 4]

4.数组实例的`fill()`方法使用给定值填充一个数组

let arr11 = new Array(5).fill(3);
console.log(arr11) // [3, 3, 3, 3, 3]

ES6完整版知识点总结一（持续更新中）