常用es6总结

613 阅读4分钟

1.var let const

var

(1). 在js中  通常使用 var会发生变量提升,即脚本开始运行时,变量已经存在了,但是没有值,所以会输出undefined。

let

  而let不会发生变量提升,这表示在声明它之前,变量是不存在的,这时如果用到它,就会抛出一个错误。

(2).var 是函数级作用域,let是块级作用域{}:

(3) let不允许在相同作用域内,重复声明同一个变量

const

(4) const声明一个只读的常量 一旦声明,常量的值就不能改变

(5) const命令声明的常量也是不提升,只能在声明的位置后面使用

(6) const声明的常量,也与let一样不可重复声明

2.字符串模板

用一对反引号(模板字符串)标识 ,它可以当普通字符串使用('普通字符串'),也可以用来定义多行字符串 ,在模板字符串中可以嵌入变量 ,js表达式或函数等 ,变量,js表达式或函数需要写在${}中

3.变量的解构赋值

Es6允许按照一定的模式 ,从数组和对象中提取值 ,对变量进行赋值 ,这被称作解构赋值 ,意思就是把 某个对象中的属性,当作变量,给解放出来,这样,今后就能够当作变量直接使用了;

数组

数组中的会自动解析到对应接收该值的变量中 ,数组的解构赋值要一一对应 ,否则就是undefined

对象

对象的与数组不同的是 ,对象不需要一一对应 ,但是变量必须和属性同名(不同名要把属性名赋值给变量 username:name) ,才能取到正确的值。

4.箭头函数

在es6中 ,提供了函数的简洁写法 ,我们称之为箭头函数 ,箭头函数,本质上就是一个匿名函数 ,箭头函数的特性: 箭头函数内部的 this, 永远和 箭头函数外部的 this 保持一致 ,例如this:

简写方法有三种变体

  • 变体1:如果箭头函数,左侧的形参列表中,只有一个参数,则,左侧小括号可以省略;
  • 变体2:如果右侧函数体中,只有一行代码,则,右侧的{ }可以省略;
  • 变体3:如果箭头函数左侧 只有一个 形参,而且右侧只有一行代码,则 两边的()和{}都可以省略注

注意: 如果我们省略了 右侧函数体的{ },那么,默认会把 右侧函数体中代码的执行结果,当作箭头函数的调用结果 return 出去;

5.Promise (www.cnblogs.com/qianguyihao…)

异步

JavaScript的执行环境是单线程

所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务。这个任务可称为主线程。

异步模式可以一起执行多个任务

常见的异步模式有以下几种:

  • 定时器

  • 接口调用

  • 事件函数

接口调用的方式

js 中常见的接口调用方式,有以下几种:

  • 原生ajax
  • 基于jQuery的ajax
  • Fetch
  • Promise
  • axios

Promise的优点

Promise是异步编程的一种解决方案

可以很好地解决回调地狱的问题(避免了层层嵌套的回调函数)。

Promise的基本用法

Promise 的常用API:实例方法【重要】

Promise 自带的API提供了如下实例方法

  • promise.then():获取异步任务的正常结果。

  • promise.catch():获取异步任务的异常结果。

  • promise.finaly():异步任务无论成功与否,都会执行。

代码举例:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script>
            function queryData() {
                return new Promise((resolve, reject) => {
                    setTimeout(function() {
                        var data = { retCode: 0, msg: 'qianguyihao' }; // 接口返回的数据
                        if (data.retCode == 0) {
                            // 接口请求成功时调用
                            resolve(data);
                        } else {
                            // 接口请求失败时调用
                            reject({ retCode: -1, msg: 'network error' });
                        }
                    }, 100);
                });
            }

            queryData()
                .then(data => {
                    // 从 resolve 获取正常结果
                    console.log('接口请求成功时,走这里');
                    console.log(data);
                })
                .catch(data => {
                    // 从 reject 获取异常结果
                    console.log('接口请求失败时,走这里');
                    console.log(data);
                })
                .finally(() => {
                    console.log('无论接口请求成功与否,都会走这里');
                });
        </script>
    </body>
</html>

Promise 的常用API:对象方法【重要】

Promise 自带的API提供了如下对象方法

  • Promise.all():并发处理多个异步任务,所有任务都执行成功,才能得到结果。

  • Promise.race(): 并发处理多个异步任务,只要有一个任务执行成功,就能得到结果。

代码举例:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <script type="text/javascript">
            /*
              封装 Promise 接口调用
            */
            function queryData(url) {
                return new Promise((resolve, reject) => {
                    var xhr = new XMLHttpRequest();
                    xhr.onreadystatechange = function() {
                        if (xhr.readyState != 4) return;
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            // 处理正常结果
                            resolve(xhr.responseText);
                        } else {
                            // 处理异常结果
                            reject('服务器错误');
                        }
                    };
                    xhr.open('get', url);
                    xhr.send(null);
                });
            }

            var promise1 = queryData('http://localhost:3000/a1');
            var promise2 = queryData('http://localhost:3000/a2');
            var promise3 = queryData('http://localhost:3000/a3');
            
            Promise.all([promise1, promise2, promise3]).then(result => {
                console.log(result);
            });

            Promise.race([promise1, promise2, promise3]).then(result => {
                console.log(result);
            });
            
        </script>
    </body>
</html>