es6 常见用法-优快云博客

博客介绍了JavaScript的多种特性，包括promise的状态及all、race方法，Generrator生成器的特点与使用，async异步编程，还提及继承、解构赋值等内容，以及箭头函数的特性，如this指向、无arguments等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

promise

pending:等待中，resolve（完成） rejected(失败)

all:全部，用于将多个promise对象包装成1个全新的promise实例，只有全部成功才会走成功，否则就会失败
使用：

race:返回也是一个promise对象，最先执行的promise结果，哪个最快用哪个

resolve rejected


    var p1 = new Promise((resolve,rejected)=>{
       if(true){
           resolve('成功')
       } else{
           reject('失败')
       }
    });
    p1.then((result)=>{
        alert(result);
    },(error)=>{
        alert(error);
    };

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

异步编程

继承

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

// 给默认值
let [a,b,c=111]=[1,2];
console.log(a,b,c); // 1 2 111

// 交换位置
let a=1,b=2;
[a,b]=[b,a];
console.log(a,b); // 2 1

// Array.from
// 把类数组转成数组

字符串模板

let name='张三',age=100;
console.log(`名字：${name},年龄：${age}。`);

includes

// indexOf：返回的位置
// includes：返回的true false
let str='red yellow blue';
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));

函数

// 默认参数
function getInfo({a,b='默认'}){
    console.log(a,b); // 1 默认
}
getInfo({a:1,});
// 
function show(...a)
{
    console.log(a); // [1,2,3,4,5]
}
show(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);

// filter
// 过滤数据为false的数据
let arr = [
    {title:'dddd', read:100, hot:false},
    {title:'aaaa', read:2100, hot:true}
];
        
let newArr = arr.filter((item, index, arr)=>{
    return item.hot==false;
});

console.log(newArr);

//some
// 类似查找，只有数组里面某一个元素符合条件就会返回true
let arr =['apple','banana','orange'];

let b = arr.some((val, index, arr) =>{
    return val=='banana2';
});

console.log(b);

// every
// 每一个都要符合条件才会返回true
let arr = [1,3,5,7,9,10];

var b = arr.every((val, index, arr)=>{
    return val%2==1;
});

console.log(b);

// 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"
}

转载于:https://www.cnblogs.com/Hsong/p/9551123.html