Skip to content

ES6 中有哪些新的 JS 特性?

ES6全称ECMAScript 6.0,是JavaScript的下一个版本标准,2015.06发版。ECMAScript和 JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。 https://github.com/lukehoban/es6features

1. let和const关键字

这两个关键字都允许在块作用域中声明变量,其中Const用于声明不可变的变量。这解决了以往var关键字带来的变量提升和全局作用域污染的问题。

2. 模板字符串

模板字符串是一种新的字符串声明方式,它允许嵌入变量和表达式。与传统的字符串连接相比,模板字符串提供了更为直观和方便的操作方式。

js
const name = "Welpher";
console.log(`Hello, ${name}!`);

3. 解构赋值

解构赋值允许我们从对象或数组中提取值,并直接赋值给变量。这极大地简化了数据处理,并让代码更加清晰。

js
const { name, age } = person;
// list matching
var [a, , b] = [1,2,3];
// Can be used in parameter position
function g({name: x}) {
  console.log(x);
}
g({name: 5})

4. 箭头函数

箭头函数提供了一种更简洁的函数定义方式,并在处理this关键字时表现更为一致。它主要用于简单的函数体和单一表达式。

js
// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
var pairs = evens.map(v => ({even: v, odd: v + 1}));

// Statement bodies
nums.forEach(v => {
  if (v % 5 === 0)
    fives.push(v);
});

// Lexical this
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
}

5. Promises

Promises为异步编程提供了一种更优雅的解决方案。通过使用.then()和.catch()方法,你可以更方便地管理异步操作和错误处理。

6. 模块化导入和导出

ES6引入了模块化的概念,使得JavaScript代码可以更加结构化和可复用。使用import和export关键字,你可以轻易地在不同文件之间共享代码。

js
// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
    return Math.log(x);
}
js
// app.js
import ln, {pi, e} from "lib/mathplusplus";
alert("2π = " + ln(e)*pi*2);

7. 默认参数和剩余参数

默认参数允许在函数参数不足时自动填充默认值,而剩余参数则允许你收集函数的额外参数。

js
function f(x, ...y) {
  // y is an Array
  return x * y.length;
}
f(3, "hello", true) == 6

8. 展开运算符

ES6 引入了展开运算符,可以将数组或对象展开为一系列值。展开运算符可以使代码更加简洁。

js
// 使用普通方式合并数组
const arr1 = [2, 3, 4];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);

// 使用展开运算符合并数组
const arr4 = [...arr1, ...arr2];

9. 类和继承

js
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

10. Symbols

Symbol是ES6中引入的一种新的基本数据类型,用于表示一个独一无二的值,不能与其他数据类型进行运算。它是JavaScript中的第七种数据类型,与undefined、null、Number(数值)、String(字符串)、Boolean(布尔值)、Object(对象)并列。

js
const a = Symbol();
console.log(a);  //Symbol()

//因为Symbol是基本数据类型,而不是对象,不能 new 。
const a = new Symbol();//报错,Symbol is not a constructor

11. Map + Set + WeakMap + WeakSet

js
// Sets
var s = new Set();
s.add("hello").add("goodbye").add("hello");
s.size === 2;
s.has("hello") === true;

// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;

// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined

// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Because the added object has no other references, it will not be held in the set

12. Proxies

Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

js
// Proxying a normal object
var target = {};
var handler = {
  get: function (receiver, name) {
    return `Hello, ${name}!`;
  }
};

var p = new Proxy(target, handler);
p.world === 'Hello, world!';