ES6的新增属性

  for (var i = 0; i < 5; i++) { }
        console.log(a[i]);

    console.log(1);
    setTimeout(function () {
        console.log(2)
    })
    console.log(3);//输出结果为1 3 2

// ES5解构赋值
    var a, b, c = [1, 2, 3]
    console.log(a, b, c);//输出undefined undefined (3) [1, 2, 3]
    // ES6解构赋值
    let [a, b, c] = [1, 2, 3]
    console.log(a, b, c);//输出1 2 3

 // ES5解构赋值互换
    let x = 1;
    let y = 2;
    let t = null;
    t = x;
    x = y;
    y = t;
    console.log(x, y);
    // ES6解构赋值互换
    [x, y] = [y, x];
    console.log(x, y);//输出都是2 1

let [a, b] = [1, 2, 3]
    console.log(a, b);//输出1,2

 // 函数返回值, 进行解构赋值
    function fn() {
        return [1, 2, 3]
    }
    let [a, b, c] = fn()
    console.log(a, b, c);//输出1 2 3

 // 函数传参,进行解构赋值
    // ES5函数传参
    function add(a, b, c) {
        return a + b + c
    }
    const arr = [1, 2, 3];
    console.log(add(arr[0], arr[1], arr[2]));//输出6
    // ES6函数传参
    const arr=[1, 2, 3];
    console.log(add(arr));//输出6

const params = ["name=zhangsan", "age=18"]
    function fn([name, age]) {
        return {
            name: name.split("=")[1],
            age: age.split("=")[1]
        }
    }
    console.log(fn(params));

// 对象的解构赋值
    // 注意如果不给a,b,给x,y虽然结构相同,但是属性名不同,无法解构
    let { a, b } = { a: 1, b: 2 }
    console.log(a, b);//输出1 2

 const actor = {
        name: "zhangsan",
        age: 20,
        fn: function () {
            console.log("哈哈");
        }
    }
    // ES5调用值
    console.log("姓名:" + actor.name);
    console.log("年龄:" + actor.age);
    actor.fn()
    // ES6调用值
    let { name, age, fn } = actor
    console.log("姓名:" + name);
    console.log("年龄:" + age);
    fn()

 // 常见应用场景
    // ES5常用
    console.log(Math.pow(2, 3));
    console.log(Math.random());
    console.log(Math.min(43, 5, 30, 8));
    console.log(Math.max(43, 5, 30, 8));
    // ES6常用
    let {
        min,
        max,
        pow,
        random
    } = Math
    console.log(min(3, 2, 6));
    console.log(max(3, 2, 6));
    console.log(pow(3, 2, 6));
    console.log(random());
 let {
        isArray,
        from,
        of
    } = Array
    console.log(isArray())
    console.log(from())
    console.log(of())
    let {
        splice,
        slice,
        sarch
    } = string
    console.log(splice())
    console.log(slice())
    console.log(sarch())

// java数据交互时,传来的对象不符合
    // 需求是,调出useaName这个值,但是返回的是useaname
    let { useaname: useaName } = {
        useaname: "Mike"
    }
    console.log(useaName);//输出Mike

 // 练习：把typeinfoDes 转为 typeInfo输出
    {
        typeinfoDes: "类型描述"
    }
    let { typeinfoDes: typeInfo } = {
        typeinfoDes: "类型描述"
    }
    console.log(typeInfo);

 // 字符串的解构赋值
    const [a, b, c] = "why"
    console.log(a, b, c);
    let { length: len } = "why"
    console.log(len);
    // 伪数组也是对象,他的属性名就是他对应的下标
    // 数组和伪数组都是对象,因为下标索引就是属性名,子项是属性值
    // function也是对象,他的形参就是他的属性名

 // ES5 是如何赋予默认值
    function show(a, b) {
        var a = a || 10
        var b = b || 20
        return [a, b]
    }
    console.log(show());
    // ES6 是如何赋予默认值,有实参优先实参,空实参的时候才会调用形参的值
    function show(a = 10, b = 20) {
        return [a, b]
    }
    console.log(show(5, 6));

 function add() {
        return 1 + 1;
    }
    console.log(`1+1=${add()}`);
    console.log(`1+1=${true?111:0}`);

 
//当形参只有一个的时候,可以省略小括号
//当return,只有一句话的时候,大括号可以省略
 
// ES5函数
    function show() {
        console.log("show");
    }
    show()
    // ES6箭头函数
    const show = () => {
        console.log("show");
    }
    show()
//或
 const show = () => console.log("show");
    show()
 // 在省略写法
    const show = (name) => console.log("show" + name);
    show("哈哈")
    // 最省略
    //当形参只有一个的时候,可以省略小括号
    //当return,只有一句话的时候,大括号可以省略
    const show = name =>name
    console.log( show("哈哈"));

 const person = {
        first: "mike",
        last: "jackson"
    }
    // ES6函数
    let fullName = ({ first, last }) => `${first} ${last}`;
    console.log(fullName(person));
    // ES5函数
    function fName(p) {
        return `${p.first} ${p.last}`
    }
    console.log(fName(person));

  // 练习： 用箭头函数写出每隔一秒输出当前时间，格式  2022-07-09  06：07：01
    var h1 = document.querySelector("h1")
    setInterval(() => {
        const date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        const hour = date.getHours()
        const minute = date.getMinutes()
        const second = date.getSeconds()
        h1.innerText = `${year}-${month.toString().padStart(2, "0")}-${day}  ${hour}:${minute}:${second.toString().padStart(2, "0")}`
    }, 1000)