JS数组API汇总

最新推荐文章于 2024-05-22 09:33:57 发布
最新推荐文章于 2024-05-22 09:33:57 发布
阅读量168 收藏
点赞数
文章标签： js
原文链接：https://juejin.cn/post/6844903721697034253
版权

1.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']

//...打散数组
let arr = [6, 7, 8]
let res = a.push(...arr)
console.log(res)				// 11
console.log(a)					//[1, 2, 3, 4, 5, 1, "a", "b", 6, 7, 8]
  1. 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]
  1. 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)       // []
  1. 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)         // []
  1. join(value)：将数组用value连接为字符串，返回被连接后的字符串(不改变原数组)
// Base
let a = [1, 2, 3, 4, 5]
let result = a.join()
console.log(result)   // 1,2,3,4,5
console.log(typeof(result)) //string
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"]
  1. 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]
  1. 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位
  1. 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值依次填充到截取位置处，旧值被向后顺移
  1. 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码表(https://tool.oschina.net/commons?type=4)
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]  按数值大小倒序排列
  1. 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
  1. 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]
  1. 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]
  1. 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]
  1. forEach()：对数组进行遍历循环，对数组中每一项运行给定函数，参数都是function类型，默认有传参，参数分别为：数组当前项的值、数组当前项的索引、数组对象本身。返回值：undefined
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
  1. 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]
  1. 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]
  1. 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
  1. 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
  1. reduce():接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
var arr = [1, 2, 3, 4, 5]

var result1 = arr.reduce((previousValue, currentValue, index, arr) => {
  return previousValue + currentValue
}，10)

console.log('result1:', result1) // 25

var result2 = arr.reduce((previousValue, currentValue, index, arr) => {
  return previousValue + currentValue
})
console.log('result2:', result2) // 15

综上可知，改变原数组的API如下：
push()、unshift()、pop()、shift()、reverse()、splice()、sort()

嘟嘟560
关注
js中数组常用API总结
weixin_45460053的博客
09-15 440
今天捋捋有关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()：用来判断某个变量是否是一个
数组对象api汇总
qq_42673485的博客
01-08 581
数组对象常用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(删除并返回数组的最后
JavaScript数组全解密
小秋博客
04-28 842
本文为原创投稿文章，未经允许，请勿转载。 作者：翟灿东，网名路易斯，平安健康前端工程师。有四年前端架构及开发经验。熟悉正则，坚持原著，深度思考，力求简单通俗叙事。博客地址: http://louiszhai.github.io。 责编：陈秋歌，寻求报道或者投稿请发邮件至chenqg#csdn.net，或加微信：Rachel_qg。 了解更多前沿技术资讯，获取深度技术文章推荐...
JS中数组22种常用API总结，slice、splice、map、reduce、shift、filter....
油墨香^-^的博客
05-22 193
语法：array.splice(start, deleteCount, item1, item2, ...) 其中，start 表示要修改的起始位置，deleteCount 表示要删除的元素个数，item1、item2 等表示要添加的元素。该方法返回的是被修改后的原数组。map() 方法用于对数组中的每个元素执行一个回调函数，并返回一个新的数组，新数组中的元素为回调函数的返回值。reduce() 方法是数组对象的一个方法，用于将数组中的所有元素按照指定的规则进行归并计算，返回一个最终值。
JavaScript数组所有API全解密
JNPF快速开发平台的博客
08-21 477
全文共13k+字，系统讲解了JavaScript数组的各种特性和API。 数组是一种非常重要的数据类型，它语法简单、灵活、高效。 在多数编程语言中，数组都充当着至关重要的角色，以至于很难想象没有数组的编程语言会是什么模样。特别是JavaScript，它天生的灵活性，又进一步发挥了数组的特长，丰富了数组的使用场景。可以豪不夸张地说，不深入地了解数组，不足以写JavaScript。 截止ES7规范，数组共包含33个标准的API方法和一个非标准的API方法，使用场景和使用方案纷繁复杂，其中有不少浅坑、深坑、甚
如何实现js传递数组到后端接口以及同步和异步实现
beiback的博客
12-09 2738
js请求接口参数传递json数组
JS数组API大全(持续更新)
BBBBobo的博客
12-13 9586
首先对于数组的API,我是以原数组是否改变去分的两类,一种是会改变自身数组的方法,另一种不会. 至于是ES6还是ES5的方法并没有过多的记忆,会用即可 数组方法 功能 原数组是否改变 push() 在数组的最后一位新增一个或多个数据,返回值是长度 改变 unshift() 在数组的第一位新增一个或多个数据,返回值是长度 改变 pop() 删除最后一位,并返回删除的数据 改变 shift() 删除第一位,并返回删除.
JS数组API详解汇总
热门推荐
小龚的博客
05-14 1万+
JS数组API汇总一、循环类1. arr.forEach() --- 遍历循环2. arr.map()---返回新数组,return什么就输出什么3. arr.every()---全部满足条件4. arr.some()---部分满足条件5. arr.filter()---条件过滤6.arr.reduce(callback,[initialValue])---汇总**6.1累加:****6.2简单用法:****6.3数组处理:****6.4将数组转化为对象:****6.5将二维数组转化为一维:****6.6
JavaScript数组API汇总
小白在线学前端的博客
08-08 82
数组中的API（方法） 在学习JavaScript的道路上，数组是一个非常重要的部分，数组中的API很多，也容易混淆，每次对数组操作的时候都要去查文档，学习的路上也不能一直前进，有时候要停下来做一下总结，我总结了平时比较常用的一些数组API，希望也可以帮到你。 arry.push() 把一个元素增加到数组的末尾，返回的值为新数组的长度arry.length let arry = [2, 9, 5] let returnValue = arry.push(4) console.log(returnValue)
jQuery数组处理方法汇总
12-07
jQuery是JavaScript的一个库，它提供了一系列便捷的API来简化HTML文档操作、事件处理、动画以及Ajax交互。在处理数组时，jQuery提供了多个方法，使得数组的遍历、过滤、转换等任务变得更加简单。以下是关于jQuery...
JavaScript里实用的原生API汇总
10-24
这些API提供了丰富的接口，用于处理字符串、数组、日期、数学运算等任务，极大地便利了前端开发人员的工作。 1. eval函数是JavaScript中一个强大的函数，它可以执行字符串形式的JavaScript代码。在处理字符串对象时...
专题 | js数组
A123ppleQueen的博客
12-31 1324
4.数组 数组是一组数据的集合，每个数据称为元素。 便于存储数据以及操作数据 (1)使用数组字面量创建 [ 元素1, 元素2.. ] (2)访问数组中的元素 数组[下标] 不存在的元素返回undefined 练习：创建数组，包含若干个城市名称，修改其中一个元素，在末尾添加两个元素。 (3)数组的长度 数组.length 数组[ 数组.length ] 可以往数组的末尾添加元素 (4)使用内置构造函数创建数组 new Array(元素1,元素2..) new Array(3) 初始
js常用数组API汇总
huangpb的博客
08-07 1万+
一、数组API 1. 连接：arr.join("连接符") 用连接符把数组里面的元素连接成字符串。 arr.join("")能无缝连接。 2. 拼接：arr.concat("a","b",arr1) 强调：(1)不会修改原数组，返回新数组。 (2)concat方法中的数组会被打散为单个元素再拼接。 3.
js中数组常用api汇总
grbrb的博客
07-06 345
js中数组常用api汇总 在此对js中数组常用的api进行汇总。 1.检测数组：判断value是否为数组类型 Array.isArray(value); 2.转换方法：将数组colors转化成以逗号分隔的字符串 alert(colors.toString()); 3.栈、队列方法：分别实现先进先出、后进先出的效果。 var a=[1,2,3,4]; a.push(5);//[1, 2, 3, 4, 5] a.shift();//[2, 3, 4, 5] a.pop();//[2, 3, 4] a.uns
考虑励磁控制系统的水热两区互联电力系统网络自动生成控制simulink.rar
10-09
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Python 实现BO-CNN-BiLSTM贝叶斯优化卷积双向长短期记忆网络数据多变量时间序列预测（包含详细的完整的程序和数据）
10-09
内容概要：本文详细介绍了如何使用 Python 和深度学习方法（包括卷积神经网络 CNN 与双向长短期记忆网络 BiLSTM 结合的 BO-CNN-BiLSTM）进行多变量时间序列的数据预测。内容涵盖了从数据准备到超参数优化的全过程，并提供了完整的代码实现和实例展示。 适用人群：机器学习初学者，尤其适合对时间序列预测感兴趣的深度学习爱好者、研究者、工程技术人员。 使用场景及目标：适用于需要对时间序列数据如股票价格、环境数据、医疗健康监控等领域做精准预测的情况。本教程可以帮助理解深度学习在网络模型优化方面的运用。 其它：文中还讨论了项目的注意事项，并指出了可能的方向性改进路径，比如增加模型解释能力、实际应用等
用于kpca降维，对于故障特征诊断具有重要的作用不能运行.rar
10-09
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Python 实现 INFO-ELM（向量加权算法优化极限学习机）进行多输入单输出回归预测（包含详细的完整的程序和数据）
10-09
内容概要：本文详细介绍了如何利用PYTHON实现INFO-ELM（一种加权优化极限学习机）来进行多输入单输出（MISO）回归预测的方法。其中包括数据生成、算法建模、权重迭代更新以及最终的效果评估等一系列过程，并附有可视化的结果比较。 适用人群：适合熟悉或正在学习机器学习基本理论，特别是有兴趣深入理解和应用ELM和加权回归算法的研究人员和技术人员。 使用场景及目标：适用于解决多个输入变量对应一个连续数值输出的实际预测问题，通过优化模型提升预测准确性和稳定性。 其他说明：文中还提供了进一步研究和改进的方向，如扩展隐含节点数量、改善权重调节方法及采用平行计算等方式提高预测质量。
005-基于51单片机的酒精测试设计
最新发布
10-09
请结合博客看 https://blog.csdn.net/weixin_41011452/article/details/140587967?spm=1001.2014.3001.5502
JavaScript数组操作详解：创建、ES6新特性与方法解析
"这篇文档是关于JavaScript中数组的详细操作方法和解析的综合指南，旨在帮助开发者系统性地理解和记忆数组的各种API与操作。" 在JavaScript中，数组是一种常用的数据结构，它允许我们存储和操作多个值。这篇文章...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值