ES6学习之对象的扩展

写在起前面的话：

　　活到老学到老。对象（object）是 JavaScript 最重要的数据结构。ES6 的规范中对Object对象进行了升级。主要有以下几个地方：

属性的简洁表示法：

在es5中对象属性的标准写法是：

var person={
                name:"林"
            }

属性名+冒号（：）+属性值

在ES6中提供了一种简洁的写法

var name="林",sex="钢铁直男"
            var person={
                name，
                sex
            }

上面代码中，变量person直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值

不仅是属性可以简写，函数也可以简写：

    var person={
                pullHand:function(){
                    console.log('pullHand');
                }
            }//ES5的写法
        var person={
                pullHand(){
                    console.log('pullHand');
                }
            } //ES6的写法           

es5中的写法是：函数名+冒号（：）+function(函数关键字)+参数体（）+方法体{ }

es6中简写了写法：函数名+参数体（）+方法体{ }

 属性名表达式：

在es5中属性名有两种写法

person.name="林"；//第一种
person["na"+"me"]="林"；//第二种

第一种是对象直接点出属性名，第二种是用字面量的方式，对象名j+[属性名字符串（属性名字符串可以是表达式）]。

而在es6中可是使用中括号中加表达式来定义属性名。

    var firstname="na",lastName="me";
            var person={
                [firstname+lastName]:"林"
                }            
            console.log(person);//{name:"林"}

 可枚举性和遍历：

es6中引入了“可枚举”（enumerable）这个概念，最初目的是为了在遍历的时候忽略掉一些属性，就像私有属性一样只能内部使用不会被外部调用一样。就比如下面这个栗子：

    <script>
            var person={
                name:"林",
                sex:'boy'
                }

                for (let item in person) {
                    console.log('item',item);
                }//输出 item name
                  //   item sex

        </script>        

在没有做特殊的操作下：对象中定义的属性都是可枚举的，因而能够内遍历到，当你改变属性的描述如（enumerable=false）将sex属性改为不可枚举的时候，再使用for..in遍历的时候就遍历不出sex属性了。

<script>
            var person={
                name:"林",
                sex:'boy'
                }
                Object.defineProperty(person,"sex",{
                enumerable: false
                })//改变person对象的sex描述对象中的可枚举类型
                for (let item in person) {
                    console.log('item',item);
                }//输出 item name

        </script>

引入可枚举使得属性的操作复杂了起来。也更有利于操作单个属性。

在es6中一共有5中遍历的方法：

（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 或字符串，也不管是否可枚举。

super关键字

this关键字总是指向函数所在的当前对象，ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

<script>
            let person = {
              name: 'lin'
            };
            
            let boy = {
              name: 'linjb',
              getName() {
                console.log( super.name);
　　　　　　　　  console.log( super.name);
} 
}; 
　　　　Object.setPrototypeOf(boy, person);//将person设置为boy的原型 
　　　　boy.getName() // "lin" 
　　　　　　　　　　　　//'linjb'

 </script>

对象的扩展运算符

具体内容可以看我的另一篇博客   ES6 学习笔记-扩展运算符（...）

链判定运算符

　　在具体编程中，如果要读取对象内部的某个属性，往往需要判断一下该对象是否存在。比如，要读取html.body.name.firstName，安全的写法是写成下面这样。

const firstName = (html
  && html.body
  && html.body.name
  && html.body.name.firstName) || 'default';

或者使用三元运算符

const firstNamer= html.body?html.body: undefined

判断起来非常麻烦

let  html={
                body:{
                    name:"gfgff"
                }
                
            }
            let name=html?.body?.name?.fitstName||'defaunt';
            console.log('name',name);

不过目前在谷歌浏览器中使用链判断运算符 解析器不认会报错