ES6（一）

PANH

2019-11-03

关注关注

ES6 简介

介绍：

ES2015年推出的JavaScript 新版本也叫 ES2015

现在已经有ES7（2016）、ES8（2017）、ES9（2018）很多新增内容仍是提案

普遍使用的依然是ES6、ES7 部分内容

ES7及后面版本浏览器或 node环境未完全支持，但已有babel 工具可对其进行编译支持（转成ES6）

所以：新版本语言只是在原有基础上新增了一些语法糖，执行时还会转化成ES5

语言迭代目的：

是使JavaScript 语言可以用于编写复杂的大型应用程序，称为企业级的开发语言

为什么要学习：

ES6中引入的语言新特性，更具规范性，易读性、方便操作、简化了大型项目开发的复杂程度、降低了出错的概率，提升了开发效率

大部分公司（不代表所有，代表着一个趋势）都在用ES6开发，已成为开发、求职必回内容

babel工具本地使用

逐步剖析ES6变化之前

用Babel 工具做对比ES6 -> 低级语法

在线 Babel 工具

http://babeljs.io

（用于学习是进行对比、查询）

https://www.babeljs.cn

npm本地下载此工具（用于生产开发时必要的兼容）

ES6学习建议

考虑以前的语法哪里不足，可以如果改进当你面对新特性为什么会这样的时候，可以看看babel编译后的结果

ES6 - babel 本地学习环境搭建、

npm init -y

npm install @babel/core @babel/cli @babel-preset-env　　

@babel/core(提供核心功能) @babel-preset-env（插件集合，解析es6语法，将代码转化成es5）@babel/cli（通过命令行将代码进行编译）

.babelrc（写配置文件）

{
//预设
  "presets": [ 
     "@babel/preset-env"  //需要用到的插件     
   ]  
}

npx babel xxx.js -o xxx.js

npx babel xxx.js -o xxx.js --watch

变量声明回顾之var

　ES6变化-let&const

1. 回顾 var（变量声明）：

　　变量声明提升、可重复定义、全局变量挂载到window　　（var 定义的变量可能会覆盖 window 原有的属性，造成混乱）

2. 回顾作用域（变量生命周期）：

　　全局作用域、函数作用域

3. let（块级变量声明）：

　　没有变量声明提升、不能重复定义、不能挂载window　　

　　声明的变量和 { } 配合产生块级作用域 - 声明在大括号内部的变量无法再外部使用

　　产生临时Temporal Dead Zone（临时死区）

　　解决闭包问题（ES6规范后引入的）　

变量声明新形式之let

加强对作用域的控制

let { } => 块级作用域

临时死区

let a= 10
{
  console.log(a) // 报错 a is not defined，不能使用外部的，只能使用大括号内的
      
  let a = 20  
}

练习题

let b =10
{
  //console.log(b) 形成临时死区，报错，并且不会往下执行
  let b = 20
  {
    console.log(b)    // 块级作用域内没有let，没有形成临时死区，输出20
  }  
 
}

let _a = 10

{

console.log(_a) // 10

let a = 20

console.log(a) // 20

}　

let 解决异步问题

for (let i = 0; i < 10; i ++) {

setTimeout(function () {

　　console.log(i)

},0)

}

let 解决闭包问题

var arr = []

for (let i = 0; i < 10; i++) {

arr[i] = function () {

　　console.log(i)

}

arr[0]()

arr[4]()

arr[7]()

变量声明新形式之const

// 常量

const PI = 20

PI = 30 // 不能更改　　

const 不需要监控，let 需要实时监控什么时候更改变化

存储常量的空间里面的值不能发生改变

const PI = { }

PI.name = 20 //可以更改

PI = 20 //不能改变

console.log(a)    //undefined
{
  function a () {　　//不能这样写错误代码

  }  

}

    ||
    ||

console.log(a)    
{
 var a =function () {

  }  

}function test(x, y) {　　var x = 10 // 不报错　　let x = 10　// 报错 //说明 形参x 是用var 声明的}text()

spreed & rest

ES6变化-spreed & rest

... 展开&收集运算符：

此运算符在不同地方使用有不同的功效，可以从写和读两个角度考虑

　　写：function test( ...arg ){ }; test( 1,2,3 ); -收集作用 rest

　　读：var arg = [ 1,2,3 ]; console.log( ...arg ); -展开作用 spreed

作用：简化书写长度，提升开发效率

ES6/ES7:

ES6可以处理数组，ES7能处理对象

let arr1 = [1,2,3,4]
let arr2 = [6,7,8]
let newArr = [...arr1, ...arr2]
// [].concat(arr1, arr2)

// ES7 ...

ES7中的spreed & rest

let company = {

name: ‘kkk‘,

age: 19

}

let teachDepartment = {

leader: {

　　name: ‘cc‘,

　　age: 22

}

personNum: 25

}

// 浅克隆

let obj = {

...company,

...teachDepartment

}

let company = {

　　name: ‘kkk‘,

　　age: 19

}
leader: {

　　name: ‘cc‘,
　　age: 22
}

let teachDepartment = {

    leader: {
       ...leader
    }

　　personNum: 25

}

// 深克隆（适用于一个层级），多层级es5 JSON.parse（JSON.stringify(teachDepartment)） // 缺点有函数属性，正则，特殊对象（new Date()）会出问题


let obj = {

　　...company,
　　...teachDepartment,
    
      leader: {
         ...leader
    }
}

Object.assign:

浅层clone，可以理解成从$.extend 那里演化过来

Object.assign( {}, company, teachDepartment ) // 把后面的对象参数，复制到第一个空对象参数{}

ES6变化 - destructuring

解构（结构化赋值）：

解构过程中，具备赋值和变量声明两个功能

目的在于把等号左右长的相似的两个东西内部的值取出来

对象数组都可以参与解构：

　　let obj = { name：‘du’， age：23 }

　　let { name， age } = obj

　　　　或

　　let name，age；（{name， age} = obj）

作用：简化书写长度，提升开发效率

默认参数：

let { name，age，sex = ‘male’ } = obj

let { name: oName, age: oAge, sex = ‘male‘ } = obj

console.log(oName, oAge)

// 解构数组

let arr = [ 1,2,3 ]

let { x,y,z } = arr

console.log(x,y,z) //undefined

let { 0: x, 1: y, 2:z } = arr // 1 2 3

let { length } = arr // 3

let [x, y, z] = arr

var res = ‘{ "name": "海外 Aquman", "poster": "https://......" ,diresct:"文字的"}‘

var 0Res = JSON.parse(res)

console.log(oRes)

let (direct, gut, mainActor, screenwriter) = oRes

箭头函数

ES6变化 - 箭头函数

作用：

函数目的的指向性更强，可读性更好，简化代码。提升开发效率

箭头函数特点：

1. 不再写function 关键字

2. 只能作为函数使用不能 new，没有原型

3. 参数不能重复命名

4. 返回值可以不写return，但是有时需要配合 { }（return 配合 { }使用）

5. 内部arguments、this 由定义时外围最接近一层的非箭头函数的 arguments 和 this 决定其值

let obj = {
  a: ‘innerObj‘,
  fn () {
    let sum = () => {
       console.log(this.a)
    
   }
  return sum  
  }    
}

let outerSum = obj.fn() // this 指向obj

outerSum() // this 指向 obj， 不是window，由定义时决定

高阶函数: 返回一个函数或者接受一个函数参数

babel 变量