数组API之操作方法、位置方法和迭代方法

已于 2023-06-23 14:37:24 修改
阅读量81 收藏
点赞数 2
分类专栏： HTML+CSS+JS 文章标签： javascript 前端 ecmascript 开发语言
于 2023-06-23 14:32:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53866767/article/details/131350206
版权

目录

操作方法

Array.prototype.concat()         用于连接两个或多个数组。

 Array.prototype.slice()         可从已有的数组中返回选定的元素、可提取字符串的某个部分，并以新的字符串返回被提取的部分。

 Array.prototype.splice()         用于添加或删除数组中的元素。

位置方法

Array.prototype.indexOf()        可返回数组中某个指定的元素位置。

 Array.prototype.lastIndexOf()         可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

迭代方法

Array.prototype.every()

Array.prototype.some()

Array.prototype.forEach()

Array.prototype.filter()

Array.prototype.map()

操作方法

Array.prototype.concat()         用于连接两个或多个数组。

语法：array1.concat(array2,array3,...,arrayX)

参数值

返回值 

// concat 连接数组  拼接两个及两个以上的数组
// 参数 需要拼接的数组 返回值 拼接后的数组 不改变原数组
var arr = ['world'];
var arr1 = ['hello'];
var arr2 = ['js'];
var res = arr1.concat(arr,arr2);
console.log(res,arr);

 Array.prototype.slice()         可从已有的数组中返回选定的元素、可提取字符串的某个部分，并以新的字符串返回被提取的部分。

语法：array.slice(start, end)

参数值

返回值： 

// slice()   截取元素
var arr = [1,2,3,4,5,6];
//参数 start end 返回从第一个下标开始到第二个下标(不包括第二个下标元素)截取元素组成的新数组 不改变原数组 
var res = arr.slice(2,5);
console.log(res,arr);
// 参数start  返回从下标开始到末尾截取的元素组成的新数组    不改变原数组
var res = arr.slice(2);
console.log(res,arr);
// 参数start负数    返回从倒数下标开始到末尾截取的元素组成的新数组  不改变原数组
var res = arr.slice(-2);
console.log(res,arr);
// 参数start负数 end负数 返回从倒数第一个下标开始到倒数第二个下标(不包括第二个下标元素)组成的新数组 不改变原数组 
var res = arr.slice(-4,-2);
console.log(res,arr);
// 参数start正数 end负数 返回从第一个下标开始到倒数第二个下标(不包括第二个下标元素)组成的新数组 不改变原数组 
var res = arr.slice(2,-2);
console.log(res,arr);
// 参数start负数 end正数 返回从倒数第一个下标开始到第二个下标(不包括第二个下标元素)组成的新数组 不改变原数组 
var res = arr.slice(-4,4);
console.log(res,arr);
// 参数大于等于数组长度 返回空数组
var res = arr.slice(6);
console.log(res,arr);

 Array.prototype.splice()         用于添加或删除数组中的元素。

注意：这种方法会改变原始数组。

语法 ：

返回值 ：

 因会改变原数组，所以注释了起来，如需使用，请一个一个消除注释使用。       

注释快捷键        Ctrl+/

// splice() 添加元素 / 删除元素     howmany可以不写 写了必须大于等于0;
var arr = [1,2,3,4,5];  
// 参数index>0  返回从下标开始到末尾删除元素所组成的新数组 改变原数组
var res = arr.splice(2);    //[ 3, 4, 5 ] [ 1, 2 ]
// 参数index>0 howmany>0 返回从下标开始删除howmany位元素所组成的新数组 改变原数组
// var res = arr.splice(2,2);
// 参数index>0 howmany>0 item 返回从下标开始删除howmany位元素所组成的新数组 改变原数组
// var res = arr.splice(2,2,'hello js')
// 参数index>0 howmany=0 item 返回空数组  改变原数组
// var res = arr.splice(2,0,'hello');
// 参数index<0  返回从倒数下标开始到末尾删除元素所组成的新数组 改变原数组
// var res = arr.splice(-2);
// 参数index<0 howmany>0 返回从倒数下标开始删除howmany位元素所组成的新数组 改变原数组
// var res = arr.splice(-4,2);
// 参数index<0 howmany>0 item 返回从倒数下标开始删除howmany位元素所组成的新数组 改变原数组
// 同上面没item 区别插入没插入新的内容
console.log(res,arr);

位置方法

Array.prototype.indexOf()        可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。如果在数组中没找到指定元素则返回 -1。

语法：array.indexOf(item,start)

参数：

返回值： 

// indexOf 
var arr = [1,2,3,2,3,1,4,3];
// 参数要查找的值 从头开始查找 返回值 有则返回下标 无则返回-1 不改变原数组
var res = arr.indexOf(4);
console.log(res,arr);
// 参数要查找的值 从第几位开始查找  返回值 有则返回下标 无则返回-1 不改变原数组
var res = arr.indexOf(2,2);
console.log(res,arr);

 Array.prototype.lastIndexOf()         可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。如果在数组中没找到指定元素则返回 -1。

语法：array.lastIndexOf(item,start)

参数：

返回值：

// lastIndexOf
// 参数要查找的值 从末尾开始查找 返回值 有则返回下标 无则返回-1 不改变原数组
var res = arr.lastIndexOf(2);
console.log(res,arr);
// 参数要查找的值 从第几位开始查找 返回值 有则返回下标 无则返回-1 不改变原数组
var res = arr.lastIndexOf(2,2);
console.log(res,arr);

迭代方法

Array.prototype.every()

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

  • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。

  • 如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

语法：array.every(function(currentValue,index,arr), thisValue)

参数：

 返回值：布尔值。如果所有元素都通过检测返回 true，否则返回 false。

// every 判断数组中每一个元素是否符合内部表达式
// 参数 函数(item,index,arr)    返回值:true false  只要有一项不符合就跳出循环 不修改原数组
var arr = [1,2,3,4,5];
var res = arr.every(function(item,index){
    // 无第二个参数时，this指的是global
    console.log(this);
    // 当有第二个参数时，this指的是第二个参数
    return item>1;
},'hello')
console.log(res,arr);

Array.prototype.some()

some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：

  • 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。

  • 如果没有满足条件的元素，则返回false。

注意： some() 不会对空数组进行检测。

注意： some() 不会改变原始数组。

语法：array.some(function(currentValue,index,arr),thisValue)

参数：

返回值：布尔值。如果数组中有元素满足条件返回 true，否则返回 false。

// some 判断数组中有没有一个元素符合内部表达式
// 参数 函数(item,index,arr)    返回值:true false 只要有一项符合就跳出循环 不修改原数组
var arr = [1,2,3,4,5];
var res = arr.some(function(item){
    return item >1;
})
console.log(res,arr);

Array.prototype.forEach()

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

语法：array.forEach(function(currentValue, index, arr), thisValue)

参数：

 

返回值：undefined。

// forEach  for循环升级版
// 
var arr = [1,2,3,4,5];
var res = arr.forEach(function(item,index,arr){
    console.log(item);
    console.log(index);
    console.log(arr);
    // 加上返回值也是undefined
    return 10;
})
console.log(res,arr);

Array.prototype.filter()

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意： filter() 不会对空数组进行检测。

注意： filter() 不会改变原始数组。

语法：array.filter(function(currentValue,index,arr), thisValue)

参数：

 

返回值：返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

// filter   过滤出符合条件的数组元素组成的新数组
// 参数 function(item,index,arr){}  返回值：返回复合函数表达式的数组元素所组成的新数组  不修改原数组
var ages = [18,23,17,22,46];
var res = ages.filter(function(item,index,arr){
    console.log(this);
    return item > 22;
},'hello');
console.log(res,ages);

Array.prototype.map()

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

注意： map() 不会对空数组进行检测。

注意： map() 不会改变原始数组。

语法：array.map(function(currentValue,index,arr), thisValue)

参数：

 

返回值：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

// map方法      映射    对数组每一个元素进行处理返回一个新的数组
// 参数 function(item,index,arr){}  返回值:返回对每一个数组元素进行处理后的新数组   不修改原数组

var arr = [1,2,3,4,5];
var res = arr.map(function(item,index,arr){
    return item*10;
})
console.log(res,arr);

var data = [
    {id:1,name:'zhangsan'},
    {id:2,name:'lisi'},
    {id:3,name:'wangwu'},
    {id:4,name:'terry'},
    {id:5,name:'mary'},
]

var res = data.map(function(item){
    return item.id
});
console.log(res);

学前端的狗头苏丹
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
php 解析xml 的四种方法详细介绍
10-21
它将XML文档转换为一个对象，可以直接通过属性和方法访问元素和属性。 - 优点：使用简单，面向对象的接口使得XML处理变得直观，适合处理小型到中型的XML文档。 - 缺点：不适用于处理非常大的XML文件，因为整个文档...
常用的十五个数组api
weixin_45795183的博客
06-09 224
常用的十五个数组api
数组常用的API有哪些？
Pursuit_li的博客
04-06 68
1、数组序列化 toString()、join() 2、构造函数的方法 Array.isArray() 、Array.from()、Array.of() 3、栈和队列方法 push()、pop()、shift()、unshift() 4、排序方法 reverse()、sort() 5、操作方法 concat()、slice()、splice() 6、位置方法： indexOf()、lastIndexOf() 7、迭代方法： every()、some()、filter()、map()、forEa
js 数组API之every、some用法
gwdgwd123的博客
07-10 501
js 数组API之every、some用法 every 判断数组中是否每个元素都满足条件 只有都满足条件才返回true； 只要有一个不满足就返回false； arr.every(function(value,index,array){return 条件}) some 判断数组中是否至少有一个元素满足条件 只要有一个满足就返回true 只有都不满足时才返回false a...
LeetCode——最长公共前缀（数组API-every方法）
Always-Learning
10-05 234
题目描述 解题思路 首先获取数组的第一个字符串，以这个字符串为标准进行后续的判断。 定义需要返回的最终字符串，初始值为空串。 使用循环比例第一个字符串，每次遍历的时候，都利用数组的every这个API，判断数组的每一个字符串的第i个字符，是否和子一个字符串的第i个字符一致，一致则返回true，并进行结果字符串的拼接，如果不是则直接返回result。 如果最终没有匹配到，则返回空串result。 AC代码 var longestCommonPrefix = function(strs) { //
js中数组常用的API
初漾的博客
09-03 5687
第一组：操作方法 1.concat():基于当前数组，创建一个新的数组，并返回这个新数组，不会改变原数组；var color = ["red","green","blue"]; var colors2 = color.concat("yellow",["black","brown"]);2.slice():可以接受一个或两个参数，要返回项的起始和结束位置，返回所截取数组的项，但是不包括结束位置的项
javascript设计模式之迭代器模式
10-15
此外，`Array.prototype.forEach()`、`Map`和`Set`等原生API也使用了迭代器原理。 使用迭代器模式的优点包括： - **封装性**：迭代器隐藏了集合的内部结构，只暴露必要的遍历操作。 - **灵活性**：通过迭代器，可以...
jQuery的ajax和遍历数组json实例代码
10-21
在给定的标题和描述中，我们关注的是如何使用jQuery的`$.ajax()`方法发送AJAX请求，并通过`$.each()`函数遍历接收到的JSON数组。下面将详细介绍这两个功能及其相关知识点。 首先，`$.ajax()`是jQuery提供的一个异步...
ndarray：具有数组视图、多维切片和高效操作的 N 维数组
06-28
表现：优先使用数组上的高阶方法和算术运算，然后是迭代，最后优先使用索引算法。即使对于非常大的矩阵，也能进行高效的浮点矩阵乘法；可以选择使用 BLAS 进一步改进它。板条箱功能标志以下 crate 功能标志可用。...
jQuery数组处理函数整理
10-21
2. **$.each(container, callback)**: 这是一个迭代函数，可以用于遍历数组或对象。对于数组，它会按顺序调用回调函数，将索引和对应的值作为参数传递。对于对象，它会遍历所有的属性。回调函数可以用来执行对每个...
常见数组array（API）
热门推荐
远方
11-12 1万+
不改变原数组： 将数组转化为字符串（String） var arr=[1,2,3]; var str=String(arr); console.log(str); //1,2,3 console.log(arr); //[1,2,3] 把数组中的所有元素放入一个字符串（join） var arr=[1,2,3]; var str=arr.join(); console.log(str);...
和数组操作有关的API方法
qq_43505423的博客
12-21 116
和数组操作有关的API方法 数组的拷贝操作 Java数组的复制操作可以分为深度复制和浅度复制，简单来说深度复制，可以将对象的值和对象的内容复制;浅复制是指对对象引用的复制。 主要用到System.arraycopy() 原型为System.arraycopy(src, srcPos, dest, destPos, length); 其中src表是源数组，srcPos表示源数组要复制的起始位置，de...
工具链--nuxt框架 简介（一）
最新发布
qq_35876316的博客
06-16 325
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1429
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 549
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
盲盒App开发时有哪些技术框架可以借鉴
bytekj的博客
06-14 647
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 867
Vue在表单校验中trigger属性指定何时触发校验规则
vue3 防止按钮的连续点击（连点）
MtangEr的博客
06-13 344
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
【JavaScript】简单数据类型 与 复杂数据类型 ① ( 堆内存和栈内存 | 简单数据类型内存存储 | 复杂数据类型内存存储 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
06-12 1286
一、简单数据类型 1、简单数据类型简介 2、简单数据类型 null 空类型的特殊性 二、复杂数据类型 三、堆内存和栈内存
java string数组转int数组
09-09
方法二：使用stream API和lambda表达式 Java 8引入了stream API，可以利用其强大的功能来进行这种转换。我们可以使用Arrays类的stream方法将String数组转换为流。然后，我们可以使用map方法将每个元素转换为int类型...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学前端的狗头苏丹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值