1. 什麼是 JavaScript
1.1 概述
JavaScript是一門世界上最流行的腳本語言
一個合格的後端人員,必須要精通JavaScript
1.2 歷史
(JavaScript歷史)
ECMAScript它可以理解爲是JavaScript的一個標準
最新版本已經到了es6版本~
但是大部分瀏覽器還只停留在支持es5代碼上!
開發環境------線上環境,版本不一致
2. 快速入門
2.1 引入JavaScript
注意:script標籤必須成對出現,要不然有些會出問題
1.內部標籤
<script >
//....
</script>
2.外部引入
yyc.js
//...
test.html
<script src = "yyc.js"></script>
測試代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script標籤內,寫JavaScript代碼-->
<!-- <script>-->
<!-- alert('hello,word');-->
<!-- </script>-->
<!--外部引用-->
<!--注意:script標籤必須成對出現,要不然有些會出問題-->
<script src="js/yyc.js"></script>
<!--不用顯示定義type,也默認JavaScript-->
<script type="text/javascript">
</script>
</head>
<body>
<!--這裏也可以寫-->
<script>
</script>
</body>
</html>
2.2 基本語法入門
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--javascript 嚴格區分大小寫-->
<script>
// 1.定義變量 變量類型 變量名 = 變量值;
var score = 70;
var name = "yyc";
// 2.條件控制
if (score > 60 && score < 70) {
alert("60~70");
} else if (score > 70 && score < 80) {
alert("70~80");
} else {
alert("other");
}
//console.log(score) 在瀏覽器的控制檯打印變量!System.out.println();
</script>
</head>
<body>
</body>
</html>
瀏覽器必備調試須知:
2.3 數據類型
數值、文本、圖形、音頻、視頻…
變量
var 和平精英 = "鑽石";//這個在java中也是可以的,自然在JavaScript中也是可以的
number
js不區分小數和整數,Number
123//整數123
123.3//浮點數123.3
1.123e3//科學計數法
-99//負數
NaN// not a number
字符串
‘abc’ “abc”
布爾值
true false
邏輯運算
&& 兩個爲真,結果爲真
|| 一個爲真,結果爲真
! 真即假,假即真
比較運算符
=
== 等於(類型不一樣,值一樣,也會判斷爲true)
=== 絕對等於(類型一樣,值一樣,結果爲true)
這是JS的缺陷,堅持不要使用 == 比較
須知:
- NaN === NaN,這個所有的數值不相等,包括自己
- 只能通過isNaN(NaN)來判斷這個數是否爲NaN
浮點數問題:
console.log((1 / 3) === (1 - 2 / 3));
儘量避免使用浮點數進行運算,存在精度問題!
Math.abs(1/3-(1-2/3))<0.0000000001
null 和 undefined
- null 空
- undefined 未定義
數組
java的數組必須是相同類型的對象~,JS中不需要這樣
//保證代碼的可讀性,儘量使用 []
var arr = [1,2,3,4,'hello',null,true];
new Array(1,12,3,4,5,'hello');
取數組下標:如果越界了,就會
undefined
對象
對象是大括號,數組是中括號~~
每個屬性之間使用逗號隔開,最後一個不需要添加
//Person person = new Person(1,2,3.,4,5);
var person ={
name:"yyc",
age:3,
tags:['js','java','web','...']
}
取對象值:
person.age
> 3
person.name
> "yyc"
2.4 嚴格檢查格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提:IDEA 需要設置支持ES6語法;
'use strict';嚴格檢查模式,預防JavaScript的隨意性導致產生的一些問題,必須寫在JavaScript的
第一行
局部變量建議都使用let去定義
-->
<script>
'use strict'
//全局變量
i =1;
//es6 let
</script>
</head>
<body>
</body>
</html>
3.數據類型
3.1 字符串
1.正常字符串我們使用 單引號,或者是雙引號包裹
2.注意轉義字符 " \ "
\'
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascll字符
3.多行字符串編寫
'use strict'
//console.log('a');
//tab上面esc鍵下面
var msg = `hello
word
你好
`
4.模板字符串
let name = `yyc`;
let age = 3;
let msg = `你好呀,${name}`
結果爲:
你好呀,yyc
5.字符串長度
str.length
6.字符串的可變性,不可變
7.大小寫轉換
//注意,這裏是方法,不是屬性了
str.toUpperCase();
str.toLowerCase();
8.獲取指定的下標
str.indexOf('t');
9.從第一個字符串截取到最後一個字符串
[)
str.substring(1)//從第一個字符串截取到最後一個字符串
str.substring(1,3)//[1,3)
3.2數組
Arry可以包含任意的數據類型
var arr = [1,2,3,4,5];//通過下標取值和賦值
arr[0]
arr[0] = 1
1.長度
arr.length
注意:加入給arr.length 賦值,數組大小就會發生變化~如果賦值過小元素就會丟失!
2. arr.indexOf(2),通過元素獲得下標索引
arr.indexOf(2)
字符串的"1"和數字的1是不同的
3.slice() 截取數組的一部分,返回一個新數組,類似於String中的substring
arr.slice(1,5)
4. push(),pop() 尾部
push() :壓入尾部
pop() :彈出尾部的一個元素
5. unshift() , shift() 頭部
unshift: 壓入到頭部
shift: 彈出頭部一個元素
6. 排序 sort()
var arr = ["b","c","a"]
<-undefined
->arr.sort()
<-(3) ["a", "b", "c"]
7. 元素反轉 reverse()
->arr.reverse()
<-(3) ["c", "b", "a"]
8. concat ()
->aarr.concat([1,2,3])
<-(6) ["c", "b", "a", 1, 2, 3]
注意:concat() 並沒有修改數組,只是會返回一個新的數組
9. 連接符 join
打印拼接數組,使用特定的字符串連接
->arr.join("-")
<-"c-b-a"
10. 多維數組
數組:存儲數據(如何存,如何取,方法都可以自己實現!)
3.3、對象
若干個鍵值對
var 對象名 = {
屬性名:屬性值,
屬性名:屬性值,
屬性名:屬性值 //最後這個沒有逗號
}
//定義了一個person對象,它有四個屬性
var person = {
name: "yyc",
age: 3,
email:"[email protected]",
score:0
js中的對象,{…}表示一個對象,鍵值對描述屬性xxxx:xxxx,多屬性之間使用逗號隔開,最後一個屬性不加逗號!
javascript中的所有鍵都是字符串,值是任意對象!
1、對象賦值
person.name = "cyy"
"cyy"
person.name
"cyy"
2、使用一個不存在的對象屬性,不會報錯!undefined
person.haha
undefined
3、動態的刪減屬性
delete person.name
true
person
4、動態的添加,直接給新的屬性添加值即可
person.haha = "haha"
"haha"
person
5、判斷屬性值是否在這個對象中! xxx in xxx!
'age' in person
true
//繼承
'toString' in person
true
6、判斷一個屬性是否是這個對象自身擁有的hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
3.4、流程控制
if判斷
var age = 3;
if (age > 3) {
alert("haha");
} else {
alert("kuwa~");
}
for循環
要計算1+2+3,我們可以直接寫表達式:
1 + 2 + 3; // 6
要計算1+2+3+…+10,勉強也能寫出來。但是,要計算1+2+3+…+10000,直接寫表達式就不可能了。爲了讓計算機能計算成千上萬次的重複運算,我們就需要循環語句。JavaScript的循環有兩種,一種是for循環,通過初始條件、結束條件和遞增條件來循環執行語句塊:
var x = 0;
var i;
for (i=1; i<=10000; i++) {
x = x + i;
}
x; // 50005000
讓我們來分析一下for循環的控制條件:
- i=1 這是初始條件,將變量i置爲1;
- i<=10000 這是判斷條件,滿足時就繼續循環,不滿足就退出循環;
- i++ 這是每次循環後的遞增條件,由於每次循環後變量i都會加1,因此它終 將在若干次循環後不滿足判斷條件i<=10000而退出循環。
for循環最常用的地方是利用索引來遍歷數組:
var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i<arr.length; i++) {
x = arr[i];
console.log(x);
}
for循環的一個變體是for … in循環,它可以把一個對象的所有屬性依次循環出來:
var o = {
name: 'Jack',
age: 20,
city: 'Beijing'
};
for (var key in o) {
console.log(key); // 'name', 'age', 'city'
}
while循環
var x = 0;
var n = 99;
while (n > 0) {
x = x + n;
n = n - 2;
}
x; // 2500
最後一種循環是do { … } while()循環,它和while循環的唯一區別在於,不是在每次循環開始的時候判斷條件,而是在每次循環完成的時候判斷條件:至少 執行一次!
var n = 0;
do {
n = n + 1;
} while (n < 100);
n; // 100
3.5、map 和set
ES6 的新特性~
map
//ES6 Map
//學生的成績,學生的名字
var map = new Map([['tom',8],['jack',50],['haha',99]]);
var name = map.get('tom');//通過key獲得value
console.log(name);
map.set('yyc',135464);//新增或修改
map.delete('tom');//刪除
set
var set = new Set([3,2,1,1,1,]);//set可以去重
set.add(5);
set.delete(3);
console.log(set.has(1));
3.6、iterator
- ES6 新特性
遍歷數組
//通過for of 來輸出數組裏面的呃所有值
//通過for in 來輸出數組的下標
var arr = [3,4,6];
for(var x of arr){
console.log(x);
}
遍歷map
var map = new Map([['tom',100],['jack',70],['haha',99]]);
for(let i of map){
console.log(i);
}
遍歷set
var set = new Set([5,6,7]);
for(let x of set ){
console.log(x);
}