masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > js二次封装数组的使用介绍（代码）

js二次封装数组的使用介绍（代码）

不言
Lepaskan： 2018-07-25 10:01:50
asal
1406 orang telah melayarinya

本篇文章分享给大家的内容是关于JS数据结构二次封装我们的数组 ，内容很详细，接下来我们就来看看具体的内容，希望可以帮助到大家。

一、新建一个myArray类

class myArray {
    
}
Salin selepas log masuk

二、在这个类上初始化构造函数

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

三、增加数组成员方法

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

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

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

四、增加数组添加元素方法

/**
 * 在数组中在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);
}
Salin selepas log masuk

五、增加数组中移除元素方法

/**
 * 从数组中删除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);
    }
}
Salin selepas log masuk

六、增加数组中查询元素和修改元素方法

// 获取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;
}
Salin selepas log masuk

七、增加数组中包含，搜索方法

// 查询数组是否包含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();
}
Salin selepas log masuk

八、测试封装数组的方法

// 使用我们的类数组，声明一个容量为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

// ...
Salin selepas log masuk

九、方法说明

方法 描述 参数 参数说明 示例
getLength 返回数组的长度

getLength()
getCapacity 返回数组的容量

getCapacity()
isEmpty 判断数组是否为空，返回布尔值

isEmpty()
addFirst 向数组首位添加一个新元素 e 新元素 addFirst(e)
addLast 向数组所有的元素后面添加一个新元素 e 新元素 addLast(e)
add 在数组中在index插入一个新的元素e index, e index索引，e 新元素 add(index, e)
remove 从数组中删除index位置的元素，返回删除的元素 index 索引 remove(index)
removeFirst 从数组中删除第一个元素，返回删除的元素

removeFirst()
removeLast 从数组中删除最后的元素，返回删除的元素

removeLast()
removeElement 从数组中删除元素e e 删除的元素e removeElement(e)
get 获取index索引位置的元素 index 索引 get(index)
set 修改index索引的元素e index, e index 索引，e新替换的元素 set(index, e)
contains 查询数组是否包含e元素 e 查询包含的元素 contains(e)
findIndex 查找数组中e元素所在的所在的索引，如果不存在e，则返回-1 e 查询的元素 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

// ...上面的方法都可以测试使用。
Salin selepas log masuk

相关推荐：

 js的模块化分析（命名空间）    

什么是JS变量对象？JS变量对象详解以及注意事项

Atas ialah kandungan terperinci js二次封装数组的使用介绍（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
javascript
sumber：php.cn
Artikel sebelumnya：2018 js 回顾：框架存在的根本原因原来是这些 Artikel seterusnya：经典_用js快速实现鼠标和键盘选择下拉菜单（代码详解）
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Kaedah CSS sahaja untuk mengubah suai imej src secara dinamik pada klik tanpa menggunakan JavaScript Saya perlu menukar src imej pada klik tetikus hanya menggunakan css seperti img:active{}
daripada 2024-04-06 19:25:49
0
1
505
Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...
daripada 2024-04-06 18:16:26
0
1
403
Acara tuding JavaScript pada elemen pseudo khusus vendor 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
daripada 2024-04-06 15:35:24
0
1
274
Hantar borang tanpa butang menggunakan Javascript/Jquery Saya cuba menyerahkan borang tanpa butang dengan memanggil fungsi JavaScript dan melaksana...
daripada 2024-04-06 14:54:03
0
2
421
Sesuaikan penampilan pengepala akordion Bootstrap menggunakan kelas CollapseDisplay Saya ingin menggayakan tajuk kad panel dengan rancangan runtuh kelas. Dalam contoh ini, ia...
daripada 2024-04-06 12:53:11
0
1
376
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan