WEB前端(3)—— 初識JavaScript-有解無憂

什么是JavaScript:

JavaScript的特點：

JavaScript的關鍵字：

JavaScript的變數：

JavaScript的資料型別：

型別轉換：

JavaScript的運算子：

分支回圈：

if陳述句：

switch選擇陳述句：

for回圈：

for in 回圈：

陣列：

陣列的定義：

遍歷陣列：

洗掉陣列：

插入元素：

合并元素：

陣列轉字串：

陣列元素倒序：

物件：

物件的屬性：

函式：

函式的宣告：

函式的呼叫：

什么是JavaScript:

JavaScrpt,是一種直譯式腳本語言，是一種動態型別，弱型別，基于原型的語言，內置支持型別，它的解釋器被稱為JavaScript引擎，是瀏覽器的一部分，廣泛用于客戶端的腳本語言中，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用的，用于為HTML網頁增加動態功能，目前JavaScript 被廣泛用于Web應用開發，常用于為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果，

JavaScript的特點：

JavaScript 具有以下四個方面的特點：

*是一種解釋性腳本語言（代碼不進行預編譯），

*主要用于向HTML（標準通用標記語言下的一個應用）頁面添加互動行為，

*可以直接嵌入HTML頁面，但寫成單獨的JS檔案有利于結構和行為的分離，

*跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows,Linux,Max,Android,iOS等），

JavaScript的關鍵字：

break	else	new	var
case	finally	return	void
catch	for	switch	while
continue	function	this	with
default	if	throw
delete	in	try
do	instanceof	typeof

JavaScript的變數：

在JavaScript中，變數是存盤資訊的容器，變數存在兩種型別的值，即原始值和參考值，

*原始值：存盤在堆疊中的簡單資料段，也就是說，它們的值直接存盤在變數訪問的位置，

*參考值：存盤在堆中的物件，也就是說，存盤在變數處的值是一個指標指向存盤物件的記憶體處，

JavaScript的資料型別：

在JavaScript中，資料型別表示資料的型別，JavaScript語言的每一個值都屬于某一種資料型別，JavaScript的資料主要分為以下兩種，

*值型別（原始值）：字串（String),數字（Number），布爾（Boolean），對空（Null），未定義（Undefined），Symbol（ES6 引入了一種新的原始資料型別，表示獨一無二的值），

*參考資料型別（參考值）：物件（Object），陣列（Array），函式（Function），

型別轉換：

在JavaScript中，如果一個變數的型別不是想要的，那么可以通過型別轉換實作目的，型別轉換常用的有以下五種，

*Number（變數）：將變數轉化為數字型別，

*String（變數）：將變數轉化為字串型別，

*Boolean（變數）：將變數轉化為布林值型別，Boolean會將非零的數字轉化為true，將零轉為false，

*parseFloat（變數）：將變數轉化為浮點型別，

*parseInt（變數）：將變數轉化為整數型別，

代碼演示和效果圖如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
</head>
<body>
    <script>
        var a = '123';
        var b = a+6;
        document.write('沒用Number轉換前：'+b);
        document.write('<br/>');
        var c = Number(a) + 6;
        document.write('用Number轉換后：'+c);
        document.write('<hr/>');
        var x = 33;
        var y = x + 66;
        document.write('沒用String轉換前：'+y);
        document.write('<br/>');
        var m = String(x) + 66;
        document.write('用String轉換后：'+m);
        document.write('<hr/>');
        var t = 13;
        var f = 0;
        var b1 = Boolean(t);
        var b2 = Boolean(f);
        document.write('用Boolean轉換后：t = '+ b1 +',f = '+b2);
    </script>
</body>
</html>

JavaScript的運算子：

賦值運算子：

var s = "hello";    //將hello這個字串賦值給變數s

算數運算子：

var a = 3 + 2;    //加法
var b = 3 - 2;    //減法
var c = 3 * 2;    //乘法
var d = 3 / 2;    //除法
var e = 3 * 2;    //取余

比較運算子：

var a = 3;
var b = 2;
var c = a > b;     //大于，結果為true
var d = a < b;     //小于，結果為false
var e = a >= b;    //大于或等于，結果為true
var f = a <= b;    //小于或等于，結果為false
var g = a != b;    //不等于，結果為true
var aa = '3';      //aa被賦值為字串型別
var bb = 3;        //bb被賦值為數字型別
var cc = aa == bb; //回傳為true，兩個等號表示只要值相同就可以相等，回傳true
var dd = aa === bb;//回傳為false，3個等號表示除值外必須型別也相同才能回傳true

邏輯運算子：

var a = 3,b = 9,c = 7,d = 5;
//回傳為false，&&表示前后兩個運算式必須全為true，整個運算式才能回傳true
var as = (a<b)&&(c<d);
//回傳為true，||表示前后兩個運算式只要有一個為true，整個運算式就能回傳true
var bs = (a<b)||(c<d);
//回傳為true，a>b回傳為false，！表示取反，因此回傳true
var cs = !(a>b);

分支回圈：

if陳述句：

if條件陳述句表示假如的意思，在程式運行中提供判斷的功能，

var a = 9,b = 17;
if(a>7){
    document.write('a>b');
}else if(a==b){
    document.write('a=b');
}else{
    document.write('a<b');
}

switch選擇陳述句：

switch選擇陳述句表示多條件選擇，

var day = new Date().getDay();
    switch(day){
    case 0;
      x = "今天是周日";
      break;
    case 1;
      x = "今天是周一";
      break;
    case 2;
      x = "今天是周二";
      break;
    case 3;
      x = "今天是周三";
      break;
    case 4;
      x = "今天是周四";
      break;
    case 5;
      x = "今天是周五";
      break;
    case 6;
      x = "今天是周六";
      break;
    }
    document.write(x);

for回圈：

語法格式：

for（陳述句1；陳述句2；陳述句3）{

被執行的代碼塊

}

*continue：越過本次回圈，繼續下一次回圈，

*break：跳過整個回圈，回圈結束，

for in 回圈：

var person = {id:1,name:"張三",age:20};    //定義一個物件
for (key in person){
    document.write(key+":"+person[key]);
    document.write('<br/>');
}

陣列：

陣列物件是使用單獨的變數名存盤一系列的值，可理解為一個容器裝了一堆元素，JavaScript中陣列包含的屬性和方法如下表所示，

方法	描述
concat()	連接兩個或更多的陣列，并回傳結果
join()	把陣列的所有元素放入一個字串，元素通過指定的分隔符進行分隔
pop()	洗掉并回傳陣列的最后一個元素
posh()	向陣列的末尾添加一個或者更多元素，并回傳新的長度
reverse()	顛倒陣列中元素的順序
shift()	洗掉并回傳陣列的第一個元素
slice()	從某個已有的陣列回傳選定的元素
sort()	對陣列的元素進行排序
splice()	洗掉元素，并向陣列添加元素
toSoruce()	回傳該物件的源代碼

陣列的定義：

方法一：使用new關鍵字創建一個Array物件，可直接在記憶體中創建一個陣列空間，然后向陣列中添加元素，

var mycar = new Array();
//也可以使用一個整數自變數控制陣列的容量
var mycars = new Array(3);

方法二：使用new關鍵字創建一個Array物件的同時為陣列賦予n個初始值，

var mycar = new Array("Saab","Volvo","BMW");

方法三：不用new，直接用[]宣告一個陣列，同時可以直接賦予初始值，是最簡便的一種宣告方式，

var mycars = ["Saab","Volvo","BMW"];

遍歷陣列：

方法一：先宣告陣列的長度，然后使用for回圈遍歷整個陣列，

var mycars = ["Saab","Volvo","BMW"];
var len = mycars.length;    //獲取陣列長度
for(i=0;i<len;i++){
    document.write(mycars[i]);
    document.write('<br/>');
}

方法二：使用for...in遍歷，無須獲得陣列長度，

var mycars = ["Saab","Volvo","BMW"];
for(key in mycars){
    document.write(key+":"mycars[key]);
    document.write('<br/>');
}

洗掉陣列：

pop方法：從尾部洗掉，洗掉后元素從陣列上剝離并回傳，

var mycars = ["Saab","Volvo","BMW"];
var car = mycars.pop();
document.write(mycars);
document.write('<br/>');
document.write(car);

shift方法：從頭部洗掉元素，從頭部剝離并回傳，

var  mycars = ["Saab","Volvo","BMW"];
var car = mycars.shift();        //從頭部洗掉
document.write(car);
document.write('<br/>');
document.write(car);

插入元素：

unshift方法：從頭部插入，語法為陣列.unshift（元素1），

var mycars = ["Saab","Volvo","BMW"];
//從陣列頭部插入一個新的元素，回傳新的陣列長度
var newlen = mycars.unshift("奔馳");
document.write(newlen);
document.write('<br/>');
document.write(mycars);

splice方法：從指定位置插入指定個數的元素，

var mycars = ["Saab","Volvo","BMW"];
mycars.splice(1,0,"寶馬","奇瑞","奔馳");//從索引1位置洗掉0個并插入3個元素
document.write(mycars);

合并元素：

JavaScript 為陣列提供 concat 方法將多個陣列連接成一個陣列，

var arr = [1,3,5];
var arr1 = [2,4,6];
var arr2 = [7,8,9];
var newArr = arr.concat(arr1,arr2);//合并3個陣列
document.write(newArr);            //輸出

陣列轉字串：

在JavaScript 中，為陣列 join 方法將陣列的元素合并成一個用指定分割符合并器來的字串，

var mycars = ['寶馬','奔馳','奇瑞','標致','捷達'];
var cars = mycars.join("|");
document.write(cars);

陣列元素倒序：

在JavaScript 中，呼叫陣列的 reverse 方法可以將陣列中的元素倒序排列，

var mycars = ['寶馬','奔馳','奇瑞','標致','捷達'];
mycars.reverse();                                //陣列倒序
document.write(mycars);

物件：

Object（物件）是一個以鍵值對形式存盤屬性的集合，每個屬性有特定的名稱，以及與名稱相對應的值，

物件的宣告：

方法一：new Object(): 宣告一個類，然后使用new關鍵字創建一個擁有獨立記憶體區域和指向原型的指標的物件，

var User = function(id,name){
    this.id = id;
    this.name = name;
}
var user1 = new User(1,"張三");
document.write(user1.name);
document.write("<br/>");
var user2 = new User(2,"李四");
document.write(user2.name);

方法二：{}：物件直接申明法，利用現有值看，直接實體化一個物件，

var user1 = {id:1,name:"張三"};
var user2 = Object.ceate({id:2,name:"李四"});
document.write(user1.name);
document.write("<br/>");
document.write(user2.name);

物件的屬性：

添加屬性：為已存在的物件添加屬性，

var user = {};        //宣告一個物件
user.id = 1;          //為物件添加屬性
user["name"]="張三";  //既可以用點訪問屬性，也可以用字串作為鍵訪問屬性
user.age = 20;
user["career"] = "學生";
document.write(user.name);
document.write("<br/>");
document.write(user["age"]):

洗掉屬性：洗掉已有的屬性，

var user = {};        //宣告一個物件
user.id = 1;          //為物件添加屬性
user["name"]="張三";  //既可以用點訪問屬性，也可以用字串作為鍵訪問屬性
user.age = 20;
user["career"] = "學生";
delete user.name;    //洗掉物件的name屬性
document.write(user.name);
document.write("<br/>");
document.write(user["age"]):

檢測驗性：

var user = {};        //宣告一個物件
user.id = 1;          //為物件添加屬性
user["name"]="張三";  //既可以用點訪問屬性，也可以用字串作為鍵訪問屬性
user.age = 20;
user["career"] = "學生";
if('career' in user){
    alert("有career屬性");
}else{
    alert("無career屬性");
}

函式：

函式是一組延遲動作集的定義，可以通過事件觸發或者在其他腳本中進行呼叫，

function 函式名 (引數){
    函式體
    return 回傳值;
}

函式的宣告：

function fun1(){
    document.write("我是函式fun1");
    documten.write("<br/>");
    }
    fun1();
    
    var fun2 = function(){
        document.write("我是函式fun2");
        documten.write("<br/>");
    }
    fun2();

    var fun3 = function(){
        document.write("我是函式fun3");
    };

函式的呼叫：

//傳值呼叫
function fun1(str){
    str = "你好";
}
var a = "hello";
fun1(a);
document.write("傳值呼叫，a="+a);
document.write("<br/>");
//傳值呼叫
function fun2(person){
    person.name = "李四";
}
var b = {name:"張三");
fun2(b);
doucment.write("傳址呼叫,person.name="+b.name);

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/295201.html

標籤：其他

上一篇：淺學JavaScript08

下一篇：初學者這樣玩 TypeScript，遲早進大廠系列（第七期）