ES6常用数组方法及模拟实现
这里给大家分享下我搜索到的几个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常用数组方法及模拟实现的更多相关文章
- ES6新增的常用数组方法(forEach,map,filter,every,some)
ES6新增的常用数组方法 let arr = [1, 2, 3, 2, 1]; 一 forEach => 遍历数组 arr.forEach((v, i) => { console.log( ...
- 迟早要知道的JS系列之常用数组方法
常用数组方法 一.不会改变原始数组的方法: 即访问方法,下面的这些方法绝对不会改变调用它们的对象的值,只会返回一个新的数组或者返回一个其它的期望值. 1. concat() ** 语法:** Java ...
- js与jquery常用数组方法总结
昨天被问数组方法的时候,问到sort()方法是否会改变原来的数组.本来我猜是不会,也是这么说,马上我又觉得,知识这种东西,不确定的时候直接说不确定或不知道就好,只是凭借着不确定的猜测或者是记忆,害人害 ...
- js中常用数组方法concat join push pop slice splice shift
javascript给我们很多常用的 数组方法,极大方便了我们做程序.下面我们来介绍下常用的集中数组方法. 比如 concat() join() push() pop() unshift() shif ...
- ES6的数组方法之Array.from
首先说说什么是数组:数组在类型划分上归为Object,属于比较特殊的对象,数组的索引值类似于对象的key值. 数组的几个注意点: 1.数组的长度是可读属性,不可更改,数组的长度根据索引最大值. 2.数 ...
- JavaScript常用数组方法
JavaScript数组方法有以下这些: forEach() 方法对数组的每一个元素执行一次提供的函数. map() 方法创建一个新数组,其结果是该数组都执行一次函数,原函数保持不变. filter( ...
- 使用ES6新数组方法(象C# Lambda表达式一样写查询语句)
let people = [ {id: 1, name: "a", age: 12}, {id: 2, name: "b", age: 13}, {id: 3, ...
- es6 Array数组方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- es6常用数组操作及技巧汇总
定义数组 const array = [1, 2, 3]; // 或者 const array = new Array(); array[0] = '1'; 检测数组 Array.isArray([] ...
- javascript中常用数组方法详细讲解
javascript中数组常用方法总结 1.join()方法: Array.join()方法将数组中所以元素都转化为字符串链接在一起,返回最后生成的字符串.也可以指定可选的字符串在生成的字符串中来分隔 ...
随机推荐
- python使用pandas库读写excel文件
操作系统 : Windows 10_x64 Python 版本 : 3.9.2_x64 平时工作中会遇到Excel数据处理的问题,这里简单介绍下怎么使用python的pandas库读写Excel文件. ...
- 深入 Nginx 之架构篇[转]
前言 最近在读 Nginx 相关的书籍,做一下读书笔记. Nginx 作为业界知名的高性能服务器,被广泛的应用.它的高性能正是由于其优秀的架构设计,其架构主要包括这几点:模块化设计.事件驱动架构.请求 ...
- 【Android】使用 MediaMetadataRetriever 获取视频信息
1 环境配置与初始化 (1)申请权限 在 AndroidManifest.xml 中的 manifest 标签(application 同级标签)下添加外部存储读写权限,如下: <use ...
- 自古以来,JSON序列化就是兵家必争之地
上文讲到使用ioutil.ReadAll读取大的Response Body,出现读取Body超时的问题. 前人引路 Stackoverflow的morganbaz的看法是: 使用iotil.ReadA ...
- win32-CreateDIBSection的使用
使用CreateDIBSection 可以创建一个设备无关位图 #include <windows.h> using namespace std; int main() { HDC hdc ...
- 谈谈Tomcat占用cpu高的问题
目录 问题现场 线程死锁 vs 线程死循环 排查Java进程导致CPU持续高的方法 Tomcat的CPU占用高的原因总结 问题现场 测试环境tomcat进程占用CPU一直持续99%,但是通过jstac ...
- EasyExcel使用及自定义设置单元格样式
EasyExcel使用及自定义设置单元格样式 https://www.cnblogs.com/Hizy/p/11825886.html easyexcel 自动设置列宽 https://www.man ...
- python中partial用法
应用 典型的,函数在执行时,要带上所有必要的参数进行调用.然后,有时参数可以在函数被调用之前提前获知.这种情况下,一个函数有一个或多个参数预先就能用上,以便函数能用更少的参数进行调用. 示例pyqt5 ...
- golang中关于map的value类型定义为函数类型时(方法值)的一点点思考
文章的内容仅仅是自己关于map的value类型定义为函数类型时的一点点思考,如有不对的地方,请不吝赐教. 学习过后才知道叫做 方法值. 1.起因 最近在看老项目代码时,看到了一段类似于下面的定义,最开 ...
- 用Docker发布Study.BlazorOne.Blazor到公网测试服务器
# 1.准备公网上的测试数据库. 之前我们在Visual Studio里面调试的时候,使用的都是localhost的数据库.现在需要在公网上准备一个SQL Server.然后执行下面的步骤 1)把St ...