前端常见面试题

1.数组分块

         function fenkuai(arr,size){
        let result = []
        //临时变量
        temp = []
      
        arr.forEach(element => {
            if(temp.length === 0){
            result.push(temp)
            }
            temp.push(element)
            if(temp.length === size){
                temp = []
            }
        

        });
            return result
    }
    let list = fenkuai([1,2,3],2) 

2.用async await每五秒钟打印一次console.log

 function demo(){
        return new Promise((resolve)=>{
           setInterval(() => {
               resolve(console.log('...'))
           }, 2000);
            })
        }
        !(async function(){
               
               await demo()
               
        })()

3.数组去重

  let temp = [1,2,3,3]
        // let result = temp.filter((item)=>{
        //     return item>1
        // })
        //相比普通的 for 循环，forEach 无需自己控制循环条件，所以很多时候，forEach 方法被用来代替 for 循环来完成数组的遍历。 
        let result = []
        // temp.forEach((item)=>{ result.push(item*2) })
        //数组去重一
        temp.forEach((item)=>{
            if(result.indexOf(item) === -1){
                result.push(item)
            }
        }
        )   
        //数组去重方法二
        temp.forEach((item)=>{
            if(!result.includes(item)){
                result.push(item)
            }
            
        })  

数组反转

let num = [1,2,3,4,5,6]
	let num1 = []
//这里面的每个便利的元素都会添加到最前面去，所以越是前面的元素越会到最后面去
			num.forEach((item)=>{
				num1.unshift(item)
			})
			
			//数组反转for方法
			//这里面的每个便利的元素都会添加到最前面去，所以越是前面的元素越会到最前面去
			// let num2 =[]
			// for(let i=num.length-1;i>=0;i--){
			// 	num2.push(num[i])
			// }					

for-of循环定时器

     function off(num1){
            return new Promise ((resolve)=>{
                    setTimeout(() => {
                        resolve(num1*num1)
                    }, 1000);
            })
        }
        let num1 = [1,2,3]
        !(async function(){
           for(let i of num1){
              let result = await off(i)
              console.log(result)
           }
               
     
        })() 

html语义化标签

冒泡排序

	let num2 = [1,2,3,4,5,7,6]
			function maopao(num2){
				for(let i=0;i<num2.length;i++){
					for(let j=0;j<num2.length;j++){
						if(num2[j]>num2[j+1]){
							let temp
							temp = num2[j]
							num2[j]=num2[j+1]
							num2[j+1] = temp
						}
					}
				}
			}
		maopao(num2)

浅拷贝

  var obj1 = {
		         a: {
		           a1: { a2: 1 },
		           a10: { a11: 123, a111: { a1111: 123123 } }
		         },
		         b: 123,
		         c: "123"
		       }
		       // 方式1
			     var shallowObj3 = Object.assign({}, obj1)
			   
			       let shallowObj = shallowClone1(obj1);
			   
			       shallowObj.a.a1 = 999
			       shallowObj.b = true
			   
			       console.log(obj1);  //第一层的没有被改变，一层以下就被改变了
			  
		       function shallowClone1(o) {
		         let obj = {}
		   
		         for (let i in o) {
		           obj[i] = o[i]
		         }
		         return obj
		       }
		    const result = shallowClone1(obj1)
			result.a.a1.a2 = 321
			result.b = 1234
			console.log(obj1)

两个变量交换位置

			// let num1 = 1
			// let num2 = 2
			// let temb 
			// temb = num1
			// num1 = num2 //这步已经把2变成了1
			// //现在只要把一变成2
			// num2 = temb//再把已经存好的temb的值给num1

节流防抖

//节流
			function jieliu(callback,time){
			   let start = 0;
			   return function(e){
				   let now = Date.now()
				   if(now-start>time){
					   callback(this,e)
				   }
			   } 
			   
			}
			//防抖：创建一个防抖动的函数，该函数从上一次被调用后，延迟wait秒后调用callback
			function fangdou(callback,time){
				let timeid = null
				return function(e){
					if(timeid != null){
						clearTimeout(timeid)
					}
				timeid=(()=>{
						callback(this,e)
						timeid = null
					},time)
				}
			}
			//列表展示
			this.timer = setTimeout(() => {
			  const result = []
			  for (let i in this.cities) {
			    this.cities[i].forEach((value) => {
			      if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
			        result.push(value)
			      }
			    })
			  }
			  this.list = result
			}, 100)

单选框

<div id="app">
		    <label>男<input type="radio" v-model="xinbie.gender" value="man"/></label>
		    <label>女<input type="radio" v-model="xinbie.gender" value="woman"/></label>
		    <p v-if="isshow">已选：{{xinbie.gender}}</p><!--如果用原生js实现此功能比较麻烦-->
			<div id="username" >
					<span  @click="handleclick">suk1</span>
					<span @click="handleclick">suk2</span>
			</div>
		
			
		</div>
		<script>
		    var app=new Vue({
		        el:'#app',
		        data(){
					return{
						xinbie:{
							 gender:'woman'
						}
						
					}
		           
		        },
				computed:{
					isshow(){
						let result = false
						if(this.xinbie.gender === 'man'){
							result=true
						}
						return result
					}
				},
				methods:{
					handleclick(){
						let skus = 
						console.log(skus)
					}
				}
		    });

闭包的两种实现方式

	//实现闭包的方式一
			// function demo(){
			// 	let num = 1
			// 	return function(){
			// 		console.log(num)
			// 	}
			// }
			// let fn = demo();
			// fn()
			
			//实现闭包的方式二
			function print(fn){
				let num1 = 1
				fn()
			}
			let num1 = 2
			function fn(){
				console.log(num1)
			}
			print(fn)

slice数组的使用

const arr = [10,20,30,40]
const arr1 = arr.slice(1,3)//留守不留尾巴，而且不会对原来的数组造成改变
const arr2 = arr.slice(2)//第三项开始，第三项也要
			const arr3 = arr.slice(-2) //最后两项开始截取，最后两项也需要						

promise实现定时器功能

//普通函数使用promise
			// function demo(){
			// 	return new Promise((resolved)=>{
			// 		setTimeout(()=>{
			// 			resolved('123')
			// 		},1000)
			// 	})
			// }
			// demo().then((data)=>{
			// 	console.log(data)
			// })
			
			//立即执行函数版本promise
			!(function(){
				return new Promise((resolved)=>{
						setInterval(()=>{
							resolved(console.log('...'))
						},2000)
						
					})	
			})().then((data)=>{
				console.log('定时器走起')
			})
			

移动端解决禁止用户手指缩放

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
也可以是这个<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />

构造函数详解
一个需要共享并且通过实例对象调用的方法，是在构造函数的原型对象中的。
实例对象通过构造函数进行创建，原型对象是有了构造函数就会产生的
只有当一个函数以 new 关键字来调用的时候，我们才能说它是一个构造函数。
(1) 当以 new 关键字调用时，会创建一个新的内存空间，标记为 Animal 的实例。
(2)函数体内部的 this 指向该内存
通过上面的讲解，你就可以知道，给 this 添加属性，就相当于给实例添加属性。
用new调用构造函数，函数内部会发生如下变化：
创建一个this变量，该变量指向一个空对象。并且该对象继承函数的原型；
属性和方法被加入到this引用的对象中；
隐式返回this对象（如果没有显性返回其他对象）
用伪程序来展示上述变化