前端面试题

2.// 将数组[1, [2, [3, [4, [5, [6, [7, [8, [9]]]]]]]]] 转换成  [1, 2, 3, 4, 5, 6, 7, 8, 9] 
//扁平化数组（多维数组=>一维数组）方法很多，暂时只列举以下方法
let arr = [1, [2, [3, [4, [5, [6, [7, [8, [9]]]]]]]]]
```js
//方法1：
let arr1 =arr.join().split(",").map(Number);
      console.log(arr1);
      
//方法2：
let arr2=arr.flat(Infinity)
console.log(arr2);

//方法3 
// 引入插件 lodash.js  
//flattenDeep(Array)  需要处理的数组  返回一个新的一维数组
let arr3 = flattenDeep(arr)
console.log(arr3 );

//方法4 
function flatten(arr){
    var res = [];
    for(var i=0;i<arr.length;i++){
        if(Array.isArray(arr[i])){
            res = res.concat(flatten(arr[i]));
        }else{
            res.push(arr[i]);
        }
    }
    return res;
}
flatten(arr);
//打印结果 [1, 2, 3, 4, 5, 6, 7, 8, 9]

3.setTimeout(()=>{
			console.log('a');
		},0);
		console.log('b');
		var p=new Promise((resolve)=>{
			resolve('c');
			console.log('b');
		});
		p.then(res=>{
			console.log('e');
		})

4.var length=5; var p={
			length:3,
			bar(f){
				f();
				arguments[0]();
			}
		};
		function foo(){
			console.log(this.length)
		}
		p.bar(foo,2);
//   打印结果  5       2    

5.function Foo(){
			var i=0;
			return function(){
				console.log(i++);
			}
		}
var f1=Foo(),f2=Foo();
f1();
f1();
f2();
//   打印结果   0  1  0

6.var a=[];
	for(let i=0;i<10;i++){
		a[i]=function(){
			console.log(i);
		}
		
	}
	a[6]();   //打印结果：6   es6语法

7.for(var i=0;i<5;i++){
          (function(j){
			  setTimeout(function(){
				  console.log(j);
			  },1000);
		  })(i)
		}
	   console.log(i);
	   // 打印结果：5      0   1   2   3   4

8.var bb=1;
	function aa(bb){
		bb=2;
		alert(bb);
	}
	aa(bb);
	alert(bb);
//  2   1

9.var str = 'asdfssaaasasasasaa';
	var json = {};
	for (var i = 0; i < str.length; i++) {
		if(!json[str.charAt(i)]){
		json[str.charAt(i)] = 1;
		}else{
		json[str.charAt(i)]++;
		}
	};
	var iMax = 0;
	var iIndex = '';
	for(var i in json){
		if(json[i]>iMax){
			iMax = json[i];
			iIndex = i;
		}
	}        
	console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');
	// 出现次数最多的是:a出现9次

10.var arr = [0,2,3,4,4,0,2];
	var obj = {};
	var tmp = [];
	for(var i = 0 ;i< arr.length;i++){
	if( !obj[arr[i]] ){
		obj[arr[i]] = 1;
		tmp.push(arr[i]);
	}
	}
	console.log(tmp);	
	// [0,2,3,4]

11. 实现15234234.23用逗号的格式转化为15，234，234.23
	var   num = 15234234.23 ;
	var newnum=parseFloat(num_s).toLocaleString();
	//15，234，234.23

12.在页面添加X个div元素，每10个一行，使用定位布局
已知div:{
    width:20px;
    height:20px;
    background:red;
    position:absolute;
}

解：

<template>
    <div class='cesshi' ref="ceshi">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
  </div>
</template>

<script>
export default {
    data(){
      return{
        length:0,//div的个数
        num:1,//共有几行div
      }
    },
    mounted(){
     this.init()
    },
    methods:{
      init(){
        this.length=this.$refs.ceshi.children.length;
        this.num=Math.ceil(this.length/10);
        for(var j=0;j<this.num;j++){
             for(var i=0;i<10;i++){
                if((j*10)+i<this.length){
                  this.$refs.ceshi.children[(j*10)+i].style='top:'+j*20+'px;left:'+i*20+'px;'
                }
              }
           }
      }
    }
};
</script>
<style lang="scss" scoped>
.cesshi div {
  width: 20px;
  height: 20px;
  background: red;
  position: absolute;
}
</style>

效果图：

13.有一个数组arr=[{a:1},{a:2},{a:3},{a:4},{a:5}...{a:2017}]，页面中有一元素div，在div中添加若干个ul，要求每个ul里面有7个li，每个li的内容为数组元素a的值
<template>
     <div>
       <ul v-for="(item) in Math.ceil(arr.length/7)" :key="item">
           <li v-for="(items,index) in arr.slice((item-1)*7,item*7)" :key="(item-1)*7+index">
             {{items.a}}
           </li>
       </ul>
     </div>
</template>
<script>
export default {
    data(){
      return{
      //模拟数据
        arr:[{a:1},{a:2},{a:3},{a:4},{a:5},{a:6},{a:7},{a:8},{a:9},{a:10},{a:11},{a:12},{a:13},{a:14},{a:15},{a:16},{a:17},{a:18}],
      }
    },
};
</script>

效果图：

2021-06 新面试题

14. 在js中，遇到预期为布尔值的地方（比如if语句的条件部分），会将非布尔值的参数自动转化为布尔值。哪些值会转化为false?
    0，undefined , null , NaN , ‘’ , -0

15. ‘2’+1和’2’-1运算结果分别是什么 ? 21和1

16. 0.1+0.2===0.3这类判断方式是否合理？为什么？不合理，二进制浮点数

17. 将文本中“hello world" 中，所有的”o“的字母显示高亮

var str = "hello world";
  let newStr = str.replace(/[o]/g, '<span style="color:red;">o</span>');

18. 数组[0,1,1,2,3,3]去重 loadsh插件 uniq方法

function getAge(...args) {
      console.log(typeof args);
      console.log(args instanceof Array);
      console.log([1] instanceof Object);
    }
    getAge(18);

class Chameleon {
      static colorChange(newColor) {
        this.newColor = newColor;
        return this.newColor;
      }
      constructor({ newColor = "green" } = {}) {
        this.newColor = newColor;
      }
    }
    const c = new Chameleon({ newColor: "purplr" });
    c.colorChange("orange");