数组在JS中虽然没有函数地位那么高,但是也有着举足轻重的地位,下面我就结合这ES5中的一些常用的方法,与ES6中的一些方法做一些说明和实际用途。大家也可以关注我的微信公众号,蜗牛全栈。

一、ES5中数组常用方法:

1、循环遍历。

1 let arr = [1,2,3]
2 for(let i=0;i<arr.length;i++){
3 console.log(i) // 1 2 3
4 }

2、forEach:没有返回值,不能使用break和continue。只是针对每个元素调用Func。

let arr = [1,2,3]
// elem 数组里面的每一项
// index 数组索引
// array 数组
arr.forEach(function(elem,index,array){
console.log(elem,index) // 1 0 2 1 3 2
})

3、map:返回新数组,每个元素为调用Func后的结果。

let arr = [1,2,3]
let result = arr.map(function(val){
val += 1
return val
})
console.log(arr,result) // [1,2,3] [2,3,4]

4、filter:返回符合Func条件的元素数组。

let arr = [1,2,3]
let result = arr.filter(function(val){
return val == 2
})
console.log(arr,result) // [1,2,3] [2]

5、some:返回布尔值,判断是否有元素符合Func条件(有一个满足条件就返回true)。

let arr = [1,2,3]
let result = arr.some(function(val){
return val == 2
})
console.log(arr,result) // [1,2,3] true

6、every:返回布尔值,判断每个元素符合Func条件(全部满足条件才返回true)。

let arr = [1,2,3]
let result = arr.every(function(val){
return val == 2
})
console.log(arr,result) // [1,2,3] false

7、reduce:接收函数作为一个累加器

7-1:累加器

let arr = [1,2,3]
// prev为前一个对象
// cur为当前对象
// index为当前序列
// arr为当前数组
let sum = arr.reduce(function(prev,cur,index,arr){
return prev + cur
},0)
console.log(sum) // 6

7-2、获取数组中最大值。

let arr = [1,2,3]
let max = arr.reduce(function(prev,cur){
Math.max(prev,cur)
})
console.log(max) // 3

7-3、数组去重

let arr = [1,2,3,3]
let res = arr.reduce(function(prev,cur){
prev.indexOf(cur) == -1 && prev.push(cur)
return prev
},[])
console.log(res) // [1,2,3]

8、for...in:遍历数组的时候会将原型下面函数遍历

Array.prototypr.foo = function(){
console.log("foo")
}
let arr = [1,2,3]
for(let index in arr){
console.log(index) // 遍历数组同样会遍历原型下面的函数foo
}

二、ES6中数组常用方法

1、find:返回第一个通过测试的元素

let arr = [1,2,3,4]
let res = arr.find(function(val){
return val > 2
})
console.log(res) // 3

2、findIndex:返回第一个通过测试的元素对应索引

let arr = [1,2,3,4]
let res = arr.find(function(val){
return val > 2
})
console.log(res) // 2

3、for...of

let arr = [1,2,3,4]
for(let item of arr){
console.log(item) // 1 2 3 4
}

3-1、values:仅遍历值

let arr = ["a","b","c","d"]
for(let item of arr.values()){
console.log(item) // "a" "b" "c" "d"
}

3-2、keys:仅遍历index

let arr = ["a","b","c","d"]
for(let item of arr.keys()){
console.log(item) // 0 1 2 3
}

3-3、entries:遍历index和值

let arr = ["a","b","c","d"]
for(let item of arr.entries){
console.log(item) // [0, "a"] [1, "b"] [2, "c"] [3, "d"]
}

ES6中的数组常用方法的更多相关文章

  1. ES6中的数组

    数组是js中很重要的数据类型,虽然在 ES5 中,关于数组的方法和属性很多.但为了更加简洁.高效的操作数组,ES6 中又在数组原型上和实例上新增了一些方法. 一.Array方法 1.1 Array.f ...

  2. ES6中的数组方法扩展

    上一篇文章小编简单介绍了在ES6中,一些常用的方法和一些简单的应用,在这篇文章中,小编将针对ES6中数组常用方法进行扩展,相信经过这篇文章之后,每一位小伙伴下班时间会有所提前,就算从原来的996变成9 ...

  3. ES6中对数组的扩展

    hello,大家好,我又来了.         前面讲了字符串和数值的扩展,今天要讲的是:数组的扩展.不知道大家能否跟得上这个节奏,你们在阅读中对讲解有存在疑惑,记得留言提出来,要真正地理解,否则白白 ...

  4. ES6中的数组reduce()方法详解

    reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行),将其结果汇总为单个返回值. 1. 语法reduce说明 arr.reduce(callback(accumu ...

  5. ES6中有关数组的一些新操作

    1.Array.isArray() 用于确定传递的值是否是一个 Array. Array.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); ...

  6. es5和es6中查找数组中的元素

    let array = [1,2,3,4,5] //es5 let find = array.filter(function (item){ return item %2 === 0//返回满足条件的 ...

  7. 利用ES6中的Array.find/ Array.findIndex来判断数组中已存在某个对象

    前端开发过程中,我们会经常遇到这样的情景:比如选中某个指标obj,将其加入到数组checkedArr中({id: 1234, name: 'zzz', ...}),但是在将其选中之前要校验该指标是否已 ...

  8. ES6中数组新增的方法-超级好用

    Array.find((item,indexArr,arr)=>{}) 掌握 找出第一个符合条件的数组成员. 它的参数是一个回调函数,对所有数组成员依次执行该回调函数. 直到找出第一个返回值为t ...

  9. ES6新特性-------数组、Math和扩展操作符(续)

    三.Array Array对象增加了一些新的静态方法,Array原型上也增加了一些新方法. 1.Array.from 从类数组和可遍历对象中创建Array的实例 类数组对象包括:函数中的argumen ...

随机推荐

  1. Redis 的持久化

    原文链接:https://www.changxuan.top/?p=1386 Redis 是一个非关系型的内存数据库,使用内存存储数据是它能够进行快速存取数据的原因之一. 在实际应用中,常有人提倡把 ...

  2. 十进制转n进制

    #include <stdio.h> #include <stdlib.h> #define OK 1 #define ERROR 0 #define TRUE 1 #defi ...

  3. IDEA 新建 Java 项目 (图文讲解, 良心教程)

    IDEA 新建 Java 项目 (图文讲解, 良心教程) 欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载 ...

  4. 微信小程序中的常见弹框

    显示加载中的提示框 wx.showLoading() 当我们正在在进行网络请求时,常常就需要这个提示框 手动调用wx.hideLoading()方法才能够关闭这个提示框,通常在数据请求完毕时就应该关闭 ...

  5. Webpack5构建速度提升令人惊叹,早升级早受益

    为什么要升级? webpack4用的好好的,运行稳定,为什么要升级到webpack5, 每次升级,都要经历一场地震,处理许多loader和plugin API的破坏性改变. 请给我们一个充分的升级理由 ...

  6. Window内核学习之保护模式基础

    段寄存器 段寄存器有6个分别是 cs,ss,ds,es,fs,gs.这些段寄存器包含16位的可见部分和80位的隐藏部分,共90位. 16位的可见部分就是我们知道的cs等段寄存器的值,我们可以在od中查 ...

  7. 【BUAA软工】团队项目选择

    项目 内容 班级:北航2020春软件工程 博客园班级博客 作业:团队项目选择与NABCD分析 团队项目选择 项目介绍 项目简介 项目名称:Visual Lab Online 项目简介:一款面向学生和个 ...

  8. 浅谈CRM系统的选型和实施

    CRM的本质是最大化利用企业的现有资源来提供客户所需的产品,保证提供给客户最好的服务,帮助销售人员提高客户转化率,储存所有重要的客户信息,帮助企业深入挖掘潜在客户等等. 对于企业来说,即使处于同一行业 ...

  9. [MySQL数据库之表的约束条件:primary key、auto_increment、not null与default、unique、foreign key:表与表之间建立关联]

    [MySQL数据库之表的约束条件:primary key.auto_increment.not null与default.unique.foreign key:表与表之间建立关联] 表的约束条件 约束 ...

  10. spring-第三章-jdbc

    一,回顾 aop:面向切面编程,就是将一些和主业务流程没有关系的公共代码,提取封装到切面类,通过切入点规则,可以对目标方法进行功能增强;也就是可以再目标方法执行的前后添加一段额外逻辑代码; 二,Jdb ...