JavaScript 基礎知識 - 入門篇(二)

11. 函數

11.1 函數的基礎知識

爲何會有函數？

在寫代碼的時候，有一些經常使用的代碼須要書寫不少次，若是直接複製粘貼的話，會形成大量的代碼冗餘；

函數能夠封裝一段重複的javascript代碼，它只須要聲明一次，就能夠屢次調用；

冗餘代碼：

• 冗餘：多餘的重複或囉嗦內容

• 缺點：

  • 代碼重複，可閱讀性差
  • 不易維護，若是代碼邏輯變了，全部地方的代碼都要跟着改，效率過低了

11.2 函數的聲明與調用

函數聲明的語法：

var 是用來聲明變量的， 函數是用 function來聲明的，一個函數通常是用來作一件事情的。

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

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

調用函數的語法：

函數名();

函數體只有在調用的時候纔會執行，調用須要()進行調用。能夠調用屢次

示例代碼：

// 聲明函數
function sayHi (){
    // 函數體
    console.log("Hi!!");
}
// 調用這個函數
sayHi();  // console.log("Hi!!");

// 注意
console.log(sayHi);  // 打印的是整個函數 
// sayHi:指的就是這個函數
// ():指的是調用
// sayHi():這個函數的調用結果

12.3 聲明函數的兩種方式

一、函數聲明(命名函數)：

// 聲明一個函數而且命名了
function 函數名(){
    函數體;
}
函數名();  // 調用函數

/********示例代碼***********/
function fn(){
    console.log("哈哈哈");
}
fn();

二、函數表達式(匿名函數)：

// 必須先聲明才能調用
var 函數名 = function(){
    函數體;
}
函數名(); // 調用函數

/********示例代碼***********/
var fn = function(){
    console.log("哈哈哈");
}
fn();

這兩種函數的區別：

• 命名函數能夠先調用，再聲明，由於預解析
• 函數表達式必須先聲明，再調用（在DOM中註冊事件的時候用的很是的多）

匿名函數：

沒有名字的函數，叫作匿名函數。匿名函數沒有辦法直接用，須要 賦值給變量或者 自調用

自調用函數也叫自執行函數，聲明和調用一塊兒

• 能夠防止變量全局污染
• 匿名函數自調用示例代碼：

(function(n1,n2){
    console.log(n1);        // 1
    console.log(n2);        // 2
    var name = "張三"
    var age = 18;
    function sayHello() {
      console.log(age);     // 18
      console.log(name);    // "張三"
    }
    sayHello();
})(1,2)

11.4 函數的參數

形式參數： 在聲明一個函數的時候，爲了函數的功能更加靈活，有些值是固定不了的，對於這些固定不了的值。咱們能夠給函數設置參數。這個參數沒有具體的值，僅僅起到一個 佔位置的做用，咱們一般稱之爲形式參數，也叫 形參。

實際參數： 若是函數在聲明時，設置了行參，那麼在函數調用的時候就須要傳入對應的參數，咱們把傳入的參數叫作實際參數，也叫實參。

語法：

//帶參數的函數聲明
function 函數名(形參1, 形參2, 形參...){
  //函數體
}

//帶參數的函數調用
函數名(實參1, 實參2, 實參3);

特色：

• 在函數調用的時候，須要傳遞對應的參數，把實參的值賦值給形參。
• 實參若是多於形參的個數：多傳的參數就丟棄了
• 實參若是少於形參的個數：沒有傳的參數，值就是undefined。（容易出問題）

示例代碼：

// 設置兩個形參
function getSum(num1,num2){
    console.log(num1+num2);
}
// 調用的時候傳兩個值進去
getSum(10,20);   // 打印出來就是 30

計算n1-n2之間全部數的乘積：

function getProduct(n1, n2) {
    var product = 1;
    for (var i = n1; i <= n2; i++) {
        product *= i;
    }
    console.log(product);
}
getProduct(1, 5);  // 120

11.5 函數的返回值

當函數執行完的時候，咱們指望函數給我一些反饋（好比計算的結果），這個時候可讓函數返回一些東西。也就是返回值。函數經過 return返回一個返回值

返回值語法：

//聲明一個帶返回值的函數
function 函數名(形參1, 形參2, 形參...){
  //函數體
  return 返回值;
}

//能夠經過變量來接收這個返回值
var 變量 = 函數名(實參1, 實參2, 實參3);

函數的調用結果就是返回值，所以咱們能夠直接對函數調用結果進行操做。

示例代碼：

// 計算 n1- n2之間全部數的乘積
function getProduct(n1, n2) {
    var product = 1;
    for (var i = n1; i <= n2; i++) {
        product *= i;
    }
    return product; // 返回計算的值
}
var pro = getProduct(1, 5); // 用變量pro接收一下返回的值
console.log(pro);   // 120

注意：

• 函數一碰到return，就表明函數結束了。return後面的代碼不會執行了。
• 函數能夠沒有返回值， 會在最後面返回一個undefined。

11.6 函數三要素

函數三要素包括：

• 函數名
• 參數
• 返回值

11.7 文檔註釋

關於文檔註釋，javascript中還有一種註釋叫作文檔註釋，常常用在函數 聲明處，用來解釋這個函數的做用。

文檔註釋： /** 這是文檔註釋 */

之後寫的函數的聲明，都應該加上文檔註釋，方便閱讀

示例代碼：

/**
 * 求圓的面積
 * @param r {number} 圓的半徑
 * @returns {number} 圓的面積
 */
function getArea (r) {
    return Math.PI * r * r;
}

11.8 函數綜合練習

一、對任意數組從小到大排序

// 封裝一個從小到大冒泡排序的函數
function bubbleSort(arr){
    for(var i = 0; i < arr.length - 1; i++){
        var flag = true;
        for(var j = 0; j < arr.length -1 -i; j++){
            if(arr[j] >arr[j+1]){
                flag =false;
                var temp = arr[j];
                arr[j] = arr[j+1];
                arr[j + 1] = temp;
            }
        }
        if(flag){
            break;
        }
    }
    return arr;
}
console.log(bubbleSort([12, 56, 14, 68, 45, 25, 17, 33]));
console.log(bubbleSort([25, 65, 48, 11, 15, 54, 24, 63]));

二、求任意數的階乘(從1到n的積)

function getProduct (n){
    var product = 1; 
    for(var i = 1; i <= n; i++){
       product *= i; 
    }
    return product;
}
console.log(getProduct(5));  // 120
console.log(getProduct(3));  // 6

三、求任意數組中的最大值與最小值

function getMaxAndMin(arr) {
    var max = arr[0];
    var min = arr[0];
    for (var i = 0; i < arr.length; i++) {
        if (max < arr[i]) {
            max = arr[i];
        }
        if (min > arr[i]) {
            min = arr[i];
        }
    }
    return [max, min]; // 返回一個數組
}
console.log(getMaxAndMin([11, 45, 59, 12, 8, 36, 14, 25]));  // [59 8]

11.9 函數的做用域

在函數中，只有 全局做用域和 函數做用域，由於在 if、 while、 for等語句中定義的變量都是全局變量。

全局變量： 在最外層聲明的變量就是全局變量，全局變量在任何地方都能訪問的到。

局部變量： 在函數中聲明的變量，就是局部變量，局部變量只有在當前函數體內可以訪問。

隱式全局變量： 沒有使用var定義的變量也是全局變量。

做用域： 變量能夠發揮做用的區域

全局做用域： 在script標籤內，函數外定義的做用域就是全局做用域。在全局做用域中定義的變量都是全局變量。

函數做用域： 在函數中的區域叫作函數做用域，在函數做用域中定義的變量就是局部變量，只能在當前函數內訪問。

11.10 預解析

js解析器執行js代碼的時候，分爲兩個過程： 預解析過程和 代碼執行過程

預解析過程：

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

預解析例題：

第一題：

console.log(a);    // 打印a這個函數總體
var a = 1;
function a(){
console.log("呵呵");
}
console.log(a);    // 1

// 預解析後爲
/**
var a;
function a(){
    console.log("呵呵");
}
console.log(a);    // 打印a這個函數總體
a = 1;
console.log(a);    // 1
*/

第二題：

var num = 10;
fn1();
function fn1() {
    //在函數調用的時候，這個函數也會作預解析操做。
    console.log(num);   // undefined
    var num = 20;
    console.log(num);   // 20
}
console.log(num);       // 10


// 預解析後爲
/**
var num ;
function fn1() {
    var num;
    console.log(num);   // undefined
    num = 20;
    console.log(num);   // 20
}
num = 10;
fn1();
console.log(num);       // 10
*/

第三題：

var a = 18;
var b = 30;
fn();
function fn() {
    var b = 9;
    console.log(a); // undefined
    console.log(b); // 9
    var a = 20;
}


// 預解析後爲
/**
var a;
var b;
function fn() {
    var b;
    b = 9;
    var a;
    console.log(a);     // 本身做用域裏有的就不要出去找
    console.log(b);     // 9
    a = 20;
}
a = 18;
b = 30;
fn();
*/

第四題：

fn();
var b = 10;
console.log(c); // 9
console.log(b); // 10
console.log(a); // 報錯

function fn() {
    var a = 9;
    b = 9;
    c = 9;
    console.log(a); // 9
    console.log(b); // 9 
    console.log(c); // 9
}


// 預解析以後
/**
var b;
function fn() {
    var a;
    a = 9;
    b = 9;
    c = 9;
    console.log(a); // 9
    console.log(b); // 9
    console.log(c); // 9
}
fn();
b = 10;
console.log(c); // 9
console.log(b); // 10
console.log(a); // 報錯
*/

第五題：

function fn() { 
    console.log(num1);  // undefined
    console.log(num2);  // undefined
    console.log(num3);  // 30
    var num1 = 10;
    var num2 = 20;
    num3 = 40;
    console.log(num1);  // 10
    console.log(num2);  // 20
    console.log(num3);  // 40
}
var num1 = 20;
var num3 = 30;
fn();
console.log(num1);      // 20
console.log(num3);      // 40
console.log(num2);      // 報錯


// 預解析以後
/**
var num1;
var num3;

function fn() {
    var num1;
    var num2;
    console.log(num1); // undefined
    console.log(num2); // undefined
    console.log(num3); // 30
    num1 = 10;
    num2 = 20;
    num3 = 40;
    console.log(num1); // 10
    console.log(num2); // 20
    console.log(num3); // 40
}
num1 = 20;
num3 = 30;
fn();
console.log(num1); // 20
console.log(num3); // 40
console.log(num2); // 報錯
*/

11.11 遞歸函數

函數直接或者間接調用本身，必需要留 出口，否則就調死了

示例代碼：

// 用遞歸求1-100的和
/* 
    以前封裝過一個getSum的函數好比getSum(100)，就是求的1-100的和
    如今咱們能夠這樣理解：
    1-100的和咱們能夠看作是 100 + getSum(99)
    getSum(99) 能夠當作 99 + getSum(98)。。。
    依次這樣推下去，可是要注意，到getSum(1)的時候,要留出口，不然會一直死循環下去
 */
function getSum(n) {
    if (n == 1) {       // 必定要留出口
        return 1;
    }
    return n + getSum(n - 1);
}
console.log(getSum(100));

11.12 回調函數

回調函數：把函數當成參數來使用，那麼這個函數就叫回調函數。函數也是一種數據類型

示例代碼：

/*
思考，以前封裝了一個bubbleSort排序的函數，可是隻能排元素是數字的數組
如今想要判斷字符串的長度，或者對象的屬性的時候就很麻煩，就須要從新寫一個函數
好比字符串長度，就須要是arr[j].length - arr[i+1].length
*/
function bubbleSort(arr, fn) {
    for (var i = 0; i < arr.length; i++) {
        var flag = true;
        for (var j = 0; j < arr.length - 1 - i; j++) {
        
            // 傳一個函數進來，而且將arr[j], arr[j + 1]做爲兩個參數傳進去
            if (fn(arr[j], arr[j + 1]) > 0) {
                flag = false;
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
        if (flag) {
            break;
        }
    }
}
// 純數字數組
var arr = [4, 3, 1, 6, 22, 21, 41, 4];
// 調用的時候，咱們須要將fn函數的兩個參數也傳進去
// 這種把一個函數做爲參數傳進另外一個函數的方式就叫回調函數
bubbleSort(arr, function(a, b) { // a b 就至關於 arr[j] 和 arr[j+1]
    return a - b;
    // 若是是 return b - a 就至關於，上面的 arr[j+1] - arr[j]>0 那麼就是從大到小排序 
});
console.log(arr);

// 封裝後的排序函數也能夠直接根據字符串的長度進行排序了
var arrStr = ["aaa", "bb", "cccc", "d"];
bubbleSort(arrStr, function(a, b) {
    // 由於傳進去的是一個函數，arr[j] 和 arr[j+1]是以兩個參數的形式傳進去的
    // 當數組元素是字符串的時候，就能夠進行.length操做了
    return a.length - b.length;
});
console.log(arrStr);

12. 對象

12.1 對象的基本概念

無序的鍵值對集合

爲何要有對象？

在 javascript中：對象跟數組、函數同樣，都是一種複雜數據類型，是一系列相關的屬性的集合，能夠很方便對變量和函數進行管理。

什麼是對象？

現實生活中: 萬物皆對象，對象是一個 具體的事物，一個具體的事物就會有 行爲和 特徵。

javascript: javascript中的對象其實就是生活中對象的一個抽象。

• 事物的特徵在對象中用屬性來表示。
• 事物的行爲在對象中用方法來表示。
• 對象中的方法，其實就是對象裏面的函數。

舉個例子：

特徵：名字、性別、年齡、身高、體重、愛好、星座、血型    (屬性)
行爲：罰錢、吃肉、打招呼                             (方法: 對象裏面的函數)

12.2 建立對象

12.2.1 經過構造函數建立

經過 var 對象名 = new Object();的方式建立一個對象，經過對象名 .的語法，給這個對象添加 屬性；經過 通對象名.方法名 = function(){} 給這個對象加上一個 方法。

示例代碼：

// 建立一個英雄對象，而且給他加上屬性和方法
var hero = new Object(); // 建立一個空的英雄對象

// 經過"."語法給這個hero加上一些屬性
hero.name = "蓋倫";         // 給對象添加了一個name的屬性
hero.skill = "正義審判";    // 給對象添加一個技能屬性

// 經過 對象名.方法名 = function(){} 給hero加上一個方法
hero.attack = function() {
  console.log("蓋倫攻擊了小怪物");
}
attack();

12.2.2 經過對象字面量

經過 var 對象名 = {}的方式建立一個對象，經過 鍵值對的方式，給這個對象加上屬性和方法。

字面量：11 "abc" true [] {}等 {}就至關於 new Object();

示例代碼：

// 建立一個英雄對象，而且給他加上屬性和方法
var hero = {
    name  : "蓋倫",          // 鍵值對的形式給hero加上屬性
    skill : "正義審判",
    
    attcck : function(){    // 鍵值對的形式給hero加上方法
        console.log("蓋倫攻擊了小怪物");
    }
}

注意： 鍵值對之間用,號隔開

12.2.3 關於 this

示例代碼：

var hero = {
    name  : "蓋倫", 
    skill : "正義審判",
    
    attcck : function(){    
        // 這裏的this指向的是當前的對象，表示當前對象下的skill屬性，若是直接寫skill 是報錯的
        console.log("蓋倫使用了"+this.skill+"攻擊了敵人");
    }
}

注意：

• this必定要出如今方法中才有意義，不在方法中的this沒有意義。
• 在方法中出現的this，指的是當前對象，即調用這個方法的對象

12.3 操做對象的屬性

操做對象的屬性分爲 存值和 取值

12.3.1 "." 語法

存值：

對象名.屬性名 = "值";

存值-示例代碼：

var obj = {
    age:18,
    name:"蓋倫"
};

// 存值
obj.hobby = "K人";
obj.age = 20;
console.log(obj); // {age:20,name:"蓋倫",hobby:"K人"}

存值-注意：

• 若是對象原來就有這個屬性，會覆蓋原來的值。
• 若是對象沒有這個屬性，就會新增長這個屬性。(屬性在對象中是獨一無二的)

取值：

對象名.屬性名

取值-示例代碼：

var obj = {
    age:18,
    name:"蓋倫"
};

// 取值
console.log(obj.age);  // 18
console.log(obj.name); // "蓋倫"

取值-注意：

• 若是對象有這個屬性，就會返回對應的值
• 若是對象沒有這個屬性，就會返回undefined。

12.3.2 "[]"語法

關聯數組的語法,把對象當成數組來看待

存值：

對象名[屬性名(下標)] = "值"; 數組的下標是數字，對象的下標是 字符串

存值-示例代碼：

var obj = {
    age:18,
    name:"蓋倫"
};

// 存值
obj["hobby"] = "K人";
obj["age"] = 20;
console.log(obj); // {age:20,name:"蓋倫",hobby:"K人"}

取值：

對象名[屬性名(下標)]

取值-示例代碼：

var obj = {
    age:18,
    name:"蓋倫"
};

// 取值
console.log(obj["age"]);  // 18
console.log(obj["name"]]); // "蓋倫"

注意： []語法是將對象當數組看，數組的下標是數字，對象的下標是字符串，取值的時候必定要注意

12.3.3 兩種方法的區別

當屬性名是一個字符串存儲在變量中的時候，只能使用 關聯數組的方式。

示例代碼：

var obj = {
    age:18,
    name:"蓋倫"
};
var temp = "age";
console.log(obj[temp]); // 打印 18 ==> obj["age"]
console.log(obj.temp);  //  點語法就不行，undefined 點語法會去對象中找temp的屬性

大部分狀況，都用.語法，比較簡單，若是屬性的名字存在一個變量中，只能用[]語法

12.4 遍歷對象

經過 for..in語法能夠遍歷一個對象：for(var 鍵 in 對象)

示例代碼：

var hero = {
    name : "蓋倫",
    skill: "正義審判",

    attcck: function() {
        console.log("蓋倫使用了" + this.skill + "攻擊了敵人");
    }
}

for(var key in hero){      // key表示的是對象的屬性名
    console.log(key);      // 遍歷了全部的屬性名
    console.log(hero[key]); // 遍歷全部的值
    
    console.log(hero.key);  // undefined 這樣寫是錯的，找的是hero的key屬性
}

遍歷對象案例：

var datas = [
    {name:"露娜", age:18, score:100, gender:"男"},
    {name:"妲己", age:1000, score:101, gender:"女"},
    {name:"甄姬", age:888, score:102, gender:"女"},
    {name:"大喬", age:21, score:103, gender:"女"},
    {name:"小喬", age:22, score:104, gender:"女"}
];

document.write("<table>");
for (var i = 0; i < datas.length; i++) {
    document.write("<tr>");
    var data = datas[i];
    for (var key in data) {
        document.write("<td>");
        document.write(data[key]);
        document.write("</td>");
    }
    document.write("</tr>");
}
document.write("</table>");

效果圖：

注意：遍歷的時候for後面是鍵(屬性名)，in後面是對象

判斷一個對象中是否有某一屬性：

in關鍵字能夠查看對象是否擁有某個屬性。

var obj = {
    name:"zs",
    age:18,
    score:100
}
//in關鍵字能夠查看對象是否擁有某個屬性。
console.log( "sex" in obj );  // false
console.log( "name" in obj ); // true

12.5 查看對象的類型

一、typeof 查看對象類型

全部的複雜類型，使用 typeof關鍵字的話，都是 object

示例代碼：

var arr = new Array();
console.log(typeof arr);     // Object

var obj = new Object();
console.log(typeof obj);     // Object

var student = new Object();
console.log(typeof student); // Object

function fn(){
    
}
console.log(typeof student); // Function

注意：

• typeof只能區分出來是複雜類型，並不能區分出具體類型
• 函數比較特殊，在js裏面的地位比較高，typeof能夠查看到它的類型

二、instanceof 查看對象類型

instance: 實例 這種方法也不能直接得到對象的具體類型

示例代碼：

var arr = new Array();
console.log(arr instanceof Array);   // true 說明arr的實例是Array

這種方法仍是比較麻煩，看下面這種方法

三、.constructor.name 查看對象類型

藉助於js原型裏的 constructor關鍵字，能夠直接獲取到對象的具體類型

示例代碼：

var arr = new Array();
console.log(arr.constructor.name);   // Array

var obj = new Object();
console.log(obj.constructor.name);   // Object

12.6 批量建立對象

一、使用普通函數批量建立對象

將建立對象封裝在一個函數裏，須要批量建立對象的時候，只需調用這個函數便可

示例代碼：

// 封裝
function createObj(name,age,gender){
    var heros = new Object();
    student.name = name;
    student.age  = age;
    student.gender = gender;
    student.sayHello = function () {
        console.log("你們好,我是"+this.name);
    }
    return heros;
}

// 調用
var stu1 = createObj("露娜",15,"女");
console.log(stu1);  // 打印這個對象
stu1.sayHello();    // "你們好我是露娜"


var stu2 = createObj("小喬",800,"女");
console.log(stu2);  // 打印這個對象
stu2.sayHello();    // "你們好我是小喬"

優勢：能夠同時建立多個對象
缺點：建立出來的沒有具體的類型，都是object類型的

二、構造函數批量建立對象

構造函數 ，是一種特殊的函數。主要用來在建立對象時初始化對象(給對象加屬性和方法)，即爲對象成員變量賦初始值，總與 new運算符一塊兒使用在建立對象的語句中。

通常建立一個對象的時候直接new object出來的沒有具體的類型，都是object類型的，要想分類的更清楚就須要用到構造函數建立對象

首字母須要大寫，一般是名詞，表示一類對象。

語法：

// 首字母須要大寫，一般是名詞，表示一類對象。
function Teacher(){
    // 函數體
}
var cjk = new Teacher();            // 若是沒有new, cjk就是一個普通的函數
console.log(cjk.constructor.name);  // 輸出的對象類型爲 Teacher

示例代碼：

// 構造函數 this指向new出來的新對象
function Teacher(name, age){
    this.name = name;
    this.age = age;
    this.sayHello = function () {
        console.log("你們好，我是"+this.name+"，今天晚上我給你們唱首歌");
    }
}

// new 建立了一個空對象 類型爲Teacher
var cjk = new Teacher("蒼井空", 18);
console.log(cjk);   // 對象的類型爲Teacher {name:"蒼井空",age:18}

var bdyjy = new Teacher("波多野結衣", 19);
console.log(bdyjy); //  對象的類型爲Teacher {name:"波多野結衣",age:19,sayHello:function(){}}
bdyjy.sayHello();   //  你們好，我是波多野結衣，今天晚上我給你們唱首歌

new作了四件事情：

• new 會建立一個空的對象，而且對象的類型是new 後面跟的名字;
• 讓函數內部的this指向這個空對象，操做this就至關於操做了這個對象;
• 執行構造函數
• 返回這個對象

優勢：

• 建立出來的對象，類型是可變的
• 寫法更加簡潔

案例-批量建立一個英雄對象：

//屬性：名字、性別、技能、口號、等級、金錢
//行爲：打怪獸

function Hero(name, gender, skill, slogan, level, money){
//給this加屬性和方法
    this.name = name;
    this.gender =gender;
    this.skill = skill;
    this.slogan = slogan;
    this.level = level;
    this.money = money;
    
    this.attack = function (n) {
      console.log(this.name + "使用了" + this.skill + "攻擊了" + n);
    }
}

var atm = new Hero("奧特曼", "不詳", "激光", "呵呵", 100, 0);
console.log(atm);      // 返回了一個Hero類型的對象
atm.attack("小怪獸");  // 奧特曼使用了激光攻擊了小怪獸

var dm = new Hero("蓋倫", "男", "大寶劍", "人在塔在", 18, 3150);
console.log(dm);       // 返回了一個Hero類型的對象
dm.attack("防護塔");   // 蓋倫使用了大寶劍攻擊了防護塔

12.7 值類型與引用類型

一、值類型(簡單數據類型)

值類型 : 又叫簡單數據類型，例如： number、 string、 boolean、 undefined、 null

變量儲存數據的時候，存儲的直接就是這個值自己

示例代碼：

var num = 12;
var num1 = num;
num1 = 20;
console.log(num);   // 12
console.log(num1);  // 20

二、引用類型(複雜數據類型)

引用類型 ：又叫複雜數據類型，例如： Object、 Function、 Array和 自定義類型

變量在儲存數據的時候，不會直接存儲這對象，存儲的是這個對象的地址

示例代碼：

var obj = {             // 在內存中存儲了一個地址
    name: "凹凸曼",
    age: 100
}
    
var obj1 = obj;     // 把這個地址賦值給了obj1，obj1就有了obj的全部屬性
obj1.name = "奧特曼";   // 由於obj1 和 obj 用的是同一個地址，因此當obj1的屬性值改變的時候，obj也會改變
console.log(obj.name);  // "奧特曼"
console.log(obj1.name); // "奧特曼"

引用類型詳解：

//複雜類型變量不會存這個對象，只會存這個對象的地址。
var hero = {
    name: "大黃蜂",
    age: 100,
    car: {
        name: "科邁羅",
        price: 400000
    },
    brothers: ["擎天柱", "鐵皮", "救護車"]
};

console.log(hero.car.name);     // "科邁羅"
console.log(hero.brothers[0]);  // "擎天柱"

面試題(一)：

var num1 = 55;
var num2 = 66;
function f1(num, num1) {
    num = 100;
    num1 = 100;
    num2 = 100;
    console.log(num);   //100
    console.log(num1);  //100
    console.log(num2);  //100
}

f1(num1, num2);
console.log(num1);      //55
console.log(num2);      //100
console.log(num);       //報錯

面試題(二)：

function Person(name, age) {
    this.name = name;
    this.age = age;
}
var p1 = new Person("zs", 18);
var p2 = p1;

p2 = new Person("ls", 20);

p2.name = "ww";

console.log(p1.name); // zs
console.log(p2.name); // ww

三、棧內存與堆內存

棧內存: 空間比較小，但運算速度很是的快

堆內存：空間很是大，但運算速度相對而言比較慢

12.8 基本包裝類型

簡單類型有沒有屬性和方法？ JS爲了咱們操做方便，內置了對應的複雜類型( String、 Number、 Boolean)

咱們使用簡單類型的時候，能夠直接使用複雜類型的屬性和方法。(js會自動幫咱們把簡單類型轉換成複雜類型。用完以後，又自動的給咱們轉成了簡單類型)

簡單類型： number string boolean undefined null

複雜類型： Object Function Array String Number Boolean

基本包裝類型：

• 對於string number boolean基本類型來講，能夠直接使用屬性和方法。
• 自動把簡單類型轉換成對應的複雜類型
• 調用複雜類型的屬性或者方法獲得結果
• 自動的把複雜類型轉換成簡單類型

12.9 僞數組(類數組)

不是數組，是對象， 叫僞數組（能夠跟數組同樣的使用下標，也能夠遍歷）

var obj = {
    0:"呵呵",
    1:"哈哈",
    2:"嘻嘻",
    3:"嘿嘿嘿",
    4:"嗚嗚",
    length:5
}

for(var k in obj){
    console.log(obj[k]);
}

12.10 arguments 對象

JavaScript中， arguments對象是比較特別的一個對象，其實是當前函數的一個內置屬性。也就是說全部函數都內置了一個 arguments對象， arguments對象中存儲了傳遞的全部的實參。 arguments是一個 僞數組，所以及能夠進行 遍歷

示例代碼：

// Math.max 的原理是什麼？
// 不知道形參個數的時候，怎麼判別一個最大值或者最小值呢？
// arguments對象中 存儲的是全部的實參 是以一個僞數組的形式存在的
function max(){
    var m = arguments[0];
    // 因此無論你傳多少參數進來，arguments就儲存多少參數
    for(var i = 0; i < arguments.length; i++) {
        if(m < arguments[i]){
            m = arguments[i];
        }
    }
    return m;
  }
}
console.log(max(1, 2, -1));     // 2
console.log(max(1, 2, 4, 10));  // 10

12.11 JSON 對象

JSON( JavaScript Object Notation)是一種輕量級的數據交換格式，採用徹底獨立於語言的文本格式，是理想的數據交換格式。同時， JSON是 JavaScript原生格式，這意味着在 JavaScript中處理 JSON數據跟處理對象是同樣的。

JSON的屬性必須用雙引號引發來，對象字面量能夠省略

示例代碼：

// js裏面，屬性名能夠用雙引號引發來，也能夠不引發來。
var obj = {
    name:"張三",
    age:18
}

// JSON屬性名必須用雙引號引發來
var json = {
    "name":"張三",
    "age":18
 }


//json是js對象    js對象不必定是json
console.log(json.name);     // "張三"
console.log(json["name"]);  // "張三"

json對象的兩個方法：

• 對象轉換爲JSON格式使用：JSON.stringify；
• JSON裝換爲對象格式：JSONparse()；

13. 內置對象

JS內置對象就是指 Javascript自帶的一些對象，供開發者使用，這些對象提供了一些經常使用的的功能。

常見的內置對象有Math、String、Array、Date等

13.1 Math 對象

Math對象中封裝不少與數學相關的屬性和方法。 Math對象比較特殊，不須要 new。

一、屬性 PI

Math.PI 表示的就是圓周率，一般計算圓的周長或者面積的時候會用到。也能夠用做表示角度、弧度( π= 180°)

console.log(Math.PI);  // 3.141592653589793

二、最大值/最小值

Math.max(x,y) 表示求出二者之間的最大值

console.log(Math.max(10,99)); // 返回99

Math.min(x,y) 表示求出二者之間的最小值

console.log(Math.min(10,99)); // 返回10

三、取整

Math.ceil() 天花板函數(向上取整)

• 整數向上取整仍是整數；
• 正小數向上取整，整數部分加1，小數部分捨去；
• 負小數向上取整，整數部分不變，小數部分捨去；

示例代碼：

console.log(Math.ceil(2));    // 2
console.log(Math.ceil(1.2));  // 2
console.log(Math.ceil(1.8));  // 2
console.log(Math.ceil(-1.2)); // -1
console.log(Math.ceil(-1.8)); // -1

Math.floor() 地板函數(向下取整)

• 整數向下取整仍是整數；
• 正小數向下取整，整數部分不變，小數部分捨去；
• 負小數向下取整，整數部分減1，小數部分捨去；

示例代碼：

console.log(Math.floor(2));    // 2
console.log(Math.floor(1.2));  // 1
console.log(Math.floor(1.8));  // 1
console.log(Math.floor(-1.2)); // -2
console.log(Math.floor(-1.8)); // -2

Math.round() 四捨五入(若是是.5，則取更大的那個數)

• 正小數四捨五入，對小數點後面一位數進行判斷，大於等於5整數部分加1，小數捨去;小於5,整數部分不變，小數部分捨去

• 負小數四捨五入，對小數點後面一位進數行判斷：

  • 小於5的時候，小數捨去，整數部分不變；
  • 大於5的時候，小數捨去，整數部分減 1；
  • 等於5的時候要再判斷，若是後面沒有數了，小數捨去，整數部分不變；若是後面還有數，小數捨去，整數部分減 1；

示例代碼：

console.log(Math.round(1.2));    // 1
console.log(Math.round(1.5));    // 2
console.log(Math.round(1.56));   // 2
console.log(Math.round(1.6));    // 2

console.log(Math.round(-0.3));   // 0
console.log(Math.round(-0.6));   // -1
console.log(Math.round(-1.5));   // -1
console.log(Math.round(-1.6));   // -2
console.log(Math.round(-1.56));  // -2

四、隨機數

Math.random() 返回一個 [0,1)之間的數，能取到 0，取不到 1

示例代碼：

// 得到0-5的隨機數，包括0-5
// parseInt：取整
console.log(parseInt(Math.random() * 6)); // 由於隨機數 能取到0，取不到1，要想返回5 就須要乘以6 


// 得到3-5之間的隨機數
// 3-5？能夠先取到隨機數0-2，而後再加3 得到的就是3-5
console.log(parseInt(Math.random() * 3) + 3);

五、絕對值

Math.abs() 對一個數進行絕對值操做,純數字字符串也能夠轉換

示例代碼：

console.log(Math.abs(-11));   // 11
console.log(Math.abs(11));    // 11
console.log(Math.abs("-11")); // 11
console.log(Math.abs("aaa")); // NaN

六、次冪和開平方

Math.pow(num, power) 求 num 的 power 的次方

示例代碼：

console.log(Math.pow(2,4));   // 2的4次方 16

Math.sqrt(num) 爲 num 開平方根

示例代碼：

console.log(Math.sqrt(9));   // 爲9開平方根  3

13.2 Date對象

Data 對象是用來處理日期和時間的

13.2.1 建立一個日期對象

使用構造函數建立一個當前時間對象 var date = new Date();

var date = new Date();
console.log(date); // Fri Nov 17 2017 11:59:19 GMT+0800 (中國標準時間)

建立一個指定時間的日期對象 var date = new Date(指定時間);

var date = new Date("2017-03-22");          //建立一個指定時間的日期對象 Wed Mar 22 2017 08:00:00 GMT+0800 (中國標準時間)
var date = new Date("2017-03-22 00:52:34"); //建立一個指定時間的日期對象 Wed Mar 22 2017 00:52:34 GMT+0800 (中國標準時間)

13.2.2 日期格式化

日期格式化，通常用到的很少，經過格式化能夠得到當前日期的日期部分或者時間部分

var date = new Date();
date.toString();            // 默認的日期格式
date.toLocalString();       // 本地風格的日期格式(存在兼容性)
date.toDateString();        // 得到當前日期時間的，日期部分 Fri Nov 17 2017
date.toLocalDateString();   // 本地風格的日期部分(存在兼容性)
date.toTimeString();        // 得到當前日期時間的，時間部分 13:23:42 GMT+0800 (中國標準時間)
date.toLocalTimeString();   // 本地風格的時間部分(存在兼容性)

13.2.3 獲取日期的指定部分

• getMilliseconds(); 獲取毫秒值
• getSeconds(); 獲取秒
• getMinutes(); 獲取分鐘
• getHours(); 獲取小時
• getDay(); 獲取星期，0-6 0：星期天
• getDate(); 獲取日，即當月的第幾天
• getMonth(); 返回月份，注意從0開始計算，這個地方坑爹，0-11
• getFullYear(); 返回4位的年份 如 2016

示例代碼：封裝一個格式 xxxx-xx-xx xx:xx:xx 的日期函數

var date = new Date();
var year = date.getFullYear();     // 獲取當前時間的年份

var month = date.getMonth() + 1;   // 獲取當前時間的月份，注意月份是從0開始的0-11，因此加1
addZore(month);                    // 得到的月份有多是一位數，此時須要給他再拼接一位

var d = date.getDate();            // 得到當前時間的日期天數
addZore(d);

var h = date.getHours();           // 獲取當前時間的小時
addZore(h);

var m = date.getMinutes();         // 獲取當前時間的分鐘
addZore(m);

var s = date.getSeconds();         // 獲取當前時間的秒
addZore(s);

function addZore(n) {
    return n > 10 ? n : "0" + n;   // 判斷獲取到的數字大於10的時候 返回自己，小於的時候須要拼串
}

var dateStr = year + "-" + month + "-" + d + " " + h + ":" + m + ":" + s;
console.log(dateStr); // 2017-11-17 13:58:53

13.2.4 時間戳

1970年01月01日00時00分00秒起至如今的總毫秒數叫作時間戳

獲取時間戳：

var date = new Date();
// 方法一
console.log(date.getTime()); // getTime的方法得到毫秒數

// 方法二
console.log(+date);    // 直接經過計算的方式轉換成毫秒數

示例代碼：計算代碼執行的時間

var start = new Date();
var sum = 0;
// 電腦性能很差的小夥伴 不要這麼搞  循環的次數少一點
for (var index = 0; index < 1000000000; index++) {
    sum += index;
}
console.log(sum);  // 499999999067109000
var end = new Date();
console.log(end - start);  // 17899

13.3 Array 對象

數組對象在javascript中很是的經常使用

13.3.1 數組轉換成字符串 join()

將數組的值拼接成字符串

語法：array.join(separator)

• 數組的每一項默認的拼接符是逗號
• 想要改變拼接符就在join()方法的括號裏傳入其餘的拼接字符

示例代碼：

var arr = ["大喬","小喬","甄姬","妲己","露娜"];
var str = arr.join();
console.log(str);  // "大喬,小喬,甄姬,妲己,露娜"

// 用「-」拼接符
var arr2 = ["大喬","小喬","甄姬","妲己","露娜"];
var str2 = arr2.join("-");
console.log(str2);  // "大喬-小喬-甄姬-妲己-露娜"

13.3.2 數組的增刪操做

一、arr.push() 在數組最後面 添加元素，返回新數組的長度

var arr = ["大喬","小喬","甄姬"];
console.log(arr.push("妲己", "露娜"));  // 返回 5
console.log(arr);                       // ["大喬","小喬","甄姬","妲己","露娜"]

二、arr.pop() 在數組最後面刪除一個元素，返回刪除的那個元素

var arr = ["大喬","小喬","甄姬","妲己", "露娜"];
console.log(arr.pop());   // 返回 "露娜"
console.log(arr);         // ["大喬","小喬","甄姬","妲己"]

三、arr.unshift() 在數組前面添加元素，返回新數組的長度

var arr = ["甄姬","妲己", "露娜"];
console.log(arr.unshift("大喬","小喬"));   // 返回 5
console.log(arr);                          // ["大喬","小喬","甄姬","妲己", "露娜"];

四、arr.shift() 在數組最前面刪除一個元素，返回刪除的那個元素

var arr = ["大喬","小喬","甄姬","妲己", "露娜"];
console.log(arr.shift());   // 返回 "大喬"
console.log(arr);           // [小喬","甄姬","妲己", "露娜"];

示例代碼(一)：

var arr = ["劉備"];
//添加數據後變成：["趙雲","馬超","劉備","關羽","張飛"]
arr.push("關羽","張飛");
arr.unshift("趙雲","馬超");
console.log(arr);   //  ["趙雲","馬超","劉備","關羽","張飛"]

//刪除數據後變成：["關羽","張飛"]
arr.shift();
arr.shift();
arr.shift();
console.log(arr);   // ["關羽","張飛"]

示例代碼(二)：

var arr = ["趙雲","馬超","劉備","關羽","張飛"];

//把數組的最後一個元素變成數組的第一個元素
arr.unshift(arr.pop());
console.log(arr);        // ["張飛","趙雲","馬超","劉備","關羽"]

13.3.3 數組的翻轉與排序

一、arr.reverse() 翻轉數組

var arr = [1,2,3,4,5];
var newArr = arr.reverse();
console.log(newArr);  // [5,4,3,2,1]   
console.log(arr);     // [5,4,3,2,1]

二、arr.sort() 數組排序

• 默認按照字母順序排序
• sort方法能夠傳遞一個函數做爲參數，這個參數用來控制數組如何進行排序
• a-b 從小到大排序，b-a 從大到小排序

var arr = [1,3,5,7,9,2,4,6,8,10];
var newArr = arr.sort(function(a,b){
    // 若是返回值>0,則交換位置
    return a - b;
});
console.log(newArr);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr);     // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

示例代碼(一)：

// 將字符串數組按照字符長度從大到小排列
var arr = ["ccc", "bb", "a", "dddd"];
arr.sort(function (a, b) {
    return b.length - a.length;
});
console.log(arr);       // ["dddd", "ccc", "bb", "a"]

示例代碼(二)：

//將學生數組按照年齡從小到大排列
var arr = [
    {name:"張三", age: 18, score: 50},
    {name:"李四", age: 70, score: 95},
    {name:"王五", age: 9, score: 33},
    {name:"趙六", age: 38, score: 100},
    {name:"田七", age: 6, score: 8},
    {name:"王八", age: 22, score: 66}
];

arr.sort(function(a, b) {
    return a.age - b.age;
});
console.log(arr);

13.3.4 數組的拼接與截取

一、concat 數組的合併

var arr1 = [1, 3, 5, 7, 9];
var arr2 = [2, 4, 6, 8, 10];

// concat: 合併兩個數組
var newArr = arr1.concat(arr2);
console.log(newArr);        //  [1, 3, 5, 7, 9, 2, 4, 6, 8, 10]

不會影響原來的數組，會返回一個新的數組

二、slice 數組切分

複製數組的一部分(淺拷貝)到一個新數組，並返回這個數組，原來的數組不受影響

slice有兩個屬性，分別是開始的下標和結束的下標，截取的時候包含begin，不包含end

var arr = [1, 3, 5, 7, 9];


// slice: 截取數組的一部分
var newArr = arr.slice(0,3);
console.log(newArr);        //  [1, 3, 5]

三、splice 數組拼接

splice:數組拼接，以新元素來替換舊元素，以此來修改數組的內容，經常使用於刪除數組的某些項

array.splice(start, deleteCount, [items]); start:開始下標 deleteCount:刪除的個數 items:替換的內容

splice 能實現多種用法：

• 找到開始下標，刪除個數爲0，再輸入替換的內容，此時就能夠在數組中任意位置添加元素
• 找到開始下標，須要刪除的個數，再輸入替換的內容，此時就能夠在數組任意位置替換元素
• 找到開始下標，須要刪除的個數，不輸入替換內容，此時就能夠在數組任意位置，刪除任意個數的元素

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 從下標是2的位置開始，刪除0個，把 100 101 添加進去
var newArr = arr.splice(2, 0, 100, 101);
console.log(newArr); // 操做的是原數組，不會返回這個新數組
console.log(arr); // [1, 2,100,101,3, 4, 5, 6, 7, 8, 9, 10]     


// 也能夠替換元素 (此時arr = [1, 2,100, 101, 3, 4, 5, 6, 7, 8, 9, 10] )
arr.splice(0, 2, 98, 99);
console.log(arr); // [98, 99, 100, 101, 3, 4, 5, 6, 7, 8, 9, 10]


// 也能夠用於刪除數組裏的多個元素 (此時arr = [98, 99, 100, 101, 3, 4, 5, 6, 7, 8, 9, 10] )
arr.splice(0, 4);
console.log(arr); // [3, 4, 5, 6, 7, 8, 9, 10]

13.3.5 數組查找元素

indexOf()方法，是用來查找數組中，某個元素首次出現的位置，下標從0開始，找到的話返回位置信息，當找不到的時候返回-1

arr.indexOf(search,[fromIndex]);search:須要搜索的元素，fromIndex:規定在字符串中開始檢索的位置。

示例代碼：

var arr = [1, 5, 8, 11, 1, 2, 9];
arr.indexOf(8);  // 返回2
arr.indexOf(8,1) // 從下標1，日後查找 返回 2 
arr.indexOf(10); // 返回-1 說明找不到

與之對應的還有一個lastIndexOf(),從後往前找

var arr = [1, 5, 8, 11, 1, 2, 9];
arr.lastIndexOf(1);  // 返回4
arr.lastIndexOf(1,3) // 從下標3，往前查找 返回0 
arr.lastIndexOf(10); // 返回-1 說明找不到

13.3.6 清空數組

一、刪除數組中的全部元素

var arr = [1,2,3,4,5];
arr.splice(0,arr.length);
console.log(arr);  // []

二、直接修改數組的長度

var arr = [1,2,3,4,5];
arr.length = 0;
console.log(arr);  // []

三、將數組賦值爲一個空的數組

var arr = [1,2,3,4,5];
arr = [];
console.log(arr);  // []

13.3.7 數組的綜合練習

var arr = ["c", "a", "z", "a", "x", "a", "a", "z", "c", "x", "a", "x"];
//1. 找到數組中第一個a出現的位置
console.log(arr.indexOf("a"));          // 1

//2. 找到數組中最後一個a出現的位置
console.log(arr.lastIndexOf("a"));      // 10

//3. 找到數組中每個a出現的位置
for (var i = 0; i < arr.length; i++) {
    if (arr[i] == "a") {
        console.log(i);                 // 1 3 5 6 10
    }
}

//4. 數組去重，返回一個新數組
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) == -1) {   // 判斷當newArr的數組裏沒有arr[i]的時候
        newArr.push(arr[i]);              // 將arr[i] 添加到newArr中 ["c", "a", "z", "x"]
    }
}
console.log(newArr);

//5. 獲取數組中每一個元素出現的次數
//　首先須要知道 如何判斷一個對象中是否存在某屬性
/*
    var obj = {
        name:"zs",
        age:18,
        score:100
    }
    //in關鍵字能夠查看對象是否擁有某個屬性。
    console.log( "sex" in obj );  // false
*/
var obj = {};
for(var i = 0; i < arr.length; i++){
    // 遍歷數組，判斷對象有沒有這個屬性， 
    if(arr[i] in obj){
        // 若是有這個屬性，讓這個屬性的值+1 
        obj[arr[i]] ++;
    }else{
        // 若是沒有這個屬性，讓這個屬性等於1                    
        obj[arr[i]] = 1;
    }
}
console.log(obj);

13.4 String 對象

字符串能夠當作是一個字符數組（僞數組）。所以字符串也有長度，也能夠進行遍歷。 String對象不少方法的名字和和 Array的同樣。

// 遍歷一段字符串
var str = "abcdefghijk";
for(var i = 0; i < str.length; i++){
    console.log(str[i]);  // "a" "b" "c" "d"...
}

13.4.1 字符串大小寫轉換的方法

小寫轉換成大寫

toUpperCase(), toLocaleUpperCase()是將英文小寫的字符串轉換爲大寫,其中 toLocaleUpperCase()方法則是針對特定地區的實現(如土耳其語會爲Unicode大小寫轉換應用特殊的規則)。

var str = "hello world";
str.toUpperCase(); // "HELLO WORLD"
str.toLocaleUpperCase();

大寫轉換成小寫

toLowerCase(), toLocaleLowerCase()是將英文小寫的字符串轉換爲大寫

var str = "HELLO WORLD";
str.toUpperCase(); // "hello world"
str.toLocaleUpperCase();

注意: 由於是方法，因此必定不要忘記加上()

13.4.2 indexOf 查找指定字符串

indexOf()方法，是用來判斷指定字符，在當前字符串中 首次出現的位置，下標從 0開始，找到的話返回位置信息，當找不到的時候返回 -1

示例代碼：

var str= "good good study , day day up!";
str.indexOf("day");  // 返回18
str.indexOf("good"); // 返回0
str.indexOf("GOOD"); // 返回-1 說明找不到

與之對應的還有一個lastIndexOf(),是用來從後面開始查找字符第一次出現的位置

var str= "good good study , day day up!";
str.lastIndexOf("good");  // 返回 5

13.4.3 trim 去除空白

trim();方法，是用來去除字符串兩邊的空格，內部空格不會去除

var str = " A B C ";
console.log(str.trim());  // "A B C"

13.4.4 slice 截取字符串

slice()方法是用來截取一段字符串的， str.slice(start,end);它的兩個參數都是表示下標的，一個表示開始，一個表示結束(截取時不包括結束下標)

說明：

• start下標從0開始的str指定部分起始索引。若是start爲負，將它做爲length+start處理，此處length爲字符串的長度。
• end下標從0開始的str指定部分結束索引。若是end爲負，將它做爲length+end處理，此處length爲字符串的長度。

示例代碼：

// 起始位置結束位置都是正數
var str = "ABCDEFGHIJK";
str.slice(2,6);  // "CDEF"

// 當起始位置爲負數的時候
var str = "ABCDEFGHIJK";
str.slice(-6, 10); // "FGHIJ"
// str的length爲11，因此起始位置是-6+11=5，就是F結束是10(不包括10)，那麼就是J；

// 特殊狀況 當起始位置在結束位置後面的時候，是截取不了的，返回空
var str = "ABCDEFGHIJK";
str.slice(-6, 2); // 空
// str的length爲11，因此起始位置是-6+11=5，就是F，結束位置在2，這個時候是截取不了的

注意：

• end爲結束下標，截取的時候不包括end那一位
• 截取是有順序的，開始到結束的順序必須是從左向右，不然是截取不了的,爲空

13.4.5 substring 截取字符串

substring()方法返回位於String對象中指定位置的子字符串, str.substring(start,end);它的兩個參數都是表示下標的，一個表示開始，一個表示結束(截取時不包括結束下標)

說明：

• start指明子字符串的起始位置，該索引從0開始起算。
• end指明子字符串的結束位置，該索引從0開始起算。
• substring方法使用start和end二者中的較小值做爲子字符串的起始點。若是start或end爲NaN或者爲負數，那麼將其替換爲0。

示例代碼：

// 當起始位置，結束位置都是正數的時候
var str = "ABCDEFGHIJK";
str.substring(2,6); // "CDEF"
// 一樣的，substring方法結束位置也不包括本身

// 當起始位置爲負數的時候，直接轉換成下標0
var str = "ABCDEFGHIJK";
str.substring(-2,6); // "ABCDEF" 下標轉換成了0

// 當開始的位置大於結束位置的時候，自動轉換較小的值做爲起點
var str = "ABCDEFGHIJK";
str.substring(6,2); // "CDEF"

利用substring方法，實現打字效果

/*樣式部分*/
#box {
    width: 300px;
    height: 150px;
    border: 2px dashed fuchsia;
    margin: 100px auto;
    text-align: left;
    padding: 10px;
}

<!--html部分-->
<div id="box"></div>

<!--js部分-->
<script>
    var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    var strLength = str.length;
    var index = 0;
    setInterval(function() {
        if (index >= strLength) {
            return;
        }
        index++;
        document.getElementById('box').innerHTML = str.substring(0, index);
    }, 100);
</script>

注意：

• substring方法，end爲結束下標，截取的時候一樣不包括end那一位
• 當start的值大於end的時候，二者中較小的值做爲起始下標

13.4.6 字符串的 substr方法

substr()方法返回一個從指定位置開始,指定長度的子字符串。 str.substr(start,length), start爲開始的下標, length爲須要返回字符串的長度

說明：

• start所需的子字符串的起始位置。字符串中的第一個字符的索引爲0。
• length在返回的子字符串中應包括的字符個數。

示例代碼：

var str = "ABCDEFGHIJK";
str.substr(1,5); // BCDEF

13.4.7 match 查找字符串

match() 來查找字符串中特定的字符，而且若是找到的話，則返回這個字符,找不到的話返回 null。

示例代碼:

var str= "good good study , day day up!";
str1.match("good");  // good
str1.match("Good");  // null

13.4.8 replace 替換字符串

replace() 方法在字符串中用某些字符替換另外一些字符。

示例代碼：

var str2 = "hello world";
str2.replace("world", "china"); // "hello china"

13.4.9 split 切割字符串轉爲數組

將一個字符串分割爲子字符串，而後將結果做爲字符串數組返回。 str.split(separator,num),帶一個參數 separator表示切割的條件，第二個參數 num表示須要切割的位數

說明：

• separator(分隔符)字符串或正則表達式對象，它標識了分隔字符串時使用的是一個仍是多個字符。若是忽略該選項，返回包含整個字符串的單一元素數組。
• num該值用來限制返回數組中的元素個數。

示例代碼：

var str = "ABCDEFGHIJK";
str.split("",6); // ["A", "B", "C", "D", "E", "F"]

13.5 Array對象 與 String對象綜合練習

一、翻轉一個字符串

var str = "abcdefg";
var strArr = str.split(""); // 將字符串轉換爲數組 ["a","b","c","d","e","f","g"]
strArr.reverse();           // 翻轉這個數組       ["g","f","e","d","c","b","a"]
var newStr = strArr.join("");
console.log(newArr);        // "gfedcba"

二、將一串字符轉化成對象

/*
有一個連接：http://www.baidu.com?name=cc&id=100&desc=很帥 
將連接的參數部分轉換成一個對象
即{name:"cc", id=100 , desc: "很帥"}
*/
var str = "http://www.baidu.com?name=cc&id=100&desc=很帥";
var obj = {};
var strArr = str.split("?");          // ["http://www.baidu.com", "name=cc&id=100&desc=很帥"]
var strArr2 = strArr[1].split("=");   // ["name=cc", "id=100", "desc=很帥"]
for(var i = 0; i < strArr2.length; i++){
    console.log(strArr2[i]);          // "name=cc" "id=100" "desc=很帥"
    var key = strArr2[i].split("=")[0];     // name  id  desc
    var value = strArr2[i].split("=")[1];   // cc 100 很帥
    obj[key] = value;
}
console.log(obj);     // {name:"cc", id=100 , desc: "很帥"}

三、將對象轉換成字符串

/*
有一個對象{name:"cc", id:100,desc:"很帥"}
和一個連接http://www.baidu.com,
拼接成連接http://www.baidu.com?name=cc&id=100&desc=很帥
*/
var prefix = "http://www.baidu.com";
var obj = {name:"cc", id:100,desc:"很帥"};
var arr = [];
for (var key in obj) {
    // console.log(key);            name id desc
    // console.log(obj[key]);       "cc" 100 "很帥"
    var str = key + "=" + obj[key];
    console.log(str);               // name=cc id=100 desc=很帥
    arr.push(str);  
    console.log(arr);               // ["name=cc", "id=100", "desc=很帥"]
}
var arrStr = arr.join("&");         
console.log(arrStr);                // name=cc&id=100&desc=很帥
var result = prefix + "?" + arrStr;
console.log(result);                // http://www.baidu.com?name=cc&id=100&desc=很帥

上一篇：JavaScript 基礎知識 - 入門篇(一)
下一篇：JavaScript 基礎知識 - DOM篇(一)