1. 序言

操作array可谓前端最基础的工作,无论是从接口中取的数据,还是筛选数据,或者是添加按钮权限等等操作,array都是绕不开的东西。array的操作很多,初学者十分容易搞混,不是很熟练的情况下容易用错,所以我搜集各处的资料,准备整理一篇,也当作给自己梳理一下知识。


2. 准备

首先准备简单的一个html页面,附带array一条,为了演示方便就这样玩吧。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="container">
<button @click=init>Click</button>
</div>
</body>
<script>
new Vue({
el: '#container',
methods: {
init () {
const array = [
{ name: 'aa', age: 12 },
{ name: 'bb', age: 14 },
{ name: 'cc', age: 16 },
{ name: 'cc', age: 16 },
]
}
})
</script>
</html>

3. Get start

2.1 filter

filter 过滤,可以返回一个符合条件的新数组

filter 有3个参数 (item, index, self) 分别代表 item: 遍历的那一个数组元素,index: 索引值,self: 自己。

filter最简单的应用, 只用item可以筛选出符合条件的

执行下面的代码

const filter = array.filter( item => item.age > 13)

console.log(filter),可以返回如下结果

(3) [{…}, {…}, {…}]
0: {name: "bb", age: 14}
1: {name: "cc", age: 16}
2: {name: "cc", age: 16}
length: 3

filter总会返回一个数组,如果不符合筛选的条件,则会返回空数组。

将item,index,self同时用上,我们可以巧妙地实现数组去重的功能。

const simpleArray = ['a','a','b','c','b','a']

const simpleFilter = simpleArray.filter((item, index, self) => self.indexOf(item) === index)

console.log(simpleFilter)   

//结果

(3) ["a", "b", "c"]

indexOf() 这个有两个参数 (item, offset) 第一个参数是元素,第二个是从头开始的起点位置的索引, 返回值是该处的索引,lastIndexOf()正好与之相反,从最后一个开始向前。在这里去重时,过滤返回了第二次索引相同时的元素,所以顺序如此。

2.2 sort

sort() 方法很简单,可以对数组元素进行排序

使用最初的那个数组作为例子, 给两个参数item1, item2

const sortArray = array.sort((item1,item2) => item1.age - item2.age)

结果可以看到,元素按照age的升序排列

(5) [{…}, {…}, {…}, {…}, {…}]
0: {name: "dd", age: 10}
1: {name: "aa", age: 12}
2: {name: "bb", age: 14}
3: {name: "cc", age: 16}
4: {name: "cc", age: 16}
length: 5

2.3 map

map() 是ES6的新方法,可在不改变原数组的基础上返回一个经过处理的新数组,比方说我想让所有的年龄都+5

const mapArray = array.map( item => {
return {
name: item.name,
age: item.age + 5
}
})

结果:

(5) [{…}, {…}, {…}, {…}, {…}]
0: {name: "aa", age: 17}
1: {name: "bb", age: 19}
2: {name: "cc", age: 21}
3: {name: "cc", age: 21}
4: {name: "dd", age: 15}
length: 5

map 有3个参数,和filter一样,但主要使用的是item, index。

2.4 forEach

数组遍历建议使用forEach,虽然理论上而言使用暂存array.length的for,倒序for效率更高,但是这么优雅的写法还要啥自行车。

array.forEach((item,index,self) => {})

2.5 find

find() 和filter() 差不多,只不过它是用于找出数组中特定的值。比如我想找出name为cc的值。

const findArr = array.find( item => item.name === 'cc')

结果为:

{name: "cc", age: 16}

需要注意的是,find()会从索引开头开始寻找,当找到符合条件的元素后返回true,所以如果有多条name为cc的值,比如现在这样,它只会返回第一条,如果需要找到精确的那一条,则需要添加更多条件。

2.6 some & every & includes

这两个我在工作中用的不多,但是他们很特别,返回值为true,false。

some() 只要数组种有一个符合条件,就会返回true,而every() 则必须所有都符合条件才返回true,否则返回false。

includes()可以判断数组中是否包含这一元素,有则true。

2.7 reduce

reduce()非常特殊,它的结构由一个方法和一个参数组成 (func,initv),方法有4个参数 (total,item,index,self),

initv是给函数的初始值,total是上一次计算的结果,item是元素本身。

在这里,我们试着把所有年龄相加再+5

const findArr = array.reduce((total,item) => total + item.age, 5)

// 结果为75

可以看到,初始值为5,每次循环total都等于上一次的total加上这次的age,最后返回total,得到结果。

2.8 splice

splice()很简单,有两个参数 (index, num, ....),第一个参数规定开始的位置,第二个是删去的个数,后面则是添加的元素。用这个方法可以很方便的对原数组进行增删操作。同时它的返回值是被删掉的元素。

const simpleArray = ['a','a','b','c','b','a']
const spliceArr = simpleArray.splice(1, 2,'b','v') console.log(simpleArray) //经过更改的原数组 ["a", "b", "v", "c", "b", "a"]
console.log(spliceArr) //移除的部分元素 ["a", "b"]

几种最常见的js array操作方法及示例的更多相关文章

  1. 在使用R做数据挖掘时,最常用的数据结构莫过于dataframe了,下面列出几种常见的dataframe的操作方法

    原网址 http://blog.sina.com.cn/s/blog_6bb07f83010152z0.html 在使用R做数据挖掘时,最常用的数据结构莫过于dataframe了,下面列出几种常见的d ...

  2. js Array数组的使用

    js Array数组的使用   Array是javascript中的一个事先定义好的对象(也可以称作一个类),可以直接使用 创建Array对象 var array=new Array(): 创建指定元 ...

  3. 从Chrome源码看JS Array的实现

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } .crayon-line spa ...

  4. 解决js array的key不为数字时获取长度的问题

    最近写js时碰到了当数组key不为数字时,获取数组的长度为0 的情况. 1.问题场景 var arr = new Array(); arr[‘s1‘] = 1001; console.log(arr. ...

  5. python爬虫的一个常见简单js反爬

    python爬虫的一个常见简单js反爬 我们在写爬虫是遇到最多的应该就是js反爬了,今天分享一个比较常见的js反爬,这个我已经在多个网站上见到过了. 我把js反爬分为参数由js加密生成和js生成coo ...

  6. 常见的JS手写函数汇总(代码注释、持续更新)

    最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...

  7. 页面常见效果js实现

    2015.12.2 页面常见效果js实现 [有没有觉得很坑,[笑哭,邮箱写上]] 复习: Js内置对象: 1.浏览器对象 window document history location event  ...

  8. js Array 方法总结

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. js & array to string

    js & array to string https://stackoverflow.com/questions/13272406/convert-string-with-commas-to- ...

随机推荐

  1. Spring中用到了哪些设计模式?

    谈谈Spring中都用到了哪些设计模式? JDK 中用到了那些设计模式?Spring 中用到了那些设计模式?这两个问题,在面试中比较常见.我在网上搜索了一下关于 Spring 中设计模式的讲解几乎都是 ...

  2. selenium 安装流程

    安装 1.安装python 2.cmd中输入:pip install selenium 输入pip show selenium检查是否安装完成 3.下载chromedriver 在浏览器中输入chro ...

  3. [python] 格式化方法 format

    先介绍包含的所有规则 花括号声明{}:用于渲染前的参数引用声明,花括号里可以用数字代表引用参数的序号,或者变量名直接引用. 从format参数引入的变量名 冒号: 字符位数声明 空白自动填补符的声明 ...

  4. C++学习 之 变量和常量的使用(笔记)

    一.变量 1.对变量含义的理解: 变量就像是经过工厂加工后有一定容量的容器.在变量定义时,系统充当了工厂的角色,按照类型为变量分配相应的空间.定义完成的变量可以存放相应类型的值,存放的值大于变量所能接 ...

  5. 协程+IO切换+小爬虫

    from gevent import monkeymonkey.patch_all() import geventimport requests def f1(url): print(f'GET:{u ...

  6. Android开发build出现java.lang.NumberFormatException: For input string: "tle 0x7f0800aa"错误的解决方案

    查看异常栈没有发现项目代码的问题,因为问题是出现在layout文件中. 全局查找tle这个,发现在某个layout文件中title一词被变成ti tle了,结果Android就xjb报错了. 参考

  7. 剑指offer-数组中重复的数字-数组-python

    题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为 ...

  8. 今天发布MVC项目一直找不到页面

    刚开始以为是framwork版本太高,服务器没安装. 后面想到应用池版本忘记选了

  9. |、&、||、&&、^符号含义

    |和&为计算机中二进制之间的位运算 在计算机中二进制的0表示false,1表示true. |为位运算中的或运算:它的运算逻辑为一真则真,全假则假 &为位运算中的并运算:它的运算逻辑为一 ...

  10. Nginx默认配置语法

    Nginx默认配置语法 1. 我们进入  /etc/nginx/目录下,打开  nginx.conf文件 2. 我们来解析下 这里面标签和各模块的作用 # 设置nginx服务的系统使用用户 user ...