本篇主要介绍了Web前端JavaScript开发入门到精通-最详细JS数组方法，通过具体的内容展现，希望对大家web前端JavaScript的学习有一定的帮助。

数组是js中最常用到的数据集合，其内置的方法也很多，熟练掌握这些方法，可以有效的提高我们的工作效率，也对我们的代码质量有很大影响。

如果还有漏网之鱼，欢迎留言补充哈。

一、创建数组

1、使用数组字面量方法

var arr1 = [];     // 创建一个数组

var arr2 = [20];   // 创建一个包含1项数据为20的数组

var arr3 = ['lily','lucy','Tom'];  // 创建一个包含3个字符串的数组

2、使用Array构造函数

无参构造

var arr1 = new Array();   // 创建一个空数组

带参构造

如果只传一个数值参数，则表示创建一个初始长度为指定数组的空数组

var arr2 = new Array(10);     // 创建一个包含10项的数组

如果传入一个非数值的参数或者参数大于1，则表示创建一个包含指定元素的数组

var arr3 = new Array('lily','lucy','Tom');     // 创建一个包含3个字符串的数组

3、Array.of方法创建数组(es6新增)

Array.of()方法会创建一个包含所有传入参数的数组，而不管参数的数量与类型

let arr1 = Array.of(1,2);

console.log(arr1.length);   // 2

let arr2 = Array.of(3);

console.log(arr2.length);   // 1

console.log(arr2[0]);   // 3

4、Array.from方法创建数组(es6新增)

在js中将非数组对象转换为真正的数组是非常麻烦的。在es6中，将可迭代对象或者类数组对象作为第一个参数传入，Array.from()就能返回一个数组

function arga(...args){  // ...args剩余参数数组，由传递给函数的实际参数提供

     let arg = Array.from(args);

     console.log(arg);

}

arga(arr1,26,from);     // [arr1,26,from]

二、数组方法

数组原型方法主要有以下这些：

join()：用指定的分隔符将数组每一项拼接为字符串

push()：向数组的末尾添加新元素

pop()：删除数组的最后一项

unshift()：向数组首位添加新元素

shift()：删除数组的第一项

slice()：按照条件查找出其中的部分元素

splice()：对数组进行增删改

filter()：过滤功能

concat()：用于连接两个或多个数组

indexOf()：检测当前值在数组中第一次出现的位置索引

lastIndexOf()：检测当前值在数组中最后一次出现的位置索引

every()：判断数组中每一项都是否满足条件

some()：判断数组中是否存在满足条件的项

includes()：判断一个数组是否包含一个指定的值

sort()：对数组的元素进行排序

reverse()：对数组进行倒序

forEach()：es5及以下循环遍历数组每一项

map()：es6循环遍历数组每一项

find()：返回匹配的项

findIndex()：返回匹配位置的索引

reduce()：从数组的第一项开始遍历到最后一项，返回一个最终的值

reduceRight()：从数组的最后一项开始遍历到第一项，返回一个最终的值

toLocaleString()、toString()：将数组转换为字符串

entries()、keys()、values()：遍历数组

欢迎补充…

各个方法的基本功能详解

1、join()

join()方法用于把数组中的所有元素转换一个字符串，默认使用逗号作为分隔符

var arr1 = [1,2,3];

console.log(arr1.join());   // 1,2,3

console.log(arr.join('-'));   // 1-2-3

console.log(arr);   // [1,2,3](原数组不变)

2、push()和pop()

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

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

var arr1 = ['lily','lucy','Tom'];

var count = arr1.push('Jack','Sean');

console.log(count);   // 5

console.log(arr1);   // ['lily','lucy','Tom','Jack','Sean']

var item = arr1.pop();

console.log(item);   // Sean

console.log(arr1);   // ['lily','lucy','Tom','Jack']

3、unshift()和shift()

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

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

var arr1 = ['lily','lucy','Tom'];

var count = arr1.unshift('Jack','Sean');

console.log(count);   // 5

console.log(arr1);   // ['Jack','Sean','lily','lucy','Tom']

var item = arr1.shift();

console.log(item);   // Jack

console.log(arr1);   // [''Sean','lily','lucy','Tom']

4、sort()

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

var arr1 = ['a','d','c','b'];

console.log(arr1.sort());   // ['a','b','c','d']

function compare(value1,value2){

     if(value1 < value2){

          return -1;

     }else if(value1 > value2){

          return 1;

     }else{

          return 0;

     }

}

var arr2 = [13,24,51,3];

console.log(arr2.sort(compare));   // [3,13,24,51]

// 如果需要通过比较函数产生降序排序的结果，只要交后比较函数返回的值即可

5、reverse()

用于颠倒数组中元素的顺序，原数组改变

var arr1 = [13,24,51,3];

console.log(arr1.reverse());   // [3,51,24,13]

console.log(arr1);   // [3,51,24,13](原数组改变)

6、concat()

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

var arr1 = [1,3,5,7];

var arrCopy = arr1.concat(9,[11,13]);

console.log(arrCopy);   // [1,3,5,7,9,11,13]

console.log(arr1);   // [1,3,5,7](原数组未被修改)

7、slice()

返回从原数组中指定开始下标到结束下标之间的项组成的新数组，可以接受一或两个参数，即要返回项的起始和结束位置(不包括结束位置的项)

 用法：array.slice(start,end)

 解释：该方法是对数组进行部分截取，并返回一个数组副本；参数start是截取的开始数组索引，end参数等于你要取的最后一个字符的位置值加上1（可选）

var arr1 = [1,3,5,7,9,11];

var arrCopy = arr1.slice(1);

var arrCopy2 = arr1.slice(1,4);

var arrCopy3 = arr1.slice(1,-2);   // 相当于arr1.slice(1,4);

var arrCopy4 = arr1.slice(-4,-1);   // 相当于arr1.slice(2,5);

console.log(arr1);   // [1,3,5,7,9,11](原数组没变)

console.log(arrCopy);   // [3,5,7,9,11]

console.log(arrCopy2);   // [3,5,7]

console.log(arrCopy3);   // [3,5,7]

console.log(arrCopy4);   // [5,7,9]

//如果不传入参数二，那么将从参数一的索引位置开始截取，一直到数组尾

var a=[1,2,3,4,5,6];

var b=a.slice(0,3);    //[1,2,3]

var c=a.slice(3);       //[4,5,6]

//如果两个参数中的任何一个是负数，array.length会和它们相加，试图让它们成为非负数，举例说明：

//当只传入一个参数，且是负数时，length会与参数相加，然后再截取

var a=[1,2,3,4,5,6];

var b=a.slice(-1);    //[6]

//当只传入一个参数，是负数时,并且参数的绝对值大于数组length时，会截取整个数组

var a=[1,2,3,4,5,6];

var b=a.slice(-6);    //[1,2,3,4,5,6]

var c=a.slice(-8);    //[1,2,3,4,5,6]

//当传入两个参数一正一负时，length也会先于负数相加后，再截取

var a=[1,2,3,4,5,6];

var b=a.slice(2,-3);    //[3]

//当传入一个参数，大于length时，将返回一个空数组

var a=[1,2,3,4,5,6];

var b=a.slice(6);　　//[]

8、splice()

可以实现删除、插入和替换

用法：array.splice(start,deleteCount,item...)

解释：splice方法从array中移除一个或多个数组，并用新的item替换它们。参数start是从数组array中移除元素的开始位置。参数deleteCount是要移除的元素的个数。

如果有额外的参数，那么item会插入到被移除元素的位置上。它返回一个包含被移除元素的数组。

//替换

var a=['a','b','c'];

var b=a.splice(1,1,'e','f');    //a=['a','e','f','c'],b=['b']

//删除

var arr1 = [1,3,5,7,9,11];

var arrRemoved = arr1.splice(0,2);

console.log(arr1);   // [5,7,9,11]

console.log(arrRemoved);   // [1,3]

// 添加元素

var arr1 = [22,3,31,12];

arr1.splice(1,0,12,35);

console.log(arr1);   // [22,12,35,3,31,12]

9、forEach()

forEach方法中的function回调有三个参数：

第一个参数是遍历的数组内容，

第二个参数是对应的数组索引，

第三个参数是数组本身

var arr = [1,2,3,4];

var sum =0;

arr.forEach(function(value,index,array){

 array[index] == value; //结果为true

 sum+=value; 

 });

console.log(sum); //结果为 10

10、map()

返回一个新数组，会按照原始数组元素顺序依次处理元素

let array = [1, 2, 3, 4, 5];

let newArray = array.map((item) => {

    return item * item;

})

console.log(newArray)  // [1, 4, 9, 16, 25]

11、every()

判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true

var arr1 = [1,2,3,4,5];

var arr2 = arr1.every.every(x => {

     return x < 10;

});

console.log(arr2);   // true

var arr3 = arr1.every(x => {

     return x < 3;

});

console.log(arr3);   // false

12、some()

判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true

var arr1 = [1,2,3,4,5];

var arr2 = arr1.some(x => {

     return x < 3;

});

console.log(arr2);   // true

var arr3 = arr1.some(x => {

     return x < 1;

});

console.log(arr3);   // false

13、includes()

es7新增，用来判断一个数组、字符串是否包含一个指定的值，使用===运算符来进行值比较，如果是返回true，否则false，参数有两个，第一个是(必填)需要查找的元素值，第二个是(可选)开始查找元素的位置

var arr1 = [22,3,31,12,58];

var includes = arr1.includes(31);

console.log(includes);   // true

var includes2 = arr1.includes(31,3);   // 从索引3开始查找31是否存在

console.log(includes2);   // false

14、reduce()和reduceRight()

都会实现迭代数组的所有项(即累加器)，然后构建一个最终返回的值

reduce()方法从数组的第一项开始，逐个遍历到最后

reduceRight()方法从数组的最后一项开始。向前遍历到第一项

4个参数：前一个值、当前值、项的索引和数组对象

var arr1 = [1,2,3,4,5];

var sum = arr1.reduce((prev,cur,index,array) => {

     return prev + cur;

},10);   // 数组一开始加了一个初始值10，可以不设默认0

console.log(sum);   // 25

15、toLocaleString()和toString()

都是将数组转换为字符串

var arr1 = [22,3,31,12];

let str = arr1.toLocaleString();

var str2 = arr1.toString();

console.log(str);   // 22,3,31,12

console.log(str2);   // 22,3,31,12

16、find()和findIndex()

都接受两个参数：一个回调函数，一个可选值用于指定回调函数内部的this

该回调函数可接受3个参数：数组的某个元素、该元素对应的索引位置、数组本身，在回调函数第一次返回true时停止查找。

二者的区别是：find()方法返回匹配的值，而findIndex()方法返回匹配位置的索引

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

let num = arr.find(item => item > 1);

console.log(num) // 2

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

let num = arr.findIndex(item => item > 1);

console.log(num) // 1

17、entries()、keys()和values()

es6新增

entries()、keys()和values()--用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历

区别是keys()是对键名的遍历、values()是对键值的遍历、entries()是对键值对的遍历

for(let index of [a,b].keys()){

     console.log(index);

}

// 0

// 1

for(let elem of [a,b].values()){

     console.log(elem);

}

// a

// b

for(let [index,elem] of [a,b].entries()){

     console.log(index,elem);

}

// 0 'a'

// 1 'b'

如果不使用for…of循环，可以手动调用遍历器对象的next方法，进行遍历

let arr1 = [a,b,c];

let entries = arrr1.entries();

console.log(entries.next().value);   // [0,a]

console.log(entries.next().value);   // [1,b]

console.log(entries.next().value);   // [2,c]

18、indexOf()

indexof方法可以在字符串和数组上使用。

indexOf() 方法可返回某个指定的字符串值在字符串、数组中首次出现的位置。

    arr = ['mfg', '2017', '2016'];

    console.log(arr.indexOf('mfg')); // 0

    console.log(arr.indexOf('m')); // -1

    console.log(arr.indexOf('2017'));// 1

    console.log(arr.indexOf(2017)); // -1，这里不会做隐式类型转换

✅  扫码免费获取IT基础课程 · IT技术干货 · 答疑解惑 · 职业测评