js二次封裝數組的使用介紹（程式碼）-js教程-PHP中文網

這篇文章分享給大家的內容是關於JS資料結構二次封裝我們的陣列，內容很詳細，接下來我們就來看看具體的內容，希望可以幫助到大家。

一、新建一個myArray類別

class myArray {
    
}

登入後複製

二、在這個類別上初始化建構子

/**
 * 初始化构造函数
 * @param capacity 容量
 */
constructor(capacity) {
    // 初始化arr变量
    this.arr = capacity === undefined ? [] : new Array(capacity);
    // 数组长度
    this.length = 0;
    // 数组容量
    this.capacity = capacity;
}

登入後複製

三、增加陣列成員方法

// 获取数组的长度
getLength() {
    return this.length;
}

// 获取数组的容量
getCapacity() {
    return this.arr.length;
}

// 判断数组是否为空
isEmpty() {
    return this.length === 0;
}

登入後複製

四、增加陣列新增元素方法

/**
 * 在数组中在index插入一个新的元素e
 * @param index 索引
 * @param e 元素
 * 原理：
 * 首先在传进来index索引的位置向后面移动一位，
 * 然后把该index索引腾空出来放进传入的新的元素e，
 * 最后维护一下length，长度加1
 */
add(index, e) {

    if (this.length === this.arr.length) {
        throw new Error('Add failed. Array is full.')
    }

    if (index < 0 || index > this.length) {
        throw new Error('Add failed. Request index >= 0 and index <= length&#39;);
    }

    for (let i = this.length - 1; i >= index; i--) {
        this.arr[i + 1] = this.arr[i];
    }

    this.arr[index] = e;
    this.length++;
}


// 向数组首位添加一个新元素e
addFirst(e) {
    this.add(0, e)
}

// 向数组所有的元素后面添加一个新元素e
addLast(e) {
    this.add(this.length, e);
}

登入後複製

五、增加陣列中移除元素方法

/**
 * 从数组中删除index位置的元素，返回删除的元素
 * @param index
 * @returns {*}
 * 原理：
 * 首先找到索引index的位置，
 * 然后把索引后面的元素都向前移动一位，其实是把索引后面的翻盖前面一位的元素
 * 最后维护一下length，减一
 *
 */
remove(index) {
    if (index < 0 || index >= this.length) {
        throw new Error('Remove failed. Request index >= 0 and index <= length');
    }

    let ret = this.arr[index];
    for (let i = index + 1; i < this.length; i++) {
        this.arr[i - 1] = this.arr[i];
    }
    this.length--;

    return ret;
}

// 从数组中删除第一个元素，返回删除的元素
removeFirst() {
    return this.remove(0)
}

// 从数组中删除最好个元素，返回删除的元素
removeLast() {
    return this.remove(this.length - 1)
}

// 从数组中删除元素e
removeElement(e) {
    let index = this.findIndex(e);
    if (index != -1) {
        this.remove(index);
    }
}

登入後複製

六、增加陣列中查詢元素和修改元素方法

// 获取index索引位置的元素
get(index) {
    if (index < 0 || index >= this.length) {
        throw new Error('Get failed. Index is illegal.');
    }
    return this.arr[index];
}

// 修改index索引的元素e
set(index, e) {
    if (index < 0 || index >= this.length) {
        throw new Error('Get failed. Index is illegal.');
    }
    this.arr[index] = e;
}

登入後複製

七、增加數組中包含，搜尋方法

// 查询数组是否包含e元素
contains(e) {
    for (let i = 0; i < this.length; i++) {
        if (this.arr[i] === e) {
            return true;
        }
    }
    return false;
}

// 查找数组中元素所在的所在的索引，如果不存在e，则返回-1
findIndex(e) {
    for (let i = 0; i < this.length; i++) {
        if (this.arr[i] === e) {
            return i;
        }
    }
    return -1;
}

// 把数组转换为字符串，并返回结果
toString() {
    let res = "";
    console.log(`Array: length = ${this.length}, capacity = ${this.capacity}.`);

    res += "[";
    for (let i = 0; i < this.length; i++) {
        res += this.arr[i];
        if (i !== this.length - 1) {
            res += ', '
        }
    }
    res += "]";

    return res.toString();
}

登入後複製

八、測試封裝陣列的方法

// 使用我们的类数组，声明一个容量为20的数组
let arr = new myArray(20);
// 首位增加数据
arr.addFirst('波波');
console.log(arr.toString());
// 输出：Array: length = 1, capacity = 20.
// 输出：[波波]

for (let i = 0; i < 10; i++) {
    arr.addLast(i)
}
console.log(arr.toString());
// 输出：Array: length = 11, capacity = 20.
// 输出：[波波, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(arr.findIndex(4)); // 5

// ...

登入後複製

九、方法說明

getCapacity()isEmpty#判斷陣列是否為空，傳回布林值#isEmpty()addFirst在陣列首位新增一個新元素e新元素addFirst(e)addLast在陣列所有的元素後面新增一個新元素e新元素addLast(e)add在陣列中插入一個新的元素eindex, eindex索引，e 新元素add(index, e) 從陣列中刪除index位置的元素，傳回刪除的元素index索引remove(index)##removeFirst()#removeLast從陣列中刪除最後的元素，傳回刪除的元素removeLast()#removeElement從陣列中刪除元素ee刪除的元素eremoveElement(e)#get取得index索引位置的元素index索引get(index)#set修改index索引的元素eindex, econtains查詢數組是否包含e元素

方法	描述	參數	參數說明	#範例
getLength	傳回陣列的長度			getLength()
getCapacity
			##傳回陣列的容量




			remove
		removeFirst	#從陣列中刪除第一個元素，傳回刪除的元素





		index 索引，e新替換的元素	set(index, e)

e

查詢所包含的元素

contains(e)

findIndex查找數組中e元素所在的所在的索引，如果不存在e，則傳回-1

###查詢的元素######findIndex(e)####### ######toString######傳回陣列格式化資料#########################toString()##### ##########十、完整二次封裝陣列程式碼###

class myArray {
    /**
     *  初始化构造函数
     * @param capacity 容量
     */
    constructor(capacity) {
        // 初始化arr变量
        this.arr = capacity === undefined ? [] : new Array(capacity);
        // 数组长度
        this.length = 0;
        // 数组容量
        this.capacity = capacity;
    }

    // 获取数组的长度
    getLength() {
        return this.length;
    }

    // 获取数组的容量
    getCapacity() {
        return this.arr.length;
    }

    // 判断数组是否为空
    isEmpty() {
        return this.length === 0;
    }

    addFirst(e) {
        this.add(0, e)
    }

    // 向所有的元素后面添加一个新元素
    addLast(e) {
        this.add(this.length, e);
    }

    /**
     * 在数组中在index插入一个新的元素e
     * @param index 索引
     * @param e 元素
     * 原理：首先在传进来index索引的位置向后面移动一位，
     * 然后把该index索引腾空出来放进传入的新的元素e，
     * 最后维护一下length，长度加1
     */
    add(index, e) {

        if (this.length === this.arr.length) {
            throw new Error('Add failed. Array is full.')
        }

        if (index < 0 || index > this.length) {
            throw new Error('Add failed. Request index >= 0 and index <= length');
        }

        for (let i = this.length - 1; i >= index; i--) {
            this.arr[i + 1] = this.arr[i];
        }

        this.arr[index] = e;
        this.length++;
    }

    /**
     * 从数组中删除index位置的元素，返回删除的元素
     * @param index
     * @returns {*}
     * 原理：
     * 首先找到索引index的位置，
     * 然后把索引后面的元素都向前移动一位，其实是把索引后面的翻盖前面一位的元素
     * 最后维护一下length，减一
     *
     */
    remove(index) {
        if (index < 0 || index >= this.length) {
            throw new Error('Remove failed. Request index >= 0 and index <= length');
        }

        let ret = this.arr[index];
        for (let i = index + 1; i < this.length; i++) {
            this.arr[i - 1] = this.arr[i];
        }
        this.length--;

        return ret;
    }

    // 从数组中删除第一个元素，返回删除的元素
    removeFirst() {
        return this.remove(0)
    }

    // 从数组中删除最好个元素，返回删除的元素
    removeLast() {
        return this.remove(this.length - 1)
    }

    // 从数组中删除元素e
    removeElement(e) {
        let index = this.findIndex(e);
        if (index != -1) {
            this.remove(index);
        }
    }


    // 获取index索引位置的元素
    get(index) {
        if (index < 0 || index >= this.length) {
            throw new Error('Get failed. Index is illegal.');
        }
        return this.arr[index];
    }

    // 修改index索引的元素e
    set(index, e) {
        if (index < 0 || index >= this.length) {
            throw new Error('Get failed. Index is illegal.');
        }
        this.arr[index] = e;
    }

    // 查询数组是否包含e元素
    contains(e) {
        for (let i = 0; i < this.length; i++) {
            if (this.arr[i] === e) {
                return true;
            }
        }
        return false;
    }

    // 查找数组中元素所在的所在的索引，如果不存在e，则返回-1
    findIndex(e) {
        for (let i = 0; i < this.length; i++) {
            if (this.arr[i] === e) {
                return i;
            }
        }
        return -1;
    }

    // 把数组转换为字符串，并返回结果
    toString() {
        let res = "";
        console.log(`Array: length = ${this.length}, capacity = ${this.capacity}.`);

        res += "[";
        for (let i = 0; i < this.length; i++) {
            res += this.arr[i];
            if (i !== this.length - 1) {
                res += ', '
            }
        }
        res += "]";

        return res.toString();
    }
}

// 测试
// 使用我们的类数组，声明一个容量为20的数组
let arr = new myArray(20);
// 首位增加数据
arr.addFirst('波波');
console.log(arr.toString());
// 输出：Array: length = 1, capacity = 20.
// 输出：[波波]

for (let i = 0; i < 10; i++) {
    arr.addLast(i)
}
console.log(arr.toString());
// 输出：Array: length = 11, capacity = 20.
// 输出：[波波, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(arr.findIndex(4)); // 5

// ...上面的方法都可以测试使用。

登入後複製

###相關建議：###### ###js的模組化分析（命名空間）### # ########什麼是JS變數物件？ JS變數物件詳解以及注意事項############

以上是js二次封裝數組的使用介紹（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！