JS面試題目整理 JavaScript Interview Prep: Practice Problems 11~20

Use Strict/ Curry Function/ Counter Function/ Logging X and Y/ “call” and “apply” Methods/ Determine “list2”/ Singly or Doubly Invoked Function/ JSON Data/ Order Logged Out/Making an Object

本筆記出自：JavaScript Interview Prep: Practice Problems

11. Use Strict

問：
What does using ’strict mode’ do to your code?
What are the benefits of using strict mode?

自己的回答：簡單來說就是規範糾錯程式碼，讓程式碼具有更高度的穩定性，只是不是每個瀏覽器都支援這點必須注意。

詳細內容與相關規範可以參考：鐵人賽：JavaScript 的嚴格模式 “use strict”

12. Curry Function

問：科里化下列函式
function getProduct(num1, num2) {
  return num1 * num2 }
getProduct(10, 20)

自己的回答：

function getProduct(num1) {
  return function(num2) {
    return num1 * num2};
}
getProduct(10)(20);

關於柯里化可以參考上一篇的第一題：JS面試題目整理 JavaScript Interview Prep: Practice Problems 1~10

之前寫得這篇文章下半也有提到：克服JS奇怪的部分_call()、apply() 與 bind()

13. Counter Function

問：寫出一函式 myFunc 每呼叫一次便會回傳呼叫的次數（要全寫在函式中）
function myFunc() { 略 }

key: 代表次數是會累加的，即函式內的變數狀態被保存著，使用閉包！

function myFunc() {
  let count = 0;
  return function() {
    count++;
    return count}
}
const invokeTimes = myFunc();
console.log(myFunc()) //1
console.log(myFunc()) //2
console.log(myFunc()) //3

14. Logging X and Y

問題：console.log 的 x y 直分別為多少？
(function() {
  var x = y = 200;
})();
console.log(‘y:’ ,y) //not defined
console.log(‘x:’ ,x) //200

自己的回答：

主要在考作用域的觀念，function 內可以看成 var x = 200; y = 200; 而函式中未宣告的變數會變成全域變數！

因此，在此例中 x 有被宣告，是區域變數執行後即在內部銷毀，外部環境無法取得故為 not defined，而 y 則因為未宣告，變成全域變數，故外部能夠讀取到值 200。

＊若在嚴格模式下，y也會是 not defined。

15. “call” and “apply” Methods

Describe the javascript call() and apply() methods.
Address the following:
  1. How do they function?
  2. What arguments do they take?
  3. How are they different

自己的回答：

1. call 與 apply 用來呼叫函式，而第一個傳入的參數指定特定的物件為 this。
2. call 分別給入參數，而 apply 的參數必為陣列。
3. call 與apply 主要的不同在於參數的傳遞方式，一個分別給定參數一個接收陣列。

詳細可以參考：克服JS奇怪的部分_call()、apply() 與 bind()

解：
call的用法
const car1 = {
  brand: 'Porsche',
  getCarDescription: function(cost, year, color) {
   console.log(`This car is a ${this.brand}. The price is $${cost}. The year is ${year}. The color is ${color}.\n`)}}
const car2 = {
  brand: 'Lamborghini'}
const car3 = {
  brand: 'Ford'}

car1.getCarDescription(80000, 2010, 'blue');
//使用 call 第一個參數指定this為 car2，藉此改變brand
car1.getCarDescription.call(car2, 90000, 201, 'Silver');
_____
apply 的用法
//使用 apply 第一個參數指定this為 car3，藉此改變brand，接著傳入陣列作為參數
car1.getCarDescription.apply(car3, [35000, 2014, 'Black']);

16. Determine “list2”

問：求 console.log 值?
let list1 = [1, 2, 3, 4, 5]
let list2 = list1
list1.push(6, 7, 8)
console.log(list2)

自己的回答： list2 = [1, 2, 3, 4, 5, 6, 7, 8]

因為物件傳參考的特性，list2 = list1 參考的是同一個記憶體，因此當 list1 的參考遭改變時， list2 也會改變。

＊等號運算子會設定一個新的記憶體空間，因此假如此時再設定 list1 = [2, 4, 6, 8]，而這時list依然等於 [1, 2, 3, 4, 5, 6, 7, 8] 不會受到影響。

可以參考之前寫得文章：克服JS奇怪的部分_傳值和傳參考

問：如何讓 list2 = list1 但不受到傳參考的影響？

自己的回答：

a. 使用陣列展開

let list1 = [1, 2, 3, 4, 5]
let list2 = [...list1]
list1.push(6, 7, 8)
console.log(list2) // [1, 2, 3, 4, 5]

b. 使用 slice 語法

let list1 = [1, 2, 3, 4, 5]
let list2 = list1.slice(0) //list1.slice()也可，slice(開始,結束)，
list1.push(6, 7, 8)
console.log(list2) // [1, 2, 3, 4, 5]

c. 使用 JSON 轉換（深拷貝）

let list1 = [1, 2, 3, 4, 5]
let list2 = JSON.parse(JSON.stringify(list1))
list1.push(6, 7, 8)
console.log(list2) // [1, 2, 3, 4, 5]

d. 使用 concat 語法（合併陣列）

let list1 = [1, 2, 3, 4, 5]
let list2 = list1.concat([])
list1.push(6, 7, 8)
console.log(list2) // [1, 2, 3, 4, 5]

e. 使用 forEach 和 push

補充：關於JS中的淺拷貝(shallow copy)以及深拷貝(deep copy)

17. Singly or Doubly Invoked Function

問：試寫可以以下面二種方式呼叫進行加總之函式
function getTotal() {
}
getTotal(10, 20)--1
getTotal(10)(20)--2

key: 不傳入參數也能得到參數的手法：arguments

試著寫了一下：
function getTotal() {
  const args = [...arguments];
  let total = 0;
if (args.length > 1) {
    return args.forEach((arg) => (total += arg));
  } else {
    return function(num2) { //閉包的第二個參數可以直接寫在這
    return args[0] + num2}}}
getTotal(1, 2)
getTotal(1)(2)

18. JSON Data

問：
  1. Describe what JSON format is.
  2. Delete the data types not permitted in JSON.
  3. Replace placeholder-text with the corresponding data type, properly formatted as JSON.
const myJsonObj = {
  myString: [some string],
  myNumber: [some number],
  myNull: [null],
  myBoolean: [false],
  myUndefined: [undefined],
  myArray: [some array],
  myFunction: [some function],
  myObject: [some object]};

自己的回答：JSON是一種資料傳遞格式，具備 key 與 value 類似物件的配對。相較一般物件，JSON 的格式相對嚴格。

詳解：MDN、JSON 是一種輕量的資料傳輸格式。JSON擁有簡單易懂、方便電腦編譯與產生的優點。

JSON 不收 undefined 與 function 格式，key 必為雙引號字串。
const myJsonObj = {
  "myString": "Iris",
  "myNumber": 17,
  "myNull": null,
  "myBoolean": false,
  "myArray": ["Apple", "Banana", "Orange"],
  "myObject": {"city":"Taipei", "gender":"Female"}};

19. Order Logged Out

問：請問1234會以什麼樣的順序列印出來？
function logNumbers() {
  console.log(1);
  setTimeout(function() {
    console.log(2)}, 1000);
  setTimeout(function() {
    console.log(3)}, 0);
 console.log(4);
}
logNumbers();

自己的回答：setTimeout 的函式會先被放在事件佇列中最後才印出來，所以依照順序會是1、4、3、2。

20. Making an Object

問：
List and describe 3 different ways of creating an object in javascript

關於 constructor function 可以參考之前寫得文章：克服JS奇怪的部分_物件導向與原型繼承、克服JS奇怪的部分_建立物件

答：
1. 直接用 {} 建立
const myBoat = {
  length: 24,
  maxSpeed: 45,
  passengers: 14,
  getLength: function() {return this.length}
}
2. 使用 new Object() 
const student = new Object() //建立空陣列，並逐一加入
student.grade = 12;
student.gradePointAverage = 3.7;
student.classes = [“English”, “Algebra”, “Chemistry”];
student.getClasses = function() {return this.classes;};
3. 使用建構函式 constructor function
function Car(color, brand, year) {
  this.color = color
  this.brand = brand
  this.year = year
}
Car.prototype.getColor = function() {
  return this.color }
const carlysCar = new Car(‘blue’, ‘ferarri’, 2015);
const jimsCar = new Car(‘red’, ‘tesla’, 2014);