返回列表 发帖

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

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

返回列表