JS 日常練習

這裡蒐集平常看到的小題目，無論做對或做錯，都記錄下來。

No.1

What will this code log to the consol?

const foo = [1, 2, 3];
const [n] = foo;
console.log(n); // 1

使用解構賦值 (Destructuring assignment) ，可以把陣列或物件中的資料解開擷取成為獨立變數。
解構賦值使用類似語法；不過在指定敘述式的左側，要宣告從來源變數接收解開值之變數。

const x = [1, 2, 3, 4, 5];
const [y, z] = x;
console.log(y); // 1
console.log(z); // 2

No.2

What does this code print to the consol?

const x =[1, 2];
const y =[5, 7];
const z =[x,y];
console.log(z); // [1,2,5,7]

使用 ES6 的解構賦值 (Destructuring assignment)，可以把陣列或物件中的資料解開擷取。

No.3

What value is assigned to total after this code executes?

const sum = function(num1, num2 =2, num3 = 3){
  return num1 + num2 + num3
}

let values = [1, 5];
let total = sum(4, ...values);
console.log(total); // 10

一樣使用 ES6 的解構賦值 (Destructuring assignment)

No.4

What line of code causes this code segment to throw an error?

const lion = 1;
let tiger = 2;
var bear;

++lion;
bear += lion + tiger;
tiger++;

++lion;，因為是以 const 賦值，如果值為原始型別，就無法再度賦值。如果是物件型別則可修改物件裡的內容。
所以答案是：++lion;，because lion cannot be reassigned a value.

No.5

What is the output that is printed when the div containing the text “click Here” is clicked?

<div id="A">
  <div id="B">
    <div id="C">Click Here</div>
  </div>
</div>

document.querySelectorAll("div").forEach(e => {
  e.onclick = e => console.log(e.currentTarget.id);
});

答案是 “C” “B” “A”，冒泡（bubbling）
可參考這篇：冒泡和捕获

No.6

把缺的 code 補上

// Missing Line
for(var i = 0; i < vowels.length; i++){
  console.log(vowels[i]); // a e i o u
}

別想太多，就是 vowels 變數沒定義與賦值：let vowels = "aeiou"

No.7

Which snippet could you add to this code to print “YOU GOT THIS” to the console?

let cipherText = [..."YZOGUT QGMORTZ MTRHTILS"];
let plainText = "";

/* Missing Snippet */

console.log(plainText); // YOU GOT THIS

答案：

for(let [index, value] of cipherText.entries()){
  plainText += index % 2 === 0 ? value : ""
// 如果 index 除二餘數是零，就取 value 不然就空字串
  console.log(index,value); 
}

原來可以使用 for..of 這樣取到 index 和 value !

No.8

Which code would you yse to access the Irish flag?

var flagsJSON = '{"countries" : [' +
'{"country":"Ireland" , "flag":"irish"}, ' +
'{"country":"Serbia" , "flag":"serbia"}, ' +
'{"country":"Peru" , "flag":"peru"} ]}';

var flagDatabase = JSON.parse(flagsJSON);
console.log(flagDatabase);

答案：flagDatabase.countries[0].flag

No.9

What statement can be used to select the element from the DOM containing the “The LinkedIn Learning library has great Javascript courses” from this markup”?

<h1 class="content">LinkedIn Learning</h1>
  <div class="content">
    <span class="content">The LinkedIn Learning library has great Javascript courses</span>
  </div>

答案：document.querySelector("span.content");

No.10

What is wrong with this code?

const foo = {
  bar(){
    console.log("Hello World!");
  },
  name: "Tracy",
  age: 42,
}

一切正常，不會出錯。

No.11

Which line could you add to this code to print “jaguar” to the console?

let animals = ["jaguar", "eagle"];
// Missing Line
let 
console.log(animals.pop()); // prints jaguar

答案：animals.reverse()
Array.prototype.pop() 會刪除陣列的最後一個元素，並回傳刪除元素，先使用 reverse() 將陣列反轉，在取出最後一個元素。

No.12

What is the output of the code?

let rainForests = ["Amazon", "Borneo", "Cerrado", "Congo"];
rainForests.splice(0,2)
console.log(rainForests);

答案： ['Cerrado', 'Congo']
splice(0,2):從 index 0 切兩個掉。