前端常见的手撕代码

缘夏520

已于 2022-03-28 09:36:41 修改

阅读量1.3k

点赞数 1

分类专栏：前端面试文章标签：前端 javascript vue

于 2022-03-23 22:41:50 首次发布

本文链接：https://blog.csdn.net/qq_42584734/article/details/123698656

版权

前端面试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、打印99乘法表，且实现垂直居中（即等腰三角形）

<body>
  <div>
    九九乘法表
  </div>
  <script>
  function out(n){
         for(let i=1; i<=n; i++){
            document.write("<div>");
             for(let j=1; j<=i; j++){
                 document.write("<span>"+j+"*"+i+"="+(j*i)+"</span>"+"&nbsp&nbsp")
             }
            document.write("</div>"+"<br>");
         }
        document.write("<hr>")
    }
    out(9);
  </script>
  <style>
    div{
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</body>

在这里插入图片描述

2、有效括号

var isValid = function(s) {
    const stack=[];//建立一个栈
    if(s.length<0) return false;
    for(i=0;i<s.length;i++){
        //如果是左括号则入栈
        if(s[i]=='('||s[i]=='['||s[i]=='{'){
            stack.push(s[i])
        }else{
            //否则，判断栈内是否有其他元素,没有则返回false
            if(stack.length<1){
                return false;
            }//查询栈顶元素
            let top=stack[stack.length-1];
            //如果栈顶元素和当前元素匹配，则栈顶元素出栈，否则返回false
            if((top=="("&&s[i]==")")||(top=="["&&s[i]=="]")||(top=="{"&&s[i]=="}")){
                stack.pop();
            }else{
                return false;
            }
        }
    }
    //如果最后栈内元素为0，则恰好能够匹配
    return stack.length==0;
};

3、f(n) => 1+2+3+…+n，即输入n，输出1加到n的和，条件是不能使用循环和不能使用数学的求和公式（不能用乘除）。

//递归实现
function dfs(n1,n2,n){
        let sum=n1;
        sum=sum+n2;
        //注意返回
        if(n2<n) return dfs(sum,n2+1,n)
        else return sum;
    }
    document.write(dfs(1,2,100));

4、const arr=[x, y]; //x，y是数字或字符串。即将x和y的值互换，条件是不能开辟新的内存空间，即不能声明变量。

[x,y]=[y,x];

5、vue写一个小页面，点击click按钮实现输入框中的内容能够在下方显示出来

this.n=document.getElementById("…").value;

<template>
<div>
  <input type="text" id="i">
  <!-- 注意方法扩号 -->
<button @click="show()">显示内容</button>
<p>{{content}}</p>
</div>
</template>

<script>
export default {
  name: '',
  props: {
    msg: String
  },
  data(){
    return{
      content:" "
    }
  },
  methods:{
    show(){
      //注意.value获取内容，this指向内容，进行修改
     this.content=document.getElementById("i").value;
    }
  }
}
</script>

6、给定一个字符串 S，返回 “反转后的” 字符串，其中不是字母的字符都保留在原地，而所有字母的位置发生反转。(利用正则表达式，前后交换，解构赋值)

let s='asdfaerf13dfv234vszv';
    let s1=[...s];
    let left=0,right=s1.length-1;
    let reg=/[a-zA-Z]/;
    while(left<right){
      if(reg.test(s1[left])&&reg.test(s1[right])){
        [s1[left],s1[right]]=[s1[right],s1[left]];
        left++;
        right--;
      }else if(!reg.test(s1[left])){
        left++;
      }else{
        right--;
      }
    }
    document.write(s1.join(""));//vzsvvfdf13rea234fdsa

7、给一个数组，找出比某一特定值大的元素

 let s=[1,4,5,3,34,53,54,5,53,87,23];
    let s1=s.filter((item,index,s)=>
      item>1
    )
    document.write(s1)

8、两数之和

var twoSum = function(nums, target) {
    map = new Map()
    for(let i = 0; i < nums.length; i++) {
        x = target - nums[i]
        if(map.has(x)) {
          return [map.get(x),i]
        }
        map.set(nums[i],i)
    }
};

9、合并数组并去重

 function foo(n1,n2){
    let n3= [...new Set(n1.concat(n2))];
      document.write(n3);
    }

10、冒泡排序

function sort1(arr) {
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
          if (arr[j] > arr[j + 1]) {
            [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
          }
        }
      }
      return arr;
    }

11、函数原型上挂载函数

function People(name){
    //变量属性
   
    this.name=name;
    //方法属性需要用=赋值
    this.hasWakeUp=function (){
        console.log(this.name+"has wake up");
      };
    //优,1，避免每次创建对象都创建方法
    this.gotoSleep=gotoSleep;
    }
    function gotoSleep(){
        console.log(this.name+"go to sleep");
    };
    //优化2，将方法挂载到原型对象上，避免全局污染
      People.prototype.f1=function(){
          console.log(this.name+this.age);
      };
      People.prototype.age=18;

let people=new People("perter");
//改变原型对象的指向
People.prototype={
    //保证合理性添加constructor
    constructor:People,
    age:20
}
let people1=new People("Dive")
people.gotoSleep();
people.hasWakeUp();
people.f1();
console.log(people1.age);
//实例对象不会改变原型对象的值，但可以改变对象下的对象属性值

缘夏520

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端常见的手撕代码

1、打印99乘法表，且实现垂直居中（即等腰三角形）<body> <div> 九九乘法表 </div> <script> function out(n){ for(let i=1; i<=n; i++){ document.write("<div>"); for(let j=1; j<=i; j++){ docu
复制链接

扫一扫