前端知识学习-ES6

最新推荐文章于 2020-12-14 21:56:28 发布

四川码匠

最新推荐文章于 2020-12-14 21:56:28 发布

阅读量276

点赞数 1

本文链接：https://blog.csdn.net/qq_27922023/article/details/79044742

版权

本文详细介绍了ES6的关键特性，包括let和const的区别、解构赋值、模板字符串、箭头函数、Promise对象、Symbol属性、Generator函数、Set和Map数据结构，以及数组的扩展操作。通过实例解析，帮助读者深入掌握ES6在前端开发中的应用。

摘要由CSDN通过智能技术生成

ES6相关知识学习

1. let和const关键字

1.1 let关键字

作用：与var类似，用于声明一个变量
特点在块作用域内有效，不能重复声明，不会预处理，不存在变量提升
应用：循环遍历加监听

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <script type="text/javascript">
        let name = 'zhangsan';
        let btns = document.getElementsByTagName('button');
        for(let i = 0; i<btns.length;i++){
            let btn = btns[i];
            btn.onclick = function(){
                console.log(i);
            }
        }
    </script>
</body>

1.2 const关键字

作用：定义一个常量。
特点：不能被修改，其他特点和let一样，用于保存不变的数据。

const KEY = "Hello";

2. 变量的解构赋值

从对象或数组中提取数据，并赋值给变量（多个）。
对象的解构赋值： let {n,a} = {n:’tom’,a: 12};
数组的解构赋值： let{a,b} = {1,’zhangsan’};
变量的解构赋值多用于给多个形参赋值。

 <script type="text/javascript">
    let obj = {name: 'zhangsan',age: 52};
    //let {name} = obj;//对象的结构赋值,只取一个属性值
    //console.log(name);
    let {name,age} = obj;//对象的结构赋值
    console.log(name,age);
    let arr = [1,3,8,'zhangsan',true];
    //let [a,b] = arr;//a,b可以随便写，代表获取数组中下标为0和1的值。
    let [,,a,b] = arr//代表获取下标为2和3的值
    console.log(a,b)
    //不采用解构赋值
    function test1(obj){
        console.log(obj.name+"===>"+obj.age);
    }
    //给多个形参赋值，采用解构赋值
    function test2({name,age}){
        console.log(obj.name+"===>"+obj.age);
    }
    test1(obj);
    test2(obj);
</script>

3. 模板字符串

简化字符串的拼接，模板字符串必须使用“包含，注意这个符号不是单引号，是tab键上面的那个键，变化的部分采用${xxx}来定义。

 <script type="text/javascript">
   //普通的字符串拼接
    let obj = {name: 'zhangsan', age: 56,sex: '男'};
    let str = '我的名字是'+obj.name+',性别：'+obj.sex+',我今年'+obj.age+'岁。'
    console.log(str)
    //使用模板字符串
    let str1 = `我的名字是${obj.name},性别：${obj.sex},我今年${obj.age}岁。`
    console.log(str1);
</script>

4. 对象的简写方式

省略同名的属性值，省略方法的function，

 <script type="text/javascript">
    //普通的写法，对象中的属性值和属性名称一样
    let name = 'zhangsan';
    let age = 56;
    let obj = {
        name:name,
        age: age,
        getName:function(){
            return this.name;
        }
    }
    console.log(obj);
    console.log(obj.getName());
    //ES6的对象简写方式写法
    let username = '张三';
    let userage = 56;
    let obj1 = {
        username,//同名的属性可以省略不写
        userage,//同名的属性可以省略不写
        getName(){//可以省略函数的function
            return this.username;
        }
    }
    console.log(obj1)
    console.log(obj1.getName());
</script>

5. 箭头函数

箭头函数没有自己的this,箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this。
箭头函数的this看外层是否有函数，如果有，外层函数的this就是内部箭头函数的 this，没有则this是window。

<body>
    <button id="btn1">测试按钮1</button>
    <button id="btn2">测试按钮1</button>
    <script type="text/javascript">
        let test1 = function(){
            console.log('我是普通函数');
        }
        let test2 = () => console.log('我是箭头函数')
        test2();
        //形参情况
        //1.没有形参的情况下
        let test3 = () => console.log('我是没有形参的箭头函数');
        test3();
        //2.只有一个形参的情况下,可以省略()
        let test4 = (a) =>  console.log('我是有一个形参的箭头函数'+a);
        let test5 = a =>  console.log('我是有一个形参的箭头函数'+a);
        test4('zhangsan');
        test5('zhangsan');
        //3.两个或者两个以上的形参
        let test6 = (x,y) => console.log('我是有两个参数的箭头函数'+x+"==="+y);
        test6(45,85);
        //函数体的情况
        //1.函数体只有一条语句或者表达式的时候，可以省略大括号,会自动返回执行结果。
        let test7 = (x,y) => x+y;
        console.log(test7(54,54));//打印结果为108
        //2.函数体不止一条语句或者函数体的情况，不可以省略大括号
        let test8 = (x,y) =>{
            console.log(x,y);
            return x+y;
        }
        console.log(test8(54,54));
        //箭头函数的this,结果为obj
        let btn1 = document.getElementById('btn1');
        let obj = {
            name:'箭头函数',
            getName(){
                btn1.onclick =() =>{
                    console.log(this)
                }
            }
        }
        obj.getName();
        //箭头函数的外面还是箭头函数，this就是window
        let btn2 = document.getElementById('btn2');
        let obj1 = {
            name:'箭头函数',
            getName:()=>{
                btn2.onclick =() =>{
                    console.log(this)
                }
            }
        }
        obj1.getName();
    </script>
</body>

6. 三点运算符

 <script type="text/javascript">
    //...运算符只能放在最后，前面可以使用占位符。
    function test (a,...value){
        console.log(a)//输出结果为2
        console.log(value);
        value.forEach(function(item,index){
            console.log(item,index);
        })

    }
    test(2,54,87,76)
    let arr = [1,6];
    let arr2 = [2,3,4,5];
    arr = [1,...arr2,6];
    console.log(arr);
    console.log(...arr);//直接遍历arr数组，拿到值。
</script>

输出结果为：

7. 形参默认值

<script type="text/javascript">
   //定义一个点的坐标的构造函数
    function Point(x = 0,y = 5){//使用形参默认值
        this.x = x;
        this.y = y;
    }
    let point = new Point(23,35);
    console.log(point);
    let point1 = new Point();//new一个构造函数的时候，如果没有传参数，就使用形参默认值
    console.log(point1);
</script>

输出结果为;

8. promise对象原理

Promise对象，代表了未来某个将要发生的事件（通常是一个异步操作）；
有了Promise对象。我们可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数，在ES6中，Promise是一个构造函数，用来生成promise实例。

8.1 使用步骤：

 <script type="text/javascript">
   //创建promise对象
    let promise = new Promise((resolve,reject) =>{
        //初始化promise的状态为pending初始化状态
       console.log('1111')
        //执行异步操作，通常是发送AJAX请求，或者开启定时器
        setTimeout(()=>{
            console.log('3333');
            //根据异步任务的返回结果去修改promise的状态
            //异步任务执行成功,
            //通常异步操作得到的数据是在回调函数中操作，就涉及到如何把数据传到回调函数中，使用形参注入的方式
            resolve('成功的数据');//自动修改promise的状态为fullfilled状态，就会调用成功的回调函数
            //reject();//自动修改promise的状态为reject状态
        },2000)
   })
    console.log('222');
    promise
            .then((data)=>{//成功的回调函数
                console.log('成功的回调函数被调用！！',data)
            },(error)=>{//失败的成功回调函数
                console.log('失败的回调函数被调用！！')
            })
</script>

8.2 promise的三种状态

pending:初始化状态，fullfilled:成功状态，rejected:失败状态

9. Symbol属性

ES6中添加一种原始的数据类型symbol（已经存在的原始数据类型有：string，number，boolean,null,underfined,对象）
symbol属性值对应的值是唯一的，解决了命名冲突的问题。
symbol值不能与其他数据进行计算，包括字符串拼接。
for in,for of遍历时不会遍历symbol属性。

Symb

最低0.47元/天解锁文章

四川码匠

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端知识学习-ES6

ES6相关知识学习1. let和const关键字1.1 let关键字作用：与var类似，用于声明一个变量特点在块作用域内有效，不能重复声明，不会预处理，不存在变量提升应用：循环遍历加监听按钮1 按钮2 按钮3 let name = 'zhangsan'; let btns = document.g
复制链接

扫一扫