JavaScript面向對象中的Array類型個人分享

KnewOne 發布于2019-08-26 12:17 / 2797人閱讀

摘要：類型檢測數組示例代碼調用結果為方法作用用于判斷當前對象的數據類型結果特點可以準確判斷出當前變量的類型調用結果為調用結果為報錯調用結果為調用結果為方法判斷指定類型是否出現在當前對象的原型鏈中調用結果為轉換數組提供了兩種方法用于數組的轉

Array類型 檢測數組

示例代碼:

var arr = [1,2,3,4,5];
console.log(arr instanceof Array);//調用結果為 true
/*
    Object.prototype.toString.call()方法
      * 作用 - 用于判斷當前對象的(數據)類型
      * 結果 - [object Array]
      * 特點 - 可以準確判斷出當前變量的類型
 */
console.log(Object.prototype.toString.call(arr));// 調用結果為 [object Array]

console.log(typeof null);// object

// console.log(null instanceof Null)// 調用結果為 報錯

console.log(null instanceof Object);// 調用結果為 false

console.log(Object.prototype.toString.call(null));// 調用結果為 [object Null]

// Object.prototype.isPrototypeOf()方法 - 判斷指定類型是否出現在當前對象的原型鏈中
console.log(Array.prototype.isPrototypeOf(arr));// 調用結果為 true

console.log(Array.isArray(arr));// true

轉換數組

JavaScript提供了兩種方法,用于數組的轉換

toString()方法 - 把數組轉換為字符串,并返回結果

valueOf()方法 - 返回數組對象的原始值

示例代碼:

var arr = [1,2,3,4,5];
/*
    利用toString()方法將數組轉換為字符串
      * 結果 - 多個數組元素被逗號( , ) 進行分隔組成的字符串
 */
console.log(arr.toString());// 調用結果為 1,2,3,4,5

console.log(arr.valueOf());// 調用結果為 [1,2,3,4,5]

var obj = {
    name : "皮卡丘"
};
console.log(obj.valueOf());// 調用結果為 { name: "皮卡丘" }

進出棧方法

所謂棧就是數據結構,(先進后出)這個結構就叫棧

示例代碼:

var arr = [1,2,3,4,5];

/* 在指定的數組的最后面添加指定的元素 */
arr.push(6);
console.log(arr);
/* 刪除指定數組的最后一個元素并返回被刪除的數組 */
arr.pop();
console.log(arr);

/* 在指定的數組的最前面添加指定元素 */
arr.unshift(7);
console.log(arr);
/* 刪除指定數組的最前面的一個元素并返回被刪除的數組 */
arr.shift();
console.log(arr);

分析圖:

排序方法

注意 - reverse()和sort()方法的返回值是經過排序之后的數組

注意: 使用if進行判斷如果形參中的 a < b 排序方式是由大到小進行排列
如果 a > b 排序方式是由小到大進行排列

注意返回值是負數的情況下是無效的

示例代碼:

/*
    reverse()方法 - 表示反轉數組的元素順序(就是把順序給到過來)
 */
var arr = [3,1,2,3,4,5,21];
// console.log(arr.reverse());// 調用結果為 [ 5, 4, 3, 2, 1 ]

/*
    sort()方法 - 表示數組的元素進行排列(就是正常順序排列)
 */
var result = arr.sort();
console.log(result);// 調用結果為 [ 1, 2, 3, 4, 5 ]
console.log(arr);// 調用結果為 [ 1, 2, 3, 4, 5 ]


/*
    使用if進行判斷如果形參中的 a < b 排序方式是由大到小進行排列
    如果 a > b 排序方式是由小到大進行排列
    * 注意返回值是負數的情況下是無效的
 */

var result = arr.sort(function (a,b) {
    if (a < b){
        /* 返回值 */
        return 1;
    }
});
console.log(arr);// 調用結果為 [ 1, 2, 3, 3, 4, 5, 21 ]
console.log(result);// 調用結果為 [ 1, 2, 3, 3, 4, 5, 21 ]

控制臺效果代碼圖:

連接方式

concat()方法 - 表示連接兩個或多個數組,并返回結果

就是把concat()方法中括號里的元素和原有數組的元素添加到一起并返回結果

示例代碼:

var arr = [1,2,3,4,5];
console.log(arr.concat(6));// 調用結果為 [ 1, 2, 3, 4, 5, 6 ]
console.log(arr.concat([9,10,"J","O","K"]));// 調用結果為 [ 1, 2, 3, 4, 5, 9, 10, "J", "O", "K" ]

控制臺效果圖:

操作方法

特點 - 可以刪除指定元素的位置并且給指定的位置添加新的元素

示例代碼:

var arr = [1,2,3,4,5];
/*
    splice(start, deleteCount)方法
    * 作用 - 用于刪除當前數組中指定位置指定個數的元素
    * 參數
      * start - 表示刪除的開始位置
      * deleteCount - 表示刪除的個數
    * 返回值 - 將刪除的元素組成的新數組進行返回
 */
// var result = arr.splice(0, 5);
// console.log(result);// 調用結果為 [ 1, 2, 3, 4, 5 ]
// console.log(arr);// 調用結果為 []

/*
    splice(start, deleteCount, item1, item2, ...)方法
    * 作用 - 向指定數組的指定位置添加元素
    * 參數
      * start - 表示刪除的開始位置
      * deleteCount - 表示刪除的個數
      * item1, item2, ... - 表示向數組添加的元素
    * 返回值 - 將刪除的元素組成的新數組進行返回
 */
var result = arr.splice(0, 0, 6,7,8);
console.log(result);// 調用結果為 []
console.log(arr);// 調用結果為 [ 6, 7, 8, 1, 2, 3, 4, 5 ]

var result = arr.splice(0, 3, 6,7,8);
console.log(result);// 調用結果為 [ 1, 2, 3 ]
console.log(arr);// 調用結果為 [ 6, 7, 8, 4, 5 ]

/*
    slice()方法
    * 作用 - 截取指定數組中的元素
    * 參數
      * begin - 表示開始截取的位置(從 0 開始)
      * end - 表示結束截取的位置(截取最后一個位置的下一個位置)
    * 返回值 - 返回截取的元素組成的新數組
 */
var result = arr.slice(2,3);
console.log(result);// 調用結果為 [3]

檢索方法

indexOf()和lastindexOf()方法

用于檢索數組中是否包含指定的元素內容 - 并且返回元素所在的位置

indexOf() - 表示從左至又的順序進行檢索

lastIndexOf() - 表示從右至左的順序進行檢索

注意 - 如果在同一個數組當中有重復的元素存在,則會匹配到第一個被查找到的元素信息的位置

比如 - (indexOf就是從左到右開始找第一個相符的元素,lastIndexOf就是從右到左找第一個相符的元素)

如果檢索的元素并不在指定數組中時 - 那么返回的結果為 -1(這是固定的)

示例代碼:

var arr = ["葫蘆娃","哪吒","皮卡丘","哪吒","舒克","貝特"];

console.log(arr.indexOf("哪吒"));// 調用結果為 1
console.log(arr.lastIndexOf("舒克"));//調用結果為 4
console.log(arr.indexOf("哆啦A夢"));// 調用結果為 -1

forEach( )方法

Array.prototype.forEach()方法

作用 - 用于遍歷指定數組

參數

callback - 表示回調函數

currentValue - 表示遍歷數組得到每個元素

index - 表示遍歷數組得到每個元素對應的索引值

array - 表示遍歷的數組

示例代碼:

var arr = ["皮卡丘","葫蘆娃","舒克","貝特","叮當貓"];

arr.forEach(function (currentValue,index,array) {
    console.log(array);
});

控制臺示例圖:

GPU云服務器云服務器 javascript 面向對象 javascript面向對象 javascript面向對象編程 javascript面向對象編程指南

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108400.html

JavaScript面向對象中的String類型個人分享

摘要：類型大小寫轉換表示將小寫內容轉換為大寫內容表示將大小內容轉換為小寫內容示例代碼構造函數方式表示將小寫內容轉換為大寫內容表示將大小內容轉換為小寫內容調用結果為調用結果為控制臺調用效果圖根據指定位置獲取字符串表示通過指定字符串中指定字符 String類型大小寫轉換 toUpperCase() - 表示將小寫內容轉換為大寫內容 toLowerCase() - 表示將大小內容轉換為小寫內容...

Fundebug 2019-08-26 12:18 評論0 收藏0
聽飛狐聊JavaScript設計模式系列01

摘要：前言大家好，小弟飛狐，愛學習，愛裝逼，樂于分享，初來乍到，請多多關照。特別注意一下，函數在中是對象，不是一種數據類型，這可是世界的一等公民。和，和的關系又很曖昧，后面細說，要不然會暈菜。基本數據類型，，，，，這五種基本數據類型是按值訪問的。前言大家好，小弟飛狐，愛學習，愛裝逼，樂于分享，初來乍到，請多多關照(～ o ～)~zZ。出道幾年，對JavaScript情有獨鐘，聊技術之前，...

CHENGKANG 2019-08-21 10:44 評論0 收藏0
JavaScript面向對象中的原型個人分享

摘要：原型原型是什么所謂原型就是類型對象的一個屬性在函數定義時就包含了屬性它的初始值是以個空對象在中并沒有定義函數的原型類型所以原型可以是任何類型原型是用于保存對象的共享屬性和方法的原型的屬性和方法并不會影響函數本身的屬性和方法示例代碼類型的屬性原型原型是什么所謂原型(Prototype)就是Function類型對象的一個屬性在函數定義時就包含了prototype屬性,它的初始值是...

pakolagij 2019-08-26 12:14 評論0 收藏0
JavaScript面向對象中的錯誤與異常個人分享

摘要：錯誤與異常錯誤與異常概念所謂錯誤就是錯誤就是程序中不正常的運行狀態在其他編程語言中稱為異常或錯誤解釋器會為每個錯誤情況創建并且拋出一個對象對象包含錯誤的描述信息語句語句作用用于捕獲和處理代碼中的錯誤語句作用用于處理語句中出現的錯誤語句錯誤與異常錯誤與異常概念所謂錯誤就是錯誤就是程序中不正常的運行狀態在其他編程語言中稱為異常或錯誤解釋器會為每個錯誤情況創建并且拋出一個Erro...

王陸寬 2019-08-23 11:25 評論0 收藏0
JavaScript中的面向對象（object-oriented）編程

摘要：對象在中，除了數字字符串布爾值這幾個簡單類型外，其他的都是對象。那么在函數對象中，這兩個屬性的有什么區別呢表示該函數對象的原型表示使用來執行該函數時這種函數一般成為構造函數，后面會講解，新創建的對象的原型。這時的函數通常稱為構造函數。。本文原發于我的個人博客，經多次修改后發到sf上。本文仍在不斷修改中，最新版請訪問個人博客。最近工作一直在用nodejs做開發，有了nodejs，...

JerryZou 2019-08-21 10:26 評論0 收藏0