【JavaScript进阶】ES6的一些新增语法

---

ES6

本节主要学习

1. let、const块级作用域的变量声明
2. 什么是解构赋值
3. 箭头函数的使用
4. 剩余参数的知识
5. 扩展运算符的用法
6. 模板字符串的的语法
7. Set数据结构

一、新增语法

01.块级作用域

• let：新增的声明变量的关键字

  • 使用let声明的变量具有块级作用域（一对大括号中{}）

    对象{}中不产生作用域

  • 这个变量只在块级作用域中有效

  • 没有变量提升（必须先声明再使用）

  • 暂时性死区

    如果作用域下有let声明的变量，那么该作用域下不能再从全局作用域下获取相同的变量

    var num = 10;
    var a = 10;
    if(true){
     console.log(a);		//此处a可以正常输出
     console.log(num);	//此处的num无法获取全局下的num，因为该作用域的num已经与let绑定，暂时性死区
     let num;
    }
    

• const：新增的声明常量的关键字

  • 使用const声明的常量具有块级作用域

  • 声明常量时，必须赋初始值

  • 常量赋值后，不可更改

    简单理解（栈+堆）：栈中的常量不可更改，堆中的常量可更改

    简单数据类型的值存放在栈中，不可更改

    复杂数据类型的地址引用存放在栈中，不可更改

    复杂数据类型的值存放在堆中，可更改

    ---

    const P = 3;	//简单数据类型的值，不可更改
    const arr = [11,22,33];		//复杂数据类型的值
    arr[0] = 111;		// 可更改，因为是直接更改具体地址（arr[0]）的值（堆中）
    arr = [1,2,3];		// 不可更改，因为是直接给常量赋值，修改的是存放在栈中的地址
    

• var、let、const的区别

  var	let	const
  函数级作用域	块级作用域	块级作用域
  变量提升	不存在变量提升	不存在变量提升
  值可更改	值可更改	值不可更改

02. 解构赋值

• 概念：ES6中允许从数组中（对象中）提取值，按照对应位置，对变量赋值

• 数组解构

  将右边的值赋值给左边的变量

  如果没有值，则右边的变量相当于只声明，未赋值，结果为undefined

  let [a,b,c,d] = [1,2,3];		// a==1,	b==2,	c==3,	d == undefined
  

• 对象解构

  将左边的变量与右边的属性名进行匹配，匹配成功，则将属性值赋值给变量

  let {name, age, sex} = {name:"Ruovan", age:24, sex:"male"};	//name=="Ruovan"  age==24  sex="male"
  

  将右边的变量名与左边的变量名匹配，匹配成功，则将右边的属性值复制给左边的属性值

  let {name:myname, age:myage} = {name:"Ruovan", age:24};	//myname=="Ruovan"  myage==24
  

03. 箭头函数

• 作用：简化函数定义

• 语法：() => {}

  const fn = function(a){
      console.log(a);
  }
  //=======================================================
  const fn = (a) => {
      console.log(a);		//如果函数体只有一句代码，则可以省略大括号（如下）
  }
  
  //=======================================================
  const fn = (a) => console.log(a);	//如果函数只有一个形参，则形参外面的小括号也可省略（如下）
  
  //=======================================================
  const fn = a => console.log(a);
  

• 特点：

  • 函数体只有一句代码，则可以省略大括号
  • 函数只有一个形参，则可以省略小括号
  • 箭头函数的this
    • 箭头函数不绑定this关键字，它没有自己的this关键字
    • 如果在箭头函数中使用了this，其将指向箭头函数定义时的位置中的this
  • 箭头函数无法使用arguments参数，但可以使用剩余参数

04.剩余参数

• 概念：可以将一个不定数量的参数表示为一个数组

• 语法：...args

  function func(arg1, ...args){
      // arg1 == 1,	args == [2,3,4]
  }
  func(1,2,3,4);
  //======================================
  //
  const sum = (...args) =>{
      let total = 0;
      arrgs.foreach(item => total += item);
      return total;
  }
  

  搭配解构使用

  let [arr1, ...arrs] = [1,2,3,4,5,6,7];
  // arr1 == 1,	arrs == [2,3,4,5,6,7]
  

05.扩展运算符

• 概念：可以将数组（对象）转为用逗号分隔的参数序列

• 语法：...arr

  let arr = [1,2,3];
  ...arr;		// ...arr== 1,2,3
  console.log(...arr);	// 1 2 3
  // 等价于
  console.log(1,2,3);
  

  合并数组

  let arr1 = [1,3,5];
  let arr2 = [2,4,6];
  let arr3 = [...arr1, ...arr2];	// arr3 == [1,3,5,2,4,6];
  
  // 或者
  arr1.push(...arr2);		// arr1 = [1,3,5,2,4,6];
  

  将伪数组转换为真正的数组

  false_arr = [...false_arr];	// false_arr原来是伪数组
  

06.模板字符串

• 特点：

  • 可以解析变量：$(variable)
  • 可以换行
  • 可以调用函数：${func()}

• 语法：

  let name = `小小`；
  
  let say = `我的名字是${name}`;	//我的名字是小小
  
  

07.Set数据结构

• 概念：类似于数组，但是成员的值都是唯一的，没有重复的值

• Set本身是一个构造函数，用来生产成Set数据结构

  const s = new Set();
  

  可以接受一个数组作为参数，用来初始化

  const s = new Set([1,2,3,4,5,5]);	// 会剔除重复的值，实际上 s=={1,2,3,4,5}
  
  s.size;		// 5, 数据结构的大小
  

• 方法：

  • add(value)：添加某个值，返回Set结构本身
  • delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
  • has(value)：返回一个布尔值，表该值是否为Set的成员
  • clear(value)：清除所有成员，没有返回值

  s.add(6).add(7);++
  
  s.delete(7);	//true
  s.delete(8);	//false
  
  s.has(6);		//true
  s.has(7);		//false
  
  s.clear()		// s.size === 0
  
  s.forEach( value => console.log(value));	//遍历s数据结构的值