Basic JavaScript


Comment your JavaScript Code

JavaScript中的注釋方式有以下兩種:

  • 使用 // 來告訴JavaScript來忽略當前行的代碼
    // This is an in-line comment.

  • 你也可以使用多行注釋來注釋你的代碼,以/開始,用/來結束,就像下面這樣:

/* This is a 
   multi-line comment */

良好的注釋能夠清晰地傳達你寫的代碼的意圖—對于那些讀你的代碼的人來說以及未來你看到它的時候,還能理解這段代碼的意圖。


Declare JavaScript Variables

在計算機科學中, data(數據)就是一切,因為它對于計算機的意義重大。

  • JavaScript提供七種不同的data types(數據類型):

  • undefined(未定義)

  • null(空)

  • boolean(布爾型)

  • string(字符串)

  • symbol(符號)

  • number(數字)

  • object(對象)

  • Variables(變量)允許計算機以一種動態的形式來存儲和操作數據,通過操作指向數據的指針而不是數據本身來避免了內存泄露,以上的七種數據類型都可以存儲到一個變量(variable)中。

  • Variables 非常類似于你在數學中使用的x,y變量, 這意味著它們都是以一個簡單命名的名字來代替我們賦值給它的數據。計算機中的variables(變量)與數學中的變量不同的是,計算機可以在不同的時間存儲不同類型的變量。

  • 通過在變量的前面使用關鍵字var,我們告訴 JavaScript 來創建或者 declare(聲明)一個變量,就像這樣:
    var ourName;
    上面代碼的意思是創建一個名為ourName的variable(變量),在JavaScript中我們使用分號來結束一段聲明。

  • Variable (變量)的名字可以由數字、字母、$ 或者 _組成,但是不能包含空格或者以數字為首。


Storing Values with the Equal Operator

  • 在JavaScript中,你可以通過assignment(分配)操作符把一個值存儲到變量中。
    myVariable = 5;

  • 賦值過程是從右到左進行的。所有 = 操作符右邊的值都會被賦到左邊的變量。


Initializing Variables with the Equal Operator

  • 通常地我們會在initialize開始聲明變量的時候就會給變量賦一個初始值。
    var myVar = 0;

Understanding Uninitialized Variables

  • 當 JavaScript 中的變量被聲明的時候,程序內部會給它一個初始值 undefined。

  • 當你對一個值為 undefined 的變量進行運算操作的時候,算出來的結果將會是 NaN,NaN 的意思是 "Not a Number"。

  • 當你用一個沒有 定義 的變量來做字符串連接操作的時候,它會如實的輸出"undefined"。


Understanding Case Sensitivity in Variables

  • 在 JavaScript 中所有的變量都是大小寫敏感的。這意味著你要區別對待大寫字母和小寫字母。

  • MYVAR與MyVar和myvar 是截然不同的變量。這就有可能導致多個截然不同的變量卻有著有相似的名字。正是由于以上原因所以強烈地建議你, 不要 使用這一特性。(以免給自己帶來麻煩)

  • 使用 駝峰命名法(camelCase) 來書寫一個 Javascript 變量,在 駝峰命名法 中,變量名的第一個單詞的首寫字母小寫,后面的單詞的第一個字母大寫。

舉個栗子:

var someVariable;
var anotherVariableName;
var thisVariableNameIsTooLong;

Add Two Numbers with JavaScript

  • JavaScript 中使用 + 號來讓兩個數字執行加法運算。
  • 舉例
    myVar = 5 + 10; // 等于 15

Subtract One Number from Another with JavaScript

  • JavaScript 中使用 - 來做減法運算。
  • 舉例
    myVar = 12 - 6; // 等于 6

Multiply Two Numbers with JavaScript

  • JavaScript 使用這個 * 符號來讓兩個數字相乘。
  • 舉例
    myVar = 13 * 13; // assigned 169

Divide One Number by Another with JavaScript

  • JavaScript 中使用 / 符號做除法運算。
  • 舉例
    myVar = 16 / 2; // assigned 8

Increment a Number with JavaScript

  • 使用 ++ ,我們可以很容易地對變量進行自增或者+1運算。
    i++;
    等效于
    i = i + 1;//省去了書寫=符號的必要。

Decrement a Number with JavaScript

  • 使用自減符號 -- ,你可以很方便地對一個變量執行 自減 或者減一操作。
    i--;
    等效于
    i = i - 1;//省去了書寫=符號的必要。

Create Decimal Numbers with JavaScript

  • 我們也可以把小數存儲到變量中。小數也被稱作浮點數 。

提示:不是所有的實數都可以用 浮點數 來表示。因為可能存在四舍五入的錯誤。


Multiply Two Decimals with JavaScript

  • 在 JavaScript 中,你也可以用小數進行計算,就像整數一樣。

Finding a Remainder in JavaScript

  • 我們用%運算符來取余。
  • %運算符有時被錯誤的稱為取模運算符
    兩者區別:
  • 取余運算遵循盡可能讓余數小的原則
  • 取模運算盡可能讓商小的原則
    例如:
    7=(-3)×(-2)+1
    7=(-3)×(-3)+(-2)
    因此,
    7rem(-3)=1
    7mod(-3)=(-2)

Assignment with Plus Equals

  • 有一類操作符是一步到位既做運算也賦值的。
  • 這類操作符的其中一種就是 += 運算符。
    myVar += 5;

Assignment with Minus Equals

  • 與 += 操作符類似,-= 操作符用來對一個變量進行減法賦值操作。
    myVar = myVar - 5;

Assignment with Times Equals

  • *= 操作符是讓變量與一個數相乘并賦值。
    myVar = myVar * 5;

Assignment with Divided by Equals

  • /= 操作符是讓變量與另一個數相除并賦值。
    myVar = myVar / 5;

Convert Celsius to Fahrenheit

  • 從Celsius攝氏度轉換為Fahrenheit華氏度的算法是:攝氏度的溫度乘于9除于5,再加上32。
function convert(celsius) {
  // Only change code below this line
  fahrenheit = celsius * 9 / 5 + 32;

  // Only change code above this line
    return fahrenheit;
}

// Change the inputs below to test your code
convert(30);

Declare String Variables

  • 先前我們使用過的代碼:
    var myName = "your name";
  • "your name" 被稱作字符串。 字符串是用單或雙引號包裹起來的一連串的零個或多個字符。

Escaping Literal Quotes in Strings

當你定義一個字符串必須要用單引號或雙引號來包裹它。那么當你需要在字符串中使用一個: " 或者 ' 時該怎么辦呢?

  • 在 JavaScript 中,你可以通過在引號前面使用 反斜杠 () 來轉義引號。
    var sampleStr = "Alan said, \"Peter is learning JavaScript\".";

這標志著提醒 JavaScript 單引號或雙引號并不是字符串的結尾,而是出現在字符串內的字符。所以,如果你要打印字符串到控制臺,你將得到:

Alan said, "Peter is learning JavaScript".


Quoting Strings with Single Quotes

在 JavaScript 中的 字符串 要用單引號或雙引號來包裹它,只要你在開始和結束都使用相同類型的引號,單引號和雙引號的功能在JavaScript中是相同的。

"This string has \"double quotes\" in it"

當我們需要在字符串中使用與開頭結尾相同的引號時,我們需要對引號進行 轉義 。如果你有很多雙引號的字符串,使用轉義字符可能導致難以閱讀。這時候可以使用單引號。

'This string has "double quotes" in it. And "probably" lots of them.'


Escape Sequences in Strings

引號不是字符串中唯一的可以被轉義字符。下面是常見的轉義序列列表:

轉義序列列表
轉義序列列表

Concatenating Strings with Plus Operator

  • 在 JavaScript 中,當 + 操作符與 字符串 一起使用的時候,它被稱作 連接 操作符。你可以通過和其他字符串連接 來創建一個新的字符串。

舉個例子:
'My name is Alan,' + ' I concatenate.'

注意:當心空格。連接操作不會添加兩個字符串之外的空格,所以想加上空格的話,你需要自己在字符串里面添加。


Concatenating Strings with the Plus Equals Operator

  • 我們還可以使用 += 運算符來連接字符串到現有字符串的結尾。對于那些非常長的字符串來說,這一操作是非常有用的。

Constructing Strings with Variables

有時候需要創建一個填字風格的字符串。

  • 通過使用連接運算符 + ,你可以插入一個或多個變量來組成一個字符串。
var ourName = "Free Code Camp";
var ourStr = "Hello, our name is " + ourName + ", how are you?";
var myName = "9aoyang";
var myStr = "My name is " + myName + " and I am well!";

Appending Variables to Strings

  • 不僅可以追加字符串,還可以使用加等號(+=)運算符直接來追加變量到字符串上。
var anAdjective = "awesome!";
var ourStr = "Free Code Camp is ";
ourStr += anAdjective;

Find the Length of a String

  • 可以通過在字符串變量或字符串后面寫上 .length 來獲得字符串變量 字符串 值的長度。
    "Alan Peter".length; // 10

Use Bracket Notation to Find the First Character in a String

JavaScript中只有字符串類型,沒有字符類型。那么如何獲取到字符串中的某個字符呢?

  • 我們通過[索引] 來獲得對應的字符。
    大多數現代編程語言,如JavaScript,不同于人類從1開始計數。它們是從0開始計數,這被稱為 基于零 (Zero-based indexing) 的索引。
  • 例如, 在單詞 "Charles" 中索引0上的字符為 "C",所以在 var firstName = "Charles" 中,你可以使用 firstName[0] 來獲得第一個位置上的字符。

Understand String Immutability

理解字符串的不可變性!當你搞懂不可變性后immutable.js對于你就是小菜一碟了。

  • 在 JavaScript 中,字符串的值是不可變的,這意味著一旦字符串被創建就不能被改變。

例如,下面的代碼:

var myStr = "Bob";
myStr[0] = "J";

是不會把變量 myStr 的值改變成 "Job" 的,因為變量 myStr 是不可變的。注意,這并不意味著 myStr 永遠不能被改變,只是字符串字面量 string literal 的各個字符不能被改變。改變 myStr 中的唯一方法是重新給它賦一個值,就像這樣:

var myStr = "Bob";
myStr = "Job";

Use Bracket Notation to Find the Nth Character in a String

  • 也可以使用 [索引]來獲得一個字符串中的其他位置的字符。

  • 請記住,程序是從 0 開始計數,所以獲取第一個字符實際上是[0]。


Use Bracket Notation to Find the Last Character in a String

  • 為了得到一個字符串的最后一個字符,你可以用[字符串的長度減去一]。
  • 例如,在 var firstName = "Charles"中,你可以這樣操作firstName[firstName.length - 1]來得到字符串的最后的一個字符。

Use Bracket Notation to Find the NthtoLast Character in a String

  • 我們既可以獲取字符串的最后一個字符,也可以用獲取字符串的倒數第N個字符。
  • 例如,你可以這樣 firstName[firstName.length - 3]操作來獲得var firstName = "Charles" 字符串中的倒數第三個字符。

Store Multiple Values in one Variable using JavaScript Arrays

  • 使用數組,我們可以在一個地方存儲多個數據。
  • 以左方括號[開始定義一個數組,以右方括號]結束定義,并把每個條目之間用逗號隔開,就像這樣:
    var sandwich = ["peanut butter", "jelly", "bread"]。

Nest one Array within Another Array

  • 你也可以在數組中包含其他數組,就像這樣:[["Bulls", 23], ["White Sox", 45]]。這被稱為一個 多維數組。

Access Array Data with Indexes

  • 我們可以像操作字符串一樣通過數組索引[index]來訪問數組中的數據。
  • 數組索引的使用與字符串索引一樣,不同的是,通過字符串的索引得到的是一個字符,通過數組索引得到的是一個條目。與字符串類似,數組也是 基于零 的索引,因此數組的第一個元素的索引是 0。
    例如
var array = [1,2,3];
array[0]; // 等于 1
var data = array[1];  // 等于 2

Modify Array Data With Indexes

  • 與字符串的數據不可變不同,數組的數據是可變的,并且可以自由地改變。
    例如
var ourArray = [3,2,1];
ourArray[0] = 1; // ourArray等于 [1,2,1]

Access MultiDimensional Arrays With Indexes

  • 可以把 多維 數組看作成是一個 數組中的數組。當使用[]去訪問數組的時候,第一個[index]訪問的是第N個子數組,第二個[index]訪問的是第N個子數組的第N個元素。

例如

var arr = [
    [1,2,3],
    [4,5,6],
    [7,8,9],
    [[10,11,12], 13, 14]
];
arr[0]; // 等于 [1,2,3]
arr[1][2]; // 等于 6
arr[3][0][1]; // 等于 11

Manipulate Arrays With push

  • 一個簡單的方法將數據追加到一個數組的末尾是通過 push() 函數。
  • .push() 接受把一個或多個參數,并把它“推”入到數組的末尾。
var arr = [1,2,3];
arr.push(4);
// 現在arr的值為 [1,2,3,4]

Manipulate Arrays With pop

  • 改變數組中數據的另一種方法是用 .pop() 函數。

  • .pop() 函數用來“拋出”一個數組末尾的值。我們可以把這個“拋出”的值賦給一個變量存儲起來。

  • 數組中任何類型的條目(數值,字符串,甚至是數組)可以被“拋出來” 。

舉個例子, 對于這段代碼

var oneDown = [1, 4, 6].pop();

現在 oneDown 的值為 6 ,數組變成了 [1, 4]。


Manipulate Arrays With shift

  • pop() 函數用來移出數組中最后一個元素。如果想要移出第一個元素要怎么辦呢?
  • 這就是 .shift() 的用武之地。它的工作原理就像 .pop(),但它移除的是第一個元素,而不是最后一個。

Manipulate Arrays With unshift

  • 你不僅可以 shift(移出)數組中的第一個元素,你也可以 unshift(移入)一個元素到數組的頭部。
  • .unshift() 函數用起來就像 .push() 函數一樣, 但不是在數組的末尾添加元素,而是在數組的頭部添加元素。

Write Reusable JavaScript with Functions

  • 在 JavaScript 中,我們可以把代碼的重復部分抽取出來,放到一個函數(functions)中。

  • 這是一個函數(function)的例子:

function functionName() {
  console.log("Hello World");
}

你可以通過函數名稱functionName加上后面的小括號來調用這個函數(function),就像這樣:functionName();

每次調用函數時它會打印出消息的“Hello World”到開發的控制臺上。所有的大括號之間的代碼將在每次函數調用時執行。


Passing Values to Functions with Arguments

  • 函數的參數parameters在函數中充當占位符(也叫形參)的作用,參數可以為一個或多個。調用一個函數時所傳入的參數為實參,實參決定著形參真正的值。簡單理解:形參即形式、實參即內容。

  • 這是帶有兩個參數的函數, param1 和 param2:

function testFun(param1, param2) {
  console.log(param1, param2);
}

接著我們調用 testFun:

testFun("Hello", "World");

我們傳遞了兩個參數, "Hello" 和 "World"。在函數內部,param1 等于“Hello”,param2 等于“World”。請注意,testFun 函數可以多次調用,每次調用時傳遞的參數會決定形參的實際值。


Global Scope and Functions

  • 在 JavaScript 中, 作用域 涉及到變量的作用范圍。在函數外定義的變量具有 全局 作用域。這意味著,具有全局作用域的變量可以在代碼的任何地方被調用。

  • 這些沒有使用var關鍵字定義的變量,會被自動創建在全局作用域中,形成全局變量。當在代碼其他地方無意間定義了一個變量,剛好變量名與全局變量相同,這時會產生意想不到的后果。因此你應該總是使用var關鍵字來聲明你的變量。


Local Scope and Functions

  • 在一個函數內聲明的變量,以及該函數的參數都是局部變量,意味著它們只在該函數內可見。
  • 這是在函數 myTest內聲明局部變量loc 的最佳例子:
function myTest() {
  var loc = "foo";
  console.log(loc);
}
myTest(); // "foo"
console.log(loc); // "undefined"

Global vs Local Scope in Functions

  • 一個程序中有可能具有相同名稱的 局部 變量 和 全局 變量。在這種情況下,局部 變量將會優先于 全局 變量。
  • 下面為例:
var someVar = "Hat";
function myFun() {
  var someVar = "Head";
  return someVar;
}

函數 myFun 將會返回 "Head",因為 局部變量 優先級更高。


Return a Value from a Function with Return

  • 我們可以把數據通過函數的 參數 來傳入函數,也可以使用 return 語句把數據從一個函數中傳出來。
  • 例如
function plusThree(num) {
  return num + 3;
}
var answer = plusThree(5); // 8

plusThree 帶有一個為 num 的 參數 并且返回(returns)一個等于 num + 3 的值。


Assignment with a Returned Value

  • 如果你還記得我們在這一節 Storing Values with the Equal Operator 的討論,賦值之前,先完成等號右邊的操作。這意味著我們可把一個函數的返回值,賦值給一個變量。

  • 假設我們預先定義的函數sum其功能就是將兩個數字相加,那么:
    ourSum = sum(5, 12);

    將調用sum函數,返回return了一個數值17,然后把它賦值給了ourSum變量。


Stand in Line

  • 在計算機科學中 隊列(queue)是一個抽象的數據結構,隊列中的條目都是有秩序的。新的條目會被加到 隊列 的末尾,舊的條目會從 隊列 的頭部被移出。

  • 寫一個函數 queue ,用一個數組arr和一個數字item作為參數。數字item添加到數組的結尾,然后移出數組的第一個元素,最后隊列函數應該返回被刪除的元素。

function queue(arr, item) {
  // Your code here
  arr.push(item);
  item = arr.shift();
  return item;  // Change this line
}

Understanding Boolean Values

  • 另一種數據類型是布爾(Boolean)。布爾 值要么是true 要么是false。它非常像電路開關, true 是“開”,false 是“關”。這兩種狀態是互斥的。

注意:Boolean 值絕不會寫作被引號包裹起來的形式。字符串 的 "true" 和 "false" 不是 布爾值,在 JavaScript 中也沒有特殊含義。


Use Conditional Logic with If Statements

  • If 語句用于在代碼中做條件判斷。關鍵字 if 告訴 JavaScript 在小括號中的條件為真的情況下去執行定義在大括號里面的代碼。這種條件被稱為 Boolean 條件,因為他們只可能是 true(真)或 false(假)。

  • 當條件的計算結果為 true,程序執行大括號內的語句。當布爾條件的計算結果為 false,大括號內的代碼將不會執行。

偽代碼

if(條件為真){
  語句被執行
}
示例
function test (myCondition) {
  if (myCondition) {
     return "It was true";
  }
  return "It was false";
}
test(true);  // returns "It was true"
test(false); // returns "It was false"

當 test 被調用,并且傳遞進來的參數值為 true,if 語句會計算 myCondition 的結果,看它是真還是假。如果條件為 true,函數會返回 "It was true"。當 test 被調用,并且傳遞進來的參數值為 false,myCondition 不 為 true,并且不執行大括號后面的語句,函數返回 "It was false"。


Comparison with the Equality Operator

在 JavaScript 中,有很多 相互比較的操作。所有這些操作符都返回一個 true 或 false 值。

  • 最基本的運算符是相等運算符:==。相等運算符比較兩個值,如果它們是同等,返回 true,如果它們不等,返回 false。值得注意的是相等運算符不同于賦值運算符(=),賦值運算符是把等號右邊的值賦給左邊的變量。
function equalityTest(myVal) {
  if (myVal == 10) {
     return "Equal";
  }
  return "Not Equal";
}

如果 myVal 等于 10,相等運算符會返回 true,因此大括號里面的代碼會被執行,函數將返回 "Equal"。否則,函數返回 "Not Equal"。

在 JavaScript 中,為了讓兩個不同的 數據類型(例如 數字 和 字符串)的值可以作比較,它必須把一種類型轉換為另一種類型。然而一旦這樣做,它可以像下面這樣來比較:

   1   ==  1    // true
   1   ==  2    // false
   1   == '1'   // true
  "3"  ==  3    // true

Comparison with the Strict Equality Operator

  • 全等(===)是相對于相等操作符(==)的一種操作符。與相等操作符不同的是全等比較嚴格,它會同時比較元素的值和 數據類型。

舉個例子

3 === 3   // true
3 === '3' // false
3 是一個 數字 類型的,而'3' 是一個 字符 類型的,所以3不全等于'3'。

Comparison with the Inequality Operator

  • 不相等運算符(!=)與相等運算符是相反的。這意味著不相等運算符中,如果“不為真”并且返回 false 的地方,在相等運算符中會返回true,反之亦然(vice versa)。與相等運算符類似,不相等運算符在比較的時候也會轉換值的數據類型。
    Examples
1 != 2      // true
1 != "1"    // false
1 != '1'    // false
1 != true   // false
0 != false  // false

Comparison with the Strict Inequality Operator

  • 不全等運算符(!==)與全等運算符是相反的。這意味著“不全等”并返回 false 的地方,用全等運算會返回 true,反之亦然。全等運算符不會轉換值的數據類型。
    例如
3 !== 3   // false
3 !== '3' // true
4 !== 3   // true

Comparison with the Greater Than Operator

  • 使用大于運算符(>)來比較兩個數字。如果大于運算符左邊的數字大于右邊的數字,將會返回 true。否則,它返回 false。與相等運算符一樣,大于運算符在比較的時候,會轉換值的數據類型。

例如

 5 > 3   // true
 7 > '3' // true
 2 > 3   // false
'1' > 9  // false

Comparison with the Greater Than Or Equal To Operator

  • 使用 大于等于 運算符(>=)來比較兩個數字的大小。如果大于等于運算符左邊的數字比右邊的數字大或者相等,它會返回 true。否則,它會返回 false。與相等運算符相似,大于等于 運算符在比較的時候會轉換值的數據類型。

例如

 6  >=  6  // true
 7  >= '3' // true
 2  >=  3  // false
'7' >=  9  // false

Comparison with the Less Than Operator

  • 使用 小于 運算符(<)比較兩個數字的大小。如果小于運算符左邊的數字比右邊的數字小,它會返回 true。否則,他會返回 false。與相等運算符類似,小于 運算符在做比較的時候會轉換值的數據類型。

例如

  2 < 5  // true
'3' < 7  // true
  5 < 5  // false
  3 < 2  // false
'8' < 4  // false

Comparison with the Less Than Or Equal To Operator

  • 使用 小于等于 運算符(<=)比較兩個數字的大小。如果在小于等于運算符,左邊的數字小于或者等于右邊的數字,它會返回 true。如果在小于等于運算符,左邊的數字大于或者等于右邊的數字,它會返回 false。與相等運算符類型,小于等于 運算符會轉換數據類型。

例如

  4 <= 5  // true
'7' <= 7  // true
  5 <= 5  // true
  3 <= 2  // false
'8' <= 4  // false

Comparisons with the Logical And Operator

  • 有時你需要在一次判斷中做多個操作。當且僅當運算符的左邊和右邊都是 true,邏輯與 運算符(&&)才會返回 true。

同樣的效果可以通過if語句的嵌套來實現:

if (num > 5) {
  if (num < 10) {
    return "Yes";
  }
}
return "No";

只有當 num 的值在6和9之間(包括6和9)才會返回 "Yes"。相同的邏輯可被寫為:

if (num > 5 && num < 10) {
  return "Yes";
}
return "No";

Comparisons with the Logical Or Operator

  • 如果任何一個操作數是true,邏輯或 運算符 (||) 返回 true。反之,返回 false。

舉個例子:

if (num > 10) {
  return "No";
}
if (num < 5) {
  return "No";
}
return "Yes";

只有當num大于等于5或小于等于10時,函數返回"Yes"。相同的邏輯可以簡寫成:

if (num > 10 || num < 5) {
  return "No";
}
return "Yes";

Introducing Else Statements

  • 當if語句的條件為真,大括號里的代碼執行,那如果條件為假呢?
    正常情況下什么也不會發生。
  • 寫一個else語句,當條件為假時執行相應的代碼。
if (num > 10) {
  return "Bigger than 10";
} else {
  return "10 or Less";
}

ntroducing Else If Statements

  • 如果你有多個條件語句,你可以通過else if語句把 if語句鏈起來。
if (num > 15) {
  return "Bigger than 15";
} else if (num < 5) {
  return "Smaller than 5";
} else {
  return "Between 5 and 15";
}

Logical Order in If Else Statements

  • if、else if語句中代碼的執行順序是很重要的。
  • 在條件判斷語句中,代碼的執行順序是從上到下,所以你需要考慮清楚先執行哪一句,后執行哪一句。

這有兩個例子。

第一個例子:

function foo(x) {
  if (x < 1) {
    return "Less than one";
  } else if (x < 2) {
    return "Less than two";
  } else {
    return "Greater than or equal to two";
  }
}

第二個例子更改了代碼的執行順序:

function bar(x) {
  if (x < 2) {
    return "Less than two";
  } else if (x < 1) {
    return "Less than one";
  } else {
    return "Greater than or equal to two";
  }
}

這兩個函數看起來幾乎一模一樣,我們傳一個值進去看看它們有什么區別。

foo(0) // "Less than one"
bar(0) // "Less than two"

Chaining If Else Statements

  • if/else 語句串聯在一起可以實現復雜的邏輯,這是多個if/else if 語句串聯在一起的偽代碼:
if (condition1) {
  statement1
} else if (condition2) {
  statement2
} else if (condition3) {
  statement3
. . .
} else {
  statementN
}

Selecting from many options with Switch Statements

  • 如果你有非常多的選項需要選擇,可以使用switch語句。根據不同的參數值會匹配上不同的case分支,語句會從第一個匹配的case分支開始執行,直到碰到break就結束。

這是一個偽代碼案例:

switch (num) {
  case value1:
    statement1;
    break;
  case value2:
    statement2;
    break;
...
  case valueN:
    statementN;
    break;
}

測試case 值使用嚴格等于,break關鍵字告訴javascript停止執行語句。如果沒有break關鍵字,下一個語句會繼續執行。


Adding a default option in Switch statements

  • 在switch 語句中你可能無法用case來指定所有情況,這時你可以添加default語句。當再也找不到case匹配的時候default語句會執行,非常類似于if/else組合中的else語句。

default語句應該是最后一個case。

switch (num) {
  case value1:
    statement1;
    break;
  case value2:
    statement2;
    break;
...
  default:
    defaultStatement;
}

Multiple Identical Options in Switch Statements

  • 如果switch語句中的case分支的break 語句漏掉了,后面的 case語句會一直執行直到遇到break。如果你有多個輸入值和輸出值一樣,可以試試下面的switch語句:
switch(val) {
  case 1:
  case 2:
  case 3:
    result = "1, 2, or 3";
    break;
  case 4:
    result = "4 alone";
}

分支1、2、3將會產生相同的輸出結果。


Replacing If Else Chains with Switch

  • 如果你有多個選項需要選擇,switch 語句寫起來會比多個串聯的if/if else語句容易些,譬如:
if (val === 1) {
  answer = "a";
} else if (val === 2) {
  answer = "b";
} else {
  answer = "c";
}

可以被下面替代:

switch (val) {
  case 1:
    answer = "a";
    break;
  case 2:
    answer = "b";
    break;
  default:
    answer = "c";
}

Returning Boolean Values from Functions

  • 你可能會回想起Comparison with the Equality Operator ,所有的比較操作符返回的都是一個boolean值,要么是true
    要么是false。
  • 使用if/else語句來做比較然后返回true或false已經成為大家的共識:
function isEqual(a,b) {
  if (a === b) {
    return true;
  } else {
    return false;
  }
}

因為=== 總是返回 true 或 false,所以我們可以直接返回比較的結果:

function isEqual(a,b) {
  return a === b;
}

Return Early Pattern for Functions

  • 當代碼執行到return語句時,函數返回一個結果就結束運行了,return后面的語句根本不會執行。

舉例

function myFun() {
  console.log("Hello");
  return "World";
  console.log("byebye")
}
myFun();

上面的代碼輸出"Hello"到控制臺、返回 "World",但沒有輸出"byebye",因為函數遇到return語句就退出了。


Build JavaScript Objects

你之前可能聽說過對象 object 。

  • 對象和數組很相似,數組是通過索引來訪問和修改數據,對象是通過屬性來訪問和修改數據的。

這是一個示例對象:

var cat = {
  "name": "Whiskers",
  "legs": 4,
  "tails": 1,
  "enemies": ["Water", "Dogs"]
};

對象適合用來存儲結構化數據,就和真實世界的對象一模一樣,比如一只貓。


Accessing Objects Properties with the Dot Operator

  • 有兩種方式訪問對象屬性,一個是點操作符(.),一個是中括號操作符([])。
  • 當你知道屬性的名稱的時候,使用點操作符。

這是一個使用點操作符讀取對象屬性的例子:

var myObj = {
  prop1: "val1",
  prop2: "val2"
};
var prop1val = myObj.prop1; // val1
var prop2val = myObj.prop2; // val2

Accessing Objects Properties with Bracket Notation

  • 第二種訪問對象的方式就是中括號操作符([]),如果你想訪問的屬性的名稱有一個空格,這時你只能使用中括號操作符([])。

這是一個使用中括號操作符([])讀取對象屬性的例子:

var myObj = {
  "Space Name": "Kirk",
  "More Space": "Spock"
};
myObj["Space Name"]; // Kirk
myObj['More Space']; // Spock

提示:屬性名稱中如果有空格,必須把屬性名稱用單引號或雙引號包裹起來。


Accessing Objects Properties with Variables

  • 中括號操作符的另一個使用方式是用變量來訪問一個屬性。當你需要遍歷對象的屬性列表或查表時,這種方式極為有用。
    這有一個使用變量來訪問屬性的例子:
var someProp = "propName";
var myObj = {
  propName: "Some Value"
}
myObj[someProp]; // "Some Value"

還有更多:

var myDog = "Hunter";
var dogs = {
  Fido: "Mutt",
  Hunter: "Doberman",
  Snoopie: "Beagle"
}
var breed = dogs[myDog]; // "Hunter"
console.log(breed)// "Doberman"

提示:當我們通過變量名訪問屬性的時候,不需要給變量名包裹引號。因為實際上我們使用的是變量的值,而不是變量的名稱。


Updating Object Properties

  • 當你創建了一個對象后,你可以用點操作符或中括號操作符來更新對象的屬性。
    舉個例子,讓我們看看 ourDog:
var ourDog = {
  "name": "Camper",
  "legs": 4,
  "tails": 1,
  "friends": ["everything!"]
};

讓我們更改它的名稱為 "Happy Camper",這有兩種方式來更新對象的name屬性:

ourDog.name = "Happy Camper";
ourDog["name"] = "Happy Camper";

Add New Properties to a JavaScript Object

  • 你也可以像更改屬性一樣給對象添加屬性。

看看我們是如何給ourDog添加 "bark"屬性:

ourDog.bark = "bow-wow";
or
ourDog["bark"] = "bow-wow";

Delete Properties from a JavaScript Object

  • 我們同樣可以刪除對象的屬性,例如:
delete ourDog.bark;

Using Objects for Lookups

  • 對象和字典一樣,可以用來存儲鍵/值對。如果你的數據跟對象一樣,你可以用對象來查找你想要的值,而不是使用switch或if/else語句。當你知道你的輸入數據在某個范圍時,這種查找方式極為有效。

這是簡單的反向字母表:

var alpha = {
  1:"Z",
  2:"Y",
  3:"X",
  4:"W",
  ...
  24:"C",
  25:"B",
  26:"A"
};
alpha[2]; // "Y"
alpha[24]; // "C"
var value = 2;
alpha[value]; // "Y"

Testing Objects for Properties

  • 有時檢查一個對象屬性是否存在是非常有用的,我們可以用.hasOwnProperty(propname)方法來檢查對象是否有該屬性。如果有返回true,反之返回 false。

舉例

var myObj = {
  top: "hat",
  bottom: "pants"
};
myObj.hasOwnProperty("top");    // true
myObj.hasOwnProperty("middle"); // false

Introducing JavaScript Object Notation JSON

  • JavaScript Object Notation 簡稱 JSON,它使用JavaScript對象的格式來存儲數據。JSON是靈活的,因為它允許 數據結構 是 字符串,數字,布爾值,數組,函數,和 對象 的任意組合。

這里是一個JSON對象的示例:

var ourMusic = [
  {
    "artist": "Daft Punk",
    "title": "Homework",
    "release_year": 1997,
    "formats": [ 
      "CD", 
      "Cassette", 
      "LP" ],
    "gold": true
  }
];

這是一個對象數組,并且對象有各種關于專輯的 詳細信息。它也有一個嵌套的 formats 的數組。附加專輯記錄可以被添加到數組的最上層。

注:你應該在每個對象后添加一個逗號,除非這個對象是數組中的最后一個。


Accessing Nested Objects in JSON

  • 通過串聯起來的點操作符或中括號操作符來訪問JSON對象的嵌套屬性。

下面是一個嵌套的JSON對象:

var ourStorage = {
  "desk": {
    "drawer": "stapler"
  },
  "cabinet": {
    "top drawer": { 
      "folder1": "a file",
      "folder2": "secrets"
    },
    "bottom drawer": "soda"
  }
}
ourStorage.cabinet["top drawer"].folder2;  // "secrets"
ourStorage.desk.drawer; // "stapler"

Accessing Nested Arrays in JSON

  • 正如我們在前面的例子所見,JSON對象可以嵌套對象和數組。與訪問嵌套對象一樣,用中括號操作符同樣可以訪問嵌套數組。

下面是如何訪問嵌套數組的例子:

var ourPets = { 
  "cats": [
    "Meowzer",
    "Fluffy",
    "Kit-Cat"
  ],
  "dogs": [
    "Spot",
    "Bowser",
    "Frankie"
  ]
};
ourPets.cats[1]; // "Fluffy"
ourPets.dogs[0]; // "Spot"

Iterate with JavaScript For Loops

  • 一個條件語句只能執行一次代碼,而一個循環語句可以多次執行代碼。
  • JavaScript 中最常見的循環就是“for循環”。
  • for循環中的三個表達式用分號隔開:
    for ([初始化]; [條件判斷]; [計數器])
    初始化語句只會在執行循環開始之前執行一次。它通常用于定義和設置你的循環變量。
    條件判斷語句會在每一輪循環的開始執行,只要條件判斷為 true 就會繼續執行循環。當條件為 false的時候,循環將停止執行。這意味著,如果條件在一開始就為 false,這個循環將不會執行。
    計數器是在每一輪循環結束時執行,通常用于遞增或遞減。

在下面的例子中,先初始化i = 0,條件 i < 5 為真,進入第一次循環,執行大括號里的代碼,第一次循環結束。遞增i的值,條件判斷,就這樣依次執行下去,直到條件判斷為假,整個循環結束。

var ourArray = [];
for (var i = 0; i < 5; i++) {
  ourArray.push(i);
}

最終 ourArray 的值為 [0,1,2,3,4]


Iterate Odd Numbers With a For Loop

  • for循環可以按照我們指定的順序來迭代,通過更改我們的 計數器,我們可以按照偶數順序來迭代。

初始化 i = 0,當 i < 10 的時候繼續循環。
i += 2 讓 i 每次循環之后增加2。

var ourArray = [];
for (var i = 0; i < 10; i += 2) {
  ourArray.push(i);
}

循環結束后,ourArray 的值為 [0,2,4,6,8]。


Count Backwards With a For Loop

  • for循環也可以逆向迭代,只要我們定義好合適的條件。

  • 為了能夠從后往前兩兩倒數,我們需要改變我們的 初始化,條件判斷 和 計數器。

我們讓 i = 10,并且當 i > 0 的時候才繼續循環。我們使用 i-=2 來讓 i 每次循環遞減 2。

var ourArray = [];
for (var i=10; i > 0; i-=2) {
  ourArray.push(i);
}

循環結束后,ourArray 的值為 [10,8,6,4,2].


Iterate Through an Array with a For Loop

  • 迭代輸出一個數組的每個元素是 JavaScript 中的常見需求, for 循環可以做到這一點。

下面的代碼將輸出數組 arr 的每個元素到控制臺:

var arr = [10,9,8,7,6];
for (var i=0; i < arr.length; i++) {
   console.log(arr[i]);
}

記住數組的索引從零開始的,這意味著數組的最后一個元素的下標是:數組的長度 - 1。我們這個循環的 條件 是 i < arr.length,當 i 的值為 長度-1 的時候循環就停止了。


Nesting For Loops

如果你有一個二維數組,可以使用相同的邏輯,先遍歷外面的數組,再遍歷里面的子數組。下面是一個例子:

var arr = [
  [1,2], [3,4], [5,6]
];
for (var i=0; i < arr.length; i++) {
  for (var j=0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}

一次輸出 arr 中的每個子元素。提示,對于內部循環,我們可以通過 arr[i] 的 .length 來獲得子數組的長度,因為 arr[i] 的本身就是一個數組。


Iterate with JavaScript While Loops

  • 另一種類型的 JavaScript 循環被稱為while循環,因為它規定,當(while)條件為真,循環才會執行,反之不執行。
var ourArray = [];
var i = 0;
while(i < 5) {
  ourArray.push(i);
  i++;
}

Generate Random Fractions with JavaScript

  • 計算機的行為只有兩種:確定性隨機性。當你一步步地闖關來到這里就是確定行為,當你隨意點了個鏈接就來到這里就是隨機行為。

  • 而隨機數最適合用來創建這種隨機行為。

  • Math.random()用來生成一個在0(包括0)到1(不包括1)之間的隨機小數,因此Math.random()可能返回0但絕不會返回1。

提示:隨后的函數都會在return執行前調用,所以我們可以直接返回Math.random()的值。


Generate Random Whole Numbers with JavaScript

生成隨機小數很棒,但隨機數更有用的地方在于生成隨機整數。

用 Math.random() 生成一個隨機小數。
把這個隨機小數乘以 20。
用 Math.floor() 向下取整 獲得它最近的整數。
記住 Math.random() 永遠不會返回 1。同時因為我們是在用 Math.floor() 向下取整,所以最終我們獲得的結果不可能有 20。這確保了我們獲得了一個在0到19之間的整數。

把操作連綴起來,代碼類似于下面:

Math.floor(Math.random() * 20);

我們先調用 Math.random(),把它的結果乘以20,然后把上一步的結果傳給 Math.floor(),最終通過向下取整獲得最近的整數。


Generate Random Whole Numbers within a Range

我們之前生成的隨機數是在0到某個數之間,現在我們要生成的隨機數是在兩個指定的數之間。

我們需要定義一個最小值和一個最大值。

下面是我們將要使用的方法,仔細看看并嘗試理解這行代碼到底在干嘛:

Math.floor(Math.random() * (max - min + 1)) + min
  • Math.random() * (max - min + 1) 的取值范圍[0, max - min]
  • Math.random() * (max - min + 1) + min的取值范圍[min, max]

Sift through Text with Regular Expressions

  • Regular expressions 正則表達式被用來根據某種匹配模式來尋找strings中的某些單詞。

舉例:如果我們想要找到字符串The dog chased the cat中單詞 the,我們可以使用下面的正則表達式: /the/gi
我們可以把這個正則表達式分成幾段:

/是這個正則表達式的頭部

the是我們想要匹配的模式

/是這個正則表達式的尾部

g 代表著 global(全局),意味著返回所有的匹配而不僅僅是第一個。

i代表著忽略大小寫,意思是當我們尋找匹配的字符串的時候忽略掉字母的大小寫。


Find Numbers with Regular Expressions

我們可以在正則表達式中使用特殊選擇器來選取特殊類型的值。

  • 特殊選擇器中的一種就是數字選擇器\d,意思是被用來獲取一個字符串的數字。

在JavaScript中, 數字選擇器類似于: /\d/g

  • 在選擇器后面添加一個加號標記(+),例如:/\d+/g,它允許這個正則表達式匹配一個或更多數字。此時,一個單詞也只會使計數器加1.

尾部的g是'global'的簡寫,意思是允許這個正則表達式 找到所有的匹配而不是僅僅找到第一個匹配。


Find Whitespace with Regular Expressions

  • 我們也可以使用正則表達式選擇器 \s 來選擇一個字符串中的空白。

空白字符有" " (空格符 space)、\r(回車符 the carriage return)、\n(換行符 newline)、\t (制表符 tab) 和\f(換頁符 the form feed)。

空白正則表達式類似于:
/\s+/g


Invert Regular Expression Matches with JavaScript

  • 你可以用正則表達式選擇器的大寫版本來轉化任何匹配。

舉個例子:\s 匹配任何空白字符,\S 匹配任何非空白字符。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • FreeCodeCamp - Basic JavaScript 寫在前面: 我曾經在進谷前刷過這一套題,不過當時只...
    付林恒閱讀 16,531評論 5 28
  • 標簽: 我的筆記 ---學習資料:http://javascript.ruanyifeng.com/ 1. 導論 ...
    暗夜的怒吼閱讀 846評論 0 1
  • 加繆的《局外人》保存在手機里面很長時間了,近來才又拾起繼續看完。文章篇幅不長,沒有復雜的情節構造,言語表達上也樸實...
    lzy_檸檬綠閱讀 641評論 0 0
  • 文君是個聽話的姑娘,在那個早戀并不盛行的年代,更加不敢造勢。頂著一頭男孩子的短發,一心只讀圣賢書。 每天...
    朝夕絮語閱讀 259評論 1 2
  • 今天和朋友建了一個減肥群,哈哈,準備先試運行一個月,看看效果如何,以下是這個群的減肥規則: “跟我念我要變美膩...
    木南Ruan閱讀 199評論 1 0