创建数组

使用数组字面量方法

1
2
3
var arr1 = [];    
var arr2 = [20];   
var arr3 = ['lily','lucy','Tom'];

使用Array构造函数

1
2
3
var arr1 = new Array();   // 创建一个空数组
var arr2 = new Array(10);     // 创建一个包含10项的数组
var arr3 = new Array('lily','lucy','Tom');     // 传入非数值或大于一个参数，创建一个包含3个字符串的数组

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Array.from('foo'); // [ "f", "o", "o" ]

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set); // [ "foo", "bar", "baz" ]

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map); // [[1, 2], [2, 4], [4, 8]]
const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values()); // ['a', 'b'];
Array.from(mapper.keys()); // ['1', '2'];

function f() {
  return Array.from(arguments);
}
f(1, 2, 3); // [ 1, 2, 3 ]

在Array.from中还可以使用箭头函数

1
2
Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
Array.from({length: 5}, (v, i) => i); // [0, 1, 2, 3, 4]

利用这一原理，可以设计如下序列生成器：

1
2
3
4
5
6
7
8
9
10
11
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));

// Generate numbers range 0..4
range(0, 4, 1); // [0, 1, 2, 3, 4]

// Generate numbers range 1..10 with step of 2
range(1, 10, 2); // [1, 3, 5, 7, 9]

// Generate the alphabet using Array.from making use of it being ordered as a sequence
range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x));
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

数组方法

数组原型方法主要有以下这些：
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()：遍历数组
欢迎补充…
各个方法功能详解

join()

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

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

push()和pop()

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

1
2
3
4
5
6
7
8
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']

unshift()和shift()

unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度
shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值

1
2
3
4
5
6
7
8
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']

sort()

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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]

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

reverse()

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

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

concat()

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

1
2
3
4
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](原数组未被修改)

slice()

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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);　　//[]

splice()

可以实现删除、插入和替换
包含三个及以上参数：开始位置、删除数量、插入元素（插入到开始位置前）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//替换
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]

forEach()

遍历数组。需要一个函数作为参数。数组中有几个参数，函数就执行几次，每次执行，浏览器就会把遍历到的元素作为实参传回，我们可以定义形参接受实参。浏览器会传递三个参数：正在遍历的元素、index(可省略)和正在遍历的数组（可省略）。

1
2
3
4
5
6
7
8
9
10
11
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

map()

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

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

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

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

every()

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

1
2
3
4
5
6
7
8
9
10
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

some()

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

1
2
3
4
5
6
7
8
9
10
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

includes()

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

1
2
3
4
5
6
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

reduce()和reduceRight()

都会实现迭代数组的所有项(即累加器)，然后构建一个最终返回的值
reduce()方法从数组的第一项开始，逐个遍历到最后
reduceRight()方法从数组的最后一项开始。向前遍历到第一项
4个参数：前一个值、当前值、项的索引和数组对象

1
2
3
4
5
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

toLocaleString()和toString()

都是将数组转换为字符串

1
2
3
4
5
6
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

find()和findIndex()

都接受两个参数：一个回调函数，一个可选值用于指定回调函数内部的this
该回调函数可接受3个参数：数组的某个元素、该元素对应的索引位置、数组本身，在回调函数第一次返回true时停止查找。
二者的区别是：find()方法返回匹配的值，而findIndex()方法返回匹配位置的索引

1
2
3
4
5
6
7
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

entries()、keys()和values()

es6新增。entries()、keys()和values()–用于遍历数组。它们都返回一个遍历器对象，可以用for…of循环进行遍历
区别是keys()是对键名的遍历、values()是对键值的遍历、entries()是对键值对的遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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方法，进行遍历

1
2
3
4
5
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]

indexOf()

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

1
2
3
4
5
6
let 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，这里不会做隐式类型转换