HTML5 ES6 语法基础

// 解构赋值
let [a, b, c, [s,e],d] = ["aa", "bb", "cc", [12, 23], "dd"];
console.log(s);

// 结构方法
add({add1: 12, add2: 13})
function add({add1, add2}) {
    console.log(add1 + add2);
}

// 唯一值
let aa = Symbol(3);
let bb = 3;
console.log(aa == bb)

// 值唯一的伪数组 SET 对象 遍历方式 for...of
let set = new Set([1,2,2,2,4,4]);
for (let elem of set) {
    console.log(elem)
}

// 值唯一的伪数组 SET 对象 赋值方法 1
let set = new Set();
for (let i = 0; i < 5; i++) {
    set.add(i);
}

// 循环遍历数组的方法 Map
let set = new Set();
[1,2,3,45,5,5].map(function (elem) {
    console.log(elem);
})

// 将 SET 对象转化为 数组的方式
let set = new Set([1,2,2,2,4,4]);
console.log(set);
console.log([...set]);

// SET 对象的 清空 和 删除
let set = new Set([1,2,2,2,4,4]);
set.delete(2);
console.log([...set]);
set.clear();
console.log([...set]);

// 判断 SET 对象是否存在某个值, 以及获取 元素 的数量
let set = new Set([1,2,2,2,4,4]);
console.log(set.has(2));
console.log(set.has(5));
console.log(set.size);

// 数组的 遍历循环操作 map 和 数组过滤器 filter
let arr = [1,2,3,4,5,6,5];
let arrs = arr.map(function (value) {
    return value * 2;
})
let arrss = arrs.filter(function (value) {
    return value == 10;
});
console.log(arrs)
console.log(arrss)

// 数组遍历 forEach
let arr = [1,2,3,4,5,6,5];
arr.forEach(function (value, key) {
    console.log(key + " = " + value);
})

// 元素必须是对象的 SET 对象 WeakSet ( 所拥有的方法和 set 相似 )
let weakSet = new WeakSet();
weakSet.add(new Number(5));

// 数据结构 Map, 本质上是二位数组, ( API => 元素是否存在 has 删除 delete)
let map = new Map();
map.set("nihao", "buhao");
console.log(map.get("nihao"));

// WeakMap 对象做值 对象做键 基本没用
let weakMap = new WeakMap();

// 数组和伪数组的 遍历器 Iterator 性能比常规循环遍历 性能高
let arr = ["你好", 1, 45, "不知道", true];
let it = arr[Symbol.iterator]();
for(let i = it.next(); !i.done; i = it.next()) {
    console.log(i.value);
}

// Generator 函数 异步编程方案 1
function *myGenerator() {
    console.log(1);
    yield 2;
    console.log(3)
    yield 4;
    return "end";
}
let y = myGenerator();
console.log(y.next());
console.log(y.next());
console.log(y.next());
console.log(y.next());

// Promise 对象 异步编程方案 2
new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log(3000)
        resolve();
    }, 3000);
}).then(function () {
    new Promise(function () {
        setTimeout(function () {
            console.log(3000)
        }, 3000);
    })
});

// Async 函数 异步编程方式 3
(async function () {
    setTimeout(function () {
        console.log(111)
    }, 2000)
})().then(async function () {
    setTimeout(function () {
        console.log(111)
    }, 2000)
});

// 箭头函数
let fun = (c = 3) => {
    console.log(c);
}
fun();

// Proxy 代理, 可以拦截的方法比较多, 但是兼容性欠缺
class A {}
let a = new A();
let p = new Proxy(a, {
    get: function (target, key) {
        console.log ("调用 GET 方法");
        return target[key];
    },
    set: function (target, key, value) {
        console.log("调用 SET 方法");
        return Reflect.set(target, key, value);
    }
});
p.id = 3;
console.log(p.id)

// Decorator 修饰器 装饰模式; 只能修饰类和类的方法
function choose (target) {
    target.course = "物理";
}
@choose
class Student {}
console.log(Student.course)