javascript数组操作

javascript数组操作

今天针对javascript的数组的一些常见操作进行一些讲解，希望对给为开发者有帮助。 先看下面常见的三种循环。

for循环

var arr =[1, 3, 8, 4]
for (var i = 0,j = arr.length; i < j; i++) {
    console.log(arr[i], i)
}
// Prints:
// [0] is 1 0
// [1] is 3 1
// [2] is 8 2
// [3] is 4 3

for in 循环

var arr =[1, 3, 8, 4]
var map ={a: 1,b: 2,c: 3}
Array.prototype.text =5
for (var i in arr) {
    console.log(arr[i], i)
}

for (var i in map) {
   console.log(map[i], i)
}
// Prints arr:
// [0] is 1 "0"
// [1] is 3 "1"
// [2] is 8 "2"
// [3] is 4 "3"
// [4] is 5 "text"

//prints map:
// [0] is 1 "a"
// [1] is 2 "b"
// [2] is 3 "c"

for of循环

var arr =[1, 3, 8, 4]
for (var i of arr) {
    console.log(i)
}
// Prints:
// [0] is 1
// [1] is 2
// [2] is 3
// [3] is 8
// [4] is 4

可以看到， for循环和 for of循环都是遍历数组本身，但是区别是 i的值，前者是索引，后者是数组值。 for in循环不仅遍历数组本身，还遍历了原型遍历，同时可以遍历对象。这里指的注意的是 i的值是 string类型的 “0,1,2,3” 总结：for循环能满足我们的大多数情况，但是是最麻烦的，拿到的是索引，不如for of那样直接拿到数组值。for in循环功能是最强的，能遍历对象，但是缺点第遍历了原型对象，有时候可能对我们的遍历产生影响。 上面的3个循环都能通过 break跳出循环。

forEach循环

var arr =[1, 3, 8, 4]
arr.forEach((row, index, test) = >{
    console.log(row, index, test)
})
// Prints:
// [0] is 1 0 arr
// [1] is 2 1 arr
// [2] is 3 2 arr
// [3] is 8 3 arr
// [4] is 4 4 arr

可以看到 forEach循环和 for in循环是很像的，区别是 forEach是以回调函数的形式来遍历的，参数分别是数组值，索引和数组本身，遍历期间可以通过 row对数组本身进行处理，会改变数组本身。 forEach对于需要中断遍历就没那么友好，不能通过break来结束循环。大多数情况下 forEach很容易满足我们的遍历，但是forEach循环存在上下文变量的问题（如果不能用箭头函数的情况下，这里通过箭头函数避免了该问题）。

map遍历

var arr =[1, 3, 8, 4]
var newArr = arr.map((row, index, test) = >{
    return row
})
arr.push(5)
console.log(arr, newArr)
// Prints:
//[1,3,8,4,5],[1,3,8,4]

map遍历和forEach遍历参数是一样的，同样是通过回调函数来遍历整个数组，不同是 map遍历通过return给我们返回一个全新的数组。

filter操作

var arr =[1, 3, 8, 4]
var newArr = arr.filter((row, index, test) = >{
    return row >= 5
})
console.log(newArr)
// Prints:
//[8]

filter操作是用来数组过滤的，找出符合条件的值并返回一个新的数组，回调函数的参数跟forEach一样，通过返回true false来判断是否符合新数组的条件。

concat操作

var arr =[1, 3, 8, 4]
var arr2 =[4, 5]
var newArr = arr.concat(arr2)
var newArr1 = arr.concat()
console.log(newArr, arr2)
// Prints:
//[1, 3, 8, 4, 4, 5]
//[1, 3, 8, 4]

concat操作是用来合并数组的，并返回一个新的数组。这里有个骚操作是 arr.concat()只需要一行代码就能轻松实现数组的拷贝。

sort排序

var arr =[1, 3, 8, 4]
arr.sort((a, b) = >a > b)
console.log(arr)
// Prints:
// [1, 3, 4, 8]

sort对数组进行排序，接受一个回调函数，函数的参数是连续的数组2项，上面的代码类似实现了一个冒泡排序，通过返回 true false来判断是否需要调换位置，这些操作直接作用在原数组上。

一些其他操作

//shift:删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined
//unshift:将参数添加到原数组开头，并返回数组的长度
//pop:删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined
//push:将参数添加到原数组末尾，并返回数组的长度
//reverse:将数组反序
//splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount项，并从该位置起插入val1,val2,...
//slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组
//join(separator):将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符
//some(),every()判断数组中是否存在满足条件的值，前者有一个为true则返回true，后者所有未true才返回true，有点像&&和||。

//这里写一个数组比较的问题
[]==[]
//prints:false
var a1 =[1, 2, 3]
var a2 =[1, 2, 3]
a1.toString() == a2.toString()
//prints:true
//上面的方式巧妙的避开了大量代码来判断数组是否相同

对象操作

var map1 ={name: 'jack',age: 21,sex: '0'}
var map2 ={phone: '123456'}
var map3 =Object.assign(map1, map2)
var arr =Object.keys(map1)
console.log(arr)
console.log(map3)
//prints:
//["name", "age", "sex"]
//{name: "jack", age: 21, sex: "0", phone: "123456"}

可以看到 Object.keys方法可以将对象的key组成一个数组，得到数组时候我们就可以使用forEach等一些方法来遍历这个对象了。 Object.assign能合并n个对象的属性，后面的属性会覆盖前面的属性，最终得到一个新的对象。这2个es6的方式是很实用的。

总结

数组是javascript常见的数组类型，操作很多，选择适当的方式能提高程序性能和代码可读性。部分函数是es6才有的这里不做说明，具体各种操作性能也不做对比。 最后觉得有用的观众可以分享给好友和关注该公众号。

* 识别下方二维码关注我的个人公众号。大家都在这里了，你在哪里呢？*