详解JavaScript es6的新增数组方法

目录
  • 1. forEach()
  • 2. arr.filter()
  • 3. arr.every()
  • 4. arr.map()
  • 5. arr.some()
  • 总结

1. forEach()

遍历数组,无return 即使有return，也不会返回任何值，并且会影响原来的数组

callback的参数

value --当前索引的值

index --索引

arr --原数组

		let arr = ["a", "b", "c", 1, 2, 3];

        arr.forEach((value, index, arr) => {
            console.log(value, index, arr);
        })

输出：

2. arr.filter()

过滤数组，返回一个满足要求的数组

callback的参数：

value --当前索引的值

index --索引

let arr = [1,2,3,4,5]
let arr1 = arr.filter( (value, index) => value%2 === 0)
console.log(arr1)    // [2, 4]

3. arr.every()

依据判断条件，数组的元素是否全满足，若满足则返回ture

callback的参数：

value --当前索引的值

index --索引

let arr = [1,2,3,4,5]
let arr1 = arr.every( (value, index) =>value<2)
console.log(arr1) // false
let arr2 = arr.every( (value, index) =>value<6)
console.log(arr2)  // true

4. arr.map()

映射数组(遍历数组),有return 返回一个新数组 。

callback的参数：

value --当前索引的值

index --索引

array --原数组

let arr = [1,2,3,4,5]
arr.map( (value,index,array)=>{
        value = value * 2
        console.log(`value:${value}    index:${index}     array:${array}`)
})
console.log(arr)

结果：

var arr1 = [1,2,3,4];
var res1 = arr1.map((item,index,arr)=>{
 item = item * 3;
 return item;
})
console.log(arr1); // [1,2,3,4]
console.log(res1); // [3,6,9,12]

5. arr.some()

依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture

callback的参数：

value --当前索引的值

index --索引

let arr = [1,2,3,4,5]
let arr1 = arr.some( (value, index) => value < 3)
console.log(arr1) // true
let arr2 = arr.some( (value, index) => value > 6)
console.log(arr2) // false

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • JS模拟实现ECMAScript5新增的数组方法

    ECMAScript5 新增了十个数组方法,这些方法只有在ie9及以上浏览器中可以被使用,下面是对于这些方法的模拟实现. 一.Array.isArray(element) 该方法用于判断传入的对象是否为数组类型,返回true和false. Array.newIsArray = function(element){ return Object.prototype.toString.call(element).slice(8,-1).toLocaleLowerCase() === 'array';

  • JavaScript数组去重的几种方法详谈

    目录 一.Set去重 二.双重for循环去重 三.利用indexOf去重 四.利用icludes去重 五.filter 六.Map 总结 一.Set去重 function funSet(arr){ return Array.from(new Set(arr)); } 二.双重for循环去重 function funFor(arr){ for(let i=0,len=arr.length;i<len;i++){ for(let j=i+1,len=arr.length;j<len;j++){ i

  • JS数组方法some、every和find的使用详情

    JS数组方法some、every和find的使用详情

    目录 1.some 2.every 3.find 1.some 在MDN中这样定义:some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试.它返回的是一个Boolean类型的值. 简而言之就是:它对数组中的每一项进行校验,只要有一项通过了就是true. 它只会返回true或false 它会对数组中的每一项进行检测,千万不要在some里面进行if else操作 不要在return后面写true或false,return后面跟的是你的条件 最近做后台管理系统遇到一个需求:弹出一个Dia

  • JS数组中常用方法技巧学会进阶成为大佬

    目录 splice()方法 join()方法 reverse()方法 every()方法 reduce()方法 filter()方法 findIndex()方法 和find()方法 findIndex() find() forEach()方法 some()方法 indexOf()方法 sort ()方法 push()方法 pop()方法 unshift()方法 shift()方法 splice()方法 截取替换数组 第一个参数是起始位置,第二个是截取的个数,第三是替换的元素 ,返回值是截取的元素

  • JavaScript学习笔记之ES6数组方法

    ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中. ES6给数组添加了一些新特性,而这些新特性到目前为止完全可以运用到自己的业务层.在这一节中将总结有关于ES6给数组提供一些新特性的使用方法. ES6提供

  • JavaScript常用数组操作方法,包含ES6方法

    一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2,3]; var arr2 = [4,5]; var arr3 = arr1.concat(arr2); console.log(arr1); //[1, 2, 3] console.log(arr3); //[1, 2, 3, 4, 5] 二.join() join() 方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分

  • 详解JavaScript es6的新增数组方法

    详解JavaScript es6的新增数组方法

    目录 1. forEach() 2. arr.filter() 3. arr.every() 4. arr.map() 5. arr.some() 总结 1. forEach() 遍历数组,无return 即使有return,也不会返回任何值,并且会影响原来的数组 callback的参数 value --当前索引的值 index --索引 arr --原数组 let arr = ["a", "b", "c", 1, 2, 3]; arr.forE

  • 详解JavaScript编程中的数组结构

    数组对象的作用是:使用单独的变量名来存储一系列的值. 创建数组, 为其赋值: 实例 var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; 什么是数组? 数组对象是使用单独的变量名来存储一系列的值. 如果你有一组数据(例如:车名字),存在单独变量如下所示: var car1="Saab"; var car2=&q

  • 详解JavaScript修改注册表的方法

    详解JavaScript修改注册表的方法

    本实例主要通过WshShell 对象的相关方法实现.WshShell对象是WSH(WSH是Windows ing Host的缩写,内嵌于Windows操作系统中的脚本语言工作环境)的内建对象,主要负责程序的本地运行.处理注册表.创建快捷方式.获取系统文件夹信息及处理环境变量等工作. WshShell 对象的相关方法如表11.1所示. 本实例中主要应用了 RegWrite方法,下面将对该方法进行详细介绍. RegWrite方法用于在注册表中设置指定的键或值,其语法格式如下: WshShell.Re

  • 详解JavaScript ES6中的模板字符串

    在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是普通的字符串: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 之所以被称为模板字符串,是因为模板字符串为 JS 引入了简单的字符串插值特性,也就是说,可以方便优雅地将 JS 的值

  • 详解JavaScript ES6中的Generator

    今天讨论的新特性让我非常兴奋,因为这个特性是 ES6 中最神奇的特性. 这里的"神奇"意味着什么呢?对于初学者来说,该特性与以往的 JS 完全不同,甚至有些晦涩难懂.从某种意义上说,它完全改变了这门语言的通常行为,这不是"神奇"是什么呢. 不仅如此,该特性还可以简化程序代码,将复杂的"回调堆栈"改成直线执行的形式. 我是不是铺垫的太多了?下面开始深入介绍,你自己去判断吧. 简介 什么是 Generator? 看下面代码: function* qu

  • 实例详解JavaScript获取链接参数的方法

    使用url传递参数,大家应该不陌生,例如: http://www.softwhy.com/home.php?mod=space&do=home&view=all 既然传递参数,那么自然就要获得传递的参数,当然获取参数的方式有多种多样,下面就介绍其中的一种,和大家一起分享,希望能够给大家带来一定的帮助,代码如下: var url="http://www.softwhy.com/home.php?mod=space&do=home&view=all"; if

  • 详解Javascript ES6中的箭头函数(Arrow Functions)

    ES6可以使用"箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 1. 具有一个参数的简单函数 var single = a => a single('hello, world') // 'hello, world' 2. 没有参数的需要用在箭头前加上小括号 var log = () => { alert('no param') } 3. 多个参数需要用到小括号,参数间逗号间隔,例如两个数字相加 var add = (a, b) =&g

  • 详解JavaScript数据类型和判断方法

    详解JavaScript数据类型和判断方法

    前言 JavaScript 中目前有 7 种基本(原始primitives)数据类型 Undefined, Null,Boolean, Number, String,BigInt,Symbol,以及一种引用类型 Object,Object 中又包括 Function,Date,JSON,RegExp等,除了 7 种原始类型,其他的所有能够用 new 实例化的内置类型都是 Object 构造的. 数据类型 对于数据了类型我们可以通过 typeof 运算符来判断,具体结果看下图. 原始类型中两个比较

  • 详解JavaScript中的数据类型，以及检测数据类型的方法

    一.js中的数据类型有哪些? 在js中,基本数据类型有五种,分别是 string.number.boolean.null.undefined,不过在ES6中新增加的了一种基本数据类型Symbol(表示独一无二的值),其作用主要是从根本上防止属性名的冲突而设定的. 除了基本数据类型之外,还有引用数据类型object,也有人称之为复杂数据类型,包含了我们常见的Array.Object.Function等. 所以现在js中的数据类型共有七种. PS: Symbol数据类型通过Symbol函数生成.也就

  • 详解JavaScript两个实用的图片懒加载优化方法

    详解JavaScript两个实用的图片懒加载优化方法

    目录 一.方法一 二.方法二 InterSectionObserver 一.方法一 重点: 1.getBoundingClientRect().top > window.innerHeight 图片未出现 2.getBoundingClientRect().top < window.innerHeight 图片出现了 HTML: <ul> ...... <li>2222222222</li> <li>2222222222</li> &

随机推荐