数组方法总结

最新推荐文章于 2024-08-17 12:54:01 发布
最新推荐文章于 2024-08-17 12:54:01 发布
阅读量178 收藏 3
点赞数
分类专栏： JavaScript 文章标签： javascript 数组
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45325810/article/details/120908156
版权

测试用例

let fruits = ['apple', 'orange', 'Banana']
let animals = ['dog','cat']
let numbers = ['one','two']
let num = [1,2,3]
let num1 = [2, 3, 4, 5]

1. array.foreach()

  • 方法含义：遍历数组
  • 代码演示：
let text = fruits.forEach(item =>{
 console.log(item); 
})

2. array.push()

  • 方法含义：添加元素到数组的末尾
  • 返回值：添加后的数据长度
  • 注意：修改原数组
  • 代码演示：
let text = fruits.push('Lemon')
console.log(text); // 5
console.log(fruits); //  ['apple', 'orange', 'Banana', 'Lemon']

3. array.pop()

  • 方法含义：删除数组末尾的元素
  • 返回值：删除的数组元素
  • 注意：修改原数组
  • 代码演示：
let text = fruits.pop()
console.log(text); // Banana
console.log(fruits); // ['apple', 'orange']

4. array.shift()

  • 方法含义：删除数组头部的元素
  • 返回值：删除的数组元素
  • 注意：修改原数组
  • 代码演示：
let text = fruits.shift()
console.log(text); // apple
console.log(fruits); // ['orange', 'Banana']

5.array.unshift()

  • 方法含义：在数组头部添加元素
  • 返回值：数组长度
  • 注意：修改原数组
  • 代码演示：
let text = fruits.unshift('Lemon')
console.log(text); // 4
console.log(fruits); // ['Lemon', 'apple', 'orange', 'Banana']

6. array.indexOf(item,start)

  • 方法含义：从头到尾地检索数组，返回数组中某个指定的元素位置。
  • 参数解释：
    • item：必须。查找的元素。
    • start：可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
  • 返回值：数组元素的索引 / -1
  • 代码演示：
console.log(fruits.indexOf('apple')); // 0
console.log(fruits.indexOf('apple',1)); // -1

7. array.lastIndexOf(item,start)

  • 方法含义：可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。
  • 参数解释：
    • item：必须。查找的元素。
    • 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。
  • 返回值：数组元素的索引 / -1
  • 代码演示：
console.log(fruits.lastIndexOf('Banana')); // 2
console.log(fruits.lastIndexOf('Banana',1)); // -1

8.array.splice(index,length,item)

  • 方法含义：通过索引删除某个元素 / 向数组添加新项
  • 参数解释：
    • index：要添加的位置
    • length：删除的个数
    • item：添加的数组元素
  • 返回值：被删除的数组元素
  • 代码演示：
// 测试1：数组元素替换
let text = fruits.splice(1,2,'lemon','mango')
console.log(text); // ['orange', 'Banana']
console.log(fruits); // ['apple', 'lemon', 'mango']

// 测试2：删除数组元素 - 不省略length
let text = fruits.splice(1,2)
console.log(text); // ['orange', 'Banana']
console.log(fruits); // ['apple']

// 测试3：删除数组元素 - 省略length
let text = fruits.splice(1)
console.log(text); // ['orange', 'Banana']
console.log(fruits); // ['apple']

9. array.slice(startIndex,endIndex)

  • 方法含义：裁剪数组
  • 参数解释：
    • startIndex：要剪切的开始位置
    • endIndex：要剪切的结束位置(可省略,即剪切到末尾)
  • 返回值：剪切出来的数组
  • 代码演示：
// 测试1：不省略endIndex
let text = fruits.slice(1,2)
console.log(text); // ['orange']

// 测试2：省略endIndex
let text = fruits.slice(1)
console.log(text); // ['orange', 'Banana']

10. array.toString()

  • 方法含义：数组转化为字符串
  • 返回值：转化后的字符串
  • 代码演示：
let text = fruits.toString()
console.log(text); // apple,orange,Banana

11. array.reverse()

  • 方法含义：颠倒数组中元素的顺序。
  • 返回值：新数组
  • 注意：会修改原数组
  • 代码演示：
let fruits = ['apple', 'orange', 'Banana']
console.log(fruits.reverse()); //  ['Banana', 'orange', 'apple']
console.log(fruits); // ['Banana', 'orange', 'apple']

12. array.concat()

  • 方法含义：合并数组
  • 返回值：转化后的字符串
  • 代码演示：
// 测试1：合并两个数组
let text = fruits.concat(animals)
console.log(text); // ['apple', 'orange', 'Banana', 'dog', 'cat']

// 测试2：合并多个数组
let text = fruits.concat(animals,numbers)
console.log(text); // ['apple', 'orange', 'Banana', 'dog', 'cat', 'one', 'two']

// 测试3：将数组与值合并
let text = fruits.concat(['cake','hamburger'])
console.log(text); // ['apple', 'orange', 'Banana', 'cake', 'hamburger']

13. array.toString()

  • 方法含义：数组转化为字符串
  • 返回值：转化后的字符串
  • 代码演示：
let text = fruits.toString()
console.log(text); // apple,orange,Banana

14. Array.isArray()

  • 方法含义：确定传递的值是否是一个Array
  • 返回值：布尔值
  • 代码演示：
console.log(Array.isArray(fruits)); // true
console.log(Array.isArray(['apple', 'orange', 'Banana'])); // true
console.log(Array.isArray({name:'zs'})); // false

15. array.filter()

  • 方法含义：筛选出数组中符合条件的所有元素
  • 返回值：数组
  • 代码演示：
console.log(fruits.filter(item => item.length > 5)); 
// ['orange', 'Banana']

16. array.every()

  • 方法含义：检测数组所有元素是否都符合指定条件

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

  • 返回值：布尔值

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

  • 代码演示：

console.log(fruits.every(item => item.length > 5)); // false
console.log(fruits.every(item => item.length > 4)); // true

17. array.find()

  • 方法含义：返回通过测试（函数内判断）的数组的第一个元素的值。

    • 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
    • 如果没有符合条件的元素返回 undefined

  • 返回值：符合条件的第一个元素 / undefined

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

  • 代码演示：

console.log(fruits.find(item => item.length > 5)); // orange
console.log(fruits.find(item => item.length > 10)); // undefined

18. array.findIndex()

  • 方法含义：返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

    • 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
    • 如果没有符合条件的元素返回 -1

  • 返回值：1 / -1

  • 注意：findIndex() 对于空数组，函数是不会执行的。

  • 代码演示：

console.log(fruits.findIndex(item => item.length > 5)); // 1
console.log(fruits.findIndex(item => item.length > 10)); // -1

18. array.includes(searchElement, fromIndex)

  • 方法含义：用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
  • 参数说明：
    • searchElement：必须。需要查找的元素值。
    • fromIndex：可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。
  • 返回值：布尔值
  • 代码演示：
// 测试1：省略 fromIndex
console.log(fruits.includes('one')); // false
console.log(fruits.includes('apple')); // true

// 测试2：不省略 fromIndex
console.log(fruits.includes('apple',1)); // false
// fromIndex为负值，则按升序从 array.length(3) + fromIndex(-3) 的索引 0 开始搜索。
console.log(fruits.includes('apple',-3)); // true
// 如果计算出的索引小于 0，则整个数组都会被搜索。
console.log(fruits.includes('apple',-100)); // true

20. array.join(separator)

  • 方法含义：把数组中的所有元素转换一个字符串。
  • 参数说明：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
  • 返回值：返回一个字符串。
  • 代码演示：
console.log(fruits.join()); // apple,orange,Banana
console.log(fruits.join('/')); // apple/orange/Banana
console.log(fruits.join(' and ')); // apple and orange and Banana

21. array.map()

  • 方法含义：返回数组中的元素为原始数组元素调用函数处理后的值。
  • 返回值：返回一个新数组
  • 代码演示：
console.log(num.map(item => item + 2 )); // [3, 4, 5]

22. array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

  • 方法含义：接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
  • 参数说明：
    • function(total,currentValue, index,arr)：必需。用于执行每个数组元素的函数。
      • total：必需。初始值, 或者计算结束后的返回值。
      • currentValue：必需。当前元素
      • currentIndex：可选。当前元素的索引
      • arr：可选。当前元素所属的数组对象。
    • initialValue：可选。传递给函数的初始值
  • 返回值：返回计算结果
  • 代码演示：
// 测试1：没有初始值initialValue
let sum = num.reduce(function (prev, cur, index, arr) {
      console.log(prev, cur, index);
      return prev + cur;
    },0)
console.log(arr, sum);

// 测试2：
let sum = num.reduce(function (prev, cur, index, arr) {
      console.log(prev, cur, index);
      return prev + cur;
    },0)
console.log(num, sum);

在这里插入图片描述
在这里插入图片描述
reduce()方法的具体说明

23. array.sort(sortfunction)

  • 方法含义：对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。
    默认排序顺序为按字母升序。
  • 参数说明：sortfunction：可选。规定排序顺序。必须是函数。
  • 返回值：
  • 代码演示：
let arr = [1,23,123,5]
// 测试1：不加参数
// 按照默认排序方式,按照字符串的Unicode码,所以会导致123在23的前面。
console.log(arr.sort()); //  [1, 123, 23, 5]

// 测试2：加参数
console.log(arr.sort(function(a,b){return a-b})); // [1, 5, 23, 123]
小泡泡c
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
python列表判断数字是否在列表中_Python检查列表项是否为数字
weixin_39997695的博客
11-28 4202
您可以使用异常处理，因为str.digit只对整数有效，对于类似这样的情况也可能失败：>>> str.isdigit(' 1')False使用生成器函数：def solve(lis):for x in lis:try:yield float(x)except ValueError:pass>>> mylist = ['1','orange','2','3','4','apple', '1.5', ...
JavaScript数组方法总结分析
10-22
以上就是JavaScript中常见的数组方法总结，每种方法都有其特定的用途和使用场景。熟悉这些方法可以有效提高数组操作的效率和灵活性。在实际开发中，合理选择和运用这些方法，可以极大地提升代码的可读性和可维护性。...
Python语法习题——理解序列-列表的索引、切片、相加、相乘，给定一个列表，用列表的内建函数求该列表的最大值、最小值、长度。lst=[‘小王’,’小张’,’xiaohua’,1,5,2.5,3.6,
WZY22502701的博客
10-22 770
用户输入数字，输出月份的英文和天数。修改闰年2月份为29天，打印一年的总天数排序所有的月份天数并输出统计29天、30天、31天的月份各有多少，存入字典，键名为月份的英文单词。打印该字典。try:input_month = int(input("请输入用户需要查询的月份（1~12）:"))print("请输入正确的数字！")
Javascript中数组常用方法
weixin_51364974的博客
04-18 273
1. 获取数组最大值 Math.max(...arr) Math.max.apply(null,arr) let max = arr[0]; for (let i = 0; i < arr.length - 1; i++) { max = max < arr[i+1] ? arr[i+1] : max } 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变
JavaScript中的数组方法总结+详解
热门推荐
qq_43223007的博客
11-28 4万+
在JS中,数组方法是非常重要且常用的的方法.在此整理总结一番. JavaScript 数组的力量隐藏在数组方法中。 1. js常用数组方法 方法名 功能 返回值 是否改变原数组 版本 push() 在数组最后一位添加一或多个元素 返回长度 Y ES5- unshift() 在数组前添加一或多个元素 返回长度 Y ES5- 2.方法详解 1.push .........
JS数组方法总结
weixin_52703987的博客
12-06 1276
JavaScript数组方法总结 一.JavaScript中创建数组的方式 1.使用Array构造函数 var color=new Array(); 注意：括号里面参数可以有参数，若为一个数字，表示该数组的长度，如果为多个数字或者一个（多个）非数字表示的是传递数组中应该包含的值。 2.使用数组字面量 var color=[]; 二.JavaScript中常见数组方法 1.join() （数组转字符串） 数组转字符串，方法只接收一个参数：即默认为逗号分隔符（）。 <script> v
数组方法总结（最全）
DJ老邓的博客
01-21 2199
文章目录一、什么是数组二、数组中的方法1. join()2. push()和pop()3. shift() 和 unshift()4. sort()5. reverse()6. concat()7. slice()8. splice()9. indexOf()和 lastIndexOf() （ES5新增）10. forEach() （ES5新增）11. map() （ES5新增）12. filter() （ES5新增）13. every() （ES5新增）14. some() （ES5新增）总结 一、
JS数组方法总结大全
硬澳钾的博客
06-16 4076
js数组方法总结 JavaScript语言里给数组提供了很多好用的方法对数组进行操作，用起来非常方便，在此总结记录一下。 一.数组创建 1.使用 Array 构造函数： var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(10); // 创建一个包含10项的数组 var arr3 = new Array("pink","teacher"); // 创建一个包含2个字符串的数组 2.使用字面量表示法： var arr4 = []; //创建一个空
JavaScript数组方法总结
CSPsy的博客
03-28 1603
JS数组方法总结 push, pop, shift, unshift, sort, splice, concat, map, indexOf, lastIndexOf, includes, find, findIndex, filterm reduce, join，数组与字符串转换的方法，数组中的搜索，数组排序，数组过滤，生成新数组
Array数组方法总结
m0_63241410的博客
05-15 1102
数组中一些常用的方法的使用及其案例结果呈现。
Ruby创建数组方法总结
12-31
如果要从键盘或文件中读取内容列表，这是创建变量的一种常见方法。 在下面的示例程序中，使用array命令和赋值运算符创建一个空数组。从键盘上读取三个字符串(字符的有序序列)并“pushed”或添加到数组的末尾。 #!/...
JavaScript基础进阶之数组方法总结(推荐)
10-19
下面是对标题中提到的数组方法的具体知识点总结。 首先，是连接数组的方法concat()。该方法的作用是将两个数组连接起来，形成一个新的数组。在用法上，它接受一个或多个数组作为参数，然后将这些数组中的所有元素...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 292
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 944
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1122
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
CSS的:defined伪类：选择已定义元素的新选择器
最新发布
2401_85743969的博客
08-17 462
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
【无标题】
weixin_42348009的博客
08-14 173
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 967
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
JS-总结数组所有方法
03-26
JavaScript数组有很多内置方法，可以操作和处理数据。以下是JavaScript数组的所有方法列表： 1. `concat()` - 连接两个或多个数组。 2. `copyWithin()` - 在数组内部将一段元素拷贝到另一个位置。 3. `entries()` -...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值