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

最新推荐文章于 2024-05-13 09:51:39 发布

置顶 youyouxiong

最新推荐文章于 2024-05-13 09:51:39 发布

阅读量6k

点赞数 3

分类专栏： web前端文章标签： FreecodeCamp

本文链接：https://blog.csdn.net/youyouxiong/article/details/81056317

版权

web前端专栏收录该内容

6 篇文章 2 订阅

订阅专栏

我会每天都更新我写东西，学大概有一段时间了，我感触还是挺大的，把之前基础知识又复习一遍，活到老学到老。希望能给在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对象，下面的答案虽然通过了，但是我觉得有点问题，因为我改了注释下面的代码。

// 定义 phoneticLookup
function phoneticLookup(val) {

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

// 请只修改这条注释以上的代码
return result[val];
}

// 你可以修改这一行来测试你的代码
phoneticLookup("charlie");

#215Testing Objects for Properties

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

// 初始化变量
var myObj = {
gift: "pony",
pet: "kitten",
bed: "sleigh"
};

function checkObj(checkProp) {
// 请把你的代码写在这条注释以下
if (myObj.hasOwnProperty(checkProp)){ //做一个判断是否数据里面属性以及值是否满足
    return myObj[checkProp];
                                     }
else {
    return "Not Found";
}

}

// 你可以修改这一行来测试你的代码
checkObj("gift");

#216 Introducing JavaScript Object Notation JSON

JavaScript Object Notation 简称JSON,它使用JavaScript对象的格式来存储数据JSON是灵活的因为它允许数据数据结构是字符串，数字，布尔值，字符串，和对象的任意组合。

var myMusic = [
{
    "artist": "Billy Joel",
    "title": "Piano Man",
    "release_year": 1973,
    "formats": [
      "CS",
      "8T",
      "LP" ],
    "gold": true
},
// 请在这里添加专辑
{
    "artist":"youyouxiong",
    "title" :"lisi",
    "release_year":1998,
    "formats":[
      "cs",
      "89P",
      "MP"
    ],
    "gold":false

}
];

#217 Accessing Nested Objects in JSON

通过串联起来的电操作费或中括号操作符来访问JSON对象的嵌套属性。

// 初始化变量
var myStorage = {
"car": {
    "inside": {
      "glove box": "maps",
      "passenger seat": "crumbs"
     },
    "outside": {
      "trunk": "jack"
    }
}
};

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

var gloveBoxContents = myStorage.car.inside["glove box"];// 请修改这一行

#218 Accessing Nested Arrays in JSON

正如我们在前面的例子所见，JSON对象可以嵌套对象和数组。与访问嵌套对象一样，用中括号操作符同样可以访问嵌套数据组

// 初始化变量
var myPlants = [
{
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
},
{
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
}
];

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

var secondTree = myPlants[1].list[1]; // 请修改这一行

#219

// 初始化变量
var collection = {
    2548: {
      album: "Slippery When Wet",
      artist: "Bon Jovi",
      tracks: [
        "Let It Rock",
        "You Give Love a Bad Name"
      ]
    },
    2468: {
      album: "1999",
      artist: "Prince",
      tracks: [
        "1999",
        "Little Red Corvette"
      ]
    },
    1245: {
      artist: "Robert Palmer",
      tracks: [ ]
    },
    5439: {
      album: "ABBA Gold"
    }
};
// 深拷贝 collection，用于测试
var collectionCopy = JSON.parse(JSON.stringify(collection));

// 请只修改这条注释以下的代码
function update(id, prop, value) {
if (collectionCopy[id].hasOwnProperty(prop) !== true){
    collectionCopy[id][prop] = [];
}
if (value === ""){
    delete collectionCopy[id][prop];
}
else{
    if (prop === "tracks"){
    collectionCopy[id].tracks.push(value);
    }
    else{
      collectionCopy[id][prop] = value;
    }
}

return collection;
}

// 你可以修改这一行来测试你的代码
update(5439, "artist", "ABBA");

#220 Iterate with JavaScript For Loops

一个条件语句只能执行一次代码，而一个循环语句可以多次执行代码

JavaScript中常见的循环就是“for 循环”。

var myArray = [];

// 请把你的代码写在这条注释以下
for (var i=1;i<6;i++)
{

myArray.push(i);
}

#212 terate Odd Numbers With a For Loop

for 循环可以按照我们指定的顺序来迭代，通过要改我们的计数器，我们可以按照偶数顺序来迭代

var myArray = [];

// 请把你的代码写在这条注释以下
for (var i=1;i<11;i+=2)
{
myArray.push(i);
}

#222 Count Backwards With a For Loop

for循环也可以逆向迭代，只要我们定义好合适的条件。为了能够从后往前两两倒数，我们需要改变我们的初始化，条件判断和计数器。

var myArray = [];

// 请把你的代码写在这条注释以下
for( var i= 9 ; i>0 ;i-=2)
{
myArray.push(i);
}

#223 Iterate Through an Array with a For Loop

迭代输出一个数组的每个元素是JavaScript中的常见需求，for循环可以做到这一点。

// 初始化变量
var myArr = [ 2, 3, 4, 5, 6];

// 请把你的代码写在这条注释以下
var total=0;
for(var i=0;i<myArr.length;i++)
{
total+=myArr[i];
}

#224 Nesting For Loops

如果你有一个二维数组，可以使用相同的逻辑，先遍历外面的数组，再遍历里面的子数组

// 你可以修改这一行来测试你的代码
multiplyAll([[1,2],[3,4],[5,6,7]]);

#225 Iterate with JavaScript While Loops

另一种类型的JavaScript循环被称为while循环，因为它规定，当（while）条件为真，循环才会执行，反之不执行。

// 初始化变量
var myArray = [];

// 请把你的代码写在这条注释以下
var i=0;
while(i<5)
{
myArray.push(i);
i++;
}

#227 Profile Lookup

我们有一个对象数组，里面存储着通讯录。

函数lookup两个预定义参数：firstName值和prop属性。

函数将会检查通讯录中是否存在一个与传入的firstName相同的联系人。如果存在，那么还需要检查对应的联系人中是否存在prop属性。

如果它们都存在，函数返回prop属性对应的值.

如果firstName值不存在,返回"NO such contact"。

如果prop属性不存在,返回“No such property”。

//初始化变量
var contacts = [
{
"firstName": "Akira",
"lastName": "Laine",
"number": "0543236543",
"likes": ["Pizza", "Coding", "Brownie Points"]
},
{
"firstName": "Harry",
"lastName": "Potter",
"number": "0994372684",
"likes": ["Hogwarts", "Magic", "Hagrid"]
},
{
"firstName": "Sherlock",
"lastName": "Holmes",
"number": "0487345643",
"likes": ["Intriguing Cases", "Violin"]
},
{
"firstName": "Kristian",
"lastName": "Vos",
"number": "unknown",
"likes": ["Javascript", "Gaming", "Foxes"]
}
];

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

// 你可以修改这一行来测试你的代码
lookUp("Akira", "likes");
#228 Generate Random Fractions with JavaScript

Math.randow()用来生成一个在O(包括0)到1（不包括1）之间的随机小数，因此Math.random()可能返回0但绝不会返回1.

function myFunction(){

var arr = Math.random();

ruturn arr;

}

#229Generate Random Whole Numbers with JavaScript

生成随机小数很棒，但随机数更有用的地方在于生成随机整数

1.Manth.random()生成一个随机小数。

2.把这个随机小数乘以20

3.用Math.floor()向下取整获得他最近的整数。

var randomNumberBetween0and19 = Math.floor(Math.random() * 20);

function myFunction() {

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

return Math.floor(Math.random() * 10);
}
#230 Generate Random Whole Numbers within a Range

我们之前生成的随机数是在0到某个数之间，现在我们要生成的随机数是在两个指定的数之间

// 举例
function ourFunction(ourMin, ourMax) {

return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;
}

ourFunction(1, 9);

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

function randomRange(myMin, myMax) {

return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin; // 请修改这一行

}

// 你可以修改这一行来测试你的代码
var myRandom = randomRange(5, 15);
#231 Sift through Text with Regular Expressions

// 初始化变量
var testString = "Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.";

// 举例
var expressionToGetSoftware = /software/gi;
var softwareCount = testString.match(expressionToGetSoftware).length;

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

var expression = /and/gi; // 请修改这一行

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

// 用 andCount 存储 testString 中匹配到 expression 的次数
var andCount = testString.match(expression).length;

#232 Find Numbers with Regular Expressions

我们可以在正则表达式中使用特殊选择器来选取特殊类型的值。

特殊选择器中的一种就是数字选择器\d,意思是被用来获取一个字符串的数字。

在JavaScript中，数字选择器类似于：/\d/g.

在选择器后面添加一个加号标记(+),例如/\d+/g，它允许这个正则表达式匹配一个或更多数字。

// 初始化变量
var testString = "There are 3 cats but 4 dogs.";

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

var expression = /\d+/g;

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

// 用 digitCount 存储 testString 中匹配到 expression 的次数
var digitCount = testString.match(expression).length;
#233 Find Whitespace with Regular Expressions

我们也可以使用正则表达式选择器\s来选择一个字符串中的空白.

空白字符有“”（空格符）\r(回车符)\n(换行符)\t（制表符）和\f(换页符)

var testString = "How many spaces are there in this sentence?";

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

var expression = /\s+/g; // 请修改这一行

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

// 用 spaceCount 存储 testString 中匹配到 expression 的次数
var spaceCount = testString.match(expression).length;

#234 Invert Regular Expression Matches with JavaScript

你可以用正则表达式选择器的大写版本来转化任何匹配

// 初始化变量
var testString = "How many non-space characters are there in this sentence?";

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

var expression = /\S/g; // 请修改这一行

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

// 用 nonSpaceCount 存储 testString 中匹配到 expression 的次数
var nonSpaceCount = testString.match(expression).length;

#235 Create a JavaScript SlotMachine

现在把我们之前的所学的知识点结合起来完成一个老虎机游戏

$(document).ready(function() {
$(".go").click(function() {
runSlots();
});
});
</script>

<div>
<div class = "container inset">
<div class = "header inset">
<img src="/images/freecodecamp_logo.svg" alt="learn to code JavaScript at Free Code Camp logo" class="img-responsive nav-logo">
<h2>FCC Slot Machine</h2>
</div>
<div class = "slots inset">
<div class = "slot inset">

</div>
<div class = "slot inset">

</div>
<div class = "slot inset">

</div>
</div>
<br/>
<div class = "outset">
<button class = "go inset">
Go
</button>
</div>
<br/>
<div class = "foot inset">
<span class = "logger"></span>
</div>
</div>
</div>

现在我们的老虎机每次生存3个随机数，我们得去检查随机数是否全部相等的情况。

youyouxiong

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Free Code Camp 练习总结 —— JavaScript 基本知识

我会每天都更新我写东西，学大概有一段时间了，我感触还是挺大的，把之前基础知识又复习一遍，活到老学到老。希望能给在FreecodeCamp有同学有帮助，我会每天更新我在写FreecodeCamp，代码。现在让我们开始学习最流行的JavaScript库jQuery吧，不用担心JavaScript本身，我们稍后会提到它。在开始学习使用jQuery之前，我们需要加一些代码到HTML文件中。首先...
复制链接

扫一扫