Array方法总结

改变原数组的方法

pop();push();reverse();shift();sort();splice();unshift();fill();copyWithin();

不改变原数组的方法

concat();join();slice();toSource();toString();toLocaleString();valueOf();flat();flatMap;

concat()

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

document.write(arr.concat(arr2))

//George,John,Thomas,James,Adrew,Martin

join()

join() 方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join())

// George,John,Thomas


var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join("."))

//George.John.Thomas

pop()

pop() 方法用于删除并返回数组的最后一个元素。

pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr)

document.write("<br />")

document.write(arr.pop())

document.write("<br />")

document.write(arr)

//George,John,Thomas
//Thomas
//George,John

push()

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

arrayObject.push(newelement1,newelement2,....,newelementX)

newelement1	必需。要添加到数组的第一个元素。
newelement2	可选。要添加到数组的第二个元素。
newelementX	可选。可添加多个元素。

push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)

//George,John,Thomas
//4
//George,John,Thomas,James

reverse()

reverse() 方法用于颠倒数组中元素的顺序。

该方法会改变原来的数组，而不会创建新的数组。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.reverse())

//George,John,Thomas
//Thomas,John,George

shift()

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)

//George,John,Thomas
//George
//John,Thomas

slice() 

slice() 方法可从已有的数组中返回选定的元素。

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。该方法并不会修改数组，而是返回一个子数组。

注释：您可使用负值从数组的尾部选取元素。

注释：如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.slice(2,4) + "<br />")
document.write(arr)

//George,John,Thomas,James,Adrew,Martin
//Thomas,James
//George,John,Thomas,James,Adrew,Martin

sort()

sort() 方法用于对数组的元素进行排序。

arrayObject.sort(sortby)

sortby      可选。规定排序顺序。必须是函数。

返回值：对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

• 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
• 若 a 等于 b，则返回 0。
• 若 a 大于 b，则返回一个大于 0 的值。

//按字母排序


var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.sort())

//George,John,Thomas,James,Adrew,Martin
//Adrew,George,James,John,Martin,Thomas



var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort())

//10,5,40,25,1000,1
//1,10,1000,25,40,5

//排序函数

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(arr.sort(sortNumber))

//10,5,40,25,1000,1
//1,5,10,25,40,1000

splice()

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。会改变原数组。

返回包含被删除项目的新数组，如果有的话

arrayObject.splice(index,howmany,item1,.....,itemX)

index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)

//George,John,Thomas,James,Adrew,Martin
//George,John,William,Martin

toSource()

toSource() 方法表示对象的源代码。

该原始值由 Array 对象派生的所有对象继承。

toSource() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

document.write(bill.toSource());

//({name:"Bill Gates", job:"Engineer", born:1985})

toString()

toString() 方法可把数组转换为字符串，并返回结果。

返回arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。

当数组用于字符串环境时，JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下，需要显式地调用该方法。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.toString())

//George,John,Thomas

toLocaleString()

把数组转换为本地字符串。

首先调用每个数组元素的 toLocaleString() 方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.toLocaleString())

//George, John, Thomas

toLocaleString()和toString()的区别

unshift()

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。

请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。

var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)

//George,John,Thomas
//4
//William,George,John,Thomas

valueOf()

valueOf() 方法返回 Array 对象的原始值。

该原始值由 Array 对象派生的所有对象继承。

valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

arrayObject.valueOf();

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.valueOf());

//George,John,Thomas

forEach()

遍历数组，无返回值

let arr = [1, 2, 3, 4, 5]

arr.forEach((value, index, array) => {
    console.log(`value--${value}    index--${index}    array--${array}`) 
})

// value--1    index--0    array--1,2,3,4,5
// value--2    index--1    array--1,2,3,4,5
// value--3    index--2    array--1,2,3,4,5
// value--4    index--3    array--1,2,3,4,5
// value--5    index--4    array--1,2,3,4,5

map()

遍历数组(对原数组的值进行操作)，返回一个新数组

let arr = [1, 2, 3, 4, 5] 

let arr2 = arr.map( (value, index, array)=>{
    return value = value * 2
}) 
console.log(arr2) // [2,4,6,8,10]

filter()

过滤数组，返回一个满足要求的数组

let arr = [1, 2, 3, 4, 5] 

let arr2 = arr.filter((value, index) => value >2) 
console.log(arr2)  // [3,4,5]

every()

根据判断条件，遍历数组中的元素，是否都满足，若都满足则返回true，反之返回false

let arr = [1, 2, 3, 4, 5] 

let arr2 = arr.every((value, index) => index > 2) 
console.log(arr2)  // false

let arr3 = arr.every((value, index) => index > 0) 
console.log(arr3)  // true

some()

根据判断条件，遍历数组中的元素，是否存在至少有一个满足，若存在则返回true，反之返回false

let arr = [1, 2, 3, 4, 5]

let arr2 = arr.some((value, index) => index > 2)
console.log(arr2) // true

let arr3 = arr.some((value, index) => index > 5)
console.log(arr3) // false

indexOf()

从前往后查找某个元素的索引值，若有重复的，则返回第一个查到的索引值，若不存在，返回 -1

let arr = [1,2,3,4,5,4]
let arr2 = arr.indexOf(4) 
console.log(arr2)  // 3

let arr3 = arr.indexOf(6) 
console.log(arr3)  // -1

lastIndexOf()

从后往前查找某个元素的索引值，若有重复的，则返回第一个查到的索引值，若不存在，返回 -1

let arr = [1,2,3,4,5,4]
let arr2 = arr.lastIndexOf(4) 
console.log(arr2)  // 5

let arr3 = arr.lastIndexOf(6) 
console.log(arr3)  // -1

from()    ES6 

将伪数组变成数组，只要有length的就可以转成数组

Array.from(arrayLike[, mapFn[, thisArg]])

参数	含义	必选
arrayLike	想要转换成数组的伪数组对象或可迭代对象	Y
mapFn	如果指定了该参数，新数组中的每个元素会执行该回调函数	N
thisArg	可选参数，执行回调函数 mapFn 时 this 对象	N

let str = '12345'
console.log(Array.from(str))    // ["1", "2", "3", "4", "5"]

let obj = {0:'a',1:'b',length:2}
console.log(Array.from(obj))   // ["a", "b"]


Array.from({
    length: 5
}, function() {
    return 1
})

//[1,1,1,1,1]

of()    ES6 

将一组值转换成数组，类似于声明数组

let str = '11'
console.log(Array.of(str))   // ['11']

// 等价于 
console.log(new Array('11'))   // ['11]

// ps:
new Array()有缺点，就是参数问题引起的重载
console.log(new Array(2)) // [empty × 2] 是个空数组
console.log(Array.of(2)) // [2]

find()    ES6 

找到第一个符合条件的数组成员

let arr = [1,2,3,4,5,2,4] 

let arr2 = arr.find((value, index, array) => value > 2) 
console.log(arr2)   // 3

findIndex()    ES6 

找到第一个符合条件的数组成员的索引值

let arr = [1, 2, 3, 4, 5] 

let arr1 = arr.findIndex((value, index, array) => value > 2) 
console.log(arr1)  // 2

includes()    ES6 

判断数组中是否包含特定的值

let arr = [1, 2, 3, 4, 5]

let arr2 = arr.includes(2)  
console.log(arr2) // ture

let arr3 = arr.includes(9) 
console.log(arr3) // false

let arr4 = [1,2,3,NaN].includes(NaN)
console.log(arr5) // true

includes()和indexof()的区别

fill()    ES6 

arr.fill(target, start, end)

target – 待填充的元素； start – 开始填充的位置 - 索引； end – 终止填充的位置 - 索引（不包括该位置) 

使用给定的值，填充一个数组（改变原数组）

let arr = [1, 2, 3, 4, 5]

let arr2 = arr.fill(5)
console.log(arr2) // [5, 5, 5, 5, 5]
console.log(arr)   // [5, 5, 5, 5, 5]

let arr3 = arr.fill(5,2)
console.log(arr3)  // [1,2,5,5,5]

let arr4 = arr.fill(5,1,3)
console.log(arr4)  // [1,5,5,4,5]

keys()    ES6 

遍历数组的键名

let arr = [1, 2, 3, 4, 5] 
let arr2 = arr.keys() 

for (let key of arr2) { 
    console.log(key)   // 0,1,2,3,4
}

values()    ES6 

遍历数组键值

let arr = [1, 2, 3, 4, 5]
let arr1 = arr.values() 

for (let val of arr1) {
     console.log(val); // 1,2,3,4,5
}

entries()    ES6 

遍历数组的键名和键值

entries() 方法返回迭代数组。
迭代数组中每个值 前一个是索引值作为 key， 数组后一个值作为 value。

let arr = [1, 2, 3, 4, 5] 
let arr2 = arr.entries() 

for (let e of arr2) { 
    console.log(e);   // [0,1] [1,2] [2,3] [3,4] [4,5]
}

copyWithin()    ES6 

 在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

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

参数	含义	必选
target	从该位置开始替换数据。如果为负值，表示倒数	Y
start	从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算	N
end	到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算	N

let arr = [1,2,3,4,5,6,7]

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

let arr3 = arr.copyWithin(1,2)
console.log(arr3)   // [1, 3, 4, 5, 6, 7, 7]

let arr4 = arr.copyWithin(1,2,4) 
console.log(arr4)   // [1, 3, 4, 4, 5, 6, 7]

reduce()    ES6 

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

reduce() 可以作为一个高阶函数，用于函数的 compose。

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

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

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

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

//1 2 1
//3 3 2
//6 4 3
//[1, 2, 3, 4] 10

没有初始值时index是从1开始的，第一次的prev的值是数组的第一个值。数组长度是4，但是reduce函数循环3次。

var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //注意这里设置了初始值
console.log(arr, sum);

//0 1 0
//1 2 1
//3 3 2
//6 4 3
//[1, 2, 3, 4] 10

如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
//报错，"TypeError: Reduce of empty array with no initial value"

var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0)
console.log(arr, sum); // [] 0

数组为空时，有初始值，就不会报错

reduce()用法总结

isArray()    ES6 

判断一个值是否为数组的方法，若为数组，返回true，反之返回false

let a = 1234
let b = "fsaufh"
let c = {a:1,b:2}
let d = [1,2]

let mark1 = Array.isArray(a) 
 console.log(mark1)  // false

let mark2 = Array.isArray(b) 
console.log(mark2)  // false

let mark3 = Array.isArray(c) 
console.log(mark3)  // false

let mark4 = Array.isArray(d) 
console.log(mark4)  // true

flat()    ES6 

对数组内嵌套的数组“拉平”，就是把数组中的数组的元素挨个拿出来，放数组元素所在位置，返回一个新的数组，不会影响到原来的数组

参数：pliy表示拉平的层数，默认是1层，想无限拉平可以传入Infinity关键字

let arr = [1, 2, [3, [4, 5]]] 
console.log(arr.flat(2))  // [1, 2, 3, 4, 5]

let arr2 = [1,[2,[3,[4,5]]]] 
console.log(arr2.flat(Infinity))  // [1, 2, 3, 4, 5]

flatMap    ES6 

对原数组的每个成员执行一个函数，相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。只能展开一层数组 

var arr1 = [1, 2, 3, 4];
 
arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]
 
arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]
 
// 只会将 flatMap 中的函数返回的数组 “压平” 一层
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]