JavaScript ES6标准

最新推荐文章于 2023-07-29 22:45:44 发布

坂本大大

最新推荐文章于 2023-07-29 22:45:44 发布

阅读量525

点赞数

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

本文链接：https://blog.csdn.net/hj1214095082/article/details/97506762

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用ES6的好处：1.方便 2.解决了JavaScript的遗留问题

1.新的变量声明方式

以往使用的var的缺点:

1.可以重复声明

2.不能限制修改

3.没有块级作用域

ES6新特性：增加了let和const声明方式

let 声明变量

const 声明常量

`let`的用法：

禁止重复声明

let a = 5;
let a = 6;
alert(a);
//无法显示,因为a已经声明过了，禁止重复声明。

`const`的用法:

控制修改

const a = 5;
a = 6;
alert(a);
//无法显示，因为a已经被const声明为常量，无法修改。

ES6支持语法块块级作用域

//使用var
if(true){
    var a = 5;
}
alert(a);//能显示a=5，不支持块级作用域，a能在外面被读到。

//使用let
if(true){
    let a = 5;
}
alert(a);//不能显示，会报错：a is not defined，因为a在语法块内部。


//使用const
if(true){
    const a = 5;
}
alert(a);//不能显示，会报错：a is not defined，因为a在语法块内部。

实例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script>
        window.onload = function(){
            var inputBtn = document.getElementsByTagName("input");
            
            for (var i = 0; i < inputBtn.length; i++) {
                inputBtn[i].onclick = function(){
                    alert(i);
                }; 
            };
        };
    </script>
</head>
<body>
    <input type="button" value="我是第一个">
    <input type="button" value="我是第二个">
    <input type="button" value="我是第三个">
    <input type="button" value="我是第四个">
</body>
</html>

效果：

按钮都是输出4

点击前面3个按钮都会显示4。这是因为使用var声明的i在for循环执行完毕之后，i就是等于4，i的内存地址会被最后一个值修改。但是使用let声明的变量就不会出现这种问题，i会被分配四个内存地址。

当我们在for语法块里使用let的时候就可以正常显示了

<script>
        window.onload = function(){
            var inputBtn = document.getElementsByTagName("input");
            
            for (let i = 0; i < inputBtn.length; i++) {
                inputBtn[i].onclick = function(){
                    alert(i);
                }; 
            };
        };
</script>

可以正常显示

点击第一个按钮显示0，点击第二个按钮显示1，点击第三个会显示2…

总结：为了规范代码，采用ES6标准，以后就抛弃使用`var`。

2.结构赋值

直接看例子：

<script>
        let {a,b,c} = {a:1,b:2,c:3};
        console.log(a,b,c);
</script>

输出的值

相当于同时声明了3个变量，左边的a，b，c可以从右边的json对象里取出对应的值。

不但可以结构对象，还可以结构赋值数组

        let [a,b,c] = [1,2,3];
        console.log(a,b,c);

注意：左右两边类型和结构要一样。

3.箭头函数

原写法：

function (参数){
  return a;
};

箭头函数写法：

(参数)=>{
	return a
};

//如果有且仅有一个参数，可以省略()
参数=>{
    return a
};

//如果有且仅有一条return语句，可以省略{return}
参数=>a;


//如果返回的是带{}的json对象，简写的时候加一个()。
//原写法
function A(){
    return {a:1,b:2};
};

//简写
let A =()=>({a:1,b:2});

使用箭头函数的好处：1.方便 2.修复this

JavaScript的this指向总是让人搞混，弄不清楚到底指向谁。

看例子：

<script>
        let A = {
                a: 1,
                b: 2,
                show: function () {
                    console.log(this.a + this.b);
                }
            }
//把A的show方法赋给页面的点击事件
        document.onclick = A.show;
</script>

NaN
当我点击页面的时候出现的是NaN，并没有出现3。这是因为原本绑定A的this，现在绑定在document上了。

而箭头函数内的this是不会变的，他永远绑定在当前环境下。

看例子：

<script>
        let A = {
                a: 1,
                b: 2,
                show: ()=>{
                    console.log(this.a + this.b);
                }
            }
//把A的show方法赋给页面的点击事件
        document.onclick = A.show;
</script>

这种写法下的this永远绑定在了window上，因为json是在全局情况（即window）下声明的，所以this永远绑定在了window上。那么如何才能绑定在A上呢？这就要用到ES6的新特性class，这下面再去介绍。

4.参数展开（`...`的用法）

4.1 剩余参数

直接看例子

<script>
        function show (a,b,...arr){
            console.log(a, b,arr);
        }

        show(1,2,3,44,55,66,77,88);
</script>

输出：

在这里插入图片描述

可以看到传入的参数里面的1和2按顺序给了a和b，剩余的数都给了数组arr。

所以可以用...这种写法来收集剩余的参数，但是必须写在参数的最后。

4.2 展开数组

直接看例子

<script>
        var arr = [1,5,7,8];

        function sum(a,b,c,d){
            return a+b+c+d;
        }

        console.log(sum(arr[0],arr[1],arr[2],arr[3]))

</script>

输出的是21。好在这个数组只有4个值，那么如果有一个上万行的数组怎么办呢，不可能一个一个敲吧。现在有了更加简洁的写法

<script>
        var arr = [1,5,7,8];

        function sum(a,b,c,d){
            return a+b+c+d;
        }

        console.log(sum(...arr))

</script>

无论你多少个值...数组名就代表你数组所有的值。

再看一个例子

    <script>

        let A = [1,2,3];
        let B = [7,8,9];

        let C = [...A,...B];
        //等价于 let C = [1,2,3,7,8,9]
    </script>

5.系统对象

5.1 Array

5.1.1 map 映射

5.1.2 reduce 减少

5.1.3 forEach 遍历

5.1.4 filter 过滤

未完待续。。。。。。

坂本大大

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript ES6标准

使用ES6的好处：1.方便 2.解决了JavaScript的遗留问题1.新的变量声明方式以往使用的var的缺点: 1.可以重复声明 2.不能限制修改 3.没有块级作用域ES6新特性：增加了let和const声明方式let 声明变量const 声明常量let的用法：禁止重复声明let a = 5;let a...
复制链接

扫一扫