数组方法

Array 对象

es5 数组方法

Array 对象用于在单个的变量中存储多个值。

创建 Array 对象的语法：
new Array();
new Array(size);
new Array(element0, element1, …, elementn);
参数
参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。

参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回值
返回新创建并被初始化了的数组。

如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。

当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。

当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。

当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

Array 对象属性

属性 描述
constructor 返回对创建此对象的数组函数的引用。
length 设置或返回数组中元素的数目。
prototype 使您有能力向对象添加属性和方法。
Array 对象方法

方法 描述

concat() 连接两个或更多的数组，并返回结果。
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reverse() 颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort() 对数组的元素进行排序
splice() 删除元素，并向数组添加新元素。
toSource() 返回该对象的源代码。
toString() 把数组转换为字符串，并返回结果。
toLocaleString() 把数组转换为本地数组，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() 返回数组对象的原始值

es6中新增数组的方法

扩展运算符
Array.from()
Array.of()
数组实例的 copyWithin()
数组实例的 find() 和 findIndex()
数组实例的 fill()
数组实例的 entries()，keys() 和 values()
数组实例的 includes()
数组实例的 flat()，flatMap()
数组的空位

1. Array.from
这个东西就是把一些集合，或者长的像数组的伪数组转换成真的数组，比如arguments，js选择器找到dom集合,
还有对象模拟的数组

        var obj = {
        '0' : 1,
        length : 1
        }
    
    Array.from(obj / arguments / 伪数组) //返回的是一个数组
    [].slice.call(arguments, 0) //这种方式根from方法是一样的效果

//Array.from还有第二个参数，是一个回掉函数，功能类似map
Array.from( [1, 2, 3], item => item * 2 )

2. Array.of

Array.of(1, 2, 3, 4)    //把参数合并成一个数组返回，如果参数为空，则返回一个空数组

3. copyWithin

//这个东西用的不多，但是很有意思
//首先，参数有3个
//1: 被替换的起始位置   2: 选取替换值的起始位置   3: 选取替换值得结束位置
let arr = [1, 'c', 'd', 'a', 'b'];  //假如我想把a，b替换到1的位置
arr.copyWithin(0, 3, 5)   // ["a", "b", "d", "a", "b"]

4. find/findIndex

//find  返回数组中第一个符合条件的元素, findIndex返回索引
[1, 2, 3, 4, 5].find(function(item){
    return item > 3
})

5. fill

    //功能一： 字面意思填满，实际功能就是把数组中的每一个元素替换成指定值
    let arr = [1, 2, 3, 4]
    arr.fill(5)        //arr全变成了5

//功能二：指定范围替换，这功能似曾相识啊
arr.fill(6, 1, 3) //使用6 替换数组中 下表为1-3范围的值， 范围是下标>=1 && <3 的位置。
//猛的一看以为功能和splice一样呢，又去巩固了一下。splice是删除某一个元素，然后增加指定的个数，并且它第一个参数是下标起点，第二个参数是个数，而不是结束下标。

//扩展
[].fill.call( { length : 3 }, 4)  //结果为以为是数组，每个元素是4，结果返回的竟然还是对象。。。

6. entries/keys/values

let arr=['a', 'b', 'c']
for(let key of arr.keys()){}                     //取键
for(let value of arr.values()){}                //取值；不能直接使用，有兼容性问题，甚至谷歌
for(let [key, value] of arr.entries()){}       //都取

7.inludes和

var a = function(){}
[1, 2, 3, 4, a].includes(a)    //true
[1, 2, 3, 4, NaN].includes(NaN)    //true

8.filter

接下来再说说filter(), filter()参数和forEach()也是一样的, filter()主要是过滤的, 用来过滤数组中不满足条件的元素, 把满足条件的元素放到新的数组里, 并且不会改变原数组.
怎么用呢, 直接上代码.

    let array = [1, 2, 3, 4, 5];
    let temp = array.filter((item, index, arr) => {
        return item > 3;    
    });
    console.log(temp);
    console.log(array);

会输出什么呢,
 temp是4, 5,
 array没有变化,
 清晰明了吧, 是不是比用for循环硬写方便多了.

9.every
every() 我就不解释入参了, 都一样的, 主要说说every()的作用, 它会遍历数组, 在循环体内写条件, 如果每一项都是true, 就会返回true, 只要有一个是false, 就会返回false, 下面看看实例代码.

let array = [1, 2, 3, 4, 5];
let bo = array.every((item, index, arr) => {
    return item > 2;
});
console.log(bo);

这个输出不用我说了吧, 肯定是false啊, 不用再解释了吧.

10.some
some()又是做什么的呐, 同样, 遍历数组的每一项, 然后根据循环体内的条件去判断, 只要有一个是true, 就会停止循环.

let array = [1, 2, 3, 4, 5];
array.some((item, index, arr) => {
    console.log(item);
    return item > 3;
});

根据输出的item, 我们可以知道一共循环了多少次.
11.reduce
reduce(), 官方说明: 接收一个函数作为累加器, 数组中每个值(从左到右)开始缩减, 最终为一个值. 看完这句话, 心里莫名的想说一句 卧槽, ‘这什么玩意’. 其实说白了, reduce()接收的那个函数就是回调函数, 回调函数调用数组里的每一个元素, 直到循环结束.
reduce()跟其他几个方法不一样, 它有4个参数, 按顺序分别是 上一次的值, 当前的值, 当前值的索引, 数组. 参数介绍完毕, 直接看例子.
假如, 有一个数组, 里面的元素都是数字, 现在要计算数字的和, 正常情况就直接循环数组, 然后弄个中间变量挨个加了吧, 但是用了reduce()就省事儿多了

let array = [1, 2, 3, 4, 5];
let total = array.reduce((a, b) => {
    return a + b;
});
console.log(total);     // 15

12.扩展运算符
扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

    console.log(...[1, 2, 3])
    // 1 2 3
    
    console.log(1, ...[2, 3, 4], 5)
    // 1 2 3 4 5
    
    [...document.querySelectorAll('div')]

// [<div>, <div>, <div>]

该运算符主要用于函数调用。

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

详细解说：ECMAScript 6 入门