ES6总结
ES6新特性
let const
let 表示申明变量。const 表示申明常量。
- 常量定义了就不能改了。对象除外,因为对象指向的地址没变。
- const在申明是必须被赋值。
- 两者都为块级作用域。
块级作用域与函数作用域。任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域。函数作用域就好理解了,定义在函数中的参数和变量在函数外部是不可见的。
模块字符串``
let name = 'Mike';
let age = 27;
let result = `My Name is ${name},I am ${age+1} years old next year.`;
console.info(result);
解构
数组模型的解构(Array)
let arr = ['苹果','西瓜','乌龟'];
let [a,b,c] = arr;
console.info(a);
console.info(b);
console.info(c);
变量有默认值时解析
let [a = 3, b = a] = []; // a = 3, b = 3,a 与 b 匹配结果为 undefined ,触发默认值:a = 3; b = a =3
let [a = 3, b = a] = [1]; // a = 1, b = 1,a 正常解构赋值,匹配结果:a = 1,b 匹配结果 undefined ,触发默认值:b = a =1
let [a = 3, b = a] = [1, 2]; // a = 1, b = 2,a 与 b 正常解构赋值,匹配结果:a = 1,b = 2
对象模型的解构(Object)
let person = {name:'利威尔',age:28,job:'兵长'}
let {name,job} = person;
console.info(name);
console.info(job);
结构运算符
...展开运算符又叫剩余运算符,可以用于展开数组和对象的元素。
展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。
函数
参数默认值
function fn(name,age=17){
console.log(`My Name is ${name},I am ${age+1} years old`);
}
fn("Amy");
箭头函数
参数 => 函数体
//es5
var fn_name = function() {
}
//es6
var fn_name = () => {
}
- 不需要 function 关键字来创建函数
- 省略 return 关键字
- this始终指向函数申明时所在作用域下的this值
var f = (a,b) => {
let result = a+b;
return result;
}
f(6,2); // 8
for of
for of遍历的是键值对中的值
for in遍历的是键值对中的键
const arr = ['red', 'green', 'blue'];
for(let v of arr) {
console.log(v); // red green blue
}
class类
class Student {
constructor() {
console.log("I'm a student.");
}
study() {
console.log('study!');
}
static read() {
console.log("Reading Now.");
}
}
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
Student.read(); // "Reading Now."
模块化导入导出
导入improt,引入的变量可以用as起别名
导出export
/*-----export [test.js]-----*/
let myName = "Tom";
let myAge = 20;
let myfn = function(){
return "My name is" + myName + "! I'm '" + myAge + "years old."
}
let myClass = class myClass {
static a = "yeah!";
}
export { myName, myAge, myfn, myClass }
/*-----import [xxx.js]-----*/
import { myName as n, myAge as a, myfn, myClass } from "./test.js";
console.log(myfn());// My name is Tom! I'm 20 years old.
console.log(a);// 20
console.log(n);// Tom
console.log(myClass.a );// yeah!
export default{}
在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
export default{}可以导出变量、函数、类。
通过export方式导出,在import时要加{},export default则不需要{}。
export default向外暴露的成员,可以使用任意变量来接收。
promise
Promise异步操作有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。
resolve:一个函数,用于将Promise的状态从pending转为fulfilled,并设置成功的返回值。
reject:一个函数,用于将Promise的状态从pending转为rejected,并设置失败的原因。
创建Promise对象后,可以通过.then()和.catch()方法来处理Promise的成功和失败情况。另外,.finally()方法可以用于处理Promise完成后(无论成功还是失败)需要执行的操作。
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, world!'); //resolve函数将Promise的状态从pending转为fulfilled,触发then,如果是reject则触发catch
}, 2000);
});
myPromise.then((value) => {
console.log(value); // 输出 'Hello, world!',2秒后输出
}).catch((error) => {
console.error(error);
});
注意Promise对象的then中不能直接return,因为then中属于箭头函数的作用域。
then
promise.then(onCompleted, onRejected);
一个promise必须提供一个then方法以访问其当前值、终值和据因。then 方法接收两个函数作为参数,第一个参数是 Promise 执行成功时的回调,第二个参数是 Promise 执行失败时的回调,两个函数只会有一个被调用。
async/await
async 函数返回一个Promise对象,可以使用then方法回调函数。
await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。
await针对所跟不同表达式的处理方式:
Promise 对象:await 会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行并返回解析值。
非 Promise 对象:直接返回对应的值。
async function helloAsync(){
console.info(1111);
return "helloAsync";
}
console.log(helloAsync()) // Promise {<resolved>: "helloAsync"}
helloAsync().then(v=>{
console.log(2222);
console.log(v); // helloAsync
})
因为delay返回的是Promise对象,await用在Promise对象前面
async修饰的函数会返回Promise对象,return的值即是resolve的参数。
// 返回Promise对象
function delay(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
//async修饰的函数返回的一律是Promise对象
async function asyncFunction() {
console.log('开始');
await delay(2000); // 等待2秒
console.log('等待结束');
return '完成'; //虽然这里返回的是字符串,实际这个字符串是作为resolve的参数
}
//获取async函数return的值
asyncFunction().then(result => {
console.log(result); // 输出 '完成'
});
总结: async和await都是Promise异步使用的,不要想着在同步的情境下使用await和async,then里面的值是不能作为函数的值return出来的(箭头函数作用域),即使return出来也只能被下一个then捕获。
Symbol数据类型
ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ,还新增了 Symbol 。
数组filter过滤器
array.filter((value, index, arr) => {value === '匹配对象'})
var newarr = [
{ num: 1, val: 'ceshi', flag: 'aa' },
{ num: 2, val: 'ceshi2', flag: 'aa2' }
]
console.log(newarr.filter(item => item.num===2 ))
数组去重
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index);
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]
![微信公众号二维码](https://images.cnblogs.com/cnblogs_com/aeolian/1679458/o_wechat_gzh_qrcode.jpg)