JS数组方法面试总结

1.操作数组的方法

不改变原数组：
 slice 截取数组
 concat 联合数组 
 join 将转换成字符串
 forEach map filter reduce 不改变原数组

改变原数组：
 push unshift 返回数组的长度
 pop shift 返回删除的元素，参数无用
 reverse 返回反置的数组  sort 排序数组
 splice 截取数组的同时，还会插入数据，返回的值为截取出来的元素

// 1. array.push(item1, item2, …, itemX) 
// 可以将一个或者更多的参数添加在数组的尾部；返回添加后的数组的长度，原数组发生改变。
var arr = [1,2,3,4]
var a = arr.push(9,8,7)
console.log('a='+a+' arr='+arr)  // a=7 arr=1,2,3,4,9,8,7

// 2. array.pop()
// 从数组尾部删除一个元素，返回这个被删除的元素，原数组发生改变。
var arr = [4,3,2,3]
var a = arr.pop()
console.log('a='+a+' arr='+arr) // a=3 arr=4,3,2

// 3. array.unshift(item1,item2, …, itemX)
// 可以将一个或者更多的参数添加在数组的头部；返回添加后的数组的长度，原数组发生改变。
var arr = [1,2,3,4]
var a = arr.unshift(9,8,7)
console.log('a='+a+' arr='+arr) // a=7 arr=9,8,7,1,2,3,4

// 4. array.shift()   参数无用
// 从数组头部删除一个元素，返回这个被删除的元素，原数组发生改变。
var arr = [4,3,2,3]
var a = arr.shift()
console.log('a='+a+' arr='+arr)  // a=4 arr=3,2,3

// 5. array.slice(start, end)   //不改变原数组
// a.如果不传参数，会返回原数组
// b.如果一个参数，从该参数表示的索引开始截取，直至数组结束，返回这个截取数组
// c.如果两个参数，从第一个参数对应的索引开始截取，到第二个参数对应的索引结束，start包含，end不包含
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"]
var citrus = fruits.slice(1,3)
console.log(citrus)  // ["Orange","Lemon"]

// 6. array.splice(index,howmany,item1,…,itemX)
// a.没有参数，返回空数组，原数组不变
// b.一个参数，从该参数表示的索引位开始截取，直至数组结束，返回截取的数组，原数组改变；
// c.两个参数，第一个参数表示开始截取的索引位，第二个参数表示截取的长度，返回截取的 数组，原数组改变；
// d.三个或者更多参数，第三个及以后的参数表示要从截取位插入的值。
var fruits = ["Banana", "Orange", "Apple", "Mango"]
var a = fruits.splice(1,2,'Peel')
console.log(a) // ["Orange", "Apple"]
console.log(fruits)  // ["Banana", "Peel", "Mango"]

// 7. array.reverse()
// 用于颠倒数组中元素的顺序
var fruits = ["Banana", "Orange", "Apple", "Mango"]
fruits.reverse()
console.log(fruits) // ["Mango", "Apple", "Orange", "Banana"]

// 8. array.sort(sortfunction) 
// 用于对数组的元素进行排序
var arr = [1,5,9,7,6,3,4,8,2]
arr.sort(function(a,b){
	//return a - b  //从小到大
	return b-a  //从大到小
})
console.log(arr) // [9, 8, 7, 6, 5, 4, 3, 2, 1]

// 9. array.join(separator)      //不改变原数组
// 把数组中的所有元素转换一个字符串,元素是通过指定的分隔符进行分隔的
var arr = [1,2,3,4]
var newArr1 = arr.join()
var newArr2 = arr.join(".")
console.log(arr)     // [1, 2, 3, 4]
console.log(newArr1) // "1,2,3,4"
console.log(newArr2) // "1.2.3.4"

// 10. string.concat(string1, string2, …, stringX)  //不改变原数组
// 字符串,数组都可以用，将参数中的值放到操作的数组后边，返回拼接的数组，如果参数是数组，则先把值提取出来再操作
var arr = [1,2,3,4];
var newArr = arr.concat([5,6,7])
console.log(arr) // [1, 2, 3, 4]
console.log(newArr) // [1, 2, 3, 4, 5, 6, 7]

4. ES 5 新增的一些数组方法

// 1. string.indexOf(searchvalue,start)
// 字符串，数组都可适用，此方法可返回某个指定的字符串值在字符串中首次出现的位置
// 若一个参数，返回这个参数在数组里面的索引值，如果参数不在操作的数组中，则返回 -1。
var arr = [1,2,3,4];
arr.indexOf(1) // 0
arr.indexOf(5) // -1 

// 2. array.forEach(function(item, index, arr))   （不改变原数组）
// 数组遍历，且只能够遍历数组，不接受返回值或返回值为 undefined，单纯对数组进行循环
// 如果数组中的值为 empty, 则不会执行回调函数
var arr = [1,2,3,4,5];
arr.forEach((item,index,arr)=>{
   // item: 遍历的数组内容
   // index: 对应的数组索引
   // arr: 数组本身
})

// 3. array.map(function(item,index,arr))   （不改变原数组）
// 数组的遍历，用来接收一个返回值，创建一个新数组
var arr = [1,2,3,4,5,6]
var newArr = arr.map(function(item,index,arr){
	return item * 2
})
console.log(arr)  // [1, 2, 3, 4, 5, 6]
console.log(newArr) // [2, 4, 6, 8, 10, 12]


// 4. array.filter(function(item,index,arr))  （不改变原数组）
// 过滤出一些符合条件的元素，返回一个新数组  (返回为true,该元素就进新数组，false反之）
var arr = [32, 33, 16, 40]
var newArr = arr.filter((item,index,arr)=>{
    return item >=18 
})
console.log(arr) // [32, 33, 16, 40]
console.log(newArr) // [32, 33, 40]

// 5. array.some(function(currentValue,index,arr))  （不改变原数组）
// 检测数组中是否含有某一个值，如果数组中有任意一个元素满足给定的条件，结果就为 true否则则为false
var arr = [32, 33, 16, 40]
var newArr = arr.some((item,index,arr)=>{
    return item >= 18 
})
console.log(arr) // [32, 33, 16, 40]
console.log(newArr) // true

// 6. array.every(function(currentValue,index,arr))  （不改变原数组）
// 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）,返回一个布尔值,结果为 true或false
var arr = [32, 33, 16, 40]
var newArr = arr.every((item,index,arr)=>{
    return item >=18 
})
console.log(arr) // [32, 33, 16, 40]
console.log(newArr) // false

// 7. array.reduce(function(total, currentValue, currentIndex, arr))
// 对数组中的所有元素调用指定的回调函数，该回调函数的返回值为累计结果。且把返回值作为下一次回调函数的参数。
var arr = [1,2,3,4,5,6,7,8,9];
var res = arr.reduce((pre,next,index,arr1)=>{
    console.log("pre："+pre)    // 前一个的值 pre： 0 1 3 6 10 15 21 28 36
    console.log("next："+next)  // 后一个的值 next：1 2 3 4 5 6 7 8 9
    console.log('arr1：'+arr1)
    return pre+next
})
console.log("arr："+arr)  // arr：1,2,3,4,5,6,7,8,9
console.log("res："+res)  // res：45

5.ES 6 数组方法

// 1. includes( ) 检测数组中是否包含一个值。
// 与 Set 和 Map 的 has 方法区分  Set 的 has 方法用于查找值   Map 的 has 方法用于查找键名
[1, 2, 3].includes(1)      // true
[1, 2, 3].includes(1, 2)   // false  搜索的起始索引，默认为
[1, NaN, 3].includes(NaN)  // true

// 2. Array.from(arrayLike[, mapFn[, thisArg]])
// 将类数组对象或可迭代对象转化为数组，比如 arguments，js 选择器找到 dom 集合和对象模拟的数组。
var arr = Array.from([1,[1,2,3],2,,3,])
console.log(arr) // [1, [1, 2, 3], 2, undefined, 3]

// 3. Array.of()  数组创建，将参数中所有值作为元素形成数组，如果参数为空，则返回一个空数组
console.log(Array.of()) // []
console.log(Array.of(1, 2, 3, 4)) // [1, 2, 3, 4]
console.log(Array.of(1, '2', true)) // [1, '2', true] 

// 4. find() 查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。
let arr = Array.of(1, 2, 3, 4)
console.log(arr.find(item => item > 2)) // 3 
console.log([, 1].find(n => true)) // undefined

// 5. findIndex() 查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。
var arr = Array.of(1, 2, 1, 3)
console.log(arr.findIndex(item => item == 1)); // 0
console.log([, 1].findIndex(n => true)); // 0 

// 6. fill() 将一定范围索引的数组元素内容填充为单个指定的值。
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
var arr1 = Array.of(1, 2, 3, 4)
var arr2 = Array.of(1, 2, 3, 4)
console.log(arr1.fill(0,1))   // [1, 0, 0, 0]
console.log(arr2.fill(0,1,3)) // [1, 0, 0, 4]

// 7. … 扩展运算符
var arr = [1, 2],
    arr1 = [...arr] 
console.log(arr1) // [1, 2]
// 数组含空位
var arr2 = [1, , 3],
    arr3 = [...arr2]
console.log(arr3)  // [1, undefined, 3]
//合并数组
console.log([...[1, 2],...[3, 4]]); // [1, 2, 3, 4]