数组在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. hdu4901 枚举状态(找集合对S(xor) ==T(and))

    题意:      给你一个串数字,然后让你在这里面挑取两个集合S ,T,集合的要求是 (1)不能为空 (2)S集合的所有元素必须在T集合的左边 (3)S集合的XOR == T集合的AND      问 ...

  2. SEO优化技术的简介

    严格来讲,seo技术没有所谓的严格的黑帽与白帽之分.即使是正常的301重定向,在某些情况下也能作用于黑帽seo技术.我们能判定一个人是真正的好人还是坏人么?答案是否定的.之所以解密所谓的黑帽seo,是 ...

  3. office 2007

    Microsoft office2007免费版几乎包括了Word2007.Excel2007.PowerPoint.Outlook.Publisher.OneNote.Groove.Access.In ...

  4. Day004 Scanner进阶

    Scanner进阶 例1 Scanner scanner = new Scanner(System.in); //从键盘接收数据 int i = 0; float f = 0.0f; System.o ...

  5. idea插件手动安装

    更多精彩: 例如安装Grep Console 插件  把刚才解压的文件放到  plugins   重启idea   自定义设计

  6. 15 个让新手爱不释手的 Python 高级库

    为什么我喜欢 Python ? 对于初学者来说,这是一种简单易学的编程语言:另一个原因:大量开箱即用的第三方库,正是 23 万个由用户提供的软件包使得 Python 真正强大和流行 在本文中,我挑选了 ...

  7. Jmeter和Postman做接口测试的区别,孰优孰劣?

    区别1:用例组织方式 不同的目录结构与组织方式代表不同工具的测试思想,学习一个测试工具应该首先了解其组织方式. Jmeter的组织方式相对比较扁平,它首先没有WorkSpace(工作空间)的概念,直接 ...

  8. Jenkins 基础篇 - 插件安装

    这一小节主要介绍 Jenkins 插件的安装,登录到 Jenkins 后,依次进入到[系统管理]→ [插件管理]→ [可选插件],在这里可以看到所有的 Jenkins 插件,如下图: 我们在最开始安装 ...

  9. Arduino杀手在此!!ESP 8266 NodeMCU小白手把手入门(二)(解惑篇)

    上一次更新主要是简单介绍了NodeMCU的基本知识并且进行了一次简单的实操演示,最近有一些读者向我提出了一些小问题,所以决定出一期解惑篇,主要针对的是基础知识不是太牢固,或是喜欢刨根问底的小可爱们.里 ...

  10. [Linux] Shell请求网页

    文件描述符 0:标准输入 1:标准输出 2:报错输出 举例 1 exec 8<> /dev/tcp/www.baidu.com/80 2 echo -e "GET / HTTP/ ...