JavaScript 手写代码第六期(重写数组方法二)不改变原数组的方法

野性酷女 2024-03-16 22:25 52阅读 0赞

#### 文章目录 ####

*  1.为什么要手写代码？
 *  2.手写代码
 *   *  2.1 join
     *   *  2.1.1 基本使用
         *  2.1.2 手写代码
     *  2.2 slice
     *   *  2.2.1 基本使用
         *  2.2.2 手写实现
     *  2.3 includes
     *   *  2.3.1 基本使用
         *  2.3.2 手写代码
     *  2.4 flat
     *   *  2.4.1 基本使用
         *  2.4.2 手写代码
     *  2.5 indexOf
     *   *  2.5.1 基本使用
         *  2.5.2 手写实现
     *  2.6 lastIndexOf
     *   *  2.6.1 基本使用
         *  2.6.2 手写实现
     *  2.7 concat
     *   *  2.7.1 基本使用
         *  2.7.2 手写代码
     *  2.8 toString
     *   *  2.8.1 基本使用
         *  2.8.2 手写实现

## 1.为什么要手写代码？ ##

我们在日常开发过程中，往往都是取出来直接用，从来不思考代码的底层实现逻辑，但当我开始研究一些底层的东西的时候，才开始理解了JavaScript每个方法和函数的底层实现思路，我认为这可以很好的提高我们的代码水平和逻辑思维。

## 2.手写代码 ##

### 2.1 join ###

#### 2.1.1 基本使用 ####

join() 方法用于把数组中的所有元素转换一个**字符串**。  
**语法：**

array.join(separator)

**separator**： 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

let arr = [1, 2, 3, 4];
                let str1 = arr.join(',');
                console.log(str1); // 1,2,3,4
                let str2 = arr.join(':');
                console.log(str2); // 1:2:3:4

#### 2.1.2 手写代码 ####

Array.prototype.myjoin = function (type = ',') {
        
                    let str = '';
                    for (let i = 0; i < this.length; i++) {
        
                    	// 数组元素为undedined或者为null是置为空
                    	this[i] = typeof this[i] === 'undefined' || this[i] === null ? '' : this[i];
                        if (i == this.length - 1) {
        
                            return (str = str + arr[i]);
                        }
                        str = str + arr[i] + type;
                    }
                    return str;
                };
                let str1 = arr.myjoin();
                console.log(str1); // 1,2,3,4
                let str2 = arr.myjoin(':');
                console.log(str2); // 1:2:3:4
                let str3 = arr.myjoin('?');
                console.log(str3);

### 2.2 slice ###

#### 2.2.1 基本使用 ####

slice() 方法可从已有的数组中返回**选定的元素**。  
slice() 方法不会改变原始数组。而是返回新的数组  
**语法：**

array.slice(start, end)

**start**： 可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。  
**end**：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

**代码示例：**

let arr = [1, 2, 3, 4, 5];
                let arr1 = arr.slice(1, 3);
                console.log(arr1); // [2, 3]
                console.log(arr); // [1, 2, 3, 4, 5]
                let arr2 = arr.slice();
                console.log(arr2); //  [1, 2, 3, 4, 5]

#### 2.2.2 手写实现 ####

Array.prototype.mySlice = function (start = 0, end) {
        
                    if (start < 0) start = start + this.length;
                    if (end < 0) end = end + this.length;
                    let newArr = [];
                    for (; start < end; start++) {
        
                        newArr.push(this[start]);
                    }
                    return newArr;
                };
                let arr1 = arr.slice(1, 3);
                console.log(arr1); // [2, 3]
                console.log(arr); // [1, 2, 3, 4, 5]
                let arr2 = arr.slice();
                console.log(arr2);
                let arr3 = arr.slice(-2, -1);
                console.log(arr3);  //  [1, 2, 3, 4, 5]

### 2.3 includes ###

#### 2.3.1 基本使用 ####

includes()方法返回的是一个布尔值，如果指定的元素存在于数组中，则返回true，否则返回false  
**语法:**  
第一个参数**searchElement**：必须。需要查找的元素值。  
第二个参数**fromIndex**：可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

let arr = [1, 2, 3];
                // 查找元素 1 从下标1开始
                let flag = arr.includes(1, 1);
                console.log(flag); // false

#### 2.3.2 手写代码 ####

Array.prototype.myIncludes = function (value, start = 0) {
        
                    if (start < 0) start = this.length + start;
                    for (; start < this.length; start++) {
        
                        if (this[start] === value) {
        
                            return true;
                        }
                    }
                    return false;
                };
                let flag = arr.myIncludes(1, 1);
                console.log(flag); // false

### 2.4 flat ###

flat() 方法方法会按照一个可指定的**深度递归遍历**数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。  
flat(depth) 指定要提取嵌套数组的结构深度，默认值为 1。

#### 2.4.1 基本使用 ####

let arr = [1, 2, [3, 4], [5, [6, 7]]];
                console.log(arr.flat(1)); // [1, 2, 3, 4, 5, [6,7]]
                console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6, 7]

#### 2.4.2 手写代码 ####

Array.prototype.myFlat = function (depth) {
        
                    // 确定数组返回的条件，如果不是数组或者已经到了拍平的层数
                    if (!Array.isArray(this) || depth <= 0) {
        
                        return arr;
                    }
                    return arr.reduce((pre, cur) => {
        
                    	// 如果元素还是数组，就继续递归。
                        return pre.concat(Array.isArray(cur) ? cur.flat(depth - 1) : cur);
                    }, []);
                };
                console.log(arr.myFlat(1)); // [1, 2, 3, 4, 5, [6,7]]
                console.log(arr.myFlat(2)); // [1, 2, 3, 4, 5, 6, 7]

### 2.5 indexOf ###

#### 2.5.1 基本使用 ####

indexOf() 方法可返回数组中某个指定的元素位置。  
**语法：**

array.indexOf(item,start)

第一个参数**item**：必须。查找的元素。  
第二个参数**start**： 可选的整数参数。规定在数组中开始检索的位置。

let arr = [1, 2, 2, 4, 5];
                console.log(arr.indexOf(2)); // 1
                console.log(arr.indexOf(2, 2)); // 2 从索引2开始查
                console.log(arr.indexOf(2, -3)); // 2 从-3（即索引2开始）

#### 2.5.2 手写实现 ####

Array.prototype.myIndexOf = function (value, start = 0) {
        
                    if (start < 0) start = this.length + start;
                    for (; start < this.length; start++) {
        
                        if (this[start] == value) {
        
                            return start;
                        }
                    }
                    return -1;
                };
                console.log(arr.myIndexOf(2)); // 1
                console.log(arr.myIndexOf(2, 2)); // 2 从索引2开始查
                console.log(arr.myIndexOf(2, -3)); // 2 从-3（即索引2开始）

### 2.6 lastIndexOf ###

#### 2.6.1 基本使用 ####

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，  
**语法：**

array.lastIndexOf(item,start)

第一个参数 **item**：必需。规定需检索的字符串值。  
第二个参数 **start**：可选的整数参数。规定在字符串中开始检索的位置。

第二个参数可以是**正数或者负数**，正数超出数组索引则从**最末尾**开始查找，负数与数组长度相加后若是正数则作为开始查找位置，若是负数则直接返回 -1。

**代码案列：**

let arr = [1, 2, 3, 2, 5];
                // 从指定索引（默认索引为arr.length）后往前面找
                console.log(arr.lastIndexOf(2, -1)); // 3
                console.log(arr.lastIndexOf(2, 2)); // 1
                console.log(arr.lastIndexOf(2)); // 3
                console.log(arr.lastIndexOf(2, -5)); // -1

#### 2.6.2 手写实现 ####

Array.prototype.myLastIndexOf = function (target, start = this.length - 1) {
        
                    // 负数与数组长度相加后若是正数则作为开始查找位置，若是负数则直接返回 -1
                    if (start < 0) {
        
                        start = start + this.length;
                        if (start < 0) {
        
                            return -1;
                        }
                    }
                    // 正数超出数组索引则从最末尾开始查找
                    if (Math.abs(start) > this.length) start = this.length - 1;
                    for (; start > 0; start--) {
        
                        if (this[start] == target) {
        
                            return start;
                        }
                    }
                    return -1;
                };
                console.log(arr.myLastIndexOf(2, -1)); // 3
                console.log(arr.myLastIndexOf(2, 2)); // 1
                console.log(arr.myLastIndexOf(2)); // 3
                console.log(arr.myLastIndexOf(2, -5)); // -1

### 2.7 concat ###

#### 2.7.1 基本使用 ####

concat() 方法用于连接两个或多个数组。

array1.concat(array2, array3,..., arrayX)

**使用案例：**

let arr = [1, 2, 3, 4, 5];
                let arr2 = [1, 2, [3, 4]];
                let arr3 = arr.concat(arr2);
                console.log(arr3); // [1, 2, 3, 4, 5, 1, 2, Array(2)]
                console.log(arr); // [1, 2, 3, 4, 5]
                console.log(arr2); // [1, 2, Array(2)]

#### 2.7.2 手写代码 ####

Array.prototype.myConcat = function (...args) {
        
                    let result = [...this];
                    args.forEach((item, index) => {
        
                        if (Array.isArray(item)) {
        
                            result.push(...item);
                        } else {
        
                            result.push(item);
                        }
                    });
                    return result;
                };
                let arr = [1, 2, 3, 4, 5];
                let arr2 = [1, 2, [3, 4]];
                let arr3 = arr.concat(arr2);
                console.log(arr3); // [1, 2, 3, 4, 5, 1, 2, Array(2)]
                console.log(arr); // [1, 2, 3, 4, 5]
                console.log(arr2); // [1, 2, Array(2)]

### 2.8 toString ###

#### 2.8.1 基本使用 ####

toString() 方法可把**数组**转换为**字符串**，并返回结果。

**使用案例**

let arr = ['apple', 'orange', 'banana'];
                console.log(arr.toString()); // apple,orange,banana

#### 2.8.2 手写实现 ####

toString 的实现方法其实和 **join**方法一样，只是toString 的输出只能是以 ','逗号分隔

Array.prototype.myToString = function () {
        
                    let str = '';
                    for (let i = 0; i < this.length; i++) {
        
                        // 数组元素为undedined或者为null是置为空
                        this[i] = typeof this[i] === 'undefined' || this[i] === null ? '' : this[i];
                        if (i == this.length - 1) {
        
                            return (str = str + arr[i]);
                        }
                        str = str + arr[i] + ',';
                    }
                    return str;
                };
    
                console.log(arr.myToString()); // apple,orange,banana

<table> 
 <tbody> 
  <tr> 
   <td>欢迎大家在讨论学习，感谢大家支持</td> 
  </tr> 
 </tbody> 
</table>