Array.prototype.indexOf(value) 

得到值在数组中的第一个下标，如果元素不存在返回-1，可以用来判断是否包含指定的元素

var arr = [6,5,4,3,1,7,6];
console.log(arr.indexOf(5))

Array.prototype.includes(value)
判断数组中是否包含指定value

var arr = [6,5,4,3,1,7,6];
console.log(arr.includes(5)) // true
console.log(arr.includes(8)) // false

Array.prototype.lastIndexOf(value) 

得到值在数组中的最后一个下标

var arr = [6,5,4,3,1,7,6];
console.log(arr.lastIndexOf(6))

Array.prototype.forEach(function(item, index){})

遍历数组

var arr = [6,5,4,3,1,7,6];
arr.forEach(function (item, index) {
    console.log(item + '-' + index) // index是角标，item是元素值
})

Array.prototype.map(function(item, index){})

遍历数组返回一个新的数组，返回加工之后的值

    var arr = [6,5,4,3,1,7,6];
    var newArr = arr.map(function (item, index) {
      return item + 10
    })

    console.log(newArr)

Array.prototype.filter(function(item, index){}) 

遍历过滤出一个新的子数组， 返回条件为true的值

    var arr = [6,5,4,3,1,7,6];
    var newArr = arr.filter(function (item, index) {
      return item > 5 //将arr数组中所有大于5的元素添加到一个新的数组中
    })

    console.log(newArr)

Array.from(v)

将伪数组对象或可遍历对象转换为真数组

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03_数组扩展</title>
</head>
<body>
<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>
<script type="text/javascript">
  let btns = document.getElementsByTagName('button') //现在btns也是一个数组（伪数组，没有数组一般的方法）

  // 因为btns是个伪数组，没有数组的一般方法，所以会报错
  // btns.forEach(function (item, index) {
  //   console.log(item)
  // })

  // 将伪数组对象转换为真数组
  Array.from(btns).forEach(function (item, index) {
    console.log(item)
  })
</script>
</body>

</html>

Array.of(v1, v2, v3)

将一系列值转换成数组

console.log(Array.of('3', 3, '4')) //["3", 3, "4"]

find(function(value, index, arr){return true})和findIndex(function(value, index, arr){return true})

find：找出第一个满足条件返回true的元素

findIndex：找出第一个满足条件返回true的元素下标

let arr = [4,5,1,6,4,7,9,13]
  let result = arr.find(function (item, index) {
    return item > 3
  })
  let resultIndex = arr.findIndex(function (item, index) {
    return item > 3
  })
  console.log(result) //4,也就是数组中的第一个元素的值，满足了条件大于3
  console.log(resultIndex) //0,也就是数组中的第一个元素的下标，满足了条件大于3

ES5-ES6-ES7_数组的扩展的更多相关文章

  1. ES6对数组的扩展(简要总结)

    文章目录 数组的扩展(ES6) 1. 扩展运算符 2. Array.from 3. Array.of() 4. copyWithin() 5. find() 和 findIndex() 6. fill ...

  2. ES6 之 数组的扩展

    ES5 检测数组 let arr = [1,2,3,4] Array.isArray(arr) arr instanceof Array 转换方法 arr.toLocaleString() arr.t ...

  3. ES6对数组的扩展

    ECMAScript6对数组进行了扩展,为数组Array构造函数添加了from().of()等静态方法,也为数组实例添加了find().findIndex()等方法.下面一起来看一下这些方法的用法. ...

  4. 【ES6】数组的扩展——扩展运算符

    1.扩展运算符[三个点(...)将一个数组转为用逗号分隔的参数序列] 作用:用于函数调用 function add(x, y) { return x + y; } const numbers = [2 ...

  5. 【ES6】数组的扩展

    1.Array.from(): 将伪数组对象和遍历的对象转为真数组 如果一个对象的键都是正整数或者0,并且有 Length属性,那么这个对象很想数组,称它为伪数组. 伪数组: let obj = { ...

  6. 数组的复制及ES6数组的扩展

    一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只 ...

  7. ES6的新特性（8）——数组的扩展

    数组的扩展 扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...

  8. ES6数组的扩展运算符

    一.基本使用 ES6中函数可以使用 rest参数 接收函数的多余参数,组成一个数组,放在形参的最后面. let fn = (a, ...value) => { console.log(a); c ...

  9. ES6学习（三）：数组的扩展

    chapter08 数组的扩展 8.1 扩展运算符 8.1.1 扩展运算符的含义 ... 如同rest运算符的逆运算,将一个数组转换为用逗号分隔的参数序列. console.log(...[1, 2, ...

  10. ES6学习笔记（六）数组的扩展

    1.扩展运算符 1.1含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // ...

随机推荐

  1. 关于我空间那篇名为《JavaScript axError：Unexpected token ILLEGAL 很简单的代码……》的随笔

    如图所示,我是空间的那片随笔,这里就不贴出链接了,也不希望你有这个兴趣,不知道会不会有人无意间闯入,额,自从日志用windows live writer 2009 发了那篇随笔后,我在网页上一直没能正 ...

  2. tomcat开启自启动

    linux方式 #!/bin/bash #chkconfig: #description: Starts and Stops the Tomcat daemon. #by benjamin ##### ...

  3. H5 video播放视频遇到的问题

    我在别的网站上下载了一个mp4格式的视频,加到video标签里可以正常播放, 然后我用FLV自己转成mp4,却提示不支持的格式和mine类型, 后来找到一篇文章 http://jingyan.baid ...

  4. 正则表达式之 \b

    引用网上一段话: \b 是正则表达式规定的一个特殊代码(好吧,某些人叫它元字符,metacharacter),代表着单词的开头或结尾,也就是单词的分界处.虽然通常英文的单词是由空格,标点符号或者换行来 ...

  5. [angularjs] angularjs系列笔记（二）指令

    重复HTML元素 ng-repeat指令可以重复HTML元素 <body> <div ng-app="Home" ng-controller="inde ...

  6. 《JavaScript高级程序设计》笔记：在HTML中使用Javascript（二）

    script元素 向html页面中插入js的主要方法就是使用<script>元素.使用<script>元素的方式有两种:直接在页面中嵌入js代码和包含外部js文件.直接在页面中 ...

  7. 一年过去了，25万月薪的AI工程师还存在吗？

    导读:2017 年的时候,AI 前线进行了一场有关人工智能领域薪资差异的专题策划,这篇名为<25 万年薪的你与 25 万月薪的他,猎头来谈你们之间的差别>的文章引起了读者们的热烈讨论.一年 ...

  8. viewPager+fragment如何刷新缓存fragment

    最近在做一个项目,有一个功能是答题翻页.于是需要实现在这一页的时候就缓存下一页. 刚刚开始我是用 setOnPageChangeListener方法监听,滑到这一页的时候才刷新这一页: public ...

  9. sublime text 3 优化配置

    目录 1. sublime text 3 模板插件 SublimeTmpl 配置 修改模板内容格式 修改快捷键 2. 设置sublime text的 TAB 为4个空格 3. 添加markdown支持 ...

  10. [20181015]为什么是3秒.txt

    [20181015]为什么是3秒.txt --//以前测试:连接http://blog.itpub.net/267265/viewspace-2144765/=>为什么是12秒.txt.--// ...