js-数组新方法和对象新方法☂️☂️

125 阅读3分钟

数组新方法

1、扩展运算符

(1)...将数组展开

let arr = [1, 2, 3];
console.log(...arr); //1 2 3

(2)实现复制一个数组

let arr1 = [1, 2, 3];
let arr2 = [...arr1];
arr2[0] = 5;
console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // [ 5, 2, 3 ]

(3) 合并数组

数组值是基本数据类型,深拷贝

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = [5, 6];
let arr4 = [...arr1, ...arr2, ...arr3];
arr4[0] = 9;
console.log(arr4); // [ 9, 2, 3, 4, 5, 6 ]
console.log(arr1); //[ 1, 2 ] 深拷贝,原值没有变

数组值是引用对象,浅拷贝

const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];
const a4 = [...a1, ...a2];
a4[0].foo = 9;
console.log(a4); // [ { foo: 9 }, { bar: 2 } ]
console.log(a1); // [{ foo: 9 }] 浅拷贝,值改变,原对象值改变

2、解构赋值

const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(...rest); // 2 3 4 5

(1) 将字符串转成真正的数组

let arr = [...'hello'];
console.log(arr); // [ 'h', 'e', 'l', 'l', 'o' ]

(2) 任何实现了遍历器接口的对象,都可以使用...转成真正的数组,没有实现遍历器接口的就不行

// ==================map结构转成数组==============
let map = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three'],
]);

let arr = [...map.keys()];
console.log(arr);// [1, 2, 3]
// ================generator返回值转成数组============
const go = function* () {
    yield 1;
    yield 2;
    yield 3;
};

let arr = [...go()]
console.log(arr);// [1, 2, 3]
// =============set转成数组=================
let set = new Set([1, 2, 3]);
console.log(set); // Set(3) { 1, 2, 3 }
let arr = [...set];
console.log(arr);    //[ 1, 2, 3 ]

3、Array.from()

将类似数据的对象转成数组,将含有遍历器结构的对象转成数组 所谓类似数组的对象,本质就是有length顺序 Array.from()还接受第二个参数,类似于map操作,对数组的每一项进行处理,将处理后的值放入返回的数组

4、Array.of()

用于将一组数值转成数组

let arr = Array.of(3, 11, 8)
console.log(arr); // [3,11,8]
let arr2 = Array.of(3)
console.log(arr2); // [3]

5、copyWithin()

会改变原数组

let arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // Array.prototype.copyWithin(target, start = 0, end = this.length)
//target 从该位置开始替换,start从该位置开始读取,end默认是数组长度
console.log(arr); // [ 4, 5, 3, 4, 5 ]

6、find() 和findIndex()

find返回找到的值,findIndex返回找到的下标

7、fill()

向数组中填充值 接受第1,2个参数,指定填充的开始位置和结束位置 如果填充的值是对象,实现的是浅拷贝

8、keys()、entires()、values()

遍历数组,返回一个遍历器,可以使用for of 遍历

9、includes()

判断一个数组中是否还有一个值,返回boolean值。可以解决indexOf对NaN误判的问题 与map和set的has区分 map的has是查找键名的 set的has是查找值的

10、flat和flatMap

flat 将数组扁平化 flatMap 先执行map方法,在将数组扁平化,只能拉平一组

11、at()

返回某个位置的数组值,支持负值,超出范围返回undefined

12、空位

es6的方法,明确将空位转成undefined Array.from()、扩展运算符(...)、copyWithin()、fill()、for...of、entries()、keys()、values()、find()和findIndex()

13、排序sort

1828772731-600012f577afe.png

对象新方法

1、Object.is

准确的判断+0和-0 不相等,NaN和NaN相等

2、Object.assgin()

用于对象的合并,将源对象的可枚举属性复制给目标对象 主要用途: 为对象添加属性 为对象添加方法 克隆一个对象,浅拷贝 合并对象

3、Object.keys(),Object.values(),Object.entries()

4、Object.setPrototypeOf() 为对象设置原型

5、Object.getPrototypeOf(); 获取对象原型

6、Object.getOwnPropertyDescriptors()会返回某个对象属性的描述对象

7、Object.fromEntries()

将数组键值对转换成对象

const entries = new Map([
    ['foo', 'bar'],
    ['baz', 42]
]);

let obj = Object.fromEntries(entries);
console.log(obj);   // { foo: "bar", baz: 42 }