ES6新特性

jinghong

发布于 2020-05-09 15:28:36

9660

发布于 2020-05-09 15:28:36

文章被收录于专栏：前端开发0202

ES6

变量声明扩展

变量声明的特性比较

语法格式	声明类型	是否可重复声明	是否声明提升	特性
var	变量	YES	YES	无块级作用域、限制性太弱
let	变量	NO	NO	有块级作用域、不可重复、无声明提升、限制性强
const	常量	NO	NO	不可修改、有块级作用域、限制性强

块级作用域：

{
    let a1 = 10;
    var a2 = 20;
    const a3 = 20;
    //在括号内使用即可正常使用、由内向外、不可从外向内
    console.log(a1);//10
    console.log(a2);//20
    console.log(a3);//20
}
//或
for( ){}
if(){}else{}

//在以上带{}语法中用let、const声明时都具有块级作用域
console.log(a1);//ERROR
console.log(a2); //20
console.log(a3); //ERROR

暂时性死区：

//由于let和const 无变量提升，在声明前调用将会出错 var 会出现undefined，不会报错
//未被let、const声明的变量、执行操作反而没事，而使用了这两者未在规定的范围内使用将会直接出错。
var STR = 10;
        {

            console.log(STR)
            let STR; //去掉这句，即可正常执行
        }

解构赋值

语法格式：

左右两边类型相同、一样。
右边必须是个可使用的东西或者是容器，不一定要相同的格数
若相同可简写，注意区分
右边可设置默认值
可嵌套如：数组、对象

用法：

//解构不一定要相同
[] = [1,2,3];
[12,3] = [null,"string"];
//若相同可简写，注意区分
{m} = {m:100};
//等价于
{m:m} = {m:100};
//可默认值
{j=100,b=200}={c:300}; //输出 {j:200,b:299,c:300};

//在一些传参发面时可以使用以下这种方法
{type='GET',dataType='json'} = {}; //没传参 默认使用对应的参数
{} = {type='GET',dataType='json'};//没传对象时使用默认的对象

函数

箭头函数

可以固定this的指向
语法格式比较与ES5时有一定的改变和缩简
在特定情况可以极大缩简

语法格式：

let f1 = (a,b)=>
{

}

//特定情况:指当参数和执行语句只有一条时即可
(a=>a)(10)
let f2 = a=>a;
f2(10)

扩展运算符(参数展开)

用于函数参数、数组、对象、对多个变量操作时
参数使用时必须放在最后
可以连接数组
当连接合成时，名相同的，将被最后个替换合并
作用：当不知道有多少个参数时，可以使用像数组一样，的传入参数

语法格式：

// ...变量名
let a1 = [1,2,3,4,5];
let a2 = [3,4,5,4,5];
let a1A2 = [...a1,...a2]; // 数组连接

let o1 = {
        a:1,
        a2:3
    }
    let a1 = {
        c:3
    }
    let os = {...a1,
        ...o1
    }  //对象合并 相同的属性将被最后的替换合并

系统自带对象方法扩展

Array对象

map
forEach
filter
reduce map语法格式： //参数 Array.map((item，index)=>{}) 当前值，索引 //return 新数组 // 作用：1对1执行代码快简称映射 let arr = [1,2,3,4,5].map((item,index)=>{ return item >= 5 ; }) //[false,false,false,false,true] forEach语法格式： //参数 Array.forEach((item,index,array)=>{}) 当前值，索引，当前数组 //retrun 无 //作用：跟ES5的foreach一样都是遍历数组 let arr = [1,2,3,4,5].forEach((item,index,array)=>{ return this; }) filter语法格式： //参数Array.filter((item)=>{}) 当前值 //retrun 过滤后的数组 //作用：过滤 let arr = [1,2,3,4,5].filter((item)=>{ return this>3; //过滤条件 }) //[4,5] roduce语法格式： //参数Array.roduce((tmp,item,index)=>{}) 临时值（中间值）,当前值 ,索引 //retrun 处理后只有一个变量的数组 //作用：多对1 可以用来求平均值、某项数据 let arr = [1,2,3,4,5].roduce((tmp,item,index)=>{ return index === arr.length-1 ?(tmp+item)/arr.length : tmp+=item; })

String对象

字符串模板
startsWith
endsWith

字符串模板使用方式：

//字符串模板`${a}和${b}` 按此格式里面的变量会被识别

startsWith和endsWith 语法格式：

//参数 String.starts\ends With(str) 字符串
// return boolean
//作用：字符串检索 starts 开头 ends结尾 可以多个字符
str = "https://www.baidu.com";
str.startsWith("https://");//true
str.endsWith(".com");//true

新增数据类型

Symbol

作用：作为对象（唯一不重复）属性名、唯一的值…….等

声明语法格式：

//Symbol由Symbol函数生成，不需要new 参数：是一个描述 ，生成一模一样Symbol，其返回值不相等 可以转字符串、布尔，不能转数值
//其作用可以用来生成独一无二的属性名、函数名等
//注意：再用Symbol生成对象属性名时 属性名格式不能用 . 而是用[content]，访问Symbol的属性名必须用[];
let attr = Symbol("Arak");
let fun =Symbol();
let obj = {
    ["attr"]:1000
    ["fun"]:()=>{

    }
}；
obj['attr'] // 1000
obj.attr//undefined
//获取方式还可以用以下方法
//获取对象属性的两种方法
//Object.getOwnPropertySymbols()方法
//返回只包含Symbol类型的属性名的数组
//Object.getOwnPropertyNames()方法
//返回只包含字符串类型的属性名的数组

//Symbol.for()和Symbol.keyFor()方法
//Symbol.for()类似于单例模式，首先在全局中搜索有没有以该参数为名称的Symbol值，如果有则返回该Symbol值，否则新建并返回一个以该参数为名称的Symbol值
var symbol1 = Symbol.for('Alice');
var symbol2 = Symbol.for('Alice');
console.log(symbol1 === symbol2) // 输出：true

//Symbol.keyFor()返回一个已创建的Symbol类型值的key，实质是检测该Symbol是否已创建。
var symbol1 = Symbol.for("Alice");
console.log(Symbol.keyFor(symbol1)); // 输出："Alice"
console.log(Symbol.keyFor(symbol2)); // 输出：undefined

兼容性解决

由于ES6在一些低版本的浏览器上无法运行，需转成ES5之前的版本兼容，以下有几种方案可以自动转换

babel

使用方法：

1.导入方式

需下载babel的browser.min.js包  在官网下载即可
导入页面，然后在需转换的script标签上 加 type="text/babel" 即可自动转换

2.编译方式（推荐）

安装node.js

  进入cmd到要编译的目录 cd符号进入
  输入 npm init-y 调出node配置文件        
  输入 npm i @babel/core @babel/cli @babel/preset-env 安装babel


  package.json => scripts中添加脚本 "test":"babel js -d dest" 
                                   名 要编译的文件目录  存放文件的目录

  添加.babelrc文件——声明preset 格式为：{   "preset":["@babel/preset-env"]  }

  执行命令：nmp run test（package中scripts名设置的什么就是什么）

ES6对象

面向对象机器语言 -> 汇编 -> 低级语言(面向过程) -> 高级语言(面向对象) -> 模块 -> 框架 -> API

面向对象： 1.封装性 2.继承性 3.多态性

类

ES6类的添加可以覆盖之前构造函数传统的方式，更便捷，更系统

注意的是：以前proto只能访问不能修改，ES6后可修改指向也可访问

关于类的关键字和方法

class 类
constructor 构造函数
extends 继承
super（）替代之前借用构造函数来初始化继承的函数

class Person
{
   constructor(name,sex)
    {
        this.name = name;
        this.sex = sex;
    }
    showInfo()
    {
        console.log(this.name)
        console.log(this.sex)
        this.age ? console.log(this.age):null;

    }
}

class Student extends Person
{
    constructor(name,sex,age)
    {
        super(name,sex);
        this.age = age;
    }

}

闭包理解

首先，我们所声明的变量，都是在运行完程序后自动执行垃圾回收，如果某个变量正在使用未释放，那么这个变量的生命周期将会延长，也就达成了闭包的条件，这里的例子用了（垃圾回收）来更好的理解闭包。

GC: 垃圾回收

闭包：

1.底层：栈
2.高层：函数当作对象处理

闭包—— 只要还在用就不会被回收

for(var i=0;i<10;i++)
{
    (function(i){
        console.log(i)
    })(i)
}

局部变量i在执行完成后就删除了，但是function函数里在使用i，所以i不会被回收，循环多少次产生多少i

异步与同步

异步——多个操作可以一起进行，互不干扰同步——操作一个个进行

Promise

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

https://blog.csdn.net/qq_34645412/article/details/81170576

function rePromise()
{
    let p = new Promise((reslove,reject)=>{  //resolve是对promise成功时候的回调 reject则是失败

        return p; //返回Promise对象
    })
}
/**reject的用法
以上是对promise的resolve用法进行了解释，相当于resolve是对promise成功时候的回调，它把promise的状态修改为

fullfiled，那么，reject就是失败的时候的回调，他把promise的状态修改为rejected，这样我们在then中就能捕捉到，然后执行“失败”情况的回调。
rePromise()**/
    .then(data=>{    //then同样有对成功失败时的反应

},(reject,data)=>{

})
    .then(data=>{

})
    .then(data=>{

})
    .then(data=>{

})

Promise.all([
   //异步方法 
]).then((data)=>{

});
//all接受一组数组，里面一般装异步函数代码快，
//随机数案例 满足条件则继续向下执行，失败则停止或执行失败专有的线路
//只有all里面的所有方法执行成功后，才会继续执行then参数中的resolve，一当里面一个方法错误，那将会执行参数中的reject
function promiseClick(){
        let p = new Promise(function(resolve, reject){
            setTimeout(function(){
                var num = Math.ceil(Math.random()*20); //生成1-10的随机数
                console.log('随机数生成的值：',num)
                if(num<=10){
                    resolve(num);
                }
                else{
                    reject('数字太于10了即将执行失败回调');
                }
            }, 2000);
           })
           return p
       }

    promiseClick().then(
        function(data){
            console.log('resolved成功回调');
            console.log('成功回调接受的值：',data);
        }, 
        function(reason, data){
            console.log('rejected失败回调');
            console.log('失败执行回调抛出失败原因：',reason);
        }
    );

随机数案例结果图：

async/await

async 异步

await 同步

两者结合即可以同步的方式执行异步操作

//这种情况一般用在需要上一步返回的数据来继续执行下面的操作
//语法格式：
async function
//await只能在有async装饰下才能使用
let a = await "loding";

/*
自动将常规函数转换成Promise，返回值也是一个Promise对象

只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数

异步函数内部可以使用await

*/

第6章 ES6语法及JS语言的其他特性

6.0 ECMAScript的变迁

ECMAScript 1.0（1997年）

ECMAScript 2.0（1998年）

ECMAScript 3.0（1999年12月）

ECMAScript 4.0 (太激进,夭折了)

ECMAScript 5.0 (2009)

ECMAScript 6.0 (2015)

3.0版是一个巨大的成功，在业界得到广泛支持，成为通行标准，奠定了JavaScript语言的基本语法，以后的版本完全继承。直到今天，初学者一开始学习JavaScript，其实就是在学3.0版的语法。 5.0版和3.0版区别不大。

随着JS的崛起,应用于移动开发,后端开发,游戏开发等,业界对JS的语言的要求越来越高. 此时再看4.0时提出的设想,已经不显得激进了.于是,6.0版本终于通过了.

此标准严格的叫法应是ECMAScript2015,当然叫ES6也没啥,没人和你抬杠.

ESMAScript 与 JavaScript 两者的关系, 就如同 快捷宾馆营业标准 和 如家酒店 一样.

浏览器支持情况

http://kangax.github.io/compat-table/es6/

6.1 变量的声明

6.1.1 let 块级证明

ES6 新增了let命令，用来声明变量。

它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

看下例:

var a = 3;
let b = 4;
console.log(a , b); // 相同的效果

再看下例:

{
  let c = 'hello';
  var b = 'world';
}

console.log(c) //ReferenceError: c is not defined
console.log(d) // world

可以看出: let命令在定义的{}内生效,某些语言也有类似特点，我们将其称为”块级作用域”.

这样,let定义的变量,只在块内生效,不影响其他区域,所以我们说Ta更 “清洁”.

在某些场合下,用let特别适合,比如for()循环

// 设置i仅为循环数组,但循环后,残留一个变量i.
var arr = ['a' , 'b' , 'c'];
for(var i=0; i<arr.length; i++) {
}
console.log(i); // 3

换成let再试一下,是不是更清洁?

// i变量只在for()内有效,不污染其他区域
var arr = ['a' , 'b' , 'c'];
for(let i=0; i<arr.length; i++) {
}
console.log(i); // ReferenceError: i is not defined

不污染全局的window属性

var c = 'hello';
let d = 'world';

window.d; //undefined
window.c; //hello

注:同域下,var ,let 声明同一变量名,error

let 申明的变量不存在变量提升 let 申明的变量不允许重复声明 let 申明的变量存在块级作用域

6.1.2 const 常量

常量并不稀奇 (话外音：都21世纪了，你咋现在才有?) PHP,Java,C,C++ …多数语言都有常量.

const 声明一个只读的常量。一旦声明，常量的值就不能改变。

常量,即不可改变其值的量.

const PI = 3.14;
console.log(PI);

// 一旦声明值不可修改
PI = 3.15; // TypeError: Assignment to constant variable.
// 不可重复声明
const PI = 3.15; // Identifier 'PI' has already been declare

// 因为声明后值不能修改，所以声明必须赋值
const c ;// Missing initializer in const declaration

注:常量名和变量名,都区分大小写

const STU = {name:'lucy' , age : 22};
console.log(STU); // { name: 'lucy', age: 22 }
STU.name = 'lily';
console.log(STU); // { name: 'lily', age: 22 }

注：常量不可改变的是其引用地址；

6.2 模板字符

ES6用反引号 ( ` ) 包住字符串,可以让字符串多行书写,也可以自由的嵌入变量.

function t() {
    return 'world';
}

var obj = {name:'李四'}

let str = `hello${obj.name} ${t()} , ${7 + 9} , ${'ok'},
这是个换行
`;
console.log(str);

// hello李四 world , 16 , ok,
// 这是个换行

6.3 变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

字符串解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

6.3.1 数组的解构赋值

以前，为变量赋值，只能直接指定值。

var a = 1;
var b = 2;
var c = 3;
//ES6允许写成下面这样。
let [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

6.3.2 对象的解构赋值

解构不仅可以用于数组，还可以用于对象。

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

let { name } = { foo: "aaa", bar: "bbb" };
name // undefined

上面代码的第一个例子，等号左边的两个变量的次序，与等号右边两个同名属性的次序不一致，但是对取值完全没有影响。第二个例子的变量没有对应的同名属性，导致取不到值，最后等于undefined。

6.4 对象的扩展

6.4.1 属性的简洁表示法

ES6 允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

上面代码表明，ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。

6.4.2 方法的简洁表示法

除了属性简写，方法也可以简写。

function fun (){
    console.log(this.a + this.b);
}

var obj = {
    a:1,
    fun:fun,
    b:2,
};
obj.fun(); // 3
// 等同于
var obj = {
    a:3,
    fun,
    b:4,
};
obj.fun(); // 7
// 等同于
var obj = {
    a:5,
    fun(){console.log(this.a + this.b);},
    b:6,
};
obj.fun(); // 11

CommonJS 模块输出一组数据及方法，就非常合适使用简洁写法。

function getItem() {
}

function setItem() {
}

function clear() {
}

module.exports = { getItem, setItem, clear };
// 等同于
module.exports = {
    getItem: getItem,
    setItem: setItem,
    clear: clear
};

6.5 Promise 异步控制对象

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Using_promises

6.5.1为什么要使用 Promise

以读取文件内容为例：

无法保证顺序的代码

var fs = require('fs')

fs.readFile('./data/a.txt', 'utf8', function (err, data) {
  if (err) {
    // return console.log('读取失败')
    // 抛出异常
    //    1. 阻止程序的执行
    //    2. 把错误消息打印到控制台
    throw err
  }
  console.log(data)
})

fs.readFile('./data/b.txt', 'utf8', function (err, data) {
  if (err) {
    // return console.log('读取失败')
    // 抛出异常
    //    1. 阻止程序的执行
    //    2. 把错误消息打印到控制台
    throw err
  }
  console.log(data)
})

fs.readFile('./data/c.txt', 'utf8', function (err, data) {
  if (err) {
    // return console.log('读取失败')
    // 抛出异常
    //    1. 阻止程序的执行
    //    2. 把错误消息打印到控制台
    throw err
  }
  console.log(data)
})

通过回调嵌套的方式来保证顺序：

var fs = require('fs')

fs.readFile('./data/a.txt', 'utf8', function (err, data) {
  if (err) {
    // return console.log('读取失败')
    // 抛出异常
    //    1. 阻止程序的执行
    //    2. 把错误消息打印到控制台
    throw err
  }
  console.log(data)
  fs.readFile('./data/b.txt', 'utf8', function (err, data) {
    if (err) {
      // return console.log('读取失败')
      // 抛出异常
      //    1. 阻止程序的执行
      //    2. 把错误消息打印到控制台
      throw err
    }
    console.log(data)
    fs.readFile('./data/c.txt', 'utf8', function (err, data) {
      if (err) {
        // return console.log('读取失败')
        // 抛出异常
        //    1. 阻止程序的执行
        //    2. 把错误消息打印到控制台
        throw err
      }
      console.log(data)
    })
  })
})

多层使用回调函数，就会进入 “回调地狱“

为了解决以上编码方式带来的问题（回调地狱嵌套），所以在 EcmaScript 6 中新增了一个 API：Promise。

6.5.2 Promise 的使用

var fs = require('fs')

// 在 EcmaScript 6 中新增了一个 API Promise
// Promise 是一个构造函数

// 创建 Promise 容器
// 1. 给别人一个承诺 I promise you.
//    Promise 容器一旦创建，就开始执行里面的代码
var p1 = new Promise(function (resolve, reject) {
  // console.log(2)
  fs.readFile('./data/aa.txt', 'utf8', function (err, data) {
    if (err) {
      // 失败了，承诺容器中的任务失败了
      // console.log(err)
      // 把容器的 Pending 状态变为 Rejected

      // 调用 reject 就相当于调用了 then 方法的第二个参数函数
      reject(err)
    } else {
      // console.log(3)
      // 承诺容器中的任务成功了
      // console.log(data)
      // 把容器的 Pending 状态改为成功 Resolved
      // 也就是说这里调用的 resolve 方法实际上就是 then 方法传递的那个 function
      resolve(data)
    }
  })
})

// console.log(4)

// p1 就是那个承若
// 当 p1 成功了 然后(then) 做指定的操作
// then 方法接收的 function 就是容器中的 resolve 函数
p1
  .then(function (data) {
    console.log(data)
  }, function (err) {
    console.log('读取文件失败了', err)
  })

封装 Promise 版本的 readFile:

var fs = require('fs')

function pReadFile(filePath) {
  return new Promise(function (resolve, reject) {
    fs.readFile(filePath, 'utf8', function (err, data) {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}

pReadFile('./data/a.txt')
  .then(function (data) {
    console.log(data)
    return pReadFile('./data/b.txt')
  })
  .then(function (data) {
    console.log(data)
    return pReadFile('./data/c.txt')
  })
  .then(function (data) {
    console.log(data)
  })

6.6 箭头函数

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

ES6 允许使用“箭头”（=>）定义函数。

箭头函数表达式的语法比 函数表达式 更短，并且没有自己的 this，arguments。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。

var fun1 = function(str1,str2){
    return (str1 + str2);
}
// ↓ 

var fun2 = (str1,str2)=>{
    return (str1 + str2);
}
// ↓ 

var fun3 = (str1,str2) => str1 + str2;


console.log(fun1(1,2)); // 3
console.log(fun2(2,3)); // 5
console.log(fun1(4,5)); // 9

如果参数只有一个，可以将()省略 // arr.map(c=>c+1); 如果没有参数，则一定能要写上() // ()=> console.log(‘a’) 如果多于一个参数，每个参数之间用逗号分隔 (x, y) => { … } 如果方法体只有一句代码，可以省略{} 和分号，如果有返回可以省略return 如果方法体多于一句代码，则不能省略{} ,每句代码使用分号分隔

注意：

a. 箭头函数没有自己的this，函数体内部写的this，指向的是外层代码块的this b. 箭头函数内部的this是定义时所在的对象，而不是使用时所在的对象并且不会改变 c. 箭头箭头函数不能用作构造函数 d. 箭头函数内部不存在arguments，箭头函数体中使用的arguments其实指向的是外层函数的arguments

箭头就是让你当做一个普通函数来使用,别整花里胡哨;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019-08-27，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

node.js

ecmascript

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

ES6新特性

ES6新特性

ES6

变量声明扩展

变量声明的特性比较

块级作用域：

暂时性死区：

解构赋值

函数

箭头函数

扩展运算符(参数展开)

系统自带对象方法扩展

Array对象

String对象

新增数据类型

Symbol

兼容性解决

babel

ES6对象

类

闭包理解

GC: 垃圾回收

闭包：

异步与同步

Promise

async/await

第6章 ES6语法及JS语言的其他特性

6.0 ECMAScript的变迁

6.1 变量的声明

6.1.1 let 块级证明

6.1.2 const 常量

6.2 模板字符

6.3 变量的解构赋值

6.3.1 数组的解构赋值

6.3.2 对象的解构赋值

6.4 对象的扩展

6.4.1 属性的简洁表示法

6.4.2 方法的简洁表示法

6.5 Promise 异步控制对象

6.5.1为什么要使用 Promise

6.5.2 Promise 的使用

6.6 箭头函数

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐