常見的資料結構解法

ㄧ、Array of object 陣列中有物件

題目一:
getStudentNames([
{ name: “Steve”},
{ name: “Mike”},
{ name: “John”}
])
最後要得到的解答:[“Steve”, “Mike”, “John”]

解法:用 array 的 map method

function getStudentNames(students) {
// students 在這裡就是上面的 array of object
var map = students.map(item => item.name);
// item 在這裡指的就是 students 裡的每一個 object
return map;
}

題目二:這裡有一串 ID 與名字。
const list = [
  {
    id: "1234567890",
    name: "Nina Ricci",
  },
  {
    id: "2345678901",
    name: "Hello Kitty",
  },
  {
    id: "3456789012",
    name: "Pusheen the cat",
  },
];

取出 key 變成 Array:

const idList = list.map(item => Object.keys(item)); 
console.log(idList);
// Array [Array ["id", "name"], Array ["id", "name"], Array ["id", "name"]]

取出 Value 變成 Array:

const idList = list.map(item => Object.values(item)); 
console.log(idList);
// Array [Array ["1234567890", "Nina Ricci"], Array ["2345678901", "Hello Kitty"], Array ["3456789012", "Pusheen the cat"]]

取得 id 變成 Array:
*使用 Array.map 迭代陣列,並將 callback 中的執行結果組成新陣列後回傳
*在迭代陣列過程中,使用 Object.values 取得第一個屬性值,也就是 id 的值。

const idList = list.map(item => Object.values(item)[0]); // 0 表示第一個屬性值
console.log(idList); 
// ["1234567890", "2345678901", "3456789012"]

取得 name 變成 Array:

const nameList = list.map(item => Object.values(item)[1]); // 1 表示第二個屬性值
console.log(nameList);
// ["Nina Ricci", "Hello Kitty", "Pusheen the cat"]

題目三:這裡有一串 ID 與名字,key 是 ID,value 是名字。
[
  {
    "1234567890": "Nina Ricci",
  },
  {
    "2345678901": "Hello Kitty",
  },
  {
    "3456789012": "Pusheen the cat",
  },
]

取得 Id 值變成 Array:

var list =[
 {
 “1234567890”: “Nina Ricci”,
 },
 {
 “2345678901”: “Hello Kitty”,
 },
 {
 “3456789012”: “Pusheen the cat”,
 },
]

const idList = list.map(item => Object.keys(item)[0]);
console.log(idList);
//Array ["1234567890", "2345678901", "3456789012"]

**如果要變成 Array of Array

const idList = list.map(item => Object.keys(item));
console.log(idList);

//Array [Array ["1234567890"], Array ["2345678901"], Array ["3456789012"]]

取得 value 值便變成 Array:

var list =[
 {
 “1234567890”: “Nina Ricci”,
 },
 {
 “2345678901”: “Hello Kitty”,
 },
 {
 “3456789012”: “Pusheen the cat”,
 },
]

const idList = list.map(item => Object.values(item)[0]);
console.log(idList);

//Array ["Nina Ricci", "Hello Kitty", "Pusheen the cat"]

**如果要變成 Array of Array
const idList = list.map(item => Object.values(item));
console.log(idList);
// Array [Array ["Nina Ricci"], Array ["Hello Kitty"], Array ["Pusheen the cat"]]

Arrow Function + map method recall

var materials = [
 ‘Hydrogen’,
 ‘Helium’,
 ‘Lithium’,
 ‘Beryllium’
];

console.log(materials.map(material => material.length));
// expected output: Array [8, 6, 7, 9]
從一般 function 到 Arrow 簡化寫法:
materials.map(function(material) { 
 return material.length; 
}); // [8, 6, 7, 9]

materials.map((material) => {
 return material.length;
}); // [8, 6, 7, 9]

materials.map(({length}) => length); // [8, 6, 7, 9]

Array 常用的 map method

var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]

二、常見 Object 解法

1.:Object -> Array(拿 key、value、key + value)

let user = {
  a: "b",
  c: "d"
};
拿 property:
console.log(Object.keys(user)); // Array ["a", "c"]
拿 property value:
console.log(Object.values(user)); //Array ["b", "d"]
拿 property & value:
console.log(Object.entries(user)); // Array [Array ["a", "b"], Array ["c", "d"]]

2.用 loop 讀出個別的值

let user = {
  a: "b",
  c: "d"
};

拿個別 key:

for (let value of Object.keys(user)) {
  console.log(value); 
}

// 讀出來會是:
"a"
"c"

拿個別 value:

for (let value of Object.values(user)) {
  console.log(value); 
}

// 讀出來會是:
"b"
"d"

3.拿出個別對應的 key 跟 value:

let user = {
  a: "b",
  c: "d"
};

for(let key in user) {
    console.log(key);
    let value = user[key];
    console.log(value);
}

//讀出來的會是
"a"
"b"
"c"
"d"

Object.keys, values, entries

題目ㄧ:

There is a salaries object with arbitrary number of salaries.

Write the function sumSalaries(salaries) that returns the sum of all salaries

*If salaries is empty, then the result must be 0

let salaries = {
  "John": 100,
  "Pete": 300,
  "Mary": 250
};

console.log(sumSalaries(salaries) ); // 650

解法:using Object.valuesand the for..of loop

function sumSalaries(salaries) {

let sum = 0;
for(let salary of Object.values(salaries)){
 sum += salary;
}
return sum; // 650
}

let salaries = {
  "John": 100,
  "Pete": 300,
  "Mary": 250
};

console.log( sumSalaries(salaries) ); // 650

題目二:

Write a function count(obj) that returns the number of properties in the object:

let user = {
  name: 'John',
  age: 30
};

console.log( count(user) ); // 2

解法:

function count(obj){

return Object.keys(obj).length;

}

let user = {
 name: ‘John’,
 age: 30
};

console.log(count(user)); // 2

三、Object of Object 物件中有物件

  • 使用 Array.map、Object.values 和 Object.keys 處理一連串的資料
當拿到一串 object of object 的值

{
  "1234567890": {
    id: "1234567890",
    name: "Nina Ricci",
  },
  "2345678901": {
    id: "2345678901",
    name: "Hello Kitty",
  },
  "3456789012": {
    id: "3456789012",
    name: "Pusheen the cat",
  },
}

取得 Key 的陣列:使用 Object.keys 取得物件的鍵值,組成陣列後回傳。

const idList = Object.keys(list);
console.log(idList);
// Array ["1234567890", "2345678901", "3456789012"]

取得 Value 的陣列:使用 Object.values 取得物件的 value,組成陣列。

const nameList = Object.values(list).map(item => item.name);
console.log(nameList);
// Array ["Nina Ricci", "Hello Kitty", "Pusheen the cat"]

進階寫法:直接透過 index 取

[‘a’, ‘b’].map( (value, key, array) => console.log(value, key, array));
//會拿到以下:
"a" 0 Array ["a", "b"] 
"b" 1 Array ["a", "b"]
原寫法:
['a', 'b'].map(k);
function k(value, key, array){
 console.log(value, key, array);
}