ES5 的数组常用方法、选择器、严格模式

ES5 的数组常用方法

1. indexOf(data,start)
作用: 查找数组中有没有某一个数据(按照索引正序查找 0 1 2 3 …)
语法:
数组.indexOf(要查找的数据)
数组.idnexOf(要查找的数据, 从哪一个索引开始)
第二个参数不写默认是 0
返回值: 是一个数字
如果有你要查找的数据, 那么返回的是第一个找到的数据的索引
如果没有你要查找的数据, 那么返回的是 -1

 	// 1. indexOf()
    // 表示我要在 arr 这个数组里面查找有没有 'world' 这个数据
    var arr = ['hello', 'world', '你好', '世界', 'world']
    var res = arr.indexOf('world')
    console.log(res)
    // 表示我要再 arr 这个数组里面从 索引 2 开始向右查找, 看看有没有 'world'
    var res = arr.indexOf('world', 2)
    console.log(res)

2. lastIndexOf(data,start)
作用: 查找数组中有没有某一个数据(按照索引倒叙查找 9 8 7 6 …)
语法:
数组.lastIndexOf(你要查找的数据)
数组.lastIndexOf(你要查找的数据, 从哪一个索引开始)
返回值: 是一个数字
如果找到你要查找的数据了, 那么就返回第一个找到的数据的索引
如果没有找到你要查找的数据, 那么就返回 -1

	//2. lastIndexOf()
	var arr = ['hello', 'world', '你好', '世界', 'world']
    // 2. lastIndexOf()
    // 表示从数组的最后开始向前查找, 看看有没有 'world'
    var res = arr.lastIndexOf('world')
    console.log(res)
    // 表示从索引 3 开始向前查找, 看看数组里面有没有 'world' 这个数据
    var res = arr.lastIndexOf('world', 3)
    console.log(res)

3. forEach()
作用: 就是用来循环遍历数组的, 等价于 for 循环遍历数组的地位
语法:
数组.forEach(function (item, index, arr) {})
返回值: 没有

    // 3. forEach()
    // 目前, 数组里面有 4 个成员, 那么这个 function () {} 就执行 4 次
    var arr = ['hello', 'world', '你好', '世界']
    arr.forEach(function (item, index, arr) {
      // 这个函数, 会根据数组中有多少成员, 就执行多少回
      // 第一个形参 item : 数组里面的每一项
      // 第二个形参 index : 每一项的索引
      // 第三个形参 arr : 表示原始数组
      console.log('索引 ' + index + ' 是' + ' --- ' + item)
      console.log(arr)
      console.log('函数执行一次完毕')
    })
    
      上面的注释 :
        函数第一次执行的时候
          item === 'hello'
          index === 0
        函数第二次执行的时候
          item === 'world'
          index === 1
        ...
    // var arr = [10, 100, 1000]

4. map()
作用: 映射一个数组, 把原始数组里面的每一个数据映射倒新数组里面返回
语法:
数组.map(function (item, index, arr) {})
返回值: 就是一个新的数组
里面的每一项始从原始数组中映射过来的

// 4. map()
	//给数组里的每个数值扩大0.3倍
	var arr = [10，100，1000]
    var res = arr.map(function (item, index) {
    // 这个函数会根据数组中有多少成员执行多少回
      console.log(item, index)
   // 映射到新数组里面
      return item * 1.3
    })
    console.log(res)
    console.log(arr)
      解释上面代码执行过程
      map 函数的底层封装
      先准备一个空数组 []
      开始循环 arr 这个原始数组
        第一次的时候, item === 10
        return item * 1.3
        他就把第一次 return 的结果放在新数组里面 [13]

        第二次的时候, item === 100
        return item * 1.3
        他就把第二次 return 的结果放在新数组的后面 [13, 130]

        第三次的时候, item === 1000
        return item * 1.3
        
        他就把第三次 return 的结果放在新数组的后面 [13, 130, 1300]
      到这里 循环结束, 提前准备好的数组变成了 [13, 130, 1300]

5. filter()
作用: 把原始数组里面满足条件的数据过滤出来, 放在一个新数组里面
语法:
数组.filter(function (item, index, arr) {})
返回值: 就是一个新的数组
里面的每一项都是从原先数组中过滤出来的

    // 5. filter()
     var arr = [2，3，4，5，10, 20, 30, 40]
    var res = arr.filter(function (item, index) {
   // 这个函数, 会根据数组中有多少成员, 就执行多少回
      // 第一个形参 item : 数组里面的每一项
      // 第二个形参 index : 每一项的索引
      console.log(item, index)
     // 按照你的条件来过滤数组
      return item < 5
    })
    console.log(res)

      解释上面代码执行过程
      filter 的底层封装

      先准备一个空数组 []
        函数第一次执行的时候 item === 3
        return item > 4
        如果这一次 return 出来的是一个 true, 那么就把这一项放在新数组里面
        如果这一次 return 出来的是一个 false, 那么就不放进新数组, 继续下一次 []

        函数第二次执行的时候 item === 4
        return item > 4
        如果这二次 return 出来的是一个 true, 那么就把这一项放在新数组里面
        如果这二次 return 出来的是一个 false, 那么就不放进新数组, 继续下一次 []

        函数第三次执行的时候 item === 5
        return item > 4
        如果这三次 return 出来的是一个 true, 那么就把这一项放在新数组里面
        如果这三次 return 出来的是一个 false, 那么就不放进新数组, 继续下一次 [5]

        函数第四次执行的时候 item === 6
        return item > 4
        如果这四次 return 出来的是一个 true, 那么就把这一项放在新数组里面
        如果这四次 return 出来的是一个 false, 那么就不放进新数组, 继续下一次 [5, 6]

      到此, 循环结束, 准备好的数组变成了 [5, 6]
      filter 方法把 这个数组返回给你 

6. every()
作用: 就是判断数组里面是不是 每一个 都是符合条件的
语法:
数组.every(function (item, index, arr) {})
返回值: 是一个布尔值
如果数组里面所有的数据都是满足条件的, 那么返回 true
只要数组里面有任意一个不满足条件, 那么返回 false

 // 6. every()
    var arr = [10, 20, 30, 40]
    var res = arr.every(function (item, index) {
      // 这个位置的函数回根据 arr 数组有多少成员执行多少回
      // item : 表示每一项
      // index : 表示索引
      console.log(item, index)

      // 书写你的判断条件
      return item > 0
    })

    console.log(res)
      上面代码执行步骤解析
      every 方法的底层封装

      先准备了一个变量值是 true

        函数第一次执行, item === 10
        return item > 0
        如果 return 出来的是一个 true, 那么循环继续, 什么也不做
        如果 return 出来是一个 false, 那么把准备好的变量变成 false, 停止循环直接结束

        函数第二次执行, item === 20
        return item > 0
        如果 return 出来的是一个 true, 那么循环继续, 什么也不做
        如果 return 出来是一个 false, 那么把准备好的变量变成 false, 停止循环直接结束

        函数第三次执行, item === 30
        return item > 0
        如果 return 出来的是一个 true, 那么循环继续, 什么也不做
        如果 return 出来是一个 false, 那么把准备好的变量变成 false, 停止循环直接结束

        函数第四次执行, item === 50
        return item > 0
        如果 return 出来的是一个 true, 那么循环继续, 什么也不做
        如果 return 出来是一个 false, 那么把准备好的变量变成 false, 停止循环直接结束

      循环结束以后, 准备的变量依旧是 true, 表示你数组里面的每一个数据都满足条件
      直接 every 方法返回 true
      循环结束以后, 准备的变量变成了 false, 表示你数组里面至少有一个是不满足条件
      直接 every 方法返回 false

7. some()
作用: 就是判断数组里面是不是 某一个 是符合条件的
语法:
数组.some(function (item, index, arr) {})
返回值: 是一个布尔值
如果数组里面有任何一个是满足条件的, 那么返回 true
只有数组里面所有的都不满足条件的时候, 返回 false

 // 7. some()
 	var arr = [10, 20, 30, 40]
    var res = arr.some(function (item, index) {
      // 这个函数回根据 arr 数组里面的成员数量执行多少次
      console.log(item, index)
      // 写一个你要判断的条件
      return item > 40
    })
    console.log(res)

      上面代码执行解析
      some 方法的底层封装

      先准备一个变量, 赋值为 false

        函数第一次执行, item === 10
        return item > 40
        如果 return 的是一个 false, 那么什么也不做, 循环继续
        如果 return 的是一个 true, 那么直接结束循环, 把提前准备好的变量赋值为 true

        函数第二次执行, item === 20
        return item > 40
        如果 return 的是一个 false, 那么什么也不做, 循环继续
        如果 return 的是一个 true, 那么直接结束循环, 把提前准备好的变量赋值为 true

        函数第三次执行, item === 30
        return item > 40
        如果 return 的是一个 false, 那么什么也不做, 循环继续
        如果 return 的是一个 true, 那么直接结束循环, 把提前准备好的变量赋值为 true

        函数第四次执行, item === 40
        return item > 40
        如果 return 的是一个 false, 那么什么也不做, 循环继续
        如果 return 的是一个 true, 那么直接结束循环, 把提前准备好的变量赋值为 true

      循环结束的时候, 如果准备好的变量依旧是 false
        表示数组里面每一个都不满足条件
        some 方法直接返回 false
      循环结束的时候, 如果准备好的变量变成了 true
        表示数组里面至少有一个满足条件了
        some 方法直接返回 true

ES5新增选择器

• query:支持css选择器写法
  • document.querySelector(".cont")
• queryAll:支持css选择器写法
  • document.querySelectorAll(".cont")

ES5新增严格模式

• 开启标志：’ use strict’
• 位置：script标签起始位置
• 严格模式开启后的变更
  • 必须使用声明关键字
  • 函数的形参不允许重复
  • arguments保存的永远是实参，不被形参的改变而影响
  • arguments.callee不允许使用
  • with不允许使用
  • 不允许数值前加0的方式使用八进制
  • 没有明确隶属对象的函数中的this为undefined