ESNEXT（ES6及以后）常用API解析
ES6及以后新增的常用API解析
注：例子建立在非严格模式下，新版chrome浏览器下
严格模式下：window为undefined
node下：window为global
let和const和var的区别
for(var i = 0 ; i < 3 ; i++){
setTimeout(()=>{
console.log(i);
},0)
}
输出
3
3
3
为什么？
因为for循环是同步任务顺序执行，var定义是全局变量，setTimeout为宏任务，会放到下一轮任务队列里面，所以等到setTimeout输出的时候，i的值就就是已经经过for循环变成3了。
所以如何修改使其输出0,1,2
1.闭包
将通过闭包将变量i变成局部变量
for(var i = 0 ; i < 3 ; i++) {
(function(i){
setTimeout(()=>{
console.log(i);
},0)
})(i);
}
2.let
for(let i = 0 ; i < 3 ; i++) {
setTimeout(()=>{
console.log(i);
},0)
}
这里的i只在块级作用域下生效
//块级作用域
{
setTimeout(()=>{
console.log(i);
},0)
}
const和let一样只在块级作用域下生效
但是不允许修改
var有变量提升的作用,let和const没有
console.log(a); //undefined
var a = '1';
console.log(b); //报错
let b = '2';
console.log(c); //报错
const c = '3';
变量提升等价
console.log(a);
var a = '1';
//等价于
var a;
console.log(a);
a = '1';
普通函数和箭头函数
1.箭头函数不能被用作构造函数，普通函数可以
2.箭头函数没有arguments，普通函数有
3.箭头函数都是匿名函数，普通函数可以是匿名函数，也可以不是匿名函数
4.普通函数和箭头函数的this指向有区别
具体看我之前写的《一文彻底搞懂普通函数和箭头函数this指向区别》
class
class Test {
constructor(name) {
this.name = name;
}
static getFormatName() {
return `${this.name} - xixixi`
}
getName(){
return `${this.name} - xixi`
}
}
其中，静态方法的this指向Test类，普通方法的this指向实例化对象
模板字符串
const year = '2021';
const month = '10';
const day = '01';
let template = '${year}-${month}-${day}';
console.log(template); //2021-10-01
解构
1.数组解构
每一个解构属性与数组索引对齐
// 基础类型数组解构
let [a, b, c] = [1, 2, 3]
console.log(a, b, c) // 1, 2, 3
// 对象数组解构
let [a, b, c] = [{name: '1'}, {name: '2'}, {name: '3'}]
console.log(a, b, c) // {name: '1'}, {name: '2'}, {name: '3'}
// ...解构
let [head, ...tail] = [1, 2, 3, 4]
console.log(head, tail) // 1, [2, 3, 4]
2.对象解构
每一个解构属性与对象属性名称一致
// 对象属性解构
let { f1, f2 } = { f1: 'test1', f2: 'test2' }
console.log(f1, f2) // test1, test2
// 可以不按照顺序，这是数组解构和对象解构的区别之⼀
let { f2, f1 } = { f1: 'test1', f2: 'test2' }
console.log(f1, f2) // test1, test2
// 解构对象重命名
let { f1: rename, f2 } = { f1: 'test1', f2: 'test2' }
console.log(rename, f2) // test1, test2
// 嵌套解构
let { f1: {f11}} = { f1: { f11: 'test11', f12: 'test12' } }
console.log(f11) // test11
3.解构的原理是什么？
针对可迭代对象的Iterator接⼝，通过遍历器按顺序获取对应的值进⾏赋值.
3.1 那么 Iterator 是什么?
Iterator是一种接口，它能为各种不一样的数据提供统一的访问机制。换句话说，任何数据有Iterator
接口了，都可以通过遍历器进行遍历操作。就比如ES6中的for of就是遍历器，它就可以遍历包含
Iterator接口的数据。
3.2 Iterator有什么⽤?
为各种数据解构提供统⼀的访问接⼝
使得数据解构能按次序排列处理
可以使⽤ES6最新命令 for of进⾏遍历
function generateIterator(array) {
let nextIndex = 0
return {
next: () => nextIndex < array.length ? {
value: array[nextIndex++],
done: false
} : {
value: undefined,
done: true
}
};
}
const iterator = generateIterator([0, 1, 2])
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
3.3 可迭代对象是什么?
可迭代对象是Iterator接⼝的实现。这是ECMAScript 2015的补充，它不是内置或语法，⽽仅
仅是协议。任何遵循该协议点对象都能成为可迭代对象。可迭代对象得有两个协议：可迭代协
议和迭代器协议。
可迭代协议：对象必须实现iterator⽅法。即对象或其原型链上必须有⼀个名叫
Symbol.iterator的属性。该属性的值为⽆参函数，函数返回迭代器协议。
迭代器协议：定义了标准的⽅式来产⽣⼀个有限或⽆限序列值。其要求必须实现⼀个next()⽅
法，该⽅法返回对象有done(boolean)和value属性。
3.4 手写一个可迭代对象
const obj = {
count:0,
[Symbol.iterator]: function() {
return {
next: () =>{
this.count++;
if(this.count >= 10){
return {
done:true,
value:undefined
}
}else{
return {
done:false,
value:this.count
}
}
}
}
}
}
for(let item of obj){
console.log(item);
}
//或者
const obj = {
0: 'a',
1: 'b',
2: 'c',
length:3,
[Symbol.iterator]:Array.prototype[Symbol.iterator]
}
for(let item of obj){
console.log(item);
}
遍历
1.for in
一般用于遍历对象属性
不建议遍历数组，因为for in会把原型链上的东西也遍历出来
没有break
2.for of
仅遍历当前对象
遍历可迭代对象，包括Array,Map,Set,String,arguments,NodeList等
可以与break,continue,return配合
Object
1.Object.keys
该方法返回一个给定对象的自身可枚举属性组成的数组
const obj = { a: 1, b: 2 };
const keys = Object.keys(obj); // [a, b]
手写实现一个函数模拟Object.keys?
function getObjectKeys(obj) {
let result = [];
for(const prop in obj){
if(obj.has)
}
}
let obj = { a: 1, b: 2 };
obj.__proto__.c = 3;
console.log(getObjectKeys(obj));
2.Object.values
该⽅法返回⼀个给定对象⾃身的所有可枚举属性值的数组
const obj = { a: 1, b: 2 };
const keys = Object.values(obj); // [1, 2]
3.Object.entries
该⽅法返回⼀个给定对象⾃身可枚举属性的键值对数组。
const obj = { a: 1, b: 2 };
const keys = Object.entries(obj); // [['a',1], ['b',2]]
4.Object.create()
以方法第一个参数作为原形对象，创建一个新对象
当传入第二个参数时
const b = Object.create(Person.prototype, {
name: {
value: 'coco',
writable: true,
configurable: true,
enumerable: true,
},
sex: {
enumerable: true,
get: function () {
return 'hello sex'
},
set: function (val) {
console.log('set value:' + val)
}
}
})
console.log(b.name)
console.log(b.sex)
5.Object.assign()
浅拷贝，类似
function shallowClone(source) {
const target = {};
for (const i in source) {
if (source.hasOwnProperty(i)) {
target[i] = source[i];
}
}
return target;
}
Array
1.Array.flat
打平数组
flat() ⽅法会按照⼀个可指定的深度递归遍历数组，并将所有元素与遍历到的⼦数组中的元素
合并为⼀个新数组返回
const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
//使⽤ Infinity，可展开任意深度的嵌套数组
const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
第一个参数为深度，当传Infinity时，无论深度是多少都直接打平
手写一个Array.flat
function arrayFlat(array,depth){
if(depth > 0){
array = array.reduce((res,item)=>{
if(!Array.isArray(item)){
res.push(item)
}else{
res = res.concat(arrayFlat(item,depth-1));
}
return res;
},[]).slice()
}
return array;
}
2.Array.includes
includes() ⽅法⽤来判断⼀个数组是否包含⼀个指定的值，根据情况，如果包含则返回 true，
否则返回false。
const array1 = [1, 2, 3];
console.log(array1.includes(2));//true
其实它有两个参数, 只不过我们平时只使⽤⼀个.
- valueToFind
需要查找的元素值。
- fromIndex 可选(不常用)
从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length +
fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜
寻）。默认为 0。
3.Array.find
find() ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。否则返回 undefined。
callback
在数组每⼀项上执⾏的函数，接收 3 个参数：
- element
当前遍历到的元素。
- index可选
当前遍历到的索引。
- array可选
数组本身
const test = [
{name: 'a', age: 11 },
{name: 'b', age: 20 },
{name: 'c', age: 50}
];
function callback(element,index,array) {
return element.name === 'a';
}
console.log(test.find(callback));
4.Array.from
4.1 Array.from() ⽅法从⼀个类似数组或可迭代对象创建⼀个新的，浅拷⻉的数组实例。
arrayLike
想要转换成数组的伪数组对象或可迭代对象。
mapFn 可选
如果指定了该参数，新数组中的每个元素会执⾏该回调函数。
4.2 Array.from() 可以通过以下⽅式来创建数组对象：
伪数组对象（拥有⼀个 length 属性和若⼲索引属性的任意对象）
可迭代对象（可以获取对象中的元素,如 Map和 Set 等）
console.log(Array.from('foo'));//['foo']
console.log(Array.from([1, 2, 3], x => x + x));//[2,3,4]
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]
const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]
const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];
Array.from(mapper.keys());
// ['1', '2'];
5.Array.of
Array.of() ⽅法创建⼀个具有可变数量参数的新数组实例，⽽不考虑参数的数量或类型。
Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]