ES11（2020）新特性介绍以及 ES6~ES11 全特性介绍
随着 JavaScript 的快速发展，前端开发工程师需要不断学习和掌握新技术，以保持竞争力。ES6（2015）是 JavaScript 中一个非常重要的版本，引入了许多新的语法和特性，例如：箭头函数、Promise、解构赋值、class 等。而随着 ES6 特性的广泛应用和使用，也出现了一些问题和需求，于是 ES7（2016）、ES8（2017）、ES9（2018）、ES10（2019）和 ES11（2020）依次发布了，为了更好地应对现在和未来的需求，本文将会介绍 ES11 发布的新特性，并对 ES6~ES11 的全特性进行详细介绍，以及给出一些示例代码。
ES11 新特性介绍
- Nullish 合并运算符：?? 判断变量是否为空或 undefined，可以进行默认赋值。
const foo = null ?? 'default'; // foo = 'default' const bar = 0 ?? 1; // bar = 0
- Optional Chaining：?. 可以避免出现 undefined 错误。
// javascriptcn.com 代码示例
const user = {
name: 'Tom',
address: {
city: 'Beijing',
street: 'No.1'
}
}
const city = user?.address?.city; // city = 'Beijing'
const zip = user?.address?.zip; // zip = undefined- Dynamic Import：动态导入，可以异步加载模块。
// index.html
<script type="module">
import('./module.js').then(module => {
// do something with module
})
</script>ES6~ES11 全特性介绍
- let 和 const：声明块级作用域的变量和常量。
{
let x = 1;
const y = 2;
}
console.log(x); // ReferenceError: x is not defined
console.log(y); // ReferenceError: y is not defined- 箭头函数：使用箭头语法创建函数表达式。
const sum = (a, b) => a + b;
- 解构赋值：可以方便地从数组或者对象中取出值并赋给变量。
// javascriptcn.com 代码示例
const arr = [1, 2, 3];
const [a, b, c] = arr;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
const obj = { x: 1, y: 2 };
const { x, y } = obj;
console.log(x); // 1
console.log(y); // 2- 模板字符串：使用反引号包含字符串，并在字符串内部嵌入变量。
const name = 'Tom';
const greet = `Hello, ${name}!`
console.log(greet); // Hello, Tom!- Promise：可以异步处理数据并返回结果。
// javascriptcn.com 代码示例
const getDataPromise = url => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = () => {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject('Error');
}
};
xhr.send();
});
};
getDataPromise('https://api.example.com/data')
.then(data => console.log(data))
.catch(error => console.log(error));- async/await：使 Promise 更加易用。
// javascriptcn.com 代码示例
const getData = async url => {
const response = await fetch(url);
const data = await response.json();
return data;
};
getData('https://api.example.com/data')
.then(data => console.log(data))
.catch(error => console.log(error));- 类：使用 class 定义类，便于继承和重写。
// javascriptcn.com 代码示例
class Animal {
constructor(name) {
this.name = name;
}
say() {
console.log(`I'm ${this.name}`);
}
}
class Cat extends Animal {
constructor(name, color) {
super(name);
this.color = color;
}
say() {
console.log(`I'm ${this.name}, and I'm ${this.color}`);
}
}
const kitty = new Cat('Kitty', 'white');
kitty.say(); // I'm Kitty, and I'm white- Symbol：创建唯一的不变值。
const sym1 = Symbol();
const sym2 = Symbol('foo');
console.log(sym1); // Symbol()
console.log(sym2); // Symbol(foo)- Map 和 Set：提供键值对的映射和不重复的值集合。
// javascriptcn.com 代码示例
const map = new Map();
map.set('name', 'Tom');
map.set('age', 18);
console.log(map.get('name')); // Tom
console.log(map.get('age')); // 18
const set = new Set();
set.add('hello');
set.add('world');
set.add('world');
console.log(set.has('hello')); // true
console.log(set.has('world')); // true
console.log(set.size); // 2- 特殊数据类型：Boolean、Number、String、Null、Undefined。
// javascriptcn.com 代码示例 const b = true; const n = 123; const s = 'hello'; const nl = null; let u; console.log(typeof b); // boolean console.log(typeof n); // number console.log(typeof s); // string console.log(typeof nl); // object console.log(typeof u); // undefined
总结
ES11 新特性，Nullish 合并运算符、Optional Chaining 和 Dynamic Import 带来了更加方便的语法和功能，ES6~ES11 的全特性提供了丰富的语法和功能，使得 JavaScript 更加高效和易用。
前端开发工程师需要不断学习和掌握新技术，以保持竞争力。熟练掌握 ES6~ES11 特性有助于编写更加优秀的 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f1a667d4982a6eb89ff96