ES6（ECMA2015）、let、const、变量解构赋值、模板字符串

最新推荐文章于 2022-08-16 17:05:23 发布

李不烦

最新推荐文章于 2022-08-16 17:05:23 发布

阅读量221

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/99096841

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

一、let 关键字

1. 作用:
  * 与var类似, 用于声明一个变量
2. 特点:
  * 在块作用域内有效
  * 不能重复声明
  * 不会预处理, 不存在变量提升
3. 应用:
  * 循环遍历加监听
  * 使用let取代var是趋势

<script type="text/javascript">

  {
    var a=10;
    let b=20; //在块作用域内有效
    console.log(b)// 20
  }
  console.log(a);//10
  console.log(b);// b is not defined ;在全局内看不到在块作用域内用let关键字定义的变量
</script>

<script type="text/javascript">    
    let age = 12;
    let age = 13;//不能重复声明
</script>

  console.log(age);// age is not defined 报错
    let age = 12;
    console.log(sex);//undefined
    var sex="男"

应用：（此http://es6.ruanyifeng.com/网站对应用的解释很不错）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01_let关键字</title>
</head>
<body>

<button>测试1</button>
<br>
<button>测试2</button>
<br>
<button>测试3</button>
<br>

<script type="text/javascript">

    console.log(age);
    let btns = document.getElementsByTagName('button');
    for(let i = 0;i<btns.length;i++){
            btns[i].onclick = function () {
                alert(i);// 0 1 2 
            }
    }

</script>
</body>

二、const 关键字

1. 作用:
  * 定义一个常量
2. 特点:
  * 不能修改
  * 其它特点同let
3. 应用:
  * 保存不用改变的数据

    const sex = '男';
    console.log(sex);
    sex = '女';//直接保存 不能修改
    console.log(sex);

三、数组、对象的解构赋值

1. 理解:
  * 从对象或数组中提取数据, 并赋值给变量(多个)
2. 对象的解构赋值
  let {n, a} = {n:'tom', a:12}
3. 数组的解构赋值
  let [a,b] = [1, '李不烦'];
4. 用途
  * 给多个形参赋值

四、模板字符串

1. 模板字符串 : 简化字符串的拼接
  * 模板字符串必须用 `` 包含
  * 变化的部分使用${xxx}定义

<script type="text/javascript">
    let obj = {
        name : 'anverson',
        age : 41
    };
    console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age);

    console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`);
</script>

五、简化对象

        let x=3
        let y=5

// es5写法
        let point={
            x:x,
            y:y,
            getPoint:function () {
                return this.x
            }
        }
        console.log(point,point.x)//{x: 3, y: 5, getPoint: ƒ} 3

// es6 
        let p={
            x,// 属性和属性值都用x表示，x在全局中被定义，若没定义，报错：x is not defined
            y,
            getPoint(){
//方法不用function关键字
                return x
            }
        }
        console.log(p,p.x)//{x: 3, y: 5, getPoint: ƒ} 3

六、箭头函数

* 作用: 定义匿名函数
* 基本语法:
  * 没有参数: () => console.log('xxxx')
  * 一个参数: i => i+2
  * 大于一个参数: (i,j) => i+j
  * 函数体不用大括号: 默认返回结果
  * 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
* 使用场景: 多用来定义回调函数

* 箭头函数的特点：
    1、简洁
    2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this
   3、扩展理解： 箭头函数的this看外层的是否有函数，
        如果有，外层函数的this就是内部箭头函数的this，
        如果没有，则this是window。

     function fn() {
            console.log("我是fn 输出")
        }
        fn()//我是fn 输出

        // 函数没有形参，且方法体只有一条语句
        let fn2=()=>console.log("我是fn2 输出")
        fn2() //我是fn2 输出

        // 函数有一个形参，且方法体只有一条语句
        let fn3=(a)=>console.log(a)
        fn3(6)//6
        let fn33=a=>console.log(a)//只有一个形参，括号可以省略
        fn33(6)//6

        //一个以上形参
        let fn4=(a,b)=>a+b
        console.log(fn4(5, 5));//10 ;只有一句函数体 默认返回

        // 一个以上形参，函数体有多条语句
        let fn5=(a,b)=>{
            let i=10
            return a+b+i //函数体有多条语句,需要手动返回
        }
        console.log(fn5(3, 5));//18

    setTimeout(()=> {
        console.log(this)//window 对象
    },1000)

    let per={
        age:18,
        method:function () {
            setTimeout(()=> {
                console.log(this)// per对象 ；箭头函数没有this,向上找，在method作用域中，谁调用this就是谁，per调用method（）方法，所以method作用域中的this就是per对象，从而箭头函数的this也是per对象
                this.sex="男"
            },1000)
        }
    }

    per.method()

七、点点点（...)运算符

用途
1. rest(可变)参数
    * 用来取代arguments 但比arguments灵活,只能是最后部分形参参数
  function add(...values) {
    let sum = 0;
    for(value of values) {
      sum += value;
    }
    return sum;
  }
2. 运算符
  let arr1 = [1,3,5];
  let arr2 = [2,...arr1,6];
  arr2.push(...arr1);

 function fn(...values) {
            console.log(values instanceof Array)//true
            let val=0;
            values.forEach(function (item) {
                val+=item
            })
            return val
        }

        console.log(fn(1, 2, 3));//6

 function fn(a,...values) {
            console.log(values instanceof Array)//true
            let val=0;
            values.forEach(function (item) {
                val+=item
            })
            return val
        }

        console.log(fn(1, 2, 3));//5

       let arr=[3, 4, 5]
       let arr2=[1, 2,...arr, 6]

        console.log(arr2)//(6) [1, 2, 3, 4, 5, 6]

    let arr=[3, 4, 5]
       let arr2=[1, 2, 6]
        arr2.push(arr)
        console.log(arr2)//(4) [1, 2, 6, Array(3)]；数组长度4，索引下标3 对应的值是数组arr

八、默认形参

形参的默认值----当不传入参数的时候默认使用形参里的默认值
    function Point(x = 1,y = 2) {
    this.x = x;
    this.y = y;
    }

    function point(x,y) {
            this.x=x,
            this.y=y
        }
        let p=new point()
        console.log(p);//point {x: undefined, y: undefined}


        function point2(x=0,y=0) {
            this.x=x,
            this.y=y
        }
        let p2=new point2()
        console.log(p2);//point2 {x: 0, y: 0}

九、Promise对象

1. 理解:
  * Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
  * 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
  * ES6的Promise是一个构造函数, 用来生成promise实例
2. 使用promise基本步骤(2步):
  * 创建promise对象
    let promise = new Promise((resolve, reject) => {
        //初始化promise状态为 pending
      //执行异步操作
      if(异步操作成功) {
        resolve(value);//修改promise的状态为fullfilled
      } else {
        reject(errMsg);//修改promise的状态为rejected
      }
    })
  * 调用promise的then()
    promise.then(function(
      result => console.log(result),
      errorMsg => alert(errorMsg)
    ))
3. promise对象的3个状态
  * pending: 初始化状态
  * fullfilled: 成功状态
  * rejected: 失败状态
4. 应用:
  * 使用promise实现超时处理

  * 使用promise封装处理ajax请求
    let request = new XMLHttpRequest();
    request.onreadystatechange = function () {
    }
    request.responseType = 'json';
    request.open("GET", url);
    request.send();

  // 创建promise 对象，执行参数函数   初始化状态为pending  内部启动异步任务
    // 执行then    指定一个成功的回调函数  和 一个失败的回调函数
    // 一会内部异步任务执行完毕  可能成功  调用 resolve ---> 修改状态 fullfiilled  可能失败  调用reject ----> 修改状态rejected
   // 如果执行resolve 成功回调函数自动调用
   // 如果执行reject  失败回调函数自动调用

<script type="text/javascript">

    //创建一个promise实例对象
    let promise = new Promise((resolve, reject) => {
        //初始化promise的状态为pending---->初始化状态
        console.log('1111');//同步执行
        //启动异步任务
        setTimeout(function () {
            console.log('3333');
            //resolve('baidu.com');//修改promise的状态pending---->fullfilled（成功状态）
            reject('xxxx');//修改promise的状态pending----->rejected(失败状态)
        },1000)
    });
    promise.then((data) => {
        console.log('成功了。。。' + data);
    }, (error) => {
        console.log('失败了' + error);
    });
    console.log('2222');


    //定义一个请求news的方法
    function getNews(url) {
        //创建一个promise对象
        let promise = new Promise((resolve, reject) => {
            //初始化promise状态为pending
            //启动异步任务
            let request = new XMLHttpRequest();
            request.onreadystatechange = function () {

                if(request.readyState === 4){
                    if(request.status === 200){
                        let news = request.response;
                        resolve(news);
                    }else{
                        reject('请求失败了。。。');
                    }
                }
            };
            request.responseType = 'json';//设置返回的数据类型
            request.open("GET", url);//规定请求的方法，创建链接
            request.send();//发送
        })
        return promise;
    }

    getNews('http://localhost:3000/news?id=2')
            .then((news) => {
                console.log(news);
                document.write(JSON.stringify(news));
                console.log('http://localhost:3000' + news.commentsUrl);
                return getNews('http://localhost:3000' + news.commentsUrl);
            }, (error) => {
                alert(error);
            })
            .then((comments) => {
                console.log(comments);
                document.write('<br><br><br><br><br>' + JSON.stringify(comments));
            }, (error) => {
                alert(error);
            })
</script>

十、class

1. 通过class定义类/实现类的继承
2. 在类中通过constructor定义构造方法
3. 通过new来创建类的实例
4. 通过extends来实现类的继承
5. 通过super调用父类的构造方法
6. 重写从父类中继承的一般方法

<script type="text/javascript">
    class Person {
        //调用类的构造方法
        constructor(name, age){
            this.name = name;
            this.age = age;

        }
        //定义一般的方法
        showName(){
            console.log(this.name, this.age);
        }
    }
    let person = new Person('kobe', 39);
    console.log(person);
    person.showName() //kobe 39

    //定义一个子类
    class StrPerson extends Person{
        constructor(name, age, salary){
            super(name, age);//调用父类的构造方法 拥有父类的属性
            this.salary = salary;
        }

        showName(){//重写父类的方法 ，在子类自身定义方法
            console.log(this.name, this.age, this.salary);
        }
    }
    let str = new StrPerson('weide', 38, 1000000000);
    console.log(str);//StrPerson
    str.showName();//weide 38 1000000000
</script>

学习es6的一个网址：http://es6.ruanyifeng.com/