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

vicky.yu

ES5的新特性
一、严格模式
二、数组新增的方法
1、Array.isArray()
2、Array.forEach()
3、Array.map()
4、Array.filter()
5、Array.reduce()
6、Array.reduceRight()
7、Array.every()
8、Array.some()
9、Array.indexOf()
10、Array.lastIndexOf()
三、JSON的方法
1、JSON.stringify()
2、JSON.parse()
四、字符串新增的方法
String.trim()
五、对象的新增方法
1、Object.keys()
2、Object.values()
3、Object.defineProperty()
一、严格模式
在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
3
4
5
6
7
8
9
10
11
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
1
2
3
4
5
6
7
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>
1
2
3
4
5
6


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>
1
2
3
4
5
6
7
8


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>
1
2
3
4
5
6
7
8


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>
1
2
3
4
5
6
7
8


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>
1
2
3
4
5
6
7
8


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>
1
2
3
4
5
6
7
8

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

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>
1
2
3
4
5
6
7
8


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>
1
2
3
4
5
6
7


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>
1
2
3
4
5
6


三、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>
1
2
3
4
5
6

结果将是遵循 JSON 表示法的字符串。
————————————————
版权声明：本文为CSDN博主「前端Ckk」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/hello_woman/article/details/129317033