当前位置:首页 > 技术文章 > 正文内容

JavaScript 数组的常用方法(javascript数组的常用方法)

zonemu20小时前技术文章1

在我们前端来说数组作为一个常用的类型,今天我们讲一下在实际使用中经常用到的方法和使用场景。

concat() 多数组组合

concat() 可以用来连接两个或多个数组,返回要给新的数组并且不会影响之前的数组。

使用方法:arr.concat(arr1,arr2,......,arrn) 他的参数可以是多个数组。实例如下:

var arr = [1,2,3];
var arr1 = [4,5,6];
var arr2 = [7,8,9];
arr.concat(arr1,arr2)

输出结果:
[1,2,3,4,5,6,7,8,9]

join()将数组元素连接到一起

join()方法是把数组中所有的元素通过指定的分隔符连接成一个统一的字符串。

实例如下:

var arr = ["str1","str2","str3"]
arr.join("#")

输出结果:
str1#str2#str3

pop()删除数组的最后元素

pop() 是用来删除数组的最后一个元素。咱们直接上实例:

var arr = ["str1","str2","str3"]
arr.pop()

输出结果:
["str1","str2"]

push()往数组结尾添加元素

push() 方法适用于向数组的末尾添加一个或多个元素。

使用方法:

arr.push(obj1,obj2,......objn) 我们可以看到这个方法可以添加多个参数。具体实例如下:

var arr = ["str1","str2","str3"]
arr.push("obj1","obj2","obj3")

输出结果:
 ["str1","str2","str3","obj1","obj2","obj3"]

unshift()往数组开头添加元素

unshift() 方法适用于向数组的末尾添加一个或多个元素。也可以添加多个参数。具体实例如下:

var arr = ["str1","str2","str3"]
arr.unshift("obj1","obj2","obj3")

输出结果:
["obj1", "obj2", "obj3", "str1", "str2", "str3"

forEach() 和for()数组循环遍历

共同点:两者都是用于对数组的循环遍历

var arr = ["str1","str2","str3"]

for (let index = 0; index < this.arr.length; index++) {
   const element = this.arr[index];
   console.log(element)
 }

this.arr.forEach(element => {
	console.log(element)
});

输出结果相同:
 ["str1","str2","str3"]

不同点:for 可以中途中断 但是forEach不行他会执行完整个数组元素

var arr = ["str1","str2","str3"]
for (let index = 0; index < this.arr.length; index++) {
  const element = this.arr[index];
  console.log(element)
  if(index==1){
    return
  }
}

this.arr.forEach(element => {
  console.log(element)
  return
});

输出结果:
 ["str1","str2"]
输出结果:
 ["str1","str2","str3"]

我们看出for函数只输出了两个值就中断了 但是forEach确将所有的数据都输出了。整个地方是特别容易出错并且不容易找出错误的地方。所以大家一定要区分开两个函数的共同点和区别。

map()函数

map函数可以根据之前的对象根据某个条件进行某种变换,生成另外一个新的对象。

 let arr=[1,2,3]
 let createArr=arr.map(item=>{
   return item*2
 })
 
 输出结果:
 [2,4,6]

filter() 函数

filter函数用于数组中获取过滤符合条件的所有元素,返回过滤后的数组,如果没有符合条件的元素则返回空数组。

let arr=[1,2,3]
let arr2=arr.filter(item=>{
  return item.value>1
})

输出结果:
 [2,3]

find()函数

find()函数查找符合条件的值,不过有几点注意事项:

1、返回符合条件的第一个元素的值,多符合也只是返回一个。

2、如果没有符合判断条件的则返回 undefined。

let arr=[1,2,3]
let arr2=arr.find(item=>{
  return item.value==1
})

输出结果:
 [1]

相关文章

7种超轻量级的Linux发行版,能够帮助你找到适合自己的操作系统

Linux是一种非常受欢迎的开源操作系统,而且有许多版本可以选择。有时候,你需要一种超轻量级的Linux发行版,它可以在资源有限的设备上运行,并且能够快速启动。本文将介绍7种超轻量级的Linux发行版...

Vue3开发极简入门(16):祖孙组件间通信之provide&amp;inject

前文说了Vue的组件间关系,有父子、爷孙、其他关系。例如之前的Father、Son是父子关系,App与Son就是爷孙关系。而props的Son,与emits的Son,就是其他关系。前文的props是父...

崩溃!3 道 React 面试必卡题,吃透稳过金九银十

凌晨三点还在对着 “React 组件为什么重复渲染” 抓耳挠腮?别慌!今天挑出 3 道让 90% 候选人卡壳的高频题,全是大厂面试官挖的 “坑”,手把手教你见招拆招,看完直接装进面试 “弹药库”!先问...

Vue3开发极简入门(15.1):emits补完-结合v-model

之前代码是通过按钮触发emit,如果希望输入框里的内容在输入之后也能同步到父组件,就可以结合v-model的update事件来操作,具体如下。Son2.vue:<template>...

学习ES6- 入门Vue(大量源代码及笔记,带你起飞)

ES6学习网站: https://es6.ruanyifeng.com/箭头函数普通函数//普通函数 this 指向调用时所在的对象(可变) let fn = function fn(a, b) {...

vue3-内置组件-Teleport(vue内置指令有哪些)

Teleport<Teleport> 是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。基本用法有时我们可能会遇到这样的场景:一个组件模板的一部...