JavaScript数组

目录

创建数组

使用Array构造函数创建数组

使用数组字面量创建数组 []

ES6新增

from()方法

of()方法

数组空位

数组索引

检测数组

instanceof操作符

Array.isArray()

Object.prototype.toString.call() 方法

数组方法

迭代器方法

 复制和填充方法

copyWithin() 方法

fill() 方法

转换方法

toLocaleString()

toString()

valueOf()

join()方法

栈方法

push() 方法

 pop() 方法

队列方法

shift() 方法

push() 方法

排序方法

reverse() 方法

sort() 方法

操作方法

concat() 方法

slice() 方法

splice() 方法

搜索和位置方法

indexOf() 方法

lastIndexOf() 方法

includes() 方法

迭代方法 

every() 方法

filter() 方法

forEach() 方法

map() 方法

some() 方法

归并方法

reduce() 方法

reduceRight() 方法

---

创建数组

使用Array构造函数创建数组

let a = new Array();//创建了一个空数组a

可以给构造函数传值，然后length属性会自动创建并设置为该值。如：

let a = new Array(20); //创建了一个length为20的数组

也可以给构造函数直接传入元素：

let a = new Array('1','2','abc',true); // 创建了一个包含四个元素的数组

使用Array构造函数创建数组时，可以省略new操作符，结果一样的。

使用数组字面量创建数组 []

数组字面量是用中括号中加逗号分隔的元素列表。

如：

let arr = []; // 创建了一个空的数组
let arr1 = ['1','2','abc',true];//创建了一个包含四个元素的数组

ES6新增

创建数组的静态方法from()，和of()，

from()方法

from()用于将类数组结构转换为数组实例，

Array.from(object, mapFunction, thisValue)

参数	描述
object	必需，要转换为数组的对象。（即任何一个可迭代的结构）
mapFunction	可选，数组中每个元素要调用的函数。(映射函数参数，这个函数可以直接增强新数组的值）
thisValue	可选，映射函数(mapFunction)中的 this 对象。（这个重写的this值箭头函数中不适用）

console.log(Array.from('abc'));//from()可以将字符串拆解为单字符数组['a', 'b', 'c']
//还可以对现有数组进行浅复制
const a1 = [1,2,3,4];
const a2 = Array.from(a1);
console.log(a2);//[1, 2, 3, 4]
console.log(a1===a2);//false

arguments也能被转换为数组。

of()方法

of()用于将一组参数转换为数组实例。

console.log(Array.of(1,2,3,4));// [1, 2, 3, 4]

数组空位

字面量创建数组时可以使用逗号来创建空位，值为undefined。ES6之前会忽略这个空位。

let a = [1,,,,,2];//创建一个包含六个元素的数组

注：实践中要避免使用数组空位，如果确实要使用可以显式使用undefined代替。

数组索引

数组索引从0开始，要取得或设置数组的值，需要使用中括号并提供相应值的数字索引。

        let arr1 = ['1','2','abc',true];
        // 数组里面的数据用逗号分隔
        // 数组里面的数据 比如1,2， 我们称为数组元素
        // 获取数组元素，格式：数组名[索引号]  索引号从 0开始 
        console.log(arr1);//['1', '2', 'abc', true]
        console.log(arr1[0]); // 1
        console.log(arr1[3]); // true

length属性返回数组的长度（数组元素的数目）。length属性始终大于最高数组索引（下标）。

length属性不只是只读的，可以通过修改lentgh属性，从数组末尾删除或添加元素。

        let a1 = [1,2,3,4];
        a1[a1.length] = 5;
        console.log(a1);//[1, 2, 3, 4, 5]
        console.log(a1[4]);// 5
        a1.length = 4;
        console.log(a1[4]);// undefined

检测数组

instanceof操作符

使用：数组名 instanceof Array;

Array.isArray()

ECMAScript提供了Array.isArray()方法，确定一个值是否为数组。

如：

let a1 = [1,2,3,4];
console.log(a1 instanceof Array);//true 
console.log(Array.isArray(a1));//true

还有一种方法：

Object.prototype.toString.call() 方法

console.log(Object.prototype.toString.call(a1));// [object Array]

注意：使用typeof来检测数据类型，对于Function, String, Number, Undefined等这几种基本类型来说，使用typeof来检测都可以检测到。但是对于数组或者正则来说，使用typeof来检测的话，返回的类型将会是一个对象object。

数组方法

迭代器方法

ES6中数组原型上暴露了三种方法，keys()，values() ，entries()。

keys()方法返回数组索引的迭代器。

values()方法返回数组元素的迭代器。

entries()方法返回索引/值对 的迭代器。

       let b = ['a','b','c','d'];
       //因为这些方法都返回迭代器，
       //索引可以用Array.from()方法直接转换为数组实例
       console.log(Array.from(b.keys()));//[0, 1, 2, 3]
       console.log(Array.from(b.values()));//['a', 'b', 'c', 'd']
       console.log(Array.from(b.entries()));
       //[Array(2), Array(2), Array(2), Array(2)]
       //[0, 'a'][1, 'b'][2, 'c'][3, 'd']

 复制和填充方法

批量复制方法：

copyWithin() 方法

用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

array.copyWithin(target, start, end)

参数	描述
target	必需。复制到指定目标索引位置。
start	可选。元素复制的起始位置。
end	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

 需要指定既有数组实例上的一个范围，包含开始索引，不包含结束索引，不会改变数组大小。

如：复制数组的前面两个元素到第三和第四个位置上

       var fruits = [ "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
       console.log(fruits.copyWithin(2, 0, 2)); //['Orange', 'Apple', 'Orange', 'Apple', 'Papaya']

 copyWithin()会按照指定范文浅复制数组中的部分内容，然后插入到指定索引的位置。且静默忽略超出数组边界、零长度及方向相反的索引范围。

fill() 方法

用于将一个固定值替换数组的元素。使用fill()方法可以向一个已有的数组中插入全部或部分相同的值。

array.fill(value, start, end)

参数	描述
value	必需。填充的值。
start	可选。开始填充位置。
end	可选。停止填充位置 (默认为 array.length)

 需要指定既有数组实例上的一个范围，包含开始索引，不包含结束索引，不会改变数组大小。

 如：填充 "Runoob" 到数组的最后两个元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4);// ['Banana', 'Orange', 'Runoob', 'Runoob']

fill()静默忽略超出数组边界、零长度及方向相反的索引范围。

转换方法

toLocaleString()

会返回一个逗号分隔的数组值的字符串。对数组的每个值调用toLocaleString()方法，以得到最终的字符串。

toString()

会返回由数组中每个值的等效字符串拼接而成的一个逗号分隔的字符串。对数组的每个值调用toString()方法，以得到最终的字符串。

valueOf()

返回数组本身。

join()方法

用于把数组中的所有元素转换一个字符串。

array.join(separator)

参数	描述
separator	可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

方法示例：

        var fruits = ["Banana", "Orange", "Apple", "Mango"];
        console.log(fruits.toLocaleString());//Banana,Orange,Apple,Mango
        console.log(fruits.toString());//Banana,Orange,Apple,Mango
        console.log(fruits.valueOf());// ['Banana', 'Orange', 'Apple', 'Mango']
        console.log(fruits.join('|'));//Banana|Orange|Apple|Mango

栈方法

 首先了解一下栈，栈是一种后进先出的结构，也就是最近添加的项先被删除。数据项的插入（称为推入，push）和删除（称为弹出，pop)，只在栈的一个地方发生，即栈顶。

push() 方法

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

array.push(item1, item2, ..., itemX)

参数	描述
item1, item2, ..., itemX	必需。要添加到数组的元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.push("Kiwi","Lemon","Pineapple")); //7
console.log(fruits.pop());//Pineapple（此处是删除了上面push添加后的最后一个元素）

注： 此方法改变数组的长度。

 pop() 方法

用于删除数组的最后一个元素并返回删除的元素。

用法：array.pop()

队列方法

队列是以先进先出形式限制访问，队列是在列表末尾添加数据，但是在开头获取数据。

shift() 方法

用于把数组的第一个元素从其中删除，并返回第一个元素的值。（ 此方法会改变数组的长度）

用法：array.shift()

push() 方法

可向数组的末尾添加一个或多个元素，并返回新的长度。（ 此方法会改变数组的长度）

array.push(item1, item2, ..., itemX)

参数	描述
item1, item2, ..., itemX	必需。要添加到数组的元素。

 示例：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.push("Kiwi","Lemon","Pineapple"));//7

排序方法

reverse() 方法

用于颠倒数组中元素的顺序。

用法：array.reverse()

返回值：颠倒顺序后的数组

示例：

let values = [1,2,3,4,5]
console.log(values.reverse());//[5, 4, 3, 2, 1]

sort() 方法

用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认为升序。

sort()会在每一项上调用String()转型函数，然后比较字符串来决定顺序，即使是数值型的元素，也会先把数组转换为字符串再比较、排序。

array.sort(sortfunction)

参数	描述
sortfunction	可选。规定排序顺序。必须是函数。

 接收一个比较函数，用于判断那个值排在最前面，如果第一个值应该排在第二个参数后面就返回负值；如果第一个参数应该排在第二个参数后面，就返回正值；两个参数相等返回0。

示例：

//数字和降序
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return b-a});//100,40,25,10,5,1

//字母和降序:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();//Orange,Mango,Banana,Apple

reverse()和sort()方法都返回调用它们的数组的引用。

操作方法

concat() 方法

用于连接两个或多个字符串。可以在现有数组全部元素基础上创建一个新数组。

它会首先创建一个当前数组的副本，然后再把它的参数添加到副本的末尾，最后返回这个新构建的数组。如果传入一个或多个数组，则concat（）会把这些数组的每一项都添加到结果数组，如果参数不是数组，则直接把他们添加到结果数组末尾。该方法没有改变原有字符串，但是会返回连接两个或多个字符串新字符串。

string.concat(string1, string2, ..., stringX)

参数	描述
string1, string2, ..., stringX	必需。将被连接为一个字符串的一个或多个字符串对象。

返回一个由两个或多个字符串连接后生成的新字符串。

        var str1="Hello ";
        var str2="world!";
        var str3=" Hi!";
        var n = str1.concat(str2,str3);
        console.log(n);//Hello world! Hi!

slice() 方法

可从已有的数组中返回选定的元素。用于创建一个包含原数组中一个或多个元素的新数组。

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注： slice() 方法不会改变原始数组。

array.slice(start, end)

参数	描述
start	可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

返回一个新的数组，包含从 start（包括该元素） 到 end （不包括该元素）的 array对象中的元素。

如果slice（）的参数有负值，那么就以数值长度加上这个负值的结果确定位置。如果结束位置小于开始位置那么返回空数组。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);//Orange,Lemon

//使用负值从数组中读取元素
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(-3,-1); // 截取倒数第三个（包含）到倒数第一个（不包含）的两个元素
var myBest = fruits.slice(-3);  // 截取最后三个元素
console.log(myBest);//Lemon,Apple

splice() 方法

用于添加或删除数组中的元素。

注意：这种方法会改变原始数组。

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

参数	描述
index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	可选。规定应该删除多少元素。必须是数字，但可以是 "0"。 如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, ..., itemX	可选。要添加到数组的新元素

 使用：

删除：给splice()传入两个参数，第一个参数为要删除的第一个元素的位置，第二个参数是要删除的元素数量。

如：

        let c = [1,2,3,4,5,6]
        console.log(c.splice(0,2));//会删除前两个元素
        console.log(c);//[3, 4, 5, 6]

插入：给splice()传入三个参数，第一个参数为开始位置，第二个参数为0（要删除的元素数量），第三个参数为要插入的元素。

        let c = [1,2,3,4,5,6]
        c.splice(2,0,6,6,6);//会在数组位置2开始插入6，6，6
        console.log(c);//[1, 2, 6, 6, 6, 3, 4, 5, 6]

替换：splice()可以再删除元素的同时在指定位置插入新元素，需要传入三个参数：第一个参数为开始位置，第二个参数为要删除的元素数量，第三个参数为要插入的任意多个元素。

        let c = [1,2,3,4,5,6]
        c.splice(2,1,6,6,6);//会在数组位置2开始，删除一个元素，并插入6，6，6
        console.log(c);//[1, 2, 6, 6, 6, 4, 5, 6]

搜索和位置方法

严格相等：

indexOf() 方法

可返回某个指定的字符串值在字符串中首次出现的位置，如果没有找到匹配的字符串则返回 -1。

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

string.indexOf(searchvalue,start)

参数	描述
searchvalue	必需。规定需检索的字符串值。
start	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 string Object.length - 1。如省略该参数，则将从字符串的首字符开始检索。

lastIndexOf() 方法

可返回一个指定的字符串值最后出现的位置，如果指定第二个参数 start，则在一个字符串中的指定位置从后向前搜索,但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。

开始检索的位置在字符串的 start 处或字符串的结尾（没有指定 start 时）。

如果没有找到匹配字符串则返回 -1 。

注意：lastIndexOf() 方法是区分大小写的！

string.lastIndexOf(searchvalue,start)

参数	描述
searchvalue	必需。规定需检索的字符串值。
start	可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。

includes() 方法

用于判断字符串是否包含指定的子字符串。

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

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

string.includes(searchvalue, start)

参数	描述
searchvalue	必需，要查找的字符串。
start	可选，设置从那个位置开始查找，默认为 0。

  indexOf() 、lastIndexOf() 、includes() 方法在比较第一个参数跟数组的每一项时，会使用全等（===）比较，也就是说两项必须严格相等。

例如：

        let numbers = [1,2,3,4,5,4,3,2,1]
        console.log(numbers.indexOf(4));//3
        console.log(numbers.lastIndexOf(4));// 5
        console.log(numbers.includes(4));// true
        console.log(numbers.indexOf(4,4));// 5
        console.log(numbers.lastIndexOf(4,4));// 3
        console.log(numbers.includes(4,7));// false

断言函数搜索数组

断言函数接收三个参数：元素、索引、数组本身。其中元素是数组中当前搜索的元素，索引是当前元素的索引，而数组就是正在搜索的数组。断言函数返回真值，表示是否匹配。

find()和findIndex()方法使用了断言函数。这两个方法都从数组最小索引开始，find()返回第一个匹配的元素，findIndex()返回第一个匹配元素的索引。这两个方法的第二个参数可选，用于指定断言函数内部的this值。找到匹配项后，这两个方法都不在继续搜索。

（具体的可见JavaScript高级程序设计153页。）

迭代方法 

every() 方法

用于检测数组所有元素是否都符合指定条件（通过函数提供），对数组的每一项都运行传入的函数，如果对每一项函数都返回true，则这个方法返回true。

every() 方法使用指定函数检测数组中的所有元素：

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

注意： every() 不会对空数组进行检测， every() 不会改变原始数组。

array.every(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数 描述 currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"

 例如：numbers数组中并不是每一项都大于2，所以返回 false 

        let numbers = [1,2,3,4,5,4,3,2,1]
        let everyResult = numbers.every((item,index,array) => item > 2);
        console.log(everyResult);//false

filter() 方法

创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。对数组的每一项都运行传入的函数，函数返回true的项会组成数组后返回。

注意： filter() 不会对空数组进行检测。 filter() 不会改变原始数组。

array.filter(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数 描述 currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"

例如：要返回一个所有数值都大于2的数组 

        let numbers = [1,2,3,4,5,4,3,2,1]
        let filterResult = numbers.filter((item,index,array) => item > 2);
        console.log(filterResult);//[3, 4, 5, 4, 3]

forEach() 方法

用于调用数组的每个元素，并将元素传递给回调函数。对数组的每一项都运行传入的函数，没有返回值。

注意: forEach() 对于空数组是不会执行回调函数的。forEach()方法相当于使用for循环遍历数组。

array.forEach(callbackFn(currentValue, index, arr), thisValue)

参数	描述
callbackFn(currentValue, index, arr)	必需。 数组中每个元素需要调用的函数。 函数参数: 参数 描述 currentValue 必需。当前元素 index 可选。当前元素的索引值。 arr 可选。当前元素所属的数组对象。
thisValue	可选。传递给函数的值一般用 "this" 值。 如果这个参数为空， "undefined" 会传递给 "this" 值

 forEach()方法相当于使用for循环遍历数组，会对每一项运行传入的函数，没有返回值。

map() 方法

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。对数组的每一项都运行传入的函数，返回由每次函数调用的结果构成的数组。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。 map() 不会改变原始数组。

array.map(function(currentValue,index,arr), thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数 描述 currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

例如：将数组中每一项都乘以2，并返回包含所有结果的数组。

        let numbers = [1,2,3,4,5,4,3,2,1]
        let mapResult = numbers.map((item,index,array) => item * 2);
        console.log(mapResult);//[2, 4, 6, 8, 10, 8, 6, 4, 2]

some() 方法

用于检测数组中的元素是否满足指定条件（函数提供）。对数组的每一项都运行传入的函数，如果有一项函数返回true，则这个方法返回true。

some() 方法会依次执行数组的每个元素：

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

注意： some() 不会对空数组进行检测。 some() 不会改变原始数组。

array.some(function(currentValue,index,arr),thisValue)

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每个元素都会执行这个函数 函数参数: 参数 描述 currentValue 必须。当前元素的值 index 可选。当前元素的索引值 arr 可选。当前元素属于的数组对象
thisValue	可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。 如果省略了 thisValue ，"this" 的值为 "undefined"

 例如：numbers数组中有任意一项大于2，则为真，方法返回true。

        let numbers = [1,2,3,4,5,4,3,2,1]
        let someRrsult = numbers.some((item,index,array) => item > 2);
        console.log(someRrsult);//true

归并方法

reduce() 方法

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

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

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

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

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

四个参数：上一个归并值，当前项，当前项的索引和数组本身。如果没有传入可选的第二个参数，则第一次迭代将从数组的第二项开始。因此传给归并函数的第一个参数是数组的第一项，第二个参数是数组的第二项。

返回计算结果值。 

reduceRight() 方法

reduceRight() 从数组的末尾向前将数组中的数组项做累加。

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

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

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

四个参数：上一个归并值，当前项，当前项的索引和数组本身。如果没有传入可选的第二个参数，则第一次迭代将从数组的第二项开始。因此传给归并函数的第一个参数是数组的第一项，第二个参数是数组的第二项。

究竟使用reduce() 方法还是reduceRight() 方法取决于遍历数组元素的方向。除此之外这两个方法没有什么区别。

参考：JavaScript Array（数组）对象 | 菜鸟教程