往期复习
ES6 随笔【赋值解构】
记录小编认为ES6中不常见，但以后很有用的
宝藏新特效
指数操作符 - **
** 指数运算符与 + - * % 属于同一性质的运算操作符 与函数Math.pow(..)等效
// 指数操作符
console.log(2**8); // 256
Object.getOwnPropertyDescriptors( )
获取对象的所有自身属性的描述符方法
所指定对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。
const obj = {
name: '大大',
age: ()=> { return '18' }
};
const result = Object.getOwnPropertyDescriptors(obj)
console.log(result)
// {
// name: { value: '大大', writable: true, enumerable: true, configurable: true },
// age: {
// value: [Function: age],
// writable: true,
// enumerable: true,
// configurable: true
// }
// }
用法
浅拷贝一个对象
Object.assign() 方法只能拷贝源对象的可枚举的自身属性，而且访问器属性会被转换成数据属性
利用getOwnPropertyDescriptors()函数，同时拷贝时，拷贝属性的特性们，也拷贝源对象的原型
const obj = {
name: '大大',
age: ()=> { return '18' }
};
const obj2 = Object.create(
Object.getPrototypeOf(obj),
Object.getOwnPropertyDescriptors(obj)
);
console.log(obj2)
// { name: '大大', age: [Function: age] }
创建子类
创建子类的典型方法是定义子类，将其原型设置为超类的实例，然后在该实例上定义属性
这么写很不优雅，特别是对于 getters 和 setter 而言。
可以使用Object.create()结合Object.getOwnPropertyDescriptors()来创建子类
function superclass() {} // 父类
superclass.prototype = {
// 在这里定义方法和属性
};
function subclass() {} // 子类
subclass.prototype = Object.create(superclass.prototype, Object.getOwnPropertyDescriptors({
// 在这里定义方法和属性
}));
flat( )
flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
语法
var newArray = arr.flat([depth]) // 等效于 reduce + concat
用法
扁平化嵌套数组
var arr1 = [1, 2, [3, 4]];
arr1.flat(); // [1, 2, 3, 4]
var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2); // [1, 2, 3, 4, 5, 6]
// 使用 Infinity（无限大），可展开任意深度的嵌套数组
// 等效于 reduce + concat + isArray + recursivity
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
扁平化与数组空项
// 等效于 forEach + isArray + push + recursivity
var arr4 = [1, 2, , 4, 5];
arr4.flat(); // [1, 2, 4, 5]
flatMap( )
flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
语法
var new_array = arr1.flatMap(function callback(currentValue[, index[, array]]) {
// return element for new_array
}[, thisArg])
参数
callback
可以生成一个新数组中的元素的函数，可以传入三个参数：
- currentValue
当前正在数组中处理的元素
- index可选
可选的。数组中正在处理的当前元素的索引。
- array可选
可选的。被调用的 map 数组
thisArg
可选的。执行 callback 函数时 使用的this 值。
返回值
一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。
map 和 flatMap 的比较
let arr1 = ["it's Sunny in", "", "California"];
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]
trimStart( )
trimStart() 方法从字符串的开头删除空格。
trimLeft() 是此方法的别名。
const greeting = ' Hello world! ';
console.log(greeting); // " Hello world! "
console.log(greeting.trimStart()); // "Hello world! ";
trimEnd( )
trimEnd() 方法从一个字符串的末端移除空白字符。
trimRight() 是这个方法的别名。
const greeting = ' Hello world! ';
console.log(greeting); // " Hello world! ";
console.log(greeting.trimEnd()); // " Hello world!";
trim( )
trim() 方法会从一个字符串的两端删除空白字符。
在这个上下文中的空白字符是所有的空白字符
(space, tab, no-break space 等)
以及所有行终止符字符（如 LF，CR等）。
const greeting = ' Hello world! ';
console.log(greeting); // " Hello world! ";
console.log(greeting.trim()); // "Hello world!";
Object.fromEntries( )
Object.fromEntries() 方法把键值对列表转换为一个对象。
Map 转化为 Object
通过 Object.fromEntries， 可以将 Map 转换为 Object:
const map = new Map([ ['name', '大大'], ['age', 20] ]);
const obj = Object.fromEntries(map);
console.log(obj); // { name: '大大', age: 20 }
Array 转化为 Object
通过 Object.fromEntries， 可以将 Array 转换为 Object:
const arr = [ ['0', '大大'], ['1', '20'], ['2', '前端'] ];
const obj2= Object.fromEntries(arr);
console.log(obj2); // { '0': '大大', '1': '20', '2': '前端' }
对象转换
Object.fromEntries 是与 Object.entries() 相反的方法 用数组处理函数 -> 可以像下面这样转换对象：
const object1 = { a: 1, b: 2, c: 3 };
const object2 = Object.fromEntries(
Object.entries(object1)
.map(([ key, val ]) => [ key, val * 2 ])
);
console.log(object2);
// { a: 2, b: 4, c: 6 }
catch
原先
try {} catch(e) {}
如今
try {} catch {}
基本数据类型发展
ES6及之前(5种)
String、Number、Boolean、Null、Undefined
ES6之后ES10之前(6种)
String、Number、Boolean、Null、Undefined、Symbol
ES10之后(7种)
String、Number、Boolean、Null、Undefined、Symbol、BigInt
结尾
ES6 随笔【赋值解构】
ES6 随笔【奇形怪状】
参考 上沅兮 大佬的文章 - ES6、ES7、ES8、ES9、ES10新特性一览
查询 MDN 官网资料
最后想说
- 记录下自己复习的点点滴滴
- 要是本文章(笔记)有任何需要修改或注意的地方，麻烦联系我噢！小编卑微整改
