合并数组

*1.concat

concat()合并两个或多个数组，返回值是一个新数组，不会改变原数组，参数是一个数组

语法：const newArr = oldArr.concat( [item1，...，itemX] )

参数：concat()的参数可选，且是一个数组 [item1，...，itemX]

示例：

//合并两个数组为一个新数组
const a1 = [1,2,3];
const a2 = ['a','b','c'];
const a3 = a1.concat(a2);   //[ 1, 2, 3, 'a', 'b', 'c' ]
console.log(a3);

//合并三个数组为一个新数组
const a11 = [1,2,3];
const a22 = ['a','b','c'];
const a33 = [4,5,6];
const a44 = a11.concat(a22,a33);   //[ 1, 2, 3, 'a', 'b', 'c', 4, 5, 6 ]
console.log(a44);

const a1 = [ ];
const a2 = ['a','b','c'];
const a3 = a1.concat(a2);   //[ 'a', 'b', 'c' ]
console.log(a3);

*2.join

join( )将一个数组的所有元素通过合并符合合并成字符串，并返回该字符串，返回值是string，不改变原数组。可指定合并符号，默认下是逗号（，）分隔符。

语法：arr.join( [separator] )

参数：

separator——可选，指定合并符号来分隔数组的每个元素，该合并符号是一个字符串。如果没有指定任何合并符号，数组元素将用逗号（,）分隔。如果separator是空字符串 (' ')，则所有元素之间都没有任何字符。

示例： （1）所有的数组元素被转换成字符串，再用一个分隔符将这些字符串连接起来

const f1 = ['1','3','4','1','1','9','9','0','4','2','8'];
const f2 = f1.join( );   //1,3,4,1,1,9,9,0,4,2,8
const f3 = f1.join('');  //13411990428
console.log(f2,f3);

（2）当数组只有一个数组元素且指定分隔符时

const f4 = ['1'];           //[ '1' ]
const f5 = f4.join('-');  //1
console.log(f4,f5);

（3）当数组中其中一个元素为 undefined 或 null，它会被转换为空字符串

const f6 = ['1','2','3','undefined','5','6','null','8','9'];     //1+2+3+undefined+5+6+null+8+9
const f7 = [1,2,3,undefined,5,6,null,8,9];                       //1+2+3++5+6++8+9
const f8 = f6.join("+");  
const f9 = f7.join("+");  
console.log(f8,f9);

对数组里每个元素的循环操作

*3.forEach

forEach（） 用来替代for循环，对数组里面的每个元素执行相同的操作，会改变原数组，没创建新数组。

语法：arr.forEach(callbackFun(item, index, arr) { })

或arr.forEach((item, index, arr) => { });

参数：

callbackFun()——数组中每个元素执行的函数，该函数有三个参数。

item——当前正在处理的数组元素值。

index——当前正在处理的数组元素的下标。

arr——表示forEach（）当前正在处理的数组，即数组对象本身。

示例：

const c1 = [1, 2, 3, 4];

// for (let i = 0; i < c1.length; i++) {
//     c1[i] *= 2
// }

c1.forEach((item, index, arr) => arr[index] = item * 2);
console.log(c1);  //[2, 4, 6, 8]

*4.map

map() 对数组里面的所有元素进行相同的操作，并将结果置于新数组里，不改变原数组

语法：arr.map(callbackFun(item, index, arr) { })

或arr.map((item, index, arr) => { });

参数：

callbackFun()——数组中每个元素执行的函数，该函数有三个参数。

Item——必需。原数组的每个数组元素

index——可选。原数组的每个数组下标

arr——原数组

示例：

const g1 = [2, 3, 4, 6, 7, 9];
const g2 = g1.map(item => item * 2)   //[4,6,8,12,14,18]
console.log(g2);

const g2 = g1.map(item => {})        //[ undefined, undefined, undefined, undefined, undefined, undefined ]
console.log(g2);

const g1 = [];                      
const g2 = g1.map(item => {})       //[]
console.log(g2);

*5.filter

filter() 过滤数组，并将满足条件的数组元素放到新创建的一个数组，不改变原数组，参数是一个回调函数，回调函数有三个参数，分别是Item、index、arr。

语法：arr.filter(callbackFun(item, index, arr) { })

或arr.filter((item, index, arr) => { });

参数：

callbackFun()——数组中每个元素执行的函数，该函数有三个参数。

Item——原数组的每个数组元素

index——原数组的每个数组下标

arr——被遍历的原数组

示例：

const b1 = [2,5,7,9,11,21,22,33];
const b2 = b1.filter((item,index,arr)=> item % 2 === 0);    //[2，22]
console.log(b2);

const b3 = b1.filter((item,index,arr)=> index % 2 === 0);   //[2,7,11,22]
console.log(b3);

const b4 = b1.filter((item,index,arr)=> console.log(arr));  //[2,5,7,9,11,21,22,33]
console.log(b4);

//filter()可用于数组去重：对数组arr中所有相同的元素进行去重操作
const array = [1, 2, 3, 6, 6, 5, 1, 2, 9, 0];
const newArr = array.filter((item, index, arr) => {
      return array.indexOf(item) === index  //第一个1的位置是零，第二个1的位置是六，零不等于六，所以只返回第一个数组元素1
    })
console.log(newArr);       // [1, 2, 3, 6, 5, 9, 0]

对数组的相关操作

*6.sort

sort() 对数组进行排序，无返回值，会改变原数组

语法：arr.sort(sortFuction)

参数： sortFuction——可选。指定按某种顺序进行排列的函数

示例： （1）对数组进行从小到大即升序排序

const m1 = [2, 5, 6, 78, 8, 1];
m1.sort((a, b) => a - b);   //[ 1, 2, 5, 6, 8, 78 ]
console.log(m1);

（2）对数组进行从大到小即降序排序

const m1 = [2, 5, 6, 78, 8, 1];
m1.sort((a, b) => b - a);      //[ 78, 8, 6, 5, 2, 1 ]
console.log(m1);

7.reverse

reverse( ) 反转数组中元素的位置，会改变原数组

语法：arr.reverse( )

参数： reverse( )无参数

示例：反转数组中的元素

const n1 = [1,2,3,4,5,6]
n1.reverse();
console.log(n1);

对数组开头/末尾新增或删除元素

8.pop

pop() 删除数组中最后一个元素，并返回被删除的元素，会改变原数组，会改变数组的长度

语法：arr.pop( )

参数：pop()没有参数

示例：删除数组的最后一个元素

const h1 = [2,3,4,5,7];
const h2 = h1.pop();
console.log(h2);         //7
console.log(h1);         //[ 2, 3, 4, 5 ]

const h1 = [];
const h2 = h1.pop();
console.log(h2);        //undefined

*9.push

push()在数组末尾新增若干数量的元素，无返回值，会改变原数组，会改变数组的长度。若调用该方法，将返回该数组变更后的新长度。

语法：arr.push( e1,...,eN )

参数：push()有参数，参数是被添加到数组末尾的元素e1，...，eN。

示例：在数组末尾添加若干数量的元素

const i1 = [2,3,4];
const i2=i1.push(1,2);
console.log(i1);    //[ 2, 3, 4, 1, 2 ]
console.log(i2);    //5

10.shift

shift()删除数组中第一个元素，并返回被删除的元素，会改变原数组，会改变数组的长度。

语法：arr.shift()

参数：shift() 没有参数

示例：删除数组的第一个元素

const j1 = [2,3,4,6,7]
const j2 = j1.shift();
console.log(j1,j2);    //j1：[ 3, 4, 6, 7 ]  j2：2

const j1 = []
const j2 = j1.shift();
console.log(j1,j2);    //j1：[ ]  j2：undefined

11.unshift

unshift()在数组首位新增若干数量的元素，并返回该数组变更后的新长度，会改变原数组，会改变数组的长度。

语法：arr.unshift( e1,...,eN )

参数：unshift() 有参数，参数是被添加到数组首位的元素e1，...，eN。

示例：在数组首位添加若干数量的元素

const l1 = [2,3,4,6];
const l2 = l1.unshift(1,3);
console.log(l1,l2);       //l1：[ 1, 3, 2, 3, 4, 6 ]  l2：6

截取/修改数组

*12.splice

splice（）通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组，没创建新数组。

语法：arr.splice(index,deleteCount,item1, item2, ...)

参数：

index——必须。规定删除/添加数组元素的位置（默认从 0 开始计数）。如果规定的位置是负数，则表示从数组末尾的第几位往后开始删除。

deleteCount——可选。要删除的数组元素个数。若设置为0,则不删除元素。

item1, ... itemX ——可选。要向原数组添加的新数组元素。从指定的位置开始

示例：

//一、删除
<!--从数组下标2开始，删除0个元素，添加0个元素，相当于截取数组操作-->
const arr = [1,2,3,7,9,9,2,1]
const arr1 = arr.splice(2)  //[ 1, 2 ]
console.log(arr);   //[ 3, 7, 9, 9, 2, 1 ]

const arr1 = arr.splice(-2)  //[ 2, 1 ]
console.log(arr);   //[ 1, 2, 3, 7, 9, 9 ]

<!--从数组下标2开始，删除1个元素，即删除现有的元素-->
const arr = [1,2,3,7,9,9,2,1]
const arr1 = arr.splice(2,1)  //[ 3 ]
console.log(arr);   //[ 1,2,7,9,9,2,1 ]

const arr1 = arr.splice(-2,1) //[ 2 ]
console.log(arr);   //[ 1,2,3,7,9,9,1 ]

//二、删除并添加
<!--从数组下标2开始，删除1个元素，添加'1'，即替换现有元素：3-->'1'-->
const arr = [1,2,3,7,9,9,2,1]
const arr1 = arr.splice(2,1,'l')  //[ 3 ]
console.log(arr);   //[ 1,2,'l',7,9,9,2,1 ]

const arr1 = arr.splice(-2,1,'l') //[ 2 ]
console.log(arr);   //[ 1,2,3,7,9,9,'1',1 ]

<!--从数组下标2开始，删除1个元素，添加'1'和'm'，即原地添加新的元素-->
const arr = [1,2,3,7,9,9,2,1]
const arr1 = arr.splice(2,1,'l','m')  //[ 3 ]
console.log(arr);   //[ 1,2,'l','m',7,9,9,2,1 ]

const arr1 = arr.splice(-2,1,'l','m') //[ 2 ]
console.log(arr);   //[ 1,2,3,7,9,9,'l','m',1 ]

//三、不删除只添加
<!--从数组下标2开始，删除0个元素，添加'1'-->
const arr = [1,2,3,7,9,9,2,1]
const arr1 = arr.splice(2,0,'l')  //[ ]
console.log(arr);   //[ 1,2,'l',3,7,9,9,2,1 ]

const arr1 = arr.splice(-2,0,'l') //[ ]
console.log(arr);   //[ 1,2,3,7,9,9,'1',2,1 ]

*13.slice

slice( )截取数组并返回一个新数组，不会改变原数组，左闭右开区间

语法：arr.slice( begin，end )

参数：

begin——可选。表示从该索引开始截取原数组元素。如果省略begin，则 slice 从索引 0 开始截取。如果begin为负数，则表示从原数组中的倒数第几个元素开始截取。

end——可选。表示在该索引处结束截取原数组元素。如果省略end，则 slice 会一直截取到原数组末尾。如果end为负数， 则它表示在原数组中的倒数第几个元素结束截取（不包含最后一个元素）。

示例：截取数组的一部分元素

const o1 = [2,3,4,5,1,2,4];   //[2,3,4,5,1,2,3]

//表示截取原数组中的第一个元素到第二个元素
//即从索引为0的位置开始截取到索引为2的地方（不包含索引为2的元素）
const o2 = o1.slice(0,2);   //[ 2, 3 ]

//表示截取原数组中的第二个元素到数组的最后一个元素
const o3 = o1.slice(2);   //[ 4, 5, 1, 2, 3 ]

//当省略end参数，表示截取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）
const o4 = o1.slice(-2);   //[ 2, 4 ]

//表示截取原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，即只有倒数第二个元素）
const o5 = o1.slice(-2,-1);   //[ 2 ]

//当begin超出数组的索引范围，则返回一个空数组
const o6 = o1.slice(7);   //[ ]

console.log(o1,o2,o3,o4,o5,o6);

搜索数组首个元素的值/索引

14.includes

includes()判断指定的元素在一个数组是否存在。返回值是boolean，如果存在则返回 true，否则返回 false。

语法：arr.includes(valueFind,indexFind)

参数：

valueFind——需要判断是否存在的数组元素

indexFind——可选。指定开始搜索数组元素的索引位置。如果索引值indexFind为负数，则从 arr.length + indexFind 的索引开始往后搜索元素。

示例： （1）判断指定的元素在数组中是否存在

d1 = [2,3,4,5,6];
console.log(d1.includes(4))  //true

d1 = [2,3,4,5,6];
console.log(d1.includes(8))  //false

（2）指定开始搜索数组元素的索引位置

d1 = [2,3,4,5,6];
console.log(d1.includes(4,3))  //false

d1 = [2,3,4,5,6];
console.log(d1.includes(4,-2))  //false，5-2=3，从索引为3的地方开始往后搜索是否存在数组元素4
console.log(d1.includes(4,-3))  //true

*15.find

find( )返回数组中满足回调函数测试条件的第一个元素的值，若不满足条件将会返回undefined

语法： arr.find(callbackFun( item, index, arr ) { })

或arr.find(( item, index, arr )=>{ })

参数：

callbackFun()——数组中每个元素执行的函数，该函数有三个参数。

item——当前遍历到的数组元素值。

index——当前遍历到的数组元素的下标。

arr——原数组

示例：

//当满足回调函数的测试条件时，返回满足条件的第一个元素的值
const q1 = [1,2,3,4,5,6]
const q2 = q1.find((item,index,arr) => {
    return item > 3
});
console.log(q2);    //4

//当满足回调函数的测试条件时，返回undefined
const q3 = q1.find((item,index,arr) => {
    return item > 7
});
console.log(q3);    //undefined

*16.indexOf

indexOf( )返回指定元素在数组中的第一个索引位置，返回值是Number，若不存在则返回-1

语法：arr.indexOf( searchElement )

参数：searchElement——要查找的数组元素

示例： （1）找出指定元素在数组中出现的位置

e1=[2,4,5,6,7,5]
console.log(e1.indexOf(5))    //2
console.log(e1.indexOf(8))    //-1

（2）确定多个值在数组中的位置

e2=[2,4,5,6,7,5]
//从索引值为1开始，从前往后查找数组元素5的索引位置
console.log(e2.indexOf(5,1))    //2
//从索引值为7开始，从前往后查找数组元素5的索引位置
console.log(e2.indexOf(5,7))    //-1
//从索引值为-1开始，即从最后一个元素开始，从前往后查找数组元素5的索引位置
console.log(e2.indexOf(5,-1))    //5

*17.findIndex

findIndex( )返回数组中满足回调函数测试条件的第一个元素的索引位置，返回值是Number，若不存在则返回-1。

语法：arr.findIndex(callbackFun( item, index, arr ) { })

或arr.findIndex( ( item, index, arr ) => { })

参数：

callbackFun()——数组中每个元素执行的函数，该函数有三个参数。

item——当前遍历到的数组元素值。

index——当前遍历到的数组元素的下标。

arr——调用findIndex()方法的数组

示例：查找数组中首个元素的索引位置

const s1 = [2,5,3,7,12,18];
const s2 = s1.findIndex((item,index,arr)=>{
    return item > 7
});
console.log(s2);  //4

*18.reduce

reduce()对数组的每个元素执行相同的回调函数。每一次执行将先前元素的计算结果作为参数传入，最后将其结果计算汇总为单个返回值。reduce()可用于计算数组所有元素的总和或数组去重。

语法：reduce(callbackFun,initialValue?)

或reduce((previousValue,currentValue,currentIndex,array) => { } , initialValue?)

或reduce(function(previousValue,currentValue,currentIndex,array) { } , initialValue?)

参数：

• callbackFun——数组中每个元素执行的箭头函数，该箭头函数有四个参数。

箭头函数 (previousValue,currentValue,currentIndex,array)

1).previousValue——必需。若索引下标为0,上一个被迭代的数组元素;否则为之前的迭代结果

2).currentValue——可选。当前被迭代的数组元素

3).currentIndex——可选。当前被迭代的数组元素索引

4).array——被迭代的数组

• initialValue——可选，初始值。若不填initialValue，其初始值是arr[0]，此时从索引为1的元素开始迭代；若填写InitialValue，则从索引为0的数组元素开始迭代

示例： （1）计算数组所有元素的总和

//无initialValue初始值
const p1 = [1,2,3,4,5,6];
const p2 = p1.reduce((previousValue, currentValue, currentIndex, array) => previousValue + currentValue );
console.log(p2);    //21

//有initialValue初始值
const p1 = [1,2,3,4,5,6];
const p2 = p1.reduce((previousValue, currentValue, currentIndex, array) => previousValue + currentValue, 10);
console.log(p2);    //31

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

//分析：
//0.initialValue {}                                        cur:'Alice' initialValue['Alice'] = 1  => return {'Alice':1}
// 1.initialValue {'Alice':1}                              cur:'Bob'  initialValue['Bob'] ? initialValue['Bob'] = 1  => return {'Alice':1,"Bob":1}
// 2.initialValue {'Alice':1,"Bob":1}                      cur:'Tiff'  initialValue['Tiff'] ? initialValue['Bob'] = 1  => return {'Alice':1,"Bob":1,"Tiff":1}
// 3.initialValue {'Alice':1,"Bob":1,"Tiff":1}             cur:'Bruce'  initialValue['Bruce'] ? initialValue['Bruce'] = 1  => return {'Alice':1,"Bob":1,"Tiff":1,"Bruce":1}
// 4.initialValue {'Alice':1,"Bob":1,"Tiff":1,"Bruce":1}   cur:'Alice'  initialValue['Alice'] ? initialValue['Alice']++  => return {'Alice':2,"Bob":1,"Tiff":1,"Bruce":1}

<!--写法1-->
const arr = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
const account = arr.reduce((accumulator, cur) => {
    if (cur in accumulator) {
        accumulator[cur]++
    } else {
        accumulator[cur] = 1
    }
    return accumulator
}, {})
console.log(account)  //{ Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }

<!--写法2-->
const account = arr.reduce((accumulator, cur) => {
    accumulator[cur] ? accumulator[cur]++ : accumulator[cur] = 1
    return accumulator
}, {})
console.log(account)  //{ Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }

<!--写法3-->
const arr = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']
const func1 = (arr)=>{
    return arr.reduce((accumulator,cur)=>{
        accumulator.set(cur,accumulator.has(cur) ? accumulator.get(cur)+1 : 1)
      return accumulator
  },new Map())
}
console.log(func1(arr))  //{ Alice: 2, Bob: 1, Tiff: 1, Bruce: 1 }

（3）数组去重：对数组arr中所有相同的元素进行去重操作

<!--写法1-->
const arr =[1,2,3,6,6,5,1,2,9,0]
const newArr = arr.reduce((pre,cur)=>{
        pre.includes(cur) ? null : pre.push(cur)
        return pre
    },[])
console.log(newArr);      //[1,2,3,6,5,9,0]

<!--写法2-->
const arr =[1,2,3,6,6,5,1,2,9,0]
const newArr = arr.reduce((pre,cur)=>{
        pre.indexOf(cur)===-1 ? pre.push(cur) : null 
        return pre
    },[])
console.log(newArr);     //[1,2,3,6,5,9,0]