手写代码-50道
大约 4 分钟
1、手写 10 中以上数组排序方式（原生 JS）
//快速排序
function quickSort(elements) {
if (elements.length <= 1) {
return elements;
}
var pivotIndex = Math.floor(elements.length / 2);
var pivot = elements.splice(pivotIndex, 1)[0];
var left = [];
var right = [];
for (var i = 0; i < elements.length; i++) {
if (elements[i] < pivot) {
left.push(elements[i]);
} else {
right.push(elements[i]);
}
}
return quickSort(left).concat([pivot], quickSort(right));
//concat()方法用于连接两个或者多个数组；该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
}
var elements = [3, 5, 6, 8, 2, 4, 7, 9, 1, 10];
document.write(quickSort(elements));
//插入排序
function sort(elements) {
// 假设第0个元素是一个有序数列，第1个以后的是无序数列，
// 所以从第1个元素开始将无序数列的元素插入到有序数列中去
for (var i = 1; i <= elements.length; i++) {
// 升序
if (elements[i] < elements[i - 1]) {
// 取出无序数列中的第i个作为被插入元素
var guard = elements[i]; //记住有序数列的最后一个位置，并且将有序数列的位置扩大一个
var j = i - 1;
elements[i] = elements[j]; // 比大小;找到被插入元素所在位置
while (j >= 0 && guard < elements[j]) {
elements[j + 1] = elements[j];
j--;
}
elements[j + 1] = guard; //插入
}
}
}
var elements = [3, 5, 6, 8, 2, 4, 7, 9, 1, 10];
document.write("没调用之前：" + elements);
document.write("<br>");
sort(elements);
document.write("被调用之后：" + elements);
// 冒泡排序
function Bubbling(arr) {
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
if (arr[j] < arr[j + 1]) {
let empty = arr[j + 1];
arr[j + 1] = arr[j];
arr[j] = empty;
}
}
}
return arr;
}
console.log(Bubbling([1, 2, 3, 55, 66, 77]));
2、手写 new 关键字源码
//手写new关键字源码
function MyNew() {
let obj = {};
let fn = [].shift.call(arguments);
obj.__proto__ = fn.prototype;
fn.apply(obj, arguments);
return obj;
}
3、手写 instanceof 源码
function _instance(child, parent) {
let left = child._proto_;
let right = parent.prototype;
while (true) {
if (left === null) {
return false;
}
if (left === right) {
return true;
}
left = left._proto_;
}
}
4、手写防抖和节流
防抖
function dobounce(fn, time) {
let timer = null;
return function () {
clearTimeout(timer);
timer = setTimeout(function () {
fn();
}, time);
};
}
节流
function throttle(fn, time) {
let flag = 1;
return function () {
if (flag == 0) {
return;
}
flag = 0;
setTimeout(function () {
fn();
flag = 1;
}, time);
};
}
5、数组去重 （原生 JS 实现）
//利用filter
function unique(arr) {
return arr.filter(function (item, index, arr) {
//当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
return arr.indexOf(item, 0) === index;
});
}
var arr = [
1,
1,
"true",
"true",
true,
true,
15,
15,
false,
false,
undefined,
undefined,
null,
null,
NaN,
NaN,
"NaN",
0,
0,
"a",
"a",
{},
{},
];
console.log(unique(arr));
//利用ES6 Set去重（ES6中最常用）
function unique(arr) {
return Array.from(new Set(arr));
}
var arr = [
1,
1,
"true",
"true",
true,
true,
15,
15,
false,
false,
undefined,
undefined,
null,
null,
NaN,
NaN,
"NaN",
0,
0,
"a",
"a",
{},
{},
];
console.log(unique(arr));
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]
//set
const arr = [1, 1, 1, 4, 5, 6, 2, 2, 3, 4, 8, 9];
console.log([...new Set(arr)]);
// includes方法
fn = (array) => {
const one = [];
for (let i = 0; i < array.length; i++) {
if (!one.includes(array[i])) {
one.push(array[i]);
}
}
return one;
};
console.log(fn(arr));
// 原生
//利用for嵌套for，然后splice去重（ES5中最常用）
function unique(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] == arr[j]) {
//第一个等同于第二个，splice方法删除
第二个;
arr.splice(j, 1);
j--;
}
}
}
return arr;
}
var arr = [
1,
1,
"true",
"true",
true,
true,
15,
15,
false,
false,
undefined,
undefined,
null,
null,
NaN,
NaN,
"NaN",
0,
0,
"a",
"a",
{},
{},
];
console.log(unique(arr)); //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]
//NaN和{}没有去重，两个null直接消失了
6、手写原生 ajax 的实现
const result = new XMLHttpRequest();
result.open("get", "xxxxxx", true);
result.send(null);
// result.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
result.onreadystatechange = function () {
if (result.readyState == 4 && result.status == 200) {
const data = result.responseText;
}
};
7、使用解构赋值，实现两个变量的值的交换
如: let a=1 let b=2 交换后 a=2 b=1
let a = 1;
let b = 2;
[a, b] = [2, 1];
console.log(a, b);
8、数组和 set 之间如何相互转化 数组和 map 之间如何相互转化
// 数组转set
let array = [1, 12, 13, 11];
let set = new Set(array);
console.log(set);
// set转换为array
let index = new Set([1, 12, 13, 11]);
let demo = Array.from(index);
console.log(demo);
// 扩展运算符实现map转数组
let map = new Map([
[1, "one"],
[2, "two"],
[3, "three"],
]);
let arr1 = [...map.keys()];
let arr1 = [...map.values()];
console.log(arr1, arr2);
// 数组传入Map构造函数转为Map
let arr = [
[1, "one"],
[2, "two"],
[3, "three"],
];
let map1 = new Map(arr);
console.log(map1);