玩转JavaScript数组（javascript数组操作方法）

玩转JavaScript数组

文章主要介绍了JavaScript中数组的一些特性及经常会碰到的一些数组操作方式。

数组的本质

本质上，数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。

Object.keys方法返回数组的所有键名。可以看到数组的键名就是整数0、1、2。

JavaScript语言规定，对象的键名一律为字符串，所以，数组的键名其实也是字符串。之所以可以用数值读取，是因为非字符串的键名会被转为字符串。

var arr = ['a','b','c'];

console.log(Object.keys(arr));

console.log(arr['0']);

console.log(arr[0]);

length属性

length属性可以说是数组最重要也是最常用的属性，l它返回数组的成员数量（正常情况下）。

只要是数组，就一定有length属性。该属性是一个动态的值，等于键名中的最大整数加上1。length的值是可人为改变的。

var arr = ['a', 'b'];

arr.length // 2

arr[2] = 'c';

arr.length // 3

arr[9] = 'd';

arr.length // 10

arr[1000] = 'e';

arr.length // 1001

这里留一个问题：如果设置length的值，比原数组小，大，或者等于0 或者是非数字值会各个情况会如何？比例：

var arr = ['a', 'b'];

我把arr.length = 1; arr.length=3,arr.length = 0 ，arr.length = 'aa'。 大家可以试试会有什么结果。

接下来看看数组的一些常用操作。

1. 如何判断一个对象是否是数组？

   typeof运算符只能显示数组的类型是Object，而Array.isArray方法可以对数组返回true。

   var a = [1, 2, 3];

   typeof a // "object"

   Array.isArray(a) // true

如何将往数组中末尾添加元素？

push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

var a = [];

a.push(1) // 1

a.push('a') // 2

a.push(true, {}) // 4

a // [1, 'a', true, {}]

3.如何往数组头部添加元素?

unshift方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

4.删除数组最后一个元素并返回该元素?

pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。

var a = ['a', 'b', 'c'];

a.pop() // 'c'

a // ['a', 'b']

5.删除数组的第一个元素，并返回该元素

shift方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组。

var a = ['a', 'b', 'c'];

a.shift() // 'a'

a // ['b', 'c']

6.合并两个数组？

concat方法用于多个数组的合并。它将新数组的成员，添加到原数组的尾部，然后返回一个新数组，原数组不变。

var a = ['a','b','c'];

var b = [ 1, 2,3];

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

console.log(a);//[ 'a', 'b', 'c' ]

在ES6中引入了一个新特性扩展运算符（spread）三个点（...）。它也可以用来实现合并连个数组，而且更简洁。例如： [...a,...b]

7.如何将一个数组变成字符串并用特定的符号分隔开来？例如把var = ['hello','world','!']拼接成一个字符串。a.join(' ')；如果要用#分隔开就使用a.join('#')

8.如何获取数组中的一部分，比如数组中第2个元素到第8个元素

slice方法用于提取原数组的一部分，返回一个新数组，原数组不变。

它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员。

9.如何删除数组中的一部分成员

splice方法用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。

splice的第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。

10.对数组进行排序？

sort方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。

[ { name: "张三", age: 30 }, { name: "李四", age: 24 }, { name: "王五", age: 28 } ].sort(function (o1, o2) { return o1.age - o2.age; })

11.如何判断数组中的所有元素是否符合某个规则？例如数组中的元素都大于3.

every方法则是所有数组成员的返回值都是true，才返回true，否则false。

var arr = [1, 2, 3, 4, 5]; arr.every(function (elem, index, arr) { return elem >= 3; });

12.如何判断数组中的是否有满足某个规则的元素？例如判断数组中是否存在大于3的数.

some方法是只要有一个数组成员的返回值是true，则整个some方法的返回值就是true，否则false。

var arr = [1, 2, 3, 4, 5]; arr.some(function (elem, index, arr) { return elem >= 3; });

13.如何判断数组中是否存在某个元素。这里有三个方式：

indexOf方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1。

var a = ['a', 'b', 'c']; a.indexOf('b') // 1 a.indexOf('y') // -1

注意indexOf使用===判断，所以对于对象不管用。

数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员

[1, 4, -5, 10].find((n) => n < 0)

用于弥补indexOf对于对象的查找。

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016 引入了该方法。

[1, 2, 3].includes(2) // true

[1, 2, 3].includes(4) // false

[1, 2, NaN].includes(NaN) // true

最后将一个小技巧：将字符串转化为数组。

[...'hello'] // [ "h", "e", "l", "l", "o" ]