JS面試題目整理 JavaScript Interview Prep: Practice Problems 21~30

Type of Data Types/ Two Objects/ Array Constructor/ Array IndexOf/ Equivalent Numbers/ Objects and Strings/ Strings and Arrays/ Object Properties /X and Y/ Bind Method/ Withdraw From Account

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

21. Type of Data Types

問：
console.log(typeof null);
console.log(typeof undefined);
console.log(typeof {});
console.log(typeof []);

自己的回答：null/ undefined/ Object/ Object

……..？！

console.log(typeof null) = Object!
console.log(typeof null) = Object!!
console.log(typeof null) = Object!!!
console.log(typeof null) = Object!!!!
console.log(typeof null) = Object!!!!!

然後確認到底是 Array 還是 Object 的方法：

Array.isArray([]) = true
Array.isArray({}) = false

22. Two Objects

問：
const user1 = {
  name: ‘Jordan’,
  age: 28 }
const user2 = {
  name: ‘Jordan’,
  age: 28 }
console.log(user1 == user2)
console.log(user1 === user2)

自己的回答：false, false ，兩個物件儘管值相同，但參考的是分別的兩記憶體，但本質上是個不同的兩個東西。

如果設定成 user2 = user 1 ，此時參考的記憶體位置相同就會 true
const user1 = {
  name: ‘Jordan’,
  age: 28 }
const user2 = user 1
console.log(user1 == user2) //true
console.log(user1 === user2) //true

23. Array Constructor

var arr1 = []
var arr2 = new Array(50)
var arr3 = new Array(1, 2, ‘three’, 4, ‘five’)
var arr4 = new Array([1, 2, 3, 4, 5])
console.log(‘arr1: ‘, arr1)
console.log(‘arr2: ‘, arr2)
console.log(‘arr3: ‘, arr3)
console.log(‘arr4: ‘, arr4)

自己的回答： [] 、[50]（錯誤！）、[1, 2, ‘three’, 4, ‘five’]、[[1, 2, 3, 4, 5]]

解：
其他正確，但是 arr2 = new Array(50) = [ <10 empty slots>, … ] 
是一個長度為 50 但裡面的元素是空的陣列。

24. Array IndexOf

問：
console.log([10, 20, 30, 40, 50].indexOf(30))
console.log([{ name: ‘Pam’ }, { name: ‘Kent’ }].indexOf({ name: ‘Kent’ }))
console.log(‘hello world’.indexOf(‘o’))
console.log([[1], [2], [3], [4]].indexOf([2]))

自己的回答：因為 Array 和 Object 參考的記憶體不相同，所以會找不到會是undefined…….

然而！！！！！！

indexOf() 方法會回傳給定元素於陣列中第一個被找到之索引，若不存在於陣列中則回傳 -1。

console.log([10, 20, 30, 40, 50].indexOf(30)) = 2
console.log([{ name: ‘Pam’ }, { name: ‘Kent’ }].indexOf({ name: ‘Kent’ })) = -1
console.log(‘hello world’.indexOf(‘o’)) = 4
console.log([[1], [2], [3], [4]].indexOf([2])) = -1

25. Equivalent Numbers

問：
console.log(900.9 === 300.3 * 3);

自己的回答：false，因為 JS 的 number 後面還會有非常細微的小數，因此不會全然相同。

console.log(300.3 * 3) = 900.9000000000001

取得無浮動小數的方法：

1. console.log(Number((300.3 * 3).toFixed(2)));
2. console.log(Number((300.3 * 3).toPrecision(12)));
3. console.log(((300.3 * 10) * 3) / 10);

26. Objects and Strings

問：
var string1 = ‘Tampa’;
var string2 = string1;
string1 = ‘Venice’;
console.log(string2);
_____
var person1 = {
  name: ‘Alex’,
  age: 30
}
var person2 = person1;
person2.name = ‘Kyle’;
console.log(person1);

自己的回答：第一題因為純值傳值直接拷貝建立新的記憶體的特性，string2 不受 string1 的影響會是 ‘Tampa’ 、第二題由於物件傳參考特性，參考相同的記憶體，person1 會受 person2 改變而改變，故為 { name: ‘Kyle’, age: 30 }。

27. Strings and Arrays

const data1 = ‘Jordan Smith’;
const data2 = [].filter.call(data1, function(elem, index) {
  return index > 6});
console.log(data2);

自己的回答：雖然看不太懂，但感覺是[‘S’, ’m’, ’i’, ’t’, ’h’]

解：
[].filter 等同於 Array.prototype.filter
可以運用在 string 上的 methods
only use 'read-only' methods: filter, forEach, map, some, every, etc.
cannot use: push, pop, splice, shift, reverse, etc.

28. Object Properties

問：
const a = {};
const b = { name: ‘b’ };
const c = { name: ‘c’ };
a[b] = 200;
a[c] = 400;
console.log(a[b]);

key: Object 的屬性只能是 String

解：
將 b, c 帶入作為 a 的屬性時如下：
a[{ name: ‘b’ }] = 200
a[{ name: ‘c’ }] = 400
由於 property 只能是string，因此默認將陣列轉為 "[object object]" 的字串形式
a["[object object]"] = 200 --1
a["[object object]"] = 400 --2
因為都是 "[object object]" 屬性，所以 --2 覆蓋 --1
因此 console.log(a[b])，也就是 console.log(a["[object object]"]) ，答案會是 400

29. X and Y

問：
var x = 10;
  function y() {
    x = 100;
    return;
    function x() {} }
y();
console.log(x);

自己的回答：100，但是正確答案是10！

邏輯是這樣的，函式比變數提到更上層，而在此，函式命名為 x ，可以當作在創造階段已經被當作宣告了，在 y 函式內但因為被宣告了所以不會變成全域變數！！！

經過後 hoisting 後：
var x = 10;
function y() {
  function x() {} //函式會被比變數優先提升到上方
    x = 100;
    return; }
y();
console.log(x); // x = 10

如果今天題目改成 function j() 的話，因為 j 不是 x ，等同 x = 100 沒有宣告過，所以 x 還是會變成全域變數，這時答案就會等於 100。

經過後 hoisting 後：
var x = 10;
function y() {
  function j() {} //函式會被比變數優先提升到上方
    x = 100;
    return; }
y();
console.log(x); // x = 100

29. Bind Method

問：
Describe the bind() function method
1. Describe how it works
2. Explain the parameters that it takes
3. Code out an example of how bind() is used

bind() 會建立一個新函式。該函式被呼叫時，會將 this 關鍵字設為給定的參數，並在呼叫時，帶有提供之前，給定順序的參數。

this.distance = 10000;
const roadTrip1 = {
  distance: 3000,
  getDistance: function(unit, caption) {
    return this.distance + unit + caption }
}
const roadTrip2 = {
  distance: 5000 };
const getTripDistance = roadTrip1.getDistance.bind(roadTrip2, ‘km’)
//可以固定參數也很是合做柯里化的運用
getTripDistance(‘ in total’);

30. Withdraw From Account

問：
const account1 = {
  name: ‘Jen’,
  totalAmount: 5000,
  deductAmount: function(amount) {
    this.totalAmount -= amount;
    return ‘Amount in account: ‘ + this.totalAmount }
}
const account2 = {
  name: ‘James’,
  totalAmount: 8000 }
const withdrawFromAccount = function(amount) {
  return account1.deductAmount.bind(account2, amount) }
console.log(withdrawFromAccount(500)())
console.log(withdrawFromAccount(200)())

自己的回答：

實際帶入大致長這樣：
bind 帶入的 this 會指向 account2，因此 this.totalAmount = 8000
初次代入 500 所以是 8000 - 500 = 7500
再次帶入 300 所以是 7500 - 200 = 7300
function withdrawFromAccount(amount) {
  return function(amount) {
    this.totalAmount -= amount;
    return 'Amount in account: ' + this.totalAmount;
  }.bind(account2, amount);
}
console.log(withdrawFromAccount(500)()) // 7500
console.log(withdrawFromAccount(200)()) // 7300