admin 發表於 2022-11-29 18:49:17

JS : Object

let spaceship = {
'Fuel Type' : 'Turbo Fuel',
homePlanet : 'Earth',
color : 'silver',
'Secret Mission' : 'Discover life outside of Earth.'
};

spaceship.color = 'glorious gold';
spaceship.numEngines = 7;
delete spaceship['Secret Mission'];Object 基本用法。

admin 發表於 2022-11-29 19:12:51

let retreatMessage = 'We no longer wish to conquer your planet. It is full of dogs, which we do not care for.';

let alienShip = {
retreat() {
    console.log(retreatMessage);
},
takeOff() {
    console.log('Spim... Borp... Glix... Blastoff!');
}
};
alienShip.retreat();
alienShip.takeOff();When the data stored on an object is a function we call that a method. A property is what an object has, while a method is what an object does.

admin 發表於 2022-11-30 15:29:24

let spaceship = {
'Fuel Type' : 'Turbo Fuel',
homePlanet : 'Earth'
};

let greenEnergy = obj => {
obj['Fuel Type'] = 'avocado oil';
};

let remotelyDisable = obj => {
obj.disabled = true;
};

greenEnergy(spaceship);
remotelyDisable(spaceship);

console.log(spaceship);Pass a variable assigned to an object into a function as an argument.

admin 發表於 2022-11-30 15:35:40

let spaceship = {
    crew: {
    captain: {
      name: 'Lily',
      degree: 'Computer Engineering',
      cheerTeam() { console.log('You got this!') }
      },
    'chief officer': {
      name: 'Dan',
      degree: 'Aerospace Engineering',
      agree() { console.log('I agree, captain!') }
      },
    medic: {
      name: 'Clementine',
      degree: 'Physics',
      announce() { console.log(`Jets on!`) } },
    translator: {
      name: 'Shauna',
      degree: 'Conservation Science',
      powerFuel() { console.log('The tank is full!') }
      }
    }
};

for (let crewMember in spaceship.crew) {
console.log(`${crewMember}: ${spaceship.crew.name}`);
}

for (let crewMember in spaceship.crew) {
console.log(`${spaceship.crew.name}: ${spaceship.crew.degree}`);
}Looping Through Objects

admin 發表於 2022-11-30 17:43:13

const robot = {
model : '1E78V2',
energyLevel : 100,
provideInfo(){
    return `I am ${this.model} and my current energy level is ${this.energyLevel}.`
}
};
console.log(robot.provideInfo());this 的使用。

admin 發表於 2022-11-30 18:17:56

const robot = {
_model: '1E78V2',
_energyLevel: 100,
get energyLevel() {
    if (typeof(this._energyLevel) == 'number'){
      return `My current energy level is ${this._energyLevel}`;
    } else {
      return 'System malfunction: cannot retrieve energy level';
    }
}
};

console.log(robot.energyLevel);
Getters 的用法，最後的呼叫 robot.energyLevel 不用再加上小括弧 ( )。

admin 發表於 2022-12-2 18:34:55

const robot = {
_model: '1E78V2',
_energyLevel: 100,
_numOfSensors: 15,
get numOfSensors(){
    if(typeof this._numOfSensors === 'number'){
      return this._numOfSensors;
    } else {
      return 'Sensors are currently down.'
    }
},
set numOfSensors(num){
    if (typeof num === 'number' && num >= 0) {
      this._numOfSensors = num;
    } else {
      console.log('Pass in a number that is greater than or equal to 0');
    }
}
};

robot.numOfSensors = 100;
console.log(robot.numOfSensors);Along with getter methods, we can also create setter methods which reassign values of existing properties within an object.

admin 發表於 2022-12-2 18:50:28

const robotFactory = (model, mobile) => {
return {
    model : model,
    mobile : mobile,
    beep(){
      console.log('Beep Boop');
    }
}
}

const tinCan = robotFactory('P-500', true);
tinCan.beep();Factory Functions

admin 發表於 2022-12-2 18:53:31

function robotFactory(model, mobile){
return {
    model,
    mobile,
    beep() {
      console.log('Beep Boop');
    }
}
}

// To check that the property value shorthand technique worked:
const newRobot = robotFactory('P-501', false)
console.log(newRobot.model)
console.log(newRobot.mobile)Property Value Shorthand

admin 發表於 2022-12-2 18:58:05

const robot = {
model: '1E78V2',
energyLevel: 100,
functionality: {
    beep() {
      console.log('Beep Boop');
    },
    fireLaser() {
      console.log('Pew Pew');
    },
}
};

const { functionality } = robot;
functionality.beep();const { functionality } = robot;
和
const functionality = robot.functionality;
是一樣的。

admin 發表於 2022-12-2 19:09:49

const robot = {
        model: 'SAL-1000',
mobile: true,
sentient: false,
armor: 'Steel-plated',
energyLevel: 75
};

const robotKeys = Object.keys(robot);
console.log(robotKeys);

const robotEntries = Object.entries(robot);
console.log(robotEntries);

const newRobot = Object.assign({laserBlaster: true, voiceRecognition: true}, robot);
console.log(newRobot);Built-in Object Methods
頁: [1]
查看完整版本: JS : Object