es6遍历数组都有什么方法
es6遍历数组的方法:1、使用forEach(),可为数组中的每个元素调用一个函数;2、使用map(),对数组的每个元素调用指定的回调函数;3、使用filter(),会调用一个回调函数来过滤数组中的元素,返回符合条件的所有元素;4、使用some(),遍历数组,以检测数组中是否存在指定条件的元素;5、使用every(),可判断数组元素是否都符合条件;6、使用reduce()。
本教程操作环境:windows7系统、ECMAScript 6版、Dell G3电脑。
ES6常见的数组遍历(迭代)方法
- forEach
- map
- filter
- some
- every
- reduce
声明一个需要遍历的对象
下面的代码都是要引用这个对象的
let data = { code: 1, list: [{ id: 23, title: "女装1", price: 300 }, { id: 24, title: "女装2", price: 200 }, { id: 27, title: "男装1", price: 100 }, { id: 29, title: "男装2", price: 400 }, { id: 230, title: "女装3", price: 600 }, { id: 40, title: "童装1", price: 700 } ] }
forEach
forEach的话不能使用break 与continue语句
// 有二个参数 第一个参数是数值 第二个参数是索引值 data.list.forEach(function(item,index){ console.log(item,index) //输出结果是{ // {id: 23, title: "女装1", price: 300} 0 // {id: 24, title: "女装2", price: 200} 1 // {id: 27, title: "男装1", price: 100} 2 // {id: 29, title: "男装2", price: 400} 3 // {id: 230, title: "女装3", price: 600} 4 // {id: 40, title: "童装1", price: 700} 5 // } })
map
//map 映射 //遍历数据并返回一个新的数组 对数据的处理会返回原先对应的位置 let arr = [2, 3, 6]; let newArr = arr.map(function (val, index) { // 第一个参数是值 第二个参数是索引值 console.log(arr) })
**遍历数据并返回一个新的数组 对数据的处理会返回原先对应的位置
要添加代码块 map 不可以解析同一个块级作用域
{}{}代表不同的块级作用域 分别在不同里面写**
// 浅拷贝 // 浅拷贝是指a把值 给了b 当b的值改变 a b 的值同时改变。 { let arr = [2, 3, 6]; let newArr = arr.map(function (index, val) { // 第一个参数是索引值 第二个参数是值 }) console.log(arr)// 0: 2 // 1: 3 // 2: 6 } { // 浅拷贝 // 浅拷贝是指a把值 给了b 当b的值改变 a b 的值同时改变。 let newArr = data.list.map((item, index) => { item.price = item.price * .6 return item; }); console.log(newArr)//打印的结果价格都是改变的,一样的{ // 0: {id: 23, title: "女装1", price: 180} // 1: {id: 24, title: "女装2", price: 120} // 2: {id: 27, title: "男装1", price: 60} // 3: {id: 29, title: "男装2", price: 240} // 4: {id: 230, title: "女装3", price: 360} // 5: {id: 40, title: "童装1", price: 420} // } console.log(data.list)//同上 }
输出结果 深拷贝无论a b 值哪个改变 最终结果都不会随着a b的改变而改变
// 深拷贝 2(简单粗暴)
filter 过滤
filter会调用一个回调函数来过滤数组中的元素,返回符合条件的所有元素
过滤到价格小于300的 打印出来
some
作用是检测数组中是否存在指定条件的元素;若存在指定的元素则返回的结果是true,若不存在指定的元素则返回的结果是false
every
every方法用于判断数组中是否任意一个元素都符合判断条件,判断同样是在回调函数的函数体内完成,并由回调函数返回一个布尔值。如果回调函数在某次返回了false,则整个every方法返回false,且结束遍历。
这个是输出的信息
reduce 用来实现累加的效果
输出的总和是 sum+val(数值)
// reduce 用来实现累加的效果 (常用于写购物车价格的累加) // 声明一个数组 数组里面放数字 让其里面的数字显示为累加的总和 // let arr=[200,200,100] // let result =arr.reduce((sum,val,index)=>{ // 200+200 index // 400+100 index // sum是总加后的和 val是变量里面的值 index为索引值 // console.log(sum,val,index) // return sum +val; // }) // console.log(result)
【相关推荐:javascript视频教程、web前端】
以上是es6遍历数组都有什么方法的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

在ES6中,可以利用数组对象的reverse()方法来实现数组反转,该方法用于颠倒数组中元素的顺序,将最后一个元素放在第一位,而第一个元素放在最后,语法“array.reverse()”。reverse()方法会修改原始数组,如果不想修改需要配合扩展运算符“...”使用,语法“[...array].reverse()”。

async是es7的。async和await是ES7中新增内容,是对于异步操作的解决方案;async/await可以说是co模块和生成器函数的语法糖,用更加清晰的语义解决js异步代码。async顾名思义是“异步”的意思,async用于声明一个函数是异步的;async和await有一个严格规定,两者都离不开对方,且await只能写在async函数中。

步骤:1、将两个数组分别转为set类型,语法“newA=new Set(a);newB=new Set(b);”;2、利用has()和filter()求差集,语法“new Set([...newA].filter(x =>!newB.has(x)))”,差集元素会被包含在一个set集合中返回;3、利用Array.from将集合转为数组类型,语法“Array.from(集合)”。

为了浏览器兼容。ES6作为JS的新规范,加入了很多新的语法和API,但现代浏览器对ES6新特性支持度不高,所以需将ES6代码转为ES5代码。在微信web开发者工具中,会默认使用babel将开发者ES6语法代码转换为三端都能很好支持的ES5的代码,帮助开发者解决环境不同所带来的开发问题;只需要在项目中配置勾选好“ES6转ES5”选项即可。

在es6中,暂时性死区是一个语法错误,是指let和const命令使区块形成封闭的作用域。在代码块内,使用let/const命令声明变量之前,该变量都是不可用的,在变量声明之前属于该变量的“死区”;这在语法上,称为“暂时性死区”。ES6规定暂时性死区和let、const语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。

不是,require是CommonJS规范的模块化语法;而es6规范的模块化语法是import。require是运行时加载,import是编译时加载;require可以写在代码的任意位置,import只能写在文件的最顶端且不可在条件语句或函数作用域中使用;require运行时才引入模块的属性所以性能相对较低,import编译时引入模块的属性所所以性能稍高。

map是有序的。ES6中的map类型是一种储存着许多键值对的有序列表,其中的键名和对应的值支持所有数据类型;键名的等价性判断是通过调用“Objext.is()”方法来实现的,所以数字5与字符串“5”会被判定为两种类型,可以分别作为两种独立的键出现在程序中。
