js之旅（四）js中的数组

一、数组遍历

1.1 for循环

常规的数组循环方法，用法如下：

var a = [1, 2, 3, 4];
var length = a.length;
for(var i = 0; i < length; i++){
	console.log(a[i]);
}  

1.2 forEach循环

var a = [1, 2, 3, 4];
a.forEach((v, k) => {
	console.log("v: " + v + " k: " + k);
});

1.3 for of遍历

var a = [1, 2, 3, 4];
for(var v of a){
	console.log(v);
}

1.4 for in

var a = [1, 2, 3, 4];
for(var k in a){
	console.log(a[k]);
}

二、数组删除元素

js中使用splice(index, length, [target])方法实现对数组元素的删除，修改，添加，其中index为数组元素的下标，length为长度，target为要替换的元素。

2.1 删除元素

var a = [1, 2, 3, 4];
a.splice(1, 2);
console.log(a);//(2) [1, 4]

2.2 替换元素

var a = [1, 2, 3, 4];
a.splice(1, 1, "test");
console.log(a);// (4) [1, "test", 3, 4]
a.splice(2, 2, "test2");
console.log(a);//(3) [1, "test", "test2"]

2.3 添加元素

var a = [1, 2, 3, 4];
a.splice(1, 0, "test");
console.log(a);//(5) [1, "test", 2, 3, 4]

三、数组过滤

js中常见的数组过滤的方法有map()， find(), filter(), some()， every()

3.1 map()

map()并不会改变原数组，它将return的值构造成一个新的数组返回。

var a= [1, 2, 3, 4];
var b = a.map((v, k) => {
	console.log("v: " + v + " k:" + k);
	return v + 1;
});
console.log(a);//(4) [1, 2, 3, 4]
console.log(b);//(4) [2, 3, 4, 5]

3.2 find()

find()方法返回数组中符合测试函数条件的第一个元素。否则返回undefined

var a = [1, 2, 3, 4];
var b = a.find((v, k) => {
	console.log("v: " + v + " k:" + k);
	return v > 2;
});
console.log(a);//(4) [1, 2, 3, 4]
console.log(b);//3

3.3 filter()

filter()与find()不同的是filter将所有符合条件的元素构成一个新的数组。

var a = [1, 2, 3, 4];
var b = a.filter((v, k) => {
	console.log("v: " + v + " k:" + k);
	return v > 2;
});
console.log(a);//(4) [1, 2, 3, 4]
console.log(b);//(2) [3, 4]

3.4 some()

some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。

var a = [1, 2, 3, 4];
var b =  a.some((v, k) => {
	console.log("v: " + v + " k:" + k);
	return v > 2;
});
console.log(a);//(4) [1, 2, 3, 4]
console.log(b);//true

3.5 every()

与some()不同，every()是对数组中每一项运行指定函数，如果该函数对所有项都返回true，则返回true，有任意一项返回false，则为false

var a = [1, 2, 3, 4];
var b =  a.every((v, k) => {
	console.log("v: " + v + " k:" + k);
	return v > 2;
});
console.log(a);//(4) [1, 2, 3, 4]
console.log(b);//false

四、数组反转

用reverse()方法实现对数组的反转，返回反转后的数组，并且原数组也发生改变

var a = [1, 2, 3, 4];
var b = a.reverse();
console.log(a);//(4) [4, 3, 2, 1]
console.log(b);//(4) [4, 3, 2, 1]

五、数组拼接

常用的数组拼接的方法有两种，一种是使用concat()方法，一种是使用es6中点语法扩展运算符

5.1 concat()

concat()方法并不会对原来的数组造成改变，会将拼接后的数组返回

var a = [1, 2];
var b = [3, 4];
var c = a.concat(b);
console.log(a);//(2) [1, 2]
console.log(b);//(2) [3, 4]
console.log(c);//(4) [1, 2, 3, 4]

5.2 es6点语法

var a = [1, 2];
var b = [3, 4];
a.push(...b);
console.log(a);//(4) [1, 2, 3, 4]
console.log(b);//(2) [3, 4]

六、数组提取

利用slice(start, end)可以实现对数组的截取，返回start开始，end结束（不包含end）的数组元素作为一个新的数组，并不会改变原来的数组。

• start： 从该索引处开始提取原数组中的元素,如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取， slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。如果省略 start，则 slice 从索引 0 开始。
• end：在该索引处结束提取原数组元素（从0开始）。 slice 会提取原数组中索引从 start 到 end 的所有元素（包含start，但不包含end）。
  slice(1,4) 提取原数组中的第二个元素开始直到第四个元素的所有元素 （索引为 1, 2, 3的元素）。
  如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
  如果 end 被省略，则 slice 会一直提取到原数组末尾。如果 end 大于数组长度， slice 也会一直提取到原数组末尾。

用法如下：

var a = [1, 2, 3, 5];
var b = a.slice(1, 2);
var c = a.slice(); // 不传参数
var d = a.slice(-2, -1);
console.log(a);//(4) [1, 2, 3, 5]
console.log(b);//[2]
console.log(c);//(4) [1, 2, 3, 5] 
console.log(d); // [3]

七、数组转为字符串

JSON.stringify()方法可以将数组转化为一个字符串（不仅仅是组数，其它对象也可以被转化为json字符串）：

var a = [1, 2, 3, 4];
console.log(JSON.stringify(a));//[1,2,3,4]
console.log(a.join(",")); //1,2,3,4

八、字符串转为数组

JSON.parse()方法将字符串数组转化为数组对象：

var a = "[1,2,3,4]";
console.log(JSON.parse(a));//(4) [1, 2, 3, 4]

九、判断数组是否包含某个元素

9.1 for，every，some，find

可以利用for，every，some，find来判断数组中是否包含某个元素，这里不再细说。

9.2 indexOf

indexOf(item, start)，用来判断数组中是否包含item元素，从start位置开始查询（0<= start <= length-1），如果有就返回item元素第一次出现的位置，若果没有就返回-1：

var a = [1, 2, 3, 4, 3];
console.log(a.indexOf(3));//2
console.log(a.indexOf(3, 2));//2
console.log(a.indexOf(3, 3));//3

9.3 includes

indcludes是es6的方法，判断数组是否包含某个元素

var a = [1, 2, 3, 4, 3];
console.log(a.includes(3)); // true
console.log(a.includes(5)); // false

十、利用数组模仿栈

利用push()，向数组的尾部添加一个元素，利用pop()，删除数组的最后一个元素：

var a = [1, 2, 3, 4];
a.push(5);
console.log(a);//(5) [1, 2, 3, 4, 5]
a.pop();
console.log(a);//(4) [1, 2, 3, 4]

十一、利用数组模仿队列

利用push()，向数组的尾部添加一个元素，利用shift()，删除数组的第一个元素：

var a = [1, 2, 3, 4];
a.push(5);
console.log(a);//(5) [1, 2, 3, 4, 5]
a.shift();
console.log(a);//(4) [2, 3, 4, 5]

unshift()方法可以在数组头部添加一个元素：

var a = [1, 2, 3, 4];
a.unshift(5);
console.log(a);//(5) [1, 2, 3, 4, 5]

十二、Array对象

12.1 Array.from

from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组；如果对象是数组返回 true，否则返回 false。

Array.from(object, mapFunction, thisValue)

参数	描述
object	必需，要转换为数组的对象。
mapFunction	可选，数组中每个元素要调用的函数。
thisValue	可选，映射函数(mapFunction)中的 this 对象。

12.2 fill

fill() 方法用于将一个固定值替换数组的元素。

array.fill(value, start, end)

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

12.3 初始化一个二维数组

let sLen = 5;
let arr = Array.from(new Array(sLen),() => new Array(sLen).fill(false));

12.4 sort

sort() 方法以字母顺序对数组进行排序

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); // [ "Apple", "Banana", "Mango", "Orange" ]

数字排序

默认地，sort() 函数按照字符串顺序对值进行排序。

该函数很适合字符串（“Apple” 会排在 “Banana” 之前）。

不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。

正因如此，sort() 方法在对数值排序时会产生不正确的结果。

我们通过一个比值函数来修正此问题：

var points = [40, 100, 1, 5, 25, 10];
points.sort((a, b) => a - b);  // [ 1, 5, 10, 25, 40, 100 ]
points.sort((a, b) => b - a); // [ 100, 40, 25, 10, 5, 1 ]