javascript中的数组详解

文章共2k个字 读完大约需要8分钟

数组基础

基本概念

JavaScript中的数组是值的有序集合,每一个值称为一个元素,而每个元素在数组中都有自己对应的位置,以数字表示,称为索引。javascript中数组的值是无类型的,它甚至可以是数组本身,数组搭配数组或者数组搭配对象可以组成复杂的数据结构。

创建数组

1
2
3
4
5
6
// 字面量创建
let ary = [...];
// 实例创建
let ary = new Array();
// 可以指定一个参数代表数据的长度,但是所有的元素都为空
let ary = new Array(10);

数组的length属性

length属性是数组区别于其他对象的重要属性,length代表数组中元素的个数,最小为0。

数组方法

数组操作(转化,拼接,截取,删除,添加…)

  • join()方法将数组转化为字符串,以括号里的参数分割,默认是逗号,返回最后生成的字符串,不会影响原数组。join()方法是String.split()方法的逆向操作,后者是将字符串分割成若干块来组成一个数组。
1
2
3
4
5
6
7
8
let ary = [1, 2, {test: 'hello', test1: 'world'}];
let ary1 = ary.join();
let ary2 = ary.join(' ');
console.log(ary,ary1,ary2);

//[ 1, 2, { test: 'hello', test1: 'world' }]
// 1,2,[object Object]
// 1 2 [object Object]
  • concat()方法用于数组拼接,返回一个原数组和参数组成的新数组,不会改变原数组,不能扁平化数组,也不能给数组降维。
1
2
3
4
5
6
7
8
9
10
let ary = [1, 3, 5];
console.log(ary.concat(0, 9));
console.log(ary.concat([0, 9]));
console.log(ary.concat([0, 9, [2]]));
console.log(ary);

// [ 1, 3, 5, 0, 9 ]
// [ 1, 3, 5, 0, 9 ]
// [ 1, 3, 5, 0, 9, [ 2 ] ]
// [ 1, 3, 5 ]
  • slice()方法返回指定数组的一个片段或子数组。一个参数的时候返回从当前位置到数组末尾,两个参数的时候返回从起始位置到结束位置(不包含)的片段,负数从末尾开始,当传入的参数后面大于前面的时候,返回空数组,不会修改原数组。
1
2
3
4
5
6
7
8
9
10
11
12
let ary = [1, 3, 5, 2, 6, 7];
console.log(ary.slice(1));
console.log(ary.slice(1, 4));
console.log(ary.slice(-4, -1));
console.log(ary.slice(4, 1));
console.log(ary);

// [ 3, 5, 2, 6, 7 ]
// [ 3, 5, 2 ]
// [ 5, 2, 6 ]
// []
// [ 1, 3, 5, 2, 6, 7 ]
  • splice()方法用于在数组中插入或者删除元素,返回被删除的元素或者空数组。第一个参数指定了起始位置,第二个参数指定了删除的元素个数,第三个元素之后指定了要插入的元素,splice()方法会修改原数组。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let ary = [1, 3, 5, 2, 6, 7];
console.log(ary.splice());
// []
// [ 1, 3, 5, 2, 6, 7 ]

console.log(ary.splice(1));
// [ 3, 5, 2, 6, 7 ]
// [ 1 ]

console.log(ary.splice(1,2));
// [ 3, 5 ]
// [ 1, 2, 6, 7 ]

console.log(ary.splice(1,2,'a',[1,2]));
// [ 3, 5 ]
// [ 1, 'a', [ 1, 2 ], 2, 6, 7 ]

console.log(ary);
  • pop()方法删除数组末尾一项,返回值是被删除项,改变原数组。
  • push()方法在数组末尾添加一项或者多项,返回新数组的length,改变原数组。
  • shift()方法删除数组第一项,返回值是被删除项,改变原数组。
  • unshift()方法向数组添加一项或者多项,返回新数组的length,改变原数组。
  • toString()toLacaleString()方法将数组转化为字符串,返回被转化后的数组,以逗号分隔,会忽略其他符号,不会改变原数组。

数组排序

  • reverse()方法将数组倒序,返回倒序后的数组,影响原数组。
1
2
3
4
5
6
let ary = [1, 5, 6, 8, 11, 'a'];
let ary1 = ary.reverse();
console.log(ary, ary1);

// [ 'a', 11, 8, 6, 5, 1 ]
//[ 'a', 11, 8, 6, 5, 1 ]
  • sort()方法将数组中的元素排序并且返回排序后的数组,原数组改变。
1
2
3
4
5
6
7
8
9
10
11
12
13
14

let ary = [11, 15, 6, 8, 11, 'a'];

// 默认按字母表顺序排序
let ary1 = ary.sort();

let ary2 = ary.sort(function (a, b) {
// 正序
return a - b;
});
let ary3 = ary.sort(function (a, b) {
// 倒序
return b - a;
});

数组遍历

  • forEach()方法遍历数组,为数组每一项调用指定的函数,第一个参数是数组的每一项,第二个参数是索引,第三个参数是数组本身。没有返回值
  • map()方法和forEach()方法大致相同,唯一的区别是有返回一个新数组包含该函数的返回值,不会修改原数组。
1
2
3
4
5
6
7
8
9
10
11
let ary = [1, 'a', 5, 2, '6', [7]];
let arr = ary.forEach(function callBack(item, index, ary) {
return item;
});

let aaa = ary.map(function (item,index,ary) {
return item;
});
console.log(arr,aaa);

// undefined [ 0, 1, 2, 3, 4, 5 ]
  • filter()方法用来筛选符合某些条件的数组元素项,返回一个数组,传递的函数是用来逻辑判断的,返回true或者false。不会改变原数组。
1
2
3
4
5
6
7
let ary = [1, 4, 5, 2, '6', [7]];
let arr = ary.filter(item => {
return item > 3
});
console.log(ary,arr);

// [ 1, 4, 5, 2, '6', [ 7 ] ] [ 4, 5, '6', [ 7 ] ]
  • every()some()是数组的逻辑判定,它们对数组元素应用指定的函数进行判定,返回true或者false.every()针对数组中的所有元素,只有当数组中的所有元素都符合逻辑判定,才会返回truesome()是只要数组中有一个元素符合,就返回true
  • reduce()reduceRight()方法待详细。
  • indexOf()lastIndexOf()方法用来寻找给定值在数组中的位置,找到返回第一次找到该元素的索引,找不到返回-1。indexOf()从前往后找,lastIndexOf()从后往前。

ES6中新增方法

  • Array.from()方法用于将两类对象转为真正的数组
  • Array.of方法用于将一组值,转换为数组。
  • copyWithin()在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。修改当前数组。
1
2
3
4
Array.prototype.copyWithin(target, start = 0, end = this.length);

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
  • find()方法用于找出符合条件的数组成员,参数是一个回调函数,所有数组成员以此执行,找到为true的成员返回,找不到返回undefiend
  • findIndex()方法和find()方法类似,返回第一个为true成员的索引,找不到返回-1.
  • fill()方法使用给定值,填充一个数组。第一个参数是填充项,第二个参数是起始位置,第三个参数是结束位置(不包含).
1
2
['a', 'b', 'c','d'].fill(7,1,3);
// [ 'a', 7, 7, 'd' ]
  • entries()
  • keys()
  • values()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 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"
  • includes()方法用来判断该数组中是否存在某值,返回一个布尔值。
  • flat()方法用于给数组将维。参数代表想要将维的层数。如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。该方法返回一个新数组,对原数组没有影响。
1
2
3
4
5
6
7
8
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]
  • flatMap()方法对原数组的每个成员执行一个函数(相当于执行Array.prototype.map()),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。flatMap()只能展开一层数组,flatMap()方法的参数是一个遍历函数,该函数可以接受三个参数,分别是当前数组成员、当前数组成员的位置(从零开始)、原数组。flatMap()方法还可以有第二个参数,用来绑定遍历函数里面的this。
1
2
3
4
5
6
7
arr.flatMap(function callback(currentValue[, index[, array]]) {
// ...
}[, thisArg])

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

数组类型的检测

1
2
3
let isArray = Function.isArray || function(o) {
return typeof o === 'object' && Object.prototype.toString.call(o) === "[object Aaary]";
}

推荐文章

-->