前端之 JavaScript基礎

JavaScript 簡介

avaScript是一種屬於網絡的腳本語言,已經被廣泛用於Web應用開發,常用來爲網頁添加各式各樣的動態功能,爲用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。

Javascript的引入方式

第一種：外部引入：js代碼塊出現在外部js文件中,需要通過script標籤src屬性進行鏈接。

<script type="text/javascript" src="路徑/文件名.js"></script>

第二種：內部引入：js代碼塊需要出現在script標籤中。

<script type="text/javascript">js代碼</script>

第三種：行內引入：js代碼塊需要出現在事件中。

<input type="button" value="行內引入方式" onclick="javascript:alert('我是行內引入方式');">

三種方式不存在優先級,誰在邏輯下方,誰起作用。

Javascript的語法

註釋

// 單行註釋
/*
多行註釋
*/

變量

變量名的命名規範：
可以由字母,數字,_,$組成,但是不能以數字開頭(可以包含中文,採用小駝峯命名法)；區分大小寫；不能與關鍵字保留字重名。

聲明方式：

1、使用var（關鍵字）+變量名(標識符)的方式在function外部聲明，即爲全局變量，否則在function聲明的是局部變量。

var lin='這是一個全局變量';
function test() {
    var wow='這是一個局部變量';
}

2、沒有使用var，直接給標識符test賦值，這樣會隱式的聲明瞭全局變量test。即使該語句是在一個function內，當該function被執行後test變成了全局變量。

lin='這是一個全局變量';
function test() {
    wow='這也是一個全局變量';
}

3、使用window全局對象來聲明，全局對象的屬性對應也是全局變量。

 window.test = '利用window聲明的全局變量';

ES6新增了let命令，用於聲明變量。其用法類似於var，但是所聲明的變量只在let命令所在的代碼塊內有效。例如：for循環的計數器就很適合使用let命令。

for (let i=0;i<arr.length;i++){...}

JavaScript有一些保留字，不能用作標識符：

arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

另外，還有三個詞雖然不是保留字，但是因爲具有特別含義，也不應該用作標識符：Infinity、NaN、undefined。

常量

const也是ES6中新增的命令，const用於修飾常量，定義的變量不可修改，而且必須初始化，聲明位置不限（通常聲明在js開頭）

const linwow = "這是測試常量";
alert(linwow);
linwow = "我要改變常量值"; //報錯無法修改

輸出數據

JavaScript 可以通過不同的方式來輸出數據：

使用 window.alert() 彈出警告框。

var wow='hello javascript';
alert(wow);

使用 document.write() 方法將內容寫到 HTML 文檔中。

var wow='hello javascript';
document.write(wow);

使用 console.log() 寫入到瀏覽器的控制檯。

var wow='hello javascript';
console.log(wow);

數據類型

JavaScript的數據類型有：字符串（String）、數值(Number)、布爾(Boolean)、數組(Array)、空（Null）、未定義（Undefined）。在JavaScript中，我們可以用typeof運算符來確定一個值到底是什麼類型。

12  //數字
1.2  //小數
"hello world"  //字符串
true  //布爾值
null  //空

JavaScript 擁有動態類型

JavaScript 擁有動態類型。這意味着相同的變量可用作不同的類型：

var x;               // x 爲 undefined
var x = 5;           // 現在 x 爲數字
var x = "linWoW";      // 現在 x 爲字符串

字符串

字符串可以是引號中的任意文本，可以使用單引號或雙引號。

屬性和方法

length屬性：length屬性返回字符串的長度。
charAt()：charAt方法返回指定位置的字符，參數是從0開始編號的位置。如果參數爲負數，或大於等於字符串的長度，charAt返回空字符串。
charCodeAt()：charCodeAt方法返回給定位置字符的Unicode碼點（十進制表示）
concat()：用於連接兩個字符串，返回一個新字符串，不改變原字符串。該方法可以接受多個參數，如果參數不是字符串，concat方法會將其先轉爲字符串，然後再連接。
slice()：用於從原字符串取出子字符串並返回，不改變原字符串。它的第一個參數是子字符串的開始位置，第二個參數是子字符串的結束位置（不含該位置）。如果省略第二個參數，則表示子字符串一直到原字符串結束。如果參數是負值，表示從結尾開始倒數計算的位置，即該負值加上字符串長度。如果第一個參數大於第二個參數，slice方法返回一個空字符串。
substring()：用於從原字符串取出子字符串並返回，不改變原字符串。方法的第一個參數表示子字符串的開始位置，第二個位置表示結束位置。如果省略第二個參數，則表示子字符串一直到原字符串的結束。如果第二個參數大於第一個參數，substring方法會自動更換兩個參數的位置。
substr()：用於從原字符串取出子字符串並返回，不改變原字符串。方法的第一個參數是子字符串的開始位置，第二個參數是子字符串的長度。如果省略第二個參數，則表示子字符串一直到原字符串的結束。如果第一個參數是負數，表示倒數計算的字符位置。如果第二個參數是負數，將被自動轉爲0，因此會返回空字符串。
indexOf()，lastIndexOf()：這兩個方法用於確定一個字符串在另一個字符串中的位置，都返回一個整數，表示匹配開始的位置。如果返回-1，就表示不匹配。兩者的區別在於，indexOf從字符串頭部開始匹配，lastIndexOf從尾部開始匹配。
trim()：用於去除字符串兩端的空格，返回一個新字符串，不改變原字符串。該方法去除的不僅是空格，還包括製表符（\t、\v）、換行符（\n）和回車符（\r）。
toLowerCase()，toUpperCase()：用於將一個字符串全部轉爲小寫，toUpperCase則是全部轉爲大寫。它們都返回一個新字符串，不改變原字符串。
localeCompare()：方法用於比較兩個字符串。它返回一個整數，如果小於0，表示第一個字符串小於第二個字符串；如果等於0，表示兩者相等；如果大於0，表示第一個字符串大於第二個字符串。
match()：用於確定原字符串是否匹配某個子字符串，返回一個數組，成員爲匹配的第一個字符串。如果沒有找到匹配，則返回null。
search()：用法等同於match，但是返回值爲匹配的第一個位置。如果沒有找到匹配，則返回-1。
replace()：用於替換匹配的子字符串，一般情況下只替換第一個匹配（除非使用帶有g修飾符的正則表達式）。
split()：按照給定規則分割字符串，返回一個由分割出來的子字符串組成的數組。

參考：JavaScript數據類型

數值

JavaScript 只有一種數字類型。數字可以帶小數點，也可以不帶。極大或極小的數字可以通過科學計數法來書寫。NaN用來表示非數字值,不等於任何值包括它自己。isNaN方法可以用來判斷一個值是否爲NaN。

布爾

布爾（邏輯）只能有兩個值：true 或 false，都是小寫。""(空字符串)、0、null、undefined、NaN都是false。

數組

數組用[]來定義，數組下標是基於零的，所以第一個項目是 [0]，第二個是 [1]，以此類推

Undefined 和 Null

undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。
null表示值是空，一般在需要指定或清空一個變量時纔會使用，如 name=null;

null表示變量的值是空(null可以手動清空一個變量的值，使得該變量變爲object類型，值爲null)，undefined則表示只聲明瞭變量，但還沒有賦值。

函數

在JavaScript中，函數即對象，可以隨意地被程序操控，函數可以嵌套在其他函數中定義，這樣可以訪問它們被定義時所處的作用域中的任何變量。

函數定義：

function命令

function func()
 {
	函數內代碼
 }

函數表達式

var func = function(x){   
  console.log(x);  
}

通過Function()構造函數來定義

var func=new Function('x','y','return x+y');
等價於：
var func=function(x,y){
  return x+y;
}

立即執行函數

(function(x, y){
  return x + y;
})(1, 2);

使用“箭頭”（=>）定義函數

var f = v => v;
// 等同於
var f = function(v){
  return v;
}
如果箭頭函數不需要參數或需要多個參數，就是用圓括號代表參數部分：
var f = () => 5;
// 等同於
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2){
  return num1 + num2;  //這裏的return只能返回一個值，如果想返回多個值需要自己手動給他們包一個數組或對象中
}

函數聲明語句也會“被提前”到外部腳本或外部函數作用域的頂部，所以以這種方式聲明的函數，可以被在它定義之前出現的代碼所調用。

f1()
function f1(){
    console.log('linwow')
}
上面的代碼不會報錯。
f();  
var f = function (){
    console.log('linwow')
};  
// TypeError: f is not a function

函數的參數

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments相當於將出傳入的參數全部包含，這裏取得就是第一個元素1
}
add(1,2)
輸出：
3
2
1

函數只能返回一個值，如果要返回多個值，只能將其放在數組或對象中返回。

函數作用域

作用域（scope）指的是變量存在的範圍。Javascript只有兩種作用域：一種是全局作用域，變量在整個程序中一直存在，所有地方都可以讀取；另一種是函數作用域，變量只在函數內部存在。在函數外部聲明的變量就是全局變量（global variable），它可以在函數內部讀取。

流程控制

if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

if-else if-else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

switch

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中的語句。

for

for (var i=0;i<10;i++) {
  console.log(i);
}

while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三元運算

var a = 1;
var b = 2;
var c = a > b ? a : b
//這裏的三元運算順序是先寫判斷條件a>b再寫條件成立返回的值爲a,條件不成立返回的值爲b;三元運算可以嵌套使用；

對象

對象是一種複合值：它將很多值集合在一起，可通過名字訪問這些值。對象也可看做一種無序的數據集合，由若干個“鍵值對”（key-value）構成。對象的所有鍵名都是字符串，所以加不加引號都可以。如果鍵名是數值，會被自動轉爲字符串。

var obj={
  lin:'wow'
}

創建對象

對象直接量： var obj={};
關鍵字new： var obj=new Object();
Object.create()函數： var obj=Object.create(null)

屬性

對象的每一個“鍵名”又稱爲“屬性”（property），它的“鍵值”可以是任何數據類型。如果一個屬性的值爲函數，通常把這個屬性稱爲“方法”，它可以像函數那樣調用。

讀取對象的屬性，有兩種方法，一種是使用點運算符，還有一種是使用方括號運算符。數值鍵名不能使用點運算符（因爲會被當成小數點），只能使用方括號運算符。

var obj = {
  func: function(x){
    return x+1;
  }
};
obj.func(2)
輸出：3

通過Object.keys方法可以查看一個對象本身的所有屬性。

var obj = {
	name:'linwow',
    age:20
};
Object.keys(o)  //['name','age']

delete運算符可以刪除對象的屬性。delete運算符只能刪除自有屬性，不能刪除繼承屬性。刪除一個不存在的屬性，delete不報錯，而且返回true。只有一種情況，delete命令會返回false，那就是該屬性存在，且不得刪除。

var obj = {
	name:'linwow',
    age:20
};
delete o.name  //true

Array 對象

對象方法

方法	描述
concat()	連接兩個或更多的數組，並返回結果。
every()	檢測數組元素的每個元素是否都符合條件。
filter()	檢測數組元素，並返回符合條件所有元素的數組。
indexOf()	搜索數組中的元素，並返回它所在的位置。
join()	把數組的所有元素放入一個字符串。
lastIndexOf()	返回一個指定的字符串值最後出現的位置，在一個字符串中的指定位置從後向前搜索。
map()	通過指定函數處理數組的每個元素，並返回處理後的數組。
pop()	刪除數組的最後一個元素並返回刪除的元素。
push()	向數組的末尾添加一個或更多元素，並返回新的長度。
reverse()	反轉數組的元素順序。
shift()	刪除數組的第一個元素。
slice()	選取數組的的一部分，並返回一個新數組。
some()	檢測數組元素中是否有元素符合指定條件。
sort()	對數組的元素進行排序。
splice()	從數組中添加或刪除元素。
toString()	把數組轉換爲字符串，並返回結果。
unshift()	向數組的開頭添加一個或更多元素，並返回新的長度。
valueOf()	返回數組對象的原始值。

Date（日期）對象

Date 對象用於處理日期與時間，創建 Date 對象： new Date().

以下四種方法同樣可以創建 Date 對象：

var d =new Date();
var d =new Date(milliseconds);
var d =new Date(dateString);
var d =new Date(year, month, day, hours, minutes, seconds, milliseconds);

對象方法


getDate()	從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay()	從 Date 對象返回一週中的某一天 (0 ~ 6)。
getFullYear()	從 Date 對象以四位數字返回年份。
getHours()	返回 Date 對象的小時 (0 ~ 23)。
getMilliseconds()	返回 Date 對象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 對象的分鐘 (0 ~ 59)。
getMonth()	從 Date 對象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 對象的秒數 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒數。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒數。
setDate()	設置 Date 對象中月的某一天 (1 ~ 31)。
setFullYear()	設置 Date 對象中的年份（四位數字）。
setHours()	設置 Date 對象中的小時 (0 ~ 23)。
setMilliseconds()	設置 Date 對象中的毫秒 (0 ~ 999)。
setMinutes()	設置 Date 對象中的分鐘 (0 ~ 59)。
setMonth()	設置 Date 對象中月份 (0 ~ 11)。
setSeconds()	設置 Date 對象中的秒鐘 (0 ~ 59)。
setTime()	setTime() 方法以毫秒設置 Date 對象。
toDateString()	把 Date 對象的日期部分轉換爲字符串。
toGMTString()	已廢棄。請使用 toUTCString() 方法代替。
toISOString()	使用 ISO 標準返回字符串的日期格式。
toJSON()	以 JSON 數據格式返回日期字符串。
toLocaleDateString()	根據本地時間格式，把 Date 對象的日期部分轉換爲字符串。
toLocaleTimeString()	根據本地時間格式，把 Date 對象的時間部分轉換爲字符串。
toLocaleString()	據本地時間格式，把 Date 對象轉換爲字符串。
toString()	把 Date 對象轉換爲字符串。
toTimeString()	把 Date 對象的時間部分轉換爲字符串。
toUTCString()	根據世界時，把 Date 對象轉換爲字符串。
UTC()	根據世界時返回 1970 年 1 月 1 日到指定日期的毫秒數。
valueOf()	返回 Date 對象的原始值。

Math 對象

Math 對象用於執行數學任務。

Math 對象並不像 Date 和 String 那樣是對象的類，因此沒有構造函數 Math()。

方法

方法	描述
abs(x)	返回 x 的絕對值。
acos(x)	返回 x 的反餘弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介於 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。
atan2(y,x)	返回從 x 軸到點 (x,y) 的角度（介於 -PI/2 與 PI/2 弧度之間）。
ceil(x)	對數進行上舍入。
cos(x)	返回數的餘弦。
exp(x)	返回 Ex 的指數。
floor(x)	對 x 進行下舍入。
log(x)	返回數的自然對數（底爲e）。
max(x,y,z,…,n)	返回 x,y,z,…,n 中的最高值。
min(x,y,z,…,n)	返回 x,y,z,…,n中的最低值。
pow(x,y)	返回 x 的 y 次冪。
random()	返回 0 ~ 1 之間的隨機數。
round(x)	把數四捨五入爲最接近的整數。
sin(x)	返回數的正弦。
sqrt(x)	返回數的平方根。
tan(x)	返回角的正切。

RegExp 對象

正則表達式是描述字符模式的對象。

正則表達式用於對字符串模式匹配及檢索替換，是對字符串執行模式匹配的強大工具。

var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
或者更簡單的方式:
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;

修飾符

修飾符用於執行區分大小寫和全局匹配:

修飾符	描述
i	執行對大小寫不敏感的匹配。
g	執行全局匹配（查找所有匹配而非在找到第一個匹配後停止）。
m	執行多行匹配。

JSON對象

var str1 = '{"name": "linwow", "age": 20}';
var obj1 = {"name": "linwow", "age": 20};
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

前端 之 JavaScript基礎

文章目錄

JavaScript 簡介

Javascript的引入方式

Javascript的語法

註釋

變量

常量

輸出數據

數據類型

字符串

數值

布爾

數組

Undefined 和 Null

函數

函數定義：

函數的參數

函數作用域

流程控制

if-else

if-else if-else

switch

for

while

三元運算

對象

創建對象

屬性

Array 對象

對象方法

Date（日期） 對象

對象方法

Math 對象

方法

RegExp 對象

修飾符

JSON對象

前端之 JavaScript基礎

Date（日期）對象