9102年了，Array数组的方法赶紧用起来！

最新推荐文章于 2021-08-20 18:02:20 发布
最新推荐文章于 2021-08-20 18:02:20 发布
阅读量116 收藏
点赞数
原文链接：https://juejin.im/post/5cd144b2e51d453af7192b5d
版权

前言

写久了业务代码的我，已经要被社会抛弃了。今天回过头去巩固基础知识，发现有很多自己业务中不经常用，或者说是不知道那个方法，导致自己重写一个方法去实现。关于Array对象的方法你是否只用concat、join、pop、push、shift、unshift、reverse、sort、slice、splice、toString、indexOf、find等？接下来我们就一起回顾一下那些我们用的少或者没有用过的Array对象方法！

1. Array.from()

从一个类似数组或可迭代对象中创建一个新的数组实例

1.1 语法
/**
 * @description - 从一个类似数组或可迭代对象中创建一个新的数组实例(伪数组对象:拥有一个 length 属性和若干索引属性的任意对象;可迭代对象:可以获取对象中的元素,如 Map和 Set 等)
 * @param arrayLike - 想要转换成数组的伪数组对象或可迭代对象.
 * @param mapFn - 可选参数，如果指定了该参数，新数组中的每个元素会执行该回调函数.
 * @param thisArg - 可选参数，执行回调函数 mapFn 时 this 对象.
 * @return { Array } - 一个新的数组实例
 */
Array.from(arrayLike[, mapFn[, thisArg]])
复制代码
1.2 示例
// Array from a String
Array.from('foo'); 
// ["f", "o", "o"]

// Array from a Set
let s = new Set(['foo', window]); 
Array.from(s)
// ["foo", window]

// Array from a Map
let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); 
// [[1, 2], [2, 4], [4, 8]]

// Array from an Array-like object (arguments)
function f() {
  return Array.from(arguments);
}
f(1, 2, 3);
// [1, 2, 3]

// 在Array.from中使用箭头函数
Array.from([1, 2, 3], x => x + x);  
// [2, 4, 6]

// 伪数组
Array.from({length: 5});
// [undefined, undefined, undefined, undefined, undefined]
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

// 改变回调函数 mapFn 时 this 对象
Array.from([1, 2, 3], function(){console.log(this)}); 
// 浏览器环境下是三次 Window对象

var obj ={name: 'obj'}
Array.from([1, 2, 3], function(){console.log(this)}, obj); 
// 三次 obj 对象
复制代码

2. Array.prototype.copyWithin()

浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

2.1 语法
/**
 * @description - 浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。
 * @param target - 0 为基底的索引，复制序列到该位置。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length.
 * @param start - 0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。如果 start 被忽略，copyWithin 将会从0开始复制.
 * @param end - 0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算.
 * @return { array } - 改变后的数组
 */
arr.copyWithin(target[, start[, end]])
复制代码
2.2 示例
let numbers = [1, 2, 3, 4, 5];

numbers.copyWithin(-2);
// [1, 2, 3, 1, 2]

numbers.copyWithin(0, 3);
// [4, 5, 3, 4, 5]

numbers.copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]

numbers.copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]

[].copyWithin.call({length: 5, 3: 1}, 0, 3);
// {0: 1, 3: 1, length: 5}

// ES2015 Typed Arrays are subclasses of Array
var i32a = new Int32Array([1, 2, 3, 4, 5]);

i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// On platforms that are not yet ES2015 compliant: 
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]
复制代码

3. Array.prototype.some()

测试是否至少有一个元素通过由提供的函数实现的测试。

3.1 语法
/**
 * @description - 测试数组的元素是否至少一个通过了指定函数的测试。
 * @param callback - 用来测试每个元素的函数。
 * @param thisArg - 执行 callback 时使用的 this 值。
 * @return { Boolean } - 是否通过测试。
 */
arr.some(callback(element[, index[, array]])[, thisArg])
复制代码
3.2 示例
function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
复制代码

4. Array.prototype.every()

测试数组的所有元素是否都通过了指定函数的测试。

4.1 语法
/**
 * @description - 测试数组的所有元素是否都通过了指定函数的测试。
 * @param callback - 用来测试每个元素的函数。
 * @param thisArg - 执行 callback 时使用的 this 值。
 * @return { Boolean } - 是否通过测试。
 */
arr.every(callback[, thisArg])
复制代码
4.2 示例
function isBigEnough(element, index, array) {
  return (element >= 10);
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true
复制代码

5. Array.prototype.flat()

会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

5.1 语法
/**
 * @description - 会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
 * @param depth - 指定要提取嵌套数组的结构深度, 默认值为 1。
 * @return { array } - 一个包含将数组与子数组中所有元素的新数组。
 */
arr.flat(depth)
复制代码
5.2 示例
var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 作为深度，展开任意深度的嵌套数组
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

// 会移除数组中的空项
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]
复制代码

6. Array.prototype.flatMap()

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

6.1 语法
/**
 * @description - 使用映射函数映射每个元素，然后将结果压缩成一个新数组。
 * @param callback - 可以生成一个新数组中的元素的函数，可以传入三个参数：
 * 		@param currentValue - 当前正在数组中处理的元素。
 * 		@param index - 可选的。数组中正在处理的当前元素的索引。
 *		@param array - 可选的。被调用的 map 数组。
 * @param thisArg - 可选的。执行 callback 函数时 使用的this 值。
 * @return { array } - 一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为1。
 */
arr.flatMap(function callback(currentValue[, index[, array]]) {
    // 返回新数组的元素
}[, thisArg])
复制代码
6.2 示例
let arr = ["今天天气不错", "", "早上好"]

arr.map(s => s.split(""))
// [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]

arr.flatMap(s => s.split(''));
// ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]
复制代码

7. Array.prototype.includes()

用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

注意：对象数组不能使用includes方法来检测。

7.1 语法
/**
 * @description - 用来判断一个数组是否包含一个指定的值。
 * @param valueToFind - 需要查找的元素值。
 * @param fromIndex - 可选的。从fromIndex 索引处开始查找 valueToFind。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜 （即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。
 * @return { Boolean } - 是否包含。
 */
arr.includes(valueToFind[, fromIndex])
复制代码
7.2 示例
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
复制代码

8. Array.prototype.lastIndexOf()

返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

8.1 语法
/**
 * @description - 返回指定元素在数组中的最后一个的索引。
 * @param searchElement - 被查找的元素。
 * @param fromIndex - 可选的。从此位置开始逆向查找。
 * @return { Boolean } - 是否包含。
 */
arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])
复制代码
8.2 示例
var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3
复制代码

9. Array.prototype.reduce()

对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

9.1 语法
/**
 * @description - 对数组中的每个元素执行一个由您提供的**reducer**函数(升序执行)，将其结果汇总为单个返回值。
 * @param callback - 执行数组中每个值的函数，包含四个参数：
 * 		@param accumulator - 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue。
 * 		@param currentValue - 当前正在数组中处理的元素。
 * 		@param index - 可选的。数组中正在处理的当前元素的索引。
 *		@param array - 可选的。被调用的 map 数组。
 * @param initialValue - 可选的。作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
 * @return - 函数累计处理的结果。
 */
arr.reduce(callback[, initialValue])
复制代码
9.2 示例
// 数组中最大值
var arr = [10, 0, 100, 99, 48, 101];
var reducer = (x, y) => Math.max(x, y);
arr.reduce(reducer); // 101

// 累加
var reducer2 = (x, y) => x + y;
arr.reduce(reducer2); // 358
复制代码

这里我们可以看看累加的运行过程：

callback(也就是reducer2)accumulatorcurrentValue返回值
101010
210010
310100110
411099209
520948257
6257101358

如果我们将 initialValue 这个参数也传入进去，我们再看一下效果：

var arr = [10, 0, 100, 99, 48, 101];

// 累加
var reducer2 = (x, y) => x + y;
// initialValue,作为第一次调用 callback 函数时的第一个参数的值。
// 也就是说第一次调用 callback 的时候 x 的值就是10了。
arr.reduce(reducer2, 10); // 368
复制代码
callback(也就是reducer2)accumulatorcurrentValue返回值
1101020
220020
320100120
412099219
521948267
6267101368

10. Array.prototype.entries()

返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

10.1 语法
/**
 * @description - 返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
 * @return { Array Iterator } - 一个新的 Array 迭代器对象。
 */
arr.entries()
复制代码
10.2 示例
var arr = ["a", "b", "c"];
var iterator = arr.entries();
console.log(iterator);
/*
	Array Iterator {}
         __proto__:Array Iterator
         next:ƒ next()
         Symbol(Symbol.toStringTag):"Array Iterator"
         __proto__:Object
*/

for (let e of iterator) {
    console.log(e);
}

// [0, "a"] 
// [1, "b"] 
// [2, "c"]
复制代码

注：以上大部分都是在文档里面的，只是个人平时使用笔记少或者没用过的，然后统一做个记录。貌似还都是ES6的，都9102年了，赶紧用起来！意思就是抄袭了一下文档，大佬轻喷！

小广告

我自己运营的公众号，记录我自己的成长！

公众号：前端曰

公众号ID：js-say

ps：是(yue)不是(ri)

转载于:https://juejin.im/post/5cd144b2e51d453af7192b5d

weixin_33938733
关注
ENVI_IDL:批量对Modis Swath产品进行均值运算+解析
炒茄子的博客
07-14 1078
如题所示，就是对Modis Swath产品进行均值运算这里需要注意几点：——————————————————————————————————————————第一：由于每一个Modis Swath数据的经纬度范围不一样(它不像之前的OMI数据一样是全球数据，之前求和在平均就好了)，这里需要现在知道我们现在手上拿到的Modis Swath数据的经纬度范围有多大，那么就需要遍历所有的MOdis Swath数据找到所有的文件里面中的最大、最小经纬度——————————————————————————————————
使用TensorFlow 2.0+和Keras实现AlexNet CNN架构
weixin_26752765的博客
09-05 1981
技术 (Technical) 介绍 (Introduction) The main content of this article will present how the AlexNet Convolutional Neural Network(CNN) architecture is implemented using TensorFlow and Keras. 本文的主要内容将介绍如何使...
[].copyWithin.call({length:5,3:1},0,3)
weixin_30767921的博客
07-11 270
[].copyWithin.call({length:5,3:1},0,3) call 指代this指向 [{length:5,3:1}].copyWithin(0,3) 类数组转换 [0:underfined,1:undefined,2:underfined,3:1,4:underfined,length:5].copyWithin(0,3,5) 类数组完善 和 取值范围限定修改 ...
copyWithin的call调用实例——关于this
JimmyLuo17的博客
01-15 1155
学习过JS的朋友，如果你想对call、apply和bind方法有更深切的了解，可以看看这篇文章。废话不多说，我们直接上代码：[].copyWithin.call({length: 5, 3: 1}, 0, 3); // { 0: 1, 3: 1, length: 5}copyWithin()方法会浅拷贝数组的部分元素到同一数组的不同位置，且不改变数组的大小，返回该数组。如果，对这条ES6语法不熟悉的
关于es6数组章节[].copyWithin.call({length:5,3:1},0,3)的理解
热门推荐
slongzhang的博客
07-21 13万+
// 将3号位复制到0号位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5} // 对象转数组(建议用es6的Array.from(Obj)转换比较直观) Array.from({length: 5, 3: 1}) // [undefined, undefined, undefined, 1, undefined] // 转换完毕，进行处理 [undefined, undefined, undefined, 1,
array.copyWithin
吾生有涯，而知无涯。
12-27 951
语法arr.copyWithin(target[, start[, end]]) 实例 [1, 2, 3, 4, 5].copyWithin(-2); // [1, 2, 3, 1, 2] [1, 2, 3, 4, 5].copyWithin(0, 3); // [4, 5, 3, 4, 5] [1, 2, 3, 4, 5].copyWithin(0, 3, 4); // [4,
数组的扩展---数组实例的copyWithin()
GXing007的博客
03-09 317
数组实例的copyWithin()方法，在当前数组的内部，将指定位置的成员复制到其他位置(会覆盖原有成员)，然后返回当前数组。也就是说，使用这个方法，会修改当前数组。语法： Array.prototype.copyWithin(target,start=0,end=this.length)它接受三个参数，target必需：从该位置开始替换数据。如果为负值，表示倒数。              ...
网易云信IMweb版集成实现(PHP直接上码)
Gino_tkzzz的博客
09-21 5144
首先去网易云信官网下载web版的demo, 下面链接地址: https://github.com/netease-im/NIM_Web_Demo 嵌入到你自己使用的框架中(这里使用的是TP5) <?php namespace app\web\controller; use think\Controller; use app\common\yxsdk\yunxinServerApi; ...
Day04_JVM面试题（尚硅谷）
weixin_45014721的博客
08-20 637
JVM中常见的两种Error栈内存溢出堆内存溢出。
Java开发常见面试题详解（并发，JVM）
KISS
03-12 8万+
预览 并发 问题 详解 请谈谈你对volatile的理解 link CAS你知道吗？ link 原子类Atomiclntegerl的ABA问题谈谈?原子更新引用知道吗？ link 我们知道ArrayList是线程不安全，请编码写一个不安全的案例并给出解决方案 link 公平锁/非公平锁/可重入锁/递归锁/自旋锁谈谈你的理解？请手写一个自旋锁 link CountDownLatch/CyclicBarrier/Semaphore使用过吗？ link 阻塞队列知道吗？ l
ES6 中运行[].copyWithin.call({length: 5, 3: 1}, 0, 3);
yangluo1683的专栏
04-18 1085
copyWithin方法的功能arr.copyWithin(target, start[, end = this.length])将start到end之间指定的子元素复制到arr中target指定的开始位置，并返回arr,var p=[1,2,3,4,5]; p.copyWithin(0,3); //[4,5,3,4,5] console.log(p);//[4,5,3,4,5][1,2,3,4,5
1
weixin_33866037的博客
09-25 78
1 stoi 字符串转化int c++ string转化为int数组 stoi函数默认要求输入的参数字符串是符合int范围的[-2147483648, 2147483647]，否则会runtime error 在dev上使用stoi需要设置一下：工具——编译器选项——代码生成/优化——代码生成——语言标准（-std），选择ISO C...
es6笔记·····copyWithin()
齐枫的博客
11-05 641
数组实例的 copyWithin() 数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。 Array.prototype.copyWithin(target, start = 0, end = this.length) 它接受三个参数。 target（必需）
es6知识点5-数组的copyWithin方法
哈哈哈蜗牛的博客家
04-28 698
es6知识点5-数组的copyWithin方法一、定义二、用法 一、定义 Array.copyWithin(), 用于在当前的数组内部，将指定的位置成员复制到其他位置，然后返回当前数组。特别注意: 会改变原数组 二、用法 Array. copyWithin(x,y,z) x（必填） ： 表示要替换的位置，从该位置开始替换，负数的话就倒数。 y（可选） ： 表示该位置开始读取元素，拿这个位置的元素去...
es6 数组实例新增的 copyWithin()
现在学习也不晚
11-18 1万+
数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。Array.prototype.copyWithin(target, start = 0, end = this.length)它接受三个参数。target （必需）：从该位置开始替换数据。start （可选）：从该位置开始读取数据，默认为...
数组常用方法总结
Dayunyun2019的博客
02-22 460
1. Array.from(array)将一个类数组对象(具有length属性)转化成一个真正的数组 let arrayLike = { 0: 'tom', 1: '18', 2: '男', 3: ['湖北', '武汉'], 'length': 4 } let arr = Array.from(arrayLike) console.log(arr) 得到的结果是一个真正的数组["tom","...
Array数组常用方法详解
LiBlacksmith的博客
08-12 952
引用类型——Array JSON是用于前后端交换文本信息的语法，基于它的语法特点，后端接口返回的数据不是数组就是对象，因此我们必须的能熟练操作数组和对象。 JSON语法 数组（Array）用方括号(“[]”)表示。 对象（0bject）用大括号(“{}”)表示。 名称/值对(name/value）组合成数组和对象。 名称(name）置于双引号中，值（value）有字符串、数值、布尔值、null、对象和数组 并列的数据之间用逗号(“,”）分隔 { "name":"小虎", "age":18,
S7-1200 PLC中ARRAY数组详细使用指南
"TIA博途中数组Array【】的基本使用方法详解" TIA博途是Siemens公司的编程软件，用于编程S7系列的PLC。在TIA博途中，数组（Array）是一种重要的数据结构，它由固定数量且数据类型相同的元素组成。了解并熟练掌握...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值