数组方法

最新推荐文章于 2024-07-10 14:03:37 发布
最新推荐文章于 2024-07-10 14:03:37 发布
阅读量134 收藏
点赞数
文章标签： 数组 js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyhhjj/article/details/116569802
版权

 

Array 使用

将类数组转换成数组

  • Array.from(val)
  • [...val] 扩展运算符

 

查找数组中是否存在某个值

  • arr.indexOf(val)

 

  • arr.find(callback) 满足要求第一个元素值
  • arr.findIndex(callback) 满足要求第一个元素索引

 

  • arr.every(callback) 有一项不满足要求则返回false
  • arr.some(callback) 有一项满足要求则返回true

 

  • arr.includes(val[, index]) 判断数组中是否包含一个指定的值

 

  • 转成Set，通过set.has(val)判断

 

遍历数组

传送门

  • for in 遍历数组元素的索引
  • for of 遍历数组元素的值

 

  • arr.forEach(callback) 循环数组
  • arr.map(callback) 映射（替换）元素
  • arr.filter(callback) 过滤元素
  • arr.reduce(callback) 计算元素
  • arr.every(callback) 有一项不满足要求则返回false
  • arr.some(callback) 有一项满足要求则返回true

 

  • arr.find(callback) 满足要求第一个元素值
  • arr.findIndex(callback) 满足要求第一个元素索引

 

注意：

  • map、forEach、filter、reduce、every、some
    • 不改变原数组；兼容IE9及以上。
    • 不过可以通过babel转义支持IE低版本
    • forEach 无返回值
    • map、filter返回一个新数组。
    • reduce 让数组的前后两项进行某种计算，返回最终操作的结果

 

Array 构造函数的静态方法

Array.from 将类数组转换成数组（ES6+）

 

Array Array.from(arrayLike[, mapFn[, thisArg]]) 将类数组转换成数组

 

类数组：有下标有length

 

参数：

  • arrayLike 类数组

 

可选参数:

  • mapFn 类似 map 方法，循环类数组时的回函函数，返回值组成新数组
  • thisArg mapFn 函数执行时的 this 指向

 

返回值：根据 arrayLike 生成的新数组

 

 

Array.isArray 检测数据是否是个数组（ES6+）

 

Boolean Array.isArray(data) 检测数据是否是个数组

 

参数：

  • data 要检测的数据

 

返回值：true 数组，false 非数组

<ul>
    <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

const lis = document.querySelectorAll('ul li') // 返回类数组

const val = Array.from(lis) // 将类数组转成数组
console.log('val: ', val)

const arr = [1, 2, 3]
Array.from(lis, function (item, index) {
  // 注意：使用thisArg这个参数时，mapFn不能使用箭头函数，不然this指向Window
  console.log(item, index)
  console.log('this: ',this)
}, arr)

// 返回
val: [li, li, li, li]

<li>1</li> 0
<li>2</li> 1
<li>3</li> 2
<li>4</li> 3

this: [1, 2, 3]

 

Array.of 将参数转成一个数组（ES6+）

 

Array Array.of(element0[, element1[, ...[, elementN]]]) 将参数转成一个数组

 

参数：

  • elementN 要放入数组中的数据

 

返回值：新数组

 

condt arr = Array.of(1, 2, 3, 4)
console.log(arr) // [1, 2, 3, 4]

 

Array 构造函数原型上的实例方法

arr.find 查找满足要求的第一个元素的值（ES6+）

 

Value arr.find(callback[, thisArg]) 查找数组中满足要求的第一个元素的值

 

参数：

  • callback 在数组每一项上执行的函数，接收 3 个参数：
    • element 当前遍历到的元素。
    • index[可选] 当前遍历到的索引。
    • array[可选] 数组本身

 

可选参数：

  • thisArg 执行回调时用作this 的对象

 

返回值：

数组中第一个满足所提供测试函数的元素的值，否则返回 undefined

const arr = [1, 2, 3, 4]

// 查找数组中满足要求的第一个元素的值
const find = arr.find((item, index) => {
  // return item > 5 // undefined
  // return item // 1
  return item >= 3 // 3
})
console.log(find)

// 可选参数
const arr1 = []
arr.find(function (item, index) {
  console.log(this) // []
}, arr1)

arr.findIndex 查找满足要求的第一个元素的索引（ES6+）

 

Index arr.findIndex(callback[, thisArg]) 查找数组中满足要求的第一个元素的值的索引

 

参数：

  • callback 针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:
    • element 当前元素。
    • index 当前元素的索引。
    • array 调用findIndex的数组。

 

可选参数：

  • thisArg 执行callback时作为this对象的值

 

返回值：满足要求的值的索引，不满足返回-1

 

const arr = [1, 2, 3, 4]

// 查找数组中满足要求的第一个元素的值的索引
const find = arr.findIndex((item, index) => {
  // return item > 5 // -1
  // return item // 0
  return item >= 3 // 2
})
console.log(find)

// 可选参数
const arr1 = []
arr.find(function (item, index) {
  console.log(this) // []
}, arr1)

 

arr.flat 扁平化多维数组（ES6+）

 

Array arr.flat([depth]) 扁平化多维数组

 

可选参数：

  • depth 指定要提取嵌套数组的结构深度，默认值为 1。

 

返回值：一个包含将数组与子数组中所有元素的新数组

const arr = [
    ['www', 18],
  ['abc', 20],
  [3, 4, 
    [5, 
      ['a', 'b']
    ],
   6
    ]
]
console.log(arr.flat()) // ["www", 18, "abc", 20, 3, 4, Array(2), 6]
console.log(arr.flat(1)) // ["www", 18, "abc", 20, 3, 4, Array(2), 6]
console.log(arr.flat(2)) // ["www", 18, "abc", 20, 3, 4, 5, Array(2), 6]
console.log(arr.flat(Infinity)) // ["www", 18, "abc", 20, 3, 4, 5, "a", "b", 6]

arr.flatMap 遍历扁平化多维数组（ES6+）

 

Array arr.flatMap(callback[, thisArg]) 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

 

参数：

  • callback 可以生成一个新数组中的元素的函数，返回新数组的元素。可以传入三个参数：
    • currentValue 当前正在数组中处理的元素
    • index 可选的。数组中正在处理的当前元素的索引。
    • array 可选的。被调用的 flatMap 数组

 

可选参数：

  • thisArg 执行 callback 函数时 使用的this 值

 

返回值：一个包含将数组与子数组中所有元素的新数组

 

注意：

  • 不改变原数组
const arr = [
    ['www', 18],
  ['abc', 20]
]
const newArr = arr.flatMap((item, index, array) => {
    item = item.filter((val, index) => {
    return index === 0
  })
  return item
})
console.log(newArr) // ["www", "abc"]

arr.fill 填充（ES6+）

 

Array arr.fill(value[, start[, end]]); 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引

 

参数：

  • value 用来填充数组元素的值。

 

可选参数：

  • start 起始索引，默认值为0。
  • end 终止索引，默认值为 arr.length
const arr = [1,2,3,4,5,6]
// arr.fill('a') // ["a", "a", "a", "a", "a", "a"]
// arr.fill('a', 2) // [1, 2, "a", "a", "a", "a"]
// arr.fill('a', 2, 20) // [1, 2, "a", "a", "a", "a"]
arr.fill('a', 2, 4) // [1, 2, "a", "a", 5, 6]
console.log(arr)

arr.includes 判断数组中是否包含一个指定的值（ES6+）

 

Boolean arr.includes(valueToFind[, fromIndex]) 判断数组中是否包含一个指定的值

 

参数：

  • valueToFind 需要查找的值

 

可选参数：

  • 从 fromIndex 处开始向后查找

 

返回值：true || false true 代表数组中包含 valueToFind， false 代表数组中不包含 valueToFind

const arr = ['a', 'b', 'c', 'd']
console.log(arr.includes('a')) // true
console.log(arr.includes('c', 3)) // false

arr.forEach() 遍历

无 arr.forEach(callback) 遍历数组

 

参数：

  • callback 针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:
    • element 当前元素
    • index 当前元素的索引
    • array 调用map的数组

 

返回值：无返回值

 

缺点：

  • 会循环不必要的内容

 

特点：

  • 会有独立作用域
  • 循环不能被break中止

 

注意：

  • 不改变原数组
  • 不允许在循环体内写return
  • forEach()也可以循环对象。
  • 兼容IE9及以上。不过可以通过babel转义支持IE低版本
let array = [1,2,3,4];
array.forEach((item, index, array) => {
　　console.log(item);
})

arr.map() 映射

Array arr.map(callback) 替换数组中的元素

 

参数：

  • callback 针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:
    • element 当前元素
    • index 当前元素的索引
    • array 调用map的数组

 

返回值：

新数组

 

注意：

  • 不改变原数组
  • 需要配合return，return的值会将原数组中的对应值替换掉
  • 若是没有return，相当于forEach()
  • 兼容IE9及以上。不过可以通过babel转义支持IE低版本
let array = [1, 2, 3, 4];
let temp = array.map((item, index, array) => {
　　return item * 10;
});
console.log(temp);　　//  [10, 20, 30, 40];
console.log(array);　　// [1, 2, 3, 4]

实例：把数组里的元素都转成字符串类型

let array = [1, 2, 3, 4];
let temp2 = array.map(String);
console.log(temp2); // => ["1", "2", "3", "4"]

arr.filter() 过滤

Array arr.filter(callback) 滤掉数组中不满足条件的元素

 

参数：

  • callback 针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:
    • element 当前元素
    • index 当前元素的索引
    • array 调用filter的数组

 

返回值：

新数组，将满足条件的元素放到新数组中

 

缺点：

  • 会循环不必要的内容

 

注意：

  • return不改变原数组，但是赋值会改变原数组内容
  • 兼容IE9及以上。不过可以通过babel转义支持IE低版本
let array = [1, 2, 3, 4];
let temp = array.filter((item, index, array) => {
  // item = 6 // 赋值会改变原数组内容
　return item >  3;
});
console.log(temp);　　// => [4]
console.log(array);　　// => [1, 2, 3, 4]

arr.reduce() 计算

Value arr.reduce(callback, element) 将数组计算为一个值

 

参数：

  • callback 针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面两个参数:
    • x 是上一次计算过的值, 第一次循环的时候是数组中的第1个元素
    • y 是数组中的每个元素, 第一次循环的时候是数组的第2个元素

 

可选参数：

  • element 初始值

 

返回值：

返回计算后的值

 

注意：

  • 不改变原数组
  • 兼容IE9及以上。不过可以通过babel转义支持IE低版本
let array = [1, 2, 3, 4];
let temp = array.reduce((x, y) => {
    return x + y;
});
console.log(temp);　　// 10
console.log(array);　　// [1, 2, 3, 4]
# 可选参数使用
let arr = [1, 2, 3]
let num = arr.reduce((a, b) => {
    return a + b * b
}, 0)
console.log(num) // => 14 : 0 + 1 * 1 + 2 * 2 + 3 * 3

let num1 = arr.reduce((a, b) => {
    return a + b * b
}, 4)
console.log(num1) // => 18 : 4 + 1 * 1 + 2 * 2 + 3 * 3

arr.every() 有一项不满足要求则返回false

Boolean arr.every(callback) 有一项不满足要求则返回false，类似查找，返回false

 

参数：

  • callback 针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:
    • element 当前元素
    • index 当前元素的索引
    • array 调用every的数组

 

返回值：

true || false 每一项都是true, 则返回true, 只要有一个是false, 就返回false

 

注意：

  • 不改变原数组
  • 兼容IE9及以上。不过可以通过babel转义支持IE低版本
let array = [2, 2, 1, 4];
let bo = array.every((item, index, array) => {
　　return item > 2;
});
console.log(bo);　　　　// false;

arr.some() 有一项满足要求则返回true

Boolean arr.some(callback) 有一项满足要求则返回true

 

参数：

  • callback 针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:
    • element 当前元素
    • index 当前元素的索引
    • array 调用some的数组

 

返回值：

true || false 遍历数组的每一项, 满足要求就返回true, 并停止循环

 

注意：

  • 不改变原数组
  • 兼容IE9及以上。不过可以通过babel转义支持IE低版本
let array = [1, 2, 6, 4];
let temp = array.some((item, index, array) => {
　　return item > 5;
});
console.log(temp);　　// true
# 封装函数
let arr = ['apple', 'banana', 'orange'];
function findInArray(arr, item){
    return arr.some((val, index, arr)=>{
        return val == item；
    })
}
findInArray(arr, 'orange');

arr.sort 排序

Array arr.sort(callback) 排序

 

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

 

可选参数：

  • callback 如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
    • 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
    • 若 a 等于 b，则返回 0。
    • 若 a 大于 b，则返回一个大于 0 的值。

 

返回值：返回排序好的数组

 

注意：

  • 改变原数组
let arr = [1, 6, 2, 4];

// 升序
const arr1 = arr.sort((a, b) => {
    return a - b
})
console.log(arr) // => [1, 2, 4, 6]
console.log(arr1) // => [1, 2, 4, 6]

// 降序
arr.sort((a, b) => {
    return b - a
})
console.log(arr) // => [6, 4, 2, 1]

 

cyhhjj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 中filter（过滤器）的使用
李三丧的博客
08-20 1566
今天修改bug过程中，看到前同事的项目代码中，发现定义了一个 fliters，很奇怪，这是啥？过滤器？网上查了一下确实叫vue自定义过滤器，初始我以为和js的Array中filter()过滤器一样，过滤符合标准的变量之类的，结果看过vue的fliter文档之后发现似乎不仅仅是这样。 最开始，我觉得，这算啥过滤器啊，这不应该叫数据处理器吗？为啥这么说，下面就来看看它的用法。...
数组的方法
weixin_47410267的博客
07-22 114
数组的方法：       1.push：从数组的尾部添加元素。 let arr = [1, 2, 3, 4, 5]; arr.push(6, 7, 8);//从尾部添加[6, 7, 8]; console.log(arr);//打印的是：[1, 2, 3, 4, 5, 6, 7, 8];       2.pop：从数组的尾部删除元素。 let arr = [1, 2, 3, 4, 5]; arr.pop();//从尾部删除最后一位[5]; co
C/C++之变长数组(VLA)和可伸缩型数组成员
飘零过客
09-27 4993
数组主要用来处理一系列同类型的数据集合，在C/C++中应用十分广泛。其中有两种特殊的数组，变长数组（VAL）和可伸缩型数组成员，应用得当的话，会非常方便。
Hbase 过滤器
qq_37668945的博客
11-13 179
编写程序代码如下，应用于order_items表，过滤出'price'列族，过滤出‘shop’列，过滤出值为’13‘的数据。 此过滤器应用于order_items表，famFilter为列族过滤器，此处过滤出'price'列族， colFilter为列过滤器，此处过滤出‘shop’列， valFilter为值过滤器，此处过滤出值为’13‘的数据。 import org.apac...
合并数组（val 数组里面为对象 将偶数条数组中对象的某个属性添加到奇数条数组中）
Xiang_Gong_Ya_的博客
03-02 148
computed: { // 合并数组（val 数组里面为对象 将偶数条数组中对象的某个属性添加到奇数条数组中） mergeOfTwoArrays() { return function (val, index) { // 定义一个新数组 存放合并后的数据 let arr = []; if (val.length > 0) { // 将原先的数据循环出来 val.forEach((i..
vue filter（过滤器） 详解
weixin_64609738的博客
10-12 8411
一个简单的时间过滤器
python数组 python数组方法
07-05
Python 数组方法详解 Python 数组是一种序列容器类型，可以装载同一类型的数据，具有合理的存储空间和排序规律。数组可以减小程序数据管理的复杂度，便于开发人员编码，可以说数组是高性能的集合数据结构。Python ...
Ruby创建数组方法总结
12-31
如果要从键盘或文件中读取内容列表，这是创建变量的一种常见方法。 在下面的示例程序中，使用array命令和赋值运算符创建一个空数组。从键盘上读取三个字符串(字符的有序序列)并“pushed”或添加到数组的末尾。 #!/...
JavaScript数组方法总结分析
10-22
下面小编就为大家带来一篇JavaScript数组方法总结分析。小编觉得挺不错的，现在分享给大家，也给大家做个参考
深入探密Javascript数组方法
10-24
主要详细介绍了Javascript数组方法，十分的全面详尽，有需要的小伙伴可以来研究下，希望对大家能有所帮助
javascript中数组方法汇总
10-23
本文给大家详细汇总了一下javascript中的数组方法，十分的全面细致，有需要的小伙伴可以参考下。
vue中filter
ssjjrr的博客
10-07 520
vue filter
给定一个数组 nums 和一个值 val，你需要原地移除所有数值等于 val 的元素，返回移除后数组的新长度
爷的博客
10-11 3421
class Solution { public: int removeElement(vector&lt;int&gt;&amp; nums, int val); }; int Solution::removeElement(vector&lt;int&gt;&amp; nums,int val) { int count=nums.size(); int temp; ...
var 数组变量名 [元素数量]T
li123128的博客
10-24 2327
　　var 数组变量名 [元素数量]T 　　 　　比如：var a [5]int， 数组的长度必须是常量，并且长度是数组类型的一部分。一旦定义，长度不能变。 [5]int和[10]int是不同的类型。 　　 　　var a [3]int 　　 　　var b [4]int 　　 　　a = b //不可以这样做，因为此时a和b是不同的类型 　　 　　数组可以通过下标进行访问，下标是从0开始，最后一...
jquery val() 可以给数组赋值
jhhuang4836的专栏
09-26 1245
&lt;select id="single"&gt; &lt;option&gt;Single&lt;/option&gt; &lt;option&gt;Single2&lt;/option&gt; &lt;/select&gt; &lt;select id="multiple" multiple="multiple"&amp
C++11系列学习之三----array/valarray
热门推荐
生如蚁，美如神
09-06 1万+
创建数组，是程序设计中必不可少的一环。我们一般可以有以下几种方法来创建数组。 一、C++内置数组 数组大小固定，速度较快 通用格式是：数据类型   数组名[ 数组大小 ]; 如 int a[40];//一维数组   int a[5][10];//二维数组 二、vector创建数组 包含多种通用算法 长度可变，使用灵活，但效率稍
Webkit简介以及工作流程
最新发布
读心悦
07-10 316
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
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、付费专栏及课程。

余额充值