JavaScript 筆記02

接筆記01

5.for / forEach / for-in / for-of

不多 bb，直接看代碼以蕴。

// 循環(huán)數(shù)組
let array = ['a', 'b', 'c'];
// 普通 for 循環(huán)
for (let index = 0; index < array.length; index++) {
    const element = array[index];
    console.log(element);
}
// forEach 循環(huán)
// 不能使用 break 語句中斷循環(huán)妇智，也不能使用 return 語句返回到外層函數(shù)
array.forEach(element => {
    console.log(element);
});
// for-in 循環(huán)
// 不推薦值戳，因?yàn)檫@里的 index 不是數(shù)字劫流，而是字符串庇楞，計(jì)算時(shí)用到很容易出錯(cuò)
// 遍歷出來后的順序也可能隨機(jī)
for(const index in array) { 
    console.log(typeof index);
    console.log(array[index]);
}
// for-of 循環(huán)
// 這是最簡(jiǎn)潔、最直接的遍歷數(shù)組元素的語法
// 這個(gè)方法避開了for-in循環(huán)的所有缺陷
// 與forEach()不同的是极祸，它可以正確響應(yīng)break、continue和return語句
for (const value of array) {
    console.log(value);
}

// 循環(huán)對(duì)象
let me = {
    name: 'ethan',
    sex: 'male',
    age: 24,
    hobby: 'skate'
};
// for-in 循環(huán)
for (const key in me) {
    // 先判斷是否含有該屬性
    if (me.hasOwnProperty(key)) {
        console.log(key+ ':' + me[key]);
    }
}
// for-of 循環(huán)怠晴，太麻煩遥金，還不如 for-in
for (const key of Object.keys(me)) {
    console.log(key+ ':' + me[key]);
}

但是 for-of 除了可以遍歷數(shù)組和對(duì)象，它還可以遍歷 string 字符串蒜田，以及 ES6 新增的 Map稿械、Set 集合。更詳細(xì)的可以參考這篇文章冲粤∶滥總結(jié)下，循環(huán)數(shù)組不需要 break 或者 return 推薦使用 forEach梯捕，需要的話使用 for-of厢呵，循環(huán)普通對(duì)象使用 for-in，剩下的都用 for-of傀顾，當(dāng)然最重要的還是了解他們的異同襟铭，在使用的時(shí)候靈活選擇。

6.關(guān)于函數(shù)參數(shù)

1. js 中的函數(shù)不在乎參數(shù)的個(gè)數(shù)短曾，也不在乎參數(shù)的類型
2. js 中的參數(shù)其實(shí)是一個(gè)數(shù)組

關(guān)于上述兩點(diǎn)寒砖，見如下代碼

function abc (a, b) {
    console.log(arguments[0]);
    console.log(arguments.length);
}

abc(1);   // 1 1
abc(1,2); // 1 2
abc();    // undefined 0

再看下我們把函數(shù)的參數(shù)去掉

function abc () {
    console.log(arguments[0]);
    console.log(arguments.length);
}

abc(1);   // 1 1
abc(1,2); // 1 2
abc();    // undefined 0

結(jié)果是相同的。

可以利用 arguments 這個(gè)特性來寫個(gè)不規(guī)定加數(shù)個(gè)數(shù)的加法

function add() {
    if(arguments.length === 0){
        return 0;
    } else {
        let total = 0;
        for(let i = 0; i < arguments.length; i++) {
            if (typeof arguments[i] === 'number') {
                total += arguments[i];
            }
        }
        return total;
    }
}

console.log(add(1, 3, 5.5, 7, 8, 'a', 10));

有一點(diǎn)需要注意嫉拐，arguments 實(shí)際上不是 array 的實(shí)例哩都，而是一個(gè) array 對(duì)象。

function abc() {
    console.log(arguments);
    console.log(typeof arguments);
}

abc();    // {}  object
abc(1);   // { '0': 1 }  object
abc(1,2); // { '0': 1, '1': 2 }  object

7.基本類型和引用類型復(fù)制值時(shí)的區(qū)別

這點(diǎn)主要是用來理解引用類型的指針

• 復(fù)制基本類型的值時(shí)會(huì)在變量對(duì)象上創(chuàng)建一個(gè)新值婉徘，然后把這個(gè)新值復(fù)制到新變量分配的位置上漠嵌。
• 復(fù)制引用類型的值時(shí)咐汞，復(fù)制的其實(shí)是一個(gè)指針，雖然指針不同献雅，但指針指向的是同一個(gè)對(duì)象碉考，所以當(dāng)其中一個(gè)引用類型改變了對(duì)象，另一個(gè)引用類型上的值也會(huì)變化挺身。

let num1 = 1;
let num2 = num1;
console.log(num2); // 1
num1 = 2;
console.log(num2); // 1 侯谁，由此可見，改變 num1 并不會(huì)影響 num2 的值

let person1 = {
  name: 'ethan'
};
let person2 = person1;
console.log(person2.name);  // ethan
person1.name = 'ethan1';
console.log(person2.name); // ethan1章钾，由此可見墙贱，改變 person1 會(huì)影響到 person2 的值，因?yàn)樗麄冎赶虻氖峭粋€(gè)對(duì)象贱傀。

8.檢測(cè)類型

關(guān)于 typeof 在筆記1的第4點(diǎn)中已經(jīng)寫明惨撇，但 typeof 主要是用來檢測(cè)基本數(shù)據(jù)類型，如果檢測(cè)的值是一個(gè)對(duì)象或者 null府寒，都會(huì)返回object魁衙，所以當(dāng)變量是引用類型的時(shí)候，最好使用 instanceof株搔，person instanceof RegExp剖淀，返回true/false。對(duì)于數(shù)組纤房，還可以使用Array.isArray()纵隔。

9.數(shù)組常用 API

重寫 sort 方法

function compare (value1, value2) {
  if(value1 < value2) {
    return -1;
  } else if (value1 > value2) {
    return 1;
  } else {
    return 0;
  }
}

let values = [14,2,53,3,6,1];
values.sort(compare);
console.log(values);  // [ 1, 2, 3, 6, 14, 53 ]

迭代方法

let num = [1,2,3,4,5,4,3,2,1];

// every()
let everyResult = num.every((item, index, array) => {
  return (item > 2);
});
console.log(everyResult); // false

// filter()
let filterResult = num.filter((item, index, array) => {
  return (item > 2)
})
console.log(filterResult); // [ 3, 4, 5, 4, 3 ]

// forEach()
num.forEach(element => {
  console.log(element);  // 1  2  3  4  5  4  3  2  1
});

// map()
let mapResult = num.map((item, index, array) => {
  return (item*2);
})
console.log(mapResult);  // [ 2, 4, 6, 8, 10, 8, 6, 4, 2 ]

// some()
let someResult = num.some((item, index, array) => {
  return (item > 2);
})
console.log(someResult);  // ture

reduce()

let num = [1,2,3,4,5];
let sum = num.reduce((prev, cur, index, array) => {
  return prev+cur;
})
console.log(sum);  // 15

10.關(guān)于 callee（嚴(yán)格模式下會(huì)報(bào)錯(cuò)）

函數(shù)內(nèi)部有兩個(gè)特殊的對(duì)象：arguments 和 this。callee 就是 arguments 的一個(gè)屬性碍脏。

首先看下非常經(jīng)典的階乘函數(shù)梭依。

function factorial(num) {
  if (num <= 1) {
    return 1;
  } else {
    return num * factorial(num-1);
  }
}

console.log(factorial(5)); // 120

但這樣有個(gè)問題，函數(shù)的執(zhí)行和函數(shù)名factorial緊緊耦合在一起了典尾，為了解決這個(gè)問題役拴，我們就可以使用arguments.callee。

function factorial(num) {
  if (num <= 1) {
    return 1;
  } else {
    return num * arguments.callee(num-1);
  }
}

console.log(factorial(5)); // 120

這樣钾埂，即使改了函數(shù)名也不會(huì)有任何影響河闰。注意與 caller 區(qū)分科平。

11.函數(shù)的 apply()、call() 和 bind()方法

1. apply()：接受兩個(gè)參數(shù)：一個(gè)是在其中運(yùn)行函數(shù)的作用域姜性，另一個(gè)是參數(shù)數(shù)組瞪慧。

function sum (num1, num2) {
  return num1 + num2;
}

function applySum1 (num1,num2,num3) {
  return sum.apply(this, [num1, num3]);
}

function applySum2 (num1,num2,num3) {
  return sum.apply(this, arguments);
}

console.log(applySum1(10,20,30)); // 40
console.log(applySum2(10,20,30)); // 30

1. call()：作用和apply()相同，不同的是第二個(gè)參數(shù)部念，不能以數(shù)組的形式弃酌，必須一個(gè)個(gè)列出來。

function sum (num1, num2) {
  return num1 + num2;
}

function callSum1 (num1,num2,num3) {
  return sum.call(this, num1, num3);
}

console.log(callSum1(10,20,30)); // 40

作用：apply() 和 call()最大的作用是能擴(kuò)充函數(shù)賴以運(yùn)行的作用域儡炼，如下：

window.color = 'red';
let o = {
  color: 'green'
};
function printColor () {
  return this.color;
}

console.log(printColor.call(window)); // red
console.log(printColor.call(this));   // red
console.log(printColor.call(o));      // green

1. 這個(gè)方法會(huì)創(chuàng)建一個(gè)函數(shù)的實(shí)例妓湘，其 this 值會(huì)被綁定到傳給 bind()函數(shù)的值，如下：

let color = 'red';
let o = {
  color: 'green'
};
function printColor () {
  console.log(this.color);
}

let objectPrintColor = printColor.bind(o);
objectPrintColor(); // green

12.具體位數(shù)的小數(shù)處理

自己工作中剛好遇到乌询，要求是四舍五入取小數(shù)點(diǎn)后一位榜贴。我是這樣寫的：

s = Math.round(s * 10) / 10 + 'km';

今天一看書中有現(xiàn)成的方法toFix()：

let s = 3.1415;
s1 = Math.round(s * 10) / 10;
console.log(s1);         // 3.1
console.log(typeof s1);  // number

s2 = s.toFixed(1);
console.log(s2);         // 3.1
console.log(typeof s2);  // string

似乎更簡(jiǎn)單，但數(shù)據(jù)類型已經(jīng)改變了妹田。所以書中也建議不要去實(shí)例化 Number 類型唬党。當(dāng)然，你看我工作中使用的場(chǎng)景鬼佣，其實(shí)使用toFix()也不影響初嘹。