Array方法整理

concat()

用于合并两个或多个数组。此方法不会改变现有数组，而是返回一个新数组。

• 语法：newArr = arr1.concat(arr2)
  • newArr：新数组
  • arr1：旧数组1
  • arr2：旧数组2
• 返回值：新的Array实例
• 代码：

const newArr = [1,2,3].concat(['a','b','c']);
// [1, 2, 3, 'a', 'b', 'c']

fill()

用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引

• 语法：arr.fill(value, start, end)
  • value：用来填充数组元素的值
  • start：其实很索引，默认值和为0
  • end：终止索引，默认值为this.length
• 返回值：修改后的数组
• 代码

let arr = [1,2,3,4,5]
arr = new Array(arr.length).fill(0)
//arr [0,0,0,0,0]

filter()

创建一个新数组，其包含通过所提供函数实现的测试的所有元素

• 语法：arr.filter(callback)
  • callback：用来测试数组的每个元素的函数。返回true表示该元素通过测试，保留该元素，false则不保留。它接受一下三个参数：
    • element：数组中当前正在处理的元素
    • index：正在处理的元素再数组总的索引
    • array：调用了filter的数组本身
• 返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则 返回空数组
• 代码

function isBigEnough(element){
    return element >= 10
}
var filtered = [10,5,8,130,44].filter(isBigEnough)
//[12, 130, 44]

find()

返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。

• 语法：arr.find(callback)
  • callback：再数组每一项上执行的函数，接收三个参数：
    • element：当前遍历到的元素
    • index：当前遍历到的索引
    • array：数组本身
• 返回值：数组中第一个满足所提供测试函数的元素的值，否则返回undefined
• 代码

var inventory = [
    {name: 'apples',quantity: 2},
    {name: 'banana',quantity: 0},
    {name: 'cherries',quantity: 5}
]
function findCherries(fruit){
    return fruit.name === 'cherries'
}
inventory.find(findCherries)
// { name: 'cherries', quantity: 5 }

findIndex()

返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1

• 语法：arr.findIndex(callback)
  • callback：在数组每一项上执行的函数，接收三个参数：
    • element：当前遍历到的元素
    • index：当前遍历到的索引
    • array：数组本身
• 返回值：返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1
• 代码：

var array1 = [5,12,8,130,44]

function isLargeNumber(element){
    return element > 13
}
array1.findIndex(isLargeNumber) //3

forEach()

对数组的每个元素执行一次提供的函数

• 语法：arr.forEach(callback)
  • callback：为数组中每个元素执行的函数，该函数接收三个参数：
    • currentValue：数组中当前正在处理的元素
    • index：数组中正在处理的当前元素的索引
    • array：forEach()方法正在操作的数组
• 返回值：undefined
• 代码：

const items = ['item1','item2','item3']
const copy = []

//使用for遍历
for(let i = 0; i < items.length; i++){
	copy.push(items[i])
}

//使用forEach遍历
items.forEach(function(item){
    copy.push(item)
})

includes()

用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回true，否则返回false。

• 语法：arr.includes(valueToFind, fromIndex)
  • searchValue：需要查找的元素值。
  • formIndex：可选，开始查找的位置
• 返回值：返回一个布尔值Boolean
• 代码：

[1,2,3].includes(2);//true
[1,2,3].includes(4);//false
[1,2,3].includes(3,3);//false
[1,2,3].includes(3,-1);//true
[1,2,NaN].includes(NaN);//true

indexOf()

返回调用String对象中第一次出现的指定值的索引

• 语法：indexOf(searchValue, fromIndex)
  • searchValue：查找的值
  • fromIndex：开始查找的位置
• 返回值：如果找到了，则返回第一次出现的索引；如果没找到，则返回-1
• 代码

'hello world'.indexOf('o',4) //4
[1, 3, 1, 4].indexOf(1, 1); // 2
'怪盗 sdaff'.indexOf('我'); // -1

join()

将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串

• 语法：arr.join(separator)
  • separator是合并的形式。例如 ’ ’ 就是不以任何形式拼接成字符串：[‘hello’, ‘hi’].join(‘’)->‘hellohi’；例如’-‘就是以 - 形式拼接成字符串：[‘hello’, ‘hi’].join(’') -> ‘hello-hi’
• 返回值：一个所有数组元素连接的字符串。
• 代码：

var a = ['Wind', 'Rain', 'Fire']
var myVar1 = a.join()      // myVar1 的值变为 "Wind,Rain,Fire"
var myVar2 = a.join(', ')  // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + ') // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join('')    // myVar4的值变为"WindRainFire"

lastIndexOf()

lastIndexOf()方法返回指定元素（也即有效的JavaScript值或变量）在数组中的最后一个索引，如果不存在则返回-1

• 语法：lastIndexOf(searchValue, fromIndex)
  • searchValue：查找的值
  • fromIndex：从该位置逆向查找
• 返回值：数组中最后一个元素的索引，如未找到返回-1
• 代码：

var array = [2,5,9,2]
var index = array.lastIndexOf(2) //3

map()

map()方法创建一个新数组，其结果是该数组中的每个元素都调用哟一个提供的函数后返回的结果

• 语法：map((item, index)=>{})
  • item：遍历的项
  • index：该次遍历项的索引
• 返回值：一个新数组，每个元素都是回调函数的结果
• 代码：

[1,2,3,4].map(item => item * 2) //[2,4,6,8]
[{
    name: 'zhangsan',
    age: 24
},{
    name: 'lisi',
    age: 124
}].map((item, index) => {
    return `${index}-${item.name}`
})

pop()

pop()方法从数组中删除最后一个元素，并返回该元素的值。该方法更改数组的长度。

• 语法
  • arr.pop()：返回从数组中删除的元素
• 返回值：一个新数组，每个元素都是回调函数的结果
• 代码

let arr = [1, 2, 3, 4]
for(let i = 0, time = 1;i < arr.length; time++){
    console.log(`------\n第${time}次遍历：`);
    console.log(arr.pop())
    console.log(arr)
}
/* Console：
------
第 1 次遍历：
4
[ 1, 2, 3 ]
------
第 2 次遍历：
3
[ 1, 2 ]
------
第 3 次遍历：
2
[ 1 ]
------
第 4 次遍历：
1
[]
*/

push()

push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

• 语法：arr.push(element)
  • element：需要传入到数组的元素
• 返回值：当调用该方法时，新的length属性值将被返回
• 代码：

let arr = []
arr.push(1)
arr.push('2')
arr.push([3,4,5])
arr.push([...6,7,8])
console.log(arr)

/*
[1, "2", Array(3), 6, 7, 8]
0: 1
1: "2"
2: (3) [3, 4, 5]
3: 6
4: 7
5: 8
length: 6
*/

reduce()

reduce()方法对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值。

• 语法：arr.reduce((prev, next) => {return prev + next})
  • prev：数组前一项的值
  • next：数组后一项的值
  • return：return出来的值，会被当做下一次的prev
• 返回值：函数累计处理的结果
• 代码

[1,2,3,4].reduce((prev, next) => {
    retrun prev + next
}) //10

reverse()

reverse()方法将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组。

• 语法：arr.reverse()

• 代码：

let arr = [1, 2, 3]
arr.reverse()
console.log(arr)

shift()

shift()方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

• 语法：arr.shift()

• 返回值：数组中删除第一个元素，并返回该元素的值

• 代码：

let str = [1, 2, 3]
console.log(str.shift()); // 1
console.log(str.shift()); // 2
console.log(str.shift()); // 3
console.log(str.shift()); // undefined

slice()

slice()方法返回一个新的数组对象，这一对象是一个由begin和end决定的原数组的浅拷贝（包括begin，不包括end）。原始数组不会被改变。

• 语法：array.slice(begin, end)
  • begin：（可选）提取起始处的索引（从0开始），从该索引开始提取原数组元素。
  • end：（可选）提取终止处的索引（从0开始），在该索引出结束提取原数组元素。
• 返回值：一个含有被提取元素的新数组
• 代码：

var fruits = ['banana', 'orange', 'lemon', 'apple', 'mango']
var citrus = fruits.slice(1,3)

sort()

sort()对数组的元素进行排序，并返回数组

• 语法：sort(function)
  • function：按某种顺序进行排列的函数
• 返回值：排序后的数组
• 代码：

[4,2,5,1,3].sort() // [1, 2, 3, 4, 5]
[4, 2, 5, 1, 3].sort((a, b) => a < b), // [5, 4, 3, 2, 1]
['a', 'd', 'c', 'b'].sort(), // ['a', 'b', 'c', 'd']
['jsliang', 'eat', 'apple'].sort(), // ['apple', 'eat', 'jsliang']

splice()

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

• 语法：array.splice(start, deleteCount, item1, item2,...)
  • start：指定修改的开始位置（从0计数）
  • deleteCount：整数，表示要移除的数组元素的个数
  • item1, item2, item3...：要添加进数组的元素，从start位置开始。如果不指定，则splice（）将只删除数组元素。
• 返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个 元素的数组。如果没有删除元素，则返回空数组。
• 代码：

var months = ['jan','match','april','june']
months.splices(1, 0, 'Feb')

console.log(months)
// ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');

console.log(months);
// ['Jan', 'Feb', 'March', 'April', 'May']

toString()

toString()返回一个字符串，表示指定的数组及其元素。

• 语法：arr.toString()
• 返回值：一个表示指定的数组及其元素的字符串
• 代码：

let num = 123
num.toString() //'123'

unshift()

unshift()方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

• 语法：arr.unshift(element1, ... , elementN)
  • element1：要插入的第一个元素
  • elementN：要插入的第N个元素
• 返回值：当一个对象调用该方法时，返回其length属性值。（unshift会改变原本数组）
• 代码

let arrA = ['1'];
arrA.unshift('0');
console.log(arrA); // ['0', '1']

let arrB = [4, 5, 6];
arrB.unshift(1, 2, 3);
console.log(arrB); // [1, 2, 3, 4, 5, 6]