这里给大家分享下我搜索到的几个ES6常用数组方法及模拟实现,废话不多说,上代码

Array.from

可以将一个类数组转换成数组

在出现Array.from这个方法之前,我们转换类数组的方法:

Array.prototype.slice.call(arguments)

使用Array.form

Array.from(arguments, item => {
return item;
})

Array.prototype.findIndex

查找数组中对应的索引
let arr = [1,2,3,4,5];
const index = arr.findIndex(item => item === 1); // output:0

模拟实现findIndex

  Array.prototype.findIndex = function(callback){
for(let i = 0; i<this.length; i++){
if( callback(this[i]) ){
return i;
}
}
return -1;
}

Array.prototype.find

查找数组中的某个元素

  let arr = [1,2,3,4];
arr.find(item => item > 2); // output: 3

模拟实现find

  Array.prototype.find = function(callback) {
for(let i = 0; i < this.length; i++){
let flag = callback(this[i]);
if(flag){
return this[i]
}
}
return undefined;
}

Array.prototype.map

map方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

  const arr = [1,2,3];
arr.map(item => item * 2) // output: [2,4,6]

模拟实现map

  Array.prototype.map = function(callback) {
let newArr = [];
for(let i = 0; i < this.length; i++){
let result = callback(this[i]);
newArr.push(result);
}
return newArr;
}

注意这里提个小只是,通过map的模拟实现应该可以大致明白为什么map和foreach不能跳出循环

Array.prototype.reduce

方法对累计器和数组中的每个元素(从左到右)应用一个函数,将其简化为单个值

const arr = [2,3,4];
// output: 9
const sum = arr.reduce((sum, item) => {
sum += item;
return sum;
},0);

模拟实现reduce

  Array.prototype.reduce = function(callback, initialValue){
let sum = initialValue || this[0];
if(!sum){
return;
}
for(let i = 0; i < this.length; i++){
sum = callback(sum, this[i], i , this);
}
return sum;
}

Array.prototype.some

数组中的元素,有一个满足条件,则返回true

var arr = [1, 2, 3];

arr.some(item => item > 2); // output: true

模拟实现some

Array.prototype.some = function(callback) {
for(let i = 0; i < this.length; i++) {
if(callback(this[i])){
return true;
}
}
return false;
}

Array.prototype.every

数组中的所有元素都满足条件,则返回true

var arr = [1, 2, 3];

arr.every(item => item > 2); // output: false

模拟实现every

Array.prototype.every = function(callback){
for(let i = 0; i < this.length; i++){
if(!callback(this[i])){
return false;
}
}
return true;
}

Array.prototype.filter

filter方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

  let arr = [1,2,3];
arr.filter(item => item > 2); // output: [3]

模拟实现filter

  Array.prototype.filter = function(callback) {
let newArr = [];
for(let i = 0; i < this.length; i++){
let flag = callback(this[i]);
if(flag){
newArr.push(this[i])
}
}
return newArr;
}

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

ES6常用数组方法及模拟实现的更多相关文章

  1. ES6新增的常用数组方法(forEach,map,filter,every,some)

    ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...

  2. 迟早要知道的JS系列之常用数组方法

    常用数组方法 一.不会改变原始数组的方法: 即访问方法,下面的这些方法绝对不会改变调用它们的对象的值,只会返回一个新的数组或者返回一个其它的期望值. 1. concat() ** 语法:** Java ...

  3. js与jquery常用数组方法总结

    昨天被问数组方法的时候,问到sort()方法是否会改变原来的数组.本来我猜是不会,也是这么说,马上我又觉得,知识这种东西,不确定的时候直接说不确定或不知道就好,只是凭借着不确定的猜测或者是记忆,害人害 ...

  4. js中常用数组方法concat join push pop slice splice shift

    javascript给我们很多常用的 数组方法,极大方便了我们做程序.下面我们来介绍下常用的集中数组方法. 比如 concat() join() push() pop() unshift() shif ...

  5. ES6的数组方法之Array.from

    首先说说什么是数组:数组在类型划分上归为Object,属于比较特殊的对象,数组的索引值类似于对象的key值. 数组的几个注意点: 1.数组的长度是可读属性,不可更改,数组的长度根据索引最大值. 2.数 ...

  6. JavaScript常用数组方法

    JavaScript数组方法有以下这些: forEach() 方法对数组的每一个元素执行一次提供的函数. map() 方法创建一个新数组,其结果是该数组都执行一次函数,原函数保持不变. filter( ...

  7. 使用ES6新数组方法(象C# Lambda表达式一样写查询语句)

    let people = [ {id: 1, name: "a", age: 12}, {id: 2, name: "b", age: 13}, {id: 3, ...

  8. es6 Array数组方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. es6常用数组操作及技巧汇总

    定义数组 const array = [1, 2, 3]; // 或者 const array = new Array(); array[0] = '1'; 检测数组 Array.isArray([] ...

  10. javascript中常用数组方法详细讲解

    javascript中数组常用方法总结 1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔 ...

随机推荐

  1. NC24734 [USACO 2010 Mar G]Great Cow Gathering

    题目链接 题目 题目描述 Bessie is planning the annual Great Cow Gathering for cows all across the country and, ...

  2. STM32的串口通信UART/TTL

    常用的串口pin STM32的串口是基础通信方式, 每个型号都带多组串口, 一般都使用默认的组, 可以参考芯片的datasheet, 去看pinout and pin definitions, stm ...

  3. VuePress + Github Pages 搭建文档博客

    说明 最近想把常用的一些干货知识点都集中起来,方便发布和查找.相当于创建一个自己的知识库,我就叫它Java技术文档.虽然博客写文档也挺方便,但是在于文档的集中阅读和管理方面还是不够简洁和快速.此处就以 ...

  4. Java并发编程实例--6.线程的join方法

    有时我们需要等到某个线程执行完毕.例如,我可能有一个线程来初始化资源完毕然后其他线程才能开始执行. 谓词,我们可以使用Thread类的join()方法. 本例中,我们将学习使用这个方法. DataSo ...

  5. 使用webgl(three.js)创建自动化抽象化3D机房,3D机房模块详细介绍(抽象版一)

    目前市面上有两种机房 一种是普通机房 一种是由微模块组成的机房,本文主要介绍普通机房的抽象化体现模式. 抽象机房模式:机房展示过程中,我们需要对机房进行建模,当遇到大量机房需要建模时,这无疑是巨大工作 ...

  6. AirtestProject浅尝辄止

    AirtestProject是什么 AirtestProject是由网易游戏推出的UI自动化测试解决方案,主要包含3部分内容: 1.Airtest框架:跨平台的,基于图像识别的UI自动化测试框架,支持 ...

  7. nuxt调用weixin-js-sdk

    在nuxt中调用weixin-js-sdk与在vue中有所不同. 通常在vue中用 import wx from 'weixin-js-sdk' 调用weixin-js-sdk,但在nuxt中会出现w ...

  8. 项目实战:Qt终端命令模拟工具 v1.0.0(实时获取命令行输出,执行指令,模拟ctrl+c中止操作)

    需求   在Qt软件中实现部分终端控制命令行功能,使软件内可以又好的模拟终端控制,提升软件整体契合度.   Demo演示          运行包下载地址:   CSDNf粉丝0积分下载:https: ...

  9. socket及黏包现象及解决黏包---day28

    1.四次挥手(补充) 客户端向服务端发送一个请求消息,断开连接(代表客户端没有数据传输了) 服务端接收请求,发出响应 等到服务端所有数据收发完毕之后 服务端向客户端发送断开连接的请求 客户端接收请求后 ...

  10. docker中container相关命令

    1.以tomcat镜像为例运行tomcat容器(运行tomcat实例) docker run tomcat 2.宿主机端口与容器端口进行映射 -p docker run -p 8080(系统上外部端口 ...