数组在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. UVA11100旅行(大包装小包,问最少多少个包)

    题意:        有n个包裹,每个包裹的大小都给出了,然后小的包裹可以装到大的包裹里,问最少装成多少个包裹,装成最小的包裹后还有一个限制就是让包裹数最多的那个包裹最少,就是说尽量都平均分,比如有6 ...

  2. Portswigger web security academy:XML external entity (XXE) injection

    Portswigger web security academy:XML external entity (XXE) injection 目录 Portswigger web security aca ...

  3. SpringBoot项目启动后自动打开浏览器

    编写一个类,注册为Spring的Bean,然后实现CommandLineRunner接口,重写run()方法即可 @Component public class OpenBrowser impleme ...

  4. 【原创】简单解释一下,什么叫TLAB

    [Deerhang] TLAB是全程Thread Local Allocation Buffer,中文大致的含义是:线程私有内存分配区.它存在的意义是提高线程在JVM堆上创建对象的效率.那么它是如何做 ...

  5. restful 与 webapi 详解

    restful 什么是API API全称Aplication Programming Itererface即应用程序编程接口, 我们在开发应用程序时经常用到.API作为接口,用来"连接&qu ...

  6. 基于Mysql的编程语言(实验六、七)

    本文参考1:MYSQL对sql的拓展 本文参考2:MySQL编程基础 本文参考3:MySql数据库编程 (侵删) 一.变量的定义 1.用户变量 set @变量名=表达式: 说明:无提前进行定义,直接用 ...

  7. golang:Channel协程间通信

    channel是Go语言中的一个核心数据类型,channel是一个数据类型,主要用来解决协程的同步问题以及协程之间数据共享(数据传递)的问题.在并发核心单元通过它就可以发送或者接收数据进行通讯,这在一 ...

  8. [bug] org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)

    问题 原因不明,按参考文章中的做法,加了空格,clean后解决 参考 http://www.qishunwang.net/news_show_7922.aspx https://www.cnblogs ...

  9. Linux巡检常用命令

    # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostn ...

  10. C++知识点案例 笔记-3

    1.基类指针等与派生类的兼容 2.构造函数 3.析构函数 4.虚基类 5.虚函数 6.虚析构函数 ==基类指针等与派生类的兼容== #include <iostream> #include ...