JS : Object

admin

1. let spaceship = {
   
2.   'Fuel Type' : 'Turbo Fuel',
   
3.   homePlanet : 'Earth',
   
4.   color : 'silver',
   
5.   'Secret Mission' : 'Discover life outside of Earth.'
   
6. };
   
7. 
   
8. spaceship.color = 'glorious gold';
   
9. spaceship.numEngines = 7;
   
10. delete spaceship['Secret Mission'];

複製代碼

Object 基本用法。

admin

1. let retreatMessage = 'We no longer wish to conquer your planet. It is full of dogs, which we do not care for.';
   
2. 
   
3. let alienShip = {
   
4.   retreat() {
   
5.     console.log(retreatMessage);
   
6.   },
   
7.   takeOff() {
   
8.     console.log('Spim... Borp... Glix... Blastoff!');
   
9.   }
   
10. };
    
11. alienShip.retreat();
    
12. 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

1. let spaceship = {
   
2.   'Fuel Type' : 'Turbo Fuel',
   
3.   homePlanet : 'Earth'
   
4. };
   
5. 
   
6. let greenEnergy = obj => {
   
7.   obj['Fuel Type'] = 'avocado oil';
   
8. };
   
9. 
   
10. let remotelyDisable = obj => {
    
11.   obj.disabled = true;
    
12. };
    
13. 
    
14. greenEnergy(spaceship);
    
15. remotelyDisable(spaceship);
    
16. 
    
17. console.log(spaceship);

複製代碼

Pass a variable assigned to an object into a function as an argument.

admin

1. let spaceship = {
   
2.     crew: {
   
3.     captain: {
   
4.         name: 'Lily',
   
5.         degree: 'Computer Engineering',
   
6.         cheerTeam() { console.log('You got this!') }
   
7.         },
   
8.     'chief officer': {
   
9.         name: 'Dan',
   
10.         degree: 'Aerospace Engineering',
    
11.         agree() { console.log('I agree, captain!') }
    
12.         },
    
13.     medic: {
    
14.         name: 'Clementine',
    
15.         degree: 'Physics',
    
16.         announce() { console.log(`Jets on!`) } },
    
17.     translator: {
    
18.         name: 'Shauna',
    
19.         degree: 'Conservation Science',
    
20.         powerFuel() { console.log('The tank is full!') }
    
21.         }
    
22.     }
    
23. };
    
24. 
    
25. for (let crewMember in spaceship.crew) {
    
26.   console.log(`${crewMember}: ${spaceship.crew[crewMember].name}`);
    
27. }
    
28. 
    
29. for (let crewMember in spaceship.crew) {
    
30.   console.log(`${spaceship.crew[crewMember].name}: ${spaceship.crew[crewMember].degree}`);
    
31. }

複製代碼

Looping Through Objects

admin

1. const robot = {
   
2.   model : '1E78V2',
   
3.   energyLevel : 100,
   
4.   provideInfo(){
   
5.     return `I am ${this.model} and my current energy level is ${this.energyLevel}.`
   
6.   }
   
7. };
   
8. console.log(robot.provideInfo());

複製代碼

this 的使用。

admin

1. const robot = {
   
2.   _model: '1E78V2',
   
3.   _energyLevel: 100,
   
4.   get energyLevel() {
   
5.     if (typeof(this._energyLevel) == 'number'){
   
6.       return `My current energy level is ${this._energyLevel}`;
   
7.     } else {
   
8.       return 'System malfunction: cannot retrieve energy level';
   
9.     }
   
10.   }
    
11. };
    
12. 
    
13. console.log(robot.energyLevel);
    

複製代碼

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

admin

1. const robot = {
   
2.   _model: '1E78V2',
   
3.   _energyLevel: 100,
   
4.   _numOfSensors: 15,
   
5.   get numOfSensors(){
   
6.     if(typeof this._numOfSensors === 'number'){
   
7.       return this._numOfSensors;
   
8.     } else {
   
9.       return 'Sensors are currently down.'
   
10.     }
    
11.   },
    
12.   set numOfSensors(num){
    
13.     if (typeof num === 'number' && num >= 0) {
    
14.       this._numOfSensors = num;
    
15.     } else {
    
16.       console.log('Pass in a number that is greater than or equal to 0');
    
17.     }
    
18.   }
    
19. };
    
20. 
    
21. robot.numOfSensors = 100;
    
22. console.log(robot.numOfSensors);

複製代碼

Along with getter methods, we can also create setter methods which reassign values of existing properties within an object.

admin

1. const robotFactory = (model, mobile) => {
   
2.   return {
   
3.     model : model,
   
4.     mobile : mobile,
   
5.     beep(){
   
6.       console.log('Beep Boop');
   
7.     }
   
8.   }
   
9. }
   
10. 
    
11. const tinCan = robotFactory('P-500', true);
    
12. tinCan.beep();

複製代碼

Factory Functions

admin

1. function robotFactory(model, mobile){
   
2.   return {
   
3.     model,
   
4.     mobile,
   
5.     beep() {
   
6.       console.log('Beep Boop');
   
7.     }
   
8.   }
   
9. }
   
10. 
    
11. // To check that the property value shorthand technique worked:
    
12. const newRobot = robotFactory('P-501', false)
    
13. console.log(newRobot.model)
    
14. console.log(newRobot.mobile)

複製代碼

Property Value Shorthand

admin

1. const robot = {
   
2.   model: '1E78V2',
   
3.   energyLevel: 100,
   
4.   functionality: {
   
5.     beep() {
   
6.       console.log('Beep Boop');
   
7.     },
   
8.     fireLaser() {
   
9.       console.log('Pew Pew');
   
10.     },
    
11.   }
    
12. };
    
13. 
    
14. const { functionality } = robot;
    
15. functionality.beep();

複製代碼

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

admin

1. const robot = {
   
2.         model: 'SAL-1000',
   
3.   mobile: true,
   
4.   sentient: false,
   
5.   armor: 'Steel-plated',
   
6.   energyLevel: 75
   
7. };
   
8. 
   
9. const robotKeys = Object.keys(robot);
   
10. console.log(robotKeys);
    
11. 
    
12. const robotEntries = Object.entries(robot);
    
13. console.log(robotEntries);
    
14. 
    
15. const newRobot = Object.assign({laserBlaster: true, voiceRecognition: true}, robot);
    
16. console.log(newRobot);

複製代碼

Built-in Object Methods