Javascript 数组常用操作

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript 数组常用操作，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5975字，纯文字阅读大概需要9分钟。

内容图文

ES5 下的常用数组操作

遍历

for

var _array = [1, 2, 3]
for (var key = 0; key < _array.length; key++) {
    console.log(key, _array[key])
}

for-in

var _array = [1, 2, 3]
for (var key in _array) {
    console.log(key, _array[key])
}

迭代

在迭代中使用 return break continue 无效

forEach-遍历

var _array = [1, 2, 3]
_array.forEach(function (value, key, array) {
    console.log(value, key, array)
})

filter-过滤

var _array = [1, 2, 3]
var _newArray = _array.filter(function (value, key, array) {
    return value > 2
})
console.log(_newArray)  //[ 3 ]

map-映射

var _array = [1, 2, 3]
var _newArray = _array.map(function (value, key, array) {
    return key + ":" + value
})
console.log(_newArray)  //[ '0:1', '1:2', '2:3' ]

some-部分符合

//只要有一个值符合条件，即退出循环
var _array = [1, 2, 3]
var _hasValueBiggerThanOne = _array.some(function (value, key, array) {
    console.log(value)  //value 不会到 3
    return value > 1
})
console.log(_hasValueBiggerThanOne)  //true

every-全部符合

var _array = [1, 2, 3]
var _everyValueBiggerThanOne = _array.every(function (value, key, array) {
    return value > 1
})
console.log(_everyValueBiggerThanOne)  //false

属性和方法

length

length长度属性

var _array = ['a', 'b', 'c']
console.log(_array.length)  //输出3
_array.length = 2
console.log(_array)  //输出['a', 'b']

Array.isArray-类型判断

var _array = ['a', 'b', 'c']
console.log(Array.isArray(_array))  //输出true

indexOf-按元素值查找

查找元素并返回对应元素的索引值，如果找不到此元素则返回-1，第二个参数为查找的起始位置

var _array = ['a', 'b', 'c']
_array.indexOf('b')  //返回值为1
_array.indexOf('d')  //返回值为-1
_array.indexOf('b', 2)  //返回值为-1

lastIndexOf-按元素值查找

从后向前查找元素并返回元素的索引值，如果找不到则返回-1

var _array = ['a', 'b', 'c']
_array.lastIndexOf('b')  //返回值为1
_array.lastIndexOf('d')  //返回值为-1

push-尾部添加元素

向数组的尾部添加一个或多个元素，并返回新数组的长度

var _array = ['a', 'b', 'c']
_array.push('d')  //返回值为4
console.log(_array)  //打印值为['a', 'b', 'c', 'd']

unshift-头部添加元素

向数组的头部添加一个或多个元素，并返回新数组的长度

var _array = ['b', 'c', 'd']
_array.unshift('a', 'b')  //返回值为5
console.log(_array)  //打印值为['a', 'b', 'b', 'c', 'd']

pop-尾部删除

从尾部删除一个元素，并返回该元素

var _array = ['a', 'b', 'c']
_array.pop()  //返回'c'
console.log(_array)  //打印值为['a', 'b']

shift-头部删除

从头部删除一个元素，并返回该元素

var _array = ['a', 'b', 'c']
_array.shift()  //返回'a'
console.log(_array)  //打印值为['b', 'c']

splice-添加替换删除

添加、替换、删除元素。会改变原数组

var _array = [1, 2, 3, 4, 5]
_array.splice(1, 0, 2)    //在 1 的位置，删除 0 个元素，添加元素 2
console.log(_array)  //输出[1, 2, 2, 3, 4, 5]
_array.splice(1, 1)    //在 1 的位置，删除 1 个元素，不添加元素
console.log(_array)  //输出[1, 2, 3, 4, 5]
_array.splice(1, 1, 2, 3)    //在 1 的位置，删除 1 个元素，添加元素 2 和 3
console.log(_array)  //输出[1, 2, 3, 3, 4, 5]

array.splice(start[, devareCount[, item1[, item2[, ...]]]])

• 参数start表示替换的位置
• 参数devareCount表示删除的元素
• 参数item1...表示添加的元素

sort-排序

数组排序，并返回新数组，且改变原数组

var _array = [25, 4, 3, 10, 22, 4]
_array.sort()
console.log(_array)  //输出[10, 22, 25, 3, 4, 4]
var _newArr = _array.sort(function (x, y) {
    // 正序
    return x - y
})
console.log(_array)  //输出[3, 4, 4, 10, 22, 25]
console.log(Object.is(_newArr, _array)) //true

reverse-反序

倒置数组，并返回新数组，且改变原数组

var _array = ['a', 'b', 'c']
var reverseArr = _array.reverse()
console.log(reverseArr)  //输出['c', 'b', 'a']
console.log(Object.is(reverseArr, _array)) //true

join-合并成字符串

合并数组中所有元素成为字符串并返回

var _array = ['a', 'b', 'c']
console.log(_array.join())  //输出a, b, c
console.log(_array.join('-'))  //输出a-b-c

concat-合并成数组

合并两个或多个数组，返回一个全新的数组，原数组不变

var arr1 = ['a', 'b']
var arr2 = ['c', 'd']
console.log(arr1.concat(arr2))  //输出["a", "b", "c", "d"]

slice-截取数组

按参数begin和end截取数组，不改变原数组

var arr1 = ['a', 'b']
var arr2 = ['c', 'd']
console.log(arr1.concat(arr2))  //输出["a", "b", "c", "d"]
console.log(arr1)  //输出["a", "b"]
console.log(arr2)  //输出["c", "d"]

reduce-左侧累计

从左至右按reducer函数组合元素值，并返回累加器终值

var _array = [1, 2, 3, 4, 5]
var reducer = function (accumulator, currentValue) {
    return accumulator + currentValue
}
console.log(_array.reduce(reducer))  //1+2+3+4+5 = 15
console.log(_array.reduce(reducer, 5))  //5+1+2+3+4+5 = 20 设置5为累加器的初始值

reduceRight-右侧累加

从右至左按reducer函数组合元素值，并返回累加器终值

var _array = [1, 2, 3, 4, 5]
var reducer = function (accumulator, currentValue) {
    return accumulator - currentValue
}
console.log(_array.reduceRight(reducer))  //5-4-3-2-1
console.log(_array.reduceRight(reducer, 6))  //6-5-4-3-2-1

其他操作

去重

function unique(arr) {
    for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
            if (arr[i] === arr[j]) {         //第一个等同于第二个，splice方法删除第二个
                arr.splice(j, 1)
                j--
            }
        }
    }
    return arr
}

var arr = [
    1, 1, 'true', 'true', true, true, 15, 15, false, false,
    undefined, undefined, null, null, NaN, NaN,
    'NaN', 'NaN', 0, 0, 'a', 'a', {}, {}
]
console.log(unique(arr))
// NaN 和 对象 无法去重
// [
//   1,     'true',
//   true,  15,
//   false, undefined,
//   null,  NaN,
//   NaN,   'NaN',
//   0,     'a',
//   {},    {}
// ]

最大值，最小值

var _array = [22,13,6,55,30]
console.log(Math.max.apply(null, _array))   //55
console.log(Math.min.apply(null, _array))   //6

参考

For-each over an array in JavaScript - Stack Overflow

JS方法速查

JavaScript数组方法速查手册 - 知乎

JavaScript数组去重（12种方法，史上最全）_前端开发随笔 - SegmentFault 思否

内容总结

以上是互联网集市为您收集整理的Javascript 数组常用操作全部内容，希望文章能够帮你解决Javascript 数组常用操作所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端