ES6的新增属性

为什么要新增那?可以看到如下代码,会造成变量泄露,这就是ES5的BUG,是var的全局作用域造成的.

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

了解一下什么场景我们使用let :

1.基本类型的赋值,用let

2.主观想让块级作用域生效

3.for循环中

const

1.常用与常量,不改变的值

前提:基本类型

如 const PI=3.1415986(固定的值)

2.与let相同,都具有块级作用域,都有临时性死区(变量不能提前)

3.引用类型的值一律用const来声明,但是 要确保数据为引用类型

js事件循环机制

耗时操作等于异步操作,所以会等同步操作完毕后在执行异步操作

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

ES6解构赋值

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

交换值如果是 E5 .就要声明一个变量来交换比较麻烦,我们用 ES6就简单地多,只要=左右解构相同我们就可以解构赋值了

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

练习题:如何将params变成对象

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数据交互不匹配问题

// 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)