手撕代码
前端高频，备战春招！
- 算法题
-
- 1.反转链表
- 2.青蛙跳台阶（递归）
- 3.链表中是否有环
- 4.用两个栈实现队列
- 5.二分查找
- 6.BFS层序遍历
- 7.合并两个有序数组
- 8.经典排序
-
- （1）冒泡排序
- （2）快排
- （3）topK堆排序
- 9.求平方根
- 10.移除元素
- 11.有序数组平方
- 12.长度最小的子数组
- 13.移除链表元素
- 14.翻转链表
- 15.删除链表的倒数第 n 个结点
- 16.链表相交
- 17.链表是否有环
- 18.字母异位
- 19.两个数组的交集
- 20.快乐数
- 21. 两数之和
- 22. 赎金信
- 23. 字符串翻转
- 24.翻转字符串（2）
- 25.替换空格
- 25.左旋转字符串
- 26.实现strStr（），用kmp
- 26.重复的子字符串
- 10.斐波那契数列（动态规划）
- js手撕
-
- 1.防抖和节流
-
- 防抖
- 节流
- 2.函数柯里化
- 3.清空前后空格
- 4.数组拍平
- 5.图片懒加载
- 6.深拷贝和浅拷贝
- 7.call、apply、bind
- CSS手撕
-
- 1.两栏布局
算法题
1.反转链表
2021.10.30
15：50
var reverseList = function(head) {
var prev = null;
var curr = head;
while(curr){
next=curr.next;
curr.next=prev;
prev=curr;
curr=next;
}
return prev;
};
2.青蛙跳台阶（递归）
var numWays = function(n) {
let arr=[1,1,2]
if(n<=2){
return arr[n]
}else{
for(let i=arr.length;i<=n;i++){
arr[i]=(arr[i-1]+arr[i-2])%1000000007
}
}
return arr[n]
};
3.链表中是否有环
//解题思路：设置快慢指针，若快指针可以追上慢指针，说明有环
var hasCycle = function(head) {
if(head === null || head.next === null) {
return false;
}
var slow=head;
var fast=head.next;
while(fast&&fast.next){
if(fast==slow){
return true
}
fast=fast.next.next;
slow=slow.next;
}
return false
};
4.用两个栈实现队列
2021.11.05
//输入栈
let stack1 = []
//输出栈
let stack2 = []
function push(node)
{
// write code here
return stack1.push(node);
}
function pop()
{
// write code here
if(stack2.length === 0){
while(stack1.length !== 0)
{
stack2.push(stack1.pop());
}
}
return stack2.pop();
}
5.二分查找
var search = function(nums, target) {
let left = 0;
let right = nums.length-1;
while (left<=right){
var mid = left + Math.floor((right-left)/2);
if(nums[mid]>target){
right=mid-1
}else if (nums[mid]<target) {
left=mid+1
}else{
return mid;
}
}
return -1
};
6.BFS层序遍历
2021.11.18
function levelOrder( root ) {
if(!root) return []
let res = [], queue = [root]
while (queue.length !== 0) {
const levelSize = queue.length
const currLevel = []
for (let i=0; i<levelSize; i++)
const node = queue.shift()
currLevel.push(node.val)
if (node.left) {
queue.push(node.left)
}
if (node.right) {
queue.push(node.right)
}
}
res.push(currLevel)
}
return res
};
7.合并两个有序数组
替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）。
用法：array.splice(index,num,insertValue)，返回值为删除内容，array为结果值。
思路：两个数字比较大小，如果nums1[i] > nums2[i] 就在nums1[i]前用splice(i, 0, nums2[i])
把nums2[i]插入
当循环到num1存0的位置直接把nums2剩下的插入就行了
var merge = function(nums1, m, nums2, n) {
let j = 0;
for (let i = 0; i < m + n; i++) {
if (nums1[i] > nums2[j]) {
nums1.splice(i, 0, nums2[j]);
j++;
nums1.pop();
}
if (i - j >= m) {
nums1.splice(i, 0, nums2[j]);
j++;
nums1.pop();
}
}
};
8.经典排序
2021.11.10
（1）冒泡排序
时间复杂度为：O( n^2 )；空间复杂度O(1)
function bubbleSort(nums) {
//每轮循环都从最后一个元素开始 比较并交换 一次循环会把最小的数顶到最上面
for (let i = 0; i < nums.length - 1; i++) { //只是控制次数为n-1
for (let j = nums.length - 1; j > i; j--) {
if (nums[j] < nums[j - 1]) {
//交换
let temp = nums[j];
nums[j] = nums[j - 1];
nums[j - 1] = temp;
}
}
}
}
（2）快排
//快速排序最差O（n^2）最优O（nlogn）
function swap(nums, i, j) {
let temp = nums[i];
nums[i] = nums[j];
nums[j] = temp;
}
function qsort(nums, l, r) {
if (r <= l) return; //注意定义递归中止条件
let pivot = nums[l]; //选择最左为轴值
swap(nums, l, r); //把轴值与最右交换
let i = l;
for (let j = l; j < r; j++) {
if (nums[j] < pivot) {
swap(nums, i, j);
i++;
}
}
swap(nums, i, r); //此时i为轴值下标
qsort(nums, l, i - 1);
qsort(nums, i + 1, r);
}
（3）topK堆排序
//堆排序 建堆O（n） 删除n个O（nlogn）
function heapSort(nums) {
if (nums.length <= 1) return nums;
let res = [];
let heapSize = nums.length;
buildHeap(nums, heapSize);
for (let i = 0; i < nums.length; i++) {
res.push(nums[0]);
swap(nums, 0, --heapSize);
siftDown(nums, 0, heapSize);
}
return res;
}
//建堆 (最小堆)
function buildHeap(nums, heapSize) {
for (let i = Math.floor(heapSize / 2) - 1; i >= 0; i--) {
siftDown(nums, i, heapSize);
}
}
//siftDown 调整堆
function siftDown(nums, i, heapSize) {
let smallest = i;
let l = 2 * i + 1;
let r = 2 * i + 2;
if (l < heapSize && nums[l] < nums[smallest]) {
smallest = l;
}
if (r < heapSize && nums[r] < nums[smallest]) {
smallest = r;
}
if (smallest != i) {
swap(nums, i, smallest);
siftDown(nums, smallest, heapSize);
}
}
//交换
function swap(nums, i, j) {
let temp = nums[i];
nums[i] = nums[j];
nums[j] = temp;
}
//test
nums = [5, 1, 4, 2, 8, 11, 2, 3];
let res = heapSort(nums);
console.log(res);
9.求平方根
var mySqrt = function(x) {
if (x < 2) return x
let left = 1
let right = Math.floor(x / 2);
while (left <= right) {
const mid = Math.floor(left + (right - left) / 2)
if (mid * mid === x) return mid
if (mid * mid < x) {
left = mid + 1
}else {
right = mid - 1
}
}
return right
};
2020.12.07
10.移除元素
输入：nums = [3,2,2,3], val = 3
输出：2, nums = [2,2]
var removeElement = function(nums, val) {
var k =0;
for(i=0;i<nums.length;i++){
if(nums[i]!=val){
nums[k++]=nums[i]
}
}
return k;
};
11.有序数组平方
输入：nums = [-4,-1,0,3,10]
输出：[0,1,9,16,100]
var sortedSquares = function(nums) {
var result = [];
for(i=0,j=nums.length-1;i<=j;){
var right = Math.abs(nums[i]);
var left = Math.abs(nums[j]);
if(right>left){
result.unshift(right*right);
i++;
}else{
result.unshift(left*left);
j--;
}
}
return result;
};
12.长度最小的子数组
找出该数组中满足其和 ≥ target 的长度最小的 连续子数组 。
输入：target = 7, nums = [2,3,1,2,4,3]
输出：2
var minSubArrayLen = function(target, nums) {
var left=right=sum=0;
var len=nums.length;
var res = len+1;
while(right<len){
sum+=nums[right++];
while(sum>=target){
res=res<right-left?res:right-left;
sum-=nums[left++];
}
}
//最后判断别忘
return res>len?0:res;
};
2021.12.08
13.移除链表元素
输入：head = [1,2,6,3,4,5,6], val = 6
输出：[1,2,3,4,5]
var removeElements = function(head, val) {
var ret = new ListNode(0,head);
var cur = ret;
while(cur.next){
if(cur.next.val===val){
cur.next=cur.next.next;
continue;
}
cur = cur.next
}
return ret.next
};
14.翻转链表
var reverseList = function(head) {
var prev = null;
var curr = head;
while(curr){
next=curr.next;
curr.next=prev;
prev=curr;
curr=next;
}
return prev;
};
2021.12.09
15.删除链表的倒数第 n 个结点
双指针
var removeNthFromEnd = function(head, n) {
let ret = new ListNode(0, head),
slow = fast = ret;
while(n--) fast = fast.next;
while (fast.next) {
fast = fast.next;
slow = slow.next
};
slow.next = slow.next.next;
return ret.next;
};
2021.12.10
16.链表相交
给你两个单链表的头节点 headA 和 headB ，请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点，返回 null 。
var getListLen = function(head) {
let len = 0, cur = head;
while(cur) {
len++;
cur = cur.next;
}
return len;
}
var getIntersectionNode = function(headA, headB) {
let curA = headA,curB = headB,
lenA = getListLen(headA),
lenB = getListLen(headB);
if(lenA < lenB) {
[curA, curB] = [curB, curA];
[lenA, lenB] = [lenB, lenA];
}
let i = lenA - lenB;
while(i-- > 0) {
curA = curA.next
}
while(curA && curA !== curB) {
curA = curA.next;
curB = curB.next;
}
return curA;
};
17.链表是否有环
var hasCycle = function(head) {
if(head === null || head.next === null) {
return false;
}
var slow=head;
var fast=head.next;
while(fast&&fast.next){
if(fast==slow){
return true
}
fast=fast.next.next;
slow=slow.next;
}
return false
};
18.字母异位
给定两个字符串 s 和 t ，编写一个函数来判断 t 是否是 s 的字母异位词。
var isAnagram = function(s, t) {
var map = {};
for(v of s){
if(map[v]){
map[v]=map[v]+1
}else{
map[v]=1
}
}
for(i of t){
if(map[i]){
map[i]=map[i]-1
}else{
map[i]=1
}
}
return Object.values(map).every(v=>v==0);
};
2021.12.11
19.两个数组的交集
var intersection = function(nums1, nums2) {
let hash1=new Set(nums1);
let hash2=new Set();
for(var i=0;i<nums2.length;i++){
if(hash1.has(nums2[i])){
hash2.add(nums2[i])
}
}
return [...hash2]
};
20.快乐数
对于一个正整数，每一次将该数替换为它每个位置上的数字的平方和，然后重复这个过程直到这个数变为 1，也可能是 无限循环 但始终变不到 1。如果 可以变为 1，那么这个数就是快乐数。
var isHappy = function (n) {
let m = new Map()
const getSum = (num) => {
let sum = 0
while (n) {
sum += (n % 10) ** 2
n = Math.floor(n / 10)
}
return sum
}
while (true) {
// n出现过，证明已陷入无限循环
if (m.has(n)) return false
if (n === 1) return true
m.set(n, 1)
n = getSum(n)
}
}
2021.12.13
21. 两数之和
// obj[target-nums[i]]=obj.[target-nums[i]]
var twoSum = function(nums, target) {
let obj = {};
for(let i = 0;i<nums.length;i++){
if(obj[target-nums[i]]!==undefined){
return[i,obj[target-nums[i]]]
}
obj[nums[i]]=i;
}
};
2021.12.13
22. 赎金信
var canConstruct = function(ransomNote, magazine) {
let table = new Array(26).fill(0);
base = "a".charCodeAt();
for(let s of magazine){
table[s.charCodeAt()-base]++;
}
for(let s of ransomNote){
const index = s.charCodeAt()-base;
if(!table[index]) return false;
table[index]--;
}
return true;
};
23. 字符串翻转
var reverseString = function(s) {
var l =-1; var r = s.length;
while(++l<--r){
[s[l],s[r]]=[s[r],s[l]]
}
return s
};
24.翻转字符串（2）
给定一个字符串 s 和一个整数 k，从字符串开头算起，每计数至 2k 个字符，就反转这 2k 字符中的前 k 个字符。
var reverseStr = function(s, k) {
const len = s.length;
let resArr = s.split("");
for(let i = 0; i < len; i += 2 * k) {
let l = i - 1, r = i + k > len ? len : i + k;
while(++l < --r) [resArr[l], resArr[r]] = [resArr[r], resArr[l]];
}
return resArr.join("");
};
2021.12.14
25.替换空格
把字符串 s 中的每个空格替换成"%20"。
示例 1：
输入：s = “We are happy.”
输出：“We%20are%20happy.”
var replaceSpace = function(s) {
// 字符串转为数组
const strArr = Array.from(s);
let count = 0;
// 计算空格数量
for(let i = 0; i < strArr.length; i++) {
if (strArr[i] === ' ') {
count++;
}
}
let left = strArr.length - 1;
let right = strArr.length + count * 2 - 1;
while(left >= 0) {
if (strArr[left] === ' ') {
strArr[right--] = '0';
strArr[right--] = '2';
strArr[right--] = '%';
left--;
} else {
strArr[right--] = strArr[left--];
}
}
// 数组转字符串
return strArr.join('');
};
25.左旋转字符串
输入: s = “abcdefg”, k = 2
输出: “cdefgab”
var reverseLeftWords = function(s, n) {
var length = s.length;
let i = 0;
while (i < length - n){
s = s[length - 1] + s;
i++;
}
return s.slice(0,length);
};
2021.12.15
26.实现strStr（），用kmp
输入：haystack = “hello”, needle = “ll”
输出：2
var strStr = function (haystack, needle) {
if (needle.length === 0)
return 0;
const getNext = (needle) => {
let next = [];
let j = 0;
next.push(j);
for (let i = 1; i < needle.length; ++i) {
while (j > 0 && needle[i] !== needle[j])
j = next[j - 1];
if (needle[i] === needle[j])
j++;
next.push(j);
}
return next;
}
let next = getNext(needle);
let j = 0;
for (let i = 0; i < haystack.length; ++i) {
while (j > 0 && haystack[i] !== needle[j])
j = next[j - 1];
if (haystack[i] === needle[j])
j++;
if (j === needle.length)
return (i - needle.length + 1);
}
return -1;
};
2021.12.17
26.重复的子字符串
kmp，如果len % (len - (next[len - 1] + 1)) == 0 ，则说明 (数组长度-最长相等前后缀的长度) 正好可以被 数组的长度整除，说明有该字符串有重复的子字符串。
数组长度减去最长相同前后缀的长度相当于是第一个周期的长度，也就是一个周期的长度，如果这个周期可以被整除，就说明整个数组就是这个周期的循环。
var repeatedSubstringPattern = function (s) {
if (s.length === 0)
return false;
const getNext = (s) => {
let next = [];
let j = 0;
next.push(j);
for (let i = 1; i < s.length; ++i) {
while (j > 0 && s[i] !== s[j])
j = next[j - 1];
if (s[i] === s[j])
j++;
next.push(j);
}
return next;
}
let next = getNext(s);
if (next[next.length - 1] !== 0 && s.length % (s.length - next[next.length - 1]) === 0)
return true;
return false;
};
10.斐波那契数列（动态规划）
写一个函数，输入 n ，求斐波那契（Fibonacci）数列的第 n 项（即 F(N)）。斐波那契数列的定义如下：
F(0) = 0, F(1) = 1
F(N) = F(N - 1) + F(N - 2), 其中 N > 1.
斐波那契数列由 0 和 1 开始，之后的斐波那契数就是由之前的两数相加而得出。
答案需要取模 1e9+7（1000000007），如计算初始结果为：1000000008，请返回 1。
var fib = function(n) {
var dp = [];
if(n==0){
return 0
}
if(n == 1){
return 1
}
dp[0] =0;
dp[1]=1;
for(var i =2;i<=n;i++){
dp[i]=(dp[i-1]+dp[i-2])% 1000000007
}
return dp[n];
};
js手撕
2021.11.11
1.防抖和节流
防抖
触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
<script>
function pay() {
console.log("点击")
}
function debounce (func,delay) {
let timer;
// 闭包
return function () {
let contest = this;
clearTimeout(timer);
timer = setTimeout(() => {
// 需要防抖的操作...
func().apply(contest, arguments);
console.log("防抖成功！");
}, delay);
}
}
var btn1 = document.getElementById('debounce');
btn1.addEventListener("click", debounce(pay,5000));
</script>
节流
函数被触发时，只响应在某个固定时间短内的第一次请求，后续的请求都不响应，直到下个时间周期，继续响应下个周期内的第一次请求，周而复始。
<button id="debounce">节流</button>
<script>
function pay() {
console.log("节流")
}
function debounce (func,delay) {
let flag = true;
return function () {
if (!flag) return false;
flag = false;
setTimeout(() => {
func.apply(this, arguments);
flag = true;
}, delay)
}}
var btn1 = document.getElementById('debounce');
btn1.addEventListener("click", debounce(pay,1000));
</script>
2.函数柯里化
2021.11.14
reduce相当于一个累加器
function sum(...args) {
//对第一层参数求和
let x = args.reduce((acc, next) => {
return acc + next;
})
// 返回一个新的函数
return function (...args2) { //第二层的参数
// 当没有第二层参数时，返回x即可
if (args2.length == 0) return x;
let y = args2.reduce((acc, next) => {
return acc + next;
})
return sum(x + y); //返回x+y作为新的第一层
}
}
console.log(sum(1, 2)(3)(4)()); // 10
3.清空前后空格
String.prototype.trim = function () {
// \s 为任意的空白符. 包括空格，换行符，制表 符，换页符
return this.replace(/^\s+/g, "").replace(/\s+$/g, "");
}
4.数组拍平
//concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。
function flatten(arr) {
let res = [];
for (let i = 0; i < arr.length; i++) {
if (Array.isArray(arr[i])) {
res = res.concat(flatten(arr[i]));
} else {
res.push(arr[i]);
}
}
return res;
}
let arr = [1, 2, 3, [4, 5, 6, [7, 8, 9]], 10];
console.log(flatten(arr));
5.图片懒加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
display: block;
width: 100%;
height: 300px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<img data-src="mao.jpg" alt="">
<img data-src="mao.jpg" alt="">
<img data-src="mao.jpg" alt="">
<img data-src="mao.jpg" alt="">
<img data-src="mao.jpg" alt="">
<img data-src="mao.jpg" alt="">
<img data-src="mao.jpg" alt="">
<img data-src="mao.jpg" alt="">
<img data-src="mao.jpg" alt="">
<img data-src="mao.jpg" alt="">
<img data-src="mao.jpg" alt="">
<img data-src="mao.jpg" alt="">
</body>
<script>
var imgs = document.querySelectorAll('img');
//获得元素距离页面顶部的距离，（到浏览器顶部的距离）
function getTop(e){
return e.offsetTop;
}
function lazyLoad(imgs) {
//获取可视区高度
var H = window.innerHeight || document.documentElement.clientHeight;
//滚动区域高度
var S = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
for (let i = 0; i < imgs.length; i++) {
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
if (H + S > getTop(imgs[i])) {
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
window.onload = window.onscroll = function () {
lazyLoad(imgs);
}
</script>
</html>
6.深拷贝和浅拷贝
//浅拷贝
function shallowCopy(obj) {
var copy = {}
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
copy[key] = obj[key]
}
}
return copy;
}
//深拷贝
function deepClone(obj){
var clone;
if (obj && typeof obj !== 'object') clone = obj;
else {
clone = Array.isArray(obj) ? [] : {};
for (let k in obj) {
if (obj.hasOwnProperty(k)) {
if (obj[k] && typeof obj[k] === 'object') {
clone[k] = deepClone(obj[k]);
} else {
clone[k] = obj[k];
}
}
}
}
return clone;
}
//test
let obj = {
name: 'vivian',
age: 18,
mark: {
one: 1,
two: 2
},
arr: [1, 2, 3]
}
let shallow=shallowCopy(obj)
let deep = deepClone(obj);
obj.arr[0]=10;
console.log(shallow);
console.log(deep);
7.call、apply、bind
//call,改变this指向 调用函数
Function.prototype.mycall = function (context, ...arg) {
context.fn = this; //this是test函数，把他作为context的方法而存在
let res = context.fn(...arg);
delete context.fn;
return res;
}
//test
let obj = {
name: 'vivian'
}
function test(arg1, arg2, arg3) {
console.log(this.name);
console.log(arg1, arg2, arg3);
}
test.mycall(obj, 1, 2, 3);
//apply,改变this指向 调用函数参数为数组
Function.prototype.myApply = function (context, arg) {
context.fn = this;
let res;
if (!arg) {
res = context.fn();
} else {
res = context.fn(...arg);
}
delete context.fn;
return res;
}
//bind改变this指向，不调用函数
Function.prototype.mybind = function (context, ...arg) {
let fun = this;
return function () {
return fun.apply(context, arg)
}
}
CSS手撕
1.两栏布局
（1）利用浮动，将左边元素宽度设置为200px，并且设置向左浮动。将右边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。
<style>
.outer{
height: 500px;
}
.left{
float: left;
width: 200px;
height: 500px;
background-color: tomato;
}
.right{
margin-left: 200px;
height: 500px;
width: auto;
background-color: greenyellow;
}
</style>
<div class="outer">
<div class="left">left</div>
<div class="right">right</div>
</div>
利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden; 这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。
.left{
width: 100px;
height: 300px;
background: red;
float: left;
}
.right{
height: 300px;
background: blue;
overflow: hidden;
}
（2）利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。
.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}
（3）利用绝对定位，将父级元素设置为相对定位。左边元素设置为absolute定位，并且宽度设置为200px。将右边元素的margin-left的值设置为200px。
.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100px;
background: tomato;
}
.right {
margin-left: 200px;
background: gold;
}
利用绝对定位，将父级元素设置为相对定位。左边元素宽度设置为200px，右边元素设置为绝对定位，左边定位为200px，其余方向定位为0。
.outer {
position: relative;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 200px;
background: gold;
}