ES6语法精讲_?. 语法是es6-CSDN博客

本文链接：https://blog.csdn.net/qq_41346335/article/details/107718401

文章目录

一、认识ES6

1.什么是ES6

ECMAScript是JavaScript的标准，js是ES的实现。
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。ECMA Script,JavaScript的语言标准。

2. 为什么使用ES6

支持更多的语法，使用更加方便。
语言都在更新换代。
增强工程性。

二、ES6的语法特性

1.变量

1.1新的声明方法

传统的var有很多缺点：

重复声明
不能限制修改
是函数级别的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重复声明</title>
    <script>
        // let a = 1;
        // let a = 2;
        // 使用let的好处避免重复声明
        // alert(a);

        let b = 3;
        b = 4;
        alert(b);

        // 使用const的好处是不能修改
        const c = 5;
        c = 6;
        alert(c);

        // let 防止重复声明 变量
        // const 防止重复声明 常量

    </script>
</head>
<body>

</body>
</html>

以后不再使用var，而是使用let和const

1.2 解构赋值

json = {a:12,b:5};
let {a,b} = json;

arr = [3,4,5];
let [b,c,a] = arr;

用途：
比如取ajax的json中得某个属性

注意事项：
两边的结构必须一样
右边必须得是一个‘东西’
解构和赋值必须同时进行

三、函数

1. 写法更简单

原函数写法：

function(){
…
}

ES6语法写法：

()=>{}

注意：
如果有且仅有一个参数，()可以不写
如果仅有一个语句，且为return，{}也可以不写

可以改正this指向。

2. 剩余参数

在函数最后一个参数上可以写...参数名，代表以后的所有参数都是最后一个参数里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>剩余参数</title>
    <script>
        // 相当于数组展开
        let arr = [2,5,1];
        function show(a,b,c){
            alert(a+b+c);
            alert(c);
        }
        show(...arr);

        // 剩余参数赋值
        function show1(a,b,...c){
            console.log(a,b,c);
        }
    </script>
</head>
<body>

</body>
</html>

四、原生对象扩展（map、reduce、filter、forEach）

1.map(返回值和原有的返回值个数一样)

含义：映射一一对应
eg：
[68,55,90,66]=>[及格，不及格，及格，及格]
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mapper</title>
</head>
<script>
    let arr = [54,69,88,33];
    let arr1 = arr.map(item => item >= 60 ? '及格' : '不及格');
    console.log("arr",arr);   //[54,69,88,33]
    console.log("arr1",arr1); //["不及格", "及格", "及格", "不及格"]
</script>
<body>

</body>
</html>

2.reduce(返回值只有一个)

含义：可以用来求和，求平均值等等。

3.filter(返回值的个数不一定)

含义：过滤

4. foreach

含义：遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>foreach</title>
</head>
<script>
    let arr = [43,65,21,87,32,76];
    arr.forEach((item,index)=>{
        // 模板字符串的用法真的是好强大啊
        alert(`第${index}个元素是${item}`);
    })
</script>
<body>

</body>
</html>

五、模板字符串

**使用方法：**在需要引变量的地方使用${},同时整个内容用``包起来，如下所示:

    alert(`第${index}个元素是${item}`);

六、Json的转化

JSON.parse(jsonstr); // 把字符串的json转化成标准json
JSON.stringify(json); // 把标准的json转化成字符串的json
注意:
json的key要带双引号

未完待续