ES6(ECMAScript 6)是JavaScript语言的最新版本,它在ES5的基础上做了很多增强和扩展，使JavaScript的编程模式更加现代化和优雅,不仅拓展了语言表达能力,也为编程带来了全新的编程范式和思维方式。在项目中使用ES6,让代码更加简洁、方便模块化和面向对象实现等，进而提高开发效率、减少代码量。
ES6 常用新特性如下：
- let/const
- 箭头函数
- 模板字符串
- 解构赋值
- 模块化
- 类和继承
- 默认参数
- rest参数
- 扩展运算符
- Promise
- 迭代器等
- Symbol
- Iterator
- Generator
- Proxy
以下是一些ES6常见的知识点和示例代码：
- let和const
- let用于声明块级作用域变量
- const用于声明常量,常量必须初始化
javascript">let x = 1;
if (x === 1) {
let x = 2; // 这个x只在If语句块内有效
console.log(x); // 输出2
}
console.log(x); // 输出1
const PI = 3.14159;
PI = 1; // 错误,PI是常量
- 箭头函数
- 更简洁的函数书写方式
- 继承当前上下文的this关键字
javascript">const add = (a, b) => a + b;
const obj = {
value: 1,
getPlusValue: function(b) {
return this.value + b; // this绑定到obj
},
getPlusValueES6: (b) => {
return this.value + b; // this继承外层上下文
}
}
- 模板字符串
- 用反引号 `` 标识
- 可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量/表达式
javascript">let name = "Bruce";
console.log(`Hello ${name}`); // Hello Bruce
let str = `This
is
a
multi-line
string`; // 多行字符串
- 解构赋值
- 可以从数组或对象中提取值,对变量进行赋值
javascript">let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c); // 1 2 3
let obj = {name: "Bruce", age: 30};
let {name, age} = obj;
console.log(name, age); // Bruce 30
- 模块导入导出
- 使用 export 导出模块中的变量、函数或类
- 使用 import 导入其他模块中的部分或全部
javascript">// module.js
export const name = "Bruce";
export function sayHi() {
console.log("Hi");
}
// app.js
import { name, sayHi } from "./module.js";
console.log(name); // Bruce
sayHi(); // Hi
- 类和继承
- 使用 class 关键字定义类
- 使用 extends 关键字实现继承
- 支持静态方法和构造器
javascript">class Animal {
constructor(name) {
this.name = name;
}
sayName() {
console.log(`My name is ${this.name}`);
}
}
class Dog extends Animal {
constructor(name) {
super(name); // 调用父类构造函数
}
bark() {
console.log("Woof Woof!");
}
}
let dog = new Dog("Buddy");
dog.sayName(); // My name is Buddy
dog.bark(); // Woof Woof!
- 默认参数值
- 在定义函数时可以为参数设置默认值
javascript">function say(message="Hi") {
console.log(message);
}
say(); // Hi
say("Hello"); // Hello
- rest参数
- 用于获取函数的实参,存入数组中
javascript">function add(...nums) {
let sum = 0;
for(let n of nums) {
sum += n;
}
return sum;
}
console.log(add(1,2,3)); // 6
console.log(add(4,5,6,7,8,9)); // 39
- spread操作符
- 可以在函数调用/数组构造时将数组表达式展开
javascript">let params = [3,5,1];
console.log(Math.max(...params)); // 5
console.log([...'hello']); // ['h','e','l','l','o']
- 对象字面量扩展
- 可以直接在对象中添加函数
- 属性名可以是变量/表达式
- 可通过扩展运算符复制对象的可枚举属性
javascript">let obj = {
name: "Bruce",
sayName() {
console.log(this.name);
},
[Symbol.iterator]: function() {
// ...
}
}
let obj2 = { ...obj, age: 30 }; // 复制obj所有可枚举属性到obj2
- Promise
- 异步编程的一种解决方案
- 代表一个异步操作的最终结果
javascript">let promise = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("Hello World");
}, 2000);
});
promise.then(function(value) {
console.log(value); // Hello World
});
- for…of循环
- 可以遍历各种可迭代对象(Array、Map、Set等)
javascript">let arr = ['a', 'b', 'c'];
for(let x of arr) {
console.log(x); // 依次输出a, b, c
}
- Map和Set
- Map是存储key-value对的有序集合
- Set是不重复值的有序集合
javascript">let map = new Map();
map.set('name', 'Bruce');
map.set('age', 30);
console.log(map.get('name')); // Bruce
let set = new Set();
set.add(1);
set.add(5);
set.add(5); // 重复的5会被忽略
console.log(set.size); // 2
好的,我继续介绍一些ES6其他常见的知识点:
- Symbol
- 一种新的原始数据类型,可作为对象属性的标识符
- 每个Symbol值都是不相等的
javascript">let symbol1 = Symbol("id");
let symbol2 = Symbol("id");
console.log(symbol1 === symbol2); // false
let obj = {};
obj[symbol1] = "Hello";
console.log(obj[symbol1]); // Hello
- 迭代器Iterator
- 为各种数据结构提供统一的访问接口
- 支持对象实现Iterator接口,从而可以用for…of遍历
javascript">let arr = ['a', 'b', 'c'];
let iter = arr[Symbol.iterator]();
console.log(iter.next()); // { value: 'a', done: false }
console.log(iter.next()); // { value: 'b', done: false }
console.log(iter.next()); // { value: 'c', done: false }
console.log(iter.next()); // { value: undefined, done: true }
- 生成器Generator
- 可以暂停执行的函数
- 通过yield关键字交还控制权
- 配合Iterator可实现惰性运算
javascript">function* idGen() {
let id = 0;
while(true) {
yield id++;
}
}
let gen = idGen();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
- 代理Proxy
- 用于修改某些操作的默认行为
- 等同于在语言层面做出修改,可以对编程语言进行拓展
javascript">let obj = { name: "Bruce" };
let proxy = new Proxy(obj, {
get(target, prop) {
console.log(`Reading ${prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`Setting ${prop} to ${value}`);
target[prop] = value;
}
});
proxy.name; // Reading name, Bruce
proxy.name = "Clark"; // Setting name to Clark
- 反射Reflection
- 将对象内部特征反射于外部可操作,与Proxy形成映射
- ES6新增Reflect对象与Proxy相呼应
javascript">Reflect.getPrototypeOf({}) === Object.getPrototypeOf({});
Reflect.get(obj, 'name') === obj.name;
