认识JavaScript（3）JavaScript 的数组方法大全

最新推荐文章于 2024-05-06 22:29:22 发布
最新推荐文章于 2024-05-06 22:29:22 发布
阅读量153 收藏
点赞数 1
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44827865/article/details/107762933
版权

数组方法大全

序 看图理解

在这里插入图片描述

1、添加元素

1.1 .push() -- 尾部添加

使用场景： 数组尾部添加元素。
返回值： 添加完后的数组的长度。
是否改变原数组： 是
参数: 添加元素
案例：

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

1.2 .unshift() -- 头部添加

使用场景： 数组头部添加元素。
返回值： 添加完后的数组的长度。
是否改变原数组： 是
参数: 添加元素
案例：

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

2、删除元素

2.1 .pop() -- 尾部删除

使用场景： 数组尾部删除元素。
返回值： 删除的元素。
是否改变原数组： 是
案例：

let arr = [1,2,3,4,5]
console.log(arr.pop())     // 5
console.log(arr)           //[1,2,3,4]

2.2 .shift() -- 头部删除

使用场景： 数组头部删除元素。
返回值： 删除的元素。
是否改变原数组： 是
案例：

let arr = [1,2,3,4,5]
console.log(arr.shift())    // 1
console.log(arr)            // [2,3,4,5]

2.3 .splice(i,n)

功能： 删除从i(索引值)开始之后的那个元素。
使用场景： 从任意位置开始删除任意元素。
返回值： 删除的元素。
是否改变原数组： 是
参数： i ⇒ 索引值 、 n ⇒ 个数
案例：

let arr = [1,2,3,4,5]
console.log(arr.splice(2,2))     //[3,4]
console.log(arr)                 // [1,2,5]

3、查找元素

3.1 .indexOf(item,start)

功能： 查找某个元素在数组中的位置
相似方法： lastIndexOf() – 查找字符串最后出现的位置
参数：

  • item 必填 ⇒ 查找的元素
  • start 可选 ⇒ 规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

返回值： 指定的字符串值在字符串中首次出现的位置，-1代表没有找到该元素。也就说明该数组不包含此元素。
案例：

var arr = ['a','b',4,7,2,'k'];

var index = arr.indexOf('b')
var index1 = arr.indexOf(9)
var index2 = arr.indexOf('b',4)

console.log(index)      // 1  
console.log(index1)     //  -1
console.log(index2)     //  -1

上面的 index2 表示，从数组arr的第四个位置起查找b，虽然arr数组包含b元素，但是它的位置是在1，如果从第四个位置开始查找时就不可能存在了。

3.2 .find(callback)

功能： 用于找出第一个符合条件的数组元素。
返回值： 循该方法环遍历数组，直到找出第一个返回值为 true 的元素，然后返回该元素，否则返回 undefined。
是否改变原数组： 否
案例：

var arr = [1, 5, 10, 15];

var arr2 = arr.find(function(value, index, arr) {
	return value > 9;
}) 

console.log(arr2)   // 10

find() 方法为数组中的每个元素都调用一次函数执行：

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

3.3 .findIndex(callback)

功能： array.findIndex() 和 array.find()十分类似，返回第一个符合条件的数组元素的位置，如果所有元素都不符合条件，则返回-1。
返回值： 返回第一个符合条件的数组元素的位置，如果所有元素都不符合条件，则返回-1。
是否改变原数组： 否
案例：

var arr = [1, 5, 10, 15];

var arr2 = arr.findIndex(function(value, index, arr) {
	return value > 9;
}) 

console.log(arr2)    // 2

3.4 for()循环

语法： 遍历数组，然后 if 判断

var arr = [1, 5, 10, 15];
for(let i=0; i<arr.length; i++) {
	if(arr[i] === 查找值) {
		//则包含该元素
	}else{
		//不包含该元素
	}
}

3.5 .include(searchElement,fromIndex)

功能： 该方法用来判断一个数组是否包含一个指定的值，如果包含返回 true，否则返回false。
是否改变原数组： 否
参数：

  • searchElement (必填) ⇒ 需要查找的元素值。
  • fromIndex（可选） ⇒ 开始查找的位置。

案例：

案例1：

let site = ['runoob', 'google', 'taobao'];
 
site.includes('runoob');     // true 
site.includes('baidu');      // false

案例2：

var arr = ['a', 'b', 'c'];

arr.includes('c', 3);   //false
arr.includes('c', 100); // false

上面代码表示，如果fromIndex 大于等于数组长度 ，则返回 false 。该数组不会被搜索 。

案例2：

var arr = ['a', 'b', 'c'];

arr.includes('a', -100);    // true
arr.includes('b', -100);    // true
arr.includes('c', -100);    // true

// 数组长度是3
// fromIndex 是 -100
// computed index 是 3 + (-100) = -97

上面代码表示，如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。

3.6 .some(callback)

功能： 用于检测数组中的元素是否满足指定条件。
返回值： 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。
是否改变原数组： 否
案例：

var ages = [3, 10, 18, 20];

var age = ages.some((v,i)=>{
	return v == 18
})

console.log(age)    // true
console.log(ages)   //[3, 10, 18, 20]

3.7 .every(callback)

功能： 用于检测数组中的元素是否全部满足指定条件。
返回值： 如果有所有元素都满足条件，则表达式返回true ,只要有一个没有满足条件的元素，则返回false。
是否改变原数组： 否
案例：

let arr = [1,2,3,4,5]

let arr1 = arr.every( (i, v) => i < 3)
console.log(arr1)      // false

let arr2 = arr.every( (i, v) => i < 10)
console.log(arr2)      // true

4、.join() -- 转字符串

功能： 将数组中所有元素都转化为字符串并连接在一起。
使用场景： 数组转字符串。
返回值： 字符串
是否改变原数组： 否
案例：

var arr1 = [1,2,3,4,5,6];

var arr2 = arr1.join();

console.log(arr2)      // 1,2,3,4,5,6
console.log(arr1)      //  [1, 2, 3, 4, 5, 6]

5、.reverse() -- 倒序

功能： 将数组反转。
使用场景： 数组倒序。
是否改变原数组： 是
返回值： 反转后的数组
案例：

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

6、.concat() -- 拼接

功能： 用于连接两个或多个数组。
使用场景： 数组拼接。
是否改变原数组: 否
参数：

  • 字符串
  • 数组

案例：

var arr1 = [1,2,3,4,5,6];
var arr2 = [11,12,13,14,15];
var arr3 = ['a','b','c','d','e','f'];

// 把 concat() 中的参数连接到数组
arr1.concat(7,8,9)     // [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(arr1)       // [1, 2, 3, 4, 5, 6]

// 连接两个数组
arr1.concat(arr2)      // [1, 2, 3, 4, 5, 6, 11, 12, 13, 14, 15]
console.log(arr1)      // [1, 2, 3, 4, 5, 6]

// 连接三个数组
arr1.concat(arr2,arr3)    //  [1, 2, 3, 4, 5, 6, 11, 12, 13, 14, 15, "a", "b", "c", "d", "e", "f"]
console.log(arr1)         // [1, 2, 3, 4, 5, 6]

7、.sort() -- 排序

功能： 排序
使用场景： 数组排序
是否改变原数组： 是
参数：

  • 无参数 ⇒ 按照字符编码的顺序进行排序。
  • 有参数 ⇒ 必须是函数。

案例：

// 按照字符编码的顺序进行排序
let arr = [2,10,6,1,4,22,3]
console.log(arr.sort())       // [1, 10, 2, 22, 3, 4, 6]

// 升序排序
let arr1 = arr.sort((a, b) => a - b)  
console.log(arr1)             // [1, 2, 3, 4, 6, 10, 22]

// 降序排序
let arr2 = arr.sort((a, b) =>b-a)  
console.log(arr2)    		  // [22, 10, 6, 4, 3, 2, 1]

console.log(arr)  			  // [22, 10, 6, 4, 3, 2, 1]

8、.slice(start,end) -- 截取

使用场景： 切去索引值start到索引值end的数组，不包含end索引的值。
是否改变原数组： 否
返回值： 切出来的数组
参数： start ⇒ 起始下标、end ⇒ 终止下标
案例：

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

9、 遍历数组方法

9.1 普通for循环

语法：

for (语句 1; 语句 2; 语句 3) {
     // 要执行的代码块
}

语句 1 在循环（代码块）开始之前执行。
语句 2 定义运行循环（代码块）的条件。
语句 3 会在循环（代码块）每次被执行后执行。

返回值： 没有return
案例：

var arr = [1,2,3,4,5,6];
for(j = 0; j < arr.length; j++) {
   console.log(j)
} 
console.log(j)     
// 0
// 1
// 2
// 3
// 4
// 5

// 6

9.2 优化版for循环

说明： 使用临时变量，将长度缓存起来，避免重复获取数组长度。
使用场景： 较大数组
案例：

var arr = [1,2,3,4,5,6];
for(j = 0,len=arr.length; j < len; j++) {
   console.log(j)
}

9.3 .forEach(callback)循环

语法：

arr.forEach(function(value,index,array){
　   // 要执行的代码块
});

参数：
callback的参数： value ⇒ 当前索引的值
　　　　　　　　index ⇒ 索引
　　　　　　　　array ⇒ 原数组

案例：

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
    console.log(`value:${value}    index:${index}     array:${array}`)
})   
console.log(arr)
//  value:1    index:0     array:1,2,3,4,5
//  value:2    index:1     array:1,2,3,4,5
//  value:3    index:2     array:1,2,3,4,5
//  value:4    index:3     array:1,2,3,4,5
//  value:5    index:4     array:1,2,3,4,5
// [1, 2, 3, 4, 5]

9.4 for..in循环

语法：

for(j in arr) {}

案例：

var arr = [1,4,2,5,3,6,8];
for(j in arr) {
    console.log(arr[j])
}
// 1
// 4
// 2
// 5
// 3
// 6
// 8

9.5 .map(callback)循环

功能： 映射数组(遍历数组)
使用场景： 对数组的每项元素进行加工
是否改变原数组： 是
返回值： 有return
参数：
　callback的参数： value ⇒ 当前索引的值
　　　　　　　　　index ⇒ 索引
　　　　　　　　　array ⇒ 原数组
案例：

var arr = [1,4,2,5,3,6,8];
var arr2 = arr.map((v,i)=>{
    return v*3
})
console.log(arr2)
//  [3, 12, 6, 15, 9, 18, 24]

9.6 各种遍历方式的性能对比

分析结果转载于【南北12345678】

分析结果1

以下截图中的数据是，在chrome (支持es6)中运行了100次后得出的结论(每次运行10次,一共10个循环，得到的分析结果)
在这里插入图片描述分析结果2

以下截图数据是，在chrome (支持es6)中运行了1000次后得出的结论(每次运行100次,一共10个循环，得到的分析结果)

在这里插入图片描述

10、.filter(callback) -- 过滤器

功能： 过滤数组
使用场景： 过滤数组
是否改变原数组： 否
返回值： 返回一个满足要求的数组。
参数：
callback的参数： value ⇒ 当前索引的值
　　　　　　　　index ⇒ 索引
　　　　　　　　array ⇒ 原数组
案例：

let arr = [1,2,3,4,5]
let arr1 = arr.filter( (i, v) => i < 3)
console.log(arr1)    // [1, 2]
console.log(arr)     // [1,2,3,4,5]

11、.reduce(callback, initialValue) -- 累加器

功能： 迭代数组的所有项，将数组中的每个值（从左到右）合并，最终计算为一个值。
使用场景： 总价、百分占比
是否改变原数组： 否
案例：

let arr = [0,1,2,3,4]
let arr1 = arr.reduce((preValue, curValue) => 
    preValue + curValue
)
console.log(arr1)     // 10

callback 的参数：

  • preValue ⇒（必填） 上一次调用回调返回的值，或者是提供的初始值
  • curValue ⇒（必填） 数组中当前被处理的数组项
  • index ⇒（可选）当前数组项在数组中的索引值
  • array ⇒（可选）原数组

12、.from() -- 伪数组转数组

功能： 将伪数组变成数组，就是只要有length的就可以转成数组。
使用场景： 将伪数组变成数组
案例：

let str = '12345'
console.log(Array.from(str))    // ["1", "2", "3", "4", "5"]

let obj = {0:'a',1:'b',length:2}
console.log(Array.from(obj))    // ["a", "b"]

13、.of() -- 一组值转数组

功能： 将一组值转换成数组。
案例：

let str = '11'
console.log(Array.of(str))    // ['11']

等价于

console.log(new Array('11'))  // ['11]

14、.fill(target, start, end) -- 填充数组

功能： 使用给定的值，填充一个数组。
使用场景： 填充数组
是否改变原数组： 是
参数：

  • target ⇒ 待填充的元素
  • start ⇒ 开始填充的位置-索引
  • end ⇒ 终止填充的位置-索引（不包括该位置)
    案例：
let arr = [1,2,3,4,5]；
let arr1 = arr.fill(5)
console.log(arr1)  // [5, 5, 5, 5, 5]
console.log(arr)   // [5, 5, 5, 5, 5]

let arr = [1,2,3,4,5]；
let arr2 = arr.fill(5,2)
console.log(arr2)   // [ 1,2,5,5,5 ]

let arr = [1,2,3,4,5]；
let arr3 = arr.fill(5,1,3)
console.log(arr3)   // [ 1,5,5,4,5 ]

15、.keys() -- 遍历数组的键名

let arr = [1,2,3,4]
let arr2 = arr.keys()
for (let key of arr2) {
    console.log(key);   // 0,1,2,3
}

16、.values() -- 遍历数组键值

let arr = [1,2,3,4]
let arr1 = arr.values()
for (let val of arr1) {
     console.log(val);   // 1,2,3,4
}

17、.entries() -- 遍历数组的键名和键值

返回值： 返回迭代数组，迭代数组中每个值 前一个是索引值作为 key， 数组后一个值作为 value。
案例：

let arr = [1,2,3,4]
let arr1 = arr.entries()
for (let e of arr1) {
    console.log(e);    // [0,1] [1,2] [2,3] [3,4]
}

上一节：JavaScript 的数据类型
下一节：JavaScript 的运算符

孛儿只斤·苏日娜
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Array.find（）解析
啊啊怪的学习日记
12-16 1万+
Array.find() 返回数组中满足提供的测试函数的第一个元素的值，若没有满足测试函数的元素，则返回undefined 1、概要 array.find(function(currentValue, index, arr),thisValue){ // 如果返回 true，则返回 item 并停止迭代 // 对于假值（falsy）的情况，则返回 undefined } 2、参数 function（必选）：在数组的元素上执行的函数，它带有三个参数 1、currentValue（必选）：元素
[笔记]认识Javascript数组
07-14
个人多年前学习笔记，Javascript数组，初学者可以看看，高手就不用看了
Array.find
最新发布
weixin_51676646的博客
05-06 259
Array.find方法的使用
JavaScript 数组find() 方法
qq_36742720的博客
05-07 6743
定义和用法 find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。 find() 方法为数组中的每个元素都调用一次函数执行： 当数组中的元素在测试条件时返回true时, find() 返回符合条件的元素，之后的值不会再调用执行函数。 如果没有符合条件的元素返回 undefined 注意:find() 对于空数组，函数是不会执行的。 注意:find() 并没有改变数组...
node.js基础 Array.find()
qq_42015021的博客
09-11 1331
所有的module都可以引用。
array.find()方法
weixin_30907935的博客
08-15 1372
//array.find(function(currentValue, index, arr),thisValue) 方法说明let tempArray = [ {"key":100,"key2":"sdfsdf"},{"key":210,"key2":"dfgdg"},{"key":310,"key2":"sdfsdfbh"}, ]; this.tempValue = 210...
javascript的数组和常用函数详解
01-19
Javascript不支持多维数组，但是因为数组里面可以包含对象（数组也是一个对象），所以数组可以通过相互嵌套实现类似多维数组的功能。 1.1 定义数组 声明有10个元素的数组： 代码如下:var a = new Array(10);此时为a...
JavaScript jQuery 中定义数组与操作及jquery数组操作
11-23
1.认识数组 数组就是某类数据的集合，数据类型可以是整型、字符串、甚至是对象 Javascript不支持多维数组，但是因为数组里面可以包含对象（数组也是一个对象），所以数组可以通过相互嵌套实现类似多维数组的功能 1.1...
深入认识JavaScript中的函数
12-03
JavaScript中的函数不同于其他的语言，每个函数都是作为一个对象被维护和运行的。通过函数对象的性质，可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递。在继续讲述之前，先看一下函数的使用语法： ...
JavaScript中split() 使用方法汇总
10-24
本文向大家重点讲解一下Javascript中split函数使用，它可以将一个字符串分割为子字符串，然后将结果作为字符串数组返回，相信本文介绍你对split函数的用法有明确的认识。
ES6中Array.find()和findIndex()函数的用法详解
01-21
ES6为Array增加了find()，findIndex函数。 find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。 findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。 他们的都是一个查找回调函数。 [1, 2, 3, 4].find((value, index, arr) => { }) 查找函数有三个参数。 value：每一次迭代查找的数组元素。 index：每一次迭代查找的数组元素索引。 arr：被查找的数组。 例： 1.查找元素，返回找到的值，找不到返回undefined。 const arr1 = [1, 2, 3,
Array-Find All Duplicates in an Array
fighting!
11-27 139
Description: Given an array of integers, 1 ≤ a[i] ≤ n (n = size of array), some elements appear twice and others appear once. Find all the elements that appear twice in this array. Could you do it ...
Array扩展方法——find()
dandanmei0513的博客
08-15 1045
Array扩展方法——find()快速找到数组中符合条件的对象
JavaScript数组方法 find() ，使用详细（js的 find() 方法）
热门推荐
weixin_65793170的博客
05-05 2万+
find() 方法是 JavaScript 中用于在数组中查找特定条件的第一个元素，如果找到一个元素使得回调函数返回true，则该元素作为结果返回；如果没有找到这样的元素，则返回undefined，该函数不会修改原始数组
ES6中Array.find()方法和Array.findIndex()方法
阿泽呀的博客
08-23 7493
 两种方法不会改变原数组 该方法在第一次调用回调函数的时候就已经确定好索引，在find()方法执行之后再添加到的不会被执行，而删除的项通向会被执行到，值是undefined。   let a = [1,2,3,4,5,6,7,8,9] a.find(function(item,index,arr){ if(index == 0){ a.push("10"); ...
ES6 中 Array.find() 方法的使用
weixin_61698554的博客
05-14 603
将数组中满足需求的第一个数组元素返回，若没有满足条件的数据将返回undefined。在实际中可以通过id或者code与后台接口返回的数据（id或者code）进行判断，当满足需求时，就可以将对应的name或者其他数据进行显示。
Es6 Array.find() 和 Array.findIndex() 用法 (找到第一个符合条件的元素)
卜卦的博客
12-11 3652
问题 ：找到数组中第一个符合条件的元素/下标 array.find()返回值是第一个符合条件的数组子项， array.findIndex() 返回第一个符合条件的数组子项的下标， 都是短路操作，即找到符合条件的之后就不在继续遍历。 let arr = ['张三', '李四', '王五', '小明', '老王'] let findItem = arr.find(item => item === '小明') // 返回子项 let findIndex = arr.findIndex(item =
js Array 原生方法
nbin2008的博客
09-18 8628
比较有用的原生js数组方法
JavaScript数组方法
09-13
JavaScript的数组方法包括push()、slice()和find()等。 1. push()方法用于向数组的末尾添加一个或多个元素，并返回新数组的长度。 2. slice()方法用于从原数组中提取出指定位置的元素，然后返回一个新数组。它可以...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值