ES6全称ECMAScript 6.0,是JavaScript的下一个版本标准,2015.06发版。ECMAScript和 JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。 https://github.com/lukehoban/es6features
1. let和const关键字
这两个关键字都允许在块作用域中声明变量,其中Const用于声明不可变的变量。这解决了以往var关键字带来的变量提升和全局作用域污染的问题。
2. 模板字符串
模板字符串是一种新的字符串声明方式,它允许嵌入变量和表达式。与传统的字符串连接相比,模板字符串提供了更为直观和方便的操作方式。
const name = "Welpher";
console.log(`Hello, ${name}!`);
3. 解构赋值
解构赋值允许我们从对象或数组中提取值,并直接赋值给变量。这极大地简化了数据处理,并让代码更加清晰。
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关键字时表现更为一致。它主要用于简单的函数体和单一表达式。
// 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关键字,你可以轻易地在不同文件之间共享代码。
// lib/mathplusplus.js
export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
return Math.log(x);
}
// app.js
import ln, {pi, e} from "lib/mathplusplus";
alert("2π = " + ln(e)*pi*2);
7. 默认参数和剩余参数
默认参数允许在函数参数不足时自动填充默认值,而剩余参数则允许你收集函数的额外参数。
function f(x, ...y) {
// y is an Array
return x * y.length;
}
f(3, "hello", true) == 6
8. 展开运算符
ES6 引入了展开运算符,可以将数组或对象展开为一系列值。展开运算符可以使代码更加简洁。
// 使用普通方式合并数组
const arr1 = [2, 3, 4];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
// 使用展开运算符合并数组
const arr4 = [...arr1, ...arr2];
9. 类和继承
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(对象)并列。
const a = Symbol();
console.log(a); //Symbol()
//因为Symbol是基本数据类型,而不是对象,不能 new 。
const a = new Symbol();//报错,Symbol is not a constructor
11. Map + Set + WeakMap + WeakSet
// 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 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。
// 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!';