前端知识点总结——数组的方法

最新推荐文章于 2023-07-12 17:28:41 发布
最新推荐文章于 2023-07-12 17:28:41 发布
阅读量180 收藏
点赞数
分类专栏： 面试 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33290968/article/details/119317469
版权

数组的方法

  1. push()：向数组末尾添加一个或多个元素，返回新的长度，会改变原数组
let arr1 = [1,2,3]
let length = arr1.push(4,5,6)

console.log(length); // 6
console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]
  1. pop()：删除数组最后一个元素，返回删除的元素，会改变原数组
let arr1 = [1,2,3]
let nums = arr1.pop()

console.log(nums); // 3
console.log(arr1); // [ 1, 2 ]
  1. unshift()：向数组开头添加一个或多个元素，返回新的长度，会改变原数组
let arr1 = [1,2,3]
let length = arr1.unshift(4,5,6)

console.log(length); // 6
console.log(arr1); // [ 4, 5, 6, 1, 2, 3 ]
  1. shift()：删除数组的第一个元素，返回删除的值，会改变原数组
let arr1 = [1,2,3]
let nums = arr1.shift()

console.log(nums); // 1
console.log(arr1); // [ 2, 3 ]
  1. concat()：连接两个或多个数组，返回一个新数组，不会改变原数组
let arr1 = [1,2,3]
let arr2 = [4,5,6,7,8]
let arr3 = arr1.concat(arr2)
let arr4 = arr1.concat([11,22,33,44])

console.log(arr3); //[1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr4); //[1,  2,  3, 11, 22, 33, 44]
  1. join()：将数组的元素放入到字符串中，，通过指定分隔符分隔，默认为,，返回一个字符串，不改变原数组
let arr1 = [1,2,3]
let str1 = arr1.join()
let str2 = arr1.join(':')

console.log(str1); // 1,2,3
console.log(str2); // 1:2:3
console.log(typeof str1); // string
  1. slice( start, end )：返回一个新的数组，包含从start到end（左闭右开）的原数组中的元素，不会改变原数组
let arr1 = [1,2,3]
let arr2 = arr1.slice(0,2)

console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 2 ]
  1. splice( start, deleteCount, replace)：从index处开始删除deleteCount个数（左闭右开），并使用replace的数来进行替换，返回被删除元素的数组，会改变原数组
let arr1 = [1,2,3]
console.log(arr1); // [ 1, 2, 3 ]
let arr2 = arr1.splice(1,0)
console.log(arr2); // [] 返回的是被删除元素组成的数组，删除个数为0，返回空数组
let arr3 = arr1.splice(1,0,8)
console.log(arr1); // [ 1, 8, 2, 3 ]
let arr4 = arr1.splice(1,1)
console.log(arr1); // [ 1, 2, 3 ]
  1. sort()：排序，返回排序过后的新数组，会改变原数组 : 最好手动规定排序的规则，默认排序易出现混乱
let arr1 = [1,2,5,3,8,56,89,5,89,3]

let arr2 = arr1.sort((a,b) => a - b)
console.log(arr2); // [  1,  2,  3,  3,  5,  5, 8, 56, 89, 89 ]
console.log(arr1); // [  1,  2,  3,  3,  5,  5, 8, 56, 89, 89 ]

let arr3 = arr1.sort((a,b) => b - a)
console.log(arr2); // [  89,  89,  56,  8,  5,  5,  3,  3,  2,  1]
console.log(arr1); // [  89,  89,  56,  8,  5,  5,  3,  3,  2,  1]
  1. reverse()：颠倒数组中元素的顺序，返回颠倒后的数组，会改变原数组
let arr1 = [1,4,6,3,8,9]
let arr2 = arr1.reverse(arr1)

console.log(arr1); // [ 9, 8, 3, 6, 4, 1 ]
console.log(arr2); // [ 9, 8, 3, 6, 4, 1 ]
  1. filter()：对数组中的每个元素执行指定函数，如果返回结果为true则加入到新数组中，不改变原数组
let arr1 = [1,4,6,3,8,9]
let arr2 = arr1.filter( index => index > 3)

console.log(arr1); // [ 1, 4, 6, 3, 8, 9 ]
console.log(arr2); // [ 4, 6, 8, 9 ]
  1. map()：对数组中每个元素都执行指定函数，返回的结果组成一个新数组，不会改变原数组
let arr1 = [1,2,3,4,5,6]
let arr2 = arr1.map(index => ++index)

console.log(arr1); // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr2); // [ 2, 3, 4, 5, 6, 7 ]
  1. forEach()：遍历数组
let arr1 = [1,2,3,4,5,6]
let arr2 = []
arr1.forEach(index => arr2.push(index))

console.log(arr2); // [ 1, 2, 3, 4, 5, 6 ]
  1. indexOf( searchElement, fromIndex )和lastIndexOf( searchElement, fromIndex )：都是查找是否存在存在某个值，不存在返回-1，存在返回位置
let arr1 = [1,2,3,4,5,6]
let arr2 = [11,22,33,44,55,66]
let a = arr1.indexOf(1,0)
let aa = arr1.indexOf(1,1) // 从1开始查找
let b = arr2.lastIndexOf(22,5) // 从下标为5开始查找，22不存在

console.log(a,b); // 0 1
console.log(aa); // -1
  1. every()和some()：都是对数组的每一项执行执行函数，every()是全部都为true时才返回true，some()是只要有一项为true时都为true。
let arr1 = [1,2,3,4,5,6]
let a = arr1.every(index => index > 5)
let aa = arr1.some(index => index > 5)

console.log(a); // false
console.log(aa); // true

ES6新增操作数组方法

  1. find()：传入一个回调函数，找到数组中符合搜索规则的第一个元素
let arr1 = [1,2,3,4,5,6,9]
let a = arr1.find(index => index/3 === 3)

console.log(a); // 9
  1. findIndex()：传入一个回调函数，找到数组中符合搜索规则的第一个元素的下标
let arr1 = [1,2,3,4,5,6,9]
let a = arr1.findIndex(index => index/3 === 3)

console.log(a); // 6
  1. fill(value, start, end)：使用新元素分别替换数组中start到end（左闭右开）的元素，会改变原数组
let arr1 = [1,2,3,4,5,6,9]
let arr2 = arr1.fill(666, 0,3)

console.log(arr1); // [  666, 666, 666, 4,  5,   6,   9]
console.log(arr2); // [  666, 666, 666, 4,  5,   6,   9]
  1. copyWithin()：选择数组的某个下标，从该位置开始复制数组元素，默认从0开始复制
let arr1 = [0,1,2,3,444,5,6,7,8,9]
let arr2 = [0,1,2,3,444,5,6,7,8,9]
let arr3 = [0,1,2,3,4,5,6,7,8,9]
let a = arr1.copyWithin(4) // 从下标0复制到下标4（左闭右开），插入到下标为4的位置，后面值依次排列，总长不变
let b = arr2.copyWithin(4,2) // 从下标2复制到下标4（左闭右开），插入到下标为4的位置，后面值依次排列，总长不变
let c = arr3.copyWithin(4,1,5) // 从下标1（包括）开始复制，结束位置是5（不包括），从位置4开始替换后面的值，总长不变

console.log(a); // [0, 1, 2, 3, 0, 1, 2, 3, 444, 5]
console.log(b); // [0, 1, 2, 3, 2, 3, 444, 5, 6, 7]
console.log(c); // [0, 1, 2, 3, 1, 2, 3, 4, 8, 9]
  1. from()：将类似数组的对象（array-like object）和可遍历（iterable）的对象转为真正的数组
let str1 = 'a,b,c,d'
let str2 = ['1','2','3','4']
let str3 = 'hello world'

let arr1 = Array.from(str1)
let arr2 = Array.from(str2)
let arr3 = Array.from(str3)

console.log(arr1); // [  'a' , ',' , 'b' , ',' , 'c' , ',' , 'd']
console.log(arr2); // [ '1', '2', '3', '4' ]
console.log(arr3); // [  'h', 'e', 'l', 'l',  'o', ' ', 'w', 'o',  'r', 'l', 'd']
  1. entries()：返回键值对，不改变原数组
// 数组
let arr1 = [1,2,3,4,5]
let arr2 = arr1.entries()

for (const iterator of arr2) {
  console.log(iterator); //[ 0, 1 ] [ 1, 2 ] [ 2, 3 ] [ 3, 4 ] [ 4, 5 ]
}

// Set
let arr = new Set([1,2,3,'a','b'])
for (const iterator of arr.entries()) {   
  console.log(iterator); // [ 1, 1 ] [ 2, 2 ] [ 3, 3 ] [ 'a', 'a' ] [ 'b', 'b' ]
}

//Map
let arr = new Map([['a',1],['b',2],[false,3],[true,4]])
arr.set(1,5)

console.log(arr); // Map(5) { 'a' => 1, 'b' => 2, false => 3, true => 4, 1 => 5 }
for (const iterator of arr.entries()) {
  console.log(iterator); // [ 'a', 1 ]  [ 'b', 2 ]  [ false, 3 ]  [ true, 4 ]  [ 1, 5 ]
}
  1. values()：返回键值对中的value值，不改变原数组
// 数组
let arr1 = [1,2,3,4,5]
let arr2 = arr1.values()

for (const iterator of arr2) {
  console.log(iterator);  // 1 2 3 4 5
}

//Set
let arr = new Set([1,2,3,'a','b'])
for (const iterator of arr.values()) {   
  console.log(iterator); // 1 2 3 a b
}

//Map
let arr = new Map([['a',1],['b',2],[false,3],[true,4]])
arr.set(1,5)

for (const iterator of arr.values()) {
  console.log(iterator); // 1 2 3 4 5
}
  1. keys()：返回键值对中key的值，不改变原数组
// 数组
let arr1 = [1,2,3,4,5]
let arr2 = arr1.keys()

for (const iterator of arr2) {
  console.log(iterator);  // 0 1 2 3 4 
}

//Set
let arr = new Set([1,2,3,'a','b'])
for (const iterator of arr.keys()) {   
  console.log(iterator); // 1 2 3 a b
}

//Map
let arr = new Map([['a',1],['b',2],[false,3],[true,4]])
arr.set(1,5)

for (const iterator of arr.keys()) {
  console.log(iterator); // a  b  false  true  1
}
  1. includes(searchElement, fromIndex)：判断数组中是否存在该元素，可以替换ES5的indexOf()方法， indexOf()判断NaN会出现错误
let arr = [1,2,3,4,5,6,7,8,9,NaN]

let a = arr.indexOf(NaN) // -1 在判断NaN会出现错误
let aa = arr.indexOf(4) // 3
let b = arr.includes(NaN) // true includes只能判断是否存在，具体位置不能判断
let bb = arr.includes(4) // true
西瓜坤坤坤坤
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端数组方法大全
XRTF_的博客
01-23 982
是 JavaScript 数组对象的一个方法，用于对数组中的每个元素执行提供的回调函数，并返回执行后的结果组成的新数组。是 JavaScript 中数组对象的一个方法，它用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度。是 JavaScript 数组对象的一个方法，用于从数组中提取某个范围内的元素，并返回一个新数组，而不改变原始数组。是 JavaScript 数组对象的一个方法，用于向数组的开头添加一个或多个元素，并返回修改后的数组的新长度。
前端学习案例8-数组方法8
qq_41632427的博客
01-07 58
前端
前端开发中常见的20个数组方法，你真的掌握了吗？
最新发布
m0_57524265的博客
07-12 7374
javascript内置有很多好用的数组方法，包括添加和删除元素、合并和拆分数组、以及对数组进行排序和搜索等，看看你掌握了几个，文末包含一道将平铺数组结构转换为tree型数组结构练习题！
前端常用数组方法集合
沈行的博客
08-28 3872
前端JavaScript常用数组方法集合
JavaScript数组方法总结
热门推荐
小瑾沐晚风的博客
09-25 3万+
一.JavaScript中创建数组的方式 1.使用Array构造函数 var color=new Array();     注意：括号里面参数可以有参数，若为一个数字，表示该数组的长度，如果为多个数字或者一个（多个）非数字表示的是传递数组中应该包含的值。 2.使用数组字面量 var color=[]; 二. 数组的长度 三.数组的方法有数组原型方法，也有从object对象继承来的...
前端必会的数组常用方法
m0_62877814的博客
11-26 701
前端必会的数组常用方法
前端数组的常用方法汇总
weixin_51710356的博客
10-26 2893
创建数组有两种方式：1、数组的字面量2、通过关键字new来创建两种变量的调用方式完全相同，只是创建方式不同。
前端数组常用的方法
weixin_45901950的博客
05-13 3416
前端数组常用的方法 一、会改变原数组的方法 （以下方法都会改变原数组的元素） 1、头尾增删 arr.push( 元素 )：在arr数组的尾部增加一个元素，并返回新数组的长度 var arr = [a, b, c] var str = arr.push('d') console.log(str) // 4 返回新数组的长度 console.log(arr) //[a, b, c, d] arr.pop()：把arr数组尾部的一个元素删除，并返回删除的这个元素 v
前端常用几个数组方法
FUFCY的博客
05-17 1455
1.slice()方法返回一个新的数组对象，这一对象是一个由 start和end决定的原数组的浅拷贝（包括 start，不包括end）。原始数组不会被改变。 //arr.slice(start, end) const arr = ['a','b','c','d']; console.log(arr.slice(2));//删除两个，从头开始删 //["c","d"] console.log(arr.slice(2, 3));//只保存（从第二开始数（不包括第二个），数到第三个） // ["...
前端对数组操作最常用的几种方法
似水流年，是谁苍白了等待
06-30 2715
由于前端的业务比较复杂，在数据的增删过程中可能需要以数组的形式操作，但是数组有时候可能会不满足用户的需求，比如说我在数组中插入某一个值，不影响原来的元素，或者删除一个元素。删除的时候从开头删呢还是结尾删，都需要考虑。所有js提供了几种常用的方法进行对数组操作，详解如下代码： 1.push() ①说明 push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。 如果出现push()方法,那后边就必须跟一个参数,最少是一个,其他的可选 push()方法可把它的参数顺序添加到arrayO...
Javascript对象数组处理方法
猫
05-25 2292
js对象数组，加一个对象。定义两个对象，定义一个空数组，然后把对象放入数组中。 let a1 = { index: 1, name: 'kiko', tel: 18579156626 }; let a2 = { index: 2, name: 'kiko', tel: 18579156626 }; let b = []; b.p...
前端js常用的数组方法
weixin_44672169的博客
03-26 261
从数组中删除元素： splice（元素下标，删除个数1） handleClose22(row){ console.log(row) for(let i=0;i<this.tableData.length;i++){ if(row.tag_id==this.tableData[i].tag_id){ this.tagarr.push({name:this.tableData[i].name,tag_id:this.tab
前端开发 js 数组常用方法总结
jyn15159的博客
11-03 745
js数组常用方法 findIndex获得指定数组元素下标 // 参数：函数（被传入的函数，回调函数） // 格式要求： // item 回调函数，代表每一次遍历的数据 // return 判断条件(自己写) // 返回：满足条件的第一个元素的下标，若没有，返回-1； var index = arr.findIndex(function(item) { return item === 20; }); console.log(index); // 根据
前端数组array方法总结
Artemis_Wang的博客
07-19 517
5 个纯函数 8 个遍历方法 5 个纯函数 array.map() //1 array.filter() //2 array.concat(item...) //3 array.slice(start, end) //4 array.sort(compareFn) //5 8 个遍历方法 array.every() //1 array.forEach() //2 array.find() //3 array.findIndex() //4 arra...
前端基础——数组的方法
前端
12-29 1万+
push() 在数组末尾添加元素，接收一个或多个参数 unshift() 在数组首位添加元素，接收一个或多个参数 pop() 删除数组末尾元素 shift() 删除数组第一个元素 splice() 在任意位置添加或删除元素。原数组发生改变，返回删除的元素。 第一个参数表示要删除或参入元素的索引值 第二个参数表示要删除元素的个数（只插入传入0） 第三个参数表示要提添加到数组的元素 new ...
前端之数组的常见的22中方法
wo_liuxiangyu的博客
01-12 2659
// 1.length 返回数组的长度 var arr = [1, 2, 3, 4]; console.log(arr) // 4 // 2.push() 功能:向数组的末尾添加一个或更多元素(包括对象和数组)，并返回新的长度。 var arr = [1, 2, 3, 4]; var length = arr.push(5); // 5 console.log(arr); // [
jQuery 工具--数组和对象操作
前端
02-09 1239
数组和对象操作 函数列表 函数 说明 $.each() 用于遍历指定的对象和数组，并以对象的每个属性(或数组的每个成员)作为上下文来遍历执行指定的函数。 $.extend() 用于将一个或多个对象的内容合并到目标对象。 $.grep() 用于使用指定的函数过滤数组中的元素，并返回过滤后的数组。 $.sub()1.9- 可创建一...
前端js数组常用方法总结
flyiiiiii的博客
02-15 524
常用数组方法 一、返回数组 1.concat(arr1,arr2,…) 定义：用于连接两个或多个数组。 返回：新数组，不改变原数组。 2.map(func(curValue(,index.arr)),thisValue) 定义：通过指定函数处理数组的每个元素。 返回：新数组，不改变原数组。 3.reverse(arr) 定义：反转数组的元素顺序。 返回：改变原数组。 4.sort(sortfunc...
前端数组方法汇总
weixin_30872157的博客
10-30 343
目录 前端数组方法汇总 创建数组 检测数组 转换方法 栈方法 队列方法 重排序方法 操作方法 位置方法 迭代方法 归并方法 前端...
Web前端知识点总结(吐血推荐).doc
11-12
Web前端知识点总结中也包括了JavaScript的基础语法、数据类型、运算符、流程控制、函数、对象、DOM操作、事件处理等知识点，这些知识点对于理解和掌握JavaScript编程语言非常重要，可以帮助开发者实现丰富的网页交互...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值