数组的常用方法详解

62 阅读6分钟

1.使用数组字面量方法

let arr = new Array();  // 创建一个空数组
let arr1 = new Array(10);     // 创建一个包含10项的数组

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

let arr1 = Array.of(1,2);  //[1,2]
let arr2 = Array.of(3); //[3]

3.Array.from方法数组去重

 let list = ['你是最棒的', 8, 8, 1, 1, 2, 2,5, 6, 7, 8, '你是最棒的',]
  Array.from(new Set(list)) //['你是最棒的', 8, 1,2,5, 6, 7, ]

4.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](原数组不变)

5.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']

6.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']

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

默认情况下是将数组元素转换成字符串,然后按照ASC码进行排序
排序顺序可以是字母或数字,并按升序或降序,默认排序顺序为按字母升序

arrayObject.sort(sortby);参数sortby可选。规定排序顺序,必须是函数。

var arr1 = ['a','d','c','b'];
console.log(arr1.sort());   // ['a','b','c','d'] 排序了

let arr = [23,12,1,34,116,8,18,37,56,50]
a.sort()
console.log(a) // [1, 116, 12, 18, 23, 34, 37, 50, 56, 8] 没有排序


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]

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

// arr2的可以简化
var arr2 = [13,24,51,3];
console.log(arr2.sort((a, b) => (a - b))); // [3,13,24,51]

8.reverse()用于颠倒数组中元素的顺序,原数组改变

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

9.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](原数组未被修改)

10.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);  //[]

11.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

12.map()

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

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

let newArray = array.map((item) => {
    return item * item;
})

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

13.every()

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

var arr1 = [1,2,3,4,5];
var arr2 = arr1.every(x => {
     return x < 10;
});
console.log(arr2);   // true

var arr3 = arr1.every(x => {
     return x < 3;
});
console.log(arr3);   // false

14.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

15.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

16.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

17.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

18.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]

19.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,这里不会做隐式类型转换
    
	const arr = ['111', '222', '333', 'NaN']
	console.log(arr.indexOf(NaN)) // -1

20.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

var includes3 = arr1.includes(31,-1);   // 从最后一个开始向后查找31是否存在
console.log(includes3);   // false

const arr = ['111', '222', '333', 'NaN']
console.log(arr.includes(NaN)) // true
console.log(arr.includes(111)) // false 不做隐式转换