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
