前端基礎入門四（JavaScript基礎）

時間 2019-11-10

標籤前端基礎入門 javascript 欄目 JavaScript 简体版

原文原文鏈接

學習目標:

掌握編程的基本思惟
掌握編程的基本語法

咱們先來學習JavaScript基礎，後續會講解JavaScript高級。javascript

重點內容

變量的聲明及使用
數據類型
類型轉換
運算符前端

JavaScript介紹

JavaScript是什麼

JavaScript是一種運行在客戶端的腳本語言 java

JavaScript的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。程序員

JavaScript如今的意義(應用場景)
JavaScript 發展到如今幾乎無所不能。express

網頁特效
服務端開發(Node.js)
命令行工具(Node.js)
桌面程序(Electron)
App(Cordova)
控制硬件-物聯網(Ruff)
遊戲開發(cocos2d-js)

JavaScript和HTML、CSS的區別編程

HTML：提供網頁的結構，提供網頁中的內容
CSS: 用來美化網頁
JavaScript: 能夠用來控制網頁內容，給網頁增長動態的效果

JavaScript的組成
數組

ECMAScript - JavaScript的核心
ECMA 歐洲計算機制造聯合會
網景：JavaScript
微軟：JScript
定義了JavaScript的語法規範
JavaScript的核心，描述了語言的基本語法和數據類型，ECMAScript是一套標準，定義了一種語言的標準與具體實現無關瀏覽器

BOM - 瀏覽器對象模型
一套操做瀏覽器功能的API
經過BOM能夠操做瀏覽器窗口，好比：彈出框、控制瀏覽器跳轉、獲取分辨率等數據結構

DOM - 文檔對象模型
一套操做頁面元素的API
DOM能夠把HTML看作是文檔樹，經過DOM提供的API能夠對樹上的節點進行操做dom

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;   // 對應十進制的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類型
字符串長度

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

undefined表示一個聲明瞭沒有賦值的變量，變量只聲明的時候值默認是undefined
null表示一個空，變量的值若是想爲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()

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

操做符

運算符 operator

5 + 6

表達式組成操做數和操做符，會有一個結果

算術運算符

一元運算符

一元運算符：只有一個操做數的運算符

5 + 6 兩個操做數的運算符二元運算符

++ 自身加1

-- 自身減1

前置++

var num1 = 5;
++ num1; 

var num2 = 6;
console.log(num1 + ++ num2);

後置++

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: 監視變量，不要監視表達式，由於監視了表達式，那麼這個表達式也會執行。

代碼調試的能力很是重要，只有學會了代碼調試，才能學會本身解決bug的能力。初學者不要以爲調試代碼麻煩就不去調試，知識點花點功夫確定學的會，可是代碼調試這個東西，本身不去練，永遠都學不會。

數組

爲何要學習數組
以前學習的數據類型，只能存儲一個值(好比：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);

形參和實參

形式參數：在聲明一個函數的時候，爲了函數的功能更加靈活，有些值是固定不了的，對於這些固定不了的值。咱們能夠給函數設置參數。這個參數沒有具體的值，僅僅起到一個佔位置的做用，咱們一般稱之爲形式參數，也叫形參。
實際參數：若是函數在聲明時，設置了形參，那麼在函數調用的時候就須要傳入對應的參數，咱們把傳入的參數叫作實際參數，也叫實參。

var x = 5, y = 6;
fn(x,y); 
function fn(a, b) {
  console.log(a + b);
}
//x,y實參，有具體的值。函數執行的時候會把x,y複製一份給函數內部的a和b，函數內部的值是複製的新值，沒法修改外部的x,y

函數的返回值
當函數執行完的時候，並非全部時候都要把結果打印。咱們指望函數給我一些反饋（好比計算的結果返回進行後續的運算），這個時候可讓函數返回一些東西。也就是返回值。函數經過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 中詞法做用域規則:

函數容許訪問函數外的數據.
整個代碼結構中只有函數能夠限定做用域.
做用域規則首先使用提高規則分析
若是當前做用規則中有名字了, 就不考慮外面的名字

var num = 123;
function foo() {
  console.log( num );
}
foo();

if ( false ) {
    var num = 123;
}
console.log( num ); // undefiend

做用域鏈

只有函數能夠製造做用域結構，那麼只要是代碼，就至少有一個做用域, 即全局做用域。凡是代碼中有函數，那麼這個函數就構成另外一個做用域。若是函數中還有函數，那麼在這個做用域中就又能夠誕生一個做用域。
將這樣的全部的做用域列出來，能夠有一個結構: 函數內指向函數外的鏈式結構。就稱做做用域鏈。

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

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

預解析

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

預解析過程：

把變量的聲明提高到當前做用域的最前面，只會提高聲明，不會提高賦值。
把函數的聲明提高到當前做用域的最前面，只會提高聲明，不會提高調用。
先提高var，在提高function

JavaScript的執行過程

var a = 25;
function abc (){
  alert(a);//undefined
  var a = 10;
}
abc();
// 若是變量和函數同名的話，函數優先
console.log(a);
function a() {
  console.log('aaaaa');
}
var a = 1;
console.log(a);

全局解析規則

函數內部解析規則

變量提高

變量提高
定義變量的時候，變量的聲明會被提高到做用域的最上面，變量的賦值不會提高。
函數提高
JavaScript解析器首先會把當前做用域的函數聲明提早到整個做用域的最前面

// 一、-----------------------------------
var num = 10;
fun();
function fun() {
  console.log(num);
  var num = 20;
}
//二、-----------------------------------
var a = 18;
f1();
function f1() {
  var b = 9;
  console.log(a);
  console.log(b);
  var a = '123';
}
// 三、-----------------------------------
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
  var a = b = c = 9;
  console.log(a);
  console.log(b);
  console.log(c);
}

對象

爲何要有對象

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會在內存中建立一個新的空對象
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

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

基本類型又叫作值類型，複雜類型又叫作引用類型

值類型：簡單數據類型，基本數據類型，在存儲時，變量中存儲的是值自己，所以叫作值類型。

引用類型：複雜數據類型，在存儲是，變量中存儲的僅僅是地址（引用），所以叫作引用數據類型。

堆和棧
堆棧空間分配區別：
　　一、棧（操做系統）：由操做系統自動分配釋放，存放函數的參數值，局部變量的值等。其操做方式相似於數據結構中的棧；
　　二、堆（操做系統）：存儲複雜類型(對象)，通常由程序員分配釋放，若程序員不釋放，由垃圾回收機制回收，分配方式卻是相似於鏈表。
注意：JavaScript中沒有堆和棧的概念，此處咱們用堆和棧來說解，目的方便理解和方便之後的學習。

內置對象

JavaScript中的對象分爲3種：內置對象、瀏覽器對象、自定義對象
JavaScript 提供多個內置對象：Math/Array/Number/String/Boolean...
對象只是帶有屬性和方法的特殊數據類型。
學習一個內置對象的使用，只要學會其經常使用的成員的使用（經過查文檔學習）
能夠經過MDN/W3C來查詢
內置對象的方法不少，咱們只須要知道內置對象提供的經常使用方法，使用的時候查詢文檔。

如何學習一個方法？

方法的功能
參數的意義和類型
返回值意義和類型
demo進行測試

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位的年份  如 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()
split()
fromCharCode()
// String.fromCharCode(101, 102, 103);     //把ASCII碼轉換成字符串

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。