javascript
前端基础入门四(JavaScript基础)
為什么80%的碼農都做不了架構師?>>> ??
目標:
- 掌握編程的基本思維
- 掌握編程的基本語法
我們先來學習JavaScript基礎,后續會講解JavaScript高級。
自己是個做了幾年開發的老碼農,希望本文對你有用! 這里推薦一下我的前端學習交流圈:767273102 ,里面都是學習前端的,從最基礎的HTML+CSS+JS【炫酷特效,游戲,插件封裝,設計模式】到移動端HTML5的項目實戰的學習資料都有整理,送給每一位前端小伙伴。2019最新技術,與企業需求同步。好友都在里面學習交流,每天都會有大牛定時講解前端技術!
點擊:加入
重點內容
變量的聲明及使用 數據類型 類型轉換 運算符
JavaScript介紹
JavaScript是什么
JavaScript是一種運行在客戶端 的腳本語言
JavaScript的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶端的腳本語言,最早是在HTML(標準通用標記語言下的一個應用)網頁上使用,用來給HTML網頁增加動態功能。
JavaScript現在的意義(應用場景) JavaScript 發展到現在幾乎無所不能。
JavaScript和HTML、CSS的區別
JavaScript的組成
ECMAScript - JavaScript的核心 ECMA 歐洲計算機制造聯合會 網景:JavaScript 微軟:JScript 定義了JavaScript的語法規范? JavaScript的核心,描述了語言的基本語法和數據類型,ECMAScript是一套標準,定義了一種語言的標準與具體實現無關
BOM - 瀏覽器對象模型 一套操作瀏覽器功能的API 通過BOM可以操作瀏覽器窗口,比如:彈出框、控制瀏覽器跳轉、獲取分辨率等
DOM - 文檔對象模型 一套操作頁面元素的API DOM可以把HTML看做是文檔樹,通過DOM提供的API可以對樹上的節點進行操作
JavaScript的書寫位置 寫在行內
<input?type="button"?value="按鈕"?onclick="alert('Hello World')"?/>寫在script標簽中
<head><script>alert('Hello World!');</script> </head>寫在外部js文件中,在頁面引入
<script?src="main.js"></script>變量
- 什么是變量 變量是計算機內存中存儲數據的標識符,根據變量名稱可以獲取到內存中存儲的數據
- 為什么要使用變量 使用變量可以方便的獲取或者修改內存中的數據
如何使用變量
var聲明變量
var?age;變量的賦值
?var?age;age?=?18;同時聲明多個變量
var age, name, sex; age = 10; name = 'zs';同時聲明多個變量并賦值
var?age =?10, name =?'zs';變量在內存中的存儲
var?age =?18;變量的命名規則和規范
-
規則 - 必須遵守的,不遵守會報錯
- 由字母、數字、下劃線、$符號組成,不能以數字開頭
- 不能是關鍵字和保留字,例如:for、while。
- 區分大小寫
-
規范 - 建議遵守的,不遵守不會報錯
- 變量名必須有意義
- 遵守駝峰命名法。首字母小寫,后面單詞的首字母需要大寫。例如:userName、userPassword
數據類型
簡單數據類型
Number、String、Boolean、Undefined、Null
Number類型
-
數值字面量:數值的固定值的表示法 110 1024 60.5
-
進制
十進制
var num = 9;進行算數計算時,八進制和十六進制表示的數值最終都將被轉換成十進制數值。十六進制
var num = 0xA;數字序列范圍:0~9以及A~F八進制
var num1 = 07; // 對應十進制的7var num2 = 019; // 對應十進制的19var num3 = 08; // 對應十進制的8數字序列范圍:0~7如果字面值中的數值超出了范圍,那么前導零將被忽略,后面的數值將被當作十進制數值解析 -
浮點數
-
浮點數的精度問題
浮點數
var?n =?5e-324;?// 科學計數法 5乘以10的-324次方浮點數值的最高精度是 17 位小數,但在進行算術計算時其精確度遠遠不如整數 var result = 0.1 + 0.2; // 結果不是 0.3,而是:0.30000000000000004 console.log(0.07 * 100); 不要判斷兩個浮點數是否相等
-
-
數值范圍
最小值:Number.MIN_VALUE,這個值為: 5e-324 最大值:Number.MAX_VALUE,這個值為: 1.7976931348623157e+308 無窮大:Infinity 無窮小:-Infinity
-
數值判斷
-
NaN:not a number
- NaN 與任何值都不相等,包括他本身
-
isNaN: is not a number
-
String類型 字符串長度
length屬性用來獲取字符串的長度
var str = '程序猿 Hello World'; console.log(str.length);字符串拼接
字符串拼接使用 + 連接
console.log(11 + 11); console.log('hello' + ' world'); console.log('100' + '100'); console.log('11' + 11); console.log('male:' + true);Boolean類型
- Boolean字面量: true和false,區分大小寫
- 計算機內部存儲:true為1,false為0
Undefined和Null
復雜數據類型
Object
獲取變量的類型
typeof
var age = 18; console.log(typeof age); // 'number'字面量
在源代碼中一個固定值的表示法。
數值字面量:8, 9, 10
字符串字面量:'程序員', "大前端"
布爾字面量:true,false
注釋
單行注釋
用來描述下面一個或多行代碼的作用
// 這是一個變量 var name = 'hm';多行注釋 用來注釋多條代碼
/* var age = 18; var name = 'zs'; console.log(name, age); */數據類型轉換
如何使用谷歌瀏覽器,快速的查看數據類型?
字符串的顏色是黑色的,數值類型是藍色的,布爾類型也是藍色的,undefined和null是灰色的
轉換成字符串類型
-
toString()
var num = 5; console.log(num.toString()); -
String()
String()函數存在的意義:有些值沒有toString(),這個時候可以使用String()。比如:undefined和null -
拼接字符串方式 num + "",當 + 兩邊一個操作符是字符串類型,一個操作符是其它類型的時候,會先把其它類型轉換成字符串再進行字符串拼接,返回字符串
轉換成數值類型
- Number() Number()可以把任意值轉換成數值,如果要轉換的字符串中有一個不是數值的字符,返回NaN
- parseInt()
-
parseFloat() parseFloat()把字符串轉換成浮點數 parseFloat()和parseInt非常相似,不同之處在與
parseFloat會解析第一個. 遇到第二個.或者非數字結束 如果解析的內容里只有整數,解析成整數 -
+,-0等運算
轉換成布爾類型
- Boolean()
0 ''(空字符串) null undefined NaN 會轉換成false 其它都會轉換成true
操作符
運算符 operator
5 + 6
表達式 組成 操作數和操作符,會有一個結果
算術運算符
一元運算符
一元運算符:只有一個操作數的運算符
5 + 6 兩個操作數的運算符 二元運算符
++ 自身加1
-- 自身減1
- 前置++
后置++
var num1 = 5; num1 ++; var num2 = 6 console.log(num1 + num2 ++);總結
前置++:先加1,后參與運算
后置++:先參與運算,后加1
上面兩個理解后,下面兩個自通
前置-- :先減1,后參與運算
后置-- :先參與運算,后減1
邏輯運算符(布爾運算符)
&& 與 兩個操作數同時為true,結果為true,否則都是false || 或 兩個操作數有一個為true,結果為true,否則為false ! 非 取反
關系運算符(比較運算符)
< > >= <= == != === !==
==與===的區別:==只進行值得比較,===類型和值同時相等,則相等var result = '55' == 55; // true var result = '55' === 55; // false 值相等,類型不相等 var result = 55 === 55; // true賦值運算符
= += -= *= /= %=
例如: var num = 0; num += 5; //相當于 num = num + 5;運算符的優先級
優先級從高到底
1\. () 優先級最高 2\. 一元運算符 ++ -- ! 3\. 算數運算符 先* / % 后 + - 4\. 關系運算符 > >= < <= 5. 相等運算符 == != === !== 6. 邏輯運算符 先&& 后|| 7. 賦值運算符表達式和語句
表達式 一個表達式可以產生一個值,有可能是運算、函數調用、有可能是字面量。表達式可以放在任何需要值的地方 語句 語句可以理解為一個行為,循環語句和判斷語句就是典型的語句。一個程序有很多個語句組成,一般情況下;分割一個一個的語句
流程控制
程序的三種基本結構
順序結構
從上到下執行的代碼就是順序結構 程序默認就是由上到下順序執行的
分支結構
根據不同的情況,執行對應代碼
循環結構
循環結構:重復做一件事情
分支結構
if語句 語法結構
if (/* 條件表達式 */) {// 執行語句 }if (/* 條件表達式 */){// 成立執行語句 } else {// 否則執行語句 }if (/* 條件1 */){// 成立執行語句 } else if (/* 條件2 */){// 成立執行語句 } else if (/* 條件3 */){// 成立執行語句 } else {// 最后默認執行語句 }switch語句 語法格式:
switch (expression) {case 常量1:語句;break;case 常量2:語句;break;case 常量3:語句;break;…case 常量n:語句;break;default:語句;break; }break可以省略,如果省略,代碼會繼續執行下一個case switch 語句在比較值時使用的是全等操作符, 因此不會發生類型轉換(例如,字符串'10' 不等于數值 10)
布爾類型的隱式轉換
流程控制語句會把后面的值隱式轉換成布爾類型
轉換為true 非空字符串 非0數字 true 任何對象 轉換成false 空字符串 0 false null undefined// 結果是什么? var a = !!'123';循環結構
在javascript中,循環語句有三種,while、do..while、for循環。 while語句 基本語法:
// 當循環條件為true時,執行循環體, // 當循環條件為false時,結束循環。 while (循環條件) {//循環體 }代碼示例:
// 計算1-100之間所有數的和 // 初始化變量 var i = 1; var sum = 0; // 判斷條件 while (i <= 100) {// 循環體sum += i;// 自增i++; } console.log(sum);do...while語句 do..while循環和while循環非常像,二者經常可以相互替代,但是do..while的特點是不管條件成不成立,都會執行一次。 基礎語法:
do {// 循環體; } while (循環條件);代碼示例:
// 初始化變量 var i = 1; var sum = 0; do {sum += i;//循環體i++;//自增 } while (i <= 100);//循環條件for語句 while和do...while一般用來解決無法確認次數的循環。for循環一般在循環次數確定的時候比較方便 for循環語法:
// for循環的表達式之間用的是;號分隔的,千萬不要寫成, for (初始化表達式1; 判斷表達式2; 自增表達式3) {// 循環體4 }continue和break break:立即跳出整個循環,即循環結束,開始執行循環后面的內容(直接跳到大括號)
continue:立即跳出當前循環,繼續下一次循環(跳到i++的地方)
調試
-
過去調試JavaScript的方式
- alert()
- console.log()
-
斷點調試
斷點調試是指自己在程序的某一行設置一個斷點,調試時,程序運行到這一行就會停住,然后你可以一步一步往下調試,調試過程中可以看各個變量當前的值,出錯的話,調試到出錯的代碼行即顯示錯誤,停下。
-
調試步驟
瀏覽器中按F12-->sources-->找到需要調試的文件-->在程序的某一行設置斷點
-
調試中的相關操作
Watch: 監視,通過watch可以監視變量的值的變化,非常的常用。 F10: 程序單步執行,讓程序一行一行的執行,這個時候,觀察watch中變量的值的變化。 F8:跳到下一個斷點處,如果后面沒有斷點了,則程序執行結束。
tips: 監視變量,不要監視表達式,因為監視了表達式,那么這個表達式也會執行。
數組
為什么要學習數組 之前學習的數據類型,只能存儲一個值(比如:Number/String。我們想存儲班級中所有學生的姓名,此時該如何存儲?
數組的概念 所謂數組,就是將多個元素(通常是同一類型)按一定順序排列放到一個集合中,那么這個集合我們就稱之為數組。
數組的定義 數組是一個有序的列表,可以在數組中存放任意的數據,并且數組的長度可以動態的調整。
通過數組字面量創建數組
// 創建一個空數組 var arr1 = []; // 創建一個包含3個數值的數組,多個數組項以逗號隔開 var arr2 = [1, 3, 4]; // 創建一個包含2個字符串的數組 var arr3 = ['a', 'c']; // 可以通過數組的length屬性獲取數組的長度 console.log(arr3.length); // 可以設置length屬性改變數組中元素的個數 arr3.length = 0;獲取數組元素 數組的取值
// 格式:數組名[下標] 下標又稱索引 // 功能:獲取數組對應下標的那個值,如果下標不存在,則返回undefined。 var arr = ['red',, 'green', 'blue']; arr[0]; // red arr[2]; // blue arr[3]; // 這個數組的最大下標為2,因此返回undefined遍歷數組 遍歷:遍及所有,對數組的每一個元素都訪問一次就叫遍歷。 數組遍歷的基本語法:
for(var i = 0; i < arr.length; i++) {// 數組遍歷的固定結構 }數組中新增元素 數組的賦值
// 格式:數組名[下標/索引] = 值; // 如果下標有對應的值,會把原來的值覆蓋,如果下標不存在,會給數組新增一個元素。 var arr = ["red", "green", "blue"]; // 把red替換成了yellow arr[0] = "yellow"; // 給數組新增加了一個pink的值 arr[3] = "pink";函數
為什么要有函數 如果要在多個地方求1-100之間所有數的和,應該怎么做?
什么是函數 把一段相對獨立的具有特定功能的代碼塊封裝起來,形成一個獨立實體,就是函數,起個名字(函數名),在后續開發中可以反復調用 函數的作用就是封裝一段代碼,將來可以重復使用
函數的定義
-
函數聲明
function 函數名(){
// 函數體}
-
函數表達式
var fn = function() {
// 函數體}
-
特點: 函數聲明的時候,函數體并不會執行,只要當函數被調用的時候才會執行。 函數一般都用來干一件事情,需用使用動詞+名詞,表示做一件事情 tellStory sayHello等
函數的調用 調用函數的語法: 函數名();
特點: 函數體只有在調用的時候才會執行,調用需要()進行調用。 可以調用多次(重復使用) 代碼示例:
// 聲明函數 function sayHi() {console.log("吃了沒?"); } // 調用函數 sayHi();// 求1-100之間所有數的和 function getSum() {var sum = 0;for (var i = 0; i < 100; i++) {sum += i;}console.log(sum); } // 調用 getSum();函數的參數 為什么要有參數
function getSum() {var sum = 0;for (var i = 1; i <= 100; i++) {sum += i;}console.log(); }// 雖然上面代碼可以重復調用,但是只能計算1-100之間的值 // 如果想要計算n-m之間所有數的和,應該怎么辦呢?語法:
// 函數內部是一個封閉的環境,可以通過參數的方式,把外部的值傳遞給函數內部 // 帶參數的函數聲明 function 函數名(形參1, 形參2, 形參...){// 函數體 }// 帶參數的函數調用 函數名(實參1, 實參2, 實參3);形參和實參
函數的返回值 當函數執行完的時候,并不是所有時候都要把結果打印。我們期望函數給我一些反饋(比如計算的結果返回進行后續的運算),這個時候可以讓函數返回一些東西。也就是返回值。函數通過return返回一個返回值
返回值語法:
//聲明一個帶返回值的函數 function 函數名(形參1, 形參2, 形參...){//函數體return 返回值; }//可以通過變量來接收這個返回值 var 變量 = 函數名(實參1, 實參2, 實參3);函數的調用結果就是返回值,因此我們可以直接對函數調用結果進行操作。
返回值詳解:
如果函數沒有顯示的使用 return語句 ,那么函數有默認的返回值:undefined如果函數使用 return語句,那么跟再return后面的值,就成了函數的返回值如果函數使用 return語句,但是return后面沒有任何值,那么函數的返回值也是:undefined函數使用return語句后,這個函數會在執行完 return 語句之后停止并立即退出,也就是說return后面的所有其他代碼都不會再執行。arguments的使用 JavaScript中,arguments對象是比較特別的一個對象,實際上是當前函數的一個內置屬性。也就是說所有函數都內置了一個arguments對象,arguments對象中存儲了傳遞的所有的實參。arguments是一個偽數組,因此及可以進行遍歷
函數其它
匿名函數 匿名函數:沒有名字的函數 匿名函數如何使用:
將匿名函數賦值給一個變量,這樣就可以通過變量進行調用 匿名函數自調用關于自執行函數(匿名函數自調用)的作用:防止全局變量污染。 自調用函數 匿名函數不能通過直接調用來執行,因此可以通過匿名函數的自調用的方式來執行
(function () {alert(123); })();函數是一種數據類型
function fn() {} console.log(typeof fn);- 函數作為參數
因為函數也是一種類型,可以把函數作為兩一個函數的參數,在兩一個函數中調用
- 函數做為返回值
因為函數是一種類型,所以可以把函數可以作為返回值從函數內部返回,這種用法在后面很常見。
function fn(b) {var a = 10;return function () {alert(a+b);} } fn(15)();代碼規范
1.命名規范 2.變量規范 var name = 'zs'; 3.注釋規范// 這里是注釋 4.空格規范 5.換行規范var arr = [1, 2, 3, 4];if (a > b) {}for(var i = 0; i < 10; i++) {}function fn() {}作用域
作用域:變量可以起作用的范圍 全局變量和局部變量
-
全局變量 在任何地方都可以訪問到的變量就是全局變量,對應全局作用域
-
局部變量 只在固定的代碼片段內可訪問到的變量,最常見的例如函數內部。對應局部作用域(函數作用域)
不使用var聲明的變量是全局變量,不推薦使用。 變量退出作用域之后會銷毀,全局變量關閉網頁或瀏覽器才會銷毀
塊級作用域
任何一對花括號({和})中的語句集都屬于一個塊,在這之中定義的所有變量在代碼塊外都是不可見的,我們稱之為塊級作用域。 在es5之前沒有塊級作用域的的概念,只有函數作用域,現階段可以認為JavaScript沒有塊級作用域
詞法作用域 變量的作用域是在定義時決定而不是執行時決定,也就是說詞法作用域取決于源碼,通過靜態分析就能確定,因此詞法作用域也叫做靜態作用域。
在 js 中詞法作用域規則:
- 函數允許訪問函數外的數據.
- 整個代碼結構中只有函數可以限定作用域.
- 作用域規則首先使用提升規則分析
- 如果當前作用規則中有名字了, 就不考慮外面的名字
作用域鏈
只有函數可以制造作用域結構, 那么只要是代碼,就至少有一個作用域, 即全局作用域。凡是代碼中有函數,那么這個函數就構成另一個作用域。如果函數中還有函數,那么在這個作用域中就又可以誕生一個作用域。 將這樣的所有的作用域列出來,可以有一個結構: 函數內指向函數外的鏈式結構。就稱作作用域鏈。
// 案例1: function f1() {function f2() {} }var num = 456; function f3() {function f4() { } }預解析
JavaScript代碼的執行是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器執行JavaScript代碼的時候,分為兩個過程:預解析過程和代碼執行過程
預解析過程:
JavaScript的執行過程
var a = 25; function abc (){alert(a);//undefinedvar a = 10; } abc(); // 如果變量和函數同名的話,函數優先 console.log(a); function a() {console.log('aaaaa'); } var a = 1; console.log(a);全局解析規則
函數內部解析規則
變量提升
- 變量提升 定義變量的時候,變量的聲明會被提升到作用域的最上面,變量的賦值不會提升。
- 函數提升 JavaScript解析器首先會把當前作用域的函數聲明提前到整個作用域的最前面
對象
為什么要有對象
function printPerson(name, age, sex....) { } // 函數的參數如果特別多的話,可以使用對象簡化 function printPerson(person) {console.log(person.name);…… }什么是對象 現實生活中:萬物皆對象,對象是一個具體的事物,一個具體的事物就會有行為和特征。 舉例: 一部車,一個手機 車是一類事物,門口停的那輛車才是對象
特征:紅色、四個輪子 行為:駕駛、剎車JavaScript中的對象
JavaScript中的對象其實就是生活中對象的一個抽象 JavaScript的對象是無序屬性的集合。其屬性可以包含基本值、對象或函數。對象就是一組沒有順序的值。我們可以把JavaScript中的對象想象成鍵值對,其中值可以是數據和函數。 對象的行為和特征特征---屬性行為---方法- 事物的特征在對象中用屬性來表示。
- 事物的行為在對象中用方法來表示。
對象字面量 字面量:11 'abc' true [] {}等
var o = {name: 'zs,age: 18,sex: true,sayHi: function () {console.log(this.name);} };對象創建方式
對象字面量
var o = {name: 'zs',age: 18,sex: true,sayHi: function () {console.log(this.name);} };new Object()創建對象
var person = new Object();person.name = 'lisi';person.age = 35;person.job = 'actor';person.sayHi = function(){console.log('Hello,everyBody'); }工廠函數創建對象
function createPerson(name, age, job) {var person = new Object();person.name = name;person.age = age;person.job = job;person.sayHi = function(){console.log('Hello,everyBody');}return person; } var p1 = createPerson('張三', 22, 'actor');自定義構造函數
function Person(name,age,job){this.name = name;this.age = age;this.job = job;this.sayHi = function(){console.log('Hello,everyBody');} } var p1 = new Person('張三', 22, 'actor');屬性和方法
如果一個變量屬于一個對象所有,那么該變量就可以稱之為該對象的一個屬性,屬性一般是名詞,用來描述事物的特征 如果一個函數屬于一個對象所有,那么該函數就可以稱之為該對象的一個方法,方法是動詞,描述事物的行為和功能new關鍵字
構造函數 ,是一種特殊的函數。主要用來在創建對象時初始化對象, 即為對象成員變量賦初始值,總與new運算符一起使用在創建對象的語句中。
new在執行時會做四件事情
new會在內存中創建一個新的空對象 new 會讓this指向這個新的對象 執行構造函數 目的:給這個新對象加屬性和方法 new會返回這個新對象this詳解
JavaScript中的this指向問題,有時候會讓人難以捉摸,隨著學習的深入,我們可以逐漸了解 現在我們需要掌握函數內部的this幾個特點1. 函數在定義的時候this是不確定的,只有在調用的時候才可以確定2. 一般函數直接執行,內部this指向全局window3. 函數作為一個對象的方法,被該對象所調用,那么this指向的是該對象4. 構造函數中的this其實是一個隱式對象,類似一個初始化的模型,所有方法和屬性都掛載到了這個隱式對象身上,后續通過new關鍵字來調用,從而實現實例化對象的使用
遍歷對象的屬性 通過for..in語法可以遍歷一個對象
var obj = {}; for (var i = 0; i < 10; i++) {obj[i] = i * 2; } for(var key in obj) {console.log(key + "==" + obj[key]); }刪除對象的屬性
function fun() { this.name = 'mm'; } var obj = new fun(); console.log(obj.name); // mm delete obj.name; console.log(obj.name); // undefined簡單類型和復雜類型的區別
基本類型又叫做值類型,復雜類型又叫做引用類型
值類型:簡單數據類型,基本數據類型,在存儲時,變量中存儲的是值本身,因此叫做值類型。
引用類型:復雜數據類型,在存儲是,變量中存儲的僅僅是地址(引用),因此叫做引用數據類型。
- 堆和棧 堆??臻g分配區別: 1、棧(操作系統):由操作系統自動分配釋放 ,存放函數的參數值,局部變量的值等。其操作方式類似于數據結構中的棧; 2、堆(操作系統): 存儲復雜類型(對象),一般由程序員分配釋放, 若程序員不釋放,由垃圾回收機制回收,分配方式倒是類似于鏈表。
- 注意:JavaScript中沒有堆和棧的概念,此處我們用堆和棧來講解,目的方便理解和方便以后的學習。
內置對象
JavaScript中的對象分為3種:內置對象、瀏覽器對象、自定義對象 JavaScript 提供多個內置對象:Math/Array/Number/String/Boolean... 對象只是帶有屬性和方法的特殊數據類型。 學習一個內置對象的使用,只要學會其常用的成員的使用(通過查文檔學習) 可以通過MDN/W3C來查詢 內置對象的方法很多,我們只需要知道內置對象提供的常用方法,使用的時候查詢文檔。
如何學習一個方法?
Math對象 Math對象不是構造函數,它具有數學常數和函數的屬性和方法,都是以靜態成員的方式提供 跟數學相關的運算來找Math中的成員(求絕對值,取整) Math 演示:Math.PI、Math.random()、Math.floor()/Math.ceil()、Math.round()、Math.abs() 、Math.max()
Math.PI // 圓周率 Math.random() // 生成隨機數 Math.floor()/Math.ceil() // 向下取整/向上取整 Math.round() // 取整,四舍五入 Math.abs() // 絕對值 Math.max()/Math.min() // 求最大和最小值Math.sin()/Math.cos() // 正弦/余弦 Math.power()/Math.sqrt() // 求指數次冪/求平方根Date對象 創建 Date 實例用來處理日期和時間。Date 對象基于1970年1月1日(世界標準時間)起的毫秒數。
// 獲取當前時間,UTC世界時間,距1970年1月1日(世界標準時間)起的毫秒數 var now = new Date(); console.log(now.valueOf()); // 獲取距1970年1月1日(世界標準時間)起的毫秒數Date構造函數的參數 1. 毫秒數 1498099000356 new Date(1498099000356) 2. 日期格式字符串 '2015-5-1' new Date('2015-5-1') 3. 年、月、日…… new Date(2015, 4, 1) // 月份從0開始獲取日期的毫秒形式
var now = new Date(); // valueOf用于獲取對象的原始值 console.log(date.valueOf()) // HTML5中提供的方法,有兼容性問題 var now = Date.now(); // 不支持HTML5的瀏覽器,可以用下面這種方式 var now = + new Date(); // 調用 Date對象的valueOf()日期格式化方法
toString() // 轉換成字符串 valueOf() // 獲取毫秒值 // 下面格式化日期的方法,在不同瀏覽器可能表現不一致,一般不用 toDateString() toTimeString() toLocaleDateString() toLocaleTimeString()獲取日期指定部分
getTime() // 返回毫秒數和valueOf()結果一樣,valueOf()內部調用的getTime() getMilliseconds() getSeconds() // 返回0-59 getMinutes() // 返回0-59 getHours() // 返回0-23 getDay() // 返回星期幾 0周日 6周6 getDate() // 返回當前月的第幾天 getMonth() // 返回月份,***從0開始*** getFullYear() //返回4位的年份 如 2016Array對象
創建數組對象的兩種方式
- 字面量方式
- new Array()
-
檢測一個對象是否是數組
- instanceof
- Array.isArray() HTML5中提供的方法,有兼容性問題
函數的參數,如果要求是一個數組的話,可以用這種方式來進行判斷
-
toString()/valueOf()
- toString() 把數組轉換成字符串,逗號分隔每一項
- valueOf() 返回數組對象本身
-
數組常用方法 演示:push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()
清空數組
// 方式1 推薦 arr = []; // 方式2 arr.length = 0; // 方式3 arr.splice(0, arr.length);基本包裝類型
為了方便操作基本數據類型,JavaScript還提供了三個特殊的引用類型:String/Number/Boolean
// 下面代碼的問題? // s1是基本類型,基本類型是沒有方法的 var s1 = 'zhangsan'; var s2 = s1.substring(5);// 當調用s1.substring(5)的時候,先把s1包裝成String類型的臨時對象,再調用substring方法,最后銷毀臨時對象, 相當于: var s1 = new String('zhangsan'); var s2 = s1.substring(5); s1 = null; // 創建基本包裝類型的對象 var num = 18; //數值,基本類型 var num = Number('18'); //類型轉換 var num = new Number(18); //基本包裝類型,對象 // Number和Boolean基本包裝類型基本不用,使用的話可能會引起歧義。例如: var b1 = new Boolean(false); var b2 = b1 && true; // 結果是什么String對象
字符串的不可變
var str = 'abc'; str = 'hello'; // 當重新給str賦值的時候,常量'abc'不會被修改,依然在內存中 // 重新給字符串賦值,會重新在內存中開辟空間,這個特點就是字符串的不可變 // 由于字符串的不可變,在大量拼接字符串的時候會有效率問題創建字符串對象
var str = new String('Hello World');// 獲取字符串中字符的個數 console.log(str.length);字符串對象的常用方法
字符串所有的方法,都不會修改字符串本身(字符串是不可變的),操作完成會返回一個新的字符串
// 1 字符方法 charAt() //獲取指定位置處字符 charCodeAt() //獲取指定位置處字符的ASCII碼 str[0] //HTML5,IE8+支持 和charAt()等效 // 2 字符串操作方法 concat() //拼接字符串,等效于+,+更常用 slice() //從start位置開始,截取到end位置,end取不到 substring() //從start位置開始,截取到end位置,end取不到 substr() //從start位置開始,截取length個字符 // 3 位置方法 indexOf() //返回指定內容在元字符串中的位置 lastIndexOf() //從后往前找,只找第一個匹配的 // 4 去除空白 trim() //只能去除字符串前后的空白 // 5 大小寫轉換方法 to(Locale)UpperCase() //轉換大寫 to(Locale)LowerCase() //轉換小寫 // 6 其它 search() replace() split() fromCharCode() // String.fromCharCode(101, 102, 103); //把ASCII碼轉換成字符串轉載于:https://my.oschina.net/zybc/blog/3057225
總結
以上是生活随笔為你收集整理的前端基础入门四(JavaScript基础)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: go语言csv文件的读取与写入
- 下一篇: Mobx, 化繁为简的艺术