web前端中js詳解第二篇
阿新 • • 發佈：2022-03-31
Js(二)
1.操作符
由於下面的內容和python相似，所以只挑重要的詳細說一下
算術運算
定義方式除了var以外還有一種方式let，這種方式更為嚴格，如果var聲明瞭相同的變數，則後面賦的值會把前面賦的值覆蓋掉，而let相同的變數只能定義一次，否則會報錯。
一次性定義多個值：
var a=1,b=2,c="3";
一開始不給賦值，後面再賦值也行
var a,b,c;
a=1
b=2
c="3"
//%:求餘數
//當不是數字的運算時，"+"一旦有string型別就是拼接，最終結果為字串
//而 - / % * 則是自動隱式轉換為數字去計算
如果無法隱式轉換成數字，就會輸出'NaN'
<script>
var a = 'c';
var b = 8;
</script>
賦值運算子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// var a = 8;
// a += 1; //a=a+1
// console.log(a)
// var a = 8;
// var b = a++;
// console.log(a,b)
// //得到的是9和8而不是8和9，因為這時候分兩步，第一步: b=a 第二步:a=a+1
// //++在後面是先賦值，再加一，++在後面是先加一，後復賦值
// var c = 1;
// var d = ++c;
// console.log(c,d)
</script>
</body>
</html>
比較運算子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a = '8';
var b = 8;
if(a === b){
alert('hello')
}else {
alert('python')
}
//上面輸出python
//全等於時不但資料要一樣，而且型別也要一樣
//如果是"=="的話就只比值，不比對型別。
</script>
</body>
</html>
邏輯運算子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//&& 與 兩邊都為真結果才為真，其他都是假
//|| 或 兩邊都為假結果才為假，其他都是真
//! 非 取反，真變假，假變真
//當兩邊不一定是布林值時
//&& 遇到假就停 不會進行資料轉換
//|| 遇到真就停 不會進行資料轉換
//! 隱式型別轉換,將後面的資料先轉換為布林值在取反
var a = true && true && false //輸出為假
var b = 0 || 0 || 2 //輸出為2
var c = 2 && -1 && '' //輸出為空
var d = 0 && null //輸出為0，因為第一個條件就不符合了
//先判斷2 && -1發現為真，然後往下判斷-1 && ''發現為假，然後輸出空
//"或"是一直判斷下去，直到有真才輸出真的值
//"與"是一直判斷下去，直到有假才輸出假的值
//邏輯運算子不是判斷值是否相等的，只判斷是不是為真
</script>
</body>
</html>
以下在進行判斷時為假：
1.0
2.null
3.undefined
4.NaN
5.''(空字串)
6.false
2.控制流程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var a = 0;
// if (a >= 0){
// alert("真")
// }else {
// alert("假")
// }
// 三目運算:條件? 真語句: 假語句
// a>=0? alert("真"):alert("假")
// var x = 8;
// if (x>50){
// alert('x>50')
// }else if(x>30){
// alert('x>30')
// }else if(x>=10){
// alert('x>=10')
// }else {
// alert("hello world")
// }
//switch速度會比if快一些
var day = 3
switch (day){
case 1:
document.write("1")
//document.write()是寫在終端(網頁)內，不寫在控制器內
//console.log()是寫在控制器內
break
case 2:
document.write("2")
break
case 3:
document.write("3")
break
case 4:
document.write("4")
break
}
</script>
</body>
</html>
3.迴圈
for迴圈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//迴圈長這樣:
// for(條件){
// 執行語句
// }
//如果外面沒有定義變數，for內也可以定義
//和c語言的for迴圈有一定的類似性
for (var i=1; i<=9; i++){
for (var j=1;j<=i ;j++){
var b = i*j
document.write(i+"*"+j+"="+b+' ')//拼接
}
document.write("<br>")
}
</script>
</body>
</html>
迴圈例項
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
width: 100px;
height: 100px;
background: red;
margin: 10px;
}
</style>
</head>
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
//點選哪個就彈窗出來對應的數字，可以重複點選，此方法使用迴圈
var aLi = document.getElementsByTagName('li');
var len = aLi.length;
for (var i = 0; i<len; i++){
aLi[i].wwwww = i //儲存值
aLi[i].onclick = function () {
alert(this.wwwww)
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
width: 100px;
height: 100px;
background: red;
margin: 10px;
}
</style>
</head>
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
//點選哪個就彈窗出來對應的數字，不用迴圈的方法，但是如果事件多的話就不合適了
var aLi = document.getElementsByTagName('li');
aLi[0].onclick = function (){
alert(0)
}
aLi[1].onclick = function (){
alert(1)
}
aLi[2].onclick = function (){
alert(2)
}
aLi[3].onclick = function (){
alert(3)
}
aLi[4].onclick = function (){
alert(4)
}
</script>
</body>
</html>
while迴圈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var i=0
while (i<10){
console.log(i)；
i++；
}
</script>
</body>
</html>
do while迴圈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var i=0
do{
console.log(i);
i++;
}
while (i<10)
</script>
</body>
</html>
4.字串方法
string 字串
索引，下標，偏移量---從0開始
str[index];通過索引取字串
str.length;獲取長度 空格也算
value.toString();--轉換字串
str.substring();--擷取字串會比較引數值的大小，小的引數在前面，負數變為0
str.slice()--切片，不會交換位置，負數從右到左數
str.split()--字串切割，返回陣列
str.indexOf --查詢字串，成功返回索引，反之返回-1 ===>相當於python中的find
str.toUppweCase()--全部轉換大寫
str.toLowerCase()--全部轉換小寫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var str="wo shi shui";
console.log(str.length);
console.log(str[3]);
//執行以下兩行程式碼輸出的東西不變，所以可以發現string方法不能改變值
//string型別不可變
str[0] = "Q";
console.log(str);
//將其他型別的資料轉化為字串
var a = 8;
alert(typeof a.toString())
//substring遵循左閉右開原則
var str1 = "wo shi shui wo zai na";
//擷取字串會自動比較引數值的大小，小的引數在前面，大的引數在前面，這點和python不一樣
//下面兩行程式碼輸出結果一樣
console.log(str1.substring(3,9));
console.log(str1.substring(9,3));
//負數變為0 ===>(0, 9)
console.log(str1.substring(-3,9));
//slice遵循左閉右開原則
console.log(str1.slice(3,9));
console.log(str1.slice(9,3)); //輸出為空，python也是為空，所以不能倒著寫
console.log(str1.slice(-5,-1));
console.log(str1.split('i'));
alert(str1.indexOf('h',5))//這裡的數字意思是從幾號位置開始找
</script>
</body>
</html>
5.陣列(列表)方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var arr =["april",'班長','有你','大當家','七葉'];
//索引取值
console.log(arr[3]);
//賦值(改變值)
arr[4] = "憂遊";
console.log(arr);
//如果一共5個數據，你修改第八個，也就是跳過一些位置會輸出:
//['april', '班長', '有你', '大當家', '七葉', 空 ã3, '憂遊']
//新增
arr.push("思雨",'三月') //可以新增多個
arr.unshift("眠",'鯊魚')
//刪除，不能指定，括號裡不能填數字
console.log(arr.pop())
console.log(arr.shift())
//指定刪除
console.log(arr.splice(3)); //保留前三個，剩下全部刪除，如果裡面的數字大於總數則一個都不會刪除
console.log(arr.splice(2,2)); //從2號位置開始刪除2個，但是不包含2號元素
console.log(arr.splice(1,2,"哈哈"));//從1號位置開始刪除兩個，然後再加上’哈哈‘，不刪除只新增的話就把2改為0
// 另一種定義陣列方式
var arr11 = Array(); //定義空陣列
arr11[0] = 'qqq'; //給空陣列新增值，陣列沒有互異性或者去重功能，所以值可以重複
//排序
var arr2 = [1,5,3,6,3,2,2,8,9]
var arr3 = arr2.sort()
var arr12 = arr2.sort().reverse() //逆序
//拼接
var arr5 = ["思",'月']
var q = arr5.join("和")
console.log(q)
//多拼接
var arr1 = [1,2,3]
var arr4 = [4,5,6]
var arr7 = [7,8,9]
//如果直接用"+"拼接則arr1,arr4,arr7之間沒有逗號，最後出來的是字串不是陣列
var arr6 = arr1.concat(arr4).concat(arr7)
console.log(arr4)
</script>
<