总结数组方法,必须掌握

落叶飘
200 阅读4分钟

数组方法大全

concat

说明这个方法不改变原数组,返回拼接后新数组。

var numbers = [1,2,3,4,5,6,7,8];
var arr = [9,10,11,12]
var result1 = numbers.concat(arr)
console.log(numbers,arr,result1)

结果是:

[ 1, 2, 3, 4, 5, 6, 7, 8 ] [ 9, 10, 11, 12 ] [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]

every

不改变原数组,只有每一项都是true，最后才是true,参数是一个方法

var numbers = [1,2,3,4,5,6,7,8];
var result2 = numbers.every(item => {
  return item % 1 === 0
})
console.log(numbers,result2)

结果是：[ 1, 2, 3, 4, 5, 6, 7, 8 ] true

filter方法

不改变原数组,返回值是true的新数组

var numbers = [1,2,3,4,5,6,7,8];
var result3 = numbers.filter((item,index) => {
  return item % 2 === 0 && index >= 4
})
console.log(numbers,result3)

结果是：[ 1, 2, 3, 4, 5, 6, 7, 8 ] [ 6, 8 ]

forEach

是一个操作方法,操作数组每一项，没有返回值，原数组不变

var numbers = [1,2,3,4,5,6,7,8];
var result4 = numbers.forEach((item,index) => {
  console.log(item+'---'+index)
})
console.log(numbers,result4)

结果是：1---0 2---1 3---2 4---3 5---4 6---5 7---6 8---7 [ 1, 2, 3, 4, 5, 6, 7, 8 ] undefined

join 数组转化为字符串

不改变原数组,返回数组转化的字符串

var numbers = [1,2,3,4,5,6,7,8];
var result5 = numbers.join('%oo%');
console.log(result5)

结果是：'1%oo%2%oo%3%oo%4%oo%5%oo%6%oo%7%oo%8'

indexOf

不改变原数组,返回一个与给定参数相等的元素的索引,如果没有返回-1

var numbers = [1,2,3,4,5,6,7,8];
var result6 = numbers.indexOf(6)
var result7 = numbers.indexOf(99)
console.log(result6,result7)

结果是：5 -1

lastIndexOf

不改变原数组，返回最后一个与给定参数相同的索引值

var doubleNums = [1,2,8,3,4,8,5,6,8,7,8,9];
var result8 = doubleNums.lastIndexOf(8)
console.log(result8)

结果是：10

map 方法用来操作数组的每一项,返回调用结果的数组

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

var numbers = [1,2,3,4,5,6,7,8];
var result9 = numbers.map((item,index) => {
  return index + '%-qp-%' + item
})
console.log(result9)

结果是：[ '0%-qp-%1', '1%-qp-%2', '2%-qp-%3', '3%-qp-%4', '4%-qp-%5', '5%-qp-%6', '6%-qp-%7', '7%-qp-%8' ]

reverse方法

改变原数组,如果说有返回值,那就是原数组了

var numbers10 = [1,2,3,4,5,6,7,8];
var result10 = numbers10.reverse()
console.log(result10)

结果是：[8,7,6,5,4,3,2,1]

splice 数组删除，插入

改变原数组,原数组变成我们希望的结果,并且返回我们删掉的值

var numbers = [1,2,3,4,5,6,7,8];
var result11 = numbers.splice(3,3,6,6,6);
console.log(numbers,result11)

结果是：[ 1, 2, 3, 6, 6, 6, 7, 8 ] [ 4, 5, 6 ]

slice 数组截取

这里我们注意包含第一个参数的索引,不包含第二个参数的索引.不改变原数组,返回结果

var numbers = [1,2,3,4,5,6,7,8];
var result12 = numbers.slice(2,numbers.length - 2)
console.log(numbers,result12)

结果是：[ 1, 2, 3, 4, 5, 6, 7, 8 ] [ 3, 4, 5, 6 ]

some方法

只要包含就返回true

var numbers = [1,2,3,4,5,6,7,8];
var result13 = numbers.some((item,index) => {
  return item % 7 === 0
})
console.log(result13)

结果是：true

sort排序

改变原数组,并且返回最终结果

var numbers14 = [1,2,3,4,5,6,7,8];
var result14 = numbers14.sort((a,b) => {
  return a - b < 0
})
console.log(numbers14,result14)

结果是：[ 8, 7, 6, 5, 4, 3, 2, 1 ] [ 8, 7, 6, 5, 4, 3, 2, 1 ]

toString

不改变原数组,把数组转化为字符串,可不包含中括号哦

var numbers = [1,2,3,4,5,6,7,8];
var result15 = numbers.toString();
console.log(numbers,result15)

结果是：[ 1, 2, 3, 4, 5, 6, 7, 8 ] '1,2,3,4,5,6,7,8'

valueOf

valueOf 返回数组对象本身

var numbers = [1,2,3,4,5,6,7,8];
var result16 = numbers.valueOf()
console.log(result16)
console.log(result16 instanceof Array)

结果是：[1,2,3,4,5,6,7,8] true

Array.from 方法

根据已有的数组创建一个新数组，可以传一个参数过滤。

var numbers = [1,2,3,4,5,6,7,8,9]
var res_arr = Array.from(numbers, x => x % 2 === 0)
console.log(res_arr)

结果是： [ false, true, false, true, false, true, false, true, false ]

之前的一道京东面试题实现数组过滤：我当时给的其中一个答案就是

let numbers = [1,2,2,3,4,5,5,6,7,5,9,2,1,3,4]
let res = Array.from(new Set(numbers))
console.log(res)

我们通过Set方法拿到一个伪数组，最后通过Array.from方法来处理一下就好了。

Array.of 方法

根据传入的参数创建新数组

const arr = Array.of(1,2,3,4,5,6)
console.log(arr)

结果是： [ 1, 2, 3, 4, 5, 6 ]

另外数组还涉及到深拷贝和浅拷贝，我们常见的都是浅拷贝。数组里边的每一项如果都是值类型的我们使用浅拷贝就可以，如果数组里边包含引用类型，甚至是里边层层嵌套的引用类型，这时候我们使用浅拷贝就不行了。

实现浅拷贝的方法：

  • concat()
  • slice()
  • for循环
  • ...拓展运算
  • Array.from()
  • Array.of()
  • Object.assign()

实现深拷贝的方法

如果浏览器支持JSON的话我们直接使用

JSON.parse(JSON.stringify(obj)

就可以了。 我们也可以像下面一样把这个方法封装一下：

let cloneObj = function(obj){
  let str, newobj = obj.constructor === Array ? [] : {};
  if(typeof obj !== 'object'){
      return;
  } else if(JSON || window.JSON){
      str = JSON.stringify(obj), //系列化对象
      newobj = JSON.parse(str); //还原
  } else {
      for(var i in obj){
          newobj[i] = typeof obj[i] === 'object' ? 
          cloneObj(obj[i]) : obj[i]; 
      }
  }
  return newobj;
};

数组还可以使用ES6的一些方法，比如通过Symbol这个关键词来创建，还有

entries()、next()、keys()、values()、等。

avatar
文章
阅读
粉丝