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 匹配任何非空白字符。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容

  • FreeCodeCamp - Basic JavaScript 写在前面: 我曾经在进谷前刷过这一套题,不过当时只...
    付林恒阅读 16,428评论 5 28
  • 标签: 我的笔记 ---学习资料:http://javascript.ruanyifeng.com/ 1. 导论 ...
    暗夜的怒吼阅读 791评论 0 1
  • 文/娟子 一 家乡美景 每个人都会有这么一个去看看世界的梦想,为逃避现实的压力,或不满足现世的安稳。而在大山长大...
    娟子曰阅读 880评论 15 18
  • 加缪的《局外人》保存在手机里面很长时间了,近来才又拾起继续看完。文章篇幅不长,没有复杂的情节构造,言语表达上也朴实...
    lzy_柠檬绿阅读 599评论 0 0
  • 文君是个听话的姑娘,在那个早恋并不盛行的年代,更加不敢造势。顶着一头男孩子的短发,一心只读圣贤书。 每天...
    朝夕絮语阅读 234评论 1 2