JavaScript ES6+新特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_46328930/article/details/125888495
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1.属性的简洁表示法
         const foo='bar'
         const baz={foo};
         console.log(baz);//{foo: 'bar'}
         //
         function f(x,y){
            return{x,y}
         }
        console.log(f(1,2));//{x: 1, y: 2}
        //方法简写
        const o={
            method(){
                return 'hello'
            }
        }
        console.log(o.method());//hello
        //注意，简写的对象方法并不能用作构造函数，会报错
        //2.属性名表达式
         let bar='foo';
         let obj={
            [bar]:true,
            ['a'+'b']:123
        }
         console.log(obj[bar]);
         //3.方法的name属性
         const person={
            sayName(){
                console.log('hello');
            }
         }
         console.log(person.sayName.name);//sayName
         //有两种特殊情况： bind 方法创造的函数， name 属性返回 bound 加上原函数的名字； Function 构造函数创造的函数， name 属性返回 anonymous 。
         //4.属性的可枚举性和遍历
         //描述对象的 enumerable 属性，称为“可枚举性”，如果该属性为 false ，就表示某些操作会忽略当前属性。
         //属性的遍历
         //（1）for...in
         //for...in 循环遍历对象自身的和继承的可枚举属性（不含 Symbol 属性）。
         //(2)Object.keys(obj)
         //Object.keys 返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。
         //(3)Object.getOwnPropertyNames(obj)
         //Object.getOwnPropertyNames 返回一个数组，包含对象自身的所有属性（不含 Symbol 属性，但是包括不可枚举属性）的键名。
          //（4）Object.getOwnPropertySymbols(obj)
         //Object.getOwnPropertySymbols 返回一个数组，包含对象自身的所有 Symbol 属性的键名。
         //（5）Reflect.ownKeys(obj)
          //Reflect.ownKeys 返回一个数组，包含对象自身的（不含继承的）所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。
          //遍历的键名遵循属性遍历的次序规则
          //首先遍历所有数值键，按照数值升序排列。
          //其次遍历所有字符串键，按照加入时间升序排列。
          //最后遍历所有 Symbol 键，按照加入时间升序排列。
          const name={
            [Symbol()]:0,
            b:0,
            10:0,
            a:0,
            2:0
          }
          console.log(Reflect.ownKeys(name));
          //['2', '10', 'b', 'a', Symbol()]
          //5.super关键字，指向当前对象的原型对象
        //  const proto={
        //     x:'hello',
        //     foa(){
        //         console.log(this.x);
        //     }
        //  }
        //  const object={
        //     x:'world',
        //     foa(){
        //         super.foa();
        //     }
        //  }
        //  console.log(object.foa);//world
         //6.对象的扩展运算符
         //解构赋值(浅拷贝)，用于从对象的取值，相当于将目标对象自身的可比案例的，但尚未被读取的属性，分配到指定的对象上面。
         let {x,y,...z}={x:1,y:2,z:3,b:4}
         console.log(x);//1
         console.log(y);//2
         console.log(z);//{z: 3, b: 4}
         //7.链判断运算符(?.)
         //对于那些可能没有实现的方法，这个运算符尤其有用
         if(myForm.checkValidity?.()===false){
            //表单校验失败
            return;
         }
         //8.Null判断运算符（??）行为类似||,但是只有运算符左侧的值为null或undefined时，才会返回右侧的值
         //const headerText = response.settings.headerText ?? 'Hello, world!';
    </script>
</body>
</html>