跳到主要内容

语法

2023年06月18日
柏拉文
越努力，越幸运

一、创建​

1.1 通过字面量​

const obj = {};
obj.name = '柏拉图';

问题

  • 问题一、通过字面量创建对象和通过构造函数创建对象有什么区别?

    答: 字面量创建对象,不会调用Object构造函数, 简洁且性能更好;new Object() 方式创建对象本质上是方法调用，涉及到在proto链中遍历该方法，当找到该方法后，又会生产方法调用必须的 堆栈信息，方法调用结束后，还要释放该堆栈，性能不如字面量的方式。

1.2 通过构造函数​

const obj = new Object();
obj.name = '柏拉图';

1.3 批量创建对象​

通过工厂模式批量创建对象

class Person {
    constructor(name,grade){
        this.name = name;
        this.grade = grade;
    }
    say(){
        console.log(this.name+'正在说');
    }
    do(){
        console.log(this.name+'正在做');
    }
}
class Animal{
    constructor(name,color){
        this.name = name;
        this.color = color;
    }
    eat(){
        console.log(this.name+'在吃');
    }
    run(){
        console.log(this.name+'在跑');
    }
}
class Creator{
    createPerson(name,grade){
        return new Person(name,grade);
    }
    createAnimal(name,color){
        return new Animal(name,color);
    }
}

const creator = new Creator();
const person1 = creator.createPerson('李白','诗仙');
person1.say();
person1.do();
const person2 = creator.createPerson('杜甫','诗圣');
person2.say();
person2.do();
const person3 = creator.createPerson('白居易','诗诗');
person3.say();
person3.do();
const animal1 = creator.createAnimal('小花','白色');
animal1.eat();
animal1.run();
const animal2 = creator.createAnimal('小兰','蓝色');
animal2.eat();
animal2.run();

通过构造函数批量创建对象

function Person(name,age,sex){
  this.name = name;
  this.age = age;
  this.sex = sex;
  this.say = function(){
    console.log(this.name+'正在说');
  }
}

const person1 = new Person('柏拉图1',23,'男');
person1.say(); // 柏拉图正在说
console.log(person1.__proto__.constructor.name); // Person

const person2 = new Person('柏拉图2',23,'男');
person2.say(); // 柏拉图正在说
console.log(person2.__proto__.constructor.name); // Person

  • 优势: 可以明确每一个对象的类型(对象.proto.constructor)

  • 不足:每创建一个对象，需要为该对象的函数去创建一个函数对象的实例。这样做有点浪费内存空间。比如说person1.say 和 person2.say 他俩的引用地址是不同的，但是作为函数来说，同一个函数没有必要存储多个引用地址。

二、简写​

2.1 方法简写​

ES6之前
const obj = {
  say:function(){
    console.log('说话');
  },
  run:function(){
    console.log('跑步');
  }
}
ES6新增
const obj = {
  say(){
    console.log('说话');
  },
  run(){
    console.log('跑步');
  }
}

2.2 属性同名简写​

ES6之前
const label = '柏拉图';
const value = 23;
const obj = {
  label:label,
  value:value
}
ES6之后
const label = '柏拉图';
const value = 23;
const obj = {
  label,
  value
}

三、解构​

3.1 单层解构​

let obj={
    name:'张文强',
    age:23
}
let {name,age}=obj;
console.log(name);
console.log(age);

3.2 多层解构​

let obj={name:'张文强',like:{music:'音乐'}}
let {name,like:{music}}=obj;
console.log(music);

3.3 别名解构​

let obj={
    name_label:'张文强',
    age_label:23
}
let {name_label:name,age_label:age}=obj;
console.log(name);
console.log(age);

- [特点]  对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者

    let obj={
        name_label:'张文强',
        age_label:23,
    }
    let {name_label:name,age_label:age}=obj;
    console.log(name_label);//报错 没有定义 name_label is not defined
    console.log(name);//张文强
    console.log(age_label);//报错 没有定义 age_label is not defined
    console.log(age);//23

3.4 默认解构​

let obj={
    name:'张文强',
    age:23
}
let {name,age,like='喜欢'}=obj;
console.log(name);
console.log(age);
console.log(like);

- [特点]  ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效

    let obj={
        name:'张文强',
        age:23,
        like:undefined
    }
    let {name,age,like='喜欢'}=obj;
    console.log(name);
    console.log(age);
    console.log(like); // 喜欢
    //结果： undefined 严格等于 undefined,所以 like 取默认值
    
    let obj={
        name:'张文强',
        age:23,
        like:null
    }
    let {name,age,like='喜欢'}=obj;
    console.log(name);
    console.log(age);
    console.log(like); // null
    //结果： null 不严格等于 undefined,所以 like 默认值无效，