ES6新特性
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(); // 11CommonJS 模块输出一组数据及方法，就非常合适使用简洁写法。
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
箭头就是让你当做一个普通函数来使用,别整花里胡哨;