Javascript的重要版本之一——ES5新特性总结

一、严格模式

在JS文件的头部或者函数的第一句写上"use strict"

<script>
	"use strict"
	text = "严格模式"
	console.log(text) // 会报错，报错内容：text is not defined 不能使用未声明过的变量
	function ceshi(){
      
      
		"use strict"
		msg = "函数内部严格模式"
		console.log(msg)   //报错  报错内容：msg is not defined
	}
	ceshi()
</script>

1、禁止使用未声明过的变量并进行赋值
2、函数预编译中this默认为undefined，不再指向window
3、禁止对象属性重名、禁止函数参数重名
4、禁止使用八进制数字
5、禁止使用with语句
6、强制为eval创建新作用域
7、对超出权限的操作显示报错，不再做静默失败处理

二、数组新增的方法

1、Array.isArray()

isArray() 方法检查对象是否为数组。

Array.isArray([1, 2, 3, 4, 5])  //true
Array.isArray("123456")  //false
Array.isArray(123456)  //false
Array.isArray({
    
     a: 1 })  //false
Array.isArray(true)  //false
Array.isArray(undefined)  //false
Array.isArray(null)  //false

2、Array.forEach()

forEach() 方法为每个数组元素调用一次函数，用来遍历索引数组
参数是一个函数，并且回调函数有三个参数（原数组当前元素的值、当前的下标、原数组）
没有返回值

<script>
    var arr = ["a", "b", "c", "d", "e", "f"]
    arr.forEach(function (item, index, value) {
      
      
        console.log(item, index, value)
    })
</script>

3、Array.map()

map()读取原数组中的每个值，可进行修改，之后生成一个新数组返回
参数为函数，回调函数有三个参数(原数组当前元素的值、当前的下标、原数组)
有返回值，需要return 会返回一个新的数组

<script>
    var arr = ["a", "b", "c", "d", "e", "f"]
    let arrnew = arr.map(function (item, index, value) {
      
      
        console.log(item, index, value)
        return item += "!"
    })
    console.log(arrnew)
</script>

4、Array.filter()

filter()遍历数组元素，将符合条件的元素过滤出来，放到新的数组中
参数为函数，回调函数有三个参数(原数组当前元素的值、当前的下标、原数组)
有返回值，需要return 会返回一个新的数组

<script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    let arrnew = arr.filter(function (item, index, value) {
      
      
        console.log(item, index, value)
        return item > 5   //过滤出数组中大于5的每一项，组成一个新的数组
    })
    console.log(arrnew)
</script>

5、Array.reduce()

reduce()遍历数组，将元素跟储存值进行处理，并返储存值
参数是一个函数和一个初始值，回调函数有四个参数：储存值、元素值、元素下标、数组，回调函数需要返回值
可以用于返回数组中所有数的总和；也可以用于数组去重(这个大家可以自行百度看一下逻辑)

<script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    let count = arr.reduce(function (accumulator, Value, Index, array) {
      
      
        console.log(accumulator, Value, Index, array)
        return accumulator + Value;  
    }, 0) // 把0当做初始值传入
    console.log(count)
</script>

6、Array.reduceRight()

reduceRight()使用方法参考reduce(),与reduce不一样的是，计算的时候是从右往左开始计算

<script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    let count = arr.reduceRight(function (accumulator, Value, Index, array) {
      
      
        console.log(accumulator, Value, Index, array)
        return accumulator + Value;  
    }, 0) //
    console.log(count)
</script>

7、Array.every()

every()检查数组的每个值是否都满足要求
自带循环，每次循环都会调用一次回调函数
参数是一个函数，回调函数有三个参数(原数组当前元素的值、当前的下标、原数组)
返回true或false

<script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    let count = arr.every(function (item, index, arr) {
      
      
        console.log(item, index, arr)
        return item >=2 //判断是否全部大于等于2
    }) 
    console.log(count)
</script>

因为第一项都不满足条件，所以不会往下进行循环

8、Array.some()

some()判断检查数组的元素是否有满足条件的(有一个符合就会返回true)
返回true或者false

<script>
    var arr = [1, 2, 3, 4, 5, 6, 7, 8]
    let count = arr.every(function (item, index, arr) {
      
      
        console.log(item, index, arr)
        return item = 8 //判断数组中是否有一项等于8
    })
    console.log(count)
</script>

9、Array.indexOf()

indexOf()检索数组中的某个元素值并返回其位置：
数组中存在某个元素值会返回该元素值的下标，不存在就会返回-1
有两个参数，第一个参数必填，填写元素值；第二个选填，可以填入下标
例如indexOf(1,5),从下标5的位置开始向后查找1

<script>
    var arr = [1, 2, 3, 4, 1, 5, 6, 7, 8]
    console.log(arr.indexOf(1))
    console.log(arr.indexOf(1,3))
    console.log(arr.indexOf(5))
    console.log(arr.indexOf(10))
</script>

10、Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾处开始检索。
返回指定元素在数组中最后一次出现的位置，如果没有则返回 -1。该方法从数组的后面向前查找。
lastIndexoOf(item,index)
index：指定要查找的元素的位置，从此位置开始逆向查找。默认为数组的长度减去1(arr.length - 1)。如果为负值，则表示从倒数第几个开始向前查找

<script>
    var arr = [1, 2, 3, 4, 1, 5, 6, 7, 8]
    console.log(arr.lastIndexOf(1))
    console.log(arr.lastIndexOf(5))
    console.log(arr.lastIndexOf(10))
</script>

三、JSON的方法

1、JSON.stringify()

JSON 的一个常见用途是将数据发送到Web服务器。
将数据发送到 Web 服务器时，数据必须是字符串。
作用：将数组和对象转化为JSON字符串

<script>
    var obj = {
      
       "name": "LiMing", "age": 18, "city": "QingDao" };
    var JSstr = JSON.stringify(obj)
    console.log(obj)
    console.log(JSstr)
</script>

结果将是遵循 JSON 表示法的字符串。

2、JSON.parse()

将字符串转化为对象，一共两个参数
第一个参数：必须，字符串
第二个参数：可选，是一个函数，函数传递两个参数
key转换为对象的属性名
value转换为对象的属性值

<script>
    var obj = {
      
       "name": "Bill", "age": 62, "city": "Seatle" };
    var JSstr = JSON.stringify(obj)

    let JSpar = JSON.parse(JSstr)
    console.log(JSpar)
    JSpar = JSON.parse(JSstr, function (key, value) {
      
      
        console.log(key, value)
        return value + "!"
    })
</script>

四、字符串新增的方法

String.trim()

方法会从一个字符串的两端删除空白字符，不会去除中间的空格
trim() 方法并不影响原字符串本身
返回的是一个新的字符串，需要定义变量去接收

<script>
    var str = "           abc     def       "
    var strnew =  str.trim()
    console.log(str)
    console.log(strnew) 
</script>

五、对象的新增方法

1、Object.keys()

方法用于获取对象自身所有的属性名
效果类似 for…in
返回一个由属性名组成的数组

<script>
    var obj = {
      
       a: 1, b: 2, c: 3 }
    console.log(Object.keys(obj))  //['a', 'b', 'c']
</script>

2、Object.values()

方法用于获取对象自身所有的属性值
返回一个由属性值组成的数组

<script>
    var obj = {
      
       a: 1, b: 2, c: 3 }
    console.log(Object.values(obj))  //[1, 2, 3]
</script>

3、Object.defineProperty()

用来定义新属性或修改原有的属性
参数有三个：①obj：必需。目标对象；②prop：必需。需定义或修改属性的名字；③descriptor：必需。目标属性所拥有的特性

descriptor以{}书写
value：设置属性的值，默认为underfined
writable：值是否可以重写  默认为false
enumerable：属性是否可以被枚举 默认为false
configurable：属性是否可以被删除或是否可以再次修改  默认为false

<script>
    var obj = {
      
       name: 'XiaoMing', sex: '男' }
    Object.defineProperty(obj, "name", {
      
      
        configurable: false,  //设置之后，name属性就不能删除了
    })
    delete obj.name;
    console.log(obj); //{name: 'XiaoMing', sex: '男'}

    Object.defineProperty(obj, "age", {
      
      
        writable: false, //设置age只读，无法修改
        value: 18, //设置obj.name = 18
    })
    obj.age = 20;
    console.log(obj.age); //18

    Object.defineProperty(obj, "age", {
      
      
        enumerable: false  //设置不能被枚举,无法通过ojb.age获取打印
    })
    for (var i in obj) {
      
      
        console.log(i + "的值是" + obj[i]); //通过循环获取obj能枚举的属性，打印
    } 
</script>