JS数组方法-改变原数组与不改变原数组的方法集合
改变原数组的方法
push()
push()
方法向数组的 末尾添加
一个或多个元素,并返回新的长度
var arr = ['a','b','c'];
console.log( arr.push('d')) //push()以后,返回的数组的长度就是4
console.log(arr) //push以后,arr=['a','b','c','d']
pop()
pop()
方法 删除数组
的 最后一个
元素并返回删除的元素
var arr = ['a','b','c'];
console.log(arr.pop()); // 删除最后一个元素c
console.log(arr) // 删除最后一个元素c后,返回剩下的元素['a','b']
shift()
shift()
方法 删除
并返回数组的第一个
元素
var arr = ['a','b','c'];console.log(arr.shift()) // aconsole.log(arr) // ['b','c']
unshift()
unshift()
方法向数组的 开头
添加一个或多个
元素,并返回新的长度
var arr = ['a','b','c'];console.log(arr.unshift('aaa')); // 删除最后一个元素aaaconsole.log(arr) // 添加后的数组为 ['aaa','a','b','c']
splice()
splice()
方法用于向数组中 插入、删除或替换
数组里的元素
var arr = ['a','b','c'];
console.log(arr.splice(1,0)) //从下标1开始删除0个元素,返回的是个空数组
// console.log(arr.splice(1,1)) // 从下标1开始删除一个元素,返回的是删除的元素 b
// console.log(arr.splice(1,0,'hello','world')) // 从下标1开始删除0个元素,添加2个新的元素,返回的是['a', 'hello', 'world', 'b', 'c']
reverse()
reverse()
方法用于反转数组的元素排序,例如:
var arr = ['a','b','c'];
arr.reverse(); // 通过reverse()将数组元素反转
console.log(arr) // ['c', 'b', 'a']
sort()
sort()
方法对数组的元素进行 排序
,排序顺序可以是字母或数字,升序或降序;默认按 字母升序
排列
- 数字升序排列,
a-b
, 生序排列,如下:
var arr = [10,2,66,8,16];arr.sort(function(a,b){return a-b});console.log(arr) // 返回 [2, 8, 10, 16, 66]
- 数字降序排列,
b-a
, 降序排列,如下:
var arr = [10,2,66,8,16];
arr.sort(function(a,b){return b-a});
console.log(arr) // 返回 [66, 16, 10, 8, 2]
- 默认字母升序排列,如下:
var arr = ['red','green','blue','orange'];
arr.sort();
console.log(arr) // ['blue', 'green', 'orange', 'red']
- 字母降序排列,如下:
var arr = ['red','green','blue','orange'];
arr.sort(); // 先默认按字母升序排列
arr.reverse(); // 然后再通过reverse()方法将升序排列的数组里的元素颠倒顺序,变成降序排列
console.log(arr) // 返回 ['red', 'orange', 'green', 'blue']
forEach()
forEach()
方法调用数组的每个元素,并将元素传递给回调函数;对空数组不会执行回调
语法为: array.forEach(function(item,index,arr),thisValue)
,几个参数的含义如下:
item
为必填项表示当前的元素index
为可选项代表当前元素的索引arr
为可选项代表当前元素所属的数组对象thisValue
为可选项,传递给函数的值一般用"this"
值。
如果这个参数为空,"undefined"
会传递给"this"
值
例如:
var array= ['a','b','c'];
array.forEach(function(item,index,arr) {console.log(item,index,arr)
})
打印输出如下:
不改变原数组的方法
filter()
filter()
方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。它不会对空数组进行检测
语法: array.filter(function(item,index,arr),thisValue)
,几个参数的含义如下:
item
为必填项表示当前的元素index
为可选项代表当前元素的索引arr
为可选项代表当前元素所属的数组对象thisValue
为可选项,对象作为该执行回调时使用,传递给函数,用作‘this’
的值,如果省略了
thisValue,
‘this’的值为‘undefined’
例如:
let array = [11,22,33,44,55,66];
let newArray = array.filter((item,index,arr) => {//item: 当前的元素值 index当前值的索引 arr当前的数组return item > 22;
})
console.log(newArray) // 返回 [33, 44, 55, 66] 返回值是一个符合条件的新数组
concat()
concat()
方法连接于连接两个或多个数组,并返回结果;
该方法没有改变现有的数组,但是会返回连接两个或多个数组链接的副本
语法: array1.concat(array2,array3,...,arrayX)
var arr1 = [1,2,3];
var arr2 = [4,5,6];
console.log(arr1.concat(arr2)); // 输出[1,2,3,4,5,6]
slice()
slice()
方法 选取数组的一部分,并返回一个新数组
该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回
语法: array.slice(start,end)
,参数的介绍如下:
- start: 截取开始的位置的索引,包含开始索引
- end: 截取结束的位置的索引,不包含结束索引;也可以省略不写,若省略会截取从开始索引往后的所有元素
- 索引值可以传递负值,传递负值就从后往前计算 -1代表倒数第一个 -2代表倒数第二个
var arr = ['aa','bb','cc','dd','ee','ff'];
console.log(arr.slice(1,4)); // 返回 ['bb','cc','dd']
join()
join()
方法通过指定的 分隔符
将数组中的元素进行分割并转换成一个字符串
var arr = ['aa','bb','cc','dd','ee','ff'];
var newArr = arr.join('-');
console.log(newArr) // 返回 aa-bb-cc-dd-ee-ff
map()
map()
方法通过指定函数处理数组的每个元素,并返回处理后的数组
map()
方法,按照原数组的顺序依次处理元素;不会对空数组进行检测
语法: array.map(function(item,index,arr),thisValue)
,各个参数的含义如下:
item
: 必填项,当前元素的值index
: 可选项,当前元素的索引值arr
: 可选项,当前元素属于的数组对象thisValue
: 可选项,对象作为该执行回调时使用,传递给函数,用作"this"
的值。如果省略了thisValue
,或者传入null、undefined
,那么回调函数的this
为全局对象
。
let arr = [1,2,3,4,5];
let newArr = arr.map(function(item,index,arr) {return item + 1
})
console.log(arr,newArr)
打印输入如下:
every()
every()
方法,检测数组元素的 每个元素
是否都符合
条件(通过函数提供),不会对空数组进行检测
如果数组中检测到有一个
元素不满足,则整个表达式返回false
,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
let arr = [11,22,33,44,55,66];
let newArr = arr.every(function(item,index,array){return item > 20;
})
console.log(newArr) //false
some()
some()
方法 检测数组元素中是否有元素符合
指定条件(函数提供)
some()
方法会依次执行数组的每个元素,some()
不会对空数组进行检测。
如果有一个
元素满足
条件,则表达式返回true
, 剩余的元素不会再执行检测。
如果没有满足
条件的元素,则返回false
。
let arr = [11,22,33,44,55,66];
let newArr = arr.some(function(item,index,array){return item > 20;
})
console.log(newArr) //true
indexOf()
indexOf()
方法,搜索数组中的元素,并返回它所在的位置
该方法将从头到尾地检索数组,看它是否含有对应的元素
开始检索的位置在数组start
处或数组的开头(没有指定 start
参数时)
如果找到一个 item
,则返回 item
的第一次出现的位置。开始位置的 索引为0
如果在数组中没找到
指定元素,则返回 -1
var array = ['red','green','blue','green'];
var newArray = array.indexOf('green');
console.log(newArray) //1
JS数组方法-改变原数组与不改变原数组的方法集合相关推荐
- js笔记(三)ES5、ES5新增的数组的方法、字符串的方法、字符编码、对象的序列化和反序列化、bind
数组方法.字符串方法总结 大目录 小目录 一.ES5严格模式 1. 严格模式: 2. 严格模式的行为变更: 二.ES5新增的数组的方法 1. 判断是否为数组:Array.isArray(): 2. 判 ...
- JS中对数组元素进行增、删、改、查的方法,以及其他方法
总结一下 JS中提供的方法可以对数组元素进行增.删.改.查以及其他方法 一.增加元素 1.push() push可接收任意数量的参数,把它们逐个添加至数组末尾,并且可以返回修改后数组的长度. 例子: ...
- js中实现截取数组的后几个元素作为一个新数组的方法
js中实现截取数组的后几个元素作为一个新数组的方法 有时候我们会遇到这种需求,截取数组中后5个元素作为一个新数组,且顺序不能变.数组中的slice()方法和splice()方法都可以实现这样的操作. ...
- JS解析json数据并将json字符串转化为数组的实现方法
json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法, ...
- js数组去重排序(升序、降序、随机)方法
js原生去重排序 var hhl = [1, 5, 6, 3, 2, 7, 6, 1, 5, 4, 8, 6, 9]var newArr = [];//创建一个新数组var isRepeat = fa ...
- 有哪些数组操作?哪些操作不会改变原数组?
作业帮面试题,原题目是"哪些数组操作不会改变原数组?",这里扩展一下,列出了所有的数组操作. 1.shift 删除数组中第一个元素,返回被删除的元素,改变了原数组 array.sh ...
- 3.js中判断数组中是否存在某个对象/值,判断数组里的对象是否存在某个值 的五种方法 及应用场景|判断数组里有没有某对象,有不添加,没有则添加到数组
3.js中判断数组中是否存在某个对象/值,判断数组里的对象是否存在某个值 的五种方法 及应用场景 一.当数组中的数据是简单类型时: 应用js中的indexof方法:存在则返回当前项索引,不存在则返回 ...
- 【原】动态申请二维数组并释放的三种方法
在C++中实现变长数组 一般来说,有三种方法来申请多维数组:C的malloc/Free C++的new/delete STL容器Vector 1.变长一维数组 这里说的变长数组是指在编译时 ...
- 程序员编程艺术第二十七章:不改变正负数相对顺序重新排列数组(无解?)
第二十七章:不改变正负数之间相对顺序重新排列数组.时间O(N),空间O(1) 前言 本文开始之前,顺道说个事:CSDN最近开始评选10大博客专栏,投票地址为:http://event.blog.csd ...
- html中splice向数组添加元素,js中splice()的强大(删除,插入或替换数组的元素)
1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(其实位置),第二个参数(0),第三个参数( ...
最新文章
- Go 学习笔记(70)— Go 变量声明、变量初始化、值类型变量赋值、指针类型变量赋值
- 新手入门:Kaggle NLP比赛总结
- tp的echo输出字符串后换行
- access集团和abm_ACCESS集团宣布启动“ABM单创66会员狂欢节”
- 使用opencv简单的播放AVI程序(40行)
- java字符流和字节流的区别_java字符流与字节流的区别是什么
- Windows7搭建FTP文件
- 《老码识途》读书笔记:第一章(中)
- 析构语意学(Semantics of Destruction)
- Photoshop CS6安装教程
- Ansible Jinjia2 模板
- 如何用计算机基础知识提问,职业学校《计算机应用基础》课的提问策略
- 大型企业开发的ERP系统主要包括几个模块
- 如何根据商品条码查询商品名称和价格信息?
- idea 2019激活置2099年教程 diea版本为2018.3版
- Google表单初学者指南
- 普通文本el-tootip超出宽度自动显示省略号,悬停显示
- sftp命令上传本地文件到服务器,使用sftp命令上传文件夹方法
- .net6API使用AutoMapper和DTO
- 【转】2007最牛X网站收集,有些网站蛮有意思
热门文章
- chrome字体发虚神马的
- 2017乘风破浪,量化护航 ——京东量化中信证券线下交流会
- Python机器学习算法入门教程(一)
- IntelliJ IDEA创建Servlet(web)
- 小米手机微信怎样能显示定位服务器地址,小米手机丢了微信可以定位
- FuntouchOS跟鸿蒙系统,vivo发布新操作系统OriginOS,与FuntouchOS平行运行
- 硬盘显示没有初始化找回资料法子
- java字符串的定义方法
- 激发儿童数学兴趣的iPhone、iPad游戏“Panasonic Prime Smash!”全面改版
- 图像金字塔图层叠加实现图像融合(基于opencv-python)