JavaScript ES5的严格模式和数组常用方法

最新推荐文章于 2020-07-27 21:02:34 发布

DingDing_Zhang

最新推荐文章于 2020-07-27 21:02:34 发布

阅读量160

点赞数

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

本文链接：https://blog.csdn.net/DingDing_Zhang/article/details/107106003

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

JavaScript ES5

ES5 严格模式（了解）

因为 js 是一个相对松散的代码格式，所以写的时候没有很多要求
严格模式：书写代码时，有严格的代码要求
目前：基本上没有人开发使用严格模式

一、开启严格模式

如果你不设置，那么默认是使用正常模式进行开发
如果你想设置，那么你就在作用域的最开始，写一个字符串 ‘use strict’
- 表示 JS 代码需要在严格模式下数字而，如果不遵守就报错

二、严格模式的要求

定义变量必须有 var 关键字

<script>
	'use strict' // 有这个字符串就是开启严格模式, 没有就是正常模式
	
	// 定义变量必须有 var 关键字
    // 非严格模式下 :  直接给变量赋值, 因为变量的赋值规则, 会默认吧这个 num 定义为全局变量
    // 严格模式下 : 如果没有定义变量, 直接给变量进行赋值, 那么直接报错   
   num = 100
    console.log(num) // 报错：num is not defined
</script>

我们书写 八进制 数字的时候，不能以 0 开头，必须以 0o 开头

<script>
	'use strict' // 有这个字符串就是开启严格模式, 没有就是正常模式
	
	// 书写 八进制 数字必须以 0o 开头
    // 非严格模式下 : 010 表示 八进制 的 10 转换成 十进制 就是 8
    // 严格模式下 : 010 报错
    // 严格模式下 : 0o10 表示 八进制 的 10 转换成 十进制 就是 8
    var n1 = 0o10
    console.log(n1) // 8
</script>

定义函数，必须卸载代码的最开始，不能写在 if 或者 for 或者 … 之中

<script>
	'use strict' // 有这个字符串就是开启严格模式, 没有就是正常模式
	
	// 定义函数必须写在代码的一开始
    // 非严格模式下 : 函数可以定义在 if 语句里面
    // 严格模式下 : 函数不可以定义再 if 语句里面
    var num = 100
    if (true) {
      function fn() {
        console.log('我是 if 条件里面定义的 fn 函数')
      }
    }
    fn()
    console.log(num) // 报错：fn is not defined
</script>

不允许函数定义两个相同的形参

<script>
	'use strict' // 有这个字符串就是开启严格模式, 没有就是正常模式
	
	// 不允许函数定义两个相同的形参
    // 非严格模式下 : 可以定义两个一样的形参
    // 严格模式下 : 不允许两个一样的形参出现
    function fn(a, a) {
      // 其实这里就是对 a 形参进行了两次赋值, 10 就没有了
      console.log(a) // 报错：Duplicate parameter name not allowed in this context        
    }
    fn(10, 20) 
</script>

ES5 的数组常用方法

迭代方法

一、indexOf( ) 方法

作用：查找数组中有没有某一个数据（按照索引正序查找 0 1 2 3 …）
语法：
- 数组.indexOf(要查找的数据)
- 数组.idnexOf(要查找的数据, 从哪一个索引开始)
返回值：是一个数字
- 如果有你要查找的数字，那么返回的是第一个找到的数据的索引
- 如果没有你要查找的数据，那么返回的是 -1

 	var arr = ['hello', 'world', '你好', '世界', 'world']

    // 表示我要再 arr 这个数组里面查找有没有 'world' 这个数据
    var res = arr.indexOf('world')
    console.log(res) // 1

    // 表示我要再 arr 这个数组里面从 索引 2 开始向右查找, 看看有没有 'world'
    var res = arr.indexOf('world', 2)
    console.log(res)  // 4

二、lastIndexOf( ) 方法

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

	var arr = ['hello', 'world', '你好', '世界', 'world']
	
	// 表示从数组的最后开始向前查找, 看看有没有 'world'
    var res = arr.lastIndexOf('world')
    console.log(res) // 4

    // 表示从索引 3 开始向前查找, 看看数组里面有没有 'world' 这个数据
    var res = arr.lastIndexOf('world', 3)
    console.log(res) // 1

三、forEach( ) 方法

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

	var arr = ['hello', 'world', '你好', '世界']
	
	// 目前, 数组里面有 4 个成员, 那么这个 function () {} 就执行 4 次
    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
        ...
    */

四、map() 方法

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

	var arr = [10, 100, 1000]

    var res = arr.map(function (item, index) {
      // 这个函数会根据数组中有多少成员执行多少回
      console.log(item, index)

      // 映射到新数组里面
      return item * 1.3
    })

    console.log(res) // [13, 130, 1300]
    console.log(arr) // [10, 100, 1000]
    
    /*
      解释上面代码执行过程
      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]
      map 方法把这个数组返回
    */

五、filter( ) 方法

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

	var arr = [3, 4, 5, 6]

      var res = arr.filter(function (item, index) {
        // 这个函数回根据 arr 数组有多少项执行多少回
        console.log(item, index)

        // 按照你的条件来过滤数组
        return item < 5
      })

      console.log(res) //[3, 4]
      
       /*
      解释上面代码执行过程 ： filter 的底层封装

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

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

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

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

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

六、every( ) 方法

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

	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) // true
    
    /*
      上面代码执行步骤解析
      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
    */

七、some( ) 方法

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

	var arr = [10, 20, 30, 40]

    var res = arr.some(function (item, index) {
      // 这个函数回根据 arr 数组里面的成员数量执行多少次
      console.log(item, index)

      // 写一个你要判断的条件
      return item > 40
    })

    console.log(res) // false
    
    /*
      上面代码执行解析
      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
    */

归并方法

经过对数组中数据的操作，得到一个值

一、reduce( ) 方法

作用：经过对数组中数据的求和操作，得到一个值
语法：
- 数组.reduce(function (sum, item, index, arr) {})
返回值：是一个值（所有数据的和）

	var arr = [1, 2, 3, 4, 5, 6, 7]
    
    var res = arr.reduce(function (sum, item, index, arr){
        
        // 返回所有数据的和
        return (sum + item)
    })
    
    console.log(res) // 28