ES6新增数组方法

最新推荐文章于 2023-04-13 08:50:07 发布

dog-宾

最新推荐文章于 2023-04-13 08:50:07 发布

阅读量315

点赞数

分类专栏： JavaScript 文章标签： javascript es6

本文链接：https://blog.csdn.net/L_u_c_k_y_m_a_n/article/details/117166687

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

ES6中新增了很多数组方法,使用起来非常方便,通过这篇文章你将彻底了解这些数组方法,下面跟我一起来学习吧!

indexOf() 检测数组或字符串中是否包含某个值,如果包含,返回第一次查到的那个值所对应下标,如果查到返回 1 0,查不到返回 -1

		var arr = [1,2,3,4,5,6,7]
        var str = '少年强则国强'
        console.log(arr.indexOf(3)) // 2
        console.log(str.indexOf('强')) // 2  注意:返回的第一个值的下标

filter() 过滤,会把所有符合条件的值放到一个数组中返回出来

		var a = [10,20,30,40]
        // 这里做的是将大于20的数输出出来,你可以做任何你想过滤的值
        console.log(a.filter(o => o>20)) // (2) [30, 40]

Set([ ]) 对数组之间进行去重,交集,差集. 它是一个伪数组,使用时 new Set([ ])

		// 去重
        var a = new Set([1,2,3,4])
        var b = new Set([1,2,3,4,5])
        console.log(new Set([...a,...b])) // Set(5) {1, 2, 3, 4, 5}

        // 交集
        console.log(new Set([...a].filter(o => b.has(o)))) //   Set(4) {1, 2, 3, 4}

        // 差集(只有其中一含有的,取决于第一个数组)
        console.log(new Set([...a].filter(o => !b.has(o))))  //   (空)

Array.from() 将伪数组转换成数组,抓换后我们就可以方便的添加删除使用等等了

		var a = new Set([0,1,2,3,4,5])
        console.log(a) // Set(6) {0, 1, 2, 3, 4, …}
        console.log(a.unshift(6)) // a.unshift is not a function
        var b = Array.from(a) // [0, 1, 2, 3, 4, 5]
        b.unshift(6) // 7
        console.log(b) //  [6, 0, 1, 2, 3, 4, 5]

find() 根据查找指定值,符合条件的会返回出来这个值,返回第一个值后就会停止查找,抄不到就返回 undefined

		var a = [1,2,3,4,5,6]
		console.log(a.find(o => o>2)) // 3
		console.log(a.find(o => o>6)) // undefined

fill() 使用指定的元素填充数组,其就是用默认内容初始化数组

		// fill(value,start,end)
        // value 填充值
        // start 填充的起始位置(可以省略)
        // end   填充的结束位置(可以省略),实际结果位置为 end-1(不包含最后一位)
        var a = [1,2,3,4,5]
        console.log(a.fill(666,0,2)) // [666, 666, 3, 4, 5]

map() 映射,把数组里面的每一个元素按照你传入回调函数里面的代码都执行一遍

		var a = [1,2,3,4,5]
		// 这里做的是将数组里面的所有值都乘以2
        console.log(a.map(o => o*2)) // (5) [2, 4, 6, 8, 10]

some() 有一个满足条件的就会返回 true,都不满足会返回 false.如果第一个值就满足,有短路效果,就会停止循环,不会再继续搜索

		var a = [1,2,3,4,5]
        console.log(a.some(o => o> 4)) // true
        console.log(a.some(o => o> 5)) // false

every() // 必须每一个元素都符合条件才返回 true,如果都不符合则返回false,有短路效果,就会停止循环,不会再继续搜索

		var a = [1,2,3,4,5]
        console.log(a.every(o => o> 4)) // false
        console.log(a.some(o => o> 0)) // true

forEach() 遍历数组. 循环体内没有返回值,forEach循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引, 第三个参数是当前元素所属的数组.

<body>
		var a = [1,2,3,4,5]
        a.forEach((item,index,arr)=>{
            console.log(item) // 1 2 3 4 5  数组里面的每一个值
            console.log(index) // 0 1 2 3 4  .. 数组里面每个值的下标
            console.log(arr)  //(5) [1, 2, 3, 4, 5] 数组本身 
        })

reduce() 累加器 reduce 接收的是回调函数, 回调函数调用数组里的每一个元素, 直到循环结束.好处是不需要定义一个变量来计算每个值加起来的总值

		var a = [1,2,3,4,5]
        var b = a.reduce((a,b) => a+b)
        console.log(b) // 15      1+2+3+4+5=15

好了,本期的ES6新增数组方法就说到这里了,希望能够给你们带来收获,我们下期见!

dog-宾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6新增数组方法

ES6中新增了很多数组方法,使用起来非常方便,通过这篇文章你将彻底了解这些数组方法,下面跟我一起来学习吧!indexOf() 检测数组或字符串中是否包含某个值,如果包含,返回第一次查到的那个值所对应下标,如果查到返回 1 0,查不到返回 -1 var arr = [1,2,3,4,5,6,7] var str = '少年强则国强' console.log(arr.indexOf(3)) // 2 console.log(str.indexOf('强')
复制链接

扫一扫