导语：ES6新特性

let声明变量

特点

不允许重复声明； 2. 块儿级作用域（局部变量）； 3. 不存在变量提升； 4. 不影响作用域链；

应用场景：以后声明变量使用 let 就对了；

块儿级作用域（局部变量）

 // var 声明的变量没有局部作用域 // let 声明的变量  有局部作用域 {     var a = 0     let b = 1 } console.log(a)  // 0 console.log(b)  // ReferenceError: b is not defined

不允许重复声明

 // var 可以声明多次 // let 只能声明一次 var m = 1 var m = 2 let n = 3 let n = 4 console.log(m)  // 2 console.log(n)  // Identifier &39; has already been declared

不存在变量提升

 console.log(song); let song = 

不影响作用域链，正常输出值

什么是作用域链：很简单，就是代码块内有代码块，跟常规编程语言一样，上级代码块中 的局部变量下级可用

 {     let school = ;     function f1() {         console.log(school)     }     f1() }

const声明常量

应用场景：声明对象类型使用 const，非对象类型声明选择 let；

const 关键字用来声明常量，const 声明有以下特点：

声明必须赋初始值；标识符一般为大写（习惯）；不允许重复声明；值不允许修改；块儿级作用域（局部变量）；对于数组和对象元素的修改，不算对常量的修改，不会报错。只会因为地址值被修改而报错(重要)

 // 1、声明之后不允许改变     const PI =  PI = 3  // TypeError: Assignment to constant variable.

 // 2、一但声明必须初始化，否则会报错 const MY_AGE  // SyntaxError: Missing initializer in const declaration

 const name = [,,]; name[0]=; console.log(name) //正常输出，不会报错

解构赋值(重要)

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

注意：名字要相同

数组解构

 //1、数组解构 // 传统 let a = 1, b = 2, c = 3 console.log(a, b, c) // ES6,对应赋值 let [x, y, z] = [1, 2, 3] console.log(x, y, z)

剩余运算符...

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

解构字符串

 let [a, b, ...c] = &39;; console.log(a,b,c) //h e [ &39;, &39;, &39; ]

对象解构

 // 对象类型 const F3 = {     name : ,     age : 22,     sex : ,     xiaopin : function(){ // 常用         console.log();     } }

解构指定字段

 // ES6 let { name, age } =  F3 //注意：结构的变量必须是user中的属性 console.log(name, age) //大哥 22

剩余运算符...

 let { name, age, ...f } =  F3 //注意：结构的变量必须是user中的属性  console.log(f)  //{ sex: &39;, xiaopin: [Function: xiaopin] }

解构完成后改名(常用)

 let {xiaopin:han} = F3 han()

简单示例

 let {name, age, sex, xiaopin} = F3; // 注意解构对象这里用的是{} let {xiaopin} = F3 //单独解构函数，常用 xiaopin() console.log(name + age + sex + xiaopin); // 大哥22男 xiaopin(); // 此方法可以正常调用

剩余运算符

拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

... 扩展运算符能将数组或对象转换为逗号分隔的参数序列；

 // 1、拷贝对象,对象赋值 let person1 = {name: , age: 15} let someone = { ...person1 } console.log(someone)  //{name: , age: 15}

 // 2、合并对象 let age = {age: 15} let name = {name: } let person2 = {...age, ...name} console.log(person2)  //{age: 15, name: }

数组操作

 //声明一个数组 ... const tfboys = [&39;, &39;, &39;];  // 声明一个函数 function chunwan() {     console.log(arguments); } chunwan(...tfboys); //相当于chunwan(&39;,&39;,&39;)

数组合并

 //1. 数组的合并 情圣 误杀 唐探 const kuaizi = [&39;,&39;]; const fenghuang = [&39;,&39;];  // 传统的合并方式 // const zuixuanxiaopingguo = kuaizi.concat(fenghuang); const zuixuanxiaopingguo = [...kuaizi, ...fenghuang]; console.log(zuixuanxiaopingguo);

数组克隆

 //2. 数组的克隆 const sanzhihua = [&39;,&39;,&39;]; const sanyecao = [...sanzhihua];// [&39;,&39;,&39;] console.log(sanyecao);

将伪数组转为真正的数组

 //3. 将伪数组转为真正的数组 const divs = document.querySelectorAll(&39;); const divArr = [...divs]; console.log(divArr); // arguments

rest参数

和剩余运算符差不多都是三个点

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments；

形式为：...变量名。arguments对象不是数组，只是可以下标访问而已，而rest参数是一个真正的数组。

ES6的rest参数...args，rest参数必须放在最后面

 // ES5获取实参的方式 function data(){     console.log(arguments); //伪数组 获得arguments类型值 } data(,,,);  //ES6的rest参数...args，rest参数必须放在最后面 function data1(...args){     console.log(args); //直接获取到Array数组类型值，可以进行数组操作 } data1(,,,);

对象Rest

ES9语法

1、Rest 参数与 spread 扩展运算符, 在对象中使Rest参数与spread扩展运算符；

2、正则扩展 简化和增强正则匹配；

1、Rest 参数与 spread 扩展运算符

概述： Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了 像数组一样的 rest 参数和扩展运算符；

 //注意：参数被大括号包裹起来了 function connect({host, port, ...user}) {     console.log(host);     console.log(port);     console.log(user); }  //这是对象形式传参，注意有大括号 connect({     host: &39;,     port: 3306,     username: &39;,     password: &39;,     type: &39; });

执行结果

 127.0.0.1 3306 { username: &39;, password: &39;, type: &39; }

与普通方式对比(就是rest参数的例子)

 function connect(host, port, ...args) {     console.log(host);     console.log(port);     console.log(args); }  connect(&39;, 3306, &39;, &39;, &39;);

执行结果

 127.0.0.1 3306 [ &39;, &39;, &39; ]

数组合并

可以使用剩余运算符进行数组合并

三个点+数组名，用来拆分数组

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

对象合并

ES9语法

 const skillOne = {     q: &39; } const skillTwo = {     w: &39; } const skillFour = {     r: &39;,     // 自己测试，可用     z: &39; } const mangseng = {     ...skillOne,     ...skillTwo,     ...skillFour }; console.log(mangseng) //{ q: &39;, w: &39;, r: &39;, z: &39; }

模板字符串(重要)

反引号``，是在数字1旁边的那个符号，tab按键上边

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

作用：1、能够换行、2、能够在字符串中加入js表达式和调用方法

 // 1、多行字符串，能够换行 let string1 =  `Hey,     can you stop angry now?` console.log(string1) // Hey, // can you stop angry now?

能够在字符串里加上变量和js表达式

 // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。 let name =  let age = 27 let info = `My Name is ${name},I am ${age+1} years old next year.` console.log(info) // My Name is Mike,I am 28 years old next year.

注意，函数要有返回值，不然模板字符串调用函数只能是undefine

 // 3、字符串中调用函数 function f(){     return  } let string2 = `Game start,${f()}` console.log(string2);  // Game start,have fun!

本文内容由小快整理编辑！