javaScript中常用数组api总结

数组在开发过程中占据了重要的角色，今天我主要通过4个部分来总结一下，开发过程中常用的到的一些api

一、数组的构造器

二、改变自身的方法

三、不改变自身的方法

四、遍历的数组

一、数组构造器

1、Array 构造器

Array 构造器用于创建一个新的数组。通常，我们可以使用对象字面量的方式创建一个数组，例如 var a = [] 就是一个比较好的写法。但是，总有对象字面量表述乏力的时候，比如，我想创建一个长度为 6 的空数组，用对象字面量的方式是无法创建的，因此只能写成下述代码这样。

// 使用 Array 构造器，可以自定义长度
var a = Array(5); // [empty× 5]
// 使用对象字面量
var b = [];
b.length = 6; // [empty× 6]

Array构造器根据参数长度的不同，有如下两种不同的处理方式：

• new Array(arg1, arg2,…)，参数长度为 0 或长度大于等于 2 时，传入的参数将按照顺序依次成为新数组的第 0 至第 N 项（参数长度为 0 时，返回空数组）；

• new Array(len)，当 len 不是数值时，处理同上，返回一个只包含 len 元素一项的数组；当 len 为数值时， 创建一个长度为len的空数组，len 最大不能超过 32 位无符号整型，即需要小于 2 的 32 次方（len 最大为 Math.pow(2,32)），否则将抛出 RangeError

2、Array.of

Array.of 用于将参数依次转化为数组中的一项，然后返回这个新数组，而不考虑参数的数量或型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个长度为7的空数组
注意：这是指一个有7个空位(empty)的数组，而不是由7个undefined组成的数组。

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.from

Array.from() 方法从一个类似数组或可迭代对象创建一个新的数组实例。

//字符串方式
var a = Array.from('foo') //['f','o','o']
//箭头函数
var b = Array.from([1, 2, 3], x => x + x) // [2,4,6]
//set生成数组
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set); // [ "foo", "bar", "baz" ]
//map生成数组
const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

//类数组对象（arguments）生成数组
function f() {
    return Array.from(arguments);
}

f(1, 2, 3);// [ 1, 2, 3 ]

详细了解array.of和array.form请查看阮一峰教程

二、改变自身的方法

下面总共总结了7个方法
接下来我们看一段代码，快速了解这些方法最基本的用法。

1、pop()方法:删除数组最后一个元素，并返回删除的值，若是操作空数组，返回undefined。改变原数组。

var arr1 = ["one", "two", "three", "four", "five"];
var pop_arr = array.pop();
console.log(arr1); // ["one", "two", "three", "four"]
console.log(pop_arr); // five

2、push()方法:向数组末尾添加一个或多个元素，返回数组长度。直接修改原数组。

var arr2 = ["小明", "小张",  "小李"];
var length = array.push("小王");
console.log(arr2); // ["小明", "小张",  "小李","小王"]
console.log(length); // 4

3、shift()方法:删除数组第一个元素，返回删除项，改变始数组。

var arr3 = [1,2,3,4,5];
var shift_arr = array.shift();
console.log(arr3); // [2,3,4,5]
console.log(shift_arr); // 1

4、unshift()方法:在数组开头添加一或多个元素，并返回新的长度。改变原数组，不产生新数组。

var arr4 = ["red", "green", "blue"];
var length = arr4.unshift("yellow");
console.log(arr4); // ["yellow", "red", "green", "blue"]
console.log(length); // 4

5、reverse()方法 颠倒数组元素顺序，改变原始数组，不会创建新数组。

var arr5 = [1,2,3,4,5];
var arr6 = arr5.reverse();
console.log(arr6); // [5,4,3,2,1]
console.log(arr6===arr5); // true

6、sort()方法 对现有数组进行排序，改变原始数组

var arr7 = ["98","76","54","100","60"];
var arr8 = arr7.sort();
console.log(arr8); // ["54", "60", "76", "98","100"]
console.log(arr8 == arr7); // true

7、splice()方法 从数组中添加/删除元素，返回被删除项，注意：这个操作会改变原始数组。 参数有三个，一个是起始位置，第二个是删除，插入的项数，第三个是要插入的项

var arr9 = ["apple","banner","orange","pair"];
var splices = arr9.splice(1,1);
console.log(arr9); // ["apple",,"orange","pair"]  他改变了原来的数组
console.log(splices); // ["banner"]  返回了要删除的项

var arr10 = [1,2,3,4,5,6];//插入任意的数量项
console.log(arr10.splice(6,0,7,8,9))//[]
console.log(arr10)//[1, 2, 3, 4, 5, 6, 7, 8, 9]

var arr11 = [1,2,3,4,5,6];//向指定位置插入任意数量的项，并删掉任意数量的项
console.log(arr11.splice(1,2,7,8))//[2, 3]
console.log(arr11)//[1, 7, 8, 4, 5, 6]

tips：

• 所有插入元素的方法，比如 push、unshift 一律返回数组新的长度；
• 所有删除元素的方法，比如 pop、shift、splice 一律返回删除的元素，或者返回删除的多个元素组成的数组；

三、不改变自身的方法

不会改变自身的方法有 8 个，分别为 concat、join、slice、toString、toLocateString、indexOf、lastIndexOf、 includes。

1、concat() 合并数组或元素，返回新的数组,原数组不会改变

var arr = [1, 2, 3];
var newArr = arr.concat(4,[5,6],[7,8,9]);
console.log(newArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr); // [1, 2, 3], 原数组并未被修改

2、join() 对数组元素以指定的分隔符进行分隔，参数为空，默认以“，”进行分隔。返回值是分隔后形成的字符串

var arr2 = [1,2,3,4,5];
console.log(arr2.join()); // "1,2,3,4,5"
console.log(arr2.join('+')); // "1+2+3+4+5"
//如果连接符为空字符串，则会无缝连接
console.log(arr2.join(""));//输出为12345；

3、slice() 从数组提取指定元素

//语法：arrayObject.slice(start,end)
//1.截取开始的位置的索引，包含开始索引
//2.截取结束的位置的索引，不包含结束索引
//- 第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
var arr3 = ["one", "two", "three","four", "five"];
console.log(arr3.slice()); // ["one", "two", "three","four", "five"]
console.log(arr3.slice(2,3)); // ["three"]

4、toString() 将数组转化为字符串

var arr4 = ['Jan', 'Feb', 'Mar', 'Apr'];
var str = arr4.toString();
console.log(str); // Jan,Feb,Mar,Apr

5、tolocalString() 返回一个由所有数组元素组合而成的本地化后的字符串

var arr5= [{name:'liting'}, 123, "abc"];
var str = arr5.toLocaleString();
console.log(str); // [object Object],123,abc

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

var arr6 = ['abc', 'def', 'ghi','123'];
console.log(arr6.indexOf('def')); // 1

7、lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置

var arr7 = [1，40，23，45，90，3，1，23];
console.log(arr7.indexOf(‘23)); // 7

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

var arr7 = [-0, 1, 2];
console.log(arr8.includes(+0)); // true
console.log(arr8.includes(3)); // false
var arr9= [NaN];
console.log(arr9.includes(NaN)); // true

四、遍历的数组

不会改变自身的遍历方法一共有 12 个，分别为 forEach、every、some、filter、map、reduce、reduceRight、 entries、find、findIndex、keys、values。

1、forEach方法 对数组的每个元素执行一次提供的函数。没有办法中止或者跳出 forEach 循环，除了抛出一个异常。

var arr1 = [1, 3, 5];
arr1.forEach((val,index)=>{
    console.log(index + val)
})

2、every方法 如果数组中的每个元素都满足测试函数，则返回 true，否则返回 false。

//数组中的值是否都大于100
var arr2 = [19,34,2,58,79]
var bool = arr2.every(val=>val>100)
console.log(bool); // false

3、some方法 如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false

//数组中的值有大于20的吗
var arr3 = [18, 9, 10, 35, 80];
var isExist = arr3.some(value=>value > 20);
console.log(isExist); // true 

4、map 方法 返回一个由回调函数的返回值组成的新数组。

//给数组的每项都加一
var arr4 = [18, 9, 10, 35, 80];
arr5 = arr4.map(item => item + 1);
console.log(arr4); // [18, 9, 10, 35, 80];
console.log(arr5);  // [19, 10, 11, 36, 81]

5、filter 方法 将所有在过滤函数中返回 true 的数组元素放进一个新数组中并返回。

//返回数组中的值大于20
var arr6 = [18, 9, 10, 35, 80];
var arr7 = arr5.filter(value=>value > 20);
console.log(arr7); // [35, 80]

6、reduce方法 从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值

var arr8 = [1, 2, 3, 4];
var s = arr8.reduce(function(previousValue, value, index, array){
  return previousValue * value;
},1);
console.log(s); // 24
// ES6写法更加简洁 
arr8.reduce((p, v) => p * v);

7、reduceRight方法 (和reduce的区别就是从后往前累计) 从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值

var arr9 = [1, 2, 3, 4];
arr9.reduceRight((p, v) => p * v); // 24

8、entries方法 对键值对的遍历。

for (let [index, elem] of ['a', 'b'].entries()) {
    console.log(index, elem);
}
// 0 "a"
// 1 "b"
  
// 不使用for...of循环，可以手动调用遍历器对象的next方法，进行遍历。
var letter = ["a", "b", "c"];
var iterator = letter.entries();
console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value); // [1, "b"]
console.log(iterator.next().value); // [2, "c"]
console.log(iterator.next().value); // undefined, 迭代器处于数组末尾时, 再迭代就会返回undefined

9、find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

// 找出数组中第一个小于 0 的成员。
var arr10 = [1, 4, -5, 8]
var str = arr10.find((n) => n < 0);
console.log(str)// -5

10、findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1

// 找出数组中第一个小于 0 的成员索引。
var index = arr10.findIndex((n) => n < 0);   
console.log(index)// 2

11、keys方法 是对键名的遍历

for (let index of ['a', 'b'].keys()) {
    console.log(index);
}
// 0
// 1

var arr11 = [...Array(10).keys()];     // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
var arr12 = [...new Array(10).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr11)
console.log(arr12)

12、values方法 是对键值的遍历

for (let elem of ['a', 'b'].values()) {
    console.log(elem);
}
// 'a'
// 'b'

var arr13 = ["abc", "xyz"];
var iterator = arr13.values();
console.log(iterator.next().value);//abc
console.log(iterator.next().value);//xyz

遍历方法总结

• 不会返回处理之后的数组，forEach；
• 返回处理之后的数组，比如 filter，map；
• 返回布尔值 every，some；
• forEach、every、some、filter、map、find、findIndex，它们都包含 function(value,index,array){} 两个形参。