communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Introduction à l'utilisation du tableau d'encapsulation secondaire js (code)

Introduction à l'utilisation du tableau d'encapsulation secondaire js (code)

不言
Libérer： 2018-07-25 10:01:50
original
1406 Les gens l'ont consulté

Le contenu partagé avec vous dans cet article concerne l'encapsulation secondaire de nos tableaux par la structure de données JS. Le contenu est très détaillé. Ensuite, jetons un coup d'œil au contenu spécifique, j'espère que cela pourra aider tout le monde.

1. Créez une nouvelle classe myArray 

class myArray {
    
}
Copier après la connexion

2. Initialisez le constructeur sur cette classe 

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

3. >

4. Ajout de méthodes pour ajouter des éléments au tableau
// 获取数组的长度
getLength() {
    return this.length;
}

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

// 判断数组是否为空
isEmpty() {
    return this.length === 0;
}
Copier après la connexion

5. Ajout de méthodes pour supprimer des éléments du tableau
/**
 * 在数组中在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);
}
Copier après la connexion

6. éléments du tableau
/**
 * 从数组中删除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);
    }
}
Copier après la connexion

7. Ajouter la méthode de recherche incluse dans le tableau 
// 获取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;
}
Copier après la connexion

8. La méthode pour tester le tableau encapsulé 
// 查询数组是否包含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();
}
Copier après la connexion

9. Description de la méthode
// 使用我们的类数组，声明一个容量为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

// ...
Copier après la connexion

10. Code complet du tableau encapsulé secondaire
方法 描述 参数 参数说明 示例
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()

Recommandations associées : 
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

// ...上面的方法都可以测试使用。
Copier après la connexion

Analyse modulaire JS (espace de noms)

Qu'est-ce qu'un objet variable JS ? Explication détaillée des objets variables JS et précautions

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
javascript
source：php.cn
Article précédent：Bilan js 2018 : les raisons fondamentales de l'existence du framework sont les suivantes Article suivant：Classic_Use js pour implémenter rapidement le menu déroulant de sélection de la souris et du clavier (explication détaillée du code)
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Méthode CSS uniquement pour modifier dynamiquement le src de l'image au clic sans utiliser JavaScript Je dois changer le src d'une image en cliquant sur la souris en utilisant uniquement du CS...
Depuis 2024-04-06 19:25:49
0
1
505
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Événements de survol JavaScript sur des pseudo-éléments spécifiques au fournisseur Il s'agit de HTMLinput.$("input[type='range']::-webkit-slider-thumb").on('hover'...
Depuis 2024-04-06 15:35:24
0
1
274
Soumettre le formulaire sans bouton en utilisant Javascript/Jquery J'essaie de soumettre un formulaire sans bouton en appelant une fonction JavaScript et en ...
Depuis 2024-04-06 14:54:03
0
2
421
Personnalisez l'apparence des en-têtes accordéon Bootstrap à l'aide de la classe CollapseDisplay Je souhaite styliser le titre de la carte d'un panneau avec la classeeffondrementshow. Dan...
Depuis 2024-04-06 12:53:11
0
1
376
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal