本文鏈接: http://www.reibang.com/p/963da58368b0
作者：西瓜甜
基本介紹
JavaScript 簡稱 JS
JavaScript 是一種適用于網(wǎng)頁的腳本語言！
JavaScript 被數(shù)百萬計的網(wǎng)頁用來改進設(shè)計蜈项、驗證表單续挟、檢測瀏覽器诗祸、創(chuàng)建cookies等更多的應(yīng)用贬媒。
JavaScript 是因特網(wǎng)上最流行的腳本語言际乘。
JavaScript 很容易使用脖含！認識她, 愛上她养葵！
瀏覽器內(nèi)置了JavaScript語言的解釋器关拒，所以在瀏覽器上按照 JavaScript 語言的規(guī)則編寫相應(yīng)代碼着绊，瀏覽器就可以解釋并做出相應(yīng)的處理.
Windows 下归露，打開瀏覽器剧包，按下F12
chrome 瀏覽器
IE 瀏覽器
二疆液、如何在 HTML 中使用 JavaScript 的代碼 和 編寫 JavaScript 代碼
1. 引入方式：
<!-- 方式一 :從一個文件引入-->
<script src="JS文件的路徑.js"></script>
<!-- 方式二: 直接在 HTML 文檔中代中寫入 JS 代碼 -->
<script type="text/javascript">
var li = "Hello 千鋒云計算好程序員"
</script>
2. 應(yīng)該在 html 文檔的哪個位置引入
由于Html代碼是從上到下執(zhí)行枚粘，為了不影響用戶的體驗效果,應(yīng)該放在 body 標簽的底部;
這樣的話,即使由于加載js代碼耗時嚴重馍迄，也不會影響用戶看到頁面效果攀圈，只是js實現(xiàn)特效慢而已赘来。
<!DOCTYPE html> <!--HTML5文檔標識-->
<html lang="en">
<head>
</head>
<body>
<div>
頁面內(nèi)容
</div>
</body>
<!-- 引入的方式一 -->
<script src="my_javascript.js"></script>
<!-- 引入的方式二 -->
<script>
js 代碼
</script>
</html>
三犬辰、開發(fā)工具的搭建
1. Node.js
下載和安裝
https://github.com/nodesource/distributions
[root@xiuyun ~]# curl -sL https://rpm.nodesource.com/setup_13.x | bash
[root@xiuyun ~]# yum install gcc-c++ make
[root@xiuyun ~]# yum install -y nodejs
驗證安裝
[root@xiuyun ~]# node -v
v13.12.0
[root@xiuyun ~]# node
Welcome to Node.js v13.12.0.
Type ".help" for more information.
> .exit
[root@xiuyun ~]#
測試 Node 環(huán)境支持 ES6 的程度
# 在系統(tǒng)的終端中執(zhí)行 npm 安裝一個包
npm install -g es-checker
# 之后在系統(tǒng)的終端中執(zhí)行如下命令
es-checker
四灸促、基本語法
1. JavaScript 代碼的注釋和代碼風(fēng)格
// 單行
/* 多
行 */
// 注意：此注釋僅在 script 標簽內(nèi)中或者一個 JS 文件中生效
console.log("每行代碼后面加英文的分號");
2. 調(diào)試工具：終端輸出浴栽，和瀏覽器彈窗
把一個對象(變量的值) 輸出到終端
console.log("Hello JavaScript")
在瀏覽器中把一個對象(變量的值) 以一個小彈窗的方式顯示出來
alert("Hello JavaScript")
3. 變量
JavaScript中變量的聲明是一個非常容易出錯的點，局部變量必須一個 var 開頭坏晦，如果未使用var英遭，則默認表示聲明的是全局變量挖诸。
ES5 變量的作用域：
全局作用域
函數(shù)作用域
3.1 全局作用域
一對大括號{}內(nèi)的代碼都稱為一個作用域
注意： 全局作用域的 變量 可以被重復(fù)聲明多律，并且可以被重新賦值痴突。
全局作用域的變量聲明有兩種方式
3.1.1 沒有使用任何關(guān)鍵字聲明的變量，都是全局變量
s = '千鋒'
{
s = "云計算"
}
// function 關(guān)鍵字狼荞，定義一個函數(shù)辽装，函數(shù)名是 f
function f(){
s = "好程序員"
}
f() // 執(zhí)行這個函數(shù)，以便聲明變量 s
console.log(s) // 輸出: 好程序員
3.1.2 不是在函數(shù)中使用 var 關(guān)鍵字聲明的變量相味，也是全局變量
注意： 必須不能在函數(shù)中使用的才可以是全局變量拾积。就是在函數(shù)外面或者在代碼塊中(大括號中
{})，比如if代碼塊中。
var n = 10;
var n = 100;
{
var n = 10;
};
if (1 ===1){
var n = '千鋒云計算';
}
console.log(n) // 輸出：千鋒云計算
3.2 函數(shù)作用域（局部變量）和局部作用域(ES6)
3.2.1 在函數(shù)中以關(guān)鍵字 var 開頭聲明的變量斯碌，并且不是在。
function foo(){
var age=18;
}
foo()
console.log(age) // 將會報錯
3.2.2 Es6 中的 let 和 const 聲明的變量
let 聲明的變量只在它所在的代碼塊有效肛度，在同一個代碼塊(作用域)下傻唾，不可以重復(fù)聲明，可以被重新賦值承耿。
const 聲明的常量只在它所在的代碼塊有效冠骄，在同一個代碼塊(作用域)下，不可以重復(fù)聲明加袋，并且不可以被重新賦值(基本類型的數(shù)據(jù))凛辣。
下面的示例是在 node 的終端中執(zhí)行的結(jié)果。
let 示例
此代碼是在 node 交互終端中運行的結(jié)果职烧。
> { let num = 10;
... num = 100;
... console.log("當前值" + num);
... }
當前值100
undefined
> num
ReferenceError: num is not defined
for循環(huán)的計數(shù)器蟀给，就很合適使用let命令。
for (let i = 0; i < 10; i++) {
console.log(i);
}
console.log("在代碼塊外面打印的變量 i 將會報錯")
console.log(i);
// ReferenceError: i is not defined
const 示例
const 主要用于定義一個作用域中的常量阳堕，就是這個變量可以在自己的代碼塊兒中使用，但其值不能被修改择克。
這個作用域可以全局作用域恬总，也可以是函數(shù)作用以及局部作用域。
//對于基本類型肚邢，值不能改變
const s = "千鋒云計算";
s = "好程序員"; // TypeError: Assignment(分配) to constant(常量) variable.
//對于引用類型壹堰，
const obj = {x: 0};
obj = {y: '123'}; // TypeError: Assignment to constant variable.
obj.x = '123'; //obj存儲的是一個地址，地址不能變骡湖，但對象本身是可變的
4. 判斷
JavaScript中支持兩個中條件語句贱纠，分別是：if 和 switch
// 條件 ： (1 === 1 && 2 === 2 || 3 === "3")
if(條件){
// 條件成立后執(zhí)行的代碼
}else if(條件){
// 條件成立后執(zhí)行的代碼
}else{
// 以上條件都不成立要執(zhí)行的代碼
}
switch(name){ // name 一個變量
case '1': // 若果 name 的值等于 "1"
age = 123; // 執(zhí)行下面這段代碼
break;
case '2': // 若果 name 的值等于 "1"
age = 456; // 執(zhí)行下面這段代碼
break;
default : // 上面的值都沒有匹配到
age = 777; // 則執(zhí)行這段代碼
}
5. 函數(shù)
5.1 普通函數(shù)
// 普通函數(shù)
function func(arg){
return true;
}
5.2 匿名函數(shù)
// 匿名函數(shù) 特點： 可以被當做參數(shù)傳遞；常用
function(arg){
return "tony";
}
// 匿名函數(shù)的應(yīng)用之一: 可以作為參數(shù)傳遞
function func(arg){
arg()
}
func(function (){
console.log(123);
}
)
6. 箭頭函數(shù)（ES6）
6.1 標準箭頭函數(shù)的轉(zhuǎn)換
// 普通函數(shù)
function f(arg) {
return arg
}
// 執(zhí)行普通函數(shù)
var ret = f(555);
console.log(ret)
// 轉(zhuǎn)換為箭頭函數(shù)
var f1 = (arg)=>{return arg};
// 執(zhí)行箭頭函數(shù)
var ret2 = f1('world');
console.log(ret2)
6.2 當函數(shù)只有一個參數(shù)時响蕴，小括號 ()可以省略
// 接上一例子谆焊，標準箭頭函數(shù)
var f1 = (arg)=>{return arg};
// 省略 ()
var f1 = arg=>{return arg};
6.3 當函數(shù)返回一個 map 對象時候，需要使用小括號包裹浦夷。
這樣只會解析為函數(shù)體辖试，并不會是返回值
> const f = () => {a: 1}
undefined
> f()
undefined
用戶小括號將返回的對象包裹起來，才是正確寫法
> const fu = () => ({a: 1})
undefined
> fu()
{ a: 1 }
6.4 當函數(shù)體中劈狐，只有一條 return 語句時罐孝，大括號 {} 可以省略
// 接上例,省略 {}
var f1 = arg=>arg;
// 執(zhí)行箭頭函數(shù)
var ret2 = f1('world');
console.log(ret2)
[root@gitlab alertmanager]# node
Welcome to Node.js v16.13.1.
Type ".help" for more information.
> const a = 1
undefined
> const b = 2
undefined
> const f1 = ()=>a
undefined
> f1
[Function: f1]
> f1()
1
> const f2 = ()=>
undefined
> f2
[Function: f2]
> f2()
undefined
> const f3 = ()=>(肥缔)
undefined
> f3()
{ b: 2 }
>
7. 函數(shù)的默認參數(shù)在 ES6 中被支持
let f = (arg1,arg2)=>arg1 +arg2;
console.log(f(1,2));
// python --> f = lambda arg1, arg2: arg1 + arg2
// 參數(shù)的默認值
let f2 = (arg1,arg2=10)=>arg1 +arg2;
console.log(f2(1));
console.log(f2(1,20));
上面代碼中莲兢，參數(shù)變量x是默認聲明的，在函數(shù)體中，不能用let或const再次聲明改艇，否則會報錯收班。
8. 數(shù)據(jù)類型及其操作
JavaScript 中的數(shù)據(jù)類型分為原始類型和對象類型：
- 原始類型
- 數(shù)字
- 字符串
- 布爾值
- 對象類型
- 數(shù)組
- 字典
- ...
特別的: 數(shù)字、布爾值遣耍、null闺阱、undefined、字符串是不可變的類型舵变。
可以使用 typeof 查看類型
name = "yangge"
age = 18
li = [1,2,3]
dic = {"a": 1, "b": 2}
typeof(li)
typeof name
typeof true
typeof false
8.1 字符串
字符串是由字符組成的數(shù)組酣溃，但在JavaScript中字符串是不可變的：可以訪問字符串任意位置的文本，但是JavaScript 并未提供修改已知字符串內(nèi)容的方法纪隙。
一句話和 pytone 的類似的特性
常見功能：
注意: 以下的操作不會改變原來的字符串
由于方法較多赊豌，不能一一演示。因為這里面的大部分 方法都和 python 中的類似绵咱，是指方法的名字不一樣而已碘饼，道理都一樣。
/*長度悲伶，注意這是個屬性艾恼，不是函數(shù)，不要加小括號()*/
obj.length
/*移除兩端的空白字符*/
obj.trim()
/*拼接*/
obj.concat(value, ...)
/*分割麸锉，返回的是分割好的列表形式钠绍；*/
obj.split(delimiter, limit)
delimiter /*以此字符為標識進行分割，此字符不會出現(xiàn)在分割后的結(jié)果里花沉；*/
limit /*從分割后的結(jié)果中柳爽，取出總共幾個元素。*/
ES 6 中字符串的新功能
// startsWith 判斷字符串以什么字符為開始碱屁，返回一個布爾值
var str = "http://www.qfedu.com"
if (str.startsWith("http://")){
console.log("http 地址")
} else if(str.startsWith("git")){
console.log("git 地址")
};
// endsWith 判斷字符串以什么為結(jié)尾
if (str.endsWith("com")){
console.log("國際域名")
}
// includes 判斷某些字符串是否存在其內(nèi)
var s = "hello world ";
console.log(s.includes('h'));
- 字符串模板
// ES 5
var name = "shark"
var age = 18
var tag = "<tr><td>" + name + "</td>" +
"<td>" + age + "<td></tr>"
// ES 6
var name = "shark"
var age = 18
var tag = `<tr>
<td>${name}</td>
<td>${age}</td>
</tr>`
8.2 布爾類型（Boolean）和 邏輯運算符
布爾類型
布爾類型僅包含真假磷脯，與Python不同的是全部是 小寫字母。
false和true
邏輯運算符
== 比較值相等 1 == "1" 會返回 true
!= 不等于
===同時比較值和類型相等1 === "1"會返回 false|| 或
&& 且
小示例
1 == 1 && 2 == 2 || 3 == "3"
8.3 數(shù)組
JavaScript 中的數(shù)組類似于 Python 中的列表
同樣這里數(shù)組的方法所表示的原理和 python 中列表的方法一樣
所以應(yīng)該很快能夠理解娩脾，不必都演示
// 創(chuàng)建數(shù)組
var li = []
var obj = [1, 2, 3]
// 數(shù)組元素的數(shù)量
obj.length
// 尾部追加元素赵誓，會真實的改變原列表
obj.push('c')
// 會刪除掉列表里的最后一個元素，并且將這個元素返回
obj.pop()
// 從頭部插入一個元素
obj.unshift("shark")
// 從頭部移除一個元素
obj.shift()
// 將數(shù)組元素連接起來以構(gòu)建一個字符串柿赊；
// sep 是一個任意字符
// 拼接后的結(jié)果架曹，每個元素之間會以此字符為連接字符，元素類型沒有限制闹瞧，在Python中元素必須是字符绑雄。
obj.join(sep)
擴展運算符
- 擴展運算符（spread）是三個點（
...）。將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列奥邮。
function f(x, y, z) {
console.log(x);
console.log(z);
}
let args = [0, 1, 2];
f(...args);
// ES6 的寫法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
Math.max() 是 JS 中的內(nèi)置函數(shù)
數(shù)組遍歷（for 循環(huán)）
const arr = ['a', 'b'];
// ES5 中得到 索引號
for (let i in li){
console.log(i);
}
ES6 還提供三個新的方法——entries()万牺，keys()和values()——用于遍歷數(shù)組罗珍。它們都返回一個遍歷器對象，可以用for...of循環(huán)進行遍歷脚粟，唯一的區(qū)別是keys()是對鍵名的遍歷覆旱、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷核无。
for (let index of arr.keys()) {
console.log(index);
}
// 0
// 1
for (let elem of arr.values()) {
console.log(elem);
}
// 或者
for (let i of li){
console.log(i);
}
// 'a'
// 'b'
// 同時遍歷值和索引號
for (let [index, elem] of arr.entries()) {
console.log(index, elem);
}
8.4 對象 就像 python 中的字典
在 javaScript 實際上是沒有字典和列表的概念的扣唱，它們都稱為對象；只是我們把它構(gòu)造稱為列表和字典的形式而已团南。
$ node
> let li = [1,2,3]
undefined
> typeof li
'object'
> let dic = {"name": "shark"}
undefined
> typeof dic
'object'
>
8.4.1 更新對象
Object.assign方法用于對象的合并
Object.assign方法的第一個參數(shù)是目標對象噪沙，后面的參數(shù)都是源對象。
const target = { 'a': 1 };
const source1 = { 'b': 2 };
const source2 = { 'c': 3 };
Object.assign(target, source1, source2);
console.log(target); // {a:1, b:2, c:3}
8.4.2 遍歷對象
const o = {"a": "1", "b": 2}
for (let k in o){
console.log(o[k])
}
// 變量 key
for (let k of Object.keys(o)){
console.log(k)
}
// 變量 value
for (let val of Object.values(o)){
console.log(val)
}
// 變量 key 和 value
for (let [k,v] of Object.entries(o)){
console.log(k,v)
}
10 序列化 JSON
-
JSON.stringify(obj)序列化 將 JS 的數(shù)據(jù)類型（對象或數(shù)組）轉(zhuǎn)化為 JSON 標準數(shù)據(jù)吐根，在 開發(fā)語言中這個數(shù)據(jù)的類型是字符串正歼。 -
JSON.parse(str)反序列化 將含有 標準的 JSON 數(shù)據(jù)轉(zhuǎn)化為 JavaScript 相應(yīng)的對象
// 序列化，轉(zhuǎn)化為 JSON
var json_arr = [1,'a',2,'b']
var json_str = JSON.stringify(arr)
var json_o = {'a': 1}
var json_str = JSON.stringify(json_o)
// 反序列化拷橘，轉(zhuǎn)換為 對象
JSON.parse('{"a":1}')
注意：
留心 JSON 數(shù)據(jù)的單局义、雙引號。
JSON 的數(shù)據(jù)中冗疮，字符串表示的萄唇，都必須使用雙引號，最外層使用單引號术幔。
'{"name": "shark", "age": 18, "other": "30"}'
JSON 的簡寫 重要
- 當定義的 JSON 對象中的
key和其對應(yīng)value一樣時可以只寫一個穷绵。 - 當定義的 JSON 對象中含有函數(shù)時，可以把 冒號和
function省略特愿。
let a = 10
let b = 20
var json = {
a, // 相當于'a': a
b,
'c': 30,
show(){
console.log(this.a)
}
}
json.show()
