ES5和ES6

ES5和ES6

• 我们所说的 ES5 和 ES6 其实就是在 js 语法的发展过程中的一个版本而已
• 比如我们使用的微信
  • 最早的版本是没有支付功能的
  • 随着时间的流逝，后来出现了一个版本，这个版本里面有支付功能了
• ECMAScript 就是 js 的语法
  • 以前的版本没有某些功能
  • 在 ES5 这个版本的时候增加了一些功能
  • 在 ES6 这个版本的时候增加了一些功能
• 因为浏览器是浏览器厂商生产的
  • ECMAScript 发布了新的功能以后，浏览器厂商需要让自己的浏览器支持这些功能
  • 这个过程是需要时间的
  • 所以到现在，基本上大部分浏览器都可以比较完善的支持了
  • 只不过有些浏览器还是不能全部支持
  • 这就出现了兼容性问题
  • 所以我们写代码的时候就要考虑哪些方法是 ES5 或者 ES6 的，看看是不是浏览器都支持

ES5 增加的数组常用方法

数组方法之 forEach

• forEach 用于遍历数组，和 for 循环遍历数组一个道理

• 语法： 数组.forEach(function (item, index, arr) {})

  var arr = ['a', 'b', 'c']
  // forEach 就是将数组循环遍历，数组中有多少项，那么这个函数就执行多少回
  arr.forEach(function (item, index, arr) {
       
    // 在这个函数内部
    // item 就是数组中的每一项
    // index 就是每一项对应的索引
    // arr 就是原始数组
    console.log(item) 
    console.log(index) 
    console.log(arr) 
  })
  

  • 上面的代码就等价于

  var arr = ['a', 'b', 'c']
  for (var i = 0; i < arr.length; i++) {
       
    fn(arr[i], i, arr)
  }
  function fn(item, index, arr) {
       
    console.log(item)
    console.log(index)
    console.log(arr)
  }
  

数组方法之 map

• map 用于遍历数组，和 forEach 基本一致，只不过是有一个返回值

• 语法： 数组.map(function (item, index, arr) {})

• 返回值： 一个新的数组

  var arr = ['a', 'b', 'c']
  // forEach 就是将数组循环遍历，数组中有多少项，那么这个函数就执行多少回
  var newArr = arr.map(function (item, index, arr) {
       
    // 函数里面的三个参数和 forEach 一样
    // 我们可以在这里操作数组中的每一项，
    // return 操作后的每一项
    return item + '11'
  })
  console.log(newArr) // ["a11", "b11", "c11"]
  

  • 返回值就是我们每次对数组的操作
  • 等价于

  var arr = ['a', 'b', 'c']
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
       
    newArr.push(fn(arr[i], i, arr))
  }
  function fn(item, index, arr) {
       
    return item + '11'
  }
  console.log(newArr)
  

数组方法之 filter

• filter ： 是将数组遍历一遍，按照我们的要求把数数组中符合的内容过滤出来

• 语法： 数组.filter(function (item, index, arr) {})

• 返回值： 根据我们的条件过滤出来的新数组

  var arr = [1, 2, 3, 4, 5]
  var newArr = arr.filter(function (item, index, arr) {
       
    // 函数内部的三个参数和 forEach 一样
    // 我们把我们的条件 return 出去
    return item > 2
  })
  console.log(newArr) // [3, 4, 5]
  

  • 新数组里面全都是大于 2 的数字
  • 等价于

  var arr = [1, 2, 3, 4, 5]
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
       
    if (fn(arr[i], i, arr)) {
       
      newArr.push(arr[i])
    }
  }
  function fn(item, index, arr) {
       
    return item > 2
  }
  console.log(newArr)
  

数组方法之 some

• some ： 是将数组遍历一遍，按照我们的要求判断一下数组中是否有一些元素满足条件

• 语法： 数组.some(function (item, index, arr) {})

• 返回值： 有一些满足条件返回true，反之false

  var arr = [1, 2, 3, 4, 5]
  var flag = arr.some(function (item, index, arr) {
       
    // 函数内部的三个参数和 forEach 一样
    // 我们把我们的条件 return 出去
    return item > 2
  })
  console.log(flag) // true
  

数组方法之 every

• every ： 是将数组遍历一遍，按照我们的要求判断一下数组中是否所有元素满足条件

• 语法： 数组.every(function (item, index, arr) {})

• 返回值： 全都都满足条件返回true，反之false

  var arr = [1, 2, 3, 4, 5]
  var flag = arr.every(function<