JS中数组方法小结

发表于 | 分类于

Array.isArray()

判断是不是数组的方法

1
2
3
var a = [1, 2, 3];
typeof a // "object"           typeof运算符只能显示数组的类型是Object
Array.isArray(a) // true

toString()

把数组返回字符串

1
2
3
var a =[1,2,3]
a.toString()
//'1,2'

push() & unshift()

语法：arr.push(element1, …, elementN) // arr.unshift(element1,……elementN)

参数：被添加到数组尾部的元素

返回值：新的length长度！（该方法会改变原数组）

1
2
3
4
5
6
7
var a =[1,2,3]
var b =[4,5,6]
var c = Array.prototype.push.apply(a,b)   合并两个数组，也可以用a.concat(b)方法
= a.push.apply(a,b)
= a.push(4,5,6)
a // [1,2,3,4,5,6]
c // 6 (返回的是新数组的长度)

pop() & shift()

语法：arr.pop() 不接受参数 （改变原数组的长度length）

返回值：数组中被移除的值 （空数组返回undefined）

1
2
3
4
5
var a =[1,2,3]
var b = a.pop()
a // [1,2]
a.length // 2
b //3
1
2
3
4
5
#数组末尾添加内容&数组前增加内容
var a = [1,2,3,4]
a[a.length] = 'tom'  //速度最快,但改变原数组，只能是一个
-------------
var b = ['jack',123].concat(a) //速度最快，不改变原数组

join()

join() 方法将数组（或一个类数组对象）的所有元素连接到一个字符串中。

语法：str = arr.join() ; str = arr.join(“”) ; str = arr.join(separator)

返回值：字符串 （不会改变原数组！）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = [1,2,3]
var b = a.join()
var c = a.join("")
var d = a,join("c")
------
b// "1,2,3"  默认为逗号
c // "123"
d // "1c2c3"
------------
如果是undefined,null,或者空位，转换成空字符串
['a',, 'b'].join('-')
// 'a--b'
--------------Array.protptype.jion.call()可以用于字符串或者类数组
Array.prototype.join.call('sdf','#')   //'s#d#f'

concat()

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

语法：var new_array = old_array.concat(value1[, value2[, …[, valueN]]])

参数：需要与原数组合并的数组或非数组值(可以是对象）。

返回值：新数组（原数组不变）

1
2
3
4
5
6
var array1=[1,2,3]
var array2=[4,5,6]
var array3=[7,8,9]
var nums = array1.concat(array2,array3,5,[12,13])
console.log(nums)
// [1,2,3,4,5,6,7,8,9,5,12,13]

  • concat()方法也可以用于将对象合并为数组，但是必须借助call方法。

    1
    2
    3
    4
    5
    6
    7
    8
    [].concat.call({a: 1}, {b: 2})     这里是空数组,用call的时候不加()!!!
    // [{ a: 1 }, { b: 2 }]
    [].concat.call({a: 1}, [2])
    // [{a: 1}, 2]
    [2].concat({a: 1})        这里不需要call
    // [2, {a: 1}]
1
2
3
4
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// ["one", "two", "three", "four", "five"]

reverse()

reverse方法用于颠倒数组中元素的顺序，返回改变后的数组。注意，该方法将改变原数组。

返回值：颠倒后的数组 （原来数组会改变）

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

slice()

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

语法：arr.slice() // arr.slice(begin) // arr.slice(begin,end)

参数：index，可以是负数，数组最后一个数值为-1开始

返回值：提取出来的新数组 ，原数组不变

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

1
2
3
4
5
var a =[1,2,3,4]
a.slice()    // [1,2,3,4]
a.slice(1)   //[2,3,4]
a.slice(-3,-1)    //[2,3]
a.slice（-3,0）    //[]   如果参数大小出错，就会返回空集

splice()

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

语法：array.splice(start) // array.splice(start, deleteCount) // array.splice(start, deleteCount, item1, item2, …)

参数：start，deleteCount，item（添加的内容，添加到start前面 ）

返回值：由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

1
2
3
4
5
6
7
8
9
var a =[1,2,3,4,5,6]
var b =a.splice(2,0,'tom')
a // [1,2,'tom',3,4,5,6]   从2位置删除0个，添加了'tom'
b // []    被删除0个，所以是空集
----------------
var c = [1,2,3,4,5]
var d = c.splice(3,2,'jack')
c // [1,2,3,'jacl']
d // [4,5]
1
2
3
4
5
6
#从数组中指定位置插入数组,用扩展运算符...来运算
var arr1 = [1,2,3,4,5,6]
var arr2 = ['tom','jack']
arr1.splice(1,0,...arrs)
arr1 // [1, "tom", "jack", 2, 3, 4, 5, 6]
arr2 // ["tom", "jack"]

sort()

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

语法：arr.sort() 元素按照转换为的字符串的诸个字符的Unicode位点进行排序

​ arr.sort(compareFunction) comparFunction接受两个参数a，b进行比较，如果返回值<0，a在b之前；返回值=0，位置不变；返回值大于0，b在a前面

返回值：排序后的数组 （原数组改变）

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 nums = [3,5,1,4,8]
var a = nums.sort(function(a,b){
  return a-b
})
console.log(nums)   //[1, 3, 4, 5, 8]
console.log(a)     //[1, 3, 4, 5, 8]
--------------
对象按照某个属性排列
var items = [
  {name:'tom1',age:21},
  {name:'tom2',age:43},
  {name:'tom3',age:15},
  {name:'tom4',age:18},
  {name:'tom5',age:50},
]
items.sort(function(a,b){
  return a.age - b.age
})
console.log(items)
// [
  {name:'tom3',age:15},
  {name:'tom4',age:18},
  {name:'tom1',age:21},
  {name:'tom2',age:43}, 
  {name:'tom5',age:50},
]

map()（目的是遍历数组并返回一个新数组）

map()方法对数组的所有成员依次调用一个函数，根据函数结果返回一个新数组。

语法：

1
2
3
let array = arr.map(function callback(currentValue, index, array) { 
    // Return element for new_array 
}[, thisArg])

参数：currentValue：当前成员 / index 位置索引 / array 数组本身

返回值：一个新数组，每个元素都是回调函数的结果 （不改变原数组）

可用于字符串

1
2
3
用于字符串，用call,而且map后面不加()
Array.prototype.map.call(str,function(x){})
或者[].map.call(str,function(x){})

forEach()（目的是遍历元素执行某个操作）

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

语法：

1
2
3
array.forEach(callback(currentValue, index, array){
    //do something
}, this)

参数：和map一致

返回值：undefined 注意和map的区别

注：forEach()方法无法中断执行，总是会将所有成员遍历完。如果希望符合某种条件时，就中断遍历，要使用for循环。

forEach()方法不会跳过undefined和null，但会跳过空位。

filter()(用来筛选)

filter() 方法把返回结果为true的成员组成一个新数组返回。

语法：var new_array = arr.filter(callback[, thisArg])

参数：callback接受三个参数（类似map()，forEach()），currentValue：当前成员 / index 位置索引 / array 数组本身

返回值：一个新的通过测试的元素的集合的数组（不改变原数组）

1
2
3
4
5
6
var a = [1,3,5,7,9]
var b = a.filter(function(nums){
  return nums>3
})
a // [1,3,5,7,9]
b // [5,7,9]

some() & every()

  • some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

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

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

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

语法：arr.some(callback[, thisArg])

​ arr.every(callback[, thisArg])

参数：callback接受三个参数（类似map()，forEach()，filter()）

返回值：布尔值 （不改变原数组）

reduce() & reduceRight()

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

语法：array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)

参数(前两个必须）：accumulator：初始值(默认第一个)，或者提供的初始值initialValue

​ currentValue：正在处理的元素（如果没有设置初始值initialValue，则从index=1开始，如果设置了，从index=0开始）

​ currentIndex：索引

​ array：原数组

​ initialValue：其值用于第一次调用 callback 的第一个参数。如果没有设置初始值，则将数组中的第一个元素作为初始值。

返回值：函数累计处理的结果 (原数组不变)

  • 数组累加和
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a=[1,2,3,4,5]
var b=a.reduce(function(x,y){
  console.log(x,y)
  return (x+y)
})
//1,2
  3,3
  6,4
  10,5
  15
-----------
var c=a.reduce(function(x,y){
  return(x+y)
},10)

indexOf() & lastIndexOf()

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

语法：arr.indexOf(searchElement) / arr.indexOf(searchElement[, fromIndex = 0])

返回值：首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

1
2
3
4
5
6
var a = ['a', 'b', 'c'];
a.indexOf('b') // 1
a.indexOf('y') // -1
-----------
判断这个元素是不是在数组里
if（b.indexOf(a) === -1）

扩展运算符…

扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

  • 传递一个数组作为参数

    1
    2
    3
    4
    5
    6
    function test(x,y,z){
      console.log(x+y+z)
    }
    var args=[1,2,3]
    test(...args)
    //6

  • 合并数组（也可以用concat()，或者split()，push()，unshift()）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var arr1=[1,2,3]
    var arr2=[7,8,9]
    ------
    var arr = arr1.concat(arr2)
    //arr [1,2,3,7,8,9]
    ------
    var arr=[...arr2,'tom',...arr1,'jack']
    //[7,8,9,'tom',1,2,3,'jack']
    -----------
    var arr4 = arr1.push(...arr2)      or/arr1.push.apply(arr1，arr2)
    //[1,2,3,7,8,9]

  • 拷贝数组（也可以用arr.slice()）

    1
    2
    var arr1 =[1,2,3]
    var arr2=[...arr1]

  • 求数组的最大值

    1
    2
    3
    var arr=[1,2,3,54,65,7]
    Math.max(...arr)  === Math.max.apply(null,arr)
    //65

  • 将字符串转为数组

    1
    2
    3
    4
    5
    6
    [...'hello']
    //["h", "e", "l", "l", "o"]
    -------------
    "hello".split("")   //["h", "e", "l", "l", "o"]
    ------------
    Array.from('tom')  // ["t","o","m"]

Array.from()

从一个类似数组或可迭代的对象中创建一个新的数组实例。只要是部署了Iterator接口的数据结构，Array.from都能将其转为数组。

语法：Array.from(arrayLike[, mapFn[, thisArg]])

参数：arrayLike :想要转换成真实数组的类数组对象或可遍历对象。

​ mapFn :可选参数，如果指定了该参数，则最后生成的数组会经过该函数的加工处理后再返回。

​ thisArg :可选参数，执行 mapFn 函数时 this 的值。

  • 字符串

    1
    2
    Array.from('tom')
    //["t","o","m"]   类似[...'tom']

  • DOM操作返回的NodeList集合

    1
    2
    3
    4
    let p = document.querySelectorAll('p');
    Array.from(p).forEach(function (p) {
      console.log(p);
    });

  • 函数内部的arguments对象

    1
    2
    3
    4
    function foo(){
      var args=Array.from(arguments)
      ......
    }

  • Array.from方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组.

    1
    2
    3
    4
    5
    Array.from({ '1':'sdf','2':'sdf',length: 4 })
    //[undefined, "sdf", "sdf", undefined]
    -------------
    Array.from({ length: 3 });
    // [ undefined, undefined, undefined ]

  • Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    Array.from(arrayLike, x => x * x);
    // 等同于
    Array.from(arrayLike).map(x => x * x);
    Array.from([1, 2, 3], (x) => x * x)
    // [1, 4, 9]
    ------------------
    Array.from([1,,2,,3],(n)=>n||0)   把布尔值为false转为0
    [1,0,2,0,3]

Array.of()

Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

1
2
3
4
Array.of() // []      没有参数就返回一个空数组
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

copyWithin()

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。

注：返回一个新的数组，（改变原数组，但是不改变原数组长度）

参数可以是负数，-1表示数组最后一个数

1
2
[1,2,3,4,5,6].copyWithin(1,3,4)
//[1,4,3,4,5,6]    //3,4表示不包括4号位！！

find() & findIndex()

find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

语法：arr.find(callback[, thisArg]) ，它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

参数：参数的回调函数接受三个参数，（element , index , array）

1
2
3
4
5
6
[1,34,12,5].find((value,index,array)=>value > 9)      es6的语法不用return，不然出错！！
-------
[1,34,12,5].find(function(value,index,array){
  return value>9
})
//34
1
2
3
4
5
6
[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0
注意：Object.is(value1,value2)这个方法用来确定两个值是否相同！！

fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。（可以替换数组里的值）

语法：arr.fill(value, start, end) （具体要填充的元素区间是 [start, end) , 一个半开半闭区间）

返回值：修改后的数组

1
2
3
4
[1, 2, 3].fill(4)            // [4, 4, 4]
Array(3).fill(4);            // [4, 4, 4]
[1, 2, 3].fill(4, 1, 1)      // [1, 2, 3]    这样选不到任何一个位置
[1, 2, 3].fill(4, 1, 2)      // [1, 4, 3]

keys() , values() , entries()

用于遍历数组。它们都返回一个遍历器对象，可以用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"
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
var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys);  // [0, 1, 2]
---------------Object.keys(obj)
数组 返回索引
    var arr = ["a", "b", "c"];
    console.log(Object.keys(arr)); // console: ["0", "1", "2"]
对象返回键名
var obj = {'a':'123','b':'345'};
console.log(Object.keys(obj));  //['a','b']
var obj1 = { 100: "a", 2: "b", 7: "c"};
console.log(Object.keys(obj1)); // console: ["2", "7", "100"]    注意这里是自动排序的！
字符串，返回索引的数组
var str = 'ab1234';
console.log(Object.keys(obj));  //[0,1,2,3,4,5]
构造函数 返回空数组或者属性名
    function Pasta(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.toString = function () {
                    return (this.name + ", " + this.age + ", " + this.gender);
            }
    }
    console.log(Object.keys(Pasta)); //console: []
    var spaghetti = new Pasta("Tom", 20, "male");
    console.log(Object.keys(spaghetti)); //console: ["name", "age", "gender", "toString"]

includes()和字符串的方法类似

语法：arr.includes(searchElement, fromIndex)

1
2
3
4
[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true    可以判断NaN是否在数组里，但是indexOf不行
对比  [NaN].indexOf(NaN)   // -1

实战：数组去重