JavaScript数组方法集合

本文总结一下js数组处理用到的所有的方法。自己做个笔记。

数组方法

concat() 合并两个或多个数组

concat()能合并两个或者多个数组,不会更改当前数组,而是返回一个新的数组。是一种浅拷贝,可以理解理解为拼接数组,然后返回给一个新数组 不会改变原数组

    var arr1=[1,2,5]
var arr2=[2,4,8]
var arr3=[1,1,1]
console.log(arr1.concat(arr2))//[1,2,5,2,4,8]
console.log(arr1.concat(arr2,arr3))//[1, 2, 5, 2, 4, 8, 1, 1, 1]

join() 将数组作为字符串输出

指定分隔符将数组中的所有元素放入一个字符串,并返回这个字符串。 不会改变原数组

    var arr1=['Hello','everyone','Who','am','I']
console.log(arr1.join("*"))//Hello*everyone*Who*am*I 默认为 逗号,

pop() 删除数组最后一个元素

会改变原数组

    var arr1=['Hello','everyone','Who','am','I']
console.log(arr1.pop()) //删除数组的最后一个元素
console.log(arr1)// ['Hello', 'everyone', 'Who', 'am']

push() 数组的末尾添加一个或更多元素

向数组的末尾添加一个或更多元素,并返回新的长度。可以添加字符串、对象等等 会改变原数组

    var arr1=['Hello','everyone','Who','am','I']
console.log(arr1.push(1,{id:2,value:"你好"}))
console.log(arr1)

shift() 删除并返回数组的第一个元素

会改变原数组

    var arr = [1,2,3]
console.log(arr.shift());
console.log(arr); //[2,3]

unshift() 向数组的开头添加一个或更多元素

会改变原数组

    var arr1=['Hello','everyone','Who','am','I']
console.log(arr1.unshift(1,{id:2,value:"你好"}))
console.log(arr1)

reverse() 反转数组

会改变原数组

    var arr1=['Hello','everyone','Who','am','I']
console.log(arr1.reverse())

slice() 从一个数组中选择元素

截取数组的长度,并返回。 不会改变原数组

    var arr1=['Hello','everyone','Who','am','I']
console.log(arr1.slice(1,3))

splice() 删除\添加\替换元素

向数组中添加,或从数组删除,或替换数组中的元素,然后返回被删除/替换的元素。会改变原数组

splice(start,num,data1,data2,...);

    var arr1 = ['hello', 'everyone', 'who', 'am', 'i']
console.log("一个参数: "+arr1.splice(2)) // 表示从下标为2开始删除到最后,并返回被删除的数据
console.log(arr1)
var arr1 = ['hello', 'everyone', 'who', 'am', 'i']
console.log("两个参数: "+arr1.splice(2,2)) //表示从下标为2,开始删除两个数据,并返回被删除的数据
console.log(arr1)
var arr1 = ['hello', 'everyone', 'who', 'am', 'i']
console.log("三个参数: "+arr1.splice(2,2,"你好",520)) // 表示从下标为2,开始删除两个数据,并从开始删除的位置插入后面的若干个数据
console.log(arr1)

sort() 数组排序

对数组进行排序,默认是升序。如果要进行降序,要写一个函数来返回。 会改变原数组

    var arr1 = ['hello', 'everyone', 'who', 'am', 'i']
var arr2 = [2, 1, -4, 10, 6]
// 这是升序的
console.log(arr1.sort())
console.log(arr2.sort())

注意: 这个时候会发现数字排序出错了。

使用sort()时,是按第一位来计算的,所以会出现10<2的情况,所以解决这个我们要写一个函数来排序

    var arr1 = ['hello', 'everyone', 'who', 'am', 'i']
var arr2 = [2, 1, -4, 10, 6]
// 这是升序的
console.log(arr1.sort())
console.log(arr2.sort(px))
function px(a, b) {
return a - b == 0 ? 0 : a - b > 0 ? 1 : -1 //升序
// return a - b == 0 ? 0 : a - b > 0 ? -1 : 1 //降序
}

这样就解决了

toString() 数组转换为字符串

转换成字符串。 不会改变原数组

    var arr1 = ['hello', 'everyone', 'who', 'am', 'i']
var arr2 = [2, 1, -4, 10, 6]
console.log(arr1.toString()) // hello,everyone,who,am,i

indexOf() 查询指定数组元素

indexOf(value, start),value查询的数据,start表示从哪里开始查询,不存在返回-1

不会改变原数组

    var arr1 = ['hello', 'everyone', 'who', 'am', 'i']
console.log(arr1.indexOf("who")) // 2

forEach() 遍历数组

遍历数组的元素,默认三个参数item, index, array ,item为数组每一项的值,index为下标,array为数对本身

   var arr1 = [{ age: "18", name: "张三" }, { age: "90", name: "李四" }, { age: "23", name: "王五" }, { age: "12", name: "赵六" }]
arr1.forEach((item, index, array) => {
console.log("名字是:" + item.name + " 年龄是:" + item.age + " 下标" + index + " "+(arr1 == array))
})

filter() 过滤筛选数组元素方法

返回一个被过滤后的新数组 不会改变原数组

和forEach() 参数功能一样,都可以接受三个相同的参数,但是回调函数需要一个返回值。

例子:筛选年龄>=18的人

    var arr1 = [{ age: "18", name: "张三" }, { age: "90", name: "李四" }, { age: "23", name: "王五" }, { age: "12", name: "赵六" }]

    var arr2=arr1.filter((item) => {
if(item.age>=18)
return item
})
console.log(arr2)

map() 对数组进行函数式处理

不会改变原数组

和forEach() 参数功能一样,都可以接受三个相同的参数。

数组中的元素为原始数组元素调用函数处理后的值。

map 方法不会对空数组进行检测。

    var arr1 = [1, 3, 5, 7, 23, 54]
var arr2 = arr1.map((item, index) => {
return index % 2 == 1 ? item :item*2 //将偶数项扩大两倍
})
console.log(arr2)

every() 判断所有项是否符合要求

和forEach() 参数功能一样,都可以接受三个相同的参数。

判断数组中每一项是否都满足条件,只有所有项都满足条件,才会返回true。不会改变原数组

当遇到有一项不满足,即结束循环。

    var arr1 = [1, 3, 5, 7, 23, 54]
var arr2 = arr1.every((item, index) => {
console.log(item)
return item < 10
})
console.log(arr2)

some() 判断是否有一项满足条件

和forEach() 参数功能一样,都可以接受三个相同的参数。

判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。然后结束循环。如果遍历完全部不符合则返回false 不会改变原数组

    var arr1 = [54, 67, 9, 5, 7, 23]
var arr2 = arr1.some((item, index) => {
console.log(item)
return item < 10
})
console.log(arr2)

reduce() 正向累加器

不会改变原数组

接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

reduce() 对于空数组是不会执行回调函数的。

reduce(function(prev,now,index,self),indexvalue) :两个参数 ,第一个参数function为回调函数,有四个参数 上一次值,当前值,下标,数组本身。第二个参数为初始累加值

    var arr1 = [2,4,6,1]
var arr2 = arr1.reduce((pre, now,index) => {
console.log(pre , now ,index)
return pre+now
},5)
console.log(arr2)

reduceRight() 逆向累加器

和reduce()相反方向累加,从后往前。

写在最后

如果有补充后面再加。欢迎留言互动。

学习是个漫长的过程,虽然枯燥,但是收获颇丰。共勉。

爱是恒久忍耐,爱是永不止息

JavaScript数组方法大集合的更多相关文章

  1. js 数组方法大集合,各方法是否改变原有的数组详解

    不会改变原来数组的有: concat()---连接两个或更多的数组,并返回结果. every()---检测数组元素的每个元素是否都符合条件. some()---检测数组元素中是否有元素符合指定条件. ...

  2. JavaScript数组方法--every、some、fill

    接上一篇,JavaScript数组方法--concat.push,继续其他的数组方法. every:every() 方法测试数组的所有元素是否都通过了指定函数的测试. 先看其使用方法: functio ...

  3. JavaScript数组方法详解

    JavaScript数组方法详解 JavaScript中数组的方法种类众多,在ES3-ES7不同版本时期都有新方法:并且数组的方法还有原型方法和从object继承的方法,这里我们只介绍数组在每个版本中 ...

  4. 一站式超全JavaScript数组方法大全

    一站式JavaScript数组方法大全(建议收藏) 方法一览表 详细操作 本人总结了JavaScript中有关数组的几乎所有方法(包含ES6之后新增的),并逐一用代码进行演示使用,希望可以帮助大家! ...

  5. 【译】你应该了解的JavaScript数组方法

    让我们来做一个大胆的声明:for循环通常是无用的,而且还导致代码难以理解.当涉及迭代数组.查找元素.或对其排序或者你想到的任何东西,都可能有一个你可以使用的数组方法. 然而,尽管这些方法很有用,但是其 ...

  6. JavaScript数组方法大全(推荐)

    原网址:http://www.jb51.net/article/87930.htm 数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习, ...

  7. JavaScript 数组方法处理字符串 prototype

    js中数组有许多方法,如join.map,reverse.字符串没有这些方法,可以“借用”数组的方法来处理字符串. <!doctype html> <html lang=" ...

  8. 2018.2.27 JavaScript数组方法应用

    JavaScript数组方法应用 1.找出元素item在给定数组arr中的位置 function indexOf(arr,item){ return arr.indexOf(item); } func ...

  9. JavaScript数组方法速查,32个数组的常用方法和属性

    JavaScript数组方法速查手册极简版 http://30ke.cn/doc/js-array-method JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方 ...

随机推荐

  1. springboot 运行出现错误 Unable to start ServletWebServerApplicationContext due to missing ServletWebServerFactory bean.

    原因是我将springboot启动类换到了另外一个方法中 出现了一个异常 后来发现因为我换了类但是忘记了换类名所以才报错 @ComponentScan @EnableAutoConfiguration ...

  2. Android12系统源码分析:NativeTombstoneManager

    Android12系统源码分析:NativeTombstoneManager 概述 android12新增的system_server进程(LocalService)本地服务,用于管理native t ...

  3. C++学习笔记:08 多态性

    课程<C++语言程序设计进阶>清华大学 郑莉老师) 基本概念 多态性 具体的讲,在面向对象程序设计中,指同样的方法被不同对象执行时会有不同的执行效果. 多态的实现 绑定机制 绑定是将一个标 ...

  4. 架构师必备:MySQL主从同步原理和应用

    日常工作中,MySQL数据库是必不可少的存储,其中读写分离基本是标配,而这背后需要MySQL开启主从同步,形成一主一从.或一主多从的架构,掌握主从同步的原理和知道如何实际应用,是一个架构师的必备技能. ...

  5. ES6箭头函数(箭头函数和普通函数的区别)

    箭头函数 一个参数 // 只有一个参数 // f : 函数名称 // v : 函数参数 // v+v : 函数内容 let f=v=> v+v console.log(f(10)) //20 两 ...

  6. 十一、Abp vNext 基础篇丨测试

    前言 祝大家国庆快乐,本来想国庆之前更新完的,结果没写完,今天把剩下的代码补了一下总算ok了. 本章节也是我们后端日常开发中最重要的一步就是测试,我们经常听到的单元测试.集成测试.UI测试.系统测试, ...

  7. Java集合——List,Set,Map总结笔记

    1. 集合 Collection 1.1 Java 集合框架 ​ ​ ​ ​ ​ ​ ​ ​ Java 集合框架位于 java.util 包中.Java 集合框架主要包括两种类型的容器,一种是集合(C ...

  8. 运用shapefile.js解析Shp文件

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  9. Data Management Tools(数据管理工具)《二》

    (数据管理工具)<二> 点击跳转(数据管理工具)<一> 16.打包 # Process: 共享包 arcpy.SharePackage_management("&qu ...

  10. 内网渗透DC-2靶场通关(CTF)

    为了更好的阅读体验,请在pc端打开我的个人博客 DC系列共9个靶场,本次来试玩一下DC-2,共有5个flag,下载地址. 下载下来后是 .ova 格式,建议使用vitualbox进行搭建,vmware ...