ES6部分总结

Posted 2020-09-29

1.arrows箭头函数
语法: =>
支持块级函数体, 同时也支持带返回值的表达式函数体.
与普通函数的this作用域不同, 箭头函数内部与它周围代码共享this作用域
即, this指向同一个东西
let obj = {
name:"leon",
arr:[1,2,3,4],
printArr () {
this.arr.forEach(f => console.log(this.name + "--->" + f))
}
}
//=====================================================================
2. classes
支持基于prototype的继承
超级调用 super call
实例instance
静态方法 static methods
// Classes
class SkinnedMesh extends THREE.Mesh {
constructor(geometry, metrials) {
super(geometry, meterials);

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

// ...
}

update(camera) {
// ...

super.update();
}

get boneCount() {
return this.bones.length;
}

set matrixType(matrixType) {
this.idMatrix = SkinnedMesh[matrixType]();
}

static defaultMatrix() {
return new THREE.Matrix4();
}
}
//======================================================================
3 . Template Strings 模板字符串
类似python

// 简单字面量字符串
`today is a good day`

// 多行字符串
`jun kai wang love
fu gui wang.`

// 字符串插值
let name = "Leon";
let time = "now";
`Hello ${name}, are you ok ${time}?`

// 构造一个HTTP请求前缀, 用于演绎替换和构造
POST `http://foo.org/bar?a=${a}&b=${b}
Content-type: application/json
X-Credentials: ${credentials}
{"foo": ${foo},
"bar": ${bar}}`(myOnReadyStateChangeHandler);

//=========================================================================
4.Destructuring 解构
let [a,,b] = [1,2,3] //故障弱化 在未匹配到值得情况下,产生一个undefined
类似标准的对象查找属性 obj["name"]

let [a] = [] // a === undefined //故障弱化解构

let [a=1] = [] // a === 1 // 带默认值

let{a,b,c} = get(); // 在scope内绑定a,b及c
//举个简单例子
function fn(){
var aa = 1, bb = 2,cc =3;
return {aa,bb,cc}
}
console.log(fn()) // {aa:1,bb:2,cc:3}
let {aa:q,bb:w,cc:e} = fn();
console.log(q,w,e) // 1,2,3
值得注意的是: 此时的解构赋值 = 左边 要先写函数返回值 aa : q 这样对应
//=========================================================================
5.Default + Rest + Spread 默认参数, 剩余参数(Rest Parameters), Spread语法
// y设置默认值
function f(x, y = 2) {
// 如果没有传入y的值(或者传入的是undefined), 那么y就等于默认的值12
return x + y;
}
f(3) === 5

// 将传入的参数的剩余参数绑定到数组
function f(x, ...y) {
// y是一个数组Array
return x * y.length;
}

f(3, "hello", true) === 6;

// ...操作符 将数组展开
function f(x, y, z) {
return x + y + z;
}
// 传入一个数组作为参数
f(...[1, 2, 3]) === 6;
//==============================================================
6. let + const
let 无变量提升 且 存在暂存死区

const 定义常量 . 无法修改

注: const定义的数组. 数组内容可以改变, 但指针(变量)指向的地址不会变
//====================================================================
7.Iterators + for..of 迭代器 for..of ### ?
let fibonacci = {
[Symbol.iterator](){
let pre = 0;
let cur = 1;
return {
next(){
[pre, cur] = [cur, pre + cur];
return {done: false, value: cur}
}
}
}
}

for (var n of fibonacci) {
// 在1000处截断序列
if (n > 1000) {
break;
}

console.log(n);
}
//==========================================================================

8.Map, Set, WeakMap, WeakSet
// Sets
let s = new Set();
s.add("hello").add("goodbye").add("hello");
// s.size === 2;
// s.has("hello") === true;

// Maps
let m = new Map();
m.set("hello", 42);
m.set(s, 34);
// m.get(s) === 34;

// Weak Sets
let ws = new WeakSet();
ws.add({data: 42});

// Weak Maps
let wm = new WeakMap();
wm.set(s, {extra: 42});
// wm.size === undefined;

Number.EPSILON
Number.isInteger(Infinity); // false
Number.isNaN("NaN"); // false

Math.acosh(3); // 1.762747174039086
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"

//==================================================================
9 .Math, Number, String, Array, Object APIs

Array.from(document.querySelectorAll("*")) // Returns a real Array
Array.of(1, 2, 3); // Similar to new Array(...), but without special one-arg behavior
[0, 0, 0].fill(7, 1); // [0, 7, 1]
[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(); // iterator [0, "a"], [1, "b"], [2, "c"]
["a", "b", "c"].keys(); // iterator 0, 1, 2
["a", "b", "c"].values(); // iterator "a", "b", "c"

Object.assign(Point, {origin: new Point(0, 0)});

//=======================================================================
10.Promises

Promises是一个异步编程库.
Promises是一个容器, 保存着某个未来才会结束的事件
(通常是一个异步操作)的结果.
function timeout(duration = 0) {
return new Promise((resolve, reject) => {
setTimeout(resolve, duration);
});
}

let p = timeout(1000).then(()=> {
return timeout(2000);
}).then(()=> {
throw new Error("hmm");
}).catch(err=> {
return Promise.all([timeout(100), timeout(200)]);
})

参考 : 微信公众号:  前端早读课   想学习的去支持关注一下. 内容比较倾向于工作和前沿JS