es6 常见用法
es6
promise
解决多重回调层层嵌套的情况，提高代码可阅读性
pending:等待中，resolve（完成） rejected(失败)
all:全部，用于将多个promise对象包装成1个全新的promise实例，只有全部成功才会走成功，否则就会失败
使用：
race:返回也是一个promise对象，最先执行的promise结果，哪个最快用哪个
resolve rejected
var p1 = new Promise((resolve,reject)=>{
// 必须回调不然没用
if(true){
resolve('成功')
} else{
reject('失败')
}
});
// 第一个是成功的回调，第二个是失败的回调
p1.then((result)=>{
alert(result,11);
},(error)=>{
alert(error,33);
});
all
var p1=Promise.resolve(3);
var p2=Promise.reject(5);
Promise.all(([p1,p2])).then(()=>{
console.log('成功');
},()=>{
console.log('失败');
});
race
var p1 = new Promise((resolve,rejected)=>{
setTimeout(resolve,50,'one');
});
var p2 = new Promise((resolve,rejected)=>{
setTimeout(resolve,100,'two');
});
Promise.race([p1,p2]).then((value)=>{
console.log(value);
});
Generrator 生成器
- 解释：
- 1.函数里面有*号
- 2.函数内部使用yield
- 3.遇到return则会结束
function * show(){
yield 'Hello';
yield 'World';
yield 'ES6';
}
var res = show();
console.log(res.next()); // {value:'Hello',done:false}
console.log(res.next()); // {value:'World',done:false}
console.log(res.next()); // {value:'ES6',done:false}
console.log(res.next()); // {value:undefined,done:true}
- yeild是否有返回值：yield语句本身没有返回值，或者每次返回undefined。
- next可以带参数：给上一个yield的值
- generator函数放到对象里面：
*tests(action, {call, put}) {
const testRes = yield call(asyncService.async);
yield put({
type: 'test',
payload: testRes,
});
},
- yield语句如果用在一个表达式中，必须放在圆括号里面
console.log('hello'+(yield 123));
async
异步编程
// await会等待函数执行完毕再往下走
var async=async function(){
var f1=await function(){
console.log('123');
}();
var f2=await function(){
console.log('456');
}();
console.log('ok');
}
async(); // 123 456 ok
// await会等待函数执行完毕再往下走,但是不包括函数里面的延时操作
var asyncSetTimeout=async function(){
var f1=await function(){
setTimeout(()=>{
console.log('123');
},2000);
}();
var f2=await function(){
setTimeout(()=>{
console.log('456');
},1000);
}();
console.log('ok');
}
asyncSetTimeout(); // ok 456 123
//
var asyncReturn1=async function(){
console.log('ok');
return '开始'
}
var asyncReturn2=async function(result){
console.log('得到返回值：'+ result);
return '结束'
}
asyncReturn1().then(asyncReturn2).then((result)=>{
console.log(result);
}); // ok 得到返回值：开始 结束
// promise回调等待异步操作执行完成进行返回
var f1=await function(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('123');
resolve('666');
},2000);
});
};
var f2=await function(data){
return new Promise((resolve,reject)=>{
console.log('收到参数'+data);
setTimeout(()=>{
console.log('456');
resolve('888');
},2000);
});
};
f1().then(f2).then((result)=>{
console.log('收到参数'+result);
}); // 123 收到参数666 456 收到参数888
proxy
代理拦截
继承
class Uncle{
constructor(name,age){
this.name=name;
this.age=age;
}
show(){
console.log(`名字:${this.name},年龄：${this.age},身高：${this.height}`);
}
}
class Children extends Uncle{
constructor(name,age,height){
super(name,age,height);
this.height=height;
this.age=age;
}
}
const uncleInfo =new Children('张三','18','180');
uncleInfo.show();
解构赋值
// 保持左右格式一致就能赋值
// 数组
let arr =[1,2,3];
console.log(...arr); // 1 2 3
let [a,b,c]=[1,2,3];
console.log(a,b,c); // 1 2 3
let [a,[b,c]]=[1,[2,3]];
console.log(a,b,c); // 1 2 3
// 对象
let obj={a:1,b:2,c:3};
let {a,b,c}=obj;
let {a:d,b:e,c:f}=obj
console.log(a,b,c); // 1 2 3
let {a:d,b:e,c:f}=obj // 取别名
console.log(d,e,f ); // 1 2 3
// 接收剩余值
const {a,b,...c} = {a:1,b:2,z:1,d:12};
console.log(c); // {z: 1, d: 12}
// 结果类似于 const obj2 = Object.assign({}, obj1, {d: 4})
const obj1 = {a: 1, b: 2, c: 3}
const obj2 = {...obj1, d: 4}
// 给默认值
var arr = [1, 2];
// es5写法
var a = arr[0], b = arr[1], c = arr[2] || 111;
console.log(a, b, c); // 1 2 111
// es6写法
var [a, b, c = 111] = [1, 2];
console.log(a, b, c); // 1 2 111
// 交换位置
var a = 1, b = 2;
// es5写法
var c = a, a = b, b = c;
console.log(a, b);
// es6写法
[a, b] = [b, a];
console.log(a, b); // 2 1
// Array.from
// 把类数组转成数组
字符串模板
let name='张三',age=100;
console.log(`名字：${name},年龄：${age}。`);
includes
// 判断字符串是否有某个值
var str = "'red yellow blue";
// es5写法
console.log(str.indexOf('yellow') !== -1);
// es5写法
console.log(str.includes('yellow'));
startsWith endsWith
// 字符串判断首尾是否存在某个字符串
let a = "http://aa.png";
let b = "aa.png";
console.log(a.startsWith('http'));
console.log(b.endsWith('.png'));
padStart
let str='name:';
let padStr='张三';
console.log(str.padStart(str.length+padStr.length,padStr));
函数
// 参数给默认值
getInfo({ a: 1, });
// es5的写法
function getInfo(obj) {
console.log(obj.a, obj.b || '默认'); // 1 默认
}
// es6的写法
function getInfo({ a, b = '默认' }) {
console.log(a, b); // 1 默认
}
// 参数转数组
show(1, 2, 3, 4, 5);
// es5写法
function show() {
let nowArr = [];
console.log(arguments, 999);
// 获取参数
for (let index = 0; index < arguments.length; index++) {
const element = arguments[index];
nowArr.push(element);
}
console.log(nowArr); // [1,2,3,4,5]
}
// es6写法
function show(...arr) {
console.log(arr); // [1,2,3,4,5]
}
// Rest运算符,...只能放在最后
function show(a,b,...c)
{
console.log(a,b,c); // 1 2 [3,4,5]
}
show(1,2,3,4,5);
// 拷贝
let arr=[1,2,3,4,5];
let newArr =[...arr]; // 拷贝arr到newArr
箭头函数
- this是上一层的this，不会被英雄this指向的函数影响
- 没有arguments,用...
- 箭头函数不能当构造函数
循环
// foreach
arr.forEach(funciton(val,index,arr){
});
// map
// 如果没有return，相当于forEach
// 如果有return,则会返回return的值
// 可以修改数据
let arr=[1,2,3,4];
let newArr = arr.map((item,index,arr)=>{
console.log(item,index,arr);
return 1;
});
console.log(newArr);
// 修改数组的值
let arr = [1, 2, 3, 4];
// es5写法
for (let index = 0; index < arr.length; index++) {
arr[index] = 1;
}
console.log(arr);
// es6写法
// map
// 如果没有return，相当于forEach
// 如果有return,则会返回return的值
// 可以修改数据
let newArr = arr.map((item, index, arr) => {
console.log(item, index, arr);
return 1;
});
console.log(newArr);
// 过滤字段hot数据为false的数据
let arr = [
{ title: 'dddd', read: 100, hot: false },
{ title: 'aaaa', read: 2100, hot: true }
];
let newArr = [];
// es5写法
for (let index = 0; index < arr.length; index++) {
const element = arr[index];
if (!element.hot) {
newArr.push(element);
}
}
console.log(newArr);
// es6写法
let newArr = arr.filter((item, index, arr) => {
return item.hot == false;
});
console.log(newArr);
// 类似查找，只要数组里面某一个元素符合条件就会返回true
let arr = ['apple', 'banana', 'orange'];
let flag = false;
// es5写法
for (let index = 0; index < arr.length; index++) {
const element = arr[index];
if (element === 'banana') {
flag = true;
break;
}
}
console.log(flag);
let flag = arr.some((val, index, arr) => {
return val == 'banana';
});
console.log(flag);
// 每一个都要符合条件才会返回true
var arr = [1, 3, 5, 7, 9, 10];
var flag = true;
// es5写法
for (let index = 0; index < arr.length; index++) {
const element = arr[index];
// 如果有一个不符合要求则返回false
if (!(element % 2 == 1)) {
flag = false;
break;
}
}
console.log(flag);
var flag = arr.every((val, index, arr) => {
return val % 2 == 1;
});
console.log(flag);
// for of循环
let arr = ['apple', 'banana', 'orange', 'tomato'];
for (let val of arr) {
console.log(val); // apple banana orange tomato
}
// Array.keys() // 从数组中创建一个可迭代的对象，该对象包含数组的键。
for (let index of arr.keys()) {
console.log(index); // 0 1 2 3
}
// Array.entries
// 该方法返回一个新的Array Iterator对象，该对象包含数组中每个索引对应的键/值对
for (let item of arr.entries()) {
console.log(item); // [0,"aple"] [1,"banana"] [2,"orange"] [3,"tomato"]
}
for (let [key, val] of arr.entries()) {
console.log(key, val); // 0,"aple" 1,"banana" 2,"orange" 3,"tomato"
}
导出
- exports
- module.exports
// a.js
module.exports = {
a: 1
}
// or
exports.a = 1
// b.js
var module = require('./a.js')
module.a // -> log 1
- 具体内部实现
var module = require('./a.js')
module.a
// 这里其实就是包装了一层立即执行函数，这样就不会污染全局变量了，
// 重要的是 module 这里，module 是 Node 独有的一个变量
module.exports = {
a: 1
}
// 基本实现
var module = {
exports: {} // exports 就是个空对象
}
// 这个是为什么 exports 和 module.exports 用法相似的原因
var exports = module.exports
var load = function (module) {
// 导出的东西
var a = 1
module.exports = a
return module.exports
};
再来说说 module.exports 和 exports，用法其实是相似的，但是不能对 exports 直接赋值，不会有任何效果。
对于 CommonJS 和 ES6 中的模块化的两者区别是：
-
前者支持动态导入，也就是require(${path}/xx.js)，后者目前不支持，但是已有提案
-
前者是同步导入，因为用于服务端，文件都在本地，同步导入即使卡住主线程影响也不大。而后者是异步导入，因为用于浏览器，需要下载文件，如果也采用同步导入会对渲染有很大影响
-
前者在导出时都是值拷贝，就算导出的值变了，导入的值也不会改变，所以如果想更新值，必须重新导入一次。但是后者采用实时绑定的方式，导入导出的值都指向同一个内存地址，所以导入值会跟随导出值变化
-
后者会编译成 require/exports 来执行的
继承
class Animal {
constructor(name) {
this.speed = 0;
this.name = name;
}
run(speed) {
this.speed += speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
stop() {
this.speed = 0;
alert(`${this.name} stopped.`);
}
}
// Inherit from Animal
class Rabbit extends Animal {
hide() {
alert(`${this.name} hides!`);
}
}
let rabbit = new Rabbit("White Rabbit");
rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!
