数组的扩展

１.复制数组

扩展运算符提供了复制数组的简便写法。

const a1 = [1, 2];
// 写法一
const a2 = [...a1];

２.合并数组

扩展运算符提供了数组合并的新写法。

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]

// ES6 的合并数组
const newArr = [...arr1, ...arr2, ...arr3]
console.log(newArr)
// [ 'a', 'b', 'c', 'd', 'e' ]

３.Array.from()

Array.from方法用于将两类对象转为真正的数组

类数组对象的属性名必须为数值型或字符串型的数字，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：

1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组

2、该类数组对象的属性名必须为数值型或字符串型的数字

该类数组对象的属性名可以加引号，也可以不加引号

const obj = {
    0: 1,
    1: '22',
    2: false,
    length: 2
};

console.log(Array.from(obj, item => item * 2));

// Array.prototype.slice.call();
// [].slice.call();
// [...]

４.Array.of()

Array.of方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

４.数组实例的 copyWithin() 　会修改当前数组。

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

上面代码表示将从 3 号位直到数组结束的成员（4 和 5），复制到从 0 号位开始的位置，结果覆盖了原来的 1 和 2。

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

５.数组实例的 find() 和 findIndex()

find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

// find 根据条件(回调) 按顺序遍历数组 当回调返回true时 就返回当前遍历到的值
const res = [1, 7, 6, 3].find((value, index, arr) => value % 2 === 0);
console.log(res);
//6

[1, 4, -5, 10].find((n) => n < 0)
// -5

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

arr.find(回调函数) 根据回调函数的条件来返回元素的值

arr.findIndex(回调函数) 根据回调函数的条件来返回元素的索引位置

// findIndex 根据条件(回调) 按顺序遍历数组 当回调返回true时 就返回当前遍历到的下标
const res = [1, 7, 6, 3, NaN].findIndex((value, index, arr) => Number.isNaN(value));
console.log(res);
//4

findIndexOf( )不能判断数组中有没有NAN

`６.fill`方法

填充数组还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

let arr = new Array(10).fill(0, 0, 3);
console.log(arr)
console.log([1, 2, 3].fill(0));

let arr2=['a', 'b', 'c'].fill(7, 1, 2)
console.log(arr2)

flii(7,1,2)表示，fill方法从 1 号位开始，向原数组填充 7，到 2 号位之前结束。

７.数组实例的 includes()

includes方法返回一个布尔值，表示某个数组是否包含给定的值，该方法的第二个参数表示搜索的起始位置，默认为0

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

8.扩展运算符

使用扩展运算符调用函数的时候，将数组展开，作为参数


const arr = [1, 2, 233, 3, 4, 5];

// Math.max();
console.log(Math.max(...arr));
console.log(Math.max.apply(null, arr));

9.生成器函数

解决了异步问题，也就是回调地狱生成器函数和扩展运算符可以生成一个数组

function* g() {
    console.log(1);
    yield 'hi~';
    console.log(2);
    yield 'imooc~';
}

// const arr = [...g()];
const gg = g();
gg.next();
setTimeout(function() {
    gg.next();
}, 1000);

10.set集合

特性：去重然后通过扩展运算符变成数组

let set = new Set([1, 2, 2, 3]);

console.log([...set]);

11.keys( ) values() entries()

// keys
const arr = [11, 21, 311, 444];

// console.log(arr.keys());
for (let i of arr.keys()) {
    console.log(i);
}
// values
for (let v of arr.values()) {
    console.log(v);
}

// entries
for (let [i, v] of arr.entries()) {
    console.log(i, v);
}

编程练习：

在0~100之间的随机整数中，获取十个整数，放入创建的数组中，对这个数组进行降序排序，并将这个数组的最大值和最小值。

let a = [];
for (let i = 0; i < 10; i++) {
    a[i] = Math.floor(Math.random() * 101);
    console.log(a[i])
}
a.sort((x, y) => {
    return (y - x);
})
document.write(a)
document.write(`这组数组中最大的值是${Math.max(...a)} ,最小的值是${Math.min(...a)}`);

来源：CSDN

作者：吴小花的博客

链接：https://blog.csdn.net/weixin_39089928/article/details/104537208

标签

const

回调函数

数组

arr

ES６入门（七） 数组的扩展