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() 方法可把数组转换为字符串，并返回结果。
使用案例文章来源：https://www.toymoban.com/news/detail-508136.html
let arr = ['apple', 'orange', 'banana'];
console.log(arr.toString()); // apple,orange,banana
2.8.2 手写实现
toString 的实现方法其实和 join方法一样，只是toString 的输出只能是以 ','逗号分隔文章来源地址https://www.toymoban.com/news/detail-508136.html
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
| 欢迎大家在讨论学习，感谢大家支持 |
到了这里，关于JavaScript 手写代码 第六期(重写数组方法二)不改变原数组的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
