js中数组常用的方法总结

1.push() 后增

push()方法可以向数组后添加一个新的元素，并返回新数组的长度。

末尾添加，返回长度，改变原数组

var a = [1,2,3]
var b = a.push(4)
 
console.log(a)  // [1,2,3,4] 
console.log(b)  // 4

2.unshift() 前增

unshift()可以向数组前添加一个或多个元素，并返回新的长度

首部添加，返回长度，改变原数组

var a = [2,3,4]
var b = a.unshift(0,1)
 
console.log(a)  // [0,1,2,3,4]
console.log(b)  // 5

3.pop() 后删

pop() 用于删除并返回最后一个元素。

尾部删除，返回被删除的元素，改变原数组

var a = [1,2,3]
var b = a.pop()
 
console.log(a) // [1,2]
console.log(b) // 3

4.shift() 前删

shift() 用于删除并返回首个元素

删除首部元素，返回被删元素，改变原数组

var a = [1,2,3]
var b = a.shift()
 
console.log(a) // [2,3]
console.log(b) // 1

5. splice() 修该删除

splice(index,length,增加的元素1,增加的元素2…,增加的元素N) 表示从index开始删除length个元素，并从index开始新增元素1~N，放回被删除的元素组成的数组
对数组进行删除修改，返回被删除的元素组成的数组，改变原数组

var a = [1,2,3]
var b = a.splice(1,1,3,[2,3,4],5)
 
console.log(a)  // [1,3,[2,3,4],5,3]
console.log(b)  // [2]

6.concat() 拼接

concat() 方法用来合并两个或多个数组

合并两个或多个数组，返回新数组，不会改变原数组

var a = [1,2,3]
var b = [4,5]
var c = a.concat(b)
 
console.log(a) // [1,2,3]
console.log(b) // [4,5]
console.log(c) // [1,2,3,4,5] 

7.slice() 剪切

slice(startIndex,endIndex) 返回从startIndex开始(包括)，到endIndex(不包括)之间的原属组成的数组

返回新数组，不改变原数组

var a = [1,2,3]
var b = a.slice(0,1)
// 不填参数则表示剪切整个数组  
var c = a.slice() 
console.log(a) // [1,2,3] 
console.log(b) // [1]
console.log(c) // [1,2,3]    
console.log(a===c)  // false // 注意 a !== c 
 
// 负数表示从后往前数
var d = a.slice(-1,-2)   
console.log(d) // []   从左向右截取，所以说为[]
 
var e = a.slice(-1)  
console.log(e)  // [3]

8.join()

join() 方法用来将数组转换为字符串

不改变原数组，返回转换后的字符串

​
var a = [1,2,3,4,5]
 
console.log(a.join(','))  // 1,2,3,4,5
console.log(a)  // [1,2,3,4,5]
 
 
​

9.sort() 排序

按ascii码排序

改变原数组，返回排序后的数组

var a = ['a','b','d','c']
 
console.log(a.sort())  // ['a','b','c','d']
console.log(a)  // ['a','b','c','d']
var a=[4,3,1,2]
a.sort();// =>[1,2,3,4]
a.sort(function(a,b){return a-b;});//=>[1,2,3,4] 降序排列
a.sort(function(a,b){return b-a;});//=>[4,3,2,1] 升序排列

10.reverse() 颠倒顺序

reverse() 方法用于颠倒数组中元素的顺序。

返回的是颠倒后的数组，会改变原数组。

var a  = [1,3,2,7,6]
 
console.log(a.reverse())  // [6,7,2,3,1]
console.log(a)  // [6,7,2,3,1]

11.indexOf()和lastIndexOf()

indexOf(某元素,startIndex) 从startIndex开始，查找某元素在数组中的位置，若存在，则返回第一个位置的下标,否则返回-1

lastIndexOf(某元素，startIndex) 和indexOf()相同，区别在于从尾部向首部查询

不会改变原数组，返回找到的index,否则返回-1
若不使用下标，则一般通过includes()方法代替indexOf()

var a = [1,2,4,3,4,5]
 
console.log(a.indexOf(4))  // 2
console.log(a.indexOf(4,3)) // 4

12.filter() 过滤

filter() 方法返回数组中满足条件的元素组成的新数组，原数组不变

filter()的参数是一个方法

var a = [1,2,3,4,11]
// 第一个参数为一个方法，有三个参数，current:当前值 index:当前值下标 array:这个数组对象
var b = a.filter(function(current,index,array){
    return current < 10
})
 
console.log(b) // [1,2,3,4]
console.log(a) // [1,2,3,4,11]

13.map() 格式化数组

map() 方法来根据需求格式化原数组，返回格式化后的数组。原数组不变

var a = [1,2,3,4,5]
// 参数同filter方法
var b = a.map(function(current,index,array){
    return current + 1
})
 
console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]

14.every()

对数组的每一项都运行给定的函数，若每一项都返回 ture,则返回 true

var a = [1,2,3,4,5]
 
var b = a.every(function(current,index,array){
       return current < 6
})
 
var c = a.every(function(current,index,array){
       return current < 3
})
console.log(b)  // true 
console.log(c)  // false 

15.some()

对数组的每一项都运行给定的函数，若存在一项或多项返回 ture,则返回 true

var a = [1,2,3,4,5]
 
var b = a.some(function(current,index,array){
       return current > 4
})
 
var c = a.some(function(current,index,array){
       return current > 5
})
console.log(b)  // true 
console.log(c)  // false 

16.forEach() 数组遍历

遍历整个数组，中途不能中断

var arr = ['a','b','c']
var copy = []
arr.forEach(function(item){
     copy.push(item)   
})
console.log(copy) // ["a", "b", "c"]

ES6新增的方法

1. find()

找到数组中第一次满足条件的元素，并返回，若找不到则返回undefined。不改变原数组。

和filter()方法的区别在于：filter返回值是所有满足条件的元素组成的数组，

一般在需要使用找到的元素时，用find()方法

var a = [1,2,3,4]
// b在下面需要使用，则一般用find
var b = a.find(function(ele,index,array){
    return ele == 1
})
 
var c = 3
var d = b + c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4
 
// 若只需判断元素是否存在
// 若果是简单数组(非对象数组)，则一般使用Array.includes(value)方法
// 如果为对象数组，则可以使用Array.some()方法
 
var a = [1,2,3]
console.log(a.includes(1))  // true
 
var a = [{"name": "xiaoming" },{"name": "xiaohong"}]
 
console.log(a.some(function(ele){
    return ele.name == 'xiaoming'
}))                            // true

2.findIndex()方法

findIndex()的作用同indexOf()，返回第一个满足条件的下标，并停止寻找。

区别是findIndex() 的参数为一个回调函数,且一般用于对象数组

var a = [1,2,3,4]
 
var b = a.findIndex(function(ele,index,array){
    return ele === 2
})
 
var c = a.indexOf(2)  
 
console.log(a)  // [1,2,3,4]
console.log(b)  // 1
console.log(c)  // 1

3.includes()

includes()方法,返回一个布尔值。 参数是一个value,一般用于简单数组。

对于复杂数组，则可以使用some()方法替代includes()方法

var a = [1,2,3]
console.log(a.includes(1))  // true

4.Array.isArray()方法

用来判断一个元素是否为数组

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

其他

1.Array.of()方法
Array.of()方法用于将一组值，转换为数组。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

上面代码中，Array方法没有参数、一个参数、三个参数时，返回结果都不一样。只有当参数个数不少于 2 个时，Array()才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度。
Array.of()方法基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

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

Array.of()方法可以用下面的代码模拟实现。

function ArrayOf(){
  return [].slice.call(arguments);
}

2.Array.from()
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
原文链接：https://www.cnblogs.com/jf-67/p/8440758.html

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。
　　1、将类数组对象转换为真正数组：

let arrayLike = {
    0: 'tom', 
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

那么，如果将上面代码中length属性去掉呢？实践证明，答案会是一个长度为0的空数组。

这里将代码再改一下，就是具有length属性，但是对象的属性名不再是数字类型的，而是其他字符串型的，代码如下：

let arrayLike = {
    'name': 'tom', 
    'age': '65',
    'sex': '男',
    'friends': ['jane','john','Mary'],
    length: 4
}
let arr = Array.from(arrayLike)
console.log(arr)  // [ undefined, undefined, undefined, undefined ]

会发现结果是长度为4，元素均为undefined的数组

由此可见，要将一个类数组对象转换为一个真正的数组，必须具备以下条件：

1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
　　2、该类数组对象的属性名必须为数值型或字符串型的数字
　　ps: 该类数组对象的属性名可以加引号，也可以不加引号
　　2、将Set结构的数据转换为真正的数组：

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set))  // [ 12, 45, 97, 9797, 564, 134, 45642 ]

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

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]

3、将字符串转换为数组：

let  str = 'hello world!';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

4、Array.from参数是一个真正的数组

console.log(Array.from([12,45,47,56,213,4654,154]))

像这种情况，Array.from会返回一个一模一样的新数组