ES6-11新特性总结
2022-02-11 14:04:12 0 举报
AI智能生成
简单总结es6-11新特性
作者其他创作
大纲/内容
ES8(ES2017)
1. 声明
共享内存和原子操作:由全局对象SharedArrayBuffer和Atomics实现,将数据存储在一块共享内存空间中,这些数据可在JS主线程和web-worker线程之间共享
2. 字符串扩展
padStart()
把指定字符串填充到字符串头部,返回新的字符串
var str = '23';
var newStr = str.padStart(3,'w');
console.log(newStr); // w23
var newStr = str.padStart(3,'w');
console.log(newStr); // w23
padEnd()
把指定字符串填充到字符串尾部,返回新的字符串
var str = '23';
var newStr = str.padEnd(3,'c');
console.log(newStr); // 23c
var newStr = str.padEnd(3,'c');
console.log(newStr); // 23c
3. 对象扩展
Object.values()
返回以值组成的数组
var obj={a:1,b:{c:11}};
Object.values(obj);
// [1,{c:11}]
Object.values(obj);
// [1,{c:11}]
Object.entries()
返回以键和值组成的数组
var obj={a:1,b:{c:11}};
Object.values(obj);
// [['a'.'1'],['b',{c:11}]]
Object.values(obj);
// [['a'.'1'],['b',{c:11}]]
Object.getOwnPropertyDescriptors()
返回对象所有自身属性(非继承)的描述对象
const object1 = {
property1: 42
}
const descriptors1 = Object.getOwnPropertyDescriptors(object1)
console.log(descriptors1.property1.writable) // true
console.log(descriptors1.property1.value) // 42
property1: 42
}
const descriptors1 = Object.getOwnPropertyDescriptors(object1)
console.log(descriptors1.property1.writable) // true
console.log(descriptors1.property1.value) // 42
4. 函数扩展
函数参数尾逗号,允许函数最后一个参数有尾逗号
// 参数定义
function f(p) {}
function f(p,) {}
function f(p) {}
function f(p,) {}
// 带有尾后逗号的数组解构
[a, b,] = [1, 2]
// 带有尾后逗号的对象解构
var o = {
p: 42,
q: true,
}
var {p, q,} = o
[a, b,] = [1, 2]
// 带有尾后逗号的对象解构
var o = {
p: 42,
q: true,
}
var {p, q,} = o
5. for-await-of
ES9(ES2018)
1. 字符串扩展
2. 对象扩展
扩展运算符 ...
var obj = {a:10, b:20};
var obj1 = {...obj}
var obj1 = {...obj}
3. 正则扩展
4. Promise
finally()
5. Async
for-await-of
循环等待每个Promise对象变为resolved状态才进入下一步
ES10(ES2109)
1. 字符串扩展
trimeStart()
消除字符串头部空格,返回新的字符串
trimeEnd()
消除字符串尾部空格,返回新的字符串
2. 对象扩展
Object.fromEntries()
返回以键和值组成的对象(Object.entries()的逆操作)
3. 数组扩展
sort()稳定性
flat()
扁平化数组,返回新数组
flatMap()
映射且扁平化数组,返回新数组(只能展开一层数组)
4. 函数扩展
toString()改造
返回函数原始代码(与编码一致)
catch()
参数可省略
5. Symbol
返回Symbol值的描述
ES6(ES2015)
1. 声明
Let 和 Const
2. 类 Class
ES6之前声明一个类要调用构造函数
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.information = function () {
return 'My name is ' + this.name + ', I am ' + this.age
}
this.name = name
this.age = age
}
Person.prototype.information = function () {
return 'My name is ' + this.name + ', I am ' + this.age
}
ES6之后可以使用类来声明
class Person {
constructor(name, age) {
this.name = name
this.age = age
}
information() {
return 'My name is ' + this.name + ', I am ' + this.age
}
}
constructor(name, age) {
this.name = name
this.age = age
}
information() {
return 'My name is ' + this.name + ', I am ' + this.age
}
}
3. 箭头函数(Arrow Function)
ES6之前
var list = [1,2,3];
var newLIst = list.map(function(item){
return item * item
})
var newLIst = list.map(function(item){
return item * item
})
ES6之后
var list = [1,2,3];
var newLIst = list.map((item)=>item*item)
var newLIst = list.map((item)=>item*item)
4. 函数参数默认值(Function parameter defaults)
ES6之前
function getData(data){
var obj = data || {}
}
这样会有隐患,比如传入一个false的值
var obj = data || {}
}
这样会有隐患,比如传入一个false的值
ES6之后
function getData(data={}){
// ...
}
// ...
}
5. 模板字符串(Template string)
ES6之前
var name = 'aaa';
var str = 'this name is' + name;
var str = 'this name is' + name;
ES6之后
var name = `aaa`;
var str = `this name is ${name}`
var str = `this name is ${name}`
6. 解构赋值(Destructuring assignment)
ES6之前
var a = 1;
var b = 2;
var temp = b;
b = a;
a = temp;
var b = 2;
var temp = b;
b = a;
a = temp;
ES6之后
var a = 1;
var b = 2;
[a,b] = [b,a]
var b = 2;
[a,b] = [b,a]
7. Module
ES6之前
// add.js
// 输出文件
const ADDVAL = 10;
modules.exports sum = (num)=>{return num + ADDVAL}
// index.js
// 输入文件
const sum = require('./add.js');
console.log(`相加结果是:${sum(10)}`)
// 输出文件
const ADDVAL = 10;
modules.exports sum = (num)=>{return num + ADDVAL}
// index.js
// 输入文件
const sum = require('./add.js');
console.log(`相加结果是:${sum(10)}`)
ES6之后
// add.js
// 输出文件
const ADDVAL = 10;
export sum = (num)=>{return num + ADDVAL}
// index.js
// 输入文件
import {sum} from './add.js';
console.log(`相加结果是:${sum(10)}`)
// 输出文件
const ADDVAL = 10;
export sum = (num)=>{return num + ADDVAL}
// index.js
// 输入文件
import {sum} from './add.js';
console.log(`相加结果是:${sum(10)}`)
8. 扩展操作符(Spread operator)
ES6之前
var list = [1,2,3];
funciton add(a,b,c){
return a+b+c
}
var sum = add.bind(null, list);
funciton add(a,b,c){
return a+b+c
}
var sum = add.bind(null, list);
ES6之后
var list = [1,2,3];
funciton add(a,b,c){
return a+b+c
}
var sum = add(...list);
funciton add(a,b,c){
return a+b+c
}
var sum = add(...list);
9. 对象属性简写(Object attribute shorthand)
ES6之前
var name = 'lucy';
var age = 20;
var person = {
name: name,
age: age
}
var age = 20;
var person = {
name: name,
age: age
}
ES6之后
var name = 'lucy';
var age = 20;
var person = {
name,
age
}
var age = 20;
var person = {
name,
age
}
10. Promise(异步解决方案)
三种状态
pending(等待中)
resolved(完成了)
rejected(拒绝了)
11. for....of
语法:
for (var value of myArray) {
console.log(value);
}
for (var value of myArray) {
console.log(value);
}
循环一个数组
var list = [1,2,3];
for(var item of list){
console.log(item)
}
for(var item of list){
console.log(item)
}
循环一个字符串
var str = 'hello';
for(var item of str){
console.log(item)
}
for(var item of str){
console.log(item)
}
循环一个类型化的数组
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);
}
for (let value of iterable) {
console.log(value);
}
循环一个Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
console.log(value);
}
for (let [key, value] of iterable) {
console.log(value);
}
循环一个 Set
let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
console.log(value);
}
for (let value of iterable) {
console.log(value);
}
循环一个 DOM collection
let articleParagraphs = document.querySelectorAll("article > p");
for (let paragraph of articleParagraphs) {
paragraph.classList.add("read");
}
for (let paragraph of articleParagraphs) {
paragraph.classList.add("read");
}
循环一个拥有enumerable属性的对象
for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]);
}
console.log(key + ": " + someObject[key]);
}
循环一个生成器(generators)
function* fibonacci() { // a generator function
let [prev, curr] = [0, 1];
while (true) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for (let n of fibonacci()) {
console.log(n);
// truncate the sequence at 1000
if (n >= 1000) {
break;
}
}
let [prev, curr] = [0, 1];
while (true) {
[prev, curr] = [curr, prev + curr];
yield curr;
}
}
for (let n of fibonacci()) {
console.log(n);
// truncate the sequence at 1000
if (n >= 1000) {
break;
}
}
12. Symbol
const symbol1 = Symbol();
const symbol2 = Symbol(42);
const symbol3 = Symbol('foo');
console.log(typeof symbol1); // "symbol"
console.log(symbol3.toString()); // "Symbol(foo)"
console.log(Symbol('foo') === Symbol('foo')); // false
const symbol2 = Symbol(42);
const symbol3 = Symbol('foo');
console.log(typeof symbol1); // "symbol"
console.log(symbol3.toString()); // "Symbol(foo)"
console.log(Symbol('foo') === Symbol('foo')); // false
13. Iterator
Iterator
14. Generator
生成器函数使用 function*语法编写。
15. Set
Set
WeakSet
16. Map
Map
WeakMap
17. Proxy
18. Reflect
ES7(ES2016)
1. 数组扩展
includes() ,用来判断一个数组是否包含某个指定的值,包含则返回true,反之返回false
const array1 = [1, 2, 3]
console.log(array1.includes(2)) // true
console.log(array1.includes(2)) // true
2. 数值扩展
幂运算符 **,相当于Math.pow()
console.log(2**10) // 1024
console.log(Math.pow(2, 10)) // 1024
console.log(Math.pow(2, 10)) // 1024
ES11(ES2020)
1. 声明
globalThis
作为顶层对象,指向全局下的this
2. 数值扩展
BigInt
任何位数的整数(新增的数据类型,使用n结尾)
子主题
3. 对象扩展
链判断操作符(?.)
判断是否存在对象属性,不存在则返回undefined且不往下执行
三种用法
对象属性:obj?.a?.a1
对象属性:obj?[exp]
函数或者对象方法的调用:func?.(...arg)
用例:
var obj = {
a: {
a1: 12
}
}
console.log(obj?.a?.a1);
console.log(obj?.b || 'kong');
var obj = {
a: {
a1: 12
}
}
console.log(obj?.a?.a1);
console.log(obj?.b || 'kong');
Babel插件转换
安装插件:npm i @babel/plugin-syntax-optional-chaining
在babel.config.js中添加plugin
{
"plugins":["@babel/plugin-syntax-optional-chaining"]
}
"plugins":["@babel/plugin-syntax-optional-chaining"]
}
Null判断操作符
判断值是否为undefined或者null,是则使用默认值
读取对象的属性时,我们需要指定默认值,通常使用 || 运算符来赋默认值。 || 或运算符表达的意思是当左侧为空串,null,undefined,false,0时右侧都会生效。
ES2020引入了??操作符,只有当左侧为undefined或者null时右侧才回生效
var a;
a ?? false;
a ?? false;
⚠️注意:与&&等运算符一起使用时需要加括号表明优先级,否则会报错
babel插件转换
安装插件:npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator
在babel.config.js中添加plugin
{
"plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}
"plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}
4. 正则扩展
matchAll()
返回所有匹配的遍历器
5. import()
import()支持动态导入模块,返回Promise
import(`./home.js`) // home.js中export const export1 = ''; ....
.then(({export1, export2})=>
// 加载成功的回调
})
.catch(err => {
// 加载失败的回调
});
.then(({export1, export2})=>
// 加载成功的回调
})
.catch(err => {
// 加载失败的回调
});
区别:require()是同步加载,import()是异步加载
适用场合
1. 按需加载模块,比如点击时加载某个文件或者模块
2. 条件加载,比如在if判断语句中
3. 动态的模块路径,比如模块路径是实时生成的
babel插件转换
安装插件:npm install --save-dev @babel/plugin-syntax-dynamic-import
在babel.config.js中配置
{
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
"plugins": ["@babel/plugin-syntax-dynamic-import"]
}
6. for in 遍历顺序
7. Promise
Promise.allSettled()
将多个实例包装成一个新实例,返回全部实例状态变更后的状态数组(齐变更再返回)
8. export * as from 'module'
export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };
ES2020之前import复合写法
import * as someIdentifier from "someModule";
es2020引入对应的export写法
export * as someIdentifier from "someModule";
// 等同于
import * as ns from "mod";
export {ns};
// 等同于
import * as ns from "mod";
export {ns};
babel插件转换
安装插件:npm install --save-dev @babel/plugin-proposal-export-namespace-from
在babel.config.js中
{
"plugins": ["@babel/plugin-proposal-export-namespace-from"]
}
"plugins": ["@babel/plugin-proposal-export-namespace-from"]
}
收藏
0 条评论
下一页