标签：错误代码 des inner 作用 属性 监控 改进 使用外部 项目开发
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，由定义时决定
高阶函数: 返回一个函数 或者 接受一个函数参数
标签：错误代码 des inner 作用 属性 监控 改进 使用外部 项目开发
原文地址：https://www.cnblogs.com/izyk/p/11768939.html
