當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端之javaScript

發(fā)布時間：2025/6/15 HTML 16 豆豆

生活随笔收集整理的這篇文章主要介紹了前端之javaScript 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

　　　　　　　　　　　　javaScript概述

javaScript的歷史

1992年Nombas開發(fā)出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中)，后將其改名ScriptEase(客戶端執(zhí)行的語言)。
Netscape(網(wǎng)景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0產(chǎn)品中開發(fā)出一套livescript的腳本語言。Sun和Netscape共同完成，后改名叫JavaScript。
微軟隨后模仿在其IE3.0的產(chǎn)品中搭載了一個JavaScript的克隆版叫Jscript。
為了統(tǒng)一三家,ECMA(歐洲計算機制造協(xié)會)定義了ECMA-262規(guī)范.國際標準化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為標準（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現(xiàn)的基礎。
ECMA-262 是 JavaScript 標準的官方名稱。

　　　　　　　　　　　　ECMAScript

年份	名稱	描述
1997	ECMAScript 1	第一個版本
1998	ECMAScript 2	版本變更
1999	ECMAScript 3	添加正則表達式添加try/catch
?	ECMAScript 4	沒有發(fā)布
2009	ECMAScript 5	添加"strict mode"嚴格模式添加JSON支持
2011	ECMAScript 5.1	版本變更
2015	ECMAScript 6	添加類和模塊
2016	ECMAScript 7	增加指數(shù)運算符（**）增加Array.prototype.includes

注：ES6就是指ECMAScript 6。

盡管 ECMAScript 是一個重要的標準，但它并不是 JavaScript 唯一的部分，當然，也不是唯一被標準化的部分。實際上，一個完整的 JavaScript 實現(xiàn)是由以下 3 個不同部分組成的：

核心（ECMAScript）?
文檔對象模型（DOM） Document object model (整合js，css，html)
瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）

簡單地說，ECMAScript 描述了JavaScript語言本身的相關內(nèi)容。

JavaScript 是腳本語言
JavaScript 是一種輕量級的編程語言。

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。

JavaScript 很容易學習。

JavaScript引入方式

Script標簽內(nèi)寫代碼

引入額外的JS文件

JavaScript語言規(guī)范

注釋（注釋是代碼之母）

// 這是單行注釋/* 這是
多行注釋 */

結(jié)束符

JavaScript中的語句要以分號（;）為結(jié)束符。

JavaScript語言基礎

變量聲明

JavaScript的變量名可以使用_，數(shù)字，字母，$組成，不能以數(shù)字開頭。

聲明變量使用?var 變量名;?的格式來進行聲明

var(關鍵字) name(變量名) = "Alex"(值); var age = 18;

注意：

變量名是區(qū)分大小寫的。

推薦使用駝峰式命名規(guī)則。

保留字不能用做變量名。

abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile

JavaScript數(shù)據(jù)類型

JavaScript擁有動態(tài)類型

var x; // 此時x是undefined(表示變量未賦值) var x = 1; // 此時x是數(shù)字 var x = "Alex" // 此時x是字符串

數(shù)字類型

JavaScript不區(qū)分整型和浮點型，就只有一種數(shù)字類型。

var a = 12.34; var b = 20; var c = 123e5; // 12300000 var d = 123e-5; // 0.00123

還有一種NaN，表示不是一個數(shù)字（Not a Number）。

常用方法：

parseInt("123") // 返回123 parseInt("ABC") // 返回NaN,NaN屬性是代表非數(shù)字值的特殊值。該屬性用于指示某個值不是數(shù)字。 parseFloat("123.456") // 返回123.456

字符串

var a = "Hello" var b = "world; var c = a + b; //字符串可相加，不可乘 console.log(c); // 得到Helloworld console.log等同于 python中的print

字符串常用方法：

方法	說明
.length	返回長度
.trim()	移除空白
.trimLeft()	移除左邊的空白
.trimRight()	移除右邊的空白
.charAt(n)	返回第n個字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根據(jù)索引獲取子序列
.slice(start, end)	切片
.toLowerCase()	小寫
.toUpperCase()	大寫
.split(delimiter, limit)	分割

拼接字符串一般使用“+”

slice和substring的區(qū)別

string.slice(start, stop)和string.substring(start, stop)：兩者的相同點：如果start等于end，返回空字符串如果stop參數(shù)省略，則取到字符串末如果某個參數(shù)超過string的長度，這個參數(shù)會被替換為string的長度substirng()的特點：如果 start > stop ，start和stop將被交換如果參數(shù)是負數(shù)或者不是數(shù)字，將會被0替換silce()的特點：如果 start > stop 不會交換兩者如果start小于0，則切割從字符串末尾往前數(shù)的第abs(start)個的字符開始(包括該位置的字符) 如果stop小于0，則切割在從字符串末尾往前數(shù)的第abs(stop)個字符結(jié)束(不包含該位置字符)

布爾類型

區(qū)別于Python，true和false都是小寫。

var a = true; var b = false;

""(空字符串)、0、null、undefined、NaN都是false。

數(shù)組（Array）

類似于Python中的列表。

var a = [123, "ABC"]; console.log(a[1]); // 輸出"ABC"

?常用方法：

方法	說明
.length	數(shù)組的大小
.push(ele)	尾部追加元素
.pop()	獲取尾部的元素
.unshift(ele)	頭部插入元素
.shift()	頭部移除元素
.slice(start, end)	切片
.reverse()	反轉(zhuǎn)
.join(seq)	將數(shù)組元素連接成字符串
.concat(val, ...)	連接數(shù)組
.sort()	排序

注意：

/*如果調(diào)用sort方法時沒有傳入?yún)?shù)，將按字母順序?qū)?shù)組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現(xiàn)這一點，首先應把數(shù)組的元素都轉(zhuǎn)換成字符串（如有必要），以便進行比較。如果想按照其他標準進行排序，就需要提供比較函數(shù)，該函數(shù)要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數(shù)字。比較函數(shù)應該具有兩個參數(shù) a 和 b，其返回值如下：若 a 小于 b，在排序后的數(shù)組中 a 應該出現(xiàn)在 b 之前，則返回一個小于 0 的值。若 a 等于 b，則返回 0。若 a 大于 b，則返回一個大于 0 的值。 */// 根據(jù)上面的規(guī)則自行實現(xiàn)一個排序函數(shù)： function sortNumber(a,b) {return a - b }// 調(diào)用sort方法時將定義好的排序函數(shù)傳入即可。 stringObj.sort(sortNumber) 關于sort的問題

null和undefined

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

null表示變量的值是空，undefined則表示只聲明了變量，但還沒有賦值。

類型查詢

typeof(查詢類型關鍵字) "abc" // "string" typeof null // "object" 表示一個對象的意思 typeof true // "boolean" typeof 123 // "number"

typeof是一個一元運算符（就像++，--，！，- 等一元運算符），不是一個函數(shù)，也不是一個語句。

對變量或值調(diào)用 typeof 運算符將返回下列值之一：

undefined - 如果變量是 Undefined 類型的
boolean - 如果變量是 Boolean 類型的
number - 如果變量是 Number 類型的
string - 如果變量是 String 類型的
object - 如果變量是一種引用類型或 Null 類型的

運算符

算數(shù)運算符

+ - * / %(取余) ++(自增) --(自減)

比較運算符

> >= < <= != == ===(強等于) !==(強不等于)

注意：

1 == “1” // true 這里只判斷值，不判斷數(shù)據(jù)類型 1 === "1" // false 同時判斷值和數(shù)據(jù)類型

邏輯運算符

&&(與) ||(或) !(非)

賦值運算符

= += -= *= /=

流程控制

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(); //getDay獲取當前時間 switch (day) { //switch拿變量的值去比較case 0:console.log("Sunday"); //sunday周日break;case 1:console.log("Monday"); //monday周一break; default: //上面的都不滿足就執(zhí)行這里console.log("...") }

switch中的case子句通常都會加break語句，否則程序會繼續(xù)執(zhí)行后續(xù)case中的語句。

for

//for循環(huán)的固定格式
for (var i=0;i<10;i++) {console.log(i); }

while

//while循環(huán)的固定格式
var i = 0; while (i < 10) {console.log(i);i++; }

三元運算

var a = 1; var b = 2; var c = a > b ? a : b

c = a if a>b else b //python中的三元運算

函數(shù)

函數(shù)定義

JavaScript中的函數(shù)和Python中的非常類似，只是定義方式有點區(qū)別。

// 普通函數(shù)定義 function(關鍵字) f1() { console.log("Hello world!"); }// 帶參數(shù)的函數(shù) function f2(a, b) {console.log(arguments); // 內(nèi)置的arguments對象console.log(arguments.length);console.log(a, b); }// 帶返回值的函數(shù) function sum(a, b){return a + b; } sum(1, 2); // 調(diào)用函數(shù)// 匿名函數(shù)方式 var sum = function(a, b){return a + b; } sum(1, 2);// 立即執(zhí)行函數(shù) (function(a, b){return a + b; })(1, 2);

arguments(參數(shù))

function add(a,b){console.log(a+b);console.log(arguments.length) }add(1,2)

輸出：

3 2 //arguments具有可以查看參數(shù)數(shù)量在內(nèi)的功能

函數(shù)的全局變量和局部變量

局部變量：

在JavaScript函數(shù)內(nèi)部聲明的變量（使用 var）是局部變量，所以只能在函數(shù)內(nèi)部訪問它（該變量的作用域是函數(shù)內(nèi)部）。只要函數(shù)運行完畢，本地變量就會被刪除。

全局變量：

在函數(shù)外聲明的變量是全局變量，網(wǎng)頁上的所有腳本和函數(shù)都能訪問它。

變量生存周期：

JavaScript變量的生命期從它們被聲明的時間開始。

局部變量會在函數(shù)運行以后被刪除。

全局變量會在頁面關閉后被刪除。

作用域

首先在函數(shù)內(nèi)部查找變量，找不到則到外層函數(shù)查找，逐步找到最外層。

幾個例子：

var city = "BeiJing"; //定義一個全局變量 function f() {var city = "ShangHai"; //局部變量function inner(){var city = "ShenZhen";console.log(city);}inner(); }f(); //打印結(jié)果是：'shenzhen'

var city = "BeiJing"; function Bar() {console.log(city); } function f() {var city = "ShangHai";return Bar; } var ret = f(); ret(); // 打印結(jié)果是:'BeiJing'

3.閉包

var city = "BeiJing"; function f(){var city = "ShangHai";function inner(){console.log(city);}return inner; } var ret = f(); ret(); //打印結(jié)果是：shanghai

詞法分析

JavaScript中在調(diào)用函數(shù)的那一瞬間，會先進行詞法分析。

詞法分析的過程：

當函數(shù)調(diào)用的前一瞬間，會先形成一個激活對象：Avtive Object（AO），并會分析以下3個方面：

1:函數(shù)參數(shù)，如果有，則將此參數(shù)賦值給AO，且值為undefined。如果沒有，則不做任何操作。
2:函數(shù)局部變量，如果AO上有同名的值，則不做任何操作。如果沒有，則將此變量賦值給AO，并且值為undefined。
3:函數(shù)聲明，如果AO上有，則會將AO上的對象覆蓋。如果沒有，則不做任何操作。

函數(shù)內(nèi)部無論是使用參數(shù)還是使用局部變量都到AO上找。

看兩個例子：

var age = 18; function foo(){console.log(age);var age = 22;console.log(age); } foo(); // 問：執(zhí)行foo()之后的結(jié)果是？

//結(jié)果為undefine;22

第二題：

詞法分析過程： 1、分析參數(shù)，有一個參數(shù)，形成一個 AO.age=undefine; 2、分析變量聲明，有一個 var age, 發(fā)現(xiàn) AO 上面已經(jīng)有一個 AO.age，因此不做任何處理 3、分析函數(shù)聲明，有一個 function age(){...} 聲明，則把原有的 age 覆蓋成 AO.age=function(){...};最終，AO上的屬性只有一個age，并且值為一個函數(shù)聲明執(zhí)行過程：注意：執(zhí)行過程中所有的值都是從AO對象上去尋找1、執(zhí)行第一個 console.log(age) 時，此時的 AO.age 是一個函數(shù)，所以第一個輸出的一個函數(shù) 2、這句 var age=22; 是對 AO.age 的屬性賦值，此時AO.age=22 ，所以在第二個輸出的是 2 3、同理第三個輸出的還是22, 因為中間再沒有改變age值的語句了答案推理

內(nèi)置對象和方法

JavaScript中的所有事物都是對象：字符串、數(shù)字、數(shù)組、日期，等等。在JavaScript中，對象是擁有屬性和方法的數(shù)據(jù)。

在基本數(shù)據(jù)類型的時候已經(jīng)知道了，JavaScript中的Number對象、String對象、Array對象等。

注意var s1 = "abc"和var s2 = new String("abc")的區(qū)別：typeof s1 --> string而 typeof s2 --> Object

自定義對象

類似于（某方面類似）Python中的字典數(shù)據(jù)類型

var a = {"name": "Alex", "age": 18}; console.log(a.name); console.log(a["age"]);

遍歷對象中的內(nèi)容：

var a = {"name": "Alex", "age": 18}; for (var i in a){console.log(i, a[i]); }

創(chuàng)建對象：

var person=new Object(); // 創(chuàng)建一個person對象 person.name="Alex"; // person對象的name屬性 person.age=18; // person對象的age屬性

?擴展：

// 父類構(gòu)造函數(shù) var Car = function (loc) {this.loc = loc; };// 父類方法 Car.prototype.move = function () {this.loc ++; };// 子類構(gòu)造函數(shù) var Van = function (loc) {Car.call(this, loc); };// 繼承父類的方法 Van.prototype = Object.create(Car.prototype); // 修復 constructor Van.prototype.constructor = Van; // 擴展方法 Van.prototype.grab = function () {/* ... */ }; JavaSceipt面向?qū)ο笾^承

Date對象 ? (日期)

創(chuàng)建Date對象 ? ??

//方法1：不指定參數(shù) var d1 = new Date(); console.log(d1.toLocaleString()); //toLocaleString用于以字符串的形式返回當前Date對象(本地時間) //方法2：參數(shù)為日期字符串 var d2 = new Date("2004/3/20 11:12"); console.log(d2.toLocaleString()); var d3 = new Date("04/03/20 11:12"); console.log(d3.toLocaleString()); //方法3：參數(shù)為毫秒數(shù) var d3 = new Date(5000); //這里的5000參數(shù)表示從1970年1月1日00：00開始計算 console.log(d3.toLocaleString()); console.log(d3.toUTCString()); //toUTCString返回的是世界時間//方法4：參數(shù)為年月日小時分鐘秒毫秒 var d4 = new Date(2004,2,20,11,12,0,300); console.log(d4.toLocaleString()); //毫秒并不直接顯示

Date對象的方法：

var d = new Date(); //getDate() 獲取日 //getDay () 獲取星期 //getMonth () 獲取月（0-11） //getFullYear () 獲取完整年份 //getYear () 獲取年 //getHours () 獲取小時 //getMinutes () 獲取分鐘 //getSeconds () 獲取秒 //getMilliseconds () 獲取毫秒 //getTime () 返回累計毫秒數(shù)(從1970/1/1午夜)

JSON對象

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

RegExp對象

//RegExp對象//創(chuàng)建正則對象方式1 // 參數(shù)1 正則表達式(不能有空格) // 參數(shù)2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一個匹配后停止)和i(忽略大小寫)// 用戶名只能是英文字母、數(shù)字和_，并且首字母必須是英文字母。長度最短不能少于6位最長不能超過12位。// 創(chuàng)建RegExp對象方式（逗號后面不要加空格） var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");// 匹配響應的字符串 var s1 = "bc123";//RegExp對象的test方法，測試一個字符串是否符合對應的正則規(guī)則，返回值是true或false。 reg1.test(s1); // true// 創(chuàng)建方式2 // /填寫正則表達式/匹配模式（逗號后面不要加空格） var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;reg2.test(s1); // true// String對象與正則結(jié)合的4個方法 var s2 = "hello world";s2.match(/o/g); // ["o", "o"] 查找字符串中符合正則的內(nèi)容 s2.search(/h/g); // 0 查找字符串中符合正則表達式的內(nèi)容位置 s2.split(/o/g); // ["hell", " w", "rld"] 按照正則表達式對字符串進行切割 s2.replace(/o/g, "s"); // "hells wsrld" 對字符串按照正則進行替換// 關于匹配模式：g和i的簡單示例 var s1 = "name:Alex age:18";s1.replace(/a/, "哈哈哈"); // "n哈哈哈me:Alex age:18" s1.replace(/a/g, "哈哈哈"); // "n哈哈哈me:Alex 哈哈哈ge:18" 全局匹配 s1.replace(/a/gi, "哈哈哈"); // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18" 不區(qū)分大小寫// 注意事項1： // 如果regExpObject帶有全局標志g，test()函數(shù)不是從字符串的開頭開始查找，而是從屬性regExpObject.lastIndex所指定的索引處開始查找。 // 該屬性值默認為0，所以第一次仍然是從字符串的開頭查找。 // 當找到一個匹配時，test()函數(shù)會將regExpObject.lastIndex的值改為字符串中本次匹配內(nèi)容的最后一個字符的下一個索引位置。 // 當再次執(zhí)行test()函數(shù)時，將會從該索引位置處開始查找，從而找到下一個匹配。 // 因此，當我們使用test()函數(shù)執(zhí)行了一次匹配之后，如果想要重新使用test()函數(shù)從頭開始查找，則需要手動將regExpObject.lastIndex的值重置為 0。 // 如果test()函數(shù)再也找不到可以匹配的文本時，該函數(shù)會自動把regExpObject.lastIndex屬性重置為 0。var reg3 = /foo/g; // 此時 regex.lastIndex=0 reg3.test('foo'); // 返回true // 此時 regex.lastIndex=3 reg3.test('foo'); // 返回false // 所以我們在使用test()方法校驗一個字符串是否完全匹配時，不推薦添加全局匹配模式g。// 注意事項2(說出來你可能不信系列)： // 當我們不加參數(shù)調(diào)用RegExpObj.test()方法時, 相當于執(zhí)行RegExpObj.test("undefined"), 并且/undefined/.test()默認返回true。 var reg4 = /^undefined$/; reg4.test(); // 返回true reg4.test(undefined); // 返回true reg4.test("undefined"); // 返回true RegExp表達式

Math對象

abs(x) 返回數(shù)的絕對值。 //例如-5返回5 exp(x) 返回 e 的指數(shù)。 floor(x) 對數(shù)進行下舍入。 /例如3.5返回3 log(x) 返回數(shù)的自然對數(shù)（底為e）。 max(x,y) 返回 x 和 y 中的最高值。 min(x,y) 返回 x 和 y 中的最低值。 pow(x,y) 返回 x 的 y 次冪。 random() 返回 0 ~ 1 之間的隨機數(shù)。 round(x) 把數(shù)四舍五入為最接近的整數(shù)。 sin(x) 返回數(shù)的正弦。 sqrt(x) 返回數(shù)的平方根。 tan(x) 返回角的正切。 math對象

轉(zhuǎn)載于:https://www.cnblogs.com/ddjl/p/8550933.html

總結(jié)

以上是生活随笔為你收集整理的前端之javaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

JavaScript

上一篇：【转】C 编译器优化过程中的 Bug
下一篇： Docker 学习资源整理