Free Code Camp 练习总结 —— JavaScript 基本知识

我会每天都更新我写东西，学大概有一段时间了，我感触还是挺大的，把之前基础知识又复习一遍，活到老学到老。希望能给在FreecodeCamp有同学有帮助，我会每天更新我在写FreecodeCamp，代码。

现在让我们开始学习最流行的JavaScript库jQuery吧，不用担心JavaScript本身，我们稍后会提到它。

在开始学习使用jQuery之前，我们需要加一些代码到HTML文件中。

首先在页面顶端增加一行script元素，然后写上结束符。

浏览器会运行script 里所有的Javascript，包括jQuery。

在你的script里，添加这个方法:$(document).ready(function() {到你的script，接下来用});结束这个方法

接下来我们来学习如何写方法，方法里面的代码会被浏览器加载。

在没有document ready function以前，你的代码会在HTML没有渲染完成就执行，这样会产生bug。

var firstName = "Ada";
var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];

// 初始化变量
var lastName = "Lovelace";

// 请只修改这条注释以下的代码

var secondToLastLetterOfLastName = lastName[lastName.length - 2];

输出应该是C

大家要注意一下

通过使用提供的变量参数：名词myNoun、形容词myAdjective、动词myVerb、副词myAdverb，来创建一个新的句子 result。

请注意，在英文中，句中的单词是必须用空格来分隔的

function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {

var result = "";
// 请把你的代码写在这条注释以下
result = myNoun +" " + myAdjective + " " + myVerb + " " + myAdverb;
myNoun ="cat ";
myAdjective = "little ";
myVerb = "hit ";
myAdverb = "slowly ";

// 请把你的代码写在这条注释以上
return result;
}

wordBlanks("dog", "big", "ran", "quickly"); // 你可以修改这一行来测试你的代码

输入的要求

wordBlanks("dog", "big", "ran", "quickly") 应该包含所有传入的单词并且单词之间要有间隔(可以添加任意修饰的单词).

wordBlanks("cat", "little", "hit", "slowly") 应该包含所有传入的单词并且单词之间要有间隔(可以添加任意修饰的单词).

#166 Store Multiple Values in one Variable using JavaScript Arrays

使用JavaScript 数组,我们可以在一个地方存储多个数据。

var myArray = ["zhangsan",24];

#167 Nest one Array within Another Array

你可以在JavaScript数组中包含其他数组

var myArray = [["youyouxiong",23],["zhangsan",24]];

#167 Access Array Data with Indexes

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

// 初始化变量
var myArray = [1,2,3];

// 请把你的代码写在这条注释以下

var myData = myArray[0];

#169 Modify Array Data With Indexes

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

// 初始化变量
var myArray = [1,2,3];

// 请把你的代码写在这条注释以下
myArray[0] =3;

#170 Access MultiDimensional Arrays With Indexes

可以把多维数组看作成是一个数组中的数组。当使用[]去访问数组的时候，第一[index]访问的是滴N个子数组，第二个[index]访问的是第N个子数组的第N个元素。

// 初始化变量
var myArray = [[1,2,3], [4,5,6], [7,8,9], [[10,11,12], 13, 14]];

// 请只修改这条注释以下的代码
var myData = myArray[2][1];

输出值为8

#171 Manipulate Arrays With push

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

// 初始化变量
var myArray = [["John", 23], ["cat", 2]];

// 请把你的代码写在这条注释以下

myArray.push(["dog",3]);

#172 Manipulate Arrays With pop

改变数组中数据的另外一种方法是用.pop()函数。.pop()函数用来“抛出”一个数组末尾的值。

// 初始化变量
var myArray = [["John", 23], ["cat", 2]];

// 请只修改这条注释以下的代码
var removedFromMyArray = myArray.pop();

#173 Manipulate Arrays With shift

pop() 函数用来移出数组中最后一个元素。如果想要移出第一个元素要怎么办呢，这就是.shift()用武之地。它的工作原理就像.pop(),但它移除的是第一个元素，而不是最后一个。

// 初始化变量
var myArray = [["John", 23], ["dog", 3]];

// 请只修改这条注释以下的代码

var removedFromMyArray = myArray.shift();

#174 Manipulate Arrays With unshift

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

// 初始化变量
var myArray = [["John", 23], ["dog", 3]];
myArray.shift();

// 请把你的代码写在这条注释以下

myArray.unshift(["Paul",35]);

#175 Shopping List

创建一个名叫myList的购物清单，清单的数据格式就是多维数组。大家创建数组的时候要注意里面不能有中文的逗号，不然编译器会报错。

var myList = [ ["Chocolate Bar", 15],["xiaowang",12],["youyouxiong",15],["zhangsan",16],["lisi",18]];

#176 Write Reusable JavaScript with Functions

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

function myFunction(){
console.log("Hi World");
}

myFunction();

注意：大小写

#177 Passing Values to Functions with Arguments

函数的参数parameters 在函数中充当占位符（也叫形参）的作用，参数可以为一个或多个。调用一个函数是所传入的参数为实参，实参决定着形参真正的值。简单理解：形参即形式、实参即内容。

function myFunction(a,b){
console.log(a + b);
}

myFunction(10,5);

#178 Global Scope and Functions

在JavaScript中，作用域涉及到变量的作用范围。在函数外定义的变量具有全局作用域。这一位着，具有全局作用域的变量可以在代码的任何地方被调用。

// 请在这里定义变量
var myGlobal = 10;
function fun1() {
// 请在这里把 5 赋值给 oopsGlobal
oopsGlobal =5 ;
}

#179 Local Scope and Functions

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

function myFunction() {
var myVar='use strict'; // 函数内声明的变量

console.log(myVar);
}
myFunction();

#180 Global vs Local Scope in Functions

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

// 初始化变量
var outerWear = "T-Shirt"; //也是全局变量

function myFunction() {
// 请把你的代码写在这条注释以下
var outerWear = "sweater"; //局部变量

// 请把你的代码写在这条注释以上
return outerWear;
}

myFunction();

#181 Return a Value from a Function with Return

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

// 请把你的代码写在这条注释以下
function timesFive(num){
return num*5;
}
var answer = timesFive(5);rug

#182 Assignment with a Returned Value

如果你记得我们在这一节Storing Values with the Equal Operator的讨论，赋值之前，先完成等号右边的操作。这意味着我们可把一个函数的返回值，赋值给一个变量。

// 初始化变量
var processed = 0;

function process(num) {
return (num + 3) / 5;
}

processed = process(7);
// 请把你的代码写在这条注释以下
#183 Stand in Line

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

function queue(arr, item) {
// 请把你的代码写在这里
arr.push(item);//首先z增加arr数据组长度
var firstItem = arr.shift(arr); //shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
return firstItem; // 请修改这一行
}

// 初始化测试数据
var testArr = [1,2,3,4,5];

// 控制台输出
console.log("Before: " + JSON.stringify(testArr));
console.log(queue(testArr, 6)); // 你可以修改这一行来测试你的代码
console.log("After: " + JSON.stringify(testArr));

#184 Understanding Boolean Values

另一种数据类型是布尔。布尔值要么是true 要么false 。它非常像电路开关，true是‘开’，false是‘关’这两种状态是互斥的

function welcomeToBooleans() {

// 请只修改这条注释以下的代码

return true; // 请修改这一行

// 请只修改这条注释以上的代码
}
#185 Use Conditional Logic with If Statements

if语句用于在代码中做条件判断。关键字if告诉JavaScript在小括号中的条件为真的情况下去执行定义在大括号里面的代码。这种条件被称为 Boolean 条件，因为他们只可能是 true（真）或 false（假）

当条件的计算结果为 true，程序执行大括号内的语句。当布尔条件的计算结果为 false，大括号内的代码将不会执行。

// 定义 myFunction
function myFunction(wasThatTrue) {

// 请把你的代码写在这条注释以下

if(wasThatTrue){
return "That was true";
}
return "That was false";
// 请把你的代码写在这条注释以上

}

// 你可以修改这一行来测试你的代码
myFunction(true);

#186 Comparison with the Equality Operator

在JavaScript中，有很多互相比较的操作。所有这些操作符度返回一个true或false值

function myTest(val) {
if (val ==12 ) { // 请修改这一行
return "Equal";
}
return "Not Equal";
}

// 你可以修改这一行来测试你的代码
myTest(10);

#187 Comparison with the Strict Equality Operator

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

// 定义 myTest
function myTest(val) {
if (val===7) { // 请修改这一行
return "Equal";
}
return "Not Equal";
}

// 你可以修改这一行来测试你的代码
myTest(10);

#188 Comparison with the Inequality Operator

不相等运算符（！=）与相等运算符相反的。这意味着不相等运算符中，如果“不为真”并且返回false的地方，在相等运算符中会返回true，反之亦然。与相等运算符类似，不相等运算符在比较的时候也会转换至的数据类型。

function myTest(val) {
if (val!=99) { // 请修改这一行
return "Not Equal";
}
return "Equal";
}

// 你可以修改这一行来测试你的代码
myTest(10);

#189 Comparison with the Strict Inequality Operator

严格不相等运算符（！==）与全等运算符相反的。这意味严格不相等并返回false的地方，用严格相等运算符会返回true.z反之亦然。严格相等运算符不会转换值得数据类型。

function myTest(val) {
// 请只修改这条注释以下的代码

if (val !==17) {

// 请只修改这条注释以上的代码

return "Not Equal";
}
return "Equal";
}

// 你可以修改这一行来测试你的代码
myTest(10);

#191Comparison with the Greater Than Or Equal To Operator

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

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

function myTest(val) {
if (val>=20) { // 请修改这一行
return "20 or Over";
}

if (val>=10) { // 请修改这一行
return "10 or Over";
}

return "9 or Under";
}

// 你可以修改这一行来测试你的代码
myTest(11);

#192 Comparison with the Less Than Operator

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

function myTest(val) {
if (val<25) { // 请修改这一行
return "Under 25";
}

if (val<55) { // 请修改这一行
return "Under 55";
}

return "55 or Over";
}

// 你可以修改这一行来测试你的代码
myTest(10);
#193 Comparison with the Less Than Or Equal To Operator

使用小于等于运算符（<=）比较两个数字的大小。如果在小于等于运算符，左边的数字小于或者右边的数字，它会返回true.

如果在小于等于运算符，左边的数字大于或者等于右边的数字，它返回false。与相等运算符类型，小于等于运算符转换数据类型。

function myTest(val) {
if (val<=12) { // 请修改这一行
return "Smaller Than or Equal to 12";
}

if (val<=24) { // 请修改这一行
return "Smaller Than or Equal to 24";
}

return "25 or More";
}

// 你可以修改这一行来测试你的代码
myTest(10);

#195 Comparisons with the Logical And Operator

有时你需要在一次判断中做多个操作。当且仅当运算符的左边和右边都时true，逻辑与运算符（&&）才会返回。

function myTest(val) {
// 请只修改这条注释以下的代码

if (val>=25 && val<=50) {
return "Yes";

}

// 请只修改这条注释以上的代码
return "No";
}

// 你可以修改这一行来测试你的代码
myTest(10);
#195 Comparisons with the Logical Or Operator

如果任何一个操作数时true，逻辑或运算符（||）返回true.反之，返回false。

function myTest(val) {
// 请只修改这条注释以下的代码

if (val<10 || val>20 ) {
return "Outside";
}

// 请只修改这条注释以上的代码
return "Inside";
}

// 你可以修改这一行来测试你的代码
myTest(15);

#196 Introducing Else Statements

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

正常情况下什么也不会发生。

// 你可以修改这一行来测试你的代码
myTest(4);

#197 Introducing Else If Statements

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

function myTest(val) {
if (val > 10) {
return "Greater than 10";
}

else if (val < 5) {
return "Smaller than 5";
}else if (val>=5 && val <=10)
{

return "Between 5 and 10";
}


}

// 你可以修改这一行来测试你的代码
myTest(7);

#198 Logical Order in If Else Statements

if、else if语句中代码的执行顺序是很重要的。

在条件判断语句中，代码的执行顺序是从上到下，所以你需要考虑清楚先执行哪一句，后执行哪一句。

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";
}
}

// 你可以修改这一行来测试你的代码
myTest(7);

#199 Chaining If Else Statements

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

// 你可以修改这一行来测试你的代码
myTest(7);

#200 Golf Code

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

// 你可以修改这一行来测试你的代码
golfScore(5, 4);

#201 Selecting from many options with Switch Statements

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

function myTest(val) {
var answer = "";
// 请把你的代码写在这条注释以下
switch(val){
case 1: answer ="alpha";
break;
case 2: answer ="beta";
break;
case 3: answer ="gamma";
break;
case 4: answer ="delta";
break;
}
// 请把你的代码写在这条注释以上
return answer;
}

// 你可以修改这一行来测试你的代码
myTest(1);

202 Adding a default option in Switch statements

在switch语句中你可能无法用case来指定所有情况，这时你可以添加default语句.当再也找不到case匹配的时候default语句会执行

非常类似于if/else组合中的else语句。

function myTest(val) {
var answer = "";
// 请把你的代码写在这条注释以下
switch(val){

case "a": answer="apple";
break;
case "b" : answer="bird";
break;
case "c": answer="cat";
break;
case "d": answer="stuff";
break;
default:
answer="stuff";
}


// 请把你的代码写在这条注释以上
return answer;
}

// 你可以修改这一行来测试你的代码
myTest(1);

#203 Multiple Identical Options in Switch Statements

如果swicth语句中的case 分支的break 语句遗漏掉了后面的case语句会一直执行遇到break.如果你有多个输入值和输出值一样，可以试试。

function myTest(val) {
var answer = "";
// 请把你的代码写在这条注释以下
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;
}

// 请把你的代码写在这条注释以上
return answer;
}

// 你可以修改这一行来测试你的代码
myTest(1);

#204 Replacing If Else Chains with Switch

如果你有多个选项需要选择，switch 语句写起来会比多个串联的if/if else语句容易些，譬如:

function myTest(val) {
var answer = "";
// 请只修改这条注释以下的代码

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

// 请只修改这条注释以上的代码
return answer;
}

// 你可以修改这一行来测试你的代码
myTest(7);

#205 Returning Boolean Values from Functions

你可能会回想起Comparison with the Equality Operator ，所有的比较操作符返回的都是一个boolean值，要么是 true 要么是false 。

function isLess(a, b) {
// 请修改这部分代码
return a<b;
}

// 你可以修改这一行来测试你的代码
isLess(10, 15);

#206 Return Early Pattern for Functions

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

// 定义 abTest
function abTest(a, b) {
// 请把你的代码写在这条注释以下
if ( a<0 || b<0)
{
return undefined;
}

// 请把你的代码写在这条注释以上

return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
}

// 你可以修改这一行来测试你的代码
abTest(2,2);
#207 Counting Cards

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

var count = 0;

return count + " " + call;

// 请把你的代码写在这条注释以上
}

// 你可以在这里添加/删除 cc 方法的调用来测试结果
// 提示: 左边只会显示最后一次执行的返回值
cc(2); cc(3); cc(7); cc('K'); cc('A');
#208 Build JavaScript Objects

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

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

var myDog = {

"name" : "youyouxiong",
"legs" : 8,
"tails":1,
"friends":['everythings']
};

#209 Accessing Objects Properties with the Dot Operator

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

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

var testObj = {
"hat": "ballcap",
"shirt": "jersey",
"shoes": "cleats"
};

// 请只修改这条注释以下的代码

var hatValue = testObj.hat; // 请修改这一行
var shirtValue = testObj.shirt; // 请修改这一行
#210 Accessing Objects Properties with Bracket Notation

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

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

var testObj = {
"an entree": "hamburger",
"my side": "veggies",
"the drink": "water"
};

// 请只修改这条注释以下的代码

var entreeValue = testObj["an entree"]; // 请修改这一行
var drinkValue = testObj["the drink"]; // 请修改这一行
#211 Accessing Objects Properties with Variables

中括号操作的另一种方式

var playerNumber= 16; // 修改这一行
var player = testObj[playerNumber]; // 修改这一行

#212 Using Objects for Lookups
转化为lookup对象，下面的答案虽然通过了，但是我觉得有点问题，因为我改了注释下面的代码。

var result = {
"alpha": "Adams",
"bravo": "Boston",
"charlie": "Chicago",
"delta": "Denver",
"echo": "Easy",
"foxtrot": "Frank"
};
// 请只修改这条注释以上的代码
return result[val];
}

Free Code Camp 练习总结 —— JavaScript 基本知识

猜你喜欢