ES6

最新推荐文章于 2024-09-24 15:08:45 发布

xjz19930219

最新推荐文章于 2024-09-24 15:08:45 发布

阅读量121

点赞数

分类专栏：前端文章标签： ES6

本文链接：https://blog.youkuaiyun.com/xjz19930219/article/details/92078135

版权

前端专栏收录该内容

27 篇文章

订阅专栏

// 模板字符串 `${}`
    let str1 = 'hello';
    let str2 = 'world';
    let str = `${str1}String ${str2}`;
    console.log(str) //helloString world

    // 对象解构
    let obj = {
        name: "ldd",
        age : 18,
        sex : "male",
        son : {
            name : "lxx",
            age : 3
        }
    }
    let {name,age,sex} = obj;
    let {name : n,age : a} = obj.son;
    console.log(obj.name)
    console.log(obj.age)
    console.log(obj.sex) 
    console.log(obj.son.name) 
    console.log(obj.son.age) 

    // 剩余参数...numbers
    function sum(...args) {
        console.log(args)
        return args.reduce((prev,curr) => prev + curr ,0)
    }
    console.log(sum(1,2,3,4)) //10
    console.log(sum(1,2,3,4,6)) //16

    function converCurrency(rate,...amounts) {
        return amounts.map(amount => amount * rate)
    }
    const amounts = converCurrency(0.89,12,34,656)

    console.log(amounts) //[10.68, 30.26, 583.84]

    // 扩展运算符 用来拷贝数组
    const arr1 = [1,2,3,4];
    const arr2 = ['a','b','c',{1:'d',2:'h'}];
    let haha = {
        name : 'haha',
        age : 'xixi',
        sex : 'male'
    }
    const arr = [...arr1,'haha',...arr2];
    console.log(arr) //[1, 2, 3, 4, "haha", "a", "b", "c"]
    let member = [...arr2];
    console.log(member) //member就把就把arr2深拷贝
    // let hehe = [...haha] //object is not iterable (cannot read property Symbol(Symbol.iterator))

<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    div{
        width: 300px;
        height: 300px;
        background-color: darkgoldenrod; 
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .heading{
        
        font-family: sans-serif;
        font-size: 50px;
        color: aliceblue;
        text-shadow: 3px 3px 0 rgba(0,0,0,0.2);
    }
    .heading span{
        cursor: crosshair;
        display: inline-block;
        transition: transform 0.25s;
    }

    .heading span:hover{
        transform: translateY(-30px) rotate(20deg) scale(2)
    }
</style>
<body>
    <div>
        <h2 class="heading">hello&nbsp;&nbsp;world</h2>
    </div>
    
</body>

<script>
    // 利用拓展运算符给每个字加特效
    let h2 = document.getElementsByTagName('h2')[0]
    console.log(wrapWithSpan(h2.textContent))
    function wrapWithSpan(word) {
    //将获取到的每一个字母转换成数组，并给添加span标签后，再转换为字符串
        return [...word].map(letter => `<span>${letter}</span>`).join('')
    }
    h2.innerHTML = wrapWithSpan(h2.textContent);

</script>

promise函数

// promise函数
    // 为确保第二个函数在第一个函数请求完后再请求，需要把第二个函数放到第一个函数的回调函数中，
    //  如果嵌套关系太多，会导致代码可读性大大降低
    // promise相当于一种承诺
    let userName;
    let userPromise = axios.get('https://api.github.com/users')
    userPromise
        .then(response => {
            console.log(response)
            userName = response.data[0].login;
            return axios.get(`https://api.github.com/users/${userName}/repos`)
        })
        .then(response =>{
            console.log(response.data)
        })
        .catch(err =>{
            console.log(err)
        })

// Build promise 构造promise函数
    // reslove 成功 reject 失败
    const pro = new Promise((reslove,reject) => {
        setTimeout(() => {
            reslove('hahahahahaah')
        },2000)
        // reject('55555555')
    });

    pro
        .then(data => {
            console.log(data)
        })
        .catch(err => {
            console.error(err)
        })

处理多个promise函数有
.all 全部的promise都是resolve才会成功
.race 第一个返回的promise结果是什么那么整个promise的结果就是什么
ES6之Promise常见面试题

Promise对象面试题及答案

Symbol

// Symbol es6新的数据类型 可以用作对象的唯一标志 避免命名冲突 但是无法遍历
    // 可以用作私有属性在对象内部使用
    const peter = Symbol('peter')
    const student = Symbol('student')

// ES6写法 类
    class User {
        // 构造函数
        constructor(name,email){
            this.name = name;
            this.email = email;
        }
        // 方法
        info(){
            console.log(`HI,im ${this.name}`)
        }
        // 静态方法 只能在类上调用 不能用实例调用
        static description(){
            console.log('hahahaahahahaah')
        }
        // 定义set和get方法
        set github(value) {
            this.githbuName = value;
        }
        get github(){
            return `https://github.com/${this.githbuName}`;
        }
    }
    const aa = new User('aa','123@163.com');
    const bb = new User('bb','456@163.com');

    // 如何实现继承
    // es5的方法 
    // function Dog(name,age) {
    //     // 调用父类的构造函数
    //     Animal.call(this,name,age);
    //     this.name = name;
    //     this.age = age;
    // }
    // // Dog的原型对象别支
    // Dog.prototype = new Animal();
    // Dog.prototype.constructor = Dog;


    class Animal {
        constructor (name){
            this.name = name;
            this.belly = [];
        }
        eat(food){
            console.log(`im eating ${food}`);
        }
    }

    class Dog extends Animal {
        constructor (name,age){
            super(name);
            // this.name = name; this.name 在父类中已经有了
            this.age = age;
        }
        bark(){
            console.log(`Barl brak`)
        }
    }

    const lucky = new Dog('lucky',2)
    // 这样lucky就能继承Animal的方法