Javascript基础之数组

简介

数组是编程语言中应用最广泛的存储结构,在 ECMAScript 中数组是非常常用的引用类型。很有必要将数组的内容捋一遍,加深印象。

数组属性

  • constructor 表示引用数组对象的构造函数
  • length 表示数组的长度,即其中元素的个数。注意在js中length属性是可变的,当设置一个数组的length值变大时,数组内容不会改变,仅仅是length更改,但当length设置小于实际数组的时候,则原数组中索引大于或等于length的元素的值全部被丢失。
  • prototype属性是object共有的,可以通过增加属性和方法扩展数组定义。

基本操作

一、创建方法

创建一个空数组

1
2
3
var arr = [];
var arr = new Array(); // 创建一个空数组
`

创建一个指定长度的数组

1
var arr = new Array(size) // size 表示数组的长度

创建一个指定元素的数组

1
var arr = new Array(1,2,3,4,5) //创建数组并赋值 [1,2,3,4,5]

二、检测方法

1、利用 instanceof 操作符

instanceof操作符是检测对象的原型链是否指向构造函数的prototype对象,

1
2
var arr =[1,2,3];
console.log(arr instanceof Array) // true

2、通过对象自身的 constructor 属性

1
2
var arr =[1,2,3];
console.log(arr.constructor === Array) // true

跨frame实例化对象带来的问题

constructorinstanceof 貌似很好的两个检测数组的方法,但实际上还是有些漏洞的,当你在多个frame中回来跳的时候,这两种方法就惨了。

由于每一个frame都有自己的一套执行环境,跨frame实例化的对象彼此并不共享原型链,通过 instanceof 操作符和 constructor 属性检测的方法自然会失败。

那么第三种方法就比较好了,如下

3、对象原生toString检测

Object.prototype.toString 的行为:首先,取得对象的一个内部属性 [[Class]],然后依据这个属性,返回一个类似于”[object Array]”的字符串作为结果(看过ECMA标准的应该都知道,[[]]用来表示语言内部用到的、外部不可直接访问的属性,称为“内部属性”)。利用这 个方法,再配合call,我们可以取得任何对象的内部属性[[Class]],然后把类型检测转化为字符串比较,以达到我们的目的。

1
2
var arr =[1,2,3];
console.log(Object.prototype.toString.call(arr) === '[object Array]'); //true

可以将判断方法封装一个函数

1
2
3
4
5
function isArray(obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
var arr =[1,2,3];
console.log(isArray(arr)); // true

4、ECMAScript 5的isArray函数

为了让数组检测更方便,ECMAScript5新增了Array.isArray()方法。该方法的目的是最终确定某个值到底是不是数组,而不管它在哪个全局环境中创建的。

注:此方法在IE8之前的版本是不支持的

1
2
var arr =[1,2,3];
console.log(Array.isArray(arr)); // true

ECM3方法

1、Array.prototype.join()

join() 方法将数组(或一个类数组对象)的所有元素连接到一个字符串中。此方法不会改变原数组。也就是说所有的数组元素被转换成字符串,再用一个分隔符将这些字符串连接起来。如果元素是undefined 或者null, 则会转化成空字符串。

arr.join(separator) 参数 separator

  • 指定一个字符串来分隔数组的每个元素
  • 如果省略(),数组元素用逗号分隔。默认为 “,”
  • 如果separator是空字符串(“”),则所有元素之间都没有任何字符
1
2
3
4
5
6
7
8
9
10
var arr = ['a1', 'b2', 'c3'];
var myArr1 = arr.join();
var myArr2 = arr.join(', ');
var myArr3 = arr.join(' + ');
var myArr4 = arr.join('');
console.log(myArr1); // a1,b2,c3
console.log(myArr2); // a1, b2, c3
console.log(myArr3); // a1 + b2 + c3
console.log(myArr4); // a1b2c3

2、Array.prototype.push()

push() 方法将一个或多个元素添加到数组的末尾,并返回数组的新长度。

添加元素:可以添加新的元素到数组

1
2
3
4
5
// 添加元素
var letter = ["a", "b"];
var total = letter.push("c","d");
console.log(total); // 4
console.log(letter); // ["a", "b", "c", "d"]

合并数组:可以使用 apply() 添加第二个数组的所有元素

1
2
3
4
5
6
7
8
9
// 合并数组
var arr1 = [1, 2];
var arr2 = ["a", "b"];
// 将第二个数组融合进第一个数组
// 相当于 arr1.push('a', 'b');
Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [1, 2, "a", "b"]

3、Array.prototype.pop()

pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

如果你在一个空数组上调用 pop(),它返回 undefined。

4、Array.prototype.unshift()

unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度。

1
2
3
4
5
6
7
8
9
10
var arr = [1, 2];
arr.unshift(0);
//arr is [0, 1, 2]
arr.unshift(-2, -1); // = 5
//arr is [-2, -1, 0, 1, 2]
arr.unshift( [-3] );
//arr is [[-3], -2, -1, 0, 1, 2]

5、Array.prototype.shift()

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

1
2
3
4
5
6
7
8
9
10
11
12
let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];
console.log('调用 shift 之前: ' + myFish);
// "调用 shift 之前: angel,clown,mandarin,surgeon"
var shifted = myFish.shift();
console.log('调用 shift 之后: ' + myFish);
// "调用 shift 之后: clown,mandarin,surgeon"
console.log('被删除的元素: ' + shifted);
// "被删除的元素: angel"

6、Array.prototype.sort()

sort(compareFunction) 方法在适当的位置对数组的元素进行排序,并返回数组。

sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

一般我们给sort带入个比较函数来替代原来的默认的比较方法,比较方法接受两个参数:

  • 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
  • 如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。
  • 如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。
  • compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
1
2
3
4
5
var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5]

7、Array.prototype.reverse()

reverse() 方法颠倒数组中元素的位置。第一个元素会成为最后一个,最后一个会成为第一个。

下例将会创建一个数组 myArray,其包含三个元素,然后颠倒该数组。

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

8、Array.prototype.concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

1
2
3
4
5
6
7
8
9
10
11
12
var arr1 = ["a", "b", "c"];
var arr2 = ["d", "e", "f"];
var arr3 = arr1.concat(arr2);
console.log(arr3);
// 返回结果是一个新数组
// [ "a", "b", "c", "d", "e", "f" ]
// 原数组没有改变
console.log(arr1); // ["a", "b", "c"]
console.log(arr2); // ["d", "e", "f"]

9、Array.prototype.slice()

slice(start, end) 方法将数组的一部分浅拷贝, 返回到从开始到结束(不包括结束)选择的新数组对象。原始数组不会被修改。

  • slice()
  • slice(start)
  • slice(start,end)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr = ['one','two','three','four'];
//如果不传参数,表示从数组0开始到到end(包含end)
var newArr1 = arr.slice();
console.log(newArr1) // ["one", "two", "three", "four"]
//如果省略 end,则表示从start开始到end(包含end)
var newArr2 = arr.slice(1);
console.log(newArr2) // ["two", "three", "four"]
//如果传人star、end,则表示从start到end不包含end
var newArr3 = arr.slice(1, 3);
console.log(newArr3) // ["two", "three"]
console.log(arr) // ["one", "two", "three", "four"]

10、Array.prototype.splice()

splice() 方法通过删除现有元素和/或添加新元素来更改数组的内容。

注意:splice 方法直接更改原数组内容

  • array.splice(start)
  • array.splice(start, deleteCount)
  • array.splice(start, deleteCount, item1, item2, …)
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
var myFish = ["angel", "clown", "mandarin", "surgeon"];
//从第 2 位开始删除 0 个元素,插入 "drum"
var removed = myFish.splice(2, 0, "drum");
console.log(myFish);
//运算后的 myFish:["angel", "clown", "drum", "mandarin", "surgeon"]
//被删除元素数组:[],没有元素被删除
//从第 3 位开始删除 1 个元素
removed = myFish.splice(3, 1);
//运算后的myFish:["angel", "clown", "drum", "surgeon"]
//被删除元素数组:["mandarin"]
//从第 2 位开始删除 1 个元素,然后插入 "trumpet"
removed = myFish.splice(2, 1, "trumpet");
//运算后的myFish: ["angel", "clown", "trumpet", "surgeon"]
//被删除元素数组:["drum"]
//从第 0 位开始删除 2 个元素,然后插入 "parrot", "anemone" 和 "blue"
removed = myFish.splice(0, 2, "parrot", "anemone", "blue");
//运算后的myFish:["parrot", "anemone", "blue", "trumpet", "surgeon"]
//被删除元素的数组:["angel", "clown"]
//从第 3 位开始删除 2 个元素
removed = myFish.splice(3, Number.MAX_VALUE);
//运算后的myFish: ["parrot", "anemone", "blue"]
//被删除元素的数组:["trumpet", "surgeon"]

ECM5方法

1、Array.prototype.indexOf()

indexOf()方法返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回-1。

1
2
3
4
5
var a = [2, 6, 9, 6];
a.indexOf(2); // 0
a.indexOf(7); // -1 不存在
a.indexOf(6); // 1 返回指定元素的第一个索引值

找出指定元素出现的所有位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 找出 a 在 array 里的所有位置
var str = 'a';
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var indices = [];
var idx = array.indexOf(str);
while (idx != -1) {
indices.push(idx);
idx = array.indexOf(str, idx + 1);
}
console.log(indices);
// [0, 2, 4]

2、Array.prototype.lastIndexOf()

lastIndexOf() 方法返回指定元素(也即有效的 JavaScript 值或变量)在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找,从 fromIndex 处开始。

1
arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

定位数组中的值:

1
2
3
4
5
6
7
8
9
10
11
12
13
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

查找所有元素

下例使用 lastIndexOf 查找到一个元素在数组中所有的索引(下标),并使用 push 将所有添加到另一个数组中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var element = 'a';
var array = ['a', 'b', 'a', 'c', 'a', 'd'];
var indices = [];
var idx = array.lastIndexOf(element);
while (idx != -1) {
indices.push(idx);
idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
}
console.log(indices);
// [4, 2, 0];

3、Array.prototype.every()

every() 方法测试数组的所有元素是否都通过了指定函数的测试。

every 方法为数组中的每个元素执行一次 callback 函数,直到它找到一个使 callback 返回 false(表示可转换为布尔值 false 的值)的元素。如果发现了一个这样的元素,every 方法将会立即返回 false。否则,callback 为每一个元素返回 true,every 就会返回 true。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。

callback 被调用时传入三个参数:元素值,元素的索引,原数组。

如果为 every 提供一个 thisArg 参数,在该参数为调用 callback 时的 this 值。如果省略该参数,则 callback 被调用时的 this 值,在非严格模式下为全局对象,在严格模式下传入 undefined。

every 不会改变原数组。

every 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后添加到数组中的元素不会被 callback 访问到。如果数组中存在的元素被更改,则他们传入 callback 的值是 every 访问到他们那一刻的值。那些被删除的元素或从来未被赋值的元素将不会被访问到。

检测所有数组元素的大小

1
2
3
4
5
6
7
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true

4、Array.prototype.some()

some() 方法测试数组中的某些元素是否通过了指定函数的测试。

some 为数组中的每一个元素执行一次 callback 函数,直到找到一个使得 callback 返回一个“真值”(即可转换为布尔值 true 的值)。如果找到了这样一个值,some 将会立即返回 true。否则,some 返回 false。callback 只会在那些”有值“的索引上被调用,不会在那些被删除或从来未被赋值的索引上调用。

callback 被调用时传入三个参数:元素的值,元素的索引,被遍历的数组。

1
arr.some(callback[, thisArg])

如果为 some 提供了一个 thisArg 参数,将会把它传给被调用的 callback,作为 this 值。否则,在非严格模式下将会是全局对象,严格模式下是 undefined。

some 被调用时不会改变数组。

测试数组元素的值

下面的例子检测在数组中是否有元素大于 10。

1
2
3
4
5
6
7
function isBigEnough(element, index, array) {
return (element >= 10);
}
var passed = [2, 5, 8, 1, 4].some(isBigEnough);
// passed is false
passed = [12, 5, 8, 1, 4].some(isBigEnough);
// passed is true

5、Array.prototype.filter()

filter() 方法使用指定的函数测试所有元素,并创建一个包含所有通过测试的元素的新数组。

对数组中的每一项运行给定函数,返回该函数会返回 true 的项组成的数组。

1
var new_array = arr.filter(callback[, thisArg])

筛选排除掉所有的小值

下例使用 filter 创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成。

1
2
3
4
5
6
function isBigEnough(value) {
return value >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

6、Array.prototype.map()

map() 方法创建一个新数组,其结果是该数组中的每个元素调用一个提供的函数,返回这个新数组

求数组中每个元素的平方根

下面的代码创建了一个新数组,值为原数组中对应数字的平方根。

1
2
3
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
/* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */

问答题

问题:["1","2","3"].map(parseInt) 答案是多少?

答案是[1,NaN,NaN]

7、Array.prototype.forEach()

forEach() 方法对数组的每个元素执行一次提供的函数。

对数组中的每一项运行给定函数,这个方法没有返回值。本质上与使用 for 循环迭代数组一样。

1
2
3
array.forEach(callback(currentValue, index, array){
//do something
}, this)
  • currentValue(当前值) 数组中正在处理的当前元素。
  • index(索引) 数组中正在处理的当前元素的索引。
  • array forEach()方法正在操作的数组。
1
2
3
4
5
6
7
8
var arr=[2, 4, 5];
arr.forEach(function(elm,index, array) {
console.log(index, elm);
});
// 0 2
// 1 4
// 2 5

8、Array.prototype.reduce()

reduce() 方法对累加器和数组的每个值 (从左到右)应用一个函数,以将其减少为单个值。

将数组所有项相加

1
2
3
4
var sum = [0, 1, 2, 3].reduce(function(a, b) {
return a + b;
}, 0);
// sum is 6

数组扁平化

1
2
3
4
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]

9、Array.prototype.reduceRight()

reduceRight() 方法接受一个函数作为累加器(accumulator),让每个值(从右到左,亦即从尾到头)缩减为一个值。(与 reduce() 的执行方向相反)

1
2
3
4
5
var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
return a.concat(b);
}, []);
// flattened is [4, 5, 2, 3, 0, 1]

本文主要内容引用:

原文地址: http://zyj1022.github.io/posts/frontend/2017/js-array-base.html

转载时必须以链接形式注明原始出处及本声明