JavaScript中Array数组方法总结

JavaScript 中 Array 数组方法总结

方法	是否修改原始值	是否有返回值	描述
join()	否	是	把数组的所有元素放入一个字符串。原始值不变。
concat()	否	是	连接两个或更多的数组，并返回结果，返回新数组，原始值不变。
reverse()	是	是	反转数组的元素顺序。原始值改变。
sort()	是	是	对数组的元素进行排序。原始值改变。
pop()	是	是	删除数组的最后一个元素并返回删除的元素。原始值改变。
push()	是	是	向数组的末尾添加一个或更多元素，并返回新的长度。原始值改变。
shift()	是	是	删除并返回数组的第一个元素。原始值改变。
unshift()	是	是	向数组的开头添加一个或更多元素，并返回新的长度。原始值改变。
slice()	否	是	选取数组的一部分，并返回一个新数组。原始值不变。
splice()	是	是	从数组中添加或删除元素。原始值改变。
forEach()	否	否	数组每个元素都执行一次回调函数。原始值不变。
every()	否	是	检测数值元素的每个元素是否都符合条件。布尔值。如果所有元素都通过检测返回 true，否则返回 false。原始值不变。
some()	否	是	检测数组元素中是否有元素符合指定条件。布尔值。如果数组中有元素满足条件返回 true，否则返回 false。原始值不变。
filter()	否	是	检测数值元素，并返回符合条件所有元素的数组。返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。原始值不变。
map()	否	是	通过指定函数处理数组的每个元素，并返回处理后的数组。返回新数组，原始值不变。
indexOf()	否	是	搜索数组中的元素，并返回它所在的位置。从左向右查找，元素在数组中的位置，如果没有搜索到则返回 -1。原始值不变。
lastIndexOf()	否	是	搜索数组中的元素，并返回它最后出现的位置。从右向左查找，元素在数组中的位置，如果没有搜索到则返回 -1。原始值不变。
includes()	否	是	判断一个数组是否包含一个指定的值。布尔值。如果找到指定值返回 true，否则返回 false。原始值不变。
copyWithin()	是	是	从数组的指定位置拷贝元素到数组的另一个指定位置中。原始值改变。
from()	否	是	将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。返回数组对象。原始值不变。
fill()	是	是	使用一个固定值来填充数组。并返回一个新数组。原始值改变。
find()	否	是	返回符合传入测试（函数）条件的数组元素。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。原始值不变。
findIndex()	否	是	返回符合传入测试（函数）条件的数组元素索引。当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1，原始值不变。
isArray()	否	是	判断对象是否为数组。如果对象是数组返回 true，否则返回 false。布尔值。原始值不变。
keys()	否	是	包含原始数组的键名(key)，键名的遍历器对象，可以用 for...of 循环进行遍历。
values()	否	是	包含原始数组的键值(value)，键值的遍历器对象，可以用 for...of 循环进行遍历。
entries()	否	是	包含原始数组的键名(key)、键值(value)，键值对的遍历器对象，可以用 for...of 循环进行遍历。
of()	否	是	总是将一组值，转换为数组。
flat()	否	是	用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。
flatMap()	否	是	总对原数组的每个成员执行一个函数，然后对返回值组成的数组执行 flat()方法。该方法返回一个新数组，不改变原数组。只能展开一层数组。
at()	否	是	接受一个整数作为参数，返回对应位置的成员，支持负索引。这个方法不仅可用于数组，也可用于字符串和类型数组（TypedArray）。
reduce()	否	是	对数组里每个元素执行一次回调函数，将数组元素计算为一个值（从左到右）。
reduceRight()	否	是	对数组里每个元素执行一次回调函数，将数组元素计算为一个值（从右到左）。
toString()	否	是	把数组转换为字符串，并返回结果。
valueOf()	否	是	返回数组对象的原始值。

跳出循环/结束遍历方法

方法	break	continue	return	return true	return false	结论
for 循环	成功	跳出本次循环	不合法	不合法	不合法	√
Array.forEach()	不合法	不合法	跳出本次循环	跳出本次循环	跳出本次循环	×
for...in	成功	跳出本次循环	不合法	不合法	不合法	√
Array.map()	不合法	不合法	跳出本次循环	跳出本次循环	跳出本次循环	×
Array.some()	不合法	不合法	跳出本次循环	成功	跳出本次循环	√
Array.every()	不合法	不合法	成功	跳出本次循环	成功	√
Array.find()	不合法	不合法	跳出本次循环	成功	跳出本次循环	√
Array.findIndex()	不合法	不合法	跳出本次循环	成功	跳出本次循环	√

方法解析

代码没有特殊标注情况下，本文环境均是在 Chrome 环境下测试输出

`array.join()` : 把数组的所有元素放入一个字符串。原始值不变。

默认值是 ,



        let arr1 = [1,2,3,4,5,6,7,8,9];

        // 1,2,3,4,5,6,7,8,9  [1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log( arr1.join(), arr1);

        // 1-2-3-4-5-6-7-8-9  [1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log( arr1.join('-'), arr1);

`array.concat()` : 连接两个或更多的数组，并返回结果，返回新数组，原始值不变。

可以放数组，字符串任何东西


        let str1 = 'hello';
        let obj1 = { age: 19};
        let arr1 = [1,2,3];
        let arr2 = [4,5];

        // [1, 2, 3, 'hello', {…}, 4, 5]
        console.log( arr1.concat( str1, obj1 ,arr2 ) );

        // [1, 2, 3]
        console.log( arr1 );

`array.reverse()` : 反转数组的元素顺序。原始值改变。


        let arr1 = [1,2,3,4,5,6,7,8,9];

        // [9, 8, 7, 6, 5, 4, 3, 2, 1]  [9, 8, 7, 6, 5, 4, 3, 2, 1]
        console.log( arr1.reverse(), arr1);

`array.sort( [排序规则] )` : 对数组的元素进行排序。原始值改变。

条件：
1，规则必须是一个函数。
2，函数必须有返回值。
3，返回值必须是 number 类型的数字。
排序方式：每次挑选两个值进行排序，直到把所有的位置关系都确定下。
1，如果返回值是一个正数，就会交换两个比较值的位置。
2，如果返回值是负数或者零，就不会交换两个比较值的位置。（0 表示两个比较值是相等的。）
注意：自定义规则必须返回一个 number 类型的数字，否则规则无效，不会排序。


        let arr1 = [11,12,13,14,135,16,17,18,19];

        // [9, 8, 7, 6, 5, 4, 3, 2, 1]  [9, 8, 7, 6, 5, 4, 3, 2, 1]
        console.log( arr1.sort(), arr1);

        //  [11, 12, 13, 14, 16, 17, 18, 19, 135]  [11, 12, 13, 14, 16, 17, 18, 19, 135]
        console.log( arr1.sort( ( n1, n2)=>{ return n1-n2 } ), arr1);

        // [135, 19, 18, 17, 16, 14, 13, 12, 11]  [135, 19, 18, 17, 16, 14, 13, 12, 11]
        console.log( arr1.sort( ( n1, n2)=>{ return n2-n1 } ), arr1);

`array.pop()` : 删除数组的最后一个元素并返回删除的元素。原始值改变。


        let arr1 = [1,2,3,4,5];

        // 5
        console.log( arr1.pop() );

        // [1, 2, 3, 4]
        console.log( arr1 );

`array.push()` : 向数组的末尾添加一个或更多元素，并返回新的长度。原始值改变。


        let arr1 = [1,2,3,4,5];

        // 6
        console.log( arr1.push(6) );

        // [1, 2, 3, 4, 5, 6]
        console.log( arr1 );

        // 8
        console.log( arr1.push(6,7) );

        // [1, 2, 3, 4, 5, 6, 6, 7]
        console.log( arr1 );

        // 9
        console.log( arr1.push([6,7]) );

        // [1, 2, 3, 4, 5, 6, 6, 7, [6,7]]
        console.log( arr1 );

`array.shift()` : 删除并返回数组的第一个元素。原始值改变。



        let arr1 = [1,2,3,4,5];

        // 1
        console.log( arr1.shift() );

        // [2, 3, 4, 5]
        console.log( arr1 );

`array.unshift()` : 向数组的开头添加一个或更多元素，并返回新的长度。原始值改变。


        let arr1 = [1,2,3,4,5];

        // 6
        console.log( arr1.unshift(6) );

        // [6, 1, 2, 3, 4, 5]
        console.log( arr1 );

        // 8
        console.log( arr1.unshift(6,7) );

        // [6, 6, 7, 1, 2, 3, 4, 5]
        console.log( arr1 );

        // 9
        console.log( arr1.unshift([6,7]) );

        // [[6,7], 6, 7, 6, 1, 2, 3, 4, 5]
        console.log( arr1 );

`array.slice( start, end )` : 选取数组的一部分，并返回一个新数组。原始值不变。

start : 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

end : 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

不包含 end 元素，原数组不变，返回的是新数组,如果传负数，则用数组长度加上该数来确定相应的位置

如果 end 结束位置小于 start 起始位置，则返回空数组




        let arr1 = [1,2,3,4,5];

        // [1, 2, 3, 4, 5]
        console.log( arr1.slice() );

        // [3, 4, 5]
        console.log( arr1.slice( 2 ) );

        // [5]
        console.log( arr1.slice( -1 ) );

        // []
        console.log( arr1.slice( 3, 1 ) );

        // []
        console.log( arr1.slice( -1, -3 ) );

        // [3]
        console.log( arr1.slice( -3, -2 ) );

        // []
        console.log( arr1.slice( -30, 0 ) );

`array.splice( index, howmany, item1, ....., itemX )` : 从数组中添加或删除元素。原始值改变。

如果仅删除元素，则返回删除元素的数组。如果未删除任何元素，则返回空数组。

index : 必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。

howmany : 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。

item1, ..., itemX : 可选。要添加到数组的新元素



        let arr1 = [1,2,3,4,5,6,7,8,9];

        // []  [1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log( arr1.splice(), arr1);

        // [3, 4, 5, 6, 7, 8, 9]   [1, 2]
        console.log( arr1.splice( 2 ), arr1 );

        let arr2 = [1,2,3,4,5,6,7,8,9];

        //   [7, 8, 9]   [1, 2, 3, 4, 5, 6]
        console.log( arr2.splice( -3 ), arr2 );

        let arr3 = [1,2,3,4,5,6,7,8,9];

        //  [4, 5, 6]   [1, 2, 3, 7, 8, 9]
        console.log( arr3.splice( 3, 3 ), arr3 );

`array.forEach( fn )` : 数组每个元素都执行一次回调函数。原始值不变。

不会对空数组进行检测。

fn( item, index, arr) : fn 必须。函数，数组中的每个元素都会执行这个函数, item 必须。当前元素的值, index 可选。当前元素的索引值, arr 可选。当前元素属于的数组对象

基本类型我们当次循环拿到的 ele，只是 forEach 给我们在另一个地方复制创建新元素，是和原数组这个元素没有半毛钱联系的！所以，我们使用 forEach 循环拿到的 ele 赋值都是无用功！如果 fn 里面的 item 是对象，可就不是这种情况了，是会修改原始值的！！！

针对每一个元素执行提供的函数(executes a provided function once for each array element)。除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。

forEach() 被调用时，不会改变原数组，也就是调用它的数组（尽管 callback 函数在被调用时可能会改变原数组）。（译注：此处说法可能不够明确，具体可参考 EMCA 语言规范：‘forEach does not directly mutate the object on which it is called but the object may be mutated by the calls to callbackfn.’，即 forEach 不会直接改变调用它的对象，但是那个对象可能会被 callback 函数改变。）


        let sum = 0;
        let arr1 = [11,12,13,14,135,16,17,18,19];

        arr1.forEach( ( item) => { sum += item; } );

        // 255
        console.log(sum);

`array.every( fn )` : 检测数值元素的每个元素是否都符合条件。布尔值。如果所有元素都通过检测返回 true，否则返回 false。原始值不变。

不会对空数组进行检测。

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。

fn( item, index, arr) : fn 必须。函数，数组中的每个元素都会执行这个函数, item 必须。当前元素的值, index 可选。当前元素的索引值, arr 可选。当前元素属于的数组对象


        let arr1 = [11,12,13,14,135,16,17,18,19];

        // true  [11, 12, 13, 14, 135, 16, 17, 18, 19]
        console.log( arr1.every( ( item, index, arr )=>{ return item >9 } ), arr1);

        // false  [11, 12, 13, 14, 135, 16, 17, 18, 19]
        console.log( arr1.every( ( item, index, arr )=>{ return item >150 } ), arr1);

        let arr2 =[];

        // true  []
        console.log( arr2.every( ( item, index, arr )=>{ return item >9 } ), arr2);

        // true  []
        console.log( arr2.every( ( item, index, arr )=>{ return item >150 } ), arr2);

`array.some()` : 检测数组元素中是否有元素符合指定条件。布尔值。如果数组中有元素满足条件返回 true，否则返回 false。原始值不变。

不会对空数组进行检测。

如果有一个元素满足条件，则表达式返回 true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回 false。

fn( item, index, arr) : fn 必须。函数，数组中的每个元素都会执行这个函数, item 必须。当前元素的值, index 可选。当前元素的索引值, arr 可选。当前元素属于的数组对象


        let arr1 = [11,12,13,14,135,16,17,18,19];

        // true, [11, 12, 13, 14, 135, 16, 17, 18, 19]
        console.log( arr1.some( ( item, index, arr )=>{ return item += 15 } ), arr1);

        // true, [11, 12, 13, 14, 135, 16, 17, 18, 19]
        console.log( arr1.some( ( item, index, arr )=>{ return item += 150 } ), arr1);

        let arr2 =[];

        // false, []
        console.log( arr2.some( ( item, index, arr )=>{ return item += 9 } ), arr2);

        // false, []
        console.log( arr2.some( ( item, index, arr )=>{ return item += 150 } ), arr2);

`array.filter( fn )` : 检测数值元素，并返回符合条件所有元素的数组。返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。原始值不变。

不会对空数组进行检测。

结果是执行 fn 函数会返回 true 的项组成的数组。

fn( item, index, arr) : fn 必须。函数，数组中的每个元素都会执行这个函数, item 必须。当前元素的值, index 可选。当前元素的索引值, arr 可选。当前元素属于的数组对象


        let arr1 = [11,12,13,14,135,16,17,18,19];

        // [135, 16, 17, 18, 19] [11, 12, 13, 14, 135, 16, 17, 18, 19]
        console.log( arr1.filter( ( item, index, arr )=>{ return item > 15 } ), arr1);

        // [] [11, 12, 13, 14, 135, 16, 17, 18, 19]
        console.log( arr1.filter( ( item, index, arr )=>{ return item > 150 } ), arr1);

        let arr2 =[];

        // [] []
        console.log( arr2.filter( ( item, index, arr )=>{ return item > 9 } ), arr2);

        // [] []
        console.log( arr2.filter( ( item, index, arr )=>{ return item > 150 } ), arr2);

`array.map()` : 通过指定函数处理数组的每个元素，并返回处理后的数组。返回新数组，原始值不变。

不会对空数组进行检测。

fn( item, index, arr) : fn 必须。函数，数组中的每个元素都会执行这个函数, item 必须。当前元素的值, index 可选。当前元素的索引值, arr 可选。当前元素属于的数组对象

创建一个新的数组，其中每一个元素由调用数组中的每一个元素执行提供的函数得来(creates a new array with the results of calling a provided function on every element in the calling array)。map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。


        let arr1 = [11,12,13,14,135,16,17,18,19];

        // [26, 27, 28, 29, 150, 31, 32, 33, 34] [11, 12, 13, 14, 135, 16, 17, 18, 19]
        console.log( arr1.map( ( item, index, arr )=>{ return item += 15 } ), arr1);

        // [161, 162, 163, 164, 285, 166, 167, 168, 169]  [11, 12, 13, 14, 135, 16, 17, 18, 19]
        console.log( arr1.map( ( item, index, arr )=>{ return item += 150 } ), arr1);

        let arr2 =[];

        // [] []
        console.log( arr2.map( ( item, index, arr )=>{ return item += 9 } ), arr2);

        // [] []
        console.log( arr2.map( ( item, index, arr )=>{ return item += 150 } ), arr2);

`array.indexOf( searchItem, fromIndex )` : 搜索数组中的元素，并返回它所在的位置。从左向右查找，元素在数组中的位置，如果没有搜索到则返回 -1。原始值不变。

searchItem : 必须。查找的元素。

fromIndex : 可选，表示从这个位置开始向右搜索，若缺省或格式不合要求，使用默认值 0


        let arr1 = [2, 5, 7, 3, 5];

        // 1 ("x"被忽略)
        console.log(arr1.indexOf(5, "x"));

        // 4 (从3号位开始向右搜索)
        console.log(arr1.indexOf(5, "3"));

        // -1 (未找到)
        console.log(arr1.indexOf(4));

        // -1 (未找到，因为5 !== "5")
        console.log(arr1.indexOf("5"));

`array.lastIndexOf( searchItem, fromIndex )` : 从右向左查找，元素在数组中的位置，如果没有搜索到则返回 -1。原始值不变。

searchItem : 必须。查找的元素。

fromIndex : 可选，表示从这个位置开始向左搜索，若缺省或格式不合要求，使用默认值 array.length - 1



        let arr1 = [2, 5, 7, 3, 5];

        // -1 ("x"被忽略)
        console.log(arr1.lastIndexOf(5, "x"));

        // 1 (从倒数3号位开始向左搜索)
        console.log(arr1.lastIndexOf(5, "3"));

        // -1 (未找到)
        console.log(arr1.lastIndexOf(4));

        // -1 (未找到，因为5 !== "5")
        console.log(arr1.lastIndexOf("5"));

`array.includes( searchItem, fromIndex )` : 判断一个数组是否包含一个指定的值。布尔值。如果找到指定值返回 true，否则返回 false。原始值不变。

searchItem : 必须。查找的元素。

fromIndex : 可选，表示从这个位置开始向右搜索，如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

如果 fromIndex 大于等于数组长度，则返回 false 。该数组不会被搜索



        let arr1 = [2, 5, 7, 3, 5];
        let arr2 = [2, 5, 7, 3, NaN];

        // true
        console.log(arr1.includes( 7));

        // false
        console.log(arr1.includes( 4 ));

        // true
        console.log(arr1.includes( 3, 3 ));

        // false
        console.log(arr1.includes( 3, -1));

        // true
        console.log(arr2.includes( NaN ));

`array.copyWithin( target, start, end )` : 从数组的指定位置拷贝元素到数组的另一个指定位置中。返回拷贝后的数组，原始值改变。

target ：必需。复制到指定目标索引位置。

start ：可选。元素复制的起始位置。从该位置开始读取数据，默认为 0。如果为负值，表示倒数。

end ：可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

这三个参数都应该是数值，如果不是，会自动转为数值。

会连空位一起拷贝。



        let arr1 = [1, 2, 3, 4, , 5];
        //  [4, 空白, 5, 4, 空白, 5]  [4, 空白, 5, 4, 空白, 5]
        console.log(arr1.copyWithin(0, 3), arr1);

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

        let arr3 = [1, 2, 3, 4, 5];
        // [4, 2, 3, 4, 5] [4, 2, 3, 4, 5]
        console.log(arr3.copyWithin(0, -2, -1), arr3);

`array.from( object, mapFunction, thisValue )` : 将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。返回数组对象。原始值不变。

object : 必需，要转换为数组的对象。

mapFunction : 可选，数组中每个元素要调用的函数。

thisValue : 可选，映射函数(mapFunction)中的 this 对象。




        let setObj = new Set(['a', 'b', 'c']);
        let arrObj = Array.from(setObj);

        // Set(3) {'a', 'b', 'c'} (3) ['a', 'b', 'c']
        console.log( setObj, arrObj);

        let arr1 = [1, 2, 3];
        let arr2 = Array.from(arr1, x => x * 10);

        //  [1, 2, 3]  [10, 20, 30]
        console.log(arr1, arr2);

`array.fill( target, start, end)` : 使用一个固定值来填充数组。并返回一个新数组。原始值改变。

target : 将要填充的内容

start : 可选，填充的开始位置索引

end : 可选，填充的结尾位置索引

        ['a', 'b', 'c'].fill(7)
        // [7, 7, 7]

        new Array(3).fill(7)
        // [7, 7, 7]

        let arr1 = [1, 2, 3, 4, 5];

        //   [1, 2, 'aa', 'aa', 5]  [1, 2, 'aa', 'aa', 5]
        console.log(arr1.fill('aa', 2, 4), arr1);

`array.find( fn )` : 返回符合传入测试（函数）条件的数组元素。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。原始值不变。

不会对空数组进行检测。

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。

fn( item, index, arr) : fn 必须。函数，数组中的每个元素都会执行这个函数, item 必须。当前元素的值, index 可选。当前元素的索引值, arr 可选。当前元素属于的数组对象


        let arr1 = [1, 2, 3, 4, 5];

        //  1  [1, 2, 3, 4, 5] 返回第一个小于3的元素
        console.log(arr1.find( (n) => n < 3 ), arr1);

`array.findIndex()` : 返回符合传入测试（函数）条件的数组元素索引。当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1，原始值不变。

不会对空数组进行检测。

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1。

fn( item, index, arr) : fn 必须。函数，数组中的每个元素都会执行这个函数, item 必须。当前元素的值, index 可选。当前元素的索引值, arr 可选。当前元素属于的数组对象


        let arr1 = [1, 2, 3, 4, 5];

        //  3  [1, 2, 3, 4, 5] 返回第一个大于3的元素索引
        console.log(arr1.findIndex( (n) => n > 3 ), arr1);

`Array.isArray()` : 判断对象是否为数组。如果对象是数组返回 true，否则返回 false。布尔值。原始值不变。


        let arr1 = [1, 2, 3, 4, 5];

        //  true  [1, 2, 3, 4, 5]
        console.log(Array.isArray( arr1 ), arr1);

`array.keys()` : 包含原始数组的键名(key)，键名的遍历器对象，可以用 for...of 循环进行遍历。

`array.values()` : 包含原始数组的键值(value)，键值的遍历器对象，可以用 for...of 循环进行遍历。

`array.entries()` : 包含原始数组的键名(key)、键值(value)，键值对的遍历器对象，可以用 for...of 循环进行遍历。


        let arr = ['a', 'b', 'c'];
        console.log( arr.entries()); //Array Iterator {}
        console.log( arr.keys()); //Array Iterator {}
        console.log( arr.values()); //Array Iterator {}

        for (let index of ['a', 'b', 'c'].keys()) {
            console.log(index);
        }
        // 0
        // 1
        // 2

        for (let elem of ['a', 'b', 'c'].values()) {
            console.log(elem);
        }
        // 'a'
        // 'b'
        // 'c'

        for (let [index, elem] of ['a', 'b', 'c'].entries()) {
            console.log(index, elem);
        }
        // 0 "a"
        // 1 "b"
        // 2 "c"

`Array.of()` : 总是将一组值，转换为数组。


        console.log(Array.of()) // []
        console.log(Array.of(undefined)) // [undefined]
        console.log(Array.of(1)) // [1]
        console.log(Array.of(1, 2,'1',{name:'tom'})) // [1, 2, '1', {name: 'tom'}]);

`array.flat(num)` : 用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

num: 拉平数组嵌套的层数，默认值是 1，Infinity 代表无限拉平
原数组有空位，flat()方法会跳过空位

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

`array.flatMap(fn, thisArg)` : 总对原数组的每个成员执行一个函数，然后对返回值组成的数组执行 flat()方法。该方法返回一个新数组，不改变原数组。

只能展开一层数组。
fn(currentValue, index, array): 一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。
thisArg:第二个参数，用来绑定 fn 遍历函数里面的 this。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]


// flatMap()只能展开一层数组。
// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

`array.at()` : 接受一个整数作为参数，返回对应位置的成员，支持负索引。这个方法不仅可用于数组，也可用于字符串和类型数组（TypedArray）。

参数位置超出了数组范围，at()返回 undefined。

        let arr = [5, 12, 8, 130, 44];
        console.log(arr.at(1)); // 12
        console.log(arr.at(-1)); // 44
        console.log(arr.at(10)); // undefined
        console.log(arr.at(-10)); // undefined

`array.reduce(function(previousValue, currentValue, currentIndex, arr), initialValue)` : 对数组里每个元素执行一次回调函数。将数组元素计算为一个值（从左到右）。

function ：必需。用于执行每个数组元素的函数。

previousValue ：必需。初始值(initialValue), 或者上一次调用回调(function)返回的值。

currentValue ：必需。数组中当前被处理的元素

currentIndex ：可选。当前元素在数组中的索引

arr ：可选。当前元素所属的数组对象。

initialValue ：可选。传递给函数的初始值

reduce() 对于空数组是不会执行回调函数的。

没有设置函数的初始迭代值

        let arr = [1, 2, 3, 4];
        let sum = arr.reduce(function(prev, cur, index, arr) {
            console.log('prev--', prev, 'cur--', cur, 'index--', index);
            return prev + cur;
        })
        console.log(arr, sum);

        // 打印结果：
        // prev-- 1 cur-- 2 index-- 1
        // prev-- 3 cur-- 3 index-- 2
        // prev-- 6 cur-- 4 index-- 3
        // (4) [1, 2, 3, 4] 10

这里可以看出，上面的例子没有设置 initialValue 的时候，会把回调函数 index 是从 1 开始的，第一次的 previousValue 的值是数组的第一个值。数组长度是 4，但是 reduce 函数循环 3 次。

设置初始迭代值

        let arr = [1, 2, 3, 4];
        let sum = arr.reduce(function (prev, cur, index, arr) {
                console.log('prev--', prev, 'cur--', cur, 'index--', index);
                return prev + cur;
        },5);
        console.log(arr, sum);

        // 打印结果：
        // prev-- 5 cur-- 1 index-- 0
        // prev-- 6 cur-- 2 index-- 1
        // prev-- 8 cur-- 3 index-- 2
        // prev-- 11 cur-- 4 index-- 3
        // (4) [1, 2, 3, 4] 15

这里我们添加了一个初始的迭代值，也就是让 prev 从 5 开始计算，可以看到，这里迭代了 4 次，结果也加上了初始值。

计算数组中每个元素出现的次数


        let arr = ['name','age','long','short','long','name','name']

        let arrResult = arr.reduce((pre,cur) =>{
            console.log(pre,cur)
            if(cur in pre){
                pre[cur]++
            }else{
                pre[cur] = 1
            }
            return pre
        },{})

        console.log(arrResult)//结果：{name: 3, age: 1, long: 2, short: 1}

        // 打印结果：
        // {} 'name'
        // {name: 1} 'age'
        // {name: 1, age: 1} 'long'
        // {name: 1, age: 1, long: 1} 'short'
        // {name: 1, age: 1, long: 1, short: 1} 'long'
        // {name: 1, age: 1, long: 2, short: 1} 'name'
        // {name: 2, age: 1, long: 2, short: 1} 'name'
        // {name: 3, age: 1, long: 2, short: 1}

去除数组中重复的元素


        let arr = ['name','age','long','short','long','name','name']

        let arrResult = arr.reduce((pre,cur) =>{
        if(!pre.includes(cur)){
                pre.push(cur)
            }
            return pre;
        },[])

        console.log(arrResult)//结果：["name", "age", "long", "short"]

对对象的属性求和

let person = [
    {
        name: 'xiaoming',
        age: 18
    },{
        name: 'xiaohong',
        age: 17
    },{
        name: 'xiaogang',
        age: 19
    }
]

let result = person.reduce((a,b) =>{
    a = a + b.age;
    return a;
},0)

console.log(result)//结果：54

`array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)` : 对数组里每个元素执行一次回调函数。将数组元素计算为一个值（从右到左），用法同 reduce，顺序不同而已。

function ：必需。用于执行每个数组元素的函数。

total ：必需。初始值, 或者计算结束后的返回值。

currentValue ：必需。当前元素

currentIndex ：可选。当前元素的索引

arr ：可选。当前元素所属的数组对象。

initialValue ：可选。传递给函数的初始值

reduceRight() 对于空数组是不会执行回调函数的。

posted @ 2021-12-29 17:31 较瘦阅读(484) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

较瘦

尽人事，听天命。

JavaScript中Array数组方法总结

JavaScript 中 Array 数组方法总结

跳出循环/结束遍历方法

方法解析

`array.join()` : 把数组的所有元素放入一个字符串。原始值不变。

`array.concat()` : 连接两个或更多的数组，并返回结果，返回新数组，原始值不变。

`array.reverse()` : 反转数组的元素顺序。原始值改变。

`array.sort( [排序规则] )` : 对数组的元素进行排序。原始值改变。

`array.pop()` : 删除数组的最后一个元素并返回删除的元素。原始值改变。

`array.push()` : 向数组的末尾添加一个或更多元素，并返回新的长度。原始值改变。

`array.shift()` : 删除并返回数组的第一个元素。原始值改变。

`array.unshift()` : 向数组的开头添加一个或更多元素，并返回新的长度。原始值改变。

`array.slice( start, end )` : 选取数组的一部分，并返回一个新数组。原始值不变。

`array.splice( index, howmany, item1, ....., itemX )` : 从数组中添加或删除元素。原始值改变。

`array.forEach( fn )` : 数组每个元素都执行一次回调函数。原始值不变。

`array.every( fn )` : 检测数值元素的每个元素是否都符合条件。布尔值。如果所有元素都通过检测返回 true，否则返回 false。原始值不变。

`array.some()` : 检测数组元素中是否有元素符合指定条件。布尔值。如果数组中有元素满足条件返回 true，否则返回 false。原始值不变。

`array.filter( fn )` : 检测数值元素，并返回符合条件所有元素的数组。返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。原始值不变。

`array.map()` : 通过指定函数处理数组的每个元素，并返回处理后的数组。返回新数组，原始值不变。

`array.indexOf( searchItem, fromIndex )` : 搜索数组中的元素，并返回它所在的位置。从左向右查找，元素在数组中的位置，如果没有搜索到则返回 -1。原始值不变。

`array.lastIndexOf( searchItem, fromIndex )` : 从右向左查找，元素在数组中的位置，如果没有搜索到则返回 -1。原始值不变。

`array.includes( searchItem, fromIndex )` : 判断一个数组是否包含一个指定的值。布尔值。如果找到指定值返回 true，否则返回 false。原始值不变。

`array.copyWithin( target, start, end )` : 从数组的指定位置拷贝元素到数组的另一个指定位置中。返回拷贝后的数组，原始值改变。

`array.from( object, mapFunction, thisValue )` : 将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。返回数组对象。原始值不变。

`array.fill( target, start, end)` : 使用一个固定值来填充数组。并返回一个新数组。原始值改变。

`array.find( fn )` : 返回符合传入测试（函数）条件的数组元素。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。原始值不变。

`Array.isArray()` : 判断对象是否为数组。如果对象是数组返回 true，否则返回 false。布尔值。原始值不变。

`array.keys()` : 包含原始数组的键名(key)，键名的遍历器对象，可以用 for...of 循环进行遍历。

`array.values()` : 包含原始数组的键值(value)，键值的遍历器对象，可以用 for...of 循环进行遍历。

`array.entries()` : 包含原始数组的键名(key)、键值(value)，键值对的遍历器对象，可以用 for...of 循环进行遍历。

`Array.of()` : 总是将一组值，转换为数组。

`array.flat(num)` : 用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

`array.flatMap(fn, thisArg)` : 总对原数组的每个成员执行一个函数，然后对返回值组成的数组执行 flat()方法。该方法返回一个新数组，不改变原数组。

`array.at()` : 接受一个整数作为参数，返回对应位置的成员，支持负索引。这个方法不仅可用于数组，也可用于字符串和类型数组（TypedArray）。

`array.reduce(function(previousValue, currentValue, currentIndex, arr), initialValue)` : 对数组里每个元素执行一次回调函数。将数组元素计算为一个值（从左到右）。

`array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)` : 对数组里每个元素执行一次回调函数。将数组元素计算为一个值（从右到左），用法同 reduce，顺序不同而已。

公告

较瘦

尽人事，听天命。

JavaScript中Array数组方法总结

JavaScript 中 Array 数组方法总结

跳出循环/结束遍历方法

方法解析

array.join() : 把数组的所有元素放入一个字符串。原始值不变。

array.concat() : 连接两个或更多的数组，并返回结果，返回新数组，原始值不变。

array.reverse() : 反转数组的元素顺序。原始值改变。

array.sort( [排序规则] ) : 对数组的元素进行排序。原始值改变。

array.pop() : 删除数组的最后一个元素并返回删除的元素。原始值改变。

array.push() : 向数组的末尾添加一个或更多元素，并返回新的长度。原始值改变。

array.shift() : 删除并返回数组的第一个元素。原始值改变。

array.unshift() : 向数组的开头添加一个或更多元素，并返回新的长度。原始值改变。

array.slice( start, end ) : 选取数组的一部分，并返回一个新数组。原始值不变。

array.splice( index, howmany, item1, ....., itemX ) : 从数组中添加或删除元素。原始值改变。

array.forEach( fn ) : 数组每个元素都执行一次回调函数。原始值不变。

array.every( fn ) : 检测数值元素的每个元素是否都符合条件。布尔值。如果所有元素都通过检测返回 true，否则返回 false。原始值不变。

array.some() : 检测数组元素中是否有元素符合指定条件。布尔值。如果数组中有元素满足条件返回 true，否则返回 false。原始值不变。

array.filter( fn ) : 检测数值元素，并返回符合条件所有元素的数组。返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。原始值不变。

array.map() : 通过指定函数处理数组的每个元素，并返回处理后的数组。返回新数组，原始值不变。

array.indexOf( searchItem, fromIndex ) : 搜索数组中的元素，并返回它所在的位置。从左向右查找，元素在数组中的位置，如果没有搜索到则返回 -1。原始值不变。

array.lastIndexOf( searchItem, fromIndex ) : 从右向左查找，元素在数组中的位置，如果没有搜索到则返回 -1。原始值不变。

array.includes( searchItem, fromIndex ) : 判断一个数组是否包含一个指定的值。布尔值。如果找到指定值返回 true，否则返回 false。原始值不变。

array.copyWithin( target, start, end ) : 从数组的指定位置拷贝元素到数组的另一个指定位置中。返回拷贝后的数组，原始值改变。

array.from( object, mapFunction, thisValue ) : 将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。返回数组对象。原始值不变。

array.fill( target, start, end) : 使用一个固定值来填充数组。并返回一个新数组。原始值改变。

array.find( fn ) : 返回符合传入测试（函数）条件的数组元素。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。原始值不变。

Array.isArray() : 判断对象是否为数组。如果对象是数组返回 true，否则返回 false。布尔值。原始值不变。

array.keys() : 包含原始数组的键名(key)， 键名的遍历器对象，可以用 for...of 循环进行遍历。

array.values() : 包含原始数组的键值(value)， 键值的遍历器对象，可以用 for...of 循环进行遍历。

array.entries() : 包含原始数组的键名(key)、键值(value)，键值对的遍历器对象，可以用 for...of 循环进行遍历。

Array.of() : 总是将一组值，转换为数组。

array.flat(num) : 用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

array.flatMap(fn, thisArg) : 总对原数组的每个成员执行一个函数，然后对返回值组成的数组执行 flat()方法。该方法返回一个新数组，不改变原数组。

array.at() : 接受一个整数作为参数，返回对应位置的成员，支持负索引。这个方法不仅可用于数组，也可用于字符串和类型数组（TypedArray）。

array.reduce(function(previousValue, currentValue, currentIndex, arr), initialValue) : 对数组里每个元素执行一次回调函数。将数组元素计算为一个值（从左到右）。

array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue) : 对数组里每个元素执行一次回调函数。将数组元素计算为一个值（从右到左），用法同 reduce，顺序不同而已。

公告

`array.join()` : 把数组的所有元素放入一个字符串。原始值不变。

`array.concat()` : 连接两个或更多的数组，并返回结果，返回新数组，原始值不变。

`array.reverse()` : 反转数组的元素顺序。原始值改变。

`array.sort( [排序规则] )` : 对数组的元素进行排序。原始值改变。

`array.pop()` : 删除数组的最后一个元素并返回删除的元素。原始值改变。

`array.push()` : 向数组的末尾添加一个或更多元素，并返回新的长度。原始值改变。

`array.shift()` : 删除并返回数组的第一个元素。原始值改变。

`array.unshift()` : 向数组的开头添加一个或更多元素，并返回新的长度。原始值改变。

`array.slice( start, end )` : 选取数组的一部分，并返回一个新数组。原始值不变。

`array.splice( index, howmany, item1, ....., itemX )` : 从数组中添加或删除元素。原始值改变。

`array.forEach( fn )` : 数组每个元素都执行一次回调函数。原始值不变。

`array.every( fn )` : 检测数值元素的每个元素是否都符合条件。布尔值。如果所有元素都通过检测返回 true，否则返回 false。原始值不变。

`array.some()` : 检测数组元素中是否有元素符合指定条件。布尔值。如果数组中有元素满足条件返回 true，否则返回 false。原始值不变。

`array.filter( fn )` : 检测数值元素，并返回符合条件所有元素的数组。返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。原始值不变。

`array.map()` : 通过指定函数处理数组的每个元素，并返回处理后的数组。返回新数组，原始值不变。

`array.indexOf( searchItem, fromIndex )` : 搜索数组中的元素，并返回它所在的位置。从左向右查找，元素在数组中的位置，如果没有搜索到则返回 -1。原始值不变。

`array.lastIndexOf( searchItem, fromIndex )` : 从右向左查找，元素在数组中的位置，如果没有搜索到则返回 -1。原始值不变。

`array.includes( searchItem, fromIndex )` : 判断一个数组是否包含一个指定的值。布尔值。如果找到指定值返回 true，否则返回 false。原始值不变。

`array.copyWithin( target, start, end )` : 从数组的指定位置拷贝元素到数组的另一个指定位置中。返回拷贝后的数组，原始值改变。

`array.from( object, mapFunction, thisValue )` : 将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。返回数组对象。原始值不变。

`array.fill( target, start, end)` : 使用一个固定值来填充数组。并返回一个新数组。原始值改变。

`array.find( fn )` : 返回符合传入测试（函数）条件的数组元素。当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。原始值不变。

`Array.isArray()` : 判断对象是否为数组。如果对象是数组返回 true，否则返回 false。布尔值。原始值不变。

`array.keys()` : 包含原始数组的键名(key)，键名的遍历器对象，可以用 for...of 循环进行遍历。

`array.values()` : 包含原始数组的键值(value)，键值的遍历器对象，可以用 for...of 循环进行遍历。

`array.entries()` : 包含原始数组的键名(key)、键值(value)，键值对的遍历器对象，可以用 for...of 循环进行遍历。

`Array.of()` : 总是将一组值，转换为数组。

`array.flat(num)` : 用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

`array.flatMap(fn, thisArg)` : 总对原数组的每个成员执行一个函数，然后对返回值组成的数组执行 flat()方法。该方法返回一个新数组，不改变原数组。

`array.at()` : 接受一个整数作为参数，返回对应位置的成员，支持负索引。这个方法不仅可用于数组，也可用于字符串和类型数组（TypedArray）。

`array.reduce(function(previousValue, currentValue, currentIndex, arr), initialValue)` : 对数组里每个元素执行一次回调函数。将数组元素计算为一个值（从左到右）。

`array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)` : 对数组里每个元素执行一次回调函数。将数组元素计算为一个值（从右到左），用法同 reduce，顺序不同而已。