ES6+新增API拓展（对象API拓展、数组API拓展、字符串&函数API拓展、数值API拓展）（四）

系列文章目录

第一章：ES6基础语法（let、const、解构赋值、模板字符串、简化对象、箭头函数、扩展运算符）（一）
第二章：ES6深入（Symbol、类、迭代器、Set、Map）（二）
第三章：ES6深入（生成器、Promise、async/await）（三）

---

---

一、对象API拓展

以下都为静态方法的拓展

1.Object.is(a,b);

判断a和b的值是否相等

console.log(1===1);//true
console.log(Object.is(1,1));//true
console.log(Object.is(1,2));//false
console.log(+0===-0)//true
console.log(Object.is(+0,-0));//false
console.log(NaN===NaN);//false
console.log(Object.is(NaN,NaN));//true

2.Object.assign(o,obj) /Object.assign(o,obj,obj1);

两个参数实现对象复制、拷贝 第一个参数是目标对象
三个参数代表的是合并对象obj,obj1到o当中并返回o对象

// 使用assign方法只实现了一层的拷贝
let obj = {};
let obj1 = {
    name: 'zs',
    age: 12,
    calss: {
        number: 123
    }
};
let res = Object.assign(obj, obj1);
res.name = "ls";
obj.calss.number = 1
console.log(obj, obj1);
//{ name: 'ls', age: 12, calss: { number: 1 } } { name: 'zs', age: 12, calss: { number: 1 } }

//2.Object.assign(o,obj,obj1); //三个参数代表的是合并对象obj,obj1到o当中并返回o对象
let obj = {};
let obj1 = { name: 'hansan', age: 10 };
let obj2 = { gender: 'male' };
let res = Object.assign(obj, obj1, obj2);

console.log(res)
//{ name: 'hansan', age: 10, gender: 'male' }

3.Object.getPrototypeOf(obj)

获取原型对象中的方法

let obj = {
    name: "zhangsan"
}
console.log(obj.__proto__);//[Object: null prototype] {}
console.log(obj.constructor.prototype);//[Object: null prototype] {}
console.log(Object.getPrototypeOf(obj));//[Object: null prototype] {}

4.Object.setPrototypeOf(obj, obj1)

设置原型对象中的方法

Object.setPrototypeOf(obj, obj1); //将obj的原型对象设置为obj1
console.log(obj.__proto__);//{ name: 'ls' }
console.log(obj.constructor.prototype);//[Object: null prototype] {}
console.log(Object.getPrototypeOf(obj))//{ name: 'ls' }

5.Object.keys() Object.values() Object.entries() Object.fromEntries()

keys 返回键值组成的数组
values 返回属性值组成的数组
entries 返回键值对组成的数组
formentries 将二维数组转换为对象

let obj = {
    name: 'zs',
    age: 18
}

console.log(Object.keys(obj))//[ 'name', 'age' ]
console.log(Object.values(obj))//[ 'zs', 18 ]
console.log(Object.entries(obj))//[ [ 'name', 'zs' ], [ 'age', 18 ] ]
//formentries 将二维数组转换为对象
let res = Object.entries(obj);

console.log(Object.fromEntries(res)); //{ name: 'zs', age: 18 }

二、数组API拓展

数组在静态方法与实例方法中都有所拓展

1.Array.from()

将类数组对象转换为数组

console.log(Array.from("hello"));//[ 'h', 'e', 'l', 'l', 'o' ]

2.Array.of()

参数是数组元素，为了解决new Array(10)传递一个数组,创建length

var arr = new Array(10);
var arr1 = Array.of(10);
console.log(arr, arr1) //[ <10 empty items> ] [ 10 ]

3.Array.prototype.find((item)=>{})

find方法返回第一个满足条件的元素或者undefined 参数回调函数

var arr = [1, 2, 3, 4, 5];

let res = arr.find((item, index, arr) => {
    console.log(item, index, arr);
    // 1 0 [ 1, 2, 3, 4, 5 ]
    // 2 1 [ 1, 2, 3, 4, 5 ]
    // 3 2 [ 1, 2, 3, 4, 5 ]
    // 4 3 [ 1, 2, 3, 4, 5 ]
    return item > 3
});

console.log(res)//4

4.Array.prototype.findIndex();

参数为回调函数 findIndex返回第一个满足条件的元素的索引或者-1

var arr = [1, 2, 3, 4, 5];
let res = arr.findIndex((item, index, arr) => {
    console.log(item, index, arr);
    // 1 0 [ 1, 2, 3, 4, 5 ]
    // 2 1 [ 1, 2, 3, 4, 5 ]
    // 3 2 [ 1, 2, 3, 4, 5 ]
    return item > 2
})

console.log(res)//2

5.Array.prototype.includes();

includes是否包含某个元素，返回true/false

var arr = [1, 2, 3, 4, 5];
console.log(arr.includes(300));//false

6.Array.prototype.fill()

用来填充数组,修改原数组，多用于数组初始化

var arr = new Array(5);
arr.fill(0);
console.log(arr) //[ 0, 0, 0, 0, 0 ]

7.Array.prototype.keys() Array.prototype.values() Array.prototype.entries()

返回值：返回一个迭代器对象
实现了Iterator迭代器接口，只要有实现了Iterator接口就可以for-of遍历

var arr = [1, 2, 3, 4, 5];
console.log(arr.keys());//Object [Array Iterator] {}
console.log(arr.values());//Object [Array Iterator] {}
console.log(arr.entries())//Object [Array Iterator] {}

8.Array.prototype.flat()

var arr = [1, 2, 3, [4, 5, [6, 7, 8]]]
console.log(arr.toString().split(',').map(item => {
    return Number(item)
}))//[1, 2, 3, 4, 5, 6, 7, 8]

console.log(arr.flat(3))//[1, 2, 3, 4, 5, 6, 7, 8]

9.Array.prototype.flatMap()

它是 Array.prototype.map() 和Array.prototype.flat()的组合，通过对map调整后的数据尝试展平操作。

var arr = [1, 2, 3, [4, 5]];
let res = arr.flatMap(item => {
    if (typeof item === 'number') {
        return item * 2;
    } else {
        return item.map(item => {
            return item * 2;
        })
    }
})

console.log(res) //[ 2, 4, 6, 8, 10 ]

三、字符串&函数API拓展

1.String.prototype.trimStart()/String.prototype.trimEnd()

自ES5来，String.prototype.trim() 被用于去除头尾上的空格、换行符等，现在通过 trimStart()，trimEnd() 来头和尾进行单独控制。trimLeft()、trimRight() 是他们的别名。

let str = "    hello world   ";

console.log(str + "1")// hello world   1
console.log(str.trimStart(), "去除前面空格");// hello world    去除前面空格
console.log(str.trimEnd() + "1", "去除后面空格");// hello world1 去除后面空格

2.String.prototype.padStart() / String.prototype.padEnd()

这两个函数的作用是在头尾添加字符串，它们接收两个参数 str.padStart(targetLength [, padString])，其中 targetLength 表示填充完的字符串长度，padString 表示填充的字符串，默认空格

let str = "es8";

// 参数：填充后字符串长度 填充字符串
console.log(str); //es8
// console.log(str.padStart(4))
console.log(str.padStart(5, "abc")) //abes8 做截取
console.log(str.padStart(7, "abc")) //abcaes8 做重复
console.log(str.padEnd(5, "abc")) //es8ab 做截取
console.log(str.padEnd(7, "abc")) //es8abca 做重复

3.String.prototype.replaceAll

let str = '11113333'
console.log(str.replace('1', 'x'))//x1113333
console.log(str.replace(/1/g, 'x'))//xxxx3333
console.log(str.replaceAll('1', 'x'))//xxxx3333

4.Function.prototype.toString()

重新修订Function.prototype.toString()将从头到尾返回源代码中的实际文本片段。这意味着还将返回注释、空格和语法详细信息。

function foo() {
    // 注释
    console.log("我是一个函数");
}

console.log(foo.toString())
// function foo() {
//     // 注释
//     console.log("我是一个函数");
// }

四、数值API拓展

1.Number.isFinite(), Number.isNaN()

与isFinite、isNaN不同，这两个新方法只对数值有效，Number.isFinite()对于非数值一律返回false, Number.isNaN()只有对于NaN才返回true，非NaN一律返回false。

Number.isFinite(0.8); // true
Number.isFinite(NaN); // false
Number.isFinite(Infinity); // false
Number.isNaN(NaN) // true
Number.isNaN(15) // false

Number.parseInt(), Number.parseFloat()

ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变。

Number.parseInt('12.34') // 12
Number.parseFloat('123.45#') // 123.45

Number.isInteger()

Number.isInteger()用来判断一个数值是否为整数。

Number.isInteger(25) // true
Number.isInteger(25.1) // false