JavaScript入門筆記
补充在最前面，让js和html取得关联：
<body>.... //获取js路径<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/app.js"></script></body>
在js里获得html元素：let或const或var(建议不用) `<变量名> = document.querySelector("<元素id或class或tagname>") ，例如：
let card = document.querySelector(".card")// 也可以用getElementById("<idName>")等// 变量名可以和元素名同名然后再在js里调用变量。
数字
在 JavaScript 中定义数字实际上非常简单。数字数据类型包括任何正负整数以及小数。向控制台中输入数字可以直接返回该数字。
3
返回：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替代了if、用case替代了else if。当然，语法略有不同。
传递
某些情况下，可以利用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 表达式相符的值时，将执行该语句。 （如果有switch的值，最后也要执行default）
所以如果没有符合的表达式值返回结果为：
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循环要明确要求定义起始点、结束点和循环点的每一个步骤，不然会报错。注：每个step后面的分隔号是;分号。
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
补充，return会终止执行。如果出现多条return他只会执行第一条。
特例：
function laugh(num) { var result = ""; //定义字符串
while (num > 0) {
result += "ha";
num--;
} return result + "!"}
console.log(laugh(3));返回 hahaha!
返回与日志
console.log 输出return 返回
作用域
如果标识符在全局作用域内声明，则可以到处访问。
如果标识符在函数作用域(function)内声明，则可以在所声明的函数内访问（甚 至可以在函数中声明的函数内访问）。
尝试访问标识符时，JavaScript 引擎将首先查看当前函数。如果没找到任何内容，则继续查看上一级外部函数，看看能否找到该标识符。将继续这么寻找，直到到达全局作用域。
全局作用域不是很好的做法，可能会导致糟糕的变量名称，产生冲突的变量名称和很乱的代码。
补充：在全局作用域和函数作用域中都有相同变量的情况下，如下
var x = 1;function addTwo() {//重新用var声明，所以全局x的值未被替代。
var x = x + 2;
// 如果没有var声明，x的值会被替代为3，所以返回4.}
addTwo();
x = x + 1;console.log(x);提升
大多数情况下，调用函数必须先声明函数，代码的读取顺序基本上是从上到下的，但在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);
x = 5;
}
value();返回：5
JavaScript 会将函数声明（function）和变量声明（x=5）提升到当前作用域的顶部。
变量赋值不会提升（var）。
在脚本的顶部声明函数和变量，这样语法和行为就会相互保持一致。
函数表达式
存储在变量中的函数叫做函数表达式。
var catSays = function(max) { var catMessage = ""; for (var i = 0; i < max; i++) {
catMessage += "meow ";
} return catMessage;
};可以将函数存储在变量中使我们能够将函数传递到另一个函数中。传递到另一个函数中的函数叫做回调。
数组
数组可以将多个值储存到一个有条理的数据结构中。定义方法是列出各个值，用逗号分隔，放在[]里。
var players = ["Hu Wei", "Li Yao", "Hu Xiao Yu"];// 用三个字符串创建了一个`players`的数组
数组可以储存其他数据类型，包括数字、布尔值等。例如:
var whatever = ["lalala", 2, true, null, Nan, undefined];
还可以在数组中，嵌套数组~
var whatever = [ [2, 4, 6,], ["Hu Wei", "Li Yao"], [true, true, false] ];
索引
var players = ["Hu Wei", "Li Yao", "Hu Xiao Yu"];console.log(players[0]);// 数组中的元素是从位置 0 处开始计算索引编号的。
返回: Hu Wei
长度
通过length属性了解数组长度。
格式: name.length
var players = ["Hu Wei", "Li Yao", "Hu Xiao Yu"];console.log(players.length);
返回: 3
还可以了解任何字符串的长度，如：
"jaljsdlfjalkjdlfkajld".length
返回: 21
Push
可以使用push()为数组最后一位添加元素。
var players = ["Hu Wei", "Li Yao", "Hu Xiao Yu"];
players.push("Xiao yu");console.log(players);返回: ["Hu Wei", "Li Yao", "Hu Xiao Yu", "Xiao yu"]
Pop
相反，
可以使用pop()为数组删除最后一位元素。()中不需要传递值。
var players = ["Hu Wei", "Li Yao", "Hu Xiao Yu"];//pop() 会返回你已经删除的元素，以防你需要使用该元素。players.pop(); players.pop();console.log(players);
返回：Li Yao //
输出: ["Hu Wei"]
Splice
splice() 是另一个很有用的方法，可以让你向数组的任意位置添加元素和移除任意位置的元素。例如：
var players = ["Hu Wei", "Li Yao", "Hu Xiao Yu"]; players.splice(1, 2, "Xiao Yu");/* 第一个参数表示你要从哪个索引开始更改数组 第二个参数表示你要删除的元素数量 剩下的参数表示你要添加的元素。*/console.log(players);
返回： ["Li Yao", "Hu Xiao Yu"]
players 数组：["Hu Wei", "Xiao Yu"]
如果splice()内第一个值为负数，表示从最后一个元素开始向前数。
数组循环
var players = ["Hu Wei", "Li Yao", "Hu Xiao Yu"];// 变量`x`用来遍历数组中的每个元素for (var x = 0; x < players.length; x++) {
players[x] += " yo";
}console.log(players);输出： ["Hu Wei yo", "Li Yao yo", "Hu Xiao Yu yo"]
forEach循环
forEach() 方法也可以循环访问数组，并使用内嵌函数表达式操纵数组中的每个元素。
var players = ["Hu Wei", "Li Yao", "Hu Xiao Yu"];
players.forEach(function(addYo){
addYo += " yo"; console.log(addYo);
});输出：
Hu Wei yo
Li Yao yo
Hu Xiao Yu yo
Map
通过 map() 方法你可以对数组中的每个元素执行某种操作，然后返回新的数组。
var players = ["Hu Wei", "Li Yao", "Hu Xiao Yu"];var newPlayers = players.map(function(x){
x += " yo"; return x;
}); console.log(newPlayers);输出：["Hu Wei yo", "Li Yao yo", "Hu Xiao Yu yo"]
对象
提一下：typeof是个运算符，可以返回后面的数据类型的名称：
typeof "hi" //返回"string"typeof true //返回 "boolean"typeof [1, 2, 3,] //返回"object" (数组是一种对象类型)typeof function hello() {} // 返回"function"对象字面值记法：
var car = {
//整个对象包含在花括号{}里
name: "toyota",
color: "black", //color “键”是属性或者方法的名称，black是“键值”
seats: 5，
};// 两种方法来使用key(键)来返回它的value(值)car[" name"] // 返回["toyota"]car.name // 任然返回["toyota"]
car["toyota"] 叫做括号记法, car.toyota叫做点记法。
还可以给让值变为函数：
var car = { name: "Toyota", color: "black", seats: 5, otherThing: function() { return "for young people"; }
};
car.otherThing();返回 : "for young people"
命名规则
var name = { 1stName: "Hu", //第一位不能是数字
second-Name: "Wei", //不能使用链接字符，推荐用驼峰命名法ES6语法
利用let和const取代var。
当打算为变量重新赋值时，使用let;
当不打算为变量重新赋值时，使用const。
作者：HU_Wei
链接：https://www.jianshu.com/p/1ce16e18ee1e
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
