声明JavaScript变量

在计算机科学中, data(数据)大于一切，因为它对于计算机的意义重大。JavaScript提供七种不同的data types(数据类型)，它们是undefined（未定义）, null（空）, boolean（布尔型）, string（字符串）, symbol(符号), number（数字）, and object（对象）。

举个例子, 计算机能够分辨不同的数字, 例如数字 12，但是"12“和”dog", 或"123 cats", 却是字母的集合。 计算机能够精确地运算数字， 但是无法处理字符串中的数字。

Variables（变量）允许计算机以动态的形式来存储和操作数据，通过操作指向数据的指针而不是数据本身来避免了内存泄露，以上的七种数据类型都可以存储到一个Variables（变量）中。

Variables（变量 ）类似于您在数学中使用的x和y变量，这意味着它们通过一个简单的名称来表示我们要引用的数据。 计算机中的Variables（变 量）与数学变量不同，因为它们可以在不同时间存储不同的值。

通过在变量的前面使用关键字var，我们告诉 JavaScript 来创建或者 declare（声明）一个变量,就像这样：

var ourName;

上面代码的意思是创建一个名为ourName的variable（变量），在JavaScript中我们使用;（分号）来结束一段声明。

Variable （变量）的名字可以由数字、字母、$ 或者 _组成，但是不能包含空格或者以数字为首。

任务:
使用var 关键字来创建一个名为myName的变量。

// 举例
var myName;// Define myName below this line

JavaScript 使用=为变量赋值

在JavaScript中，您可以使用=赋值运算符将值存储在变量中。

myVariable = 5;

把Number数字5赋给变量myVariable。

赋值过程是从右向左进行的。所有 = 赋值运算符右边的值都会被赋到左边的变量中。

myVar = 5;
myNum = myVar;

数值 5 被赋给变量 myVar 中， 然后变量 myVar 又赋给变量 myNum ，这样子 myNum 变量中的值也是 5 了。

任务:
把数值 7 赋给变量 a。
把变量 a 中的内容赋给变量 b。

// Setup
var a;
var b = 2;// Only change code below this linevar a = 7;
var b = a;

JavaScript 使用=为变量赋初始值

通常地我们会在initialize初始化声明变量的时候就会给变量赋一个初始值。

var myVar = 0;

创建一个名为 myVar 的变量并指定初始值为 0。

任务:
通过关键字 var 定义一个变量 a 并且指定初始值为 9。

// 举例
var ourVar = 19;// Only change code below this linevar a = 9;

理解JavaScript未定义变量

当 JavaScript 中的变量被声明的时候，它们的初始值为 undefined。如果对一个值为 undefined 的变量进行运算操作的时候，那么结果将会是 NaN，NaN 的意思是 “Not a Number”。如果将一个没有 定义 的变量跟字符串进行连接的时候，你将获得一个字符串"undefined"。

任务:
定义3个变量 a、b、c ，并且分别给它们赋值：5、10、"I am a" ，这样它们就不会变成 undefined（未定义的了）。

// Initialize these three variables
var a;
var b;
var c;// Do not change code below this linea = 5;
b = 10;
c = "I am a";a = a + 1;
b = b + 5;
c = c + " String!";

理解JavaScript变量的大小写敏感性

在 JavaScript 中所有的变量都是大小写敏感的。这意味着你要区分大写字母和小写字母。

MYVAR与MyVar和myvar 是截然不同的变量。这就有可能导致多个不同的变量却有着有相似的名字。正是由于以上原因所以强烈地建议你, 不要使用这一特性。（尽量避免设置名字相近难以区分的变量名）

最佳实践
使用 驼峰命名法 来设置一个 Javascript 变量，在 驼峰命名法 中，变量名的第一个单词的首写字母小写，后面的单词的第一个字母均为大写。

举个栗子:

var someVariable;
var anotherVariableName;
var thisVariableNameIsTooLong;

任务:
修正声明的变量，使它们的命名符合 驼峰命名法 的规范。

// Declarations
var studlyCapVar;
var properCamelCase;
var titleCaseOver;// Assignments
studlyCapVar = 10;
properCamelCase = "A String";
titleCaseOver = 9000;

JavaScript加法运算

Number 是JavaScript中的数据类型，表示数字数据。
现在让我们尝试在JavaScript中做加法运算。

JavaScript 中使用 + 运算符来让两个数字执行加法运算。

举个栗子

myVar = 5 + 10; // 等于 15

任务:
改变数字 0 让变量 sum 的值为 20.

var sum = 10 + 10;

JavaScript减法运算

我们可以在 JavaScript 中执行减法运算。

JavaScript 中使用 - 运算符来做减法运算。

举例

myVar = 12 - 6; // 等于 6

任务:
改变数字 0 让变量 difference 的值为 12。

var difference = 45 - 33;

JavaScript乘法运算

我们可在 JavaScript 中使用乘法运算。

JavaScript 中可以使用 * 运算符来让两个数字相乘。

举个栗子

myVar = 13 * 13; // assigned 169

任务:
改变数值 0 来让变量 product 的值等于 80。

在这里插入代码片

var product = 8 * 10;

JavaScript除法运算

我们可以在 JavaScript 中做除法运算。

JavaScript 中使用 / 运算符做除法运算。

举个栗子

myVar = 16 / 2; // assigned 8

任务:
改变数值0来让变量 quotient 的值等于2。

var quotient = 66 / 33;

JavaScript自增运算++

使用 ++ 运算符，我们可以轻易地对变量进行自增或者+1运算。

i++;

等效于

i = i + 1;

提示
i++;这种写法，省去了使用=运算符的必要。

任务:
重写代码，使用 ++ 来对变量 myVar 进行自增操作。

var myVar = 87;// Only change code below this line
myVar++;

JavaScript自减运算

使用自减运算符符号 -- ，你可以轻易地对一个变量执行 自减 或者-1操作。

i--;

等效于

i = i - 1;

提示
i--;这种写法，省去了使用=运算符的必要。

任务:
重写代码，使用 -- 对 myVar 执行自减操作。

var myVar = 11;// Only change code below this line
myVar--;

JavaScript浮点数

我们可以把小数存储到变量中。小数也被称作 浮点数 。

提示
不是所有的实数都可以用 浮点数 来表示。因为可能存在四舍五入的错误，详情在这儿。

任务:
创建一个变量 myDecimal 并给它赋值一个浮点数。 (e.g. 5.7)。

var ourDecimal = 5.7;// Only change code below this linevar myDecimal = 5.7;

JavaScript 浮点数陷阱及解法

JavaScript小数乘法运算

在 JavaScript 中，你可以用小数进行计算，就像整数一样。

让我们把两个小数相乘，并得到它们相乘的结果。

任务:
改变 0.0 的数值让变量product的值等于 5.0。

var product = 2.0 * 2.5;

JavaScript小数的除法运算

现在让我们来用一个小数做除法运算。

任务:
改变数值 0.0 的值让变量 quotient 的值等于 2.2.

var quotient = 4.4 / 2.0;

JavaScript取余运算%

使用%运算符来对两个数字进行求余运算。

举个栗子

5 % 2 = 1

用法
在数学中，看一个数是奇数还是偶数，只需要看这个数除以2得到的余数是0还是1。

17 % 2 = 1 (17 is 奇数)
48 % 2 = 0 (48 is 偶数)

任务:
使用 % 操作符，计算11除以3剩下的余数，并把余数赋给变量remainder。

// Only change code below this linevar remainder;remainder = 11 % 3;

JavaScript +=赋值操作

在编程当中，通常通过赋值来修改变量的内容。请记住，先计算=右边，然后把计算出来的结果赋给左边。

myVar = myVar + 5;

以上是最常见的运算赋值语句，先运算、再赋值。

还有一类操作符是一步到位合并了运算与赋值的操作。

这类运算符的其中一种就是 += 运算符。

myVar += 5; 也是把数值 5 加到变量 myVar上。

任务:
使用 += 操作符实现同样的效果。

var a = 3;
var b = 17;
var c = 12;// Only modify code below this linea += 12;
b += 9;
c += 7;

JavaScript -=赋值操作
与 += 操作符类似，-= 操作符用来对一个变量进行减法赋值操作。

myVar = myVar - 5;

将会从变量 myVar 中减去数值 5。

也可以写成这种形式：

myVar -= 5;

任务:
使用 -= 操作符实现同样的效果。

var a = 11;
var b = 9;
var c = 3;// Only modify code below this linea -= 6;
b -= 15;
c -= 1;

JavaScript *=赋值操作

*= 运算符是让变量与一个数相乘并赋值。

myVar = myVar * 5;

将会把变量 myVar 与数值 5相乘并赋值。

也可以写作这样的形式:

myVar *= 5;

任务:
使用 *=运算符实现同样的效果。

var a = 5;
var b = 12;
var c = 4.6;// Only modify code below this linea *= 5;
b *= 3;
c *= 10;

JavaScript /=赋值操作
/= 运算符是让变量与另一个数相除并赋值。

myVar = myVar / 5;

会把变量 myVar 的值除于 5并赋值。

也可以写作这样的形式:

myVar /= 5;

任务:
使用 /=操作符实现同样的效果。

var a = 48;
var b = 108;
var c = 33;// Only modify code below this linea /= 12;
b /= 4;
c /= 11;

JavaScript 基本运算综合练习

为了测试你的学习效果，我们结合之前的知识点来做一个摄氏度转华氏度的小程序。

从Celsius摄氏度转换为Fahrenheit华氏度的算法是：摄氏度的温度乘于9除于5，再加上32。
创建一个变量 fahrenheit，然后计算出摄氏度对应的华氏度。

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);

JavaScript 声明字符串变量

先前我们使用过的代码：

var myName = "your name";

"your name" 被称作 字符串。 字符串是用单引号或双引号包裹起来的一连串的零个或多个字符。

任务:
创建两个新的 字符串 变量：myFirstName 和 myLastName 分别为它们赋上你的姓和名的值。

// 举例
var firstName = "Alan";
var lastName = "Turing";// Only change code below this line
var myFirstName = "x";
var myLastName = "zw";

JavaScript 转义字符串中的引号

当你定义一个字符串时，你必须以单引号或双引号作为开头和结尾。那么当你需要在字符串中使用一个: " 或者 ' 时该怎么办呢?

在 JavaScript 中，你可以通过在引号前面使用 反斜杠 (\) 来转义引号。

var sampleStr = "Alan said, \"Peter is learning JavaScript\".";

这标志着提示 JavaScript 该单引号或双引号并不是字符串的结尾，而是出现在字符串内的字符。所以，如果你要打印字符串到控制台，你将得到：

Alan said, "Peter is learning JavaScript".

任务:
使用 反斜杠 将一个字符串以双引号包裹并赋值给变量 myStr，当你将它打印到控制台的时候，你会看到：

I am a "double quoted" string inside "double quotes"

var myStr; // Change this linemyStr = "I am a \"double quoted\" string inside \"double quotes\"";

JavaScript 使用单引号引用字符串

在 JavaScript 中的 字符串 要用单引号或双引号来包裹它，只要你在开始和结束都使用相同类型的引号，单引号和双引号的功能在JavaScript中是相同的。

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

当我们需要在字符串中使用与开头结尾相同的引号时，我们需要对引号进行 转义 。如果你有很多双引号的字符串，使用转义字符可能导致难以阅读。这时候可以使用单引号。

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

任务:
更改myStr字符串用于开始和结束的双引号为单引号，并移除转义符号。

var myStr = '<a href="http://www.example.com" target="_blank">Link</a>';

JavaScript 转义字符串中的特殊符号

字符串中的转义序列

引号不是字符串中唯一的可以被转义字符。下面是常见的转义序列列表:

Code         Output\'               单引号
\"             双引号
\\              反斜杠符
\n              换行符
\r              回车符
\t              制表符
\b              退格符
\f              换页符

注意，如果你想要显示一个反斜杠就必须要转义它。

任务:
按照下面的顺序，并且用空格来分割：
反斜杠 制表符 回车符 换行符 并把它赋值给变量 myStr
注意：请使用双引号包含内容，并且注意内容前后不要留有非必要的空格

var myStr;myStr = "\\ \t \r \n";

JavaScript字符串连接方式

在 JavaScript 中，当 + 运算符与 字符串 一起使用的时候，它被称作 连接 运算符。你可以通过和其他字符串连接 来创建一个新的字符串。

举个栗子：

'My name is Alan,' + ' I concatenate.'

注意：
注意空格。连接操作不会添加两个字符串之外的空格，所以想加上空格的话，你需要自己在字符串里面添加。
任务：
使用 + 运算符，把字符串 "This is the start. " 和 "This is the end." 连接起来并赋值给变量 myStr。

// 举例
var ourStr = "I come first. " + "I come second.";// Only change code below this linevar myStr = "This is the start." + " This is the end.";

JavaScript +=连接字符串操作

我们还可以使用 += 运算符来将字符串 连接 到现有字符串变量的末尾。对于那些非常长的字符串来说，这是十分有用的。

注意：
注意空格。连接操作不会添加两个字符串以外的空格，所以如果想要加上空格的话，你需要自己在字符串里面添加。
任务：
通过使用 += 操作符来连接这两个字符串:
"This is the first sentence. " 和 "This is the second sentence." 并赋给变量 myStr。

// 举例
var ourStr = "I come first. ";
ourStr += "I come second.";// Only change code below this linevar myStr = "This is the first sentence.";
myStr += " This is the second sentence.";

JavaScript 使用变量连接字符串

有时候你需要创建一个填字风格的字符串。

通过使用连接运算符 + ，你可以插入一个或多个变量来组成一个字符串。

任务：
把你的名字赋值给变量 myName ，然后把变量 myName 插入到字符串 "My name is " 和 " and I am swell!"之间，并把连接后的结果赋值给变量 myStr。

// 举例
var ourName = "Free Code Camp";
var ourStr = "Hello, our name is " + ourName + ", how are you?";// Only change code below this line
var myName = "lazybone";
var myStr = "My name is" + myName + " and I am swell!";

JavaScript 追加变量到字符串上

我们不仅可以创建出多行的字符串，还可以使用加等号(+=)运算符来追加变量到字符串上。

任务：
设置变量 someAdjective 的值，并使用 += 运算符把它追加到变量 myStr 上。

// 举例
var anAdjective = "awesome!";
var ourStr = "Free Code Camp is ";
ourStr += anAdjective;// Only change code below this linevar someAdjective = "balabalabala";
var myStr = "Learning to code is ";
myStr +=someAdjective;

JavaScript 获取字符串的长度

你可以通过在字符串变量或字符串后面写上 .length 来获得变量中string （字符串）值的长度。

"Alan Peter".length; // 10

例如，我们创建了一个变量 var firstName = "Charles"，我们就可以通过使用 firstName.length 来获得 "Charles" 字符串的长度。

任务：
使用 .length 属性来获得变量 lastName 的长度，并把它赋值给变量 lastNameLength。

// 举例
var firstNameLength = 0;
var firstName = "Ada";firstNameLength = firstName.length;// Setup
var lastNameLength = 0;
var lastName = "Lovelace";// Only change code below this line.lastNameLength = lastName.length;

JavaScript 使用中括号获取字符串中的第一个字符

括号符号是一种在字符串中的特定索引处获取字符的方法。

() ：小括号。

[] ：中括号

{}：大括号

JavaScript中只有字符串类型，没有字符类型。

如果要获取字符串中的某个字符，我们需要通过[索引] 来获得对应的字符。

大多数现代编程语言，如JavaScript，不同于人类从1开始计数。它们是从0开始计数，这被称为 基于零 的索引。

例如, 在单词 “Charles” 中索引0上的字符为 “C”，所以在 var firstName = "Charles" 中，你可以使用 firstName[0] 来获得第一个位置上的字符。

任务：
使用[索引]来得到变量 lastName 中的第一个字符，并赋给变量 firstLetterOfLastName 。
提示：
如果你遇到困难了，可以参考一下变量 firstLetterOfFirstName 是如何赋值的。

// 举例
var firstLetterOfFirstName = "";
var firstName = "Ada";firstLetterOfFirstName = firstName[0];// Setup
var firstLetterOfLastName = "";
var lastName = "Lovelace";// Only change code below this line
firstLetterOfLastName = lastName[0];

理解JavaScript字符串的不可变性

在 JavaScript 中，字符串 的值是 不可变的，这意味着一旦字符串被创建就不能被改变。

例如，下面的代码：

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

是不会把变量 myStr 的值改变成 “Job” 的，因为变量 myStr 是不可变的。注意，这 并不 意味着 myStr 永远不能被改变，只是字符串字面量 string literal 的各个字符不能被改变。改变 myStr 中的唯一方法是重新给它赋一个值，就像这样：

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

任务：
把myStr 的值改为Hello World。

// Setup
var myStr = "Jello World";// Only change code below this linemyStr = "Hello World"; // Fix Me

JavaScript 使用中括号索引查找字符串中的第N个字符

你也可以使用 [索引]来获得一个字符串中的某个位置的字符。

请记住，计算机是从 0 开始计数，所以获取第一个字符的索引实际上是[0]。

任务：
让我们使用[索引]，把 lastName 变量的第三个字符赋值给 thirdLetterOfLastName。
提示：
如果你遇到困难了，可以参考一下 secondLetterOfFirstName 变量是如何做的。

// 举例
var firstName = "Ada";
var secondLetterOfFirstName = firstName[1];// Setup
var lastName = "Lovelace";// Only change code below this line.
var thirdLetterOfLastName = lastName[2];

JavaScript 使用中括号索引查找字符串中的最后一个字符

为了得到一个字符串的最后一个字符，你可以获取该字符串的长度并减一来作为最后一个字符的索引。

例如，在 var firstName = "Charles" 中，你可以这样操作 firstName[firstName.length - 1] 来得到字符串的最后的一个字符。

任务：
使用 [索引] 来取得 lastName 变量中的最后一个字符。
提示：
如果你遇到困难了，可以参考一下lastLetterOfFirstName 变量上是怎么做的。

JavaScript 使用中括号索引查找字符串中的最后一个字符
为了得到一个字符串的最后一个字符，你可以获取该字符串的长度并减一来作为最后一个字符的索引。例如，在 var firstName = "Charles" 中，你可以这样操作 firstName[firstName.length - 1] 来得到字符串的最后的一个字符。任务
使用 [索引] 来取得 lastName 变量中的最后一个字符。提示
如果你遇到困难了，可以参考一下lastLetterOfFirstName 变量上是怎么做的。

JavaScript 使用中括号索引查找字符串中倒数第N个字符

我们既然可以获取字符串的最后一个字符，也可以用相同的方法获取字符串的倒数第N个字符。

例如，你可以这样 firstName[firstName.length - 3] 操作来获得 var firstName = "Charles" 字符串中的倒数第三个字符。

任务：
使用 [索引] 来获得 lastName 字符串中的倒数第二个字符。
提示：
如果你遇到困难了，可以参考一下thirdToLastLetterOfFirstName 变量是如何做到的。

// 举例
var firstName = "Ada";
var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];// Setup
var lastName = "Lovelace";// Only change code below this line
var secondToLastLetterOfLastName = lastName[lastName.length - 2];

Javascript 字符串操作综合训练

填词造句

现在我们将结合之前学习的字符串相关知识，来玩一个填字风格的文字游戏。

通过使用提供的变量：名词myNoun、形容词myAdjective、动词myVerb、副词myAdverb，来创建一个新的字符串并赋值到 result。

此外，除了所提供的词之外，你还需要添加额外的连接字符串。

例如：result = myNum+’ aa '+myNun;使用+连接字符串，并且中间用额外字符" aa "来隔开，注意间隔字母两边要用空格，你也可以使用，来分割

我们提供了多种审核，该审核用多个不同单词的输入来运行你的函数，以确保所有提供的单词和你额外添加的连接字符串能够准确输出。

function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {
var result = myAdjective + " "+ myNoun + " " + myVerb + " " + myAdverb;
// Your code below this line
myNoun = "dog";
myAdjective = "big";
myVerb = "ran";
myAdverb = "quickly";
// Your code above this line
return result;
}// Change the words here to test your function
wordBlanks("dog", "big", "ran", "quickly");

Javascript 数组操作

通过 数组，我们可以将多个数据存储于同一个变量中。

通过左括号[开始定义一个数组，以右括号]结束定义，并把每个数据条目之间用逗号隔开，就像这样：
var sandwich = ["peanut butter", "jelly", "bread"]。

任务：
创建一个包含 字符串 和 数字 的数组 myArray。
提示：
如果你遇到困难，请参考文本编辑器中的示例代码。

// 举例
var array = ["John", 23];// Only change code below this line.
var myArray = ["ohhhh",23];

Javascript 多维数组操作

你也可以在数组中包含其他数组，就像这样: [["Bulls", 23],["White Sox", 45]]。这被称为一个 多维数组。

任务：
创建一个名为 myArray的多维数组。

// 举例
var ourArray = [["the universe", 42], ["everything", 101010]];// Only change code below this line.
var myArray = [["be", 99], ["better", 88]];

JavaScript 使用索引查找数组中的数据

我们可以像操作字符串一样通过数组索引[index]来访问数组中的数据。

数组索引的使用与字符串索引一样，不同的是，通过字符串的索引得到的是一个字符，通过数组索引得到的是一个数据条目。与字符串类似，数组也是 基于零 的索引，因此数组的第一个元素的索引是 0。

例如:

var array = [1,2,3];
array[0]; // 等于 1
var data = array[1];// 等于 2

任务:
创建一个名为 myData 的变量，并把 myArray 的第一个索引上的值赋给它。

// 举例
var ourArray = [1,2,3];
var ourData = ourArray[0]; // equals 1// Setup
var myArray = [1,2,3];// Only change code below this line.var myData = myArray[0];

JavaScript 使用索引修改数组中的数据

与字符串的数据不可变不同，数组的数据是可变的，并且可以自由地改变。

例如

var ourArray = [3,2,1];
ourArray[0] = 1; // ourArray等于 [1,2,1]

任务:
修改数组 myArray 中索引0上的值为 3。

// 举例
var ourArray = [1,2,3];
ourArray[1] = 3; // ourArray now equals [1,3,3].// Setup
var myArray = [1,2,3];// Only change code below this line.myArray[0] = 3;

JavaScript 使用索引操作多维数组

可以把 多维 数组理解成是一个 数组中的数组。当使用[]去访问数组的时候，第一个[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

任务:
对数组 myArray 使用[index]操作使得 myData 的值为 8

// Setup
var myArray = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]];// Only change code below this line.
var myData = myArray[2][1];

JavaScript push()函数追加数组数据

将数据追加到一个数组末尾的最简单的方法是通过 push() 函数。

.push() 允许有一个或多个参数，并把它“push”到数组的末尾。

var arr = [1,2,3];
arr.push(4);
// 现在arr的值为 [1,2,3,4]

任务:
把 ["dog", 3] “push”到 myArray 变量的末尾。

// 举例
var ourArray = ["Stimpson", "J", "cat"];
ourArray.push(["happy", "joy"]);
// ourArray now equals ["Stimpson", "J", "cat", ["happy", "joy"]]// Setup
var myArray = [["John", 23], ["cat", 2]];
myArray.push(["dog", 3]);
// Only change code below this line.

JavaScript pop()函数弹出数组最后数据

改变数组中数据的另一种方法是用 .pop() 函数。

.pop() 函数用来“抛出”一个数组末尾的值。我们可以把这个“抛出”的值赋给一个变量存储起来。

数组中任何类型的数据条目（数值，字符串，甚至是数组）可以被“抛出来” 。

举个例子, 对于这段代码

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

现在 oneDown 的值为 6 ，数组变成了 [1, 4]。

任务:
使用 .pop() 函数移除 myArray 中的最后一条，并且把“抛出”的值赋给 removedFromMyArray。

// 举例
var ourArray = [1,2,3];
var removedFromOurArray = ourArray.pop();
// removedFromOurArray now equals 3, and ourArray now equals [1,2]// Setup
var myArray = [["John", 23], ["cat", 2]];// Only change code below this line.
var removedFromMyArray = myArray.pop();

JavaScript shift()函数移出数组第一个数据

pop() 函数用来移出数组中最后一个元素。如果想要移出第一个元素要怎么办呢？

.shift() 就是专门用来处理这类型需求的。它的工作原理类似 .pop()，但它移除的是第一个元素，而不是最后一个。

任务:
使用 .shift() 函数移出 myArray 中的第一项，并把“移出”的值赋给 removedFromMyArray。

// 举例
var ourArray = ["Stimpson", "J", ["cat"]];
removedFromOurArray = ourArray.shift();
// removedFromOurArray now equals "Stimpson" and ourArray now equals ["J", ["cat"]].// Setup
var myArray = [["John", 23], ["dog", 3]];// Only change code below this line.
var removedFromMyArray = myArray.shift();

JavaScript unshift()函数移入数据到数组第一位

你不仅可以 shift（移出）数组中的第一个元素，你也可以 unshift（移入）一个元素到数组的头部。

.unshift() 函数用起来就像 .push() 函数一样, 但不是在数组的末尾添加元素，而是在数组的头部添加元素。

任务:
使用 unshift() 函数把["Paul",35] 加入到 myArray 的头部。

// 举例
var ourArray = ["Stimpson", "J", "cat"];
ourArray.shift(); // ourArray now equals ["J", "cat"]
ourArray.unshift("Happy");
// ourArray now equals ["Happy", "J", "cat"]// Setup
var myArray = [["John", 23], ["dog", 3]];
myArray.shift();
myArray.unshift(["Paul", 35]);
// Only change code below this line.

JavaScript 创建购物清单实战案例

创建一个名叫 myList的购物清单，清单的数据格式必须是多维数组。

每个子数组中的第一个元素应该是购买的物品名称，第二个元素应该是物品的数量，类似于：

["Chocolate Bar", 15]

任务：你的购物清单至少应该有5个子数组。

var myList = [["mini cookie", 3], ["small cookie", 6], ["cookie", 9], ["large cookie", 12], ["super cookie", 15]];

JavaScript 函数定义

在 JavaScript 中，我们可以把代码的重复部分抽取出来，放到一个函数（functions）中。

这是一个函数（function）的例子：

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

你可以通过函数名称functionName加上后面的小括号来调用这个函数（function），就像这样：

functionName();

每次调用函数时它会打印出消息的“Hello World”到开发的控制台上。所有的大括号之间的代码将在每次函数调用时执行。

任务:
创建一个名为 myFunction 的函数，这个函数可以打印“Hi World”到开发控制台上。
调用这个函数。

// 举例
function ourFunction() {
console.log("Heyya, World");
}ourFunction();// Only change code below this line
function myFunction(){console.log("Hi World");
}myFunction();

JavaScript 带参数函数定义

函数的参数parameters在函数中充当占位符(也叫形参)的作用，参数可以为一个或多个。调用一个函数时所传入的参数为实参，实参决定着形参真正的值。

这是带有两个参数的函数， param1 和 param2：

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

接着我们调用 testFun：

testFun("Hello", "World");

我们传递了两个参数， “Hello” 和 “World”。在函数内部，param1 等于“Hello”，param2 等于“World”。请注意，testFun 函数可以多次调用，每次调用时传递的参数会决定形参的实际值。

任务：
创建一个名为 myFunction 的函数，它可以接收两个参数，计算参数的和，将结果输出到控制台。
调用这个函数。

// 举例
function ourFunction(a, b) {
console.log(a - b);
}
ourFunction(10, 5); // Outputs 5// Only change code below this line.
function myFunction(a, b){console.log(a + b);
}myFunction(10, 5);

JavaScript 函数全局变量定义

在 JavaScript 中， 作用域 影响着变量的作用范围。在函数外定义的变量具有 全局 作用域。这意味着，具有全局作用域的变量可以在代码的任何地方被调用。

没有使用var关键字定义的变量，会被自动创建在全局作用域中，变成全局变量。当在代码其他地方无意间定义了一个变量，刚好变量名与全局变量相同，这时候会产生意想不到的后果，可能导致你的代码出现BUG。因此你应该总是使用var关键字来声明你的变量。

任务:
在函数外声明一个 全局 变量 myGlobal，并给它一个初始值 10
在函数 fun1 的内部，不使用 var 关键字来声明 oopsGlobal，并赋值为 5。

// Declare your variable here
var myGlobal = 10;function fun1() {
// Assign 5 to oopsGlobal Here
oopsGlobal = 5;
}// Only change code above this line
function fun2() {
var output = "";
if (typeof myGlobal != "undefined") {
output += "myGlobal: " + myGlobal;
}
if (typeof oopsGlobal != "undefined") {
output += " oopsGlobal: " + oopsGlobal;
}
console.log(output);
}
//typeof的作用是用来检测一个变量的类型
/* typeof运算符的返回类型为字符串，值包括如下几种：1. 'undefined'              --未定义的变量或值2. 'boolean'                 --布尔类型的变量或值3. 'string'                     --字符串类型的变量或值4. 'number'                  --数字类型的变量或值5. 'object'                    --对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)6. 'function'                 --函数类型的变量或值*/

JavaScript 函数局部变量定义

在一个函数内声明的变量，以及该函数的参数都是局部变量，意味着它们只在该函数内可见。

这是在函数 myTest内声明局部变量loc 的最佳例子：

function myTest() {
var loc = "foo";
console.log(loc);
}
myTest(); // "foo"
console.log(loc); // "undefined"

在函数外，loc 是未定义的。

任务:
在函数 myFunction 内部声明一个局部变量 myVar，并删除外部console.log。

function myFunction() {
'use strict';                            //"use strict" 的目的是指定代码在严格条件下执行。严格模式下你不能使用未声明的变量。var myVar
console.log(myVar);
}
myFunction();// run and check the console
// myVar is not defined outside of myFunction// now remove the console log line to pass the test

JavaScript 函数全局变量与局部变量差异

一个程序中有可能具有相同名称的 局部 变量 和 全局 变量。在这种情况下，局部 变量将会优先于 全局 变量。

下面为例：

var someVar = "Hat";
function myFun() {
var someVar = "Head";
return someVar;
}

函数 myFun 将会返回 "Head"，因为 局部变量 优先级更高。

任务:
给 myFunction 添加一个局部变量来覆盖 outerWear 并赋值为 "sweater"。

// Setup
var outerWear = "T-Shirt";function myFunction() {
// Only change code below this line
var outerWear = "sweater";// Only change code above this line
return outerWear;
}myFunction();

JavaScript 函数使用return返回值

我们可以把数据通过函数的 参数 来传入函数，也可以使用 return 语句把数据从一个函数中传出来。

举个栗子

function plusThree(num) {
return num + 3;
}
var answer = plusThree(5); // 8

plusThree 带有一个为 num 的 参数 并且返回（returns）一个等于 num + 3 的值。

任务:
创建一个函数 timesFive 接受一个参数, 把它乘于 5 之后并返回（returns）。

// 举例
function minusSeven(num) {
return num - 7;
}// Only change code below this linefunction timesFive(num){return num * 5;
}

JavaScript 函数使用返回值进行赋值

复习一下，赋值之前，先完成等号右边的操作。这意味着我们可把一个函数的返回值，赋值给一个变量。

假设我们预先定义的函数 sum 其功能就是将两个数字相加，那么：

ourSum = sum(5, 12);

将调用 sum 函数，返回return了一个数值 17，然后把它赋值给了 ourSum 变量。

任务:
调用 process 函数并传入参数值 7，然后把返回的值赋值给变量 processed。

// 举例
var changed = 0;function change(num) {
return (num + 5) / 3;
}changed = change(10);// Setup
var processed = 0;function process(num) {
return (num + 3) / 5;
}// Only change code below this line
processed = process(7);

JavaScript 队列

在计算机科学中 队列（queue）是一个抽象的数据结构，队列中的数据条目都是有秩序的。新的条目会被加到 队列 的末尾，旧的条目会从 队列 的头部被移出。

写一个函数 queue ，用一个数组arr和一个数字item作为参数。数字item添加到数组的结尾，然后移出数组的第一个元素，最后队列函数应该返回被删除的元素。

function queue(arr, item) {
// Your code here
arr.push(item);          //追加数组数据
var a = arr.shift();      //移除并赋值
return a;// Change this line
}// Test Setup
var testArr = [1,2,3,4,5];// Display Code
console.log("Before: " + JSON.stringify(testArr));
console.log(queue(testArr, 6)); // Modify this line to test
console.log("After: " + JSON.stringify(testArr));

JavaScript 布尔boolean数据类型

布尔（Boolean）是另一种数据类型。

布尔 值要么是true 要么是false。它非常像电路开关， true 是“开”，false 是“关”。这两种状态是互斥的。

注意:
Boolean 值绝不会写作被引号包裹起来的形式。字符串 的 "true" 和 "false" 不是 布尔值，在 JavaScript 中也没有特殊含义。（布尔值不是字符串）

任务:
修改 welcomeToBooleans 函数，让它返回 true 而不是 false。

function welcomeToBooleans() {// Only change code below this line.return true; // Change this line// Only change code above this line.
}

JavaScript 等于比较运算符==

在 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// true1 ==2// false1 == '1' // true
"3"==3// true

任务:
把 相等运算符 添加到指定的行，这样当 val 的值为12的时候，函数会返回"Equal"。

// Setup
function myTest(val) {
if (val == 12) { // Change this line
return "Equal";
}
return "Not Equal";
}// Change this value to test
myTest(12);

JavaScript 全等于比较运算符===

全等（===）是相对于相等操作符（==）的一种操作符。与相等操作符不同的是全等比较严格，它会同时比较元素的值和 数据类型。

举个例子:

3 === 3 // true
3 === '3' // false

3 是一个 数字 类型的，而'3' 是一个 字符 类型的，所以3不全等于'3'。

任务:
在 if 语句值使用全等运算符，这样当 val 严格等于7的时候，函数会返回"Equal"。

// Setup
function myTest(val) {
if (val === 7) { // Change this line
return "Equal";
}
return "Not Equal";
}// Change this value to test
myTest(7);

JavaScript 不等于比较运算符!=

不相等运算符（!=）与相等运算符是相反的。在不相等运算符中，如果条件结果在相等运算符中为“false”则会被判断为返回 true。与相等运算符类似，不相等运算符在比较的时候也会转换值的数据类型。

例如

1 != 2// true
1 != "1"// false
1 != '1'// false
1 != true // false
0 != false// false

任务:
在 if 语句中，添加不相等运算符 !=，这样函数在当 val 不等于99 的时候，会返回 “Not Equal”。

// Setup
function myTest(val) {
if (val != 99) { // Change this line
return "Not Equal";
}
return "Equal";
}// Change this value to test
myTest(99);

JavaScript 不全等于比较运算符!==

不全等运算符（!==）与全等运算符是相反的。这意味着“不全等”并返回 false 的地方，用全等运算会返回 true，反之亦然。全等运算符不会转换值的数据类型。

例如:

3 !== 3 // false
3 !== '3' // true
4 !== 3 // true

任务:
在 if 语句中，添加 不全等运算符，这样如果 val 不全等于 17 的时候，函数会返回 “Not Equal”。

// Setup
function myTest(val) {
// Only Change Code Below this Lineif (val !== 17) {// Only Change Code Above this Linereturn "Not Equal";
}
return "Equal";
}// Change this value to test
myTest(17);

JavaScript 大于比较运算符>

使用大于运算符（>）来比较两个数字。如果大于运算符左边的数字大于右边的数字，将会返回 true。否则，它返回 false。

与相等运算符一样，大于运算符在比较的时候，会转换值的数据类型。

举个栗子:

 5 > 3 // true7 > '3' // true2 > 3 // false
'1' > 9// false

任务:
添加 大于 运算符到指定的行，使得返回的语句是有意义的。

function myTest(val) {
if (val > 100) {// Change this line
return "Over 100";
}if (val > 10) {// Change this line
return "Over 10";
}return "10 or Under";
}// Change this value to test
myTest(10);

JavaScript 大于等于比较运算符>=

使用 大于等于 运算符（>=）来比较两个数字的大小。如果大于等于运算符左边的数字比右边的数字大或者相等，它会返回 true。否则，它会返回 false。

与相等运算符相似，大于等于 运算符在比较的时候会转换值的数据类型。

举个栗子:

 6>=6// true7>= '3' // true2>=3// false
'7' >=9// false

任务:
添加 大于等于 运算符到指定行，使得函数的返回语句有意义。

function myTest(val) {
if (val >= 20) {// Change this line
return "20 or Over";
}if (val >= 10) {// Change this line
return "10 or Over";
}return "9 or Under";
}// Change this value to test
myTest(10);

JavaScript 小于比较运算符<

使用 小于 运算符（<）比较两个数字的大小。如果小于运算符左边的数字比右边的数字小，它会返回 true。否则，他会返回 false。与相等运算符类似，小于 运算符在做比较的时候会转换值的数据类型。

举个栗子:

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

任务:
添加 小于 运算符到指定行，使得函数的返回语句有意义。

function myTest(val) {
if (val < 25) {// Change this line
return "Under 25";
}if (val < 55) {// Change this line
return "Under 55";
}return "55 or Over";
}// Change this value to test
myTest(10);

JavaScript 小于等于比较运算符<=

使用 小于等于 运算符（<=）比较两个数字的大小。如果在小于等于运算符，左边的数字小于或者等于右边的数字，它会返回 true。如果在小于等于运算符，左边的数字大于或者等于右边的数字，它会返回 false。与相等运算符类型，小于等于 运算符会转换数据类型。

举个栗子:

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

任务:
添加 小于等于 运算符到指定行，使得函数的返回语句有意义。

function myTest(val) {
if (val <= 12) {// Change this line
return "Smaller Than or Equal to 12";
}if (val <= 24) {// Change this line
return "Smaller Than or Equal to 24";
}return "25 or More";
}// Change this value to test
myTest(10);

JavaScript 使用逻辑与运算符&&比较数值

有时你需要在一次判断中做多个操作。运算符的左边和右边结果必须都是 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";

任务:
结合两个if语句为一个语句，如果 val 小于或等于 50 并且大于或等于 25，返回 "Yes"。否则，将返回 "No"。

function myTest(val) {
// Only change code below this lineif (val <= 50 && val >= 25) {return "Yes";
}
// Only change code above this line
return "No";
}// Change this value to test
myTest(10);

JavaScript 使用逻辑或运算符||比较数值

逻辑或运算符左右两边任何一个操作数是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";

任务:
结合两个if语句为一个语句，如果val不在10和20之间(包括10和20)，返回 "Outside"。反之，返回 "Inside"。

function myTest(val) {
// Only change code below this lineif (val < 10 || val > 20) {return "Outside";
}// Only change code above this line
return "Inside";
}// Change this value to test
myTest(15);1

JavaScript if语句

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"。

任务：
在函数内部创建一个 if 语句，如果该参数 wasThatTrue 值为 true，返回 "That was true"，否则，并返回 "That was false"。

// 举例
function ourFunction(isItTrue) {
if (isItTrue) {
return "Yes, it's true";
}
return "No, it's false";
}// Setup
function myFunction(wasThatTrue) {// Only change code below this line.
if (wasThatTrue) {return "That was true";
}
return "That was false";// Only change code above this line.}// Change this value to test
myFunction(true);

JavaScript else语句

当if语句的条件为真，大括号里的代码执行，那如果条件为假呢？

这时候需要写一个else语句，当条件为假时执行相应的代码。

if (num > 10) {
return "Bigger than 10";
} else {
return "10 or Less";
}

任务:
结合多个if语句为一个if/else语句。

function myTest(val) {
var result = "";
// Only change code below this lineif (val > 5) {
result = "Bigger than 5";
}else{
result = "5 or Smaller";
}// Only change code above this line
return result;
}// Change this value to test
myTest(4);

JavaScript else if语句

如果你有多个条件语句，你可以通过else if语句把 if语句链起来。

if (num > 15) {
return "Bigger than 15";
} else if (num < 5) {
return "Smaller than 5";
} else {
return "Between 5 and 15";
}

任务:
使用else if实现同样的效果。

function myTest(val) {
if (val > 10) {
return "Greater than 10";
}else if (val < 5) {
return "Smaller than 5";
}
else{
return "Between 5 and 10";
}
}// Change this value to test
myTest(7);

JavaScript if、else if语句中代码的执行顺序

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"

任务:
更改函数的逻辑顺序以便通过所有的测试用例。

function myTest(val) {
if (val < 5) {
return "Less than 5";
} else if (val < 10) {
return "Less than 10";
} else {
return "Greater than or equal to 10";
}
}// Change this value to test
myTest(7);

JavaScript 同时使用if、else if 语句

if/else 语句串联在一起可以实现复杂的逻辑，这是多个if/else if 语句串联在一起的伪代码：

if (condition1) {
statement1
} else if (condition2) {
statement2
} else if (condition3) {
statement3
. . .
} else {
statementN
}

任务:
把if/else if语句串联起来实现下面的逻辑：
num < 5 - return “Tiny”
num <10 - return “Small”
num < 15 - return “Medium”
num < 20 - return “Large”
num >= 20- return "Huge"

function myTest(num) {
// Only change code below this line
if (num < 5){return "Tiny";
}else if (num <10){return "Small";
}else if (num <15){return "Medium";
}else if (num <20){return "Large";
}elsereturn "Huge";
// Only change code above this line
}// Change this value to test
myTest(7);

Javascript 逻辑运算综合实战

在高尔夫golf游戏中，每个洞都有自己的标准杆数par，代表着距离。根据你把球打进洞所挥杆的次数strokes，可以计算出你的高尔夫水平。

函数将会传送2个参数，分别是标准杆数par 和 挥杆次数strokes ，根据下面的表格返回正确的水平段位。

Strokes	Return
1	“Hole-in-one!”
<= par - 2	“Eagle”
par - 1	“Birdie”
par	“Par”
par + 1	“Bogey”
par + 2	“Double Bogey”
> = par + 3	“Go Home!”

par 和 strokes 必须是数字而且是正数。

function golfScore(par, strokes) {
// Only change code below this line
if (strokes == 1){return "Hole-in-one!";
}else if (strokes <= par - 2){return "Eagle";
}else if (strokes == par - 1){return "Birdie";
}else if (strokes == par){return "Par";
}else if (strokes == par + 1){return "Bogey";
}else if (strokes == par + 2){return "Double Bogey";
}return "Go Home!";
// Only change code above this line
}// Change these values to test
golfScore(4, 2);

JavaScript 使用switch语句进行多选项选择

如果你有非常多的选项需要选择，可以使用switch语句。根据不同的参数值会匹配上不同的case分支，语句会从第一个匹配的case分支开始执行，直到碰到break就结束。

这是一个伪代码案例：

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

测试case 值使用严格等于，break关键字告诉javascript停止执行语句。如果没有break关键字，下一个语句会继续执行。

任务:
写一个测试 val的switch语句，并且根据下面的条件来设置不同的answer：
1 - “alpha”
2 - “beta”
3 - “gamma”
4 - "delta"

function myTest(val) {
var answer = "";
// Only change code below this line
switch (val) {case 1: answer = "alpha";break;case 2: answer = "beta";break;case 3: answer = "gamma";break;case 4: answer = "delta";break;}// Only change code above this line
return answer;
}// Change this value to test
myTest(1);

JavaScript 在switch语句中添加default语句

在switch 语句中你可能无法用case来指定所有情况，这时你可以添加default语句。当再也找不到case匹配的时候default语句会执行，非常类似于if/else组合中的else语句。

default语句应该是最后一个case。

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

任务:
写一个根据下面的条件来设置answer的switch语句：
"a" - “apple”
"b" - “bird”
"c" - “cat”
default - "stuff"

function myTest(val) {
var answer = "";
// Only change code below this line
switch (val) {case "a":answer = "apple";break;case "b":answer = "bird";break;case "c":answer = "cat";break;default:answer = "stuff";
}// Only change code above this line
return answer;
}// Change this value to test
myTest(1);

JavaScript switch语句中的多个相同选项判断

如果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将会产生相同的输出结果。

任务:
写一个根据下面的范围来设置answer 的switch语句：
1-3 - “Low”
4-6 - “Mid”
7-9 - "High"

提示:
你需要为每一个包含数字的范围准备一个answer语句。

function myTest(val) {
var answer = "";
// Only change code below this line
switch (val) {case 1:case 2:case 3:answer = "Low";break;case 4:case 5:case 6:answer = "Mid";break;case 7:case 8:case 9:answer = "High";break;default:// code
}// Only change code above this line
return answer;
}// Change this value to test
myTest(1);

JavaScript 使用switch语句替换串联的if、else if语句

如果你有多个选项需要选择，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";
}

任务:
把串联的 if/if else 语句改成 switch 语句。

function myTest(val) {
var answer = "";
// Only change code below this line
switch (val) {case 'bob':answer = "Marley";break;case 42:answer = "The Answer";break;case 1:answer = "There is no #1";break;case 99:answer = "Missed me by this much!";break;case 7:answer = "Ate Nine";break;default:// code
}
// Only change code above this line
return answer;
}// Change this value to test
myTest(7);

JavaScript 直接在函数中返回boolean值

所有的比较操作符返回的都是一个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;
}

任务:
移除isLess函数的if/else语句但不影响函数的功能。

function isLess(a, b) {
// Fix this codereturn a < b;}// Change these values to test
isLess(10, 15);

JavaScript 在函数中使用return跳出函数

当代码执行到return语句时，函数返回一个结果就结束运行了，return后面的语句根本不会执行。

举个栗子

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

上面的代码输出"Hello"到控制台、返回 “World”，但没有输出"byebye"，因为函数遇到return语句就退出了。

任务:
修改函数abTest当a或b小于0时，函数立即返回一个undefined并退出。

提示:
记住undefined，是一个关键字，而不是一个字符串。

// Setup
function abTest(a, b) {
// Only change code below this line
if(a < 0 || b < 0){return undefined;
}// Only change code above this linereturn Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
}// Change values below to test your code
abTest(-2,2);

JavaScript 条件判断算法综合实战

在赌场21点游戏中，玩家可以通过计算牌桌上已经发放的卡牌的高低值来让自己在游戏中保持优势，这就叫21点算法。

根据下面的表格，每张卡牌都分配了一个值。如果卡牌的值大于0，那么玩家应该追加赌注。反之，追加少许赌注甚至不追加赌注。

Conunt	Change Cards
+1	2,3,4,5,6
0	7,8,9
-1	10,“J”,“Q”,“K”,“A”

你需要写一个函数，实现21点算法，它根据参数 card的值来递增或递减变量count，函数返回一个由当前count和 "Bet"(count>0)或"Hold"(count<=0) 拼接的字符串。注意count和"Bet" 或 "Hold"应该用空格分开。

例如：

"-3 Hold""5 Bet"

提示:
既然card的值为7、8、9时，count值不变，那我们就可以忽略这种情况。

var count = 0;function cc(card) {
// Only change code below this line
switch (card) {case 2:case 3:case 4:case 5:case 6:count++;break;case 10:case "J":case "Q":case "K":case "A":count--;break;
}if(count > 0){return count+" "+"Bet";}else if(count <= 0){return count+" "+"Hold"}
return "Change Me";
// Only change code above this line
}// Add/remove calls to test your function.
// 提示: Only the last will display
cc(2); cc(3); cc(7); cc('K'); cc('A');

return返回多个值得时候，“，”和“+”怎么区分呢?
有逗号说明返回的不止是一个变量，系统会把它处理成tuple对返回，例如 return x1,x2，返回的是（x1,x2）。如果是+号，则先执行字符串的+操作，也就是把两个字符串拼接在一起，得到的是拼接后的变量，返回的也是这个变量，此时只有一个变量返回。

JavaScript 对象操作

你之前可能听说过对象 object 。

对象和数组很相似，数组是通过索引来访问和修改数据，对象是通过属性来访问和修改数据的。

这是一个示例对象：

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

对象适合用来存储结构化数据，就和真实世界的对象一模一样，比如一只猫。

任务：
创建一个叫做myDog的对象，它里面有这些属性： 名称"name"、 腿"legs", 尾巴"tails"、朋友"friends"。
你可以设置对象属性为任何你想要的值，只要 "name" 是字符串、 "legs" 和 "tails" 是数字、"friends" 是数组。

// 举例
var ourDog = {
"name": "Camper",
"legs": 4,
"tails": 1,
"friends": ["everything!"]
};// Only change code below this line.var myDog = {
"name":"lazybone",
"legs": 4,
"tails": 1,
"friends":["its master"]
};

JavaScript 使用点操作符.读取对象属性

有两种方式访问对象属性，一个是点操作符(.)，一个是中括号操作符([])。

当你知道属性的名称的时候，使用点操作符。

这是一个使用点操作符读取对象属性的例子：

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

任务:
通过点操作符读取对象testObj，把hat的属性值赋给变量hatValue，把shirt的属性值赋给shirtValue。

// Setup
var testObj = {
"hat": "ballcap",
"shirt": "jersey",
"shoes": "cleats"
};// Only change code below this linevar hatValue = testObj.hat;// Change this line
var shirtValue = testObj.shirt;// Change this line

JavaScript 使用[]读取对象属性

第二种访问对象的方式就是中括号操作符([])，如果你想访问的属性的名称有一个空格，这时你只能使用中括号操作符([])。

这是一个使用中括号操作符([])读取对象属性的例子：

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

提示：属性名称中如果有空格，必须把属性名称用单引号或双引号包裹起来。

任务:
用中括号操作符读取对象testObj的属性"an entree"值和属性"the drink"值。

// Setup
var testObj = {
"an entree": "hamburger",
"my side": "veggies",
"the drink": "water"
};// Only change code below this linevar entreeValue = testObj["an entree"]; // Change this line
var drinkValue = testObj["the drink"];// Change this linem

JavaScript 使用变量访问对象属性

中括号操作符的另一个使用方式是用变量来访问一个属性。当你需要遍历对象的属性列表或查表时，这种方式极为有用。

这有一个使用变量来访问属性的例子：

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"

提示：当我们通过变量名访问属性的时候，不需要给变量名包裹引号。因为实际上我们使用的是变量的值，而不是变量的名称。

任务:
使用变量playerNumber，通过中括号操作符找到testObj中的16。

// Setup
var testObj = {
12: "Namath",
16: "Montana",
19: "Unitas"
};// Only change code below this line;var playerNumber = 16; // Change this Line
var player = testObj[playerNumber]; // Change this Line

JavaScript 更新对象属性

当你创建了一个对象后，你可以用点操作符或中括号操作符来更新对象的属性。

举个例子，让我们看看 ourDog:

var ourDog = {
"name": "Camper",
"legs": 4,
"tails": 1,
"friends": ["everything!"]
};

让我们更改它的名称为 “Happy Camper”，这有两种方式来更新对象的name属性：

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

任务:
更新 myDog 对象的name属性，让它的名字从 “Coder” 变成 “Happy Coder”。

// 举例
var ourDog = {
"name": "Camper",
"legs": 4,
"tails": 1,
"friends": ["everything!"]
};ourDog.name = "Happy Camper";// Setup
var myDog = {
"name": "Coder",
"legs": 4,
"tails": 1,
"friends": ["Free Code Camp Campers"]
};
myDog.name = "Happy Coder";
// Only change code below this line.

JavaScript 给对象添加属性

你也可以像更改属性一样给对象添加属性。

看看我们是如何给ourDog添加 "bark"属性：

ourDog.bark = "bow-wow";

或者

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

任务:
给myDog添加一个"bark" 属性，设置它的值为狗的声音，例如：“woof”。

// 举例
var ourDog = {
"name": "Camper",
"legs": 4,
"tails": 1,
"friends": ["everything!"]
};ourDog.bark = "bow-wow";// Setup
var myDog = {
"name": "Happy Coder",
"legs": 4,
"tails": 1,
"friends": ["Free Code Camp Campers"]
};
myDog.bark = "woof";
// Only change code below this line.

JavaScript 删除对象属性

我们同样可以删除对象的属性，例如：

delete ourDog.bark;

任务:
删除myDog对象的"tails"属性。

// 举例
var ourDog = {
"name": "Camper",
"legs": 4,
"tails": 1,
"friends": ["everything!"],
"bark": "bow-wow"
};delete ourDog.bark;// Setup
var myDog = {
"name": "Happy Coder",
"legs": 4,
"tails": 1,
"friends": ["Free Code Camp Campers"],
"bark": "woof"
};
delete myDog.tails;
// Only change code below this line.

JavaScript 使用对象进行查找值

对象和字典一样，可以用来存储键/值对。如果你的数据跟对象一样，你可以用对象来查找你想要的值，而不是使用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"

任务:
把switch语句转化为一个叫做lookup的对象。

// Setup
function phoneticLookup(val) {
var result = "";// Only change code below this linevar lookup = {"alpha":"Adams","bravo":"Boston","charlie":"Chicago","delta":"Denver","echo":"Easy","foxtrot":"Frank"
}
result = lookup[val];
// Only change code above this line
return result;
}// Change this value to test
phoneticLookup("charlie");

JavaScript 检查对象属性

有时检查一个对象属性是否存在是非常有用的，我们可以用.hasOwnProperty(propname)方法来检查对象是否有该属性。如果有返回true，反之返回 false。

举例

var myObj = {
top: “hat”,
bottom: “pants”
};
myObj.hasOwnProperty(“top”);// true
myObj.hasOwnProperty(“middle”); // false
任务
修改函数checkObj检查myObj是否有checkProp属性，如果属性存在，返回属性对应的值，如果不存在，返回 “Not Found”。

注意：如果你需要通过变量来访问对象的属性值，请用中括号操作符，点操作符不支持变量。

前端学习，JavaScript实战总结相关推荐

1. 前端学习——JavaScript抽屉，手风琴，购物车特效案例

   一. JavaScript案例介绍 这篇我们通过一些JavaScript案例来完成对JavaScript中BOM对象和DOM对象的理解 首先我们会学到三种常用的JavaScript案例特效 分别是 手 ...

2. 前端学习-JavaScript基础（ES6）

   简介: ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版. ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并 ...

3. 前端学习-JavaScript基础（正则表达式）

   正则表达式 正则表达式在很多程序设计语言都有,大同小异,尤其是在Python爬虫的使用很多,我也就跟他们学习爬爬图片,小视频啥的,咳咳都是学习资料.在JavaScript中,使用比较多的是表单验证,字 ...

4. 前端学习-JavaScript基础

   一.初识JavaScript 官网: https://www.w3.org/standards/webdesign/script 说明: JavaScript语法规范是ECMAScript,ECMAS ...

5. 前端学习——JavaScript原生实现购物车案例

   一. 购物车案例 1.1 案例介绍 今天我们来写另外一个购物车案例,说实话对于我来说这个是花了将近三个小时的时间然后才做出来的,里面可能还存在一些我没有发现的问题,但是能完成基本的功能,对于一些基本的 ...

6. 前端学习—JavaScript

   文章目录 JavaScript 1.引入JavaScript 2.基本语法 3.数据类型 字符串类型 数组 对象 流程控制 Map和Set 严格模式 4.函数 定义函数 5.函数的作用域 6.方法 7 ...

7. 前端学习----JavaScript

   目录 day  one 1.1,JavaScrip-脚本语言 1.2,输出 1.3,应用举例 1.4,基础了解 1.5,数据类型 1.6,类型转换 1.7,运算符 1.8,流程控制语句 Day  tw ...

8. 前端学习JavaScript基础阶段

   初识javascript JavaScript介绍 是一种运行在客户端(浏览器)的编程语言,实现人机交互效果.作用: 网页特效 表单验证 数据交互 服务端编程(node.js)组成: ECMAScri ...

9. react实战项目_前端学习路线图--从网页设计到项目开发

   前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...

10. 尚硅谷JavaScript高级教程(javascript实战进阶)学习笔记

    前言 这个是我学习过程中的笔记,分享给大家,希望对大家有用. 学习内容是尚硅谷JavaScript高级教程(javascript实战进阶),这里是视频链接. 我在前面有两篇对于web前端HTML和CS ...

最新文章

1. 阿里云rds for mysql平台介绍_阿里云RDS for MySQL实例创建账号和数据库？
2. 第三章 PLSQL Developer 安装前oracleclient客户端的配置，在用plsql 连接oracle服务器
3. 【Python】编程笔记9
4. linux利用命令重置大量密码
5. java EL表达式中${param.name}详细
6. Creator开源游戏、插件、教程、视频汇总
7. 第15课：RDD创建内幕彻底解密
8. rtklib-RINEX文件读取-rinex.c解析（一）
9. BP神经网络综合评价法
10. manjaro主目录设置英文
11. Unity3D笔记第十五天——Unity2D技术
12. php公益培训,周日晚上听seo的课,yy88354001
13. 教你怎么快速读出python numpy中给定的array的shape
14. Java五子棋游戏开发博客
15. 利用css伪类元素实现点击范围扩大
16. docker 配置zabbix时区,本地时区与zabbix时区不相符 ,docker 时区,zabbix页面时区跟,docker 时间不一样
17. 2.5 TCP网络协议
18. 自己觉得喜欢的2个项目，慢慢进步吧，呵呵
19. ElementUI如何校验表格单元格内容？其实很简单
20. 无线自由，无所畏“飓”！HyperX Cloud飓风无线电竞游戏耳机推荐

热门文章

1. SpringBoot-生成短链接（长链接转换成短链接-百度短网址）
2. matlab eig eigs,Matlab中的eig函数跟eigs函数的异同点
3. 【软件质量】软件可追踪性
4. 2021 - 45周（App合规自查）
5. 全方位了解WebSocket！（建议收藏）
6. 前端小白入职前的准备
7. 【181023】VC++动画启动软件及文字特效
8. 使用golang iris框架写了一个PDF电子书分享网站 免费给大家提供PDF电子书下载啦
9. mysql deadlock found_mysql deadlock found when trying to get lock 问题排查
10. Stanford机器学习---第十三讲.大规模机器学习