ES6

Posted 2020-11-30 izyk

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，由定义时决定

 

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