谈一谈JavaScript中的数组

一、Array构造函数

创建一个数组一般有两种方式,第一种就是使用Array构造函数。

当没有任何参数时,使用构造函数将会创建一个空数组。

var arr = new Array()       //  []
等同于
var arr = Array()           // []

当传入一个数字作为参数时,将会创建一个长度为数字大小的数组,但它的每一个值都为undefined.

var arr = Array(3)   // [empty x 3]   相当于[,,]
console.log(arr[0])   // undefined  此时的undefined是调用的时候才赋值

当传入一个字符串字符串作为参数时,会创建一个长度为1的数组,数组会把参数作为数组的元素。

console.log(new Array['3'])    // ['3']

当传入多个参数时,无论是参数是字符串还是数字,构造函数都会创建一个数组,其中数组的元素就是传入的参数。

console.log(new Array(3, 4, 3)) //  [3, 4, 3]
console.log(new Array('3', 4, '3'))   // ["3", 4, "3"]

由于这种不确定性,我们更多的是使用字面量语法来创建数组。

var arr = [1]   // [1]
var arr = ['1']  // ['1']
var arr = [1, 3, 4]  // [1, 3, 4]
var arr = ['1', '4', '5']   // ['1', '4', '5']

另外,数组的元素可以是任意类型的值,比如,是一个对象:

var obj = {
    a: '5',
    b: false
}
console.log(Array(obj))  // [{a: "5", b: false}]

或者,是一个数组:

console.log([1, '2', ['3', 4]])   // [1, '2', ['3', 4]]

二、数组的方法

数组作为我们实际使用最多的数据类型,有着许多的静态方法来方便我们去处理数据。

1. Array.isArray()

这个方法常常用来判断一个数据是否是一个数组,返回一个布尔值。

Array.isArray([])   // true
Array.isArray(false)  // false
Array.isArray({})    // false

2. valueOf,toString

valueOf返回数组本身:

var a = [1, 3, 4]
a.valueOf()  //  [1, 3, 4]

toString返回数组的字符串格式

var arr = [1, 3, 4]
arr.toString()     //    "1,3,4"

3.push , pop , shift , unshift

push 方法将会在数组末尾添加元素,返回数组的长度。注意,此方法会改变原数组

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

因此,push()方法可以用来合并数组:

var arr1 = [1, 3, 4];
var arr2 = [5, 6, 7];
arr1.push.apply(arr1, arr2);
console.log(arr1);   // [1, 3, 4, 5, 6, 7]
// 此处apply是一种更改函数this值得内置方法,它的第一个参数是调用方法的对象,第二个参数是一个数组,数组内容将作为参数传给调用方法。

pop() 方法的作用是从数组的末尾移除元素,返回移除的元素,也会改变原数组。

var arr = [1, 3, 4, 5, 6, 7];
arr.pop();
console.log(arr);   //  [1, 3, 4, 5, 6]

shift() 方法会在数组的首部移除元素,返回移除的元素,更改原数组。

var arr = [1, 3, 4, 5, 6, 7];
arr.shift();
console.log(arr);   //  [3, 4, 5, 6]

unshift() 方法与shift()相反,用于在数组首部添加元素。返回数组的长度,改变原数组。

var arr = [1, 3, 4, 5, 6, 7];
arr.unshift(5);
console.log(arr);   //  [5, 1, 3, 4, 5, 6, 7]

4. reverse()

reverse() 方法用于颠倒数组元素的顺序,返回改变后的数组

var arr = ['a', 'b', 'c', 'd'];
console.log(arr.reverse()) //  ["d", "c", "b", "a"]

5. sort()

sort()方法是数组的排序方法,会改变原数组。如:

var arr = ['a', 'v', 'c', 'd'];
console.log(arr.sort())   // ["a", "c", "d", "v"]

但是对于数字,排序的结果可能并不是你想的那样:

var arr = [10, 444, 2435, 78];
console.log(arr.sort())   // [10, 2435, 444, 78]

原因在于sort() 方法默认是按照字典顺序排序。如果想让数组按照数字大小来排序,可以给他传入一个函数作为参数,表示按照自定义方法进行排序。该函数本身又接受两个参数,表示进行比较的两个元素。如果返回值大于0,表示第一个元素排在第二个元素后面;其他情况下,都是第一个元素排在第二个元素前面。

var arr = [1, 3, 6, 25];
arr.sort(function(a, b){   // 递增
    return a-b;
})
console.log(arr);    //  [1, 3, 6, 25]
arr.sort(function(a, b){   // 递减
    return b-a;     
})
console.log(arr);    // [25, 6, 3, 1]

6. slice()

slice方法用于从当前数组中进行截取,结果返回一个新数组。它接受最多两个可选参数,第一参数是截取的初始位置,第二个参数是截取的结束位置(不包括此位置元素)。如果不传参数,则默认从头截取至末尾,相当于数组的深度拷贝。

var arr = [25, 6, 3, 1];
arr.slice();     // [25, 6, 3, 1]   
arr.slice(0);    // [25, 6, 3, 1]
arr.slice(1);    // [6, 3, 1]
arr.slice(0,1)   // [25]
arr.slice(0,2)   // [25, 6]

7. splice()

splice()方法用于删除替换当前数组中某个位置处的元素。结果返回删除的元素。该方法会改变原数组。

当只是删除指定位置元素时,此方法需要接收两个参数,第一个参数是删除的起始位置,第二个参数是截取的元素个数。

var arr = [25, 6, 45, 'fa', 'a'];
arr.splice(1,1);  // [6]
console.log(arr)  // [25, 45, "fa", "a"]
arr.splice(2,3);  // [45, "fa", "a"]
console.log(arr);  // [25, 6]

从第三个参数开始,都会被当做替换元素插入到当前数组中:

var arr = [25, 6, 45, 'fa', 'a'];
arr.splice(2,3,'123');  
console.log(arr);             // [25, 6, "123"]
arr.splice(2, 3, 'a', 'b');  
console.log(arr);             // [25, 6, "a", "b"]

8. map()

map()方法用于对一个数组的每一项执行某种操作,结果返回操作完成后的新数组。不会改变原数组。

map()方法接受一个函数作为参数,这个函数可以接受三个参数,分别是当前项,当前项的索引,当前数组

var arr = [1, 4, 5, 6];
arr.map((item, index, arr) => item + index);  // [1, 5, 7, 9]
arr;                  //   [1, 4, 5, 6] 

map()方法还可以接受第二个参数,用于指定回调函数中的this:

var  arr = ['a', 'b', '5', '6'];
[1, 2].map(function(item){ return this[item]}, arr);   //  ["b", "5"]

9. forEach()

forEach()方法与map()方法类似,不同点在于此方法不返回数组,只是单纯的操作数据,并不会修改原数组。本质上,相当于for循环。

var arr = [1, 4, 5, 6];
arr.forEach((item, index, arr) => console.log(item + index)); 
// 依次输出 1, 5, 7, 9 
arr;  //     [1, 4, 5, 6]

另外,forEach()方法也可以接受第二个参数,作用同map()方法。

10. filter()

filter() ,称为筛子方法,顾名思义,就是用来筛选元素。它接受一个用于筛选的回调函数作为参数,返回通过筛选的数组元素。不改变原数组

var arr = [1, 4, 5, 6];
arr.filter((item, index, arr) => item > 3);  // [4, 5, 6]

与上面两个相同,filter() 方法也可以接受第二个参数值,作为回调函数中this的指向。

11. every()some()

这两个方法都是用来判断数组是否满足某一条件,区别在于some()在有一项返回true时就返回true,every()在每一项都为true的时候才返回true.

var arr = [1, 4, 5, 6];
arr.some((item, index, arr) => item === 4);    // true
arr.every((item, index, arr) => item === 4);   // false

注意,对于空数组,some方法返回false,every方法返回true,回调函数都不会执行。

它们也可以接受第二个参数。作用同上。

12. reduce(),reduceRight()

我们通常称这两个方法为迭代方法。它们会依次处理数组的每个成员,并累积为一个值。

它们的区别在于,reduce()是从左开始,reduceRight()从右开始。它们接受一个回调函数作为参数,这个函数可以接受四个参数,分别为上一个值,当前值,当前位置,当前数组。其中后两个参数不是必须的。最常用的场景是进行累加。

var arr = [1, 4, 5, 6];
arr.reduce((pre, cur, index, arr) => pre + cur);   // 16
arr.reduceRight((pre, cur, index, arr) => pre + cur); // 16

它们也可以接受第二个参数,作用是指定函数执行的初始值。

var arr = [1, 4, 5, 6];
arr.reduce((pre, cur, index, arr) => pre + cur, 10);   // 26

13. indexOf(), lastIndexOf

这两个方法用于获取数组中某元素在数组中的索引值,indexOf()返回第一个索引值,lastIndexOf()返回最后一个索引值。如果查询不到,则返回-1

var arr = ['a', 'b', 'g', 'hg', 'b'];
arr.indexOf('b')   // 1
arr.lastIndexOf('b')  // 4
arr.indexOf('bw')   // -1
完。

关于数组的基本方法就这么多,但是真的想把数组用好还需要很大的功夫,如果有兴趣,可以去我的博文专辑 js能力测评中对比题目体会js数组的强大。

参考:
《JavaScript高级程序设计》
JavaScript标准参考教程


欢迎关注微信公众号 web独白,一个有故事的公众号。

这里写图片描述

猜你喜欢

转载自blog.csdn.net/Young_Light_Lu/article/details/79822434