数组在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. hdu3117 斐波那契前后4位

    题意:       求斐波那契的前后4位,n <= 10^8. 思路:       至于前四位,和hdu1568的求法一样:       http://blog.csdn.net/u013761 ...

  2. DVWA之File Upload (文件上传漏洞)

    目录 Low: Medium: 方法一:抓包修改文件的type 方法二:00截断 High: Impossible : Low: 源代码: <?php if( isset( $_POST[ 'U ...

  3. CVE-2010-3974:Windows 传真封面编辑器 FxsCover.exe 双重释放漏洞调试分析

    0x01 堆空间申请后的双重释放 Windows FxsCover 程序存储封面编辑器的信息,封面编辑器是传真服务的一个组件,通过解析特定的传真封面文件(.cov)时,会调用类析构函数对同一内存中的栈 ...

  4. Windows 驱动加载程序代码

    #include <windows.h> #include <winsvc.h> #include <conio.h> #include <stdio.h&g ...

  5. 每天一道面试题LeetCode 80--删除排序数组中的重复项 II(python实现)

    LeetCode 80--删除排序数组中的重复项 II 给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素最多出现两次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输 ...

  6. 浅谈src与href的区别

    src 和 href 都是用来引入外部资源的属性,例如:图片.视频.CSS 文件.JavaScript 文件等. 那么它们两者之间究竟有什么样的区别呢? <link href="sty ...

  7. thymeleaf中[[${}]]与[(${})]的区别

    [[-]]会被转义,[(-)]不会. 假设在后台传入msg的值为 <b>AAA</b> 在前台这样使用 [[${msg}]]___[(${msg})] 展示效果 官方参考文档

  8. vscode 终端操作命令npm报错

    错误: 如果没有安装的node.js ,则需要安装. node.js官网下载地址: https://nodejs.org/zh-cn/ 安装node.js 后会看到C:\Users\XXX\AppDa ...

  9. 前端基础问题:CSS vertical-align 属性

    CSS vertical-align 属性与基线的那些事~ 定义和用法: vertical-align 属性设置元素的垂直对齐方式. vertical-align只对内联元素(inline.inlin ...

  10. HelloGitHub 小程序上线了,蛋只有一个搜索功能

    作者:HelloGitHub-卤蛋 我是...蛋蛋啊,本文是我从零开发「HelloGitHub 小程序」的开发日记,不要把这个系列当作技术文章来读,你将会收获更多的乐趣.‍♂️ 我只是个 Python ...