css中的自定义字体 

<!DOCTYPE html>
<html>
<head>
    <title>自定义字体</title>
    <style type="text/css">
        body{
            font-family: 'IF';
        }
        @font-face{
            font-family: 'IF';
            src: url('./SetoFont-1.ttf');
        }
    </style>
</head>
<body>
hello world
</body>
</html>

屏幕快照 2019-11-12 下午9.50.15.png
张宇童 发布于 2019-11-12 13:50
评论(0)  浏览(1453)

JavaScript中的先行断言与后行断言 

let test = 'hello world'
// 后行断言
let res = test.match(/hello(?=\sworld)/)

console.log(res)

// 先行断言
res = test.match(/(?<=hello\s)world/)

console.log(res)
张宇童 发布于 2019-11-12 03:57
评论(0)  浏览(902)

JavaScript中的正则命名

之前我们使用JS正则匹配的时候我们要使用索引

比如 

'hello'.match(/(e)/)[1]
而现在就简单了。可以在小括号里面加上问好尖括号进行分组命名

比如

(?<name>\d+) 

console.log('sdafaf2010-10-12fdsfdsfsd'.match(/(?<a>\d{4})-(?<b>\d{2})-(?<c>\d{2})/).groups.a)
张宇童 发布于 2019-11-12 03:35
评论(0)  浏览(789)

Symbol.iterator与Symbol.asyncIterator并用Example 

let obj = {
    count: 0,
    items: {
        names: ['小明', '笑话', '小草'],
        age: [19,20,30],
        haha: ['小小', '大大'],
    },
    Gen(time) {
        return new Promise((resolve, reject) => {
            setTimeout(function() {
                resolve({
                    done: false, value: time
                })
            }, time)
        })
    },
    [Symbol.asyncIterator] () {
        let self = this
        return {
            next() {
                self.count++
                if (self.count < 4) {
                    return self.Gen(Math.random() * 1000)
                }else {
                    return Promise.resolve({done: true, value: ''})
                }
            }
        }
    },
    [Symbol.iterator] () {
        let arr = this.items;
        let keys = Reflect.ownKeys(arr)
        let values = [];
        return {
            next() {
                if (!values.length) {
                    if (keys.length) {
                        values = arr[keys[0]]
                        keys.shift()
                    } else {
                        return { done: true, value: '' }
                    }
                }
                return {
                    value: values.shift(),
                    done: false
                }
            }
        }
    }
}

for (let i of obj) {
    console.log(i)
}

async function test() {
    for await (let i of obj) {
        console.log(i)
    }
}

test()
张宇童 发布于 2019-11-12 02:15
评论(0)  浏览(1161)

ES9中的for await of 

function Gen(time) {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            resolve(time)
        },time)
    })
} 

async function test() {
    let arr = [Gen(2000), Gen(200), Gen(3000)]
    for(let i of arr) {
        console.log(Date.now())
        console.log(Date.now(), await i.then(console.log))
        console.log(Date.now())
    }
}

test().then(() => {console.log('<<<======华丽分割线======>>>'); testTwo()})

async function testTwo() {
    let arr = [Gen(3000), Gen(300), Gen(2000)]
    for await (let i of arr) {
        console.log(Date.now(), i)
    }
}

屏幕快照 2019-11-11 下午10.39.56.png
张宇童 发布于 2019-11-11 14:41
评论(0)  浏览(843)

ES8中禁止对象元素枚举 

let obj = {
    name: '小明',
    age: 18
}
Object.defineProperty(obj, 'age', {
    enumerable: false
})
 for (let i in obj) {
    console.log(i)
 }

console.log(Reflect.ownKeys(obj))
console.log(Object.keys(obj))
console.log(Object.getOwnPropertyDescriptors(obj))
张宇童 发布于 2019-11-11 14:08
评论(0)  浏览(802)

ES7中新增的语法指数运算以及includes

第一个是includes判断数组中的元素是否存在 

let arr = ['hello', 'world']
console.log(arr.includes('hello')) // true
console.log(arr.includes('helle')) // false
第二个是指数运算。ES7进行了简写

ES5中的做法 

Math.pow(2, 2) // 4
ES7中的做法 

2 ** 2 // 4
张宇童 发布于 2019-11-10 12:19
评论(0)  浏览(817)

使用Generator定义Symbol.iterator可迭代对象 

let booksInfo = {
    authDescipt: {
        a: ['hello','book', 'san'],
        b: ['nihao', 'henhao', 'three'],
        c: ['aaa', 'bbb', 'ccc']
    }
}

booksInfo[Symbol.iterator] = function *() {
    let AllAuthDescipt = this.authDescipt;
    let keys = Reflect.ownKeys(AllAuthDescipt)
    let values = []
    while(1) {
        if (!values.length) {
            if (keys.length) {
                values = AllAuthDescipt[keys[0]]
                keys.shift()
                yield values.shift()
            } else {
                return false
            }
        }else {
            yield values.shift()
        }
    }
}
o = []
for (let v of booksInfo) {
    o.push(v)
}

console.log(o)
张宇童 发布于 2019-11-10 08:56
评论(0)  浏览(895)

使用Symbol.iterator定义可迭代对象 

let booksInfo = {
    authDescipt: {
        a: ['hello','book', 'san'],
        b: ['nihao', 'henhao', 'three'],
        c: ['aaa', 'bbb', 'ccc']
    }
}

booksInfo[Symbol.iterator] = function () {
    let AllAuthDescipt = this.authDescipt;
    let keys = Reflect.ownKeys(AllAuthDescipt)
    let values = []
    return {
        next() {
            if (!values.length) {
                if (keys.length) {
                    values = AllAuthDescipt[keys[0]]
                    keys.shift()
                }
            }
            return {
                done: !values.length,
                value: values.shift(),
            }
        }
    }
}

for (let v of booksInfo) {
    console.log(v)
// hello
// index.js:31 book
// index.js:31 san
// index.js:31 nihao
// index.js:31 henhao
// index.js:31 three
// index.js:31 aaa
// index.js:31 bbb
// index.js:31 ccc
}
张宇童 发布于 2019-11-10 08:02
评论(0)  浏览(914)

Generator抽奖的实现 

function *draw(first = 1, two = 2, three = 3) {
    let one_arr = ['a1', 'a2', 'a3', 'a4']
    let two_arr = ['b1', 'b2', 'b3', 'b4']
    let three_arr = ['c1', 'c2', 'c3', 'c4']
    let judge = []
    for (let i = 0; i< first; i++) {
        let random = Math.floor(Math.random() * one_arr.length)
        judge = judge.concat(one_arr.splice(random, 1))
    }
    for (let i = 0; i< two; i++) {
        let random = Math.floor(Math.random() * two_arr.length)
        judge = judge.concat(two_arr.splice(random, 1))
    }
    for (let i = 0; i< three; i++) {
        let random = Math.floor(Math.random() * three.lenght)
        judge = judge.concat(three_arr.splice(random, 1))
    }
    for (let i of judge) {
        yield console.log(i)
    }
}

let d = draw()
d.next()
张宇童 发布于 2019-11-10 07:13
评论(0)  浏览(761)

个人资料

    扫一扫体验小程序版博客哦

    个人简介: 吃饭睡觉😴,打豆豆

最新评论

链接

搜索