小白學前端--------------JavaScript基本語法
JavaScript基本語法
一.JavaScript引入方式
1.引入方式
-
Script標籤內
<script> // 在這裡寫你的JS程式碼 </script> -
引入額外的JS檔案
<script src="myscript.js"></script> -
通過事件屬性定義在元素內部
<button onclick="alert('啊，好疼啊')">點我啊</button> -
註釋
// 這是單行註釋 /* 這是 多行註釋 */ -
JavaScript中的語句要以分號（;）為結束符。
-
document.write(‘你是不是喜歡我?’); 輸出到頁面上
-
console.log(‘hello world’); 輸出到控制檯
2.JavaScript 程式
-
三個基本彈框
alert() 跳出彈窗,只有確定按鈕 confirm() 跳出彈窗,有確定與取消按鈕,控制檯可以得到返回值true和false prompt() 跳出彈窗,可以輸入文字內容,會顯示在控制檯(取消得到null) -
獲取HTML中的DOM元素
document.getElementById() -
元素的應用 得到元素的屬性
-
事件的應用 觸發了事件在執行某段程式碼(onclick)
-
函式的應用
-
運算子的應用
-
新增改變元素的內容
二.JavaScript語言基礎
1.變數
-
JavaScript的變數名可以使用_，數字，字母，$組成，不能以數字開頭。
-
宣告變數使用 var 變數名; 的格式來進行宣告
-
ES6新增了let命令，用於宣告變數。其用法類似於var，但是所宣告的變數只在let命令所在的程式碼塊內有效。例如：for迴圈的計數器就很適合使用let命令。
-
ES6新增const用來宣告常量。一旦宣告，其值就不能改變。
var name = "Alex"; let age = 18; const PI = 3.1415; var a=100,b=200,c=300; 同時宣告多個變數s變數名是區分大小寫的。
推薦使用駝峰式命名規則。
保留字不能用做變數名。
2.資料型別
原始型別 Number String Boolean Null Undefined
物件型別 Object Array
-
數值 JavaScript不區分整型和浮點型，就只有一種數字型別。
- 還有一種NaN，表示不是一個數字（Not a Number）。但是NaN本身是一個Number型別,可以使用isNaN(引數)判斷
-
字串
方法 說明 .length 返回長度 .trim() 移除空白 .trimLeft() 移除左邊的空白 .trimRight() 移除右邊的空白 .charAt(n) 返回第n個字元 .concat(value, …) 拼接 .indexOf(substring, start) 子序列位置 .substring(from, to) 根據索引獲取子序列 .slice(start, end) 切片 .toLowerCase() 小寫 .toUpperCase() 大寫 .split(delimiter, limit) 分割 拼接字串一般用"+"
ES6中引入了模板字串。模板字串（template string）是增強版的字串，用反引號（`）標識。它可以當做普通字串使用，也可以用來定義多行字串，或者在字串中嵌入變數。
`這是普通字串！` `這是多行的 文字` // 字串中嵌入變數 var name = "q1mi", time = "today"; `Hello ${name}, how are you ${time}?` -
布林值true和false
- “”(空字串)、0、null、undefined、NaN都是false.
-
null和undefined
- null表示值是空，一般在需要指定或清空一個變數時才會使用，如 name=null;
- undefined表示當宣告一個變數但未初始化時，該變數的預設值是undefined。還有就是函式無明確的返回值時，返回的也是undefined。
- null表示變數的值是空，undefined則表示只聲明瞭變數，但還沒有賦值。
-
資料型別轉換
- 自動轉換:取決於運算子
- 強制轉換:Number() String() Boolean()
-
物件Object
-
JavaScript 中的所有事物都是物件：字串、數值、陣列、函式…此外，JavaScript 允許自定義
-
JavaScript 提供多個內建物件，比如 String、Date、Array 等等。
-
物件只是帶有屬性和方法的特殊資料型別。
-
陣列物件的作用是：使用單獨的變數名來儲存一系列的值。類似於Python中的列表。
var a = [123, "ABC"]; console.log(a[1]); // 輸出"ABC"
方法 說明 .length 陣列的大小 .push(ele) 尾部追加元素 .pop() 獲取尾部的元素 .unshift(ele) 頭部插入元素 .shift() 頭部移除元素 .slice(start, end) 切片 .reverse() 反轉 .join(seq) 將陣列元素連線成字串 .concat(val, …) 連線陣列 .sort() 排序 .forEach() 將陣列的每個元素傳遞給回撥函式 .splice() 刪除元素，並向陣列新增新元素。 .map() 返回一個數組元素呼叫函式處理後的值的新陣列 關於sort()需要注意：
如果呼叫該方法時沒有使用引數，將按字母順序對陣列中的元素進行排序，說得更精確點，是按照字元編碼的順序進行排序。要實現這一點，首先應把陣列的元素都轉換成字串（如有必要），以便進行比較。
如果想按照其他標準進行排序，就需要提供比較函式，該函式要比較兩個值，然後返回一個用於說明這兩個值的相對順序的數字。比較函式應該具有兩個引數 a 和 b，其返回值如下：
若 a 小於 b，在排序後的陣列中 a 應該出現在 b 之前，則返回一個小於 0 的值。 若 a 等於 b，則返回 0。 若 a 大於 b，則返回一個大於 0 的值。
var a = [10, 20, 30, 40]; for (var i=0;i<a.length;i++) { console.log(a[i]); }* -
-
symbol
ES6新引入了一種新的原始資料型別（Symbol），表示獨一無二的值。它是JavaScript語言的第7種資料型別。
-
型別查詢 typeof
typeof "abc" // "string" typeof null // "object" typeof true // "boolean" typeof 123 // "number"typeof是一個一元運算子（就像++，–，！，- 等一元運算子），不是一個函式，也不是一個語句。
對變數或值呼叫 typeof 運算子將返回下列值之一：
- undefined - 如果變數是 Undefined 型別的
- boolean - 如果變數是 Boolean 型別的
- number - 如果變數是 Number 型別的
- string - 如果變數是 String 型別的
- object - 如果變數是一種引用型別或 Null 型別的
-
弱型別和強型別 動態型別和靜態型別(瞭解)
-
動態型別: 不需要提前為變數指定資料型別
-
靜態型別: 需要為變數提前指定資料型別
-
強型別: 資料型別不能自動轉換
-
弱型別: 資料可以自動轉換
JavaScript 弱型別 動態型別 python 強型別 動態型別
-
3.運算子
-
算數運算子
+ - * / % ++ -- -
比較運算子
> < <= >= (!= == 弱等於) (!== === 強等於) -
邏輯運算子
&&=and ||=or !=not -
賦值運算子
= += -= *= /= -
其他運算子
?: typeof + 字串拼接 in instanceof void
4.流程控制
-
if-else
var a = 10 if(a>5){ console.log("大於5"); }else{ console.log("小於5"); } -
switch…case
var day = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") }switch中的case子句通常都會加break語句，否則程式會繼續執行後續case中的語句。
-
分支結構巢狀
if (表示式) { if (表示式) { code.... } code ... } else { code... }
5.for迴圈
必須寫三部分,不寫也要用;佔位
for (迴圈變數; 迴圈條件; 迴圈變數變化) {
code ...
}
//迴圈輸出 0-10
for (var i = 0; i <= 10; i++) {
console.log(i)
}
==================================================
var arr1 = [1,2,3,4];
for (let i=0;i<arr1.length;i++){
console.log(i,"-",arr1[i]);
}
==================================================
for...in 迴圈
var obj = {name:'JIM', age:20}
for (k in obj) {
console.log(k, obj[k])
}
//for...in 可以遍歷 javaScript 的物件型別,一切皆物件
===================================================
for...of 迴圈
var list = [10,20,304,405,3]
for (v of list) {
console.log(v)
}
//用於遍歷JavaScript中的可迭代型別(Iterable) 主要包括 陣列、類陣列物件、字串、Map、Set、Anguments、NodeList等
6.while迴圈
var num = 0;
while (num<=10){
console.log(num);
num++;
}
do...while 不管while成不成立,先執行do,再執行while判斷
do {
console.log(num);
num++;
} while ((num<=10);
其他語句
跳轉語句
continue; 跳出當前迴圈,繼續下一次
break; 結束迴圈
return; 結束函式
異常語句
try {
tryCode - 嘗試執行程式碼塊
}
catch(err) {
console.log(err) - 捕獲錯誤的程式碼塊
}
finally {
finallyCode - 無論 try / catch 結果如何都會執行的程式碼塊
}
注意:
當分支語句和迴圈語句結構體(
{}內)只有一行程式碼的時候可以省略{}.
嚴格模式
//寫再所有程式碼的最前面
//開啟嚴格模式
'use strict'
在嚴格模式下宣告變數必須加var或者let
7.三元運算
var n = 10;
var m = 5;
var x = n>m ? n:m
var n = 10;
var m = 5;
var x = n>100 ? n:(m===5)?m:0
三.函式
3.1.函式的引數及return
- JS中如果沒有明確指定返回值,預設返回一個undefined
- 函式引數問題
- 實引數量>形引數量 多給的實參會被忽略
- 實引數量<形引數量 形參預設值為undefined
- 可變數量的引數
- arguments可以獲取所有的實參,但是隻能在函式中使用
- arguments是類陣列物件,用法同陣列,可以使用for迴圈遍歷
- return
- return可以結束函式,返回值
- JS中的return只能返回一個值,如果需要返回多個值,可以放進陣列內返回.
//關鍵字方式
function 函式名(引數1,引數2...){
code...
}
關鍵字方式定義的函式,會粗壯乃函式提升(在函式定義的前面可以呼叫函式)
//表示式方式
var 函式名 = function(引數1,引數2...){
code...
}
//設定預設值
function 函式名(引數1,引數2=預設值){
code...
}
//可變數量的引數
===================================================================
function f1(){
console.log("hello");
}
f1();
這是呼叫函式列印的結果hello
返回值是undefined
====================================================================
function f2(a,b){
console.log(a,b);
}
f2("hello","world");
列印結果:hello world
返回值是undefined
====================================================================
function f3(a,b){
console.log(a,b);
return "哈哈";
}
f3("hello","world");
列印結果:hello world
返回值:"哈哈"
====================================================================
function f4(a,b){
console.log(a,b)
return a,b;
}
f4(1,2);
列印結果:1 2
返回值:2
返回值只有一個,是最後一個
====================================================================
function f5(a,b){
console.log(a,b);
return [a,b];
}
f5(1,2);
列印結果:1 2
返回值:[1,2]
====================================================================
var f6 = function(a,b){
console.log(a,b);
return [a,b];
}
var ret = f6("hello","world");
ret
列印結果:hello world
返回值:["hello","world"]
====================================================================
(function(a,b){
console.log(a,b);
})(1,2)
====================================================================
var f = v=>v*2;
等價於
var f= function(v){
return v*2;
}
====================================================================
var x= () =>100;
var y = (a,b) => {return a+b};
====================================================================
function f7(a,b){
console.log(a,b);
return [a,b];
}
var ret = f7();
ret
列印結果:undefined undefined
返回值:[undefined,undefined]
====================================================================
function f8(a,b){
console.log(a,b);
return [a,b];
}
var ret = f8(10,20,30,40);
ret
列印結果:10 20
返回值:[10,20]
====================================================================
function f9(a,b){
console.log(arguments.length);
if (arguments.length>2){
console.log("引數傳多了")
}else {
console.log(a,b);
return [a,b];
}
}
var ret = f9(10,20,30,40);
ret
列印結果:引數傳多了
返回值:undefined
3.2回撥函式
- 函式的引數還是函式
3.3 自調函式
(function(){
code...
})();
(function 函式名(){
code...
})()
// 如果多個自調函式連續寫,中間必須加; 否則報錯
// 產生區域性作用域
//有效避免全部變數汙染
3.4 遞迴函式
函式內部呼叫自己就是遞迴函式
//用遞迴 實現階乘
function multiply(n) {
if (n == 1) {
return 1
}
return n * multiply(n - 1)
}
下面程式碼則執行了subgo()函式，
<a href="javascript:void(0)" onclick="subgo()">點我</a>在這裡，javascript:void(0),沒啟實質上的作用，它僅僅是一個死連結，執行的函式是subgo()。
void可以是一個a標籤變成一個死連結
onclick是執行一段JavaScript