ES6 新特性有哪些

1. 变量声明 let/const

let 特性：1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量

const 特性：1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。

2. 箭头函数

箭头函数为 JavaScript 编程带来了更简洁、更清晰的代码风格，并且在处理作用域和 this 问题时提供了更直观的方式。

箭头函数特性：1. 消除了函数的二义性。2. 简洁的语法。3. 箭头函数不会创建自己的 this 上下文，而是继承外层函数的 this 值。这在处理回调函数和对象方法时非常有用，可以避免 this 指向错误的问题。4. 箭头函数不能使用 new 操作符来创建实例，因为它们没有自己的 prototype 属性。5. 箭头函数没有自己的 arguments 对象，但可以通过剩余参数来获取参数。

let fn = () => {};

3. 模板字符串

ES6 中的模板字符串（template string）是一种增强版的字符串，用反引号（`）标识。模板字符串使得字符串的拼接和处理更加方便、灵活和易读，尤其在涉及多行文本和动态内容插入的情况下，可以减少代码的复杂性和冗余度。

模板字符串特性：1. 将变量名写在 ${} 之中，大括号内部可以放入任意的 JavaScript 表达式，包括运算、引用对象属性或调用函数等。2. 无需使用换行符 \n 或拼接，直接在反引号内换行即可，所有的空格和缩进都会被保留在输出之中。3. 如果要输出包含特殊字符（如换行符、Unicode 编码等）的原始字符串，可以使用 String.raw 方法。4. 在模板字符串中，如果需要使用反引号本身，要在前面用反斜杠转义，即 \`` 等价于 "。同样，如果要在模板字符串中引入字符 $和{，也需要用反斜杠转义，即 $和{`。

let job = "程序员",

  salary = "100";

let say = `我的工作是${job}, 我每月可以挣${salary}大洋，真开心！`;

4. 解构赋值

ES6 中的解构赋值是一种方便的数据提取和赋值方式，它允许从数组或对象中提取值，并将其赋给变量。

数组的解构赋值

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

console.log(a); // 1

console.log(b); // 2

console.log(c); // 3



// 可以跳过某些位置

let [x, , z] = [4, 5, 6];

console.log(x); // 4

console.log(z); // 6



// 可以使用剩余操作符 `...` 收集剩余的元素

let [m, n, ...rest] = [7, 8, 9, 10, 11];

console.log(m); // 7

console.log(n); // 8

console.log(rest); // [9, 10, 11]

对象的解构赋值

let { name, age } = { name: "John", age: 30 };

console.log(name); // John

console.log(age); // 30



// 可以给变量起不同的名字

let { name: myName, age: myAge } = { name: "Jane", age: 25 };

console.log(myName); // Jane

console.log(myAge); // 25



// 可以设置默认值

let { city = "New York" } = {};

console.log(city); // New York

5. 扩展运算符

ES6 的扩展运算符（...）是一种方便的操作符，它主要有以下功能：

展开数组或对象

console.log(...[1, 2, 3]); // 输出：1 2 3

console.log(1, ...[2, 3, 4], 5); // 输出：1 2 3 4 5



let obj1 = { foo: "bar", x: 42 };

let clonedObj = { ...obj1 };

console.log(clonedObj); // 输出：{ foo: "bar", x: 42 }

数组拷贝

let arr = [1, 2, [3, 4]];

let arr1 = [...arr];

arr1[2].push(5);

console.log(arr); // 输出：[1, 2, [3, 4, 5]]

console.log(arr1); // 输出：[1, 2, [3, 4, 5]]

合并数组或对象

var arr1 = [0, 1, 2];

var arr2 = [3, 4, 5];

var arr3 = [...arr1, ...arr2];

console.log(arr3); // 输出：[0, 1, 2, 3, 4, 5]

函数参数传递

function sum(x, y, z) {

  return x + y + z;

}

const numbers = [1, 2, 3];

console.log(sum(...numbers)); // 输出：6

与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];

console.log(first); // 输出：1

console.log(rest); // 输出：[2, 3, 4, 5]

字符串转字符数组

const title = "china";

const charts = [...title];

console.log(charts); // 输出：['c', 'h', 'i', 'n', 'a']

数组去重（结合 Set）

const arrayNumbers = [1, 5, 9, 3, 5, 7, 10, 4, 5, 2, 5];

const newNumbers = [...new Set(arrayNumbers)];

console.log(newNumbers); // 输出：[1, 5, 9, 3, 7, 10, 4, 2]

6. 剩余参数

ES6 中的剩余参数语法允许将不定数量的参数表示为一个数组。

其语法形式为：在函数的最后一个命名参数前加上三个点（...），后面跟着参数名，例如：function(a, b,...theArgs){ // 函数体 } ，在这个例子中，theArgs 将收集该函数的第三个参数及以后的所有剩余参数。

function fun1(...theArgs) {

  alert(theArgs.length);

}

fun1(); // 弹出"0", 因为 theArgs 没有元素

fun1(5); // 弹出"1", 因为 theArgs 只有一个元素

fun1(5, 6, 7); // 弹出"3", 因为 theArgs 有三个元素



function multiply(multiplier,...theArgs) {

  return theArgs.map(function(element) {

    return multiplier * element;

  });

}

var arr = multiply(2, 1, 2, 3);

console.log(arr); // (2, 4, 6)



function sortRestArgs(...theArgs) {

  var sortedArgs = theArgs.sort();

  return sortedArgs;

}

alert(sortRestArgs(5, 3, 7, 1)); // 弹出 1, 3, 5, 7



// 剩余参数可以被解构

function f(...(a, b, c)) {

  return a + b + c;

}

f(1) // NaN (b 和 c 是 undefined)

f(1, 2, 3) // 6

f(1, 2, 3, 4) // 6 (第四个参数没有被解构)

7. 类

ES6 引入了类（class）的概念，使面向对象编程在 JavaScript 中更加清晰和直观。

详情参考 前端 js 经典：class 类

8. 模块化

ES6 引入了模块化的概念，这使得 JavaScript 代码的组织和管理更加清晰和高效。

一个模块就是一个独立的 JavaScript 文件。模块内的变量、函数、类等默认是私有的，只有通过 export 关键字导出的部分才能被其他模块使用。

导出

// 导出单个变量或函数

export const num = 42;

export function add(a, b) {

  return a + b;

}



// 也可以将多个导出写在一处

const str = "Hello";

function subtract(a, b) {

  return a - b;

}

export { str, subtract };

导入

import { num, add } from "./module1";

9. promise

详情跳转 前端 JS 经典：Promise 详解

10. map/set

在 ES6 中，Map 和 Set 是两种新的数据结构，它们为数据的存储和操作提供了更强大和灵活的方式。

Map：Map 是键值对的集合，其中键可以是任何类型的值（包括对象），而不仅仅是字符串。

// 创建

let myMap = new Map();

myMap.set("key1", "value1");

myMap.set(2, "value2");

myMap.set({ name: "John" }, "value3");



// 获取

console.log(myMap.get("key1"));

console.log(myMap.get(2));

console.log(myMap.get({ name: "John" }));



// 检查键是否存在

console.log(myMap.has("key1"));



// 删除键值对

myMap.delete("key1");



// 获取 Map 的大小

console.log(myMap.size);



// 遍历 Map

for (let [key, value] of myMap) {

  console.log(key + ': ' value);

}

Set：Set 是一种不允许重复值的数据结构。

// 创建

let mySet = new Set();

mySet.add(1);

mySet.add(2);

mySet.add(2); // 重复添加不会有效果

mySet.add("Hello");



// 检查元素是否存在

console.log(mySet.has(1));



// 删除元素

mySet.delete(1);



// 获取 Set 的大小

console.log(mySet.size);



// 遍历 Set

for (let item of mySet) {

  console.log(item);

}

11. symbol

在 ES6 中，Symbol 是一种新的基本数据类型，它的主要目的是创建独一无二的值，通常用于对象的属性名，以避免属性名冲突。

let sym1 = Symbol();

let sym2 = Symbol("description"); // 可以提供一个可选的描述字符串

12. 迭代器和生成器

在 ES6 中，迭代器（Iterator）和生成器（Generator）为处理数据的遍历和生成提供了更强大和灵活的方式。

迭代器（Iterator）

迭代器是一个具有 next() 方法的对象，每次调用 next() 方法都会返回一个对象，该对象包含两个属性：value （当前迭代的值）和 done （一个布尔值，表示迭代是否完成）。

// 创建一个简单的迭代器

function createIterator(arr) {

  let index = 0;

  return {

    next() {

      if (index < arr.length) {

        return { value: arr[index++], done: false };

      } else {

        return { value: undefined, done: true };

      }

    },

  };

}



let iterator = createIterator([1, 2, 3]);

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

console.log(iterator.next());

生成器（Generator）

生成器是通过 function\* 定义的函数，可以通过 yield 表达式暂停和恢复执行，并且可以逐步生成一系列的值。

function* generateNumbers() {

  yield 1;

  yield 2;

  yield 3;

}



let generator = generateNumbers();

console.log(generator.next());

console.log(generator.next());

console.log(generator.next());

console.log(generator.next());