2021.06.16（傳引數）

阿新 • • 發佈：2021-06-16

函式傳參和預設引數的區別，傳參如果傳的是引用地址，則會對這個引用產生影響，但是如果是預設引數，則是建立了一個新物件，對原引用沒有影響。

const person = {
  name: "Lydia",
  age: 21
}

const changeAge = (x = { ...person }) => x.age += 1
const changeAgeAndName = (x = { ...person }) => {
  x.age += 1
  x.name = "Sarah"
}

changeAge(person)
changeAgeAndName()

console.log(person)

result： name：'Lydia‘， age：22

拓展運算子的熟悉程度，只有C選項是將陣列變為了三個元素，其餘選項均為一個數組

function sumValues(x, y, z) {
    return x + y + z;
}

sumValues(...[1, 2, 3])

可選連操作符(?.)

作用是如果該操作符前面的屬性物件存在，則列印該屬性對應的內容，如果不存在則返回undefined

const person = {
    firstName: "Lydia",
    lastName: "Hallie",
    pet: {
        name:  
"Mara",
        breed: "Dutch Tulip Hound"
    },
    getFullName() {
        return `${this.firstName} ${this.lastName}`;
    }
};

console.log(person.pet?.name);
console.log(person.pet?.family?.name);
console.log(person.getFullName?.());
console.log(member.getLastName?.());

result：Mara undefined Lydia Hallie ReferenceError

indexOf返回的下標

const groceries = ["banana", "apple", "peanuts"];

if (groceries.indexOf("banana")) {
    console.log("We have to buy bananas!");
} else {
    console.log(`We don't have to buy bananas!`);
}

result：We don't have to buy bananas!

indexOf返回的下標是0，這是一個假值，所以觸發了else.

setter的認識

const config = {
    languages: [],
    set language(lang) {
        return this.languages.push(lang);
    }
};

console.log(config.language);

修改物件的屬性，如果呼叫的話返回的是undefined。

這個方法存在的意義是修改物件的屬性，如果呼叫的話返回的是undefined。

物件的解構賦值

const myFunc = ({ x, y, z }) => {
    console.log(x, y, z);
};

myFunc(1, 2, 3);

result：undefined undefined undefined

傳入的應該是一個擁有x y z三個屬性的物件，但是題目並未傳入一個物件，所以列印的是3個undefined.

function sayHi(name) {
  return `Hi there, ${name}`
}

console.log(sayHi())

由於模板字串中沒有接收到name，所以返回的是undefined.

const person = {
  name: "Lydia",
  age: 21
}

let city = person.city
city = "Amsterdam"

console.log(person)

仔細想想並未對person物件新增任何屬性

function checkAge(age) {
  if (age < 18) {
    const message = "Sorry, you're too young."
  } else {
    const message = "Yay! You're old enough!"
  }

  return message
}

console.log(checkAge(21))

result：挺坑的，意在考查const、let引起的塊級作用域，由於塊級作用域的存在，我們無法在塊級作用域之外訪問到宣告的變數，請記住這個題。

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1)
}

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1)
}

result：333 和 012，因為JS的事件迴圈機制，setTimeout屬於巨集任務，要等到同步程式碼執行完之後才能執行，var在此處定義的是全域性變數，因此同步程式碼執行完之後i已經變成了3，所以列印3個3，

但是let定義的變數會形成一個塊級作用域，因此是0 1 2

箭頭函式作用域問題

const shape = {
  radius: 10,
  diameter() {
    return this.radius * 2
  },
  perimeter: () => 2 * Math.PI * this.radius
}

shape.diameter()
shape.perimeter()

result：20和NaN，因為diameter中的this指的是shape中的radius，但是perimeter由於是箭頭函式所以，當我們呼叫 perimeter 時，this 不是指向 shape 物件，而是它的周圍作用域（在例子中是 window）。

2021-06-16 11:22:46