JavaScript中常用的数组操作方法总结

更新时间：2022年07月21日 09:59:43 作者：不愿染是与非

这篇文章为大家总结了一些JavaScript中常用的数组操作方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

前言

函数和方法的区别：

函数function：独立的function，那么称之为是一个函数。

function foo() {}

方法method：当我们的一个函数属于某一个对象时，我们称这个函数是这个对象的方法。

var obj = {
  foo: function() {}
}
obj.foo()

例如，对一个数组的操作方法：filter，我们就称之为是一个方法。

// filter：过滤
var nums = [10, 5, 11, 100, 55]
nums.filter((item) => item > 10)

在以下对数组的操作中，我们统称方法。

文章中通用常量意义：

item：某一项。当作为参数时，为遍历数组中的每一项。当作为返回值时，意思为某项数据，可以为任意类型。

index：下标。当作为参数时，为遍历数组中的item在数组中下标。当作为返回值时，意思为下标。

arr：数组。当作为返回值时，意思为改变数组本身。当作为参数时，意思为自身数组。

length：数组长度。当作为返回值时，意思为数组长度

newarr：新数组。当作为返回值时，意思为产生一个新数组，

boolean：布尔值。当作为方法体时以为：条件的返回值为布尔值。

num：数值类型。

start ：数组遍历开始下标（包含）

end：数组遍历结束下标（不包含）

数组基础遍历方法

for

for(var i = 0, len = arr.length; i < len; i++ ){
  console.log(arr[i])
}

for基础循环可以用来遍历数组，字符串，类数组，DOM节点等。

for of

for (var item of arr) {
  console.log(item);
}

for of：for-of获取的是数组的值。可以使用 break、continue、return 来中断循环遍历。

for in

for (var value in arr) {
  console.log(value); 
}

for in：一般用于对对象的遍历，但也可以用于数组。用于数组遍历时，for-in获取的是数组的索引

var arr = [10, 7, 9, 100, 11]

for (var value in arr) {
  console.log(value); 
}
// 0 1 2 3 4

注意：

1).index索引为字符串型数字，不能直接进行几何运算。

2).使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性。

Array.prototype.myfun=function(){
    alert('myfun');
}    
var arr = [0,1,2,3];

for(var i in arr){
    console.log(arr[i]);
}

console.log(Array.prototype)
/* 输出结果：
0 1 2 3
ƒ (){
    alert('myfun');
}
*/

数组的基础操作方法

push：尾部追加元素

var length = arr.push(item)

push() 方法用于对数组尾部插入新的元素。返回值为追加后的数组长度。

var nums = [10, 7, 9, 100, 11]

var length = nums.push(2)
console.log(length) // 2

pop：尾部移出元素

var item = arr.pop()

pop() 方法用于删除数组的最后一个元素并返回删除的元素。无参，返回值为删除的元素。

var nums = [10, 7, 9, 100, 11]

var item = nums.pop()
console.log(item) // 11

unshift：头部追加元素

var length = arr.unshift(item)

unshift() 方法用于对数组头部插入新的元素。返回值为追加后的数组长度。

shift：头部移出元素

var item = arr.unshift()

shift() 方法用于对数组头部插移出元素。返回值为追出后的元素。

splice：删除添加替换

var newarr = arr.splice(index, howmany, item)

splice() 方法用于对数组元素进行删除添加替换操作。返回值为删除的元素组成的数组。

index（必填）：数组下标，代表从第几个元素开始执行操作。

howmany（可选）：规定删除多少个元素，如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。

item（可选）：插入元素，可以为多个。从下标位置插入。

var nums = [10, 7, 9, 100, 11]
var newarr= nums.splice(2,2,99,77,55)

console.log(newarr) // [9, 100]
console.log(nums) // [10, 7, 99, 77, 55, 11]

注意：splice() 方法会改变原数组。

concat：连接

newarr = arr.concat(nums1, nums2)

concat() 方法用于连接两个或多个数组。

var nums1 = [2,5,7,9]
var nums2 = [1,3,55]
var newarr = []
var newarr = newarr.concat(nums1, nums2)

concat() 方法不会改变原数组。

join：分割

Str = arr.join(separator)

separator：分割符，如果为空，则已 “，” 分割。

join() 方法用于把数组中的所有元素转换一个字符串。

var nums = [10, 7, 9, 100, 11]

var Str = nums.join('x')
console.log(Str) // 10x7x9x100x11

slice：切割

newarr = arr.slice(start, end)

从数组的 [start, end）位置截取数组元素。

slice() 方法可从已有的数组中返回选定的元素。

slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。

注意： slice() 方法不会改变原始数组。

includes：查询

boolean = arr.includes(value, start)

value（必填）: 查找的元素，可以为字符串或数值。

start（可选）：开始查找的位置下标。

includes() 方法用于判断字符串是否包含指定的子字符串。返回值为布尔值。

indexOf：查询

index = arr.indexOf(value, start)

value（必填）: 查找的元素，可以为字符串或数值。

start（可选）：开始查找的位置下标。

indexOf() 方法用于判断字符串是否包含指定的子字符串。返回值为查询到下标，若为查询到则为 -1。

lastIndexOf()方法类似，返回值为 value 最后一次出现的下标。

fill：填充/替换

fruits.fill(value, start, end)

value（必填）：用来填充数组元素的值。

start（可选）：可选开始索引值（包含），默认值为0。

end（可选）：可选终止索引（不包含），默认值为 arr.length 。

通常与 new Array 搭配使用。

var arr = new Array(10).fill('10')
// ['10', '10', '10', '10', '10', '10', '10', '10', '10', '10']

或是用于替换掉数组中元素的值。

var arr3 = [0, 1, 2, 3, 4, 5, 6]
console.log(arr3.fill(1, 3)); //[0, 1, 2, 1, 1, 1, 1]

es6中带来的数组高阶方法

接下来是es6中带来的数组高阶方法。

高阶函数：一个函数如果接收另一个函数作为参数，或者该函数会返回另外一个函数作为返回值的函数，那么这个函数就称之为是一个高阶函数。

数组的高阶方法通常会接收一个回调函数作为参数，在回调中遍历数组，执行操作。

接下来

写在前面：接下来介绍的数组高阶方法，回调函数的写法均采用的是箭头函数的写法，因箭头没有自己的 this 指向，就不介绍第二个参数 thisValue 了。

forEach：迭代（枚举）

arr.forEach((item, index, arr) => { 写想要枚举的操作 })

forEach 方法不会改变原数组，也没有返回值；

var nums = [10, 7, 9, 100, 11]
nums.forEach((item) => {
    if (item > 10) {
        console.log(item)
    }
}) // 100, 11

forEach无法使用 break 跳出循环。使用 return 时，效果和在 for 循环中使用 continue 一致。

forEach如果想要跳出循环，可以通过 throw new Error() 抛出错误的方式实现。

var nums = [10, 7, 9, 100, 11]
nums.forEach((item) => {
    if (item == 100) {
        throw new Error("miss 100")
    } else {
        console.log(item)
    }
}) // 10 7 9 Error: miss 100

filter：过滤

newarr = arr.filter((item, index, arr) => boolean)

例子：

var nums = [10, 7, 9, 100, 11]
var newNums = nums.filter((item) => {
  return item % 2 === 0 // 偶数
})
console.log(newNums) // [10, 100]
console.log(nums) // [10, 5, 11, 100, 55]

返回值是过滤后的新数组

map：映射

newarr = arr.map((item, index, arr) => { 写指定方法体 })

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

var nums = [10, 7, 9, 100, 11]

var newNums = nums.map((item) => { 
  return item * 10
})
console.log(newNums) // [100, 50, 110, 1000, 550]
console.log(nums) // [10, 5, 11, 100, 55]

注意：map 方法中的 callback 函数只需要接受一个参数，就是正在被遍历的数组元素本身。

但这并不意味着 map 只给 callback 传了一个参数（会传递3个参数）。这个思维惯性可能会让我们犯一个很容易犯的错误。

// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

// num.parseInt() , parseInt()接收两个参数，第一个为要转换的字符串，第二个参数是进制数（2-36之间）如果省略该参数或其值为 0，则数字将以 10 为基础来解析，超过返回NaN。
// map的 callback，会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身。第三个参数被忽略
// 所以就相当于执行了，parseInt("1", 0)，parseInt("2", 1)，parseInt("3", 2),

// 正确的写法应该为：
function returnInt(element){
 return parseInt(element,10);
}
 
["1", "2", "3"].map(returnInt);
// 返回[1,2,3]

find：查找

item = arr.find((item, index, arr) => { boolean })

find()方法用于获取数组中符合指定条件的第一个元素。没有找到返回 undefined。

var family = [
  { name: 'xiaoming', age: 18 },
  { name: 'xiaocheng', age: 40 },
  { name: 'xiaoli', age: 42 }
]

var item = family.find((item) => {
  return item.name === 'xiaoming'
})
console.log(item) // { name: 'xiaoming', age: 18 }

注意，返回的item为浅拷贝。

item.name = 'kkk'
console.log(family)
/*
* {name: 'kkk', age: 18}
* {name: 'xiaocheng', age: 40}
* {name: 'xiaoli', age: 42}
*/

这里就反应出 find() 方法返回的结果内存指向依然是 family 所指向的内存地址，

所以这里返回的是浅拷贝的数据。

findIndex：查找下标

index = arr.findIndex((item, index, arr) => { boolean })

findIndex() 返回符合条件的数组第一个元素位置（索引），没有找到符合条件则返回 -1。

var family = [
  { name: 'xiaoming', age: 18 },
  { name: 'xiaocheng', age: 40 },
  { name: 'xiaoli', age: 42 }
]

var index = family.findIndex((item) => {
  return item.name === 'xiaoming'
})
console.log(index) // 0

以上就是JavaScript中常用的数组操作方法总结的详细内容，更多关于JavaScript数组操作方法的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Echarts利用多X轴实现七天天气预报效果的示例代码
本文主要介绍了Echarts利用多X轴实现七天天气预报效果的示例代码，对于UI给出的设计图，各个气象网站都有类似的效果，分享给大家
2021-10-10
PHP实现本地图片上传和验证功能
这篇文章主要为大家详细介绍了PHP实现本地图片上传和验证功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
ionic2打包android时gradle无法下载的解决方法
这篇文章主要为大家详细介绍了ionic2打包android时gradle无法下载的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
js实现固定宽高滑动轮播图效果
本文主要分享了js实现PC固定宽高滑动轮播图效果的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
js bind 函数使用闭包保存执行上下文
在javascript中，函数总是在一个特殊的上下文执行（称为执行上下文），如果你将一个对象的函数赋值给另外一个变量的话，这个函数的执行上下文就变为这个变量的上下文了。下面的一个例子能很好的说明这个问题
2011-12-12
JS判断两个对象内容是否相等的方法示例
这篇文章主要介绍了JS判断两个对象内容是否相等的方法,结合具体实例形式分析了javascript针对字符串、数组及对象的相关判断技巧,需要的朋友可以参考下
2017-04-04
JS正则表达式大全(整理详细且实用)
JS正则表达式大全(整理详细且实用)。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
用函数式编程技术编写优美的 JavaScript_ibm
函数式编程语言在学术领域已经存在相当长一段时间了，但是从历史上看，它们没有丰富的工具和库可供使用。随着 .NET 平台上的 Haskell 的出现，函数式编程变得更加流行。一些传统的编程语言，例如 C++ 和 JavaScript，引入了由函数式编程提供的一些构造和特性。在许多情况下，JavaScript 的重复代码导致了一些拙劣的编码。如果使用函数式编程，就可以避免这些问题。此外，可以利用函数式编程风格编写更加优美的回调。
2008-05-05
BootStrap 附加导航组件
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识，感兴趣的朋友一起学习吧
2016-07-07
ES6中的类（Class）示例详解
这篇文章主要给大家介绍了关于ES6中类（Class）的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12