这里给大家分享下我搜索到的几个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. 探索C语言中的联合体与枚举:数据多面手的完美组合!

    ​ 欢迎大家来到贝蒂大讲堂 养成好习惯,先赞后看哦~ 所属专栏:C语言学习 贝蒂的主页:Betty's blog 1. 联合体的定义 联合体又叫共用体,它是一种特殊的数据类型,允许您在相同的内存位置存 ...

  2. 从零开始学正则(七:终章),详解常用正则API与你可能不知道的正则坑

     壹 ❀ 引 花了差不多半个月的晚上时间,正则入门学习也步入尾声了,当然正则的学习还将继续.不得不说学习成效非常明显,已能看懂大部分正则以及写出不太复杂的正则,比如帮组长写正则验证文件路径正确性,再如 ...

  3. NC16576 [NOIP2012]摆花

    题目链接 题目 题目描述 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共m 盆.通过调查顾客的喜好,小明列出了顾客最喜欢的n 种花,从1 到n 标号.为了在门口展出更多种花,规定第i ...

  4. Python中`yield`关键字详解

    Python中`yield`关键字有什么用? Python中yield关键字有什么用? 它能做什么? 例如,我试图理解这段代码1: def _get_child_candidates(self, di ...

  5. OCR 03: PaddleOCR

    Catalog OCR 01: EasyOCR OCR 02: Tesseract-OCR OCR 03: PaddleOCR About Git repository https://github. ...

  6. P1481魔族密码 题解(字典树)

    魔族密码 题目背景 风之子刚走进他的考场,就-- 花花:当当当当~~偶是魅力女皇--花花!!^^(华丽出场,礼炮,鲜花) 风之子:我呕--(杀死人的眼神)快说题目!否则---_-### 题目描述 花花 ...

  7. RK3568开发笔记(八):开发板烧写buildroot固件(支持hdmi屏),搭建Qt交叉编译开发环境,编译一个Demo,目标板运行Demo测试

    前言   前面发现开发板用ubuntu固件发现空间不够,本篇使用buildroot固件,来实现目标板运行qt界面应用.   烧写buildroot固件   这部分更详细的参照<RK3568开发笔 ...

  8. ContentType组件表使用

    https://www.shuzhiduo.com/A/qVdepN2r5P/

  9. 【LeetCode链表#7】设计一个链表并实现常见的操作方法

    设计链表 题目 力扣题目链接 设计链表的实现.您可以选择使用单链表或双链表.单链表中的节点应该具有两个属性:val 和 next.val 是当前节点的值,next 是指向下一个节点的指针/引用.如果要 ...

  10. 04、RS232 协议介绍

    从之前的学习,我们知道了 SECS-I 使用的 RS232 来进行数据的传输,那我们也初略的了解下 RS232. 这一篇不用看也可以. 这是最低的协议层.它定义了设备上的物理接口.它是基于RS-232 ...