ES6(一)

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

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

相关推荐