JavaScript入门笔记

作者: HU_Wei | 来源:发表于2018-09-04 09:24 被阅读1次

jest 入门笔记
JavaScript的组成部分
回味JS（导论）
TypeScript学习记录- 数据类型基础
【笔记】javaScript 基础入门(三)
JavaScript入门笔记
JavaScript入门笔记
JavaScript入门笔记
《javascript入门篇》笔记
DOM模型中的节点

数字

在 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）。
在脚本的顶部声明函数和变量，这样语法和行为就会相互保持一致。

jest 入门笔记
jest 入门笔记 Jest is a delightful JavaScript Testing Framewo...
JavaScript的组成部分
该部分笔记记录关于JavaScript基础的学习。今天先从入门了解一下JavaScript的组成。JavaScri...
回味JS（导论）
本系列文章为阮一峰老师的JavaScript教程的学习笔记。参考链接： JavaScript教程-入门篇以及参考...
TypeScript学习记录- 数据类型基础
TS 学习笔记记录相关文档 TypeScript 入门教程-xcatliu JavaScript高级程序设计（第...
【笔记】javaScript 基础入门(三)
上一篇笔记《javascript基础入门（二）》里，我主要写了javascript的数据类型之间的转换，操作符（算...
JavaScript入门笔记
数字在 JavaScript 中定义数字实际上非常简单。数字数据类型包括任何正负整数以及小数。向控制台中输入数字...
JavaScript入门笔记
为方便阅读，该内容需具备一定的HTML+CSS基础。为什么学习JavaScript 一、为什么JavaScrip...
JavaScript入门笔记
目录基础知识数据类型操作符和表达式语句函数数组与字符串定时器数学对象时间与日期 DOM文档对象模...
《javascript入门篇》笔记
本文是本人源自慕课网《Javascript入门篇》笔记。 confirm 消息对话框var r=confirm("...
DOM模型中的节点
关于DOM节点，在前面JavaScript入门简介的笔记中有提到，参考这里哦：https://www.jiansh...