一、快速入門
1.JavaScript的兩種引入方式
方式一：直接在html里面寫 目的：實作簡單的彈窗點擊查看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script標簽內，寫JavaScript代碼，可以放在head標簽里，也可以放在body標簽里-->
<script>
<!--彈窗，打開頁面時彈出一個視窗，并顯示有hello，world-->
alert('hello,world');
</script>
</head>
<body>
</body>
</html>
方式二：新建一個js檔案，在HTML中連接該檔案也可以實作，就像css一樣和HTML分開
注意script標簽必須是成對出現，
2.基本語法
點擊查看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--Javascript嚴格區分大小寫-->
<script>
//單行與多行注釋與Java中注釋的方式一樣
/*1.定義變數 變數型別 變數名 = 變數值；*/
var score =100;//這里不寫分號也沒事
var name = "twq";//這里不寫var也沒事，就算不寫變數名都可以，是不感覺可以隨心所欲了
if(score>60 && score <70){
alert('小子，你很危險呀');
}else if(score > 70 && score < 80){
alert('革命尚未成功，同學 仍需努力呀！！');
}else{
alert('不要驕傲哦！');
}
</script>
</head>
<body>
</body>
</html>
3.資料型別
(1)number
js不區分小數和整數，Number點擊查看代碼
123//整數123
123.1//浮點數123.1
1.123e3//科學計數法
-99//負數
NaN//not a number
Infinity//表示無限大
(2)字串
和Java的一樣(3)布林值
(4)邏輯運算
① && 兩個都為真，結果為真② | | 一個為真，結果為真
③ ！真即假，假即真
(5)比較運算子
① = 賦值② == 等于(型別不一樣，值一樣，也會判斷為true)
③ === 絕對等于（型別一樣，值一樣結果為true）
注意：這是Java的一個缺陷，堅決不要使用==比較
須知：
- NaN===NaN，這個與所有的數值都不相等，包括自己
- 只能通過isNaN(NaN)來判斷這個資料是否是NaN
(6)浮點數
盡量避免使用浮點數進行運算，存在精度問題！
(7)陣列
java的數值必須是相同型別的物件，JS中需不要這樣！
如果陣列下標越界會報undefined
(8)物件
物件是大括號，陣列是中括號 每個屬性之間用逗號隔開，最后一個屬性之后不需要逗號點擊查看代碼
<script>
console.log((1/3)===(1-2/3));
console.log(Math.abs(1/3-(1-2/3))<0.00000001);
//保證代碼的可讀性，盡量使用[]
var arr=[1,2,3,4,5,'hello',null,true];
new Array(1,12,3,4,5,'hello');
var person ={
name:"Twq",
age:23,
tags:['js','java','web','...']
}
</script>
4.嚴格檢查模式
點擊查看代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*前提是IDEA需要設定支持ES6語法
*'use strict'嚴格檢查模式，預防Javascript的隨意性導致產生的一些問題如：
* ①定義變數不寫變數型別在沒有寫嚴格檢查時不會報錯，但是加上這嚴格檢查之后就會報錯
* 必須要寫在JS的第一行
* 區域變數建議都使用let去定義 */
'use strict';
/*let是塊作用域，就會好比在for回圈里用let定義了一個塊變數
在回圈的外部則無法使用該變數，var是函式作用域，在回圈里面定義的
變數在回圈外面也可以可以訪問*/
let i = 1;
</script>
</head>
<body>
</body>
</html>
二、詳解資料型別
1.字串
(1)正常字串，我們使用單引號或者雙引號包裹
(2)注意轉義字符
①\'②\n
③\u4e2d unicode字符格式：\u####
④\41 Ascll字符
(3)多行字串撰寫
(4)模板字串
點擊查看代碼
<script>
//tab 上面 esc下面
let name = "Twq";
var msg =`你好呀，${name}`//在Java中連接兩個字串用加號，二JS可以使用$符號連接
</script>
(5)字串長度
(6)字串內容的不可變性
(7)大小寫轉換
(8)查找
(9)substring
2.陣列
(1)長度
Array可以包含任意的資料型別
注意:假如給arr.length賦值，陣列大小就會發生變化，如果賦值過小，元素就會丟失
(2)indexOf,通過元素獲得下標索引
在陣列里字串的1和數字1是不同的
(3)slice()
截取Array的一部分，回傳一個新陣列，類似于String中的substring(4)尾部壓入和彈出push(),pop()
從尾部壓入和彈出元素
(5)unshift(),shift()
unshift()壓入到頭部 shift()彈出頭部的第一個元素
(6)sort()
(7)元素反轉
(8)concat()
注意:concat()并沒有修改原來的陣列的值，只是會回傳一個新的陣列
(9)連接符join
列印拼接陣列，使用特定的字串連接
(10)多維陣列
3.物件
(1).使用一個不存在的物件屬性，不會報錯！undefined
(2)動態的刪減屬性
(3)動態的添加屬性
(4)判斷屬性值是否在這個物件中
(5)判斷一個屬性是否是這個物件自身擁有的hasOwnProperty()
4.Map和Set
(1)Map
點擊查看代碼
<script>
var map = new Map([['tom',100],['jack',900],['haha',80]])
console.log(map.get('jack'))
map.set('admin',90);//新增或修改
map.delete('tom');//洗掉
for(let x of map){
console.log(x)
}
</script>
(2)Set
無序不重復的集合點擊查看代碼
<script>
var set = new Set([1,1,1,3]);
set.add(2);//添加一個元素
set.delete(3);//洗掉一個元素
for(let x of set){
console.log(x)
}
console.log(set.has(1))//集合中是否包含1
</script>
四、函式
1.定義函式
(1)定義方式一
點擊查看代碼
<script>
function abs(x){
if(x >= 0){
return x;
}
else{
return -x;
}
}
</script>
一旦執行到return代表函式結束，回傳結果
如果沒有執行return，函式執行完也會回傳結果，結果就是undefined
（2）方式二：
點擊查看代碼
var abs = function(x){
if(x >= 0){
return x;
}
else{
return -x;
}
}
點擊查看代碼
<script>
var abs = function(x){
if(typeof x !== 'number'){//如果引數x的型別不是一個數
//手動定義例外
throw 'Not a number';
}
if(x >= 0){
return x;
}
else{
return -x;
}
}
</script>
②假設參入的引數有多個
可以使用arguments關鍵詞
arguments：代表傳遞進來的所有引數，是一個陣列
點擊查看代碼
<script>
var abs = function(x){
if(typeof x !== 'number'){//如果引數x的型別不是一個數
//手動定義例外
throw 'Not a number';
}
for(let i =0; i<arguments.length;i++){
console.log(arguments[i])
}
// if(x >= 0){
// return x;
// }
// else{
// return -x;
// }
}
</script>
③使用reset獲取當前除已定義的引數以外的所有引數
點擊查看代碼
<script>
var abs = function(a,b,c,...rest){
console.log("a->"+a);
console.log("b->"+b);
console.log("c->"+c);
console.log(rest);
}
</script>
2.變數的作用域
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/499099.html
標籤：JavaScript
上一篇：XML入門介紹