Front End Development

Basic JavaScript

2017-03-29  本文已影响333人  归云丶

Comment your JavaScript Code

JavaScript中的注释方式有以下两种：

/* This is a 
   multi-line comment */

良好的注释能够清晰地传达你写的代码的意图—对于那些读你的代码的人来说以及未来你看到它的时候，还能理解这段代码的意图。

Declare JavaScript Variables

在计算机科学中, data(数据)就是一切，因为它对于计算机的意义重大。

Storing Values with the Equal Operator

Initializing Variables with the Equal Operator

Understanding Uninitialized Variables

Understanding Case Sensitivity in Variables

举个栗子:

var someVariable;
var anotherVariableName;
var thisVariableNameIsTooLong;

Add Two Numbers with JavaScript

Subtract One Number from Another with JavaScript

Multiply Two Numbers with JavaScript

Divide One Number by Another with JavaScript

Increment a Number with JavaScript

Decrement a Number with JavaScript

Create Decimal Numbers with JavaScript

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

Multiply Two Decimals with JavaScript

Finding a Remainder in JavaScript

Assignment with Plus Equals

Assignment with Minus Equals

Assignment with Times Equals

Assignment with Divided by Equals

Convert Celsius to 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);

Declare String Variables

Escaping Literal Quotes in Strings

当你定义一个字符串必须要用单引号或双引号来包裹它。那么当你需要在字符串中使用一个: " 或者 ' 时该怎么办呢?

这标志着提醒 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

举个例子:
'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

Use Bracket Notation to Find the First Character in a String

JavaScript中只有字符串类型，没有字符类型。那么如何获取到字符串中的某个字符呢？

Understand String Immutability

理解字符串的不可变性！当你搞懂不可变性后immutable.js对于你就是小菜一碟了。

例如，下面的代码：

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

Use Bracket Notation to Find the Last Character in a String

Use Bracket Notation to Find the NthtoLast Character in a String

Store Multiple Values in one Variable using JavaScript Arrays

Nest one Array within Another Array

Access Array Data with Indexes

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

例如

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

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

Manipulate Arrays With pop

举个例子, 对于这段代码

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

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

Manipulate Arrays With shift

Manipulate Arrays With unshift

Write Reusable JavaScript with Functions

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

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

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

Passing Values to Functions with Arguments

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

接着我们调用 testFun：

testFun("Hello", "World");

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

Global Scope and Functions

Local Scope and Functions

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

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

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

Assignment with a Returned Value

Stand in Line

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

Understanding Boolean Values

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

Use Conditional Logic with If Statements

伪代码

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

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

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

Comparison with the Strict Inequality Operator

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

Comparison with the Greater Than Operator

例如

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

Comparison with the Greater Than Or Equal To Operator

例如

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

Comparison with the Less Than Operator

例如

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

Comparison with the Less Than Or Equal To Operator

例如

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

Comparisons with the Logical And Operator

同样的效果可以通过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

举个例子：

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 (num > 10) {
  return "Bigger than 10";
} else {
  return "10 or Less";
}

ntroducing Else If Statements

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

这有两个例子。

第一个例子：

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 (condition1) {
  statement1
} else if (condition2) {
  statement2
} else if (condition3) {
  statement3
. . .
} else {
  statementN
}

Selecting from many options with Switch Statements

这是一个伪代码案例：

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

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

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

Multiple Identical Options in Switch Statements

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

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

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

举例

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

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

这是简单的反向字母表：

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

举例

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

Introducing JavaScript Object Notation 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对象：

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

下面是如何访问嵌套数组的例子：

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

Iterate with JavaScript For Loops

在下面的例子中，先初始化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

初始化 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

我们让 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

下面的代码将输出数组 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

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

Generate Random Fractions with JavaScript

提示：随后的函数都会在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

Sift through Text with Regular Expressions

举例：如果我们想要找到字符串The dog chased the cat中单词 the，我们可以使用下面的正则表达式: /the/gi
我们可以把这个正则表达式分成几段：

/是这个正则表达式的头部

the是我们想要匹配的模式

/是这个正则表达式的尾部

g 代表着 global(全局)，意味着返回所有的匹配而不仅仅是第一个。

i代表着忽略大小写，意思是当我们寻找匹配的字符串的时候忽略掉字母的大小写。

Find Numbers with Regular Expressions

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

在JavaScript中, 数字选择器类似于: /\d/g

尾部的g是'global'的简写，意思是允许这个正则表达式 找到所有的匹配而不是仅仅找到第一个匹配。

Find Whitespace with Regular Expressions

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

空白正则表达式类似于：
/\s+/g

Invert Regular Expression Matches with JavaScript

举个例子：\s 匹配任何空白字符，\S 匹配任何非空白字符。

上一篇 下一篇

猜你喜欢

热点阅读