javascript入門，語法、資料型別等
1.1、概述
JavaScript是一門世界上最流行的指令碼語言
一個合格的後端人員，必須精通JavaScript
2、快速入門
2.1、引入JavaScript
-
內部標籤
<script>
// ....
</script>
-
外部引入
abc.js
//...
test.html
<script src="abc.js"></script>
測試程式碼
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- script標籤類，寫JavaScript程式-->
<!-- <script>-->
<!-- alert('hello,world')-->
<!-- </script>-->
<!-- 外部引入 -->
<!-- 注意：必須成對出現-->
<script src="js/rg.js"></script>
<!-- 不用顯示定義type，也預設就是javascript-->
<script type="text/javascript"></script>
</head>
<body>
<!--這裡也可以存放-->
</body>
2.2、基本語法入門
<!--JavaScript嚴格區分大小寫！ -->
<script>
// 1.定義變數 變數型別 變數名 = 變數值；
var num = 1;
// alert(num);
// var name = "rongge";
// alert(name);
if (2>1){
alert("true");
}
//console.log(sum)在瀏覽器控制檯列印變數！ 相當於System out printlin();
</script>
瀏覽器必備除錯須知：
2.3、資料型別
變數
var 王者榮耀="倔強青銅" //不能數字開頭
number
js不區分小數和整數，Number
123 //整數123
123.1 //浮點數
1.123e3 //科學計數法
-99 //負數
NaN // not a number
Infinity //表示無限大
字串
'abc' "abc"
布林值
true , false
邏輯運算
&&
||
! 取反：真即假，假即真
比較運算子（重要）
= 賦值
== 等於（型別不要求一樣）
=== 絕對等於（型別也必須一樣）
這是JS的一個缺陷，堅持不要使用 == 比較
須知：
-
NaN===NaN,這個與所有的數值都不相等，包括自己
-
只能通過isNaN(NaN)來判斷這是數是否是NaN
浮點數的問題
console.log((1/3)===(1-2/3))
儘量避免使用浮點數進行運算，存在精度問題！
Math.abs(1/3-(1-2/3))<0.00000001
null 和 undefined
-
null 空
-
undefined 未定義
陣列
java的陣列必須是相同型別的物件，JS不要求
<script>
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,12,3,4,5,'hello');
</script>
取陣列下標，如果越界了，就會顯示undefined
物件
物件是大括號，陣列是中括號
每個屬性之間使用逗號隔開，最後一個不需要新增
//相當於Java的 Person person = new Person(1,2,3)
var person = {
name:'rongge',
age:25
}
取物件的值
person.age
25
person.name
'rongge'
2.4、嚴格檢查格式
<!-- 前提：IDEA 需要設定支援ES6語法
'use strict' :嚴格檢查模式，預防JavaScript的隨意性導致產生的一些問題
必須寫在JavaScript的第一行
區域性變數建議都是用 let 去定義
-->
<script>
'use strict'
let i = 1;
//ES6 let
</script>
3、資料型別
3.1、字串
-
正常字串我們使用 單引號，雙引號包裹
-
注意轉義字元
\'
\n
\t
\u4e2d \u#### Unicode字元
\x41 Ascii字元
-
多行字串編寫
//飄符號 tab鍵上面
var masg=
`hello
world
nihao
你好`
-
模板字串
'use strict'
let name = "rongge";
let age ="3";
let mag =`你好呀,${name}`
-
字串長度
console.log(str.length)
-
字串的可變性，不可變
-
大小寫轉換
//注意，這裡是方法，不是屬性了
console.log(student.toUpperCase())
STUDENT
-
substring
console.log(student.substring(1))
VM1161:1 tudent
console.log(student.substring(1,3))
VM1170:1 tu
3.2、陣列
Array可以包含任意的資料型別
var arr = [1,2,3,4,5,6] //通過下標取值賦值
arr[0]=1
1、長度
arr.length
注意：假如給arr.length賦值，陣列大小就會發生變化，如果賦值過小，元素就會丟失~
2、indexOf，通過元素獲得下標索引
arr.indexOf(2)
1
字串的”1“和數字1是不同的
3、slice() 擷取Array的一部分，返回一個新陣列，
4、push(),pop()
push: 壓入到尾部
pop:彈出尾部的一個元素
5、unshift()，shift() 頭部
unshift: 壓入到頭部
shift:彈出頭部的一個元素
6、排序
var rong = ["D","C","A"]
rong.sort()
['A', 'C', 'D']
7、元素反轉
rong.reverse()
['D', 'C', 'A']
8、concat():字串拼接
rong.concat("U","F","O")
['D', 'C', 'A', 'U', 'F', 'O']
rong
['D', 'C', 'A']
注意：concat() 並沒有修改陣列，而是返回一個新的陣列
9、連線符join
rong
['D', 'C', 'A']
rong.join("-")
'D-C-A'
10、多維陣列
arr1 = [[1,2],[3,4],[5,6]]
arr1[2][1]
6
3.3、物件
若干個鍵值對
var person = {
name:"rongge",
age:3,
email:"[email protected]",
score:75
}
js中物件，{.......}表示一個物件，鍵值對描述屬性 xxx：xxx，多個屬性之間使用逗號隔開，最後一個屬性不加逗號！
JavaScript中的所有的鍵都是字串，值是任意物件！
1、物件賦值
person.name="lala"
person.name
'lala'
2、使用一個不存在的物件屬性，不會報錯！
person.haha
undefined
3、動態的刪減屬性
delete person.name
true
person
{age: 3, email: '[email protected]', score: 75}
4、動態的新增
person.haha="haha"
'haha'
person
{age: 3, email: '[email protected]', score: 75, haha: 'haha'}
5、判斷屬性值是否在這個物件中！ xxx in xxx！
'age' in person
true
6、判斷一個屬性是否是這個物件自身擁有的hasOwnProperty
person.hasOwnProperty('toString')
false
person.hasOwnProperty('email')
true
3.4、流程控制
forEach迴圈
var age = [12,3,12,3,12,3,12,3,123];
//函式
age.forEach(function (value) {
console.log(value)
})
3.5、Map 和 Set
Map:
//學生的成績，學生的名字
// var names = ["tom","jack","haha"];
// var scores = [100,90,80];
var map = new Map([["tom",100],["jack",90], ["haha",80]]);
let name = map.get('tom'); //通過key獲得value
map.set("guaiguai",50); //新增或修改
map.delete("tom"); //刪除
Set:無序不重複的集合
var set = new Set([3,1,11,1])//set可以去重
set.add(2); //新增
set.delete(1) //刪除
console.log(set.has(11)) //是否包含某個元素
3.6、iterator
遍歷陣列
// 通過for of / for in 是顯示下標
var arr = [3,4,5];
for(var x of arr){
console.log(x)
}
遍歷map
var map = new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of map){
console.log(x)
}
遍歷set
var set = new Set([1,2,3,4,5]);
for(let x of set){
console.log(x)
}