数组的方法总结

数组方法

不要在foreach/map 里面使用await 异步操作，使用for循环替代

Array.from && newSet()

Array.from的设计目的是快速便捷把一个类似数组的可迭代对象创建成一个新的数组实例。

通俗的讲，只要一个对象有length，Array.from就能把它变成一个数组，返回新的数组，而不改变原对象。

let likeArr = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(likeArr); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(likeArr); // ['a', 'b', 'c']

// String
Array.from('abc'); // ["a", "b", "c"]
// Set
Array.from(new Set(['abc', 'def'])); // ["abc", "def"]
// Map
Array.from(new Map([[1, 'abc'], [2, 'def']])); // [[1, 'abc'], [2, 'def']]

Array.from 接收的第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，处理后的值放入返回的数组：

let arrayLike = [1,3,5];
Array.from(arrayLike, x => x+1);        // [2, 4, 6]
// 等同于
Array.from(arrayLike).map(x => x+1);    // [2, 4, 6]

filter(callback)

返回一个新数组，其结果是改数组中的每个元素符合条件的结果。主要用于筛选，返回筛选后的一个新数组

filter()接收的回调函数，其实可以有多个参数。通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身：

var Arr = ['A', 'B', 'C'];
var r = Arr.filter(function (currentValue, index, arr) {
     console.log(currentValue); // 依次打印'A', 'B', 'C'
     console.log(index); // 依次打印0, 1, 2
     console.log(arr); // arr就是变量Arr
     return true;
 });

利用filter，可以巧妙地去除Array的重复元素：

var r,arr = ['lisa', 'jisoo', 'jennie', 'rose', 'lisa', 'lisa'];
    r = arr.filter(function (element, index, self) {
        return self.indexOf(element) === index;
    });
    console.log(r.toString());

//输出结果：lisa,jisoo,jennie,rose

这里是箭头函数的简略写法
const index = person.filter(item => item.carId === v)
等于
const index = preson.filter( function (item){
	if(item.carId === v)
	return item
})

forEach(callback)

不改变原数组 不返回一个新数组

forEach方法跳出循环------通过抛出异常的方式跳出循环 通过return跳过当次循环

var arr = [1,3,5,7,9];
var id = 5;
try {
     arr.forEach(function (curItem, i) {
         if(curItem === 1) return;
         console.log(curItem)
         if (curItem === id) {
             throw Error();         //满足条件，跳出循环
         }
     })
 } catch (e) {
 }

//输出 3 5 


map同理
var arr = [1,3,5,7,9];
var id = 5;
try {
     arr.map(function (curItem, i) {
         if(curItem === 1) return;
         console.log(curItem)
         if (curItem === id) {
             throw Error();         //满足条件，跳出循环
         }
     })
 } catch (e) {
 }

//输出 3 5 

Array.map(callback)

注意：map不会改变原数组，map不会检查空数组 ，map会返回一个新的数组

map()：通过指定函数处理数组的每个元素，并返回处理后的数组。

var numbers = [4, 9, 16, 25];
var newNumbers = numbers.map(Math.sqrt)
console.log(newNumbers) //[2, 3, 4, 5]

map() 方法会将数组中元素依次传入方法中，并将方法的返回结果组成新数组返回。

Array.some(callback)

some()：用于检测数组中的元素是否满足指定条件（函数提供）

注意：some不会改变原数组，some不会检查空数组 ，some会返回一个布尔值

var ages = [3, 10, 18, 20];
var flag = ages.some((item)=> item>18 )
//输出为：true

some方法会依次执行数组的每个元素；

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

• 如果没有满足条件的元素，则返回false

Array.every(callback)

*every：用于检测数组所有元素是否都符合指定条件（通过函数提供）*

注意：every不会改变原数组，every不会检查空数组 ，every会返回一个布尔值

var ages = [3, 10, 18, 20];
var flag = ages.some((item)=> item>18 )
//输出为：false

every和some正好相反：

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

find(callback)

find 返回数组中第一个满足条件的元素（如果有的话）， 如果没有，则返回undefined。

findIndex(callback)

findIndex 返回数组中第一个满足条件的元素的下标， 如果没有，则返回-1。

Array.reduce(callback)

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数	描述
function(total,currentValue, index,arr)	total必需。初始值, 或者计算结束后的返回值。 currentValue必需。当前元素 currentIndex可选。当前元素的索引 arr可选。当前元素所属的数组对象。
initialValue	可选。传递给函数的初始值

arr1 = [1,2,3]
arr1.reduce((t,v)=> t += v)
//6

indexOf（）

indexof的返回值是找到第一个符合要求的元素的下标

indexof与findIndex的区别就是传参不一样 一个是callback一个是字符串、数字之类的。

indexOf 方法有两个缺点：

一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于 -1，表达起来不够直观。

二是，它内部使用严格相等运算符（===）进行判断，这会导致对 NaN 的误判。

[NaN].indexOf(NaN)
// -1

[1, 2].includes(1) ==> true

Array.includes(item, finIndex)

方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法类似。

[NaN].includes(NaN)
// true

includes 第二个参数表示搜索的起始位置：

['a','b','c','d'].includes('c',2)  //true
['a','b','c','d'].includes('c',3)  //false

如果第二个参数为负数，则表示从倒数第几位向后搜索：

['a','b','c','d'].includes('c',-1)  //false     (-1指的是倒数第一位'd')
['a','b','c','d'].includes('c',-2)    //true     (-2指的是倒数第二位'c')

字符串的includes() 方法用于判断字符串是否包含指定的子字符串。

如果找到匹配的字符串则返回 true，否则返回 false。

注意： includes() 方法区分大小写。

var str = "Hello world, welcome to the Runoob。";
var n = str.includes("world"); ⇒ true

var str = "Hello world, welcome to the Runoob.";
str.includes("world", 12); => false

var str = "Hello world, welcome to the Runoob.";
str.includes("world", 6); => true

lastIndexOf

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，如果指定第二个参数 start，则在一个字符串中的指定位置从后向前搜索。

第二个参数就是指定在该位置开始往前找

match

stringObj.match(rgExp)

其中stringObj是必选项。对其进行查找的 String 对象或字符串文字。
rgExp是必选项。为包含正则表达式模式和可用标志的正则表达式对象。也可以是包含正则表达式模式和可用标志的变量名或字符串文字。

如果javascript中match函数方法没有找到匹配，返回 null。如果找到匹配返回一个数组并且更新全局 RegExp 对象的属性以反映匹配结果。JavaScript中match函数方法返回的数组有三个属性：input、index和lastIndex。Input 属性包含整个的被查找字符串。Index 属性包含了在整个被查找字符串中匹配的子字符串的位置。LastIndex 属性包含了最后一次匹配中最后一个字符的下一个位置。如果没有设置全局标志 (g)，数组的0元素包含整个匹配，而第 1 到 n 元素包含了匹配中曾出现过的任一个子匹配。这相当于没有设置全局标志的 exec 方法。如果设置了全局标志，元素0到n中包含所有匹配。

'13246548798'.match(1)  

'13246548798'.match(new RegExp(/x|y/)) ⇒ null


13246548798'.match(new RegExp(/8/))
['8', index: 7, input: '13246548798', groups: undefined]

fill()

使用给定值，填充一个数组。

[1,2,3,4,5].fill('a');
// ["a", "a", "a", "a", "a"]

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

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

[1,2,3,4,5].fill('a',2,4);
// [1, 2, "a", "a", 5]

注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。

copyWithin（）

可以在当前数组内部，将指定位置的数组项复制到其他位置，会覆盖原数组项，然后返回当前数组。使用该方法会修改当前数组。

它接受三个参数：

（1）target（必需）：从该位置开始替换数据。如果为负值，表示倒数。

（2）start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。

（3）end（可选）：到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。

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

Array.prototype.copyWithin(target, start = 0, end = this.length)

Array.of（）

当参数个数大于1时，Array() 才会返回由参数组成的新数组。当参数个数只有一个时，实际上是指定数组的长度。

Array() // []

Array(3) // [, , , length = 3] 
//length: 3
//[[Prototype]]: Array(0)

Array(3, 4, 5) // [3, 4, 5]

然而 Array.of 弥补了数组构造函数 Array() 的不足

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(3) // [3]
Array.of(3, 4, 5) // [3, 4, 5]

还有的方法

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

	//修改原数组 splice pop unshift push reverse sort
    //不修改原数组(返回一个新的数组) slice concat join 

    // var list = [1, 2, 3];

    // list.pop();
    //删除数组的最后一个元素  [1,2];

    // list.unshift(0,1);
    // 头部添加  [0,1,1,2,3];

    // list.push(4,5); 
    //尾部添加 [1,2,3,4,5]

    // var arr = list.concat(4,[{a:1},6]);//把两个数组连接起来 

    // let arr = list.join("-");   

    // let arr = list.reverse(); //颠倒顺序

    //slice是返回一个子数组 
    // let arr = list.slice(2);//如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
    // let arr = list.slice(1,2); //slice(start,end)
    //list.slice(1,-2);//设置了两个参数，终止下标为负数，当出现负数时，将负数加上数组长度的值来替换该位置的数。

    //splice是在原数组的基础上进行修改 数组是引用型 所以需要注意是只要引用了该数组就会随着splice改变而改变全部引用了该数组的数组。
    //删除  2个参数
    // var arr = list.splice(0,1); ==>[2,3]
    // 可以删除任意数量的项，只需指定2个参数；splice(需要删除的数组的下标，删除的数量)


    //插入  需要3个参数 
    // var list = [1,2,4,6,3]; 
    // list.splice(2,0,4,5); //==>[1,2,4,5,4,6,3]  
    //可以向指定位置插入任意数量的项，需要3个参数，  起始位置   、0（要删除的项数）   、要插入的任意数量的项。
    //例如                         splice(         2     ,    0                ,   4,6                );   
    //可以这么理解 需要插到2的位置 那么原本2的位置就需要变到3的位置 

    //替换，
    //可以向指定位置插入任意数量的项，同时删除任意数量的项，需要3个参数，起始位置、要删除的项数、要插入的任意数量的项。
    //例如splice(2,1,4,6);  会从位置 2 开始插入4和6。
    // list.splice(2,1,4,6); //==>[1, 2, 4, 6, 6, 3]

    
    //sort是排顺序的 需要一个函数
    //按照第一个数字大小进行排序;
    // function compare(a, b) {
        // return a - b;//正序；
        // return b - a;//倒序；
    // } 
    // list.sort(compare);
    // console.log(list)