JavaScript数组API汇总

最新推荐文章于 2024-05-22 09:33:57 发布
最新推荐文章于 2024-05-22 09:33:57 发布
阅读量332 收藏 5
点赞数 1
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5bfa987ae51d453a68009566
版权

01、push()：将value添加到数组的最后，返回新数组的长度(改变原数组)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.push(1)
console.log(result)    // 6
console.log(a)         // [1, 2, 3, 4, 5, 1]

// More
result = a.push('a', 'b')      // 可一次添加多个值
console.log(result)            // 8
console.log(a)                 // [1, 2, 3, 4, 5, 1, 'a', 'b']
复制代码

02、unshift()：添加元素到数组的开头，返回新数组的长度(改变原数组)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.unshift(1)
console.log(result)        // 6
console.log(a)             // [1, 1, 2, 3, 4, 5]

// More
result = a.unshift('a', 'b')  // 可一次添加多个值
console.log(result)           // 8
console.log(a)                // ['a', 'b', 1, 1, 2, 3, 4, 5]
复制代码

03、pop()：删除数组中最后一个元素，返回被删除的元素(改变原数组)

// Base
let a = [5]
let result = a.pop()
console.log(result)  // 5
console.log(a)       // []

// More
result = a.pop()     // 数组为空数组后，执行pop()方法，返回undefined
console.log(result)  // undefined
console.log(a)       // []
复制代码

04、shift()：删除数组第一个元素，返回被删除的元素(改变原数组)

// Base
let a = [5]
let result = a.shift()
console.log(result)  // 5
console.log(a)       // []

// More
result = a.shift()     // 数组为空数组后，执行pop()方法，返回undefined
console.log(result)    // undefined
console.log(a)         // []
复制代码

05、join(value)：将数组用value连接为字符串，返回被连接后的字符串(不改变原数组)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.join()
console.log(result)   // 1,2,3,4,5
result = a.join('')
console.log(result)   // 12345
result = a.join(',')
console.log(result)   // 1,2,3,4,5
result = a.join('&')
console.log(result)   // 1&2&3&4&5

// More
let obj = {
    toString: function () {
        console.log('调用了toString()方法！')
        return 'a'
    },
    toValue: function () {
        console.log('调用了toValue()方法！')
        return 'b'
    }
}
result = a.join(obj)  // 使用对象时会调用对象自身的toString方法，我们这里重写了toString
// 调用了toString()方法
console.log(result)  // 1a2a3a4a5
console.log(a)       // [1, 2, 3, 4, 5]

// 数组中的join()方法相对的一个方法是字符串的split()方法
console.log(result.split('a'))  // [1, 2, 3, 4, 5]
复制代码

06、reverse()：反转数组，返回反转后的新数组(改变原数组)

// Base
let a = [1, 2, ,3, ,4, 5]
let result = a.reverse()
console.log(result)   //  [5, 4 ,3 ,2 ,1]
console.log(a)        //  [5, 4 ,3 ,2 ,1]

// More
a = [1, [2, 3], [4, 5]]
result = a.reverse()
console.log(result)   // [[4, 5], [2, 3], 1]
console.log(a)        // [[4, 5], [2, 3], 1]
// 可以看到这里的反转只是基于数组的第一层，属于浅反转

// 一个简单的深反转需要使用递归实现
const deepReverse = (array) => {
  let temp = array.reverse()
  temp.forEach(v => {
    if (Object.prototype.toString.call(v) === '[object Array]') {
      deepReverse(v)
    }
  })
  return temp
}
a = [1, [2, 3], [4, 5]]
result = deepReverse(a)
console.log(result)  // [[5, 4], [3, 2], 1]
复制代码

07、slice(start, end)：获取子数组，包含原数组索引start的值到索引end的值，不包含end，返回获取的子数组(不改变原数组)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.slice(2, 4)
console.log(result)  // [3, 4]
console.log(a)       // [1, 2, 3, 4, 5]

// More
console.log(a.slice(1))       // [2, 3, 4, 5]  只有一个参数且不小于0时，则从此索引开始截取到数组的末尾
console.log(a.slice(-1))      // [5]  只有一个参数且小于0时，则从倒数|start|位截取到数组的末尾
console.log(a.slice(-1, 1))   // []   反向截取，不合法，返回空数组
console.log(a.slice(1, -1))   // [2, 3, 4]  从第1位截取到倒数第1位
console.log(a.slice(-1, -2))  // []   反向截取，不合法，返回空数组
console.log(a.slice(-2, -1))  // [4]  倒数第2位截取到倒数第1位
复制代码

08、splice(index, count, value1, value2....)：从索引位index处删除count个元素，插入value1, value2等元素，返回被删除的元素组成的新数组(改变原数组)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.splice(1, 2, 0)
console.log(result)  // [2, 3]
console.log(a)  // [1, 0, 4, 5]

// More
a = [1, 2, 3, 4, 5]
console.log(a.splice(-2))  // [4, 5]  当参数为单个且小于0时，将截取从倒数|index|位到数组的末尾
console.log(a)             // [1, 2, 3]

a = [1, 2, 3, 4, 5]
console.log(a.splice(-1))  // [5]  当参数为单个且小于0时，将截取从倒数|index|位到数组的末尾
console.log(a)             // [1, 2, 3, 4]

a = [1, 2, 3, 4, 5]
console.log(a.splice(0))  // [1, 2, 3, 4, 5] 当参数为单个且不小于0时，将截取从index位到数组的末尾
console.log(a)            // []

a = [1, 2, 3, 4, 5]
console.log(a.splice(1))  // [2, 3, 4, 5]  当参数为单个且不小于0时，将截取从index位到数组的末尾
console.log(a)            // [1]

a = [1, 2, 3, 4, 5]
console.log(a.splice(-1, 2))   // [5]  从倒数第1位开始截取两个元素
console.log(a)                 // [1, 2, 3, 4]

a = [1, 2, 3, 4, 5]
console.log(a.splice(0, 2, 'a', 'b', 'c'))  // [1, 2]
console.log(a)  // ['a', 'b', 'c', 3, 4, 5]  截取后将value值依次填充到截取位置处，旧值被向后顺移
复制代码

09、sort()：对数组元素进行排序，返回排序后的新数组(改变原数组)

// Base
let a = [31, 22, 27, 1, 9]
let result = a.sort()
console.log(result)  // [1, 22, 27, 31, 9]
console.log(a)  // [1, 22, 27, 31, 9]

// More
a = ['c', 'ac', 'ab', 'A1', '1c', 13, 12, '13', '12', '3', '2', '1b', '1a', 1, 'aa', 'a', 3, 'b', 2]
a.sort()
console.log(a) // [1, 12, "12", 13, "13", "1a", "1b", "1c", "2", 2, "3", 3, "A1", "a", "aa", "ab", "ac", "b", "c"]
// 可以看出sort排序是根据每个字符对应的ASCII码值进行排序的，而非值的大小。
// 先比较第一位的ASCII码值，如果第一位的ASCII码值相同，则开始比较第二位的ASCII码值，以此类推
// ASCII码表(http://tool.oschina.net/commons?type=4 + K)
a = [31, 22, 27, 1, 9]
a.sort((a, b) => {
  return a - b
})
console.log(a)  // [1, 9, 22, 27, 31]  按数值大小正序排列

a = [31, 22, 27, 1, 9]
a.sort((a, b) => {
  return b - a
})
console.log(a)  // [31, 27, 22, 9, 1]  按数值大小倒序排列
复制代码

10、toString()：将数组中的元素用逗号拼接成字符串，返回拼接后的字符串(不改变原数组)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.toString()
console.log(result)  // 1,2,3,4,5
console.log(a)  // [1, 2, 3, 4, 5]

// 除了toString()方法之外，String()方法也可以将数组转换成字符串
result = String(a)
console.log(result)  // 1,2,3,4,5
复制代码

11、indexOf(value)：从索引为0开始，检查数组中是否包含有value，有则返回匹配到的第一个索引，没有则返回-1(不改变原数组)

// Base
let a = [1, 2, 3, 4, 5]
let result = a.indexOf(2)
console.log(result)  // 1
console.log(a)  // [1, 2, 3, 4, 5]

result = a.indexOf(6)
console.log(result)  // -1
console.log(a)  // [1, 2, 3, 4, 5]
复制代码

12、lastIndexOf(value)：从最后的索引开始，检查数组找那个是否包含value，有则返回匹配到的第一个索引，没有返回-1(不改变原数组)

// Base
let a = [1, 2, 3, 2, 5]
let result = a.lastIndexOf(2)
console.log(result)  // 3
console.log(a)  // [1, 2, 3, 4, 5]

result = a.lastIndexOf(6)
console.log(result)  // -1
console.log(a)  // [1, 2, 3, 4, 5]
复制代码

13、concat(value)：将数组和(或)值连接成新数组，返回新数组(不改变原数组)

// Base
let a = [1, 2], b = [3, 4], c = 5
let result = a.concat(b, c)
console.log(result)  // [1, 2, 3, 4, 5]
console.log(a)  // [1, 2]

// More
b = [3, [4]]
result = a.concat(b, c) 
console.log(result)  // [1, 2, 3, [4], 5]  concat对于嵌套数组无法拉平
console.log(a)  // [1, 2]
复制代码

14、forEach()：对数组进行遍历循环，对数组中每一项运行给定函数，参数都是function类型，默认有传参，参数分别为：遍历数组内容、对应的数组索引、数组本身。没有返回值

var arr = [1, 2, 3, 4, 5]
arr.forEach(function (item, index, a) {
  console.log(item + '|' + index + '|' + (a === true))
})
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true
复制代码

15、map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的新数组

var arr = [1, 2, 3, 4, 5]
var arr1 = arr.map(function (item, index, a) {
  return item * item
})
console.log(arr1)  // [1, 4, 9, 16, 25]
复制代码

16、filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr1 = arr.filter(function (item, index, a) {
  return index % 3 === 0 || item >= 8
})
console.log(arr1)  // [1, 4, 7, 8, 9, 10]
复制代码

17、every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true

var arr = [1, 2, 3, 4, 5]
var arr1 = arr.every(function (item, index, a) {
  return item < 10
})
console.log(arr1)  // true
var arr2 = arr.every(function (item, index, a) {
  return item < 3
})
console.log(arr2)  // false
复制代码

18、some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true

var arr = [1, 2, 3, 4, 5]
var arr1 = arr.some(function (item, index, a) {
  return item < 3
})
console.log(arr1)  // true
var arr2 = arr.some(function (item, index, a) {
  return item < 1
})
console.log(arr2)  // false
复制代码

综上可知，改变原数组的API如下：

  • push()、unshift()、pop()、shift()、reverse()、splice()、sort()
Vincent8080
关注
数组对象api汇总
qq_42673485的博客
01-08 595
数组对象常用api 1.concat(连接两个或多个数组，并返回结果) var a = [1,2,3]; var b = a.concat(6,7); console.log(b); //[1,2,3,6,7] 2.join(把数组的所有元素用str分隔，默认逗号分隔) var a = [1,2,3] var b = a.join('|'); console.log(a); //[1,2,3] console.log(b); //"1|2|3" 3.pop(删除并返回数组的最后
js中数组常用API总结
weixin_45460053的博客
09-15 457
今天捋捋有关JS中数组API的知识。先来看Array的静态方法，然后是Array的实例方法。 1.静态方法： 1.1 Array.from()：从类数组对象或者可迭代对象中创建一个新的数组实例 let set = new Set(['a', 'b', 'c', 'd']) let arr = Array.from(set) console.log(arr, arr instanceof Array); 浏览器打印结果： 1.2 Array.isArray()：用来判断某个变量是否是一个
JavaScript数组全解密
小秋博客
04-28 853
本文为原创投稿文章，未经允许，请勿转载。 作者：翟灿东，网名路易斯，平安健康前端工程师。有四年前端架构及开发经验。熟悉正则，坚持原著，深度思考，力求简单通俗叙事。博客地址: http://louiszhai.github.io。 责编：陈秋歌，寻求报道或者投稿请发邮件至chenqg#csdn.net，或加微信：Rachel_qg。 了解更多前沿技术资讯，获取深度技术文章推荐...
JS笔记(3) —— 数组 API
yy406961的博客
09-08 256
/* * concat(agr1,agr2,agrN...) * 参数：(必须有一个参数)agrS * 将多个数组合并为一个数组，不影响原数组 * 返回新的数组 * */ var arr1 = [1,2,3,4,5]; var arr2 = [6,7,8,9,10]; var arr3 = [11,12,13,14,15]; var concat = arr1.conca
JavaScript之数组常用API
CSH_lucky的博客
12-14 753
一、导言 API(Application Programming Interface,应用程序编程接口)是一套用来控制Windows的各个部件(从桌面的外观到为一个新进程分配的内存)的外观和行为的一套预先定义的Windows函数.用户的每个动作都会引发一个或几个函数的运行以告诉Windows发生了什么，其实质就是一种语言提供的默认的方法的集合。 在JavaScript中使用原生代码写程序有生活会很...
JavaScript数组的API
zyf_1998的博客
12-15 138
API的定义 API（Application Programming Interface，应用程序接口）是一些预先定义的函数，或指软件系统不同组成部分衔接的约定。 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问原码，或理解内部工作机制的细节。 常用的API 1.join join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省...
JS中数组22种常用API总结，slice、splice、map、reduce、shift、filter、indexOf......
web全栈开发的博客
05-31 1033
本文介绍了前端中数组常用的 API，涵盖了添加、删除、截取、合并、转换等常见操作。熟练掌握这些方法可以提高一定的开发效率。在实际开发中，请根据具体需求选择适合的数组方法。祝生活愉快！大厂面试题分享 面试题库前后端面试题库 （面试必备） 推荐：★★★★★前端面试题库web前端面试题库 VS java后端面试题库大全。
JavaScript里实用的原生API汇总
10-24
这些API提供了丰富的接口，用于处理字符串、数组、日期、数学运算等任务，极大地便利了前端开发人员的工作。 1. eval函数是JavaScript中一个强大的函数，它可以执行字符串形式的JavaScript代码。在处理字符串对象时...
JavaScript数组操作详解：创建、ES6新特性与方法解析
"这篇文档是关于JavaScript中数组的详细操作方法和解析的综合指南，旨在帮助开发者系统性地理解和记忆数组的各种API与操作。" 在JavaScript中，数组是一种常用的数据结构，它允许我们存储和操作多个值。这篇文章...
利用reduce实现JavaScript数组扁平化的详细教程
除了使用`reduce`方法，还可以使用其他JavaScript数组方法（如`flat`、`flatMap`）来实现数组扁平化，但是`reduce`方法因其灵活性和强大的数据处理能力而成为许多开发者偏好的选择。 通过本资源，我们可以学习到...
JS-数组API
weixin_47295886的博客
07-21 215
sort();排序:将元素按从小到大的顺序重新排列 slice()选取: arr.join("连接符")： String(arr):将数组中每个元素转换为字符串，用逗号分开。 concat（）拼接 reverse()颠倒：颠倒数组中元素的顺序- splice删除：直接修改原数组 splice插入：直接修改原数组 splice替换：直接修改原数组...
JS数组API
catherine_sfy的博客
08-27 230
JS数组API push和pop可以模仿栈 array.push() 作用：把一个元素增加到数组的末尾 返回值：为新数组的长度arry.length 示例： array.pop() 作用：删除数组中最后一个元素 返回值： 为删除的元素 示例： array.unshift() **作用：**在数组的前面添加元素 返回值：为新数组的长度arry.length 示例： array.shift() **作...
js数组api
CaiHongDaDa的博客
04-11 1934
文章目录一、js常用数组api1.unshift2.push3.shift4.pop5.concat6.splice7.slice8.join9.every10.some11.fill11.fill11.map12.reduce12.参考链接待补充。。 一、js常用数组api 1.unshift unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 var arr1 = [1,2,3,4,5] var arr2 = ['wo','de','ming','zi'] var l
JavaScript中，数组常用的API
nilmao的博客
04-23 1524
1.修改原数组的API 1.1.pop（）：弹出数组中最后一个元素，并返回这个元素 let arr = [1,2,3,4,5,6] let result = arr.pop() console.log(arr) // [1, 2, 3, 4, 5] console.log(result) // 6 1.2.push（）：添加一个或多个元素到数组末尾，并返回新的长度 let arr = [1,2,3,4,5,6] arr.push(7,8) console.log(arr) // [1, 2, .
js中数组的API
worn_xiao的博客
08-21 1378
1.join() var str=arr.join("分隔符"):将数组转为字符串。可自定义分割符！ 用法：将字符拼接为单词或句子 cahrs.join(""); 2 concat() var newArr=arr.contat(元素值,[数组],..):将参数拆散成单个元素，追加到数组中。 *不会修改原数组，只能返回新数组对象* 3 slice() var subA
JS数组操作API
lemon今天学习了吗？的博客
04-22 1271
2. pop() : 删除数组最后一位,并返回删除的数据; 3. unshift() : 数组头部新增一个或多个数据; 4. shift() : 删除第一位,并返回删除的数据; 5.reverse() ：反转数组，返回结果； 6.join("连接符") ：使用分隔符,将数组转为字符串并返回； 7.concat() ：合并数组，并返回合并后的数据，不会修改原数组，返回新数组; 8.slic...
js总结（数组API）
isoble的博客
02-22 820
1.题目描述： 移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组 输入例子: remove([1, 2, 3, 4, 2], 2) 输出例子: [1, 3, 4]function remove(arr, item) { var arr1=[]; for(var key in arr){ if(arr[key]
JS中数组22种常用API总结，slice、splice、map、reduce、shift、filter....
最新发布
油墨香^-^的博客
05-22 247
语法：array.splice(start, deleteCount, item1, item2, ...) 其中，start 表示要修改的起始位置，deleteCount 表示要删除的元素个数，item1、item2 等表示要添加的元素。该方法返回的是被修改后的原数组。map() 方法用于对数组中的每个元素执行一个回调函数，并返回一个新的数组，新数组中的元素为回调函数的返回值。reduce() 方法是数组对象的一个方法，用于将数组中的所有元素按照指定的规则进行归并计算，返回一个最终值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值