javaScript基礎總結

javaScript

是運行在客戶端的腳本語言


javaScript和HTML,CSS的區別

  1. HTML: 提供網頁的結構, 提供網頁中的內容
  2. css:用來美化網頁
  3. javaScript:可以用來控制網頁內容, 給網頁添加動態效果

javaScript的組成

  • ECMAScript: 描述了語言的基礎語法和數據類型, ECMAScript是一套標準
  • DOM: 文檔對象模型, 一套操作頁面元素的API
  • BOM: 瀏覽器對象模型, 一套操作瀏覽器的API

js的書寫位置

寫在行內
<input type="button" value="按鈕" onclick="alert('Hello World')" />

寫在script標籤中
<head>
  <script>
    alert('Hello World!');
  </script>
</head>

寫在外部js文件中,在頁面引入
<script src="main.js"></script>
注意: 引用外部js文件的script標籤中不可以寫JavaScript代碼

變量

var聲明變量
var age;

變量的賦值
var age;
var = 10;

同時聲明多個變量
var age, name, sex;
age = 10;
name = 'zs';

同時聲明多個變量並賦值
var age = 10, name = 'zs';

變量內存中的存儲

var age = 18;

name 指向變量zs, age指向18

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-CKbes2DM-1574157791695)(C:\Users\wei\AppData\Roaming\Typora\typora-user-images\image-20191119151425546.png)]

變量的命名規則和規範

  • 規則 - 必須遵守的,不遵守會報錯

    • 由字母、數字、下劃線、$符號組成,不能以數字開頭

    • 不能是關鍵字和保留字,例如: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;   // 對應十進制的7
    var num2 = 019;  // 對應十進制的19
    var 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字符串

​ ‘abc’, “abc”

  • 轉義符

    [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bvGcSUXK-1574157791696)(E:/前端/03Javascript 基礎(6天)/資料源碼/01-JavaScript-第1天{JS基礎語法}/01教學資料/筆記/media/1498289626813.png)]

  • 字符串長度

    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);
    
    
    1. 兩邊只要有一個是字符串,那麼+就是字符串拼接功能
    2. 兩邊如果都是數字,那麼就是算術功能。

Boolean

​ Boolean字面量: true和false,區分大小寫

​ 計算機內部存儲:true爲1,false爲0


Undefined和null
  1. undefined表示一個聲明瞭沒有賦值的變量,變量只聲明的時候值默認是undefined
  2. null表示一個空,變量的值如果想爲null,必須手動設置

複雜數據類型

​ Object


獲取變量類型

typeof

var age = 18;
console.log(typeof age);  // 'number'


註釋

單行註釋

//這是單行註釋

多行註釋

/*
	這是多行註釋
*/


數據類型轉換

轉成字符串類型

  • toString()
    var num = 5;
    console.log(num.toString());
    
    
  • String()
    String()函數存在的意義:有些值沒有toString(),這個時候可以使用String()。比如:undefined和null
    
    
  • 拼接字符串方式

    num + “”,當 + 兩邊一個操作符是字符串類型,一個操作符是其它類型的時候,會先把其它類型轉換成字符串再進行字符串拼接,返回字符串


轉成數值類型

Number()
Number()可以把任意值轉換成數值,如果要轉換的字符串中有一個不是數值的字符,返回NaN

parseInt()
var num1 = parseInt("12.3abc");  // 返回12,如果第一個字符是數字會解析知道遇到非數字結束
var num2 = parseInt("abc123");   // 返回NaN,如果第一個字符不是數字或者符號就返回NaN

parseFloat()
parseFloat(); //把字符串轉換成浮點數
parseFloat(); /*和parseInt非常相似,不同之處在與
	parseFloat會解析第一個. 遇到第二個.或者非數字結束
	如果解析的內容裏只有整數,解析成整數*/

+,-0等運算
var str = '500';
console.log(+str);		// 取正
console.log(-str);		// 取負
console.log(str - 0);

轉爲布爾類型

  • Boolean()

    ​ 0 空字符串 null undefined NaN 會轉換成false 其它都會轉換成true


操作符

一元運算符

+: 加 
-: 剪 
*: 乘 
/: 除 
%: 取餘  

前++和後++的區別
var a = 10;

//前++
var b = ++a; 
//a自增1=11; 賦值給b
a = 11;
b = 11;

//後++
var b = a++;
//a先賦值給b, a再自增1=11
a = 11;
b = 10;



邏輯運算符(布爾運算符)

&& 與 兩個操作數同時爲true,結果爲true,否則都是false
|| 或 兩個操作數有一個爲true,結果爲true,否則爲false
!  非  取反


關係運算符(比較運算符)

<  >  >=  <= == != === !==


==和===的區別
==: 只比較這個值是否相等
===: 比較的是值和數據類型是否同時相等


賦值運算符

=:	賦值   
+=: 先相加,再賦值   
-=:	先相減,再賦值   
*=: 先相乘,再賦值   
/=: 先相除,再賦值   
%=: 先取餘,再賦值


運算符的優先級

優先級從高到底
	1. ()  優先級最高
	2. 一元運算符  ++   --   !
	3. 算數運算符  先*  /  %   後 +   -
	4. 關係運算符  >   >=   <   <=
	5. 相等運算符   ==   !=    ===    !==
	6. 邏輯運算符 先&&   後||
	7. 賦值運算符


表達式和語句

分支結構

if語句
if (/* 條件表達式 */) {
  // 執行語句
}

if (/* 條件表達式 */){
  // 成立執行語句
} else {
  // 否則執行語句
}

if (/* 條件1 */){
  // 成立執行語句
} else if (/* 條件2 */){
  // 成立執行語句
} else if (/* 條件3 */){
  // 成立執行語句
} else {
  // 最後默認執行語句
}

三元運算符
表達式1 ? 表達式2 : 表達式3
例如: 10>20? 10:100;
//10大於20嗎? 大於的話就10, 不大於的話就100

switch語句
/*
	expression 的值 會從上到下去匹配 case 內的值, 
	匹配上了就執行裏面的語句, 
	匹配不上就向下走
	如果都沒有就執行default中的內容
*/

switch (expression) {
  case 常量1:
    語句;
    break;
  case 常量2:
    語句;
    break;
  case 常量3:
    語句;
    break;case 常量n:
    語句;
    break;
  default:
    語句;
    break;
}
/*
	break: 可以省略, 但是省略後會執行代碼後又器匹配case, 一直遇到break爲止
	default: 
		放在哪裏都是最後一個執行的, 如果匹配上case就不會執行default
		default中的break是可以省略的, 但是爲了規範代碼還是不要省略
*/


布爾類型的隱式轉換

流程控制語句會把後面的值隱式轉換成布爾類型

轉換爲true   非空字符串  非0數字  true 任何對象
轉換成false  空字符串  0  false  null  undefined

例如:
	if(10>20){ //10大於20嗎? 大於就爲true, 否則就爲flase
		xxx...
	}


循環結構

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 (循環條件);

例如:
// 初始化變量
var i = 1;
var sum = 0;
do {
  sum += i;//循環體
  i++;//自增
} while (i <= 100);//循環條件

for語句
// for循環的表達式之間用的是;號分隔的,千萬不要寫成,
for (初始化表達式1; 判斷表達式2; 自增表達式3) {
  // 循環體4
}

continue和break

​ break:立即跳出整個循環,即循環結束,開始執行循環後面的內容(直接跳到大括號)

​ continue:立即跳出當前循環,繼續下一次循環(跳到i++的地方)


數組

​ 所謂數組,就是將多個元素(通常是同一類型)按一定順序排列放到一個集合中,那麼這個集合我們就稱之爲數組。

數組的定義

​ 數組是一個有序的列表,可以在數組中存放任意的數據,並且數組的長度可以動態的調整。

// 創建一個空數組
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++) {
	// 數組遍歷的固定結構
    console.log(arr[i]);
}

數組中新增元素
// 格式:數組名[下標/索引] = 值;
// 如果下標有對應的值,會把原來的值覆蓋,如果下標不存在,會給數組新增一個元素。
var arr = ["red", "green", "blue"];
// 把red替換成了yellow
arr[0] = "yellow";
// 給數組新增加了一個pink的值
arr[3] = "pink";


函數

將一段代碼封裝起來的一個立體, 並給這個立體起一個名字, 使用該名字調用反覆使用的. 就叫函數

函數定義

函數聲明
function 函數名(){
  // 函數體
}

函數表達式
var fn = function() {
  // 函數體
}

特點:

​ 函數聲明的時候,函數體並不會執行,只要當函數被調用的時候纔會執行。

​ 函數一般都用來幹一件事情,


函數的調用

調用函數的語法:
函數名();
例如:
	function abc(){} //函數
	abc();//函數名加括號=調用

特點:

​ 函數體只有在調用的時候纔會執行,調用需要()進行調用。

​ 可以調用多次(重複使用)

函數的自調用
//匿名函數
function(){}

//匿名函數不能通過直接調用來執行,因此可以通過匿名函數的自調用的方式來執行
格式一: (function (){});
格式二: (function (){})();


函數的參數

// 函數內部是一個封閉的環境,可以通過參數的方式,把外部的值傳遞給函數內部
// 帶參數的函數聲明
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 sum() {
     var sum = 0;
     for (x = 0; x < arguments.length; x++) {
         sum += arguments[x];
     }
     return sum;
 }

var she = sum(10, 20, 30, 40, 50);
console.log(she);


函數是一種數據類型

function fn() {}
console.log(typeof fn);

函數作爲參數

​ 因爲函數也是一種類型,可以把函數作爲另一個函數的參數,在另一個函數中調用

函數做爲返回值

​ 因爲函數是一種類型,所以可以把函數可以作爲返回值從函數內部返回

function fn(b) {
  var a = 10;
  return function () {
    alert(a+b);
  }
}
fn(15)();


作用域

變量器作用的區域,就叫作用域

全局變量和局部變量

全局變量

在任何地方都可以訪問到的變量就是全局變量,對應全局作用域

局部變量

只在固定的代碼片段內可訪問到的變量,最常見的例如函數內部。對應局部作用域(函數作用域)

不使用var聲明的變量是全局變量,不推薦使用。
局部變量退出作用域之後會銷燬,全局變量關閉網頁或瀏覽器纔會銷燬


塊級作用域

​ 任何一對花括號({和})中的語句集都屬於一個塊,在這之中定義的所有變量在代碼塊外都是不可見的,我們稱之爲塊級作用域。

​ 在es5之前沒有塊級作用域的的概念,只有函數作用域,現階段可以認爲JavaScript沒有塊級作用域


詞法作用域

變量的作用域是在定義時決定而不是執行時決定,也就是說詞法作用域取決於源碼,通過靜態分析就能確定,因此詞法作用域也叫做靜態作用域。

在 js 中詞法作用域規則:

  • 函數允許訪問函數外的數據.
  • 整個代碼結構中只有函數可以限定作用域.
  • 作用域規則首先使用提升規則分析
  • 如果當前作用規則中有名字了, 就不考慮外面的名字
 var num = 123;
function foo() {
    console.log(num); //123
}
foo(); 

if (true) {
    var num = 100;
}
console.log(num); //100


作用域鏈

​ 只有函數可以製造作用域結構, 那麼只要是代碼,就至少有一個作用域, 即全局作用域。凡是代碼中有函數,那麼這個函數就構成另一個作用域。如果函數中還有函數,那麼在這個作用域中就又可以誕生一個作用域。

將這樣的所有的作用域列出來,可以有一個結構: 函數內指向函數外的鏈式結構。就稱作作用域鏈。

// 案例1:
function f1() {
    function f2() {
    }
}

var num = 456;
function f3() {
    function f4() {    
    }
}

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-NSxsM6Rn-1574157791696)(C:\Users\wei\AppData\Roaming\Typora\typora-user-images\image-20191119174042957.png)]


// 案例2
function f1() {
    var num = 123;
    function f2() {
        console.log( num );
    }
    f2();
}
var num = 456;
f1();

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-uHDU4qoy-1574157791696)(C:\Users\wei\AppData\Roaming\Typora\typora-user-images\image-20191119174259138.png)]


預解析

​ JavaScript代碼的執行是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器執行JavaScript代碼的時候,分爲兩個過程:預解析過程和代碼執行過程

預解析過程:

  1. 把變量的聲明提升到當前作用域的最前面,只會提升聲明,不會提升賦值。
  2. 把函數的聲明提升到當前作用域的最前面,只會提升聲明,不會提升調用。
  3. 先提升var,在提升function

函數內部解析規則

  • 變量提升

    定義變量的時候,變量的聲明會被提升到該作用域的最上面,變量的賦值不會提升。

  • 函數提升

    JavaScript解析器首先會把當前該作用域的函數聲明提前到整個作用域的最前面


對象

JavaScript中的對象其實就是生活中對象的一個抽象
JavaScript的對象是無序屬性的集合。
	其屬性可以包含基本值、對象或函數。對象就是一組沒有順序的值。我們可以把JavaScript中的對象想象成鍵值對,其中值可以是數據和函數。
對象的行爲和特徵
	特徵---屬性
	行爲---方法

  • 事物的特徵在對象中用屬性來表示。
  • 事物的行爲在對象中用方法來表示。

對象創建方式

  • 對象字面量
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運算符一起使用在創建對象的語句中。

  1. 構造函數用於創建一類對象,首字母要大寫。
  2. 構造函數要和new一起使用纔有意義。

new在執行時會做四件事情

new會在內存中創建一個新的空對象
new 會讓this指向這個新的對象
執行構造函數  目的:給這個新對象加屬性和方法
new會返回這個新對象

this詳解

JavaScript中的this指向問題,有時候會讓人難以捉摸,隨着學習的深入,我們可以逐漸瞭解
現在我們需要掌握函數內部的this幾個特點
	1. 函數在定義的時候this是不確定的,只有在調用的時候纔可以確定
	2. 一般函數直接執行,內部this指向全局window
	3. 函數作爲一個對象的方法,被該對象所調用,那麼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


簡單類型和複雜類型的區別

基本類型又叫做值類型,複雜類型又叫做引用類型

值類型:簡單數據類型,基本數據類型,在存儲時,變量中存儲的是值本身,因此叫做值類型。

引用類型:複雜數據類型,在存儲是,變量中存儲的僅僅是地址(引用),因此叫做引用數據類型。

  • 堆和棧

    堆棧空間分配區別:
      1、棧(操作系統):由操作系統自動分配釋放 ,存放函數的參數值,局部變量的值等。其操作方式類似於數據結構中的棧;
      2、堆(操作系統): 存儲複雜類型(對象),一般由程序員分配釋放, 若程序員不釋放,由垃圾回收機制回收,分配方式倒是類似於鏈表。
    
    
  • 注意:JavaScript中沒有堆和棧的概念,此處我們用堆和棧來講解,目的方便理解和方便以後的學習。


基本類型在內存中的存儲

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-EAVsq6x4-1574157791696)(C:\Users\wei\AppData\Roaming\Typora\typora-user-images\image-20191119175552322.png)]


複雜類型在內存中的存儲

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-hG4IGEHy-1574157791697)(C:\Users\wei\AppData\Roaming\Typora\typora-user-images\image-20191119175638765.png)]


基本類型作爲函數的參數

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-lm8l98De-1574157791697)(C:\Users\wei\AppData\Roaming\Typora\typora-user-images\image-20191119175648590.png)]


複雜類型作爲函數的參數

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BfxZ2oX4-1574157791698)(C:\Users\wei\AppData\Roaming\Typora\typora-user-images\image-20191119175705025.png)]


內置對象

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.pow()/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位的年份  如 2016


Array對象

  • 創建數組對象的兩種方式
    • 字面量方式
    • new Array()
// 1. 使用構造函數創建數組對象
// 創建了一個空數組
var arr = new Array();
// 創建了一個數組,裏面存放了3個字符串
var arr = new Array('zs', 'ls', 'ww');
// 創建了一個數組,裏面存放了4個數字
var arr = new Array(1, 2, 3, 4);


// 2. 使用字面量創建數組對象
var arr = [1, 2, 3];

// 獲取數組中元素的個數
console.log(arr.length);

  • 檢測一個對象是否是數組
    • instanceof
    • Array.isArray() HTML5中提供的方法,有兼容性問題

    函數的參數,如果要求是一個數組的話,可以用這種方式來進行判斷

  • toString()/valueOf()
    • toString() 把數組轉換成字符串,逗號分隔每一項
    • valueOf() 返回數組對象本身
  • 數組常用方法

    演示:push()、shift()、unshift()、reverse()、sort()、splice()、indexOf()

// 1 棧操作(先進後出)
push()
pop() 		//取出數組中的最後一項,修改length屬性
// 2 隊列操作(先進先出)
push()
shift()		//取出數組中的第一個元素,修改length屬性
unshift() 	//在數組最前面插入項,返回數組的長度
// 3 排序方法
reverse()	//翻轉數組
sort(); 	//即使是數組sort也是根據字符,從小到大排序
// 帶參數的sort是如何實現的?
// 4 操作方法
concat()  	//把參數拼接到當前數組
slice() 	//從當前數組中截取一個新的數組,不影響原來的數組,參數start從0開始,end從1開始
splice()	//刪除或替換當前數組的某些項目,參數start, deleteCount, options(要替換的項目)
// 5 位置方法
indexOf()、lastIndexOf()   //如果沒找到返回-1
// 6 迭代方法 不會修改原數組(可選)
every()、filter()、forEach()、map()、some()
// 7 方法將數組的所有元素連接到一個字符串中。
join()

  • 清空數組
// 方式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()  //替換元素, /元素/ig, '' ig整個String都找一遍
split()
fromCharCode()
// String.fromCharCode(101, 102, 103);	 //把ASCII碼轉換成字符串

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章