JavaScript数组方法大全(分为会不会改变原数组)
若看不懂注释的输出方式可以将代码粘贴到浏览器中执行观看
1. 数组通用方法
Array.from: 将一个类数组转化成数组
类数组:Set, Map,对象等可遍历对象皆为类数组
Array.from('hello') // ['h', 'e', 'l', 'l', 'o']
Array.from([1, 2, 3], x => x + x) //[2, 4, 6]
Array.isArray: 判断传递的值是否是一个 Array 类型
Array.isArray([1,2,3]) // true
Array.isArray({a: 'a'}) // false
Array.isArray('hello') // false
Array.isArray(Array(3)) // true
Array.isArray(null) // false
Array.of: 把所有的参数放到一个数组中返回
const arr = Array.of(1, 2, 3); // [1, 2, 3]
const arr1 = Array.of(); // []
2. 改变原数组的方法
Array.pop: 删除原数组的最后一个元素
Array.push: 在原数组的末尾添加一个元素
Array.shift: 删除原数组的第一个元素
Array.unshift: 在原数组开头添加一个元素
const arr = [1,2,3]
arr.pop() // 3; arr: [1,2]
arr.shift() // 1; arr: [2]
arr.push(3) // 2; arr: [2,3]
arr.unshift(4) // 2; arr: [4,2,3]
Array.sort
const asc = (a,b) => a - b
const des = (a,b) => b - a
const arr = [3,1,4,2,7,10]
arr.sort(asc) // [1, 2, 3, 4, 7, 10]
arr.sort(des) // [10, 7, 4, 3, 2, 1]
arr.sort() // [1, 10, 2, 3, 4, 7] 字典序
Array.reverse: 颠倒原数组中元素的顺序
const arr = [1,2,3]
arr.reverse() // [3,2,1]
Array.splice: 删除原数组中的子串
const arr = [1,2,3,4,5]
arr.splice(1,2) // [2,3]; arr: [1,4,5]
Array.copyWithin: 从数组的指定位置拷贝元素到另一个指定位置
const arr = [1,2,3,4,5,6]
arr.copyWithin(4, 1, 3)
console.log(arr) // [1,2,3,4,2,3]
Array.fill: 用一个固定值替换数组中的元素
/** 第一个参数:填充的值* 第二个参数:填充的开始位置(闭区间)* 第三个参数:填充的结束位置(开区间)*/const arr = [1,2,3,4,5,6]
arr.fill(0, 1, 3) // [1,0,0,4,5,6]
Array(2).fill(0) // [0,0]
3.不改变原数组的方法
Array.concat: 合并多个数组并返回一个新数组
const arr1 = [1, 2]
const arr2 = ['a', 'b']
const arr3 = arr1.concat(arr2) // [1, 2, 'a', 'b']
Array.entries: 返回一个数组的迭代对象(Iterator)
const arr = [1,2,3]
const it = arr.entries()
console.log(it.next()) // {value: [0,1], done: false}
console.log(it.next()) // {value: [1,2], done: false}
console.log(it.next()) // {value: [2,3], done: false}
console.log(it.next()) // {value: undefined, done: true}
Array.every:对数组中每一项运行给定函数,如果该函数对每一项返回true,则返回true。
Array.some:对数组中每一项运行给定函数,如果该函数对任一项返回true,则返回true。
const arr = [1,2,3]
arr.every(v => { console.log(v); return v < 2}) // 1 2 false
arr.some(v => { console.log(v); return v < 2}) // 1 true
Array.filter: 创建一个新数组,返回原数组中满足条件的所有元素
const arr = [{ age: 10, name: '10'},{ age: 23, name: '23'},{ age: 16, name: '16'},{ age: 11, name: '11'},{ age: 37, name: '37'}
]
let newArr = arr.filter(v => v.age < 18)
//{age: 10, name: '10'}
//{age: 16, name: '16'}
//{age: 11, name: '11'}
Array.map: 返回一个新数组,数组中的元素为原数组经过处理后的值
const arr1 = [{id:1}, {id:2}, {id: 3}]
arr1.map(v => v.id) // [1, 2, 3]
Array.find: 返回数组中第一个满足条件的元素
Array.findIndex: 返回数组中第一个满足条件的元素的索引值
const arr = [{ age: 10, name: '10'},{ age: 23, name: '23'},{ age: 16, name: '16'},{ age: 11, name: '11'},{ age: 37, name: '37'}
]
arr.find(v => v.age > 18) // { age: 23, name: '23'}
arr.findIndex(v => v.age > 18) // 1
Array.indexOf: 找到满足条件的元素的索引值,第一个参数是开始寻找的位置
Array.lastIndexOf: 寻找顺序与indexOf相反
const arr1 = ['a', 'b', 'c','b']
arr1.indexOf('b') // 1
arr1.lastIndexOf('b') // 3
Array.flat: 创建一个新数组,扁平化原嵌套数组,参数为扁平的层数,该方法会移除空项
const arr = [1, , [2, [3, , [4]]]]
let newArr = arr.flat() // [1,2,[3, , [4]]]
let newArr = arr.flat(2) // [1,2,3,[4]]
let newArr = arr.flat(3) // [1,2,3,4]
Array.forEach: 遍历数组中的每一个元素
const arr1 = [1,2,3]
arr1.forEach(v => console.log(v)) // 1,2,3
Array.includes: 判断一个数组中是否包含一个元素
const obj = {id: 2, value: '2'}
const arr = [obj,'hello',{id: 1, value: '1'}
]arr.includes({id: 1, value: '1'}) // false
arr.includes(obj) // true
arr.includes('hello') // true
Array.join: 将元素连接成一个字符串,并用分隔符分割(第一个参数),元素会执行 toString
const arr = [1, 'b', {c: 2}, [3,4]]
arr.join(' & ') // "1 & b & [object Object] & 3,4"
Array.slice: 提取数组中的子串到新数组
const arr = [1,2,3,4,5]
arr.slice(2,4) // [3,4];
JavaScript数组方法大全(分为会不会改变原数组)相关推荐
- 有哪些数组操作?哪些操作不会改变原数组?
作业帮面试题,原题目是"哪些数组操作不会改变原数组?",这里扩展一下,列出了所有的数组操作. 1.shift 删除数组中第一个元素,返回被删除的元素,改变了原数组 array.sh ...
- JavaScript数组方法大全解
0 前言 本文只讲解标准化方法,而不会讲解实验性方法,如at().groupBy().groupByMap()和toSource(). 数组中的部分方法需要提供区间范围begin/start和end, ...
- 「数组方法」写给女友的一系列 JS 数组操作(建议收藏 | 内附思维导图)
前言 最近和女友,咳咳-(说出来可能会被打s)学习JS数组方法,用几个字形容的话就是听说过,实际使用.遇到的时候就分不清具体方法会得到怎样的结果. 今天我将通过这篇文章好好整理一下关于JS数组的方法, ...
- js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...
1.给对象添加属性:使用 object.prop 或object['prop'] 给对象添加属性 let obj={};obj.name="zhangsan";obj[" ...
- 前后端交互必备之js数组方法大全
CSDN写作新手,写的不妥之处,请大佬纠正且多多包涵. 文章目录 数组简介 一.js数组方法 二.js数组方法的使用 1.基础方法 2.进阶方法 数组简介 数组,就是将多个元素(通常是同一类型)按一定 ...
- JavaScript sort 方法 默认排序顺序为按字母升序-数组常用方法
默认排序顺序为按字母升序. 注意:当数字是按字母顺序排列时"40"将排在"5"前面. 使用数字排序,你必须通过一个函数作为参数来调用. 函数指定数字是按照升序还 ...
- JS操作数组方法大全--你了解多少?
面试前后将有关数组的所有方法进行了一个总结,希望能帮到大家. 目录 一.什么是数组? 二.创建数组两种方式 1.使用Array构造函数创建数组对象 2.使用"[ ]" 字面量来创建 ...
- js操作改变原数组的解决方法
最近在开发的时候发现js中的循环操作会改变原数组,var一个变量承接也不行 甚至连map方法都会改变原数组,下面是解决方法 let a = ['a','b','c'] let b = [[2, 0, ...
- 重写数组的方法(改变原数组)
下图是我自我学习模拟数组时总结的一些重新数组的方法: 本文我们暂不讨论不改变原数组的方法,只谈改变原数组用到的 6 种方法. 改变原数组的方法 push() 按参数顺序向数组尾部添加元素,返回新数组的 ...
最新文章
- MySQL - 多版本控制 MVCC 机制初探
- 验证客户端和服务端可以传输经SM4加密的密文数据,从而验证发送数据已使用服务器密码机进行SM4加密,而不是随便的字符串乱码
- 教徒计划出品:升级vCenter41到vCenter5
- 腾讯广告算法大赛官方“开挂”,为你直播赛题解析!
- 苹果M1芯片:如何开启一个时代
- poj2373 Dividing the Path (单调队列+dp)
- windows 照片查看器无法打开图片 因为照片查看器不支持此文件格式,或者你没有照片查看器的最新更新
- 运放实现方波三角波发生器-总结报告
- Nginx中传输带宽限制
- POI word 内容提取 Strict OOXML isn‘t currently supported, please see bug #57699
- 微信好友大揭秘,使用Python抓取朋友圈数据,通过人脸识别全面分析好友,一起看透你的“朋友圈”
- edk2+vs2019环境搭建
- C中kbhit()和getch()以及gets()和getchar()的用法
- 图数据库HugeGraph简介与快速入门
- java 上传zip压缩文件并且解压
- ElasticSearch基础介绍:5:可视化工具之cerebro
- 树莓派的ssh连接配置
- 黑苹果OC配置工具:OpenCore Configurator for Mac(2.48.0.0中文)
- 一篇相当不错的js function详解 读了一定有收获
- 电子商务中计算机网络的应用论文参考文献,计算机网络技术计算机网络论文,关于计算机网络技术应用相关参考文献资料-免费论文范文...
热门文章
- 2022最新面试题(含css、html、js、es6、Vue)
- matlab之创建图像轮廓图函数imcontour
- 逻辑智力测试-----让你怀疑人生!!
- 微信小程序canvas把正方形图片绘制成圆形
- R语言绘制中国地图:着色省份、标注省份名称
- github 和git_Git和GitHub入门指南
- python爬虫猫眼电影票房_python爬取猫眼电影top100排行榜
- Mysql- --DQl语句(select数据查询语言,多表查询,View试图)linux常用(重点)
- 品牌在抖音开通蓝V企业号的价值、权益及内容布局一键解析
- python中怎么计数_python怎么实现计数?