ES6语法新特性(上)

1.什么是ES6？

ES 全称 ECMAScript，它是由欧洲计算机协会(ECMA)制定的一种脚本语言的标准化规范。

ES6是给 JavaScript 制定的一种语法规范，你写 js 的时候如果按照 ES6 中的规范去写，写的代码不仅简洁而且效率很高。

ES6 发行于 2015 年 6 月，由于这个版本的语法规范极大地提高了前端开发人员的效率，所以在前端圈子中流行开来，时至今日热度依旧不减。

2.let和const

2.1 let

let 是 ES6 中新增加的用于声明变量的关键字，它具有如下特点：

2.1.1 不存在变量提升

不能先使用后声明

/**
以下是错误的声明变量方法
*/
num = 20;
let num = 30;
console.log(num);
/**
正确的变量的声明方式
*/
let res = 40;
res += 10;
console.log(res);
1
2
3
4
5
6
7
8
9
10
11
12

2.1.2 只在块级作用域生效

错误的使用方式：

{
    let num = 30;
}
console.log(num);

1
2
3
4
5

正确的使用方式

{
	let res = 40;
	console.log(res);
}
1
2
3
4

变量的生命周期和有效域和C、C++、java等语言类似，例如以下代码

var num = 20;
{
    let num = 30;
}
console.log(num);
//最终输出为20
1
2
3
4
5
6

从上面的例子中我们可以看到，let 定义的变量只能在所在的 { } 中使用，不受外界干扰，也不会干扰外界。

2.2 const

2.2.1 const 也是 ES6 中新增加的用于声明变量的关键字，它主要用来声明常量。它具有如下特点：

const name;
console.log(name);
/*
控制台会报出以下错误
Uncaught SyntaxError: Missing initializer in const declaration
*/
1
2
3
4
5
6

/* 正确的常量声明方式*/
const name = "界染清";
console.log(name);
/*
控制台输出
界染清
*/
1
2
3
4
5
6
7

2.2.2 只在块级域生效

let name = "界染清";
{
	const name = "kkk";
}
console.log(name);
/*
控制台输出：界染清
*/
1
2
3
4
5
6
7
8

从上面的例子中我们可以看到，const 和let 定义的变量一样只能在所在的 { } 中使用，不受外界干扰，也不会干扰外界。

2.2.3 和C++中的const，Java中的final一样赋值后，值不能修改

用const修饰的对象时，可以修改对象中属性的值

2.3 var、 let、 const区别

1. var 声明的变量作用域在所处的函数内，let 和 const 声明的变量作用域在所处的大括号内。
2. var 声明的变量存在变量提升现象，let 和 const 声明的变量不存在变量提升现象。
3. const 声明变量时必须要赋值，赋值之后不能再重新赋值。

3.箭头函数

• ( ) 代表函数

• { } 代表函数体

• const ft = ()=>{} 代表把一个函数赋值给 ft

• ft() 调用该函数

• 3.1.1 无参数，函数体只有一行代码

• // 常规写法
  function print() {
      console.log("Hello World!");
  }
  // 箭头函数
  const ft = ()=> console.log("Hello World!");
  // 调用函数
  ft();
  
  /*
  控制台输出：
  Hello World!
  Hello World!
  */
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

• 3.1.2 有参数，函数体只有一行代码

•  // 常规写法
    function print(a, b) {
        return a + b;
    }
    // 箭头函数
    const ft = (a,b) => a + b;
    // 调用函数
    console.log(ft("Hello ","World!"));
  /*
  控制台输出：Hello World!
  */
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

• 3.1.3 只有一个参数时，可以去掉大括号

• // 常规写法
  function print(name) {
      return name + " Hello";
  }
  // 箭头函数
  const ft = name => name + " Hello";
  // 调用函数
  console.log(ft("JavaScript"));
  
  /*
  JavaScript Hello
  */
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12

  3.1.4 多个参数时 函数体有多行

  // 箭头函数：获取年龄最大值
  const ft = (userArray, sex) => {
      let ageArray = userArray.filter(user => user.sex == sex).map(item => item.age);
      return Math.max(...ageArray);
  }
  
  let userArray = [{ name: '张三', sex: '男', age: 18 },
  { name: '李四', sex: '女', age: 19 },
  { name: '王五', sex: '男', age: 21 }]
  // 调用函数
  console.log(ft(userArray, '男'));
  
  /*
  控制台输出 21
  */
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

4.解构

解构就是把数据结构进行分解，然后为定义的变量赋值。

4.1.1 数组解构

获取数组中数值的传统方式

const num =[0,1,2,3];
const a= num[0];
const b= num[1]
console.log(a + b);
1
2
3
4

解构

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

4.2.1 对象解构

获取对象中数据的传统方式

let user = {name: "张三", age: 19};
let name = user.name;
let age = user.age;
console.log("姓名:" + name + ",年龄:" + age);
1
2
3
4

解构

let { name, age } = { name: "张三", age: 19 };
console.log("姓名:" + name + ",年龄:" + age);
1
2

5.剩余参数

5.1 使用

const print = (num, ...args) => {
    console.log(num);
    console.log(args);
}
print(0, 1, 2)
/*
控制台输出：
0
[1,2]
*/
1
2
3
4
5
6
7
8
9
10

5.2 合并数组

let u1 = ['张三', '李四', '王五'];
let u2 = ['张无忌', '赵敏', '周芷若'];
let u3 = [...u1,...u2];
console.log(u3);
/*
控制台输出：
['张三','李四','王五','张无忌','赵敏','周芷若']
*/
1
2
3
4
5
6
7
8

5.3 和解构的连用

let users = ['张三', '李四', '王五'];
let [u1, ...u2] = users;
console.log(u1);
console.log(u2);  
/*
张三
['张三','李四']
*/
1
2
3
4
5
6
7
8

6.可选链

可选链是一种 访问嵌套对象属性的防错误方法 。即使中间的属性不存在，也不会出现错误。 如果可选链 ?. 前面部分是 undefined 或者 null，它会停止运算并返回 undefined。

我们要想获取一个嵌套对象的属性，一般会这样写：

let res = {
      data: {
          data: {
              success: true,
              id: "102154"
          }
      }
  }
  if (res && res.data && res.data.data.success) {
      let id = res.data.data.id;
      console.log(id);
  }

1
2
3
4
5
6
7
8
9
10
11
12
13

使用可选链

let res = {
        data: {
            data: {
                success: true,
                id: "102154"
            }
        }
    }
    if (res?.data?.data?.success) {
        let id = res?.data?.data?.id;
        console.log(id);
    }

1
2
3
4
5
6
7
8
9
10
11
12
13