ES6中的数组常用方法
数组在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中的数组常用方法的更多相关文章
- ES6中的数组
数组是js中很重要的数据类型,虽然在 ES5 中,关于数组的方法和属性很多.但为了更加简洁.高效的操作数组,ES6 中又在数组原型上和实例上新增了一些方法. 一.Array方法 1.1 Array.f ...
- ES6中的数组方法扩展
上一篇文章小编简单介绍了在ES6中,一些常用的方法和一些简单的应用,在这篇文章中,小编将针对ES6中数组常用方法进行扩展,相信经过这篇文章之后,每一位小伙伴下班时间会有所提前,就算从原来的996变成9 ...
- ES6中对数组的扩展
hello,大家好,我又来了. 前面讲了字符串和数值的扩展,今天要讲的是:数组的扩展.不知道大家能否跟得上这个节奏,你们在阅读中对讲解有存在疑惑,记得留言提出来,要真正地理解,否则白白 ...
- ES6中的数组reduce()方法详解
reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数(升序执行),将其结果汇总为单个返回值. 1. 语法reduce说明 arr.reduce(callback(accumu ...
- ES6中有关数组的一些新操作
1.Array.isArray() 用于确定传递的值是否是一个 Array. Array.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); ...
- es5和es6中查找数组中的元素
let array = [1,2,3,4,5] //es5 let find = array.filter(function (item){ return item %2 === 0//返回满足条件的 ...
- 利用ES6中的Array.find/ Array.findIndex来判断数组中已存在某个对象
前端开发过程中,我们会经常遇到这样的情景:比如选中某个指标obj,将其加入到数组checkedArr中({id: 1234, name: 'zzz', ...}),但是在将其选中之前要校验该指标是否已 ...
- ES6中数组新增的方法-超级好用
Array.find((item,indexArr,arr)=>{}) 掌握 找出第一个符合条件的数组成员. 它的参数是一个回调函数,对所有数组成员依次执行该回调函数. 直到找出第一个返回值为t ...
- ES6新特性-------数组、Math和扩展操作符(续)
三.Array Array对象增加了一些新的静态方法,Array原型上也增加了一些新方法. 1.Array.from 从类数组和可遍历对象中创建Array的实例 类数组对象包括:函数中的argumen ...
随机推荐
- LA3027简单带权并查集
题意: 有n个点,一开始大家都是独立的点,然后给出一些关系,a,b表示a是b的父亲节点,距离是abs(a-b)%1000,然后有一些询问,每次询问一个节点a到父亲节点的距离是多少? 思路: ...
- Android 面试必备 - 系统、App、Activity 启动过程“一锅端”
Android 系统启动过程 从系统层看: linux 系统层 Android系统服务层 Zygote 从开机启动到Home Launcher: 启动bootloader (小程序:初始化硬件) 加载 ...
- Linux基本内容
当你学会开发完成一个项目之后,你就可以将项目进行上线,而且其实并不难,你需要先对Linux操作系统了解一下,博客下面的内容是基于CentOs7服务器. 购买服务器 参考链接 Linux宝塔面板 Lin ...
- 【前端】vue2.x 配合 bootstrapTable 动态添加元素和绑定点击事件,事件无效 解决
背景: 使用bootstrap-table 表格插件时,每一行的最后一班会加操作按钮列.如果不加入vue的话,使用插件自己的列属性formatter:function(value, row, inde ...
- JavaScript 中正则匹配时结果不一致的问题
创建示例项目 考察如下场景,我们有个输入框组件,输入时同时进行校验. interface IInputProps { label: string; } function Input({ label } ...
- .NET Design Patterns
设计模式分组 GoF设计模式著作中的23种设计模式分为3组:创建型(Creational).结构型(Structural)和行为型(Behavional). 创建型 创建型处理对象构造和引用.它们将对 ...
- Build 2021 :正式发布.NET 6 Preview4
微软在不断推进.NET 6的可用性,昨晚的Build 2021大会上发布了Preview4, 这是一个很大的版本更新,带来大量的功能,以及接近最终的产品交付质量,不过,这并不意味着可以在生产环境使用了 ...
- [刷题] 257 Binary Tree Paths
要求 给定一棵二叉树,返回所有表示从根节点到叶子节点路径的字符串 示例 ["1->2->5","1->3"] 思路 递归地返回左右子树到叶子节 ...
- Spec2006使用说明
Spec2006使用说明 五 10 十月 2014 By penglee 工具介绍 SPEC CPU 2006 benchmark是SPEC新一代的行业标准化的CPU测试基准套件.重点测试系统的处理器 ...
- 使用chrony安装chrony
yum install chrony -y 使用chrony安装chrony 使用root用户登录~]# yum install chrony 默认的chrony进程位置/usr/sbin/c ...