ES6 新特性范例大全

今天药忘吃喽~ 2022-10-01 00:48 93阅读 0赞

小编推荐：掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握..

ECMAScript6（ECMAScript 2015 ，ES5，ES2016）技术已经在前端圈子很流行了，他给前端开发人员带来了很多惊喜，提供的语法糖使复杂的操作变得简单。

本文没有详细描述这些新特性，因为网上都已经有很多相关的介绍了。主要针对ES6 新特性收集了相关范例代码，他可以让你快速了解这个新的javascript规范。

剪头函数

function() 函数的简写表示法，但它不绑定 this。

ES6 代码:  
var odds = evens.map(v => v + 1); // no parentes and no brackets  
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);  
\});  
this 是如何工作的？

ES6 代码:  
var object = \{  
name: “Name”,  
arrowGetName: () => this.name,  
regularGetName: function() \{ return this.name \},  
arrowGetThis: () => this,  
regularGetThis: function() \{ return this \}  
\}

console.log(this.name)  
console.log(object.arrowGetName());  
console.log(object.arrowGetThis());  
console.log(this)  
console.log(object.regularGetName());  
console.log(object.regularGetThis());  
结果：

ES6 代码:  
this.name ->  
object.arrowGetName() ->  
object.arrowGetThis() -> \[object Window\]  
this -> \[object Window\]  
object.regularGetName() -> Name  
object.regularGetThis() -> \{“name”:”Name”\}  
Classes(类)

我们知道“真正”语言中的类(Classes)。在 ES6 中类(Classes)其实是原型继承的语法糖。

ES6 代码:  
class SkinnedMesh extends THREE.Mesh \{  
constructor(geometry, materials) \{  
super(geometry, materials);

this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...

\}  
update(camera) \{  
//…  
super.update();  
\}  
get boneCount() \{  
return this.bones.length;  
\}  
set matrixType(matrixType) \{  
this.idMatrix = SkinnedMeshmatrixType;  
\}  
static defaultMatrix() \{  
return new THREE.Matrix4();  
\}  
\}  
Lebab.io

增强的对象字面量

ES6 代码:  
var theProtoObj = \{  
toString: function() \{  
return “The ProtoOBject To string”  
\}  
\}

var handler = () => “handler”

var obj = \{  
// **proto**  
**proto**: theProtoObj,

// Shorthand for ‘handler: handler’
    handler,
    
    // Methods
    toString() {
    
     // Super calls
     return "d " + super.toString();
    },
    
    // Computed (dynamic) property names
    [ "prop_" + (() => 42)() ]: 42

\};

console.log(obj.handler)  
console.log(obj.handler())  
console.log(obj.toString())  
console.log(obj.prop\_42)  
结果：

ES6 代码:  
obj.handler -> () => “handler”  
obj.handler() -> handler  
obj.toString() -> d The ProtoOBject To string  
obj.prop\_42 -> 42  
字符串插值

字符串插值的好语法

字符串插值

ES6 代码:  
var name = “Bob”, time = “today”;

var multiLine = \`This

Line

Spans Multiple

Lines\`

console.log(`Hello ${name},how are you ${time}?`)  
console.log(multiLine)  
结果：

ES6 代码:  
`Hello ${name},how are you ${time}?` \-> Hello Bob,how are you today?  
multiLine -> This Line Spans Multiple Lines  
解构 Destructuring

愚人码头注：列表匹配

ES6 代码:  
// list “matching”  
var \[a, , b\] = \[1,2,3\];  
console.log(a)  
console.log(b)  
结果：

ES6 代码:  
a -> 1  
b -> 3  
对象也能很好的解构

ES6 代码:  
nodes = () => \{ return \{op: “a”, lhs: “b”, rhs: “c”\}\}  
var \{ op: a, lhs: b , rhs: c \} = nodes()  
console.log(a)  
console.log(b)  
console.log(c)  
结果：

ES6 代码:  
a -> a  
b -> b  
c -> c  
使用速记表示法。

ES6 代码:  
nodes = () => \{ return \{lhs: “a”, op: “b”, rhs: “c”\}\}

// binds `op`, `lhs` and `rhs` in scope  
var \{op, lhs, rhs\} = nodes()

console.log(op)  
console.log(lhs)  
console.log(rhs)  
结果：

ES6 代码:  
op -> b  
lhs -> a  
rhs -> c  
可在参数位置使用

ES6 代码:  
function g(\{name: x\}) \{  
return x  
\}

function m(\{name\}) \{  
return name  
\}

console.log(g(\{name: 5\}))  
console.log(m(\{name: 5\}))  
结果：

ES6 代码:  
g(\{name: 5\}) -> 5  
m(\{name: 5\}) -> 5  
故障弱化解构

ES6 代码:  
var \[a\] = \[\]  
var \[b = 1\] = \[\]  
var c = \[\];  
console.log(a)  
console.log(b);  
console.log(c);  
结果：

ES6 代码:  
a -> undefined  
b -> 1  
c -> \[\]  
参数默认值（Default）

ES6 代码:  
function f(x, y=12) \{  
return x + y;  
\}

console.log(f(3))  
console.log(f(3,2))  
结果：

ES6 代码:  
f(3) -> 15  
f(3,2) -> 5  
扩展（Spread）

在函数中：

ES6 代码:  
function f(x, y, z) \{  
return x + y + z;  
\}  
// 传递数组的每个元素作为参数  
console.log(f(…\[1,2,3\]))  
结果：

ES6 代码:  
f(…\[1,2,3\]) -> 6  
在数组中：

ES6 代码:  
var parts = \[“shoulders”, “knees”\];  
var lyrics = \[“head”, …parts, “and”, “toes”\];

console.log(lyrics)  
结果：

ES6 代码:  
lyrics -> \[“head”,”shoulders”,”knees”,”and”,”toes”\]  
扩展 + 对象字面量

我们可以使用这个创造很酷的对象。

ES6 代码:  
let \{ x, y, …z \} = \{ x: 1, y: 2, a: 3, b: 4 \};  
console.log(x); // 1  
console.log(y); // 2  
console.log(z); // \{ a: 3, b: 4 \}

// Spread properties  
let n = \{ x, y, …z \};  
console.log(n); // \{ x: 1, y: 2, a: 3, b: 4 \}  
console.log(obj)  
可惜的是它还不支持：

npm install –save-dev babel-plugin-transform-object-rest-spread

Rest

我们可以使用 rest 操作符来允许无限参数。

ES6 代码:  
function demo(part1, …part2) \{  
return \{part1, part2\}  
\}

console.log(demo(1,2,3,4,5,6))  
结果：

ES6 代码:  
demo(1,2,3,4,5,6) -> \{“part1”:1,”part2”:\[2,3,4,5,6\]\}  
Let

let是新的var。 因为它有块级作用域。

ES6 代码:  
\{  
var globalVar = “from demo1”  
\}

\{  
let globalLet = “from demo2”;  
\}

console.log(globalVar)  
console.log(globalLet)  
结果：

ES6 代码:  
globalVar -> from demo1  
globalLet -> ReferenceError: globalLet is not defined  
但是，它不会向window分配任何内容：

ES6 代码:  
let me = “go”; // 全局作用域  
var i = “able”; // 全局作用域

console.log(window.me);  
console.log(window.i);  
结果：

ES6 代码:  
window.me -> undefined  
window.i -> able  
不能使用let重新声明一个变量：

ES6 代码:  
let me = “foo”;  
let me = “bar”;  
console.log(me);  
结果：

ES6 代码:  
SyntaxError: Identifier ‘me’ has already been declared  
ES6 代码:  
var me = “foo”;  
var me = “bar”;  
console.log(me)  
结果：

ES6 代码:  
me -> bar  
Const

const 是只读变量。

ES6 代码:  
const a = “b”  
a = “a”  
结果：

ES6 代码:  
TypeError: Assignment to constant variable.  
应该注意，const 对象仍然可以被改变的。

ES6 代码:  
const a = \{ a: “a” \}  
a.a = “b”  
console.log(a)  
结果：

ES6 代码:  
a -> \{“a”:”b”\}  
For..of

迭代器的新类型，可以替代for..in。 它返回的是值而不是keys。

ES6 代码:  
let list = \[4, 5, 6\];

console.log(list)

for (let i in list) \{  
console.log(i);  
\}  
结果：

ES6 代码:  
list -> \[4,5,6\]  
i -> 0  
i -> 1  
i -> 2  
ES6 代码:  
let list = \[4, 5, 6\];

console.log(list)

for (let i of list) \{  
console.log(i);  
\}  
结果：

ES6 代码:  
list -> \[4,5,6\]  
i -> 4  
i -> 5  
i -> 6  
迭代器（Iterators）

迭代器是一个比数组更动态的类型。

ES6 代码:  
let infinite = \{  
Symbol.iterator \{  
let c = 0;  
return \{  
next() \{  
c++;  
return \{ done: false, value: c \}  
\}  
\}  
\}  
\}

console.log(“start”);

for (var n of infinite) \{  
// truncate the sequence at 1000  
if (n > 10)  
break;  
console.log(n);  
\}  
结果：

ES6 代码:  
“start” -> start  
n -> 1  
n -> 2  
n -> 3  
n -> 4  
n -> 5  
n -> 6  
n -> 7  
n -> 8  
n -> 9  
n -> 10  
使用Typescript，我们可以看到它接口的样子：

Typescript 代码:  
interface IteratorResult \{  
done: boolean;  
value: any;  
\}  
interface Iterator \{  
next(): IteratorResult;  
\}  
interface Iterable \{  
Symbol.iterator: Iterator  
\}  
生成器（Generators）

生成器创建迭代器，并且比迭代器更具动态性。他们不必以相同的方式跟踪状态 并不支持 done 的概念。

ES6 代码:  
var infinity = \{  
\[Symbol.iterator\]: function\*() \{  
var c = 1;  
for (;;) \{  
yield c++;  
\}  
\}  
\}

console.log(“start”)  
for (var n of infinity) \{  
// truncate the sequence at 1000  
if (n > 10)  
break;  
console.log(n);  
\}  
结果：

ES6 代码:  
“start” -> start  
n -> 1  
n -> 2  
n -> 3  
n -> 4  
n -> 5  
n -> 6  
n -> 7  
n -> 8  
n -> 9  
n -> 10  
使用Typescript 再次显示接口：

Typescript 代码:  
interface Generator extends Iterator \{  
next(value?: any): IteratorResult;  
throw(exception: any);  
\}  
function\* Iterators and generator

一个产量的例子\*

ES6 代码:  
function\* anotherGenerator(i) \{  
yield i + 1;  
yield i + 2;  
yield i + 3;  
\}

function\* generator(i) \{  
yield i;  
yield\* anotherGenerator(i);  
yield i + 10;  
\}

var gen = generator(10);

console.log(gen.next().value);  
console.log(gen.next().value);  
console.log(gen.next().value);  
console.log(gen.next().value);  
console.log(gen.next().value);  
结果：

ES6 代码:  
gen.next().value -> 10  
gen.next().value -> 11  
gen.next().value -> 12  
gen.next().value -> 13  
gen.next().value -> 20  
Unicode

ES6 为Unicode 提供了更好的支持。

ES6 代码:  
var regex = new RegExp(‘\\u\{61\}’, ‘u’);

console.log(regex.unicode)  
console.log(“\\uD842\\uDFD7”)  
console.log(“\\uD842\\uDFD7”.codePointAt())  
结果：

ES6 代码:  
regex.unicode -> true  
“” ->  
“”.codePointAt() -> 134103  
模块和模块加载器

原生支持模块。

ES6 代码:  
import defaultMember from “module-name”;  
import \* as name from “module-name”;  
import \{ member \} from “module-name”;  
import \{ member as alias \} from “module-name”;  
import \{ member1 , member2 \} from “module-name”;  
import \{ member1 , member2 as alias2 , \[…\] \} from “module-name”;  
import defaultMember, \{ member \[ , \[…\] \] \} from “module-name”;  
import defaultMember, \* as name from “module-name”;  
import “module-name”;  
ES6 代码:  
export \{ name1, name2, …, nameN \};  
export \{ variable1 as name1, variable2 as name2, …, nameN \};  
export let name1, name2, …, nameN; // also var  
export let name1 = …, name2 = …, …, nameN; // also var, const

export expression;  
export default expression;  
export default function (…) \{ … \} // also class, function\*  
export default function name1(…) \{ … \} // also class, function\*  
export \{ name1 as default, … \};

export \* from …;  
export \{ name1, name2, …, nameN \} from …;  
export \{ import1 as name1, import2 as name2, …, nameN \} from …;  
Import Export

Set

Set 为数学对应，其中所有项目都是唯一的。对于知道SQL的人来说，这相当于distinct。

ES6 代码:  
var set = new Set();  
set.add(“Potato”).add(“Tomato”).add(“Tomato”);  
console.log(set.size)  
console.log(set.has(“Tomato”))

for(var item of set) \{  
console.log(item)  
\}  
结果：

ES6 代码:  
set.size -> 2  
set.has(“Tomato”) -> true  
item -> Potato  
item -> Tomato  
Set

WeakSet

WeakSet对象允许您在集合中存储弱持有的对象。没有引用的对象将被垃圾回收。

ES6 代码:  
var item = \{ a:”Potato”\}  
var set = new WeakSet();  
set.add(\{ a:”Potato”\}).add(item).add(\{ a:”Tomato”\}).add(\{ a:”Tomato”\});  
console.log(set.size)  
console.log(set.has(\{a:”Tomato”\}))  
console.log(set.has(item))

for(let item of set) \{  
console.log(item)  
\}  
结果：

ES6 代码:  
set.size -> undefined  
set.has(\{a:”Tomato”\}) -> false  
set.has(item) -> true  
TypeError: set\[Symbol.iterator\] is not a function  
WeakSet

Map

Map 也称为词典。

ES6 代码:  
var map = new Map();  
map.set(“Potato”, 12);  
map.set(“Tomato”, 34);

console.log(map.get(“Potato”))

for(let item of map) \{  
console.log(item)  
\}

for(let item in map) \{  
console.log(item)  
\}  
结果：

ES6 代码:  
map.get(“Potato”) -> 12  
item -> \[“Potato”,12\]  
item -> \[“Tomato”,34\]  
可以使用除字符串之外的其他类型。

ES6 代码:  
var map = new Map();  
var key = \{a: “a”\}  
map.set(key, 12);

console.log(map.get(key))  
console.log(map.get(\{a: “a”\}))  
结果：

ES6 代码:  
map.get(key) -> 12  
map.get(\{a: “a”\}) -> undefined  
Map

WeakMap

使用键的对象，并且只保留对键的弱引用。

ES6 代码:  
var wm = new WeakMap();

var o1 = \{\}  
var o2 = \{\}  
var o3 = \{\}

wm.set(o1, 1);  
wm.set(o2, 2);  
wm.set(o3, \{a: “a”\});  
wm.set(\{\}, 4);

console.log(wm.get(o2));  
console.log(wm.has(\{\}))

delete o2;

console.log(wm.get(o3));

for(let item in wm) \{  
console.log(item)  
\}

for(let item of wm) \{  
console.log(item)  
\}  
结果：

ES6 代码:  
wm.get(o2) -> 2  
wm.has(\{\}) -> false  
wm.get(o3) -> \{“a”:”a”\}  
TypeError: wm\[Symbol.iterator\] is not a function  
WeakMap

代理（Proxy）

代理可以用来改变对象的行为。 它们允许我们定义 trap 。

ES6 代码:  
var obj = function ProfanityGenerator() \{  
return \{  
words: “Horrible words”  
\}  
\}()

var handler = function CensoringHandler() \{  
return \{  
get: function (target, key) \{  
return target\[key\].replace(“Horrible”, “Nice”);  
\},  
\}

\}()

var proxy = new Proxy(obj, handler);

console.log(proxy.words);  
结果：

ES6 代码:  
proxy.words -> Nice words  
提供以下 trap ：

ES6 代码:  
var handler =  
\{  
get:…,  
set:…,  
has:…,  
deleteProperty:…,  
apply:…,  
construct:…,  
getOwnPropertyDescriptor:…,  
defineProperty:…,  
getPrototypeOf:…,  
setPrototypeOf:…,  
enumerate:…,  
ownKeys:…,  
preventExtensions:…,  
isExtensible:…  
\}  
Proxy

Symbols

Symbols 是一个新类型。 可用于创建匿名属性。

ES6 代码:  
var typeSymbol = Symbol(“type”);

class Pet \{

constructor(type) \{

this[typeSymbol] = type;

\}  
getType() \{  
return this\[typeSymbol\];  
\}

var a = new Pet(“dog”);  
console.log(a.getType());  
console.log(Object.getOwnPropertyNames(a))

console.log(Symbol(“a”) === Symbol(“a”))  
结果：

ES6 代码:  
a.getType() -> dog  
Object.getOwnPropertyNames(a) -> \[\]  
Symbol(“a”) === Symbol(“a”) -> false  
更多信息

可继承内置函数

我们现在可以继承原生类。

ES6 代码:  
class CustomArray extends Array \{

var a = new CustomArray();

a\[0\] = 2  
console.log(a\[0\])  
结果：

ES6 代码:  
a\[0\] -> 2  
不能使用数组的代理(Proxy)来覆盖getter函数。

新类库

各种新的方法和常量。

ES6 代码:  
console.log(Number.EPSILON)  
console.log(Number.isInteger(Infinity))  
console.log(Number.isNaN(“NaN”))

console.log(Math.acosh(3))  
console.log(Math.hypot(3, 4))  
console.log(Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2))

console.log(“abcde”.includes(“cd”) )  
console.log(“abc”.repeat(3) )

console.log(Array.of(1, 2, 3) )  
console.log(\[0, 0, 0\].fill(7, 1) )  
console.log(\[1, 2, 3\].find(x => x == 3) )  
console.log(\[1, 2, 3\].findIndex(x => x == 2))  
console.log(\[1, 2, 3, 4, 5\].copyWithin(3, 0))  
console.log(\[“a”, “b”, “c”\].entries() )  
console.log(\[“a”, “b”, “c”\].keys() )  
console.log(\[“a”, “b”, “c”\].values() )

console.log(Object.assign(\{\}, \{ origin: new Point(0,0) \}))  
结果：

ES6 代码:  
Number.EPSILON -> 2.220446049250313e-16  
Number.isInteger(Infinity) -> false  
Number.isNaN(“NaN”) -> false  
Math.acosh(3) -> 1.7627471740390859  
Math.hypot(3, 4) -> 5  
Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) -> 2  
“abcde”.includes(“cd”) -> true  
“abc”.repeat(3) -> abcabcabc  
Array.of(1, 2, 3) -> \[1,2,3\]  
\[0, 0, 0\].fill(7, 1) -> \[0,7,7\]  
\[1, 2, 3\].find(x => x == 3) -> 3  
\[1, 2, 3\].findIndex(x => x == 2) -> 1  
\[1, 2, 3, 4, 5\].copyWithin(3, 0) -> \[1,2,3,1,2\]  
\[“a”, “b”, “c”\].entries() -> \{\}  
\[“a”, “b”, “c”\].keys() -> \{\}  
\[“a”, “b”, “c”\].values() -> TypeError: \[“a”,”b”,”c”\].values is not a function  
Object.assign(\{\}, \{ origin: new Point(0,0) \}) -> ReferenceError: Point is not defined  
文档: Number, Math, Array.from, Array.of, Array.prototype.copyWithin, Object.assign

二进制和八进制

二进制和八进制数字的字面量。

ES6 代码:  
console.log(0b11111)  
console.log(0o2342)

console.log(0xff); // also in es5  
结果：

ES6 代码:  
0b11111 -> 31  
0o2342 -> 1250  
0xff -> 255  
Promises

异步编程。

ES6 代码:  
var p1 = new Promise((resolve, reject) => \{  
setTimeout(() => resolve(“1”), 101)  
\})  
var p2 = new Promise((resolve, reject) => \{  
setTimeout(() => resolve(“2”), 100)  
\})

Promise.race(\[p1, p2\]).then((res) => \{  
console.log(res)  
\})

Promise.all(\[p1, p2\]).then((res) => \{  
console.log(res)  
\})  
结果：

ES6 代码:  
res -> 2  
res -> \[“1”,”2”\]  
快速的 Promise

ES6 代码:  
var p1 = Promise.resolve(“1”)  
var p2 = Promise.reject(“2”)

Promise.race(\[p1, p2\]).then((res) => \{  
console.log(res)  
\})  
结果：

ES6 代码:  
res -> 1  
快速失败

如果一个 promise 失败，all和race也将 reject(拒绝)。

ES6 代码:  
var p1 = new Promise((resolve, reject) => \{  
setTimeout(() => resolve(“1”), 1001)  
\})  
var p2 = new Promise((resolve, reject) => \{  
setTimeout(() => reject(“2”), 1)  
\})

Promise.race(\[p1, p2\]).then((res) => \{  
console.log(“success” + res)  
\}, res => \{  
console.log(“error ” + res)  
\})

Promise.all(\[p1, p2\]).then((res) => \{  
console.log(“success” + res)  
\}, res => \{  
console.log(“error ” + res)  
\})  
结果：

ES6 代码:  
“error ” + res -> error 2  
“error ” + res -> error 2  
更多信息

反射（Reflect）

新类型的元编程与新的API现有的还有一些新的方法。

ES6 代码:  
var z = \{w: “Super Hello”\}  
var y = \{x: “hello”, **proto**: z\};

console.log(Reflect.getOwnPropertyDescriptor(y, “x”));  
console.log(Reflect.has(y, “w”));  
console.log(Reflect.ownKeys(y, “w”));

console.log(Reflect.has(y, “x”));  
console.log(Reflect.deleteProperty(y,”x”))  
console.log(Reflect.has(y, “x”));  
结果：

ES6 代码:  
Reflect.getOwnPropertyDescriptor(y, “x”) -> \{“value”:”hello”,”writable”:true,”enumerable”:true,”configurable”:true\}  
Reflect.has(y, “w”) -> true  
Reflect.ownKeys(y, “w”) -> \[“x”\]  
Reflect.has(y, “x”) -> true  
Reflect.deleteProperty(y,”x”) -> true  
Reflect.has(y, “x”) -> false  
更多信息

尾调用（Tail Call）优化

尾调用的概念非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。

ES6可以确保尾调用不会造成堆栈溢出。 （不是所有的实现工作）。

ES6 代码:  
function factorial(n, acc = 1) \{  
if (n <= 1) return acc;  
return factorial(n - 1, n \* acc);  
\}  
console.log(factorial(10))  
console.log(factorial(100))  
console.log(factorial(1000))  
console.log(factorial(10000))  
console.log(factorial(100000))  
console.log(factorial(1000000))  
结果：

ES6 代码:  
factorial(10) -> 3628800  
factorial(100) -> 9.332621544394418e+157  
factorial(1000) -> Infinity  
factorial(10000) -> Infinity  
factorial(100000) -> RangeError: Maximum call stack size exceeded  
factorial(1000000) -> RangeError: Maximum call stack size exceeded  
原文：ES6 Features

 正文完。下面还有一个推广让最好的人才遇见更好的机会！

互联网行业的年轻人，他们面对着怎样的职业瓶颈、困惑与未来选择？过去，这鲜有人关心。资深的职场人，也多半优先选择熟人去推荐机会。

100offer致力于改变现状，帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ，可以一周内获得中国、美国等数千家优质企业的工作机会。