JavaScript入门笔记

2018-09-04 本文已影响1人 HU_Wei

数字

在 JavaScript 中定义数字实际上非常简单。数字数据类型包括任何正负整数以及小数。向控制台中输入数字可以直接返回该数字。

返回：3

算术运算

你还可以轻松地计算数字公式。就像在计算器中输入内容一样。

比较数字

就像在数学中一样，你可以比较两个数字，看看某个数字是否大于、小于或等于另一个数字。

5 > 10

返回：false

运算符	含义
<	小于
>	大于
<=	小于或等于
>=	大于或等于
==	等于
!=	不等于

在 JavaScript 中，值 true 和 false 非常重要。这些值叫做布尔值，是 JavaScript 中的另一种数据类型。

注释

注释用双斜杠 // 表示。同一行 // 后面的所有内容都不执行或显示。要分好几行写注释，用斜杠和星号开头，然后用星号和斜杠结束注释。

// 这是一条单行注释

/*
这是
一条多行
注释
*/

表达式

console.log((2 + 15 - 9)/3 + 11);

这种输出结果就是表达式。

字符串

字符串要用双引号或单引号括起来，前后需要保持一致，如：

var greeting ="hello";

或

var greeting ='hello';

字符串链接

字符串是一串字符集合，并用双引号或单引号括起来。

"Hello," + " my name is Wayne."

返回：Hello, my name is Wayne.

变量

var fullName = "Hu Wei";

当在各种地方输入某相同字符串时，不需要重复输入某字符串如“Hu Wei”（我的名字）。

My name is + "fullName";

返回：My name is Hu Wei

如果变量名由多个单词组成，使用驼峰命名法。

字符串索引

索引可以访问字符串中的单独字符。

 "Hu Wei"[4]

返回："W"

注：空格也要占一个字符位。

或者使用一个变量：

var name = "Hu Wei";
name[2]

返回："u";

转义字符串
如果想在字符串中使用引号，可以用反斜杠（\）来表示。

"He said, \"My name is Hu Wei.\""

返回："He said, "My name is Hu Wei.""

代码	字符
\	\ (反斜杠）
"	"（双引号）
'	'（单引号）
\n	newline
\t	tab

\n表示换行t\表示空白

例如：

"my name is\n\tHu Wei"

返回：
my name is
Hu Wei

比较字符串

比较字符串时，会区分大小写。所以

"yellow" == "Yellow"

返回： false

"yellow" != "Yellow"

返回：true

布尔值

布尔值只包含True和false两个值。

数字、字符串、和布尔都属于数据的不同类型，以及下面的Null、Undefined和NaN。

Null、Undefined 和 NaN

null：
data type-"value of nothing"（没有值，没有意义或完全为空的值）

undefined:
data type-"absence of value"（缺少值数据类型、没有值、连表示无的值都没有，如果对变量没有赋值，他就会返回undefined）

NaN:
表示“非数字”，返回表示数字运算存在错误。比如写了一段执行数字计算的代码，但结果没有产生有效的数字，可能就返回NaN。

等式

5 = "5"

返回：true

0 = false

返回 true

这里存在隐式类型转换，在编写JavaScript时，不需要指定数据类型。JavaScript引擎解析代码时，会自动转换为“相应的”数据类型。比如：

"Hu Wei" + 100

返回："Hu Wei100"

绝对相等

在==或!=后再加一个=，这就是绝对相等符号（他不会转换类型）。

"1" === 1

返回: false

0 === false

返回 false

流程图

流程图是一种图表，通过一系列的逻辑语句概述了问题的解决方案。这些语句的评估和执行顺序叫做控制流程。

If...else 语句

If...else 语句使你能够根据是否满足一定的条件而执行特定的代码。

if (/* 这个表达式为真 */) {
  // 运行这段代码
} else {
  // 运行这段代码
}

例如：

var a = 5;
var b = 10;

if (a > b) {
  console.log("a大于b")
} else {
  console.log("a小于或等于b")
}

返回："a小于或等于b"

if语句中的值始终会转换为true或者false, if和else语句后面要加{...}。
编程时，可以只使用if语句，但不能只使用else语句。

复杂一点的可以这样：

if (/* 这个表达式为真 */) {
  // 运行这段代码
   if (/*再加一个表达式为真*/)
   //运行这段代码
} else {
  // 运行这段代码
}

注意：if 后不管有多少个 if ，最后还是要以 else 结尾。

else if 语句

某些情况下，两个条件语句并不够。

if (/*第一段表达式为真*/） {
  // 运行这段代码
} else if (/*这一段表达式为真*/) {
  // 运行这段代码
} else if (/*这一段表达式为真*/) {
  // 运行这段代码
} else {
  // 运行这段代码
}

这里的else if语句也可以加入多条。注意：if 后不管有多少个 else if ，最后还是要以 else 结尾。

逻辑运算符

逻辑表达式类似于数学表达式，但是逻辑表达式的结果是true或false。

运算符	含义	示例	使用方法
&&	逻辑AND	valueA && valueB	AB都为true，则返回true
II	逻辑OR	valueA II valueB	A或B为true，则返回true，或者两者都为true，则返回true
!=	逻辑NOT	!valueA	返回valueA的相反值。如果valueA为true，则!valueA为false。

格式如下：

var time = "8pm.";
var weather = "good";

if (time === "8pm." && weather === "good") {
   console.log("go to play football");
}

if ((color == "red" || color == "yellow") && (shape == "circle" || vessel == " triangle")) {
    console.log("...."); 
}

这里使用了双括号哦！

真值和假值

JavaScript中每个值都有固有的布尔值，在布尔表达式中评估该值事，该值就会转换为固有的布尔值。这些固有的值称为真值或假值。

结果为false的值为假值。
结果为true的值为真值。

假值	真值
false	true
null	32
undefined	"good"
0	{}
NaN	[]
""

本质上，如果不是假值，则为真值。

三元运算符

? 左侧为条件，:的左边为条件为true时将运行的代码，:的右边为条件为false时将运行的代码。

conditional ? ( if conditional is true ) : ( if conditional is false )

例如：

var isFar = false;
var theDistance = isFar ? "So far" : "Not so far " ;
console.log(theDistance);

输出："Not so far"

Switch 语句

Switch语句是可以替代重复出现else if且每个条件都是基于相同值的语句。例如：

var age = 3;

if (age === 1 ) {
   console.log("Your age is 1.");
}  else if (age === 2 ) {
   console.log("Your age is 2.");
}  else if (age === 3 ) {
   console.log("Your age is 3.");
}  else if (age === 4 ) {
   console.log("Your age is 4.");
}

返回："Your age is 3."

var age = 3;

switch (age) {
   case 1:
       console.log("Your age is 1.");
       break;
   case 2:
       console.log("Your age is 2.");
       break;
   case 3:
       console.log("Your age is 3.");
       break;
   case 4:
       console.log("Your age is 4.");
       break;
}

返回："Your age is 3."

每个 else if 语句的 ( age = [value] ) 被替换成了 case 条件( case: [value] )。break是阻止下面继续返回。

传递

某些情况下，可以利用switch语句的“传递”行为。例如：

var time = "7 am.";
var output = "You will meet "

switch (time) { 
    case "7 am.": //这里有冒号；语句会从这里开始。
        output += "3 of my friends, ";
    case " XX ": //这里无关紧要了;因为这里会传递下去。
        output += "one of my sons, "
    default:
        output += "one of my daughters."
}

console.log(output);

返回 You will meet 3 of my friends, one of my sons, one of my daughters.

可以向 switch 语句中添加 default case，当没有任何与 switch 表达式相符的值时，将执行该语句。

所以如果没有符合的表达式值返回结果为：

You will meet one of my daughters.

循环语句While

循环有各种类型，但他们本质上都实现相同的操作：重复一定次数地执行特定操作。

循环三大部分：

例如：

var start = 1; // 1.何时开始

while (start < 8) { // 2.何时停止
    console.log(start); // 运行内容
    start = start + 1; // 3.如何转到下一项
}

1.何时开始：设置一个循环代码 - 例如定义某个变量的起始值。

2.何时停止：测试循环是否继续的逻辑操作。

3.如何转到下一项：递增或递减步骤，如， x = x +1 或 x = x / 2

For 循环

for循环要明确要求定义起始点、结束点和循环点的每一个步骤，不然会报错。

for ( 1start; 2stop; 4step ) {
    // 3运行他
}

例如：

for ( var x = 1 ; x < 5 ; x = x + 1) {
    console.log( "The answer is " + x );
}

返回：
The answer is 1
The answer is 2
The answer is 3
The answer is 4

循环还可以嵌套循环

for (var x = 0; x < 3; x = x + 1) {
  for (var y = 0; y < 2; y = y + 1) {
    console.log(x + "," + y);
  }
}

返回
0,0
0,1
1,0
1,1
2,0
2,1

注：当x=0时，会执行完x=0时所有的嵌套循环，再回到外层重新循环。

递增和递减

完整写法	简写
x = x + 1	x++ or ++x
x = x - 1	x-- or --x
x = x + 2	x += 2
x = x - 5	x -= 5
x = x * 3	x *= 3
x = x / 5	x /= 5

函数

函数使你能够将一段代码封装起来，并在程序中使用。

声明函数：

function 函数名 (参数1, 参数2) { 
      var 变量 = 值；
      return 变量；// 返回语句明确返回内容
}

函数可以没有参数，在这种情况下，直接将小括号留空。如下：

// 声明 name 函数
function name() {
  var x = "Hu Wei";
  return x; // 返回x
}
  // 函数返回"Hu Wei!", 并且console.log输出返回值
  console.log(name());

再如：

// x和y是这个函数声明中的参数
function add(x, y) {
  // function body (花括号以内为函数主体)
  var sum = x + y;  // 函数公式
  return sum; // 返回语句
}

// 2和5作为参数传递给函数
var sum = add(2, 5);

函数主体部分位于花括号里：

function add(x, y) {
    //函数主体
}

返回语句明确规定函数返回一个值：

return sum;

通过调用函数使其执行某项任务：

add(2, 5);

所以

function add(x,y) {
    var sum = x + y;
    return sum;
}
console.log(add(2, 5))

返回：7

特例：

function laugh(num) {
    var result = ""; //定义字符串
    while (num > 0) {
        result += "ha";
        num--;
    }
    return result
} 
console.log(laugh(3));

返回 hahaha!

返回与日志

console.log 输出
return 返回

作用域

如果标识符在全局作用域内声明，则可以到处访问。
如果标识符在函数作用域(function)内声明，则可以在所声明的函数内访问（甚至可以在函数中声明的函数内访问）。
尝试访问标识符时，JavaScript 引擎将首先查看当前函数。如果没找到任何内容，则继续查看上一级外部函数，看看能否找到该标识符。将继续这么寻找，直到到达全局作用域。
全局作用域不是很好的做法，可能会导致糟糕的变量名称，产生冲突的变量名称和很乱的代码。

提升

大多数情况下，调用函数必须先声明函数，代码的读取顺序基本上是从上到下的，但在JavaScript中，所有函数声明都被提升到当前作用域的顶部。如下：

add(2, 5);
// JavaScript中，会先提升以下声明到顶部
function add(x, y) { 
    var answer = x + y;
    return answer;
}

提升还会发生在变量声明上

function value() { 
    var x ; 
    console.log(x);
    return x = 5; // JavaScript中，虽然会先提升变量声明到声明到顶部，但是赋值语句var任然在此行。所以赋值语句(var x)必须在函数之上。 
}

value();

所以通常在脚本顶部声明函数，并在函数顶部声明变量：

function value() { 
    var x = 5; 
    console.log(x);
}

value();

返回：5

JavaScript 会将函数声明（function）和变量声明（return x=5）提升到当前作用域的顶部。
变量赋值不会提升（var）。
在脚本的顶部声明函数和变量，这样语法和行为就会相互保持一致。