【Web前端】ES6新特性详解

1. let和const

1.1 let声明变量

var 和 let 关键字的区别：

关键字	是否能重复声明变量	是否有块作用域	是否有变量提升	是否影响顶层对象
var	√	×	√	√
let	×	√	×	×

1.let 不允许重复声明变量

// var允许重复声明变量
var a = 10;
var a = 10; 

// let不允许重复声明变量
let a = 10;
let a = 10; // Uncaught SyntaxError: Identifier 'a' has already been declared

2.let 声明的变量有块作用域

// var声明的变量，没有块作用域
if (true) {
   
   
  var a = 10;
  console.log(a); // 10
}

console.log(a); // 10

// let声明的变量，有块作用域
if (true) {
   
   
  let a = 10; 
  console.log(a); // 10
}

console.log(a); // Uncaught ReferenceError: a is not defined

3.let 声明的变量，没有变量提升

/* 由于有变量提升，以下代码会转换成如下：
var a;
console.log(a);
a = 10; */

// var声明的变量，有变量提升
console.log(a); // undefined
var a = 10;

// let声明的变量，没有变量提升
console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 10;

4.let 声明的变量，不会与顶层对象挂钩

顶层对象：在broswer环境中，指window对象；在node环境中指global对象

// var声明的变量，会与顶层对象挂钩
var a = 10;
console.log(window.a); // 10

// let声明的变量，不会与顶层对象挂钩
let a = 10;
console.log(window.a); // undefined

1.2 const声明常量

const 拥有 let 的全部特性，与 let 不同的是，const声明的变量是常量，一经声明，无法修改。

1.const声明的变量无法修改

// let声明的变量，可以修改
let a = 10;
a = 20;

// const声明的变量，无法修改
const a = 10;
a = 20; // Uncaught TypeError: Assignment to constant variable

2.const声明的变量必须声明时就初始化

const a; // Uncaught SyntaxError: Missing initializer in const declaration

3.当变量是对象时，虽然不能修改对象名，但是可以修改对象的内部属性

解释：因为对象是引用类型，对象名存的是一个地址，而改变对象的内部属性，并没有改变地址本身。

const obj = {
   
   
  name: "Bill",
  age: 18
};

obj.age = 28;
console.log(obj); // {name: 'Bill', age: 28}

let 和 const 的使用场景：默认情况下使用 const，在知道变量值需要修改时使用 let

2. 模板字符串

模板字符串：其实就是占位符，这样就可以简化字符串拼接。

1.用于字符串拼接

const name = "Bill";
const age = 18;
const person = `my name is ${
     
     name}, my age is ${
     
     age}`;
console.log(person); // my name is Bill, my age is 18

2.支持使用表达式

// 1.支持四则运算
const a = 10;
const b = 20;
const result = `result is ${
     
     a + b}`;
console.log(result); // result is 30

// 2.支持三元表达式
const isEqual = `结果是${
     
     a === 10 ? "相等" : "不相等"}`;
console.log(isEqual); // 结果是相等

3. 解构赋值

解构赋值：用于赋值运算，可以简化赋值。

3.1 数组的解构赋值

1.简化数组的赋值

const arr = [1, 2, 3];

const [a, b, c] = arr; // 等价于 a=1, b=2, c=3
console.log(a, b, c); // 1 2 3

const [d, , e] = arr; // 等价于 d=1, e=3
console.log(d, e); // 1 3

2.嵌套情况下的数组赋值

const arr = [1, [2, 3, 4], 5];
const [a, [b, c], d] = arr; // 等价于 a=1, b=2, c=3, d=5
console.log(a, b, c, d); // 1 2 3 5

3.2 对象的解构赋值

1.简化对象的赋值

const obj = {
   
   
  name: "Bill",
  age: 18
};

const {
   
    name, age } = obj; // 等价于 name=obj.name, age=obj.age
console.log(name, age); // Bill 18

2.声明的变量名需要与对象的属性名一致时，否则在对象的属性名中匹配不到，得到的值是undefined

对象的解构赋值，变量赋值时会与属性名匹配，不会按照声明变量的前后顺序匹配

const obj = {
   
   
  name: "Bill",
  age: 18,
  addr: "Shanghai"
};

const {
   
    name, addr, a } = obj; // 等价于 name=obj.name, addr=obj.addr
console.log(name, addr, a); // Bill Shanghai undefined

3.嵌套情况下的对象赋值

const obj = {
   
   
  name: "Bill",
  age: 18,
  other: {
   
   
    addr: "Shanghai",
    email: "xxx@163.com"
  }
};

const {
   
   
  name,
  age,
  other: {
   
    email }
} = obj; // 等价于 name=obj.name, age=obj.age, email = obj.other.email
console.log(name, age, email); // Bill 18 xxx@163.com

4. 函数扩展

4.1 参数默认值

参数默认值：不传参时，函数使用默认的参数值，传参后会覆盖默认值。

function fn(a, b = 10) {
   
   
  console.log(a, b);
}

fn(10); // 10 10
fn(10, 20); // 10 20

4.2 剩余参数

剩余参数：也称可变参数，剩余参数语法允许将一个不定数量的参数表示为一个数组。

function fn(a, b, ...args) {
   
   
  console.log(args);
}

fn(10, 20, 30, 40, 50); // [30, 40, 50]

4.3 箭头函数

箭头函数：箭头函数可用于简化匿名函数的定义，使书写更为简洁。

1.无参数、无返回值的箭头函数

// 匿名函数写法，无参数、无返回值
const fn = function () {
   
   
  console.log(100);
};

fn(); 

// 箭头函数写法，无参数、无返回值
const fn = () => {
   
   
  console.log(100);
};

fn();

2.有返回值的箭头函数

// 匿名函数写法，有返回值
const fn = function () {
   
   
  console.log(100);
  return 100;
};

// 箭头函数写法，有返回值

// 1.函数内部只有 return，无其它内容
const fn1 = () => 100; 
const fn2 = () => ({
   
    name: "Bill", age: 18 }); // 返回的是对象时，要使用小括号包裹起来

// 2.函数内部除了有 return，还有其它内容
const fn3 = () => {
   
   
  console.log(100);
  return 100;
};

3.带参数的箭头函数

// 匿名函数写法，带参数
const fn = function (a, b) {
   
   
  console.log(a + b);
  return a + b;
};

// 箭头函数写法，带参数

// 1.只有一个参数时，可以省略括号
const fn1 = a => {
   
   
  console.log(a);
};

const fn2 = a => a;

// 2.带多个参数时，不可省略括号
const fn3 = (a, b) => a + b;

const fn4 = (a, b) => {
   
   
  console.log(a + b);
  return a + b;
};

4.箭头函数没有this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />