我的ES6自学笔记-下

275

对象初始化

产生一个空对象

//es5   
var a = new Object()
var a = {}

//es6
let a = Object.creat(null)  //真正的空对象,原型链没有链上Object.prototpe
let b = Object.creat(Object.prototype)

属性定义

如果key和value相同那么可以简写

let a = 1
let b = 2
let obj = {a,b}//等于let obj={a:a,b:b}

计算属性名

对象初始化语法开始支持计算属性名。其允许在[]中放入表达式,计算结果可以当做属性名。这种用法和用方括号访问属性非常类似,也许你已经用来读取和设置属性了。现在同样的语法也可以用于对象字面值了

let name = 'bibi'
let person = {[name]:666} //{bibi:666}

方法定义

对象属性也可以是一个函数、getter、setter方法。有点像vue computed里面的getter和setter

var bibi = {
  _age: 18,
  get age() {
    return bibi._age
  },
  set age(val) {
    if (val < 100) {
      bibi._age = val
    } else {
      bibi._age = 100
    }
  }
}

如何实现a === 1 && a === 2 && a === 3 ?

用get劫持

var i = 0
Object.defineProperty(window,'a',{
    get(){
        i += 1
        return i
    }
})

a === 1 && a === 2 && a === 3  
//true

浅拷贝

var a = {a:1,b:2,c:3}
var b = Object.assign({},a)

或者
var a = {a:1,b:2,c:3}
var b = {...a}

属性修饰符

Object.defineproperty

如果你想给一个已经定义了属性的对象添加getter,setter,那么就可以使用Object.defineproperty,顺便说一下,vue的响应式就是通过Object.defineproperty对所有的属性进行劫持,把它们全部转化为getter和setter

var oldObj = {a:1,b:2}

Object.defineproperty(oldObj,'c',{
    get (){},
    set (val){}
})

属性描述符

对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一;不能同时是两者。

  1. 数据描述符和存取描述符均具有以下可选键值:
  • configurable 当且仅当该属性的 configurable 为 true 时,该属性描述符才能够被改变,同时该属性也能从对应的对象上被删除。默认为 false。
    //如果configurable为true,这个属性的除writable属性描述符才能更改
  • enumerable 当且仅当该属性的enumerable为true时,该属性才能够出现在对象的枚举属性中。默认为 false。
    //如果enumerable为true,那么for...inObject.keys()就能够遍历到这个属性

2. 数据描述符同时具有以下可选键值:
  • value 该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。默认为 undefined。
  • writable 当且仅当该属性的writable为true时,value才能被赋值运算符改变。默认为 false。 //如果writable为false,那么这个属性将不可写,但是并不会报错

3. 存取描述符同时具有以下可选键值:
  • get 一个给属性提供 getter 的方法,如果没有 getter 则为 undefined。该方法返回值被用作属性值。默认为 undefined。
  • set 一个给属性提供 setter 的方法,如果没有 setter 则为 undefined。该方法将接受唯一参数,并将该参数的新值分配给该属性。默认为 undefined。

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor(obj, prop)

方法返回指定对象上一个自有属性对应的属性描述符。(自有属性指的是直接赋予该对象的属性,不需要从原型链上进行查找的属性)

o = { bar: 42 }

d = Object.getOwnPropertyDescriptor(o, "bar")
// d {
//   configurable: true,
//   enumerable: true,
//   value: 42,
//   writable: true
// }

Object.getOwnPropertyNames()

Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。

var arr = ["a", "b", "c"];
console.log(Object.getOwnPropertyNames(arr).sort()); // ["0", "1", "2", "length"]

模块

export

命名导出

function cube(x) {
  return x * x * x
}
const foo = 'b'
export { cube,foo }

//这样的话,在其它脚本 (比如import),我们可以这样使用
import { cube, foo } from 'my-module.js'
//如果你要import引入的话那么名称必须相同,必须使用相应对象的相同名称。

默认导出

//只能有一个默认导出
export default function cube(x) {
  return x * x * x;
}

import zxczxczxczxc from 'my-module'
//这个名称可以随意更改

import

import {foo, bar} from '/modules/my-module.js'

import '/modules/my-module.js'
//模块仅为副作用(中性词,无贬义含义)而导入,而不导入模块中的任何内容。 这将运行模块中的全局代码, 但实际上不导入任何值。

import {exportName as newName} from '/modules/my-module.js'
//导入时可以重命名导出。例如,newName。

import * as bibi from '/modules/my-module.js'
//这将bibi插入当前作用域,其中包含来自位于/modules/my-module.js文件中导出的所有模块。
//在这里,访问导出意味着使用模块名称(在这种情况下为“bibi”)作为命名空间。例如,如果上面导入的模块包含一个paly(),你可以这样调用:
bibi.play()