面试编程小题

• List item

面试编程小题（javascript）

本文章尽量用简洁的代码去完成题目要求，话不多说，上代码。

1.实现一个简单模板函数替换字符串

输入：
var obj = {name:“二狗子”,age:“15”};
var str = “{{name}}很厉害，才{{age}}岁”;
输出：
二狗子很厉害，才15岁。

var str = "{{name}}很厉害，才{{age}}岁";
var obj = {name:"二狗子",age:"15"};
function rep(t,c){
   t = t.replace(/\{\{|\}\}/g,'')
   for(var item in obj){
      t = t.replace(item,obj[item])
   }
   return t
}
console.log(rep(str,obj))

2.数组扁平化且去重后升序

输入：
var arr = [[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10];
输出：
[1,2,3,4,5,6,7,8,9,10,11,12,13,14]

var arr = [[1,2,2],[3,4,5,5],[6,7,8,9,[11,12,[12,13,[14]]]],10];
function aaa(arr){
  arr =arr.toString()//变字符串扁平化
  arr = arr.split(',')//变数组
  arr = [...new Set(arr)]//去重
  arr.sort(function(a,b){return a-b}) //排序
  return arr
}
console.log(aaa(arr))

3.事件代理、委托

假设有这样一个DOM列表

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	...
</ul>

实现一个功能：点击li的时候，打印对应点击的值，最容易想到的方式是每个li绑定一个事件，但是万一有成千上百个li呢？这就引入了事件委托和代理。
我们仅通过给他们的父元素ul绑定一个事件，这样我们只需要维护一个事件就行。

ul.onclick = function(ev){
	let ev = ev||window.event;
	let li = ev.srcElement||ev.target;
	if(li.nodeName.toLowerCase()=='li'){
		//doSomeThing
	}
}

4.在vue里如何绑定class属性

//在对象语法中
<div :class="'main':true,'range':false"></div>
//在数组语法里
<div class="[first,second]"></div>
data:{
	first:'main',
	second:'range'
}

5.如何实现一个正方形？如果不能通过设置固定宽高呢？

//允许使用宽高
<style>
.square{
	width:100px;
	height:100px;
}
</style>
<div class="square"></div>
//不允许使用宽高,利用边框实现
<style>
.square{
	width:0;
	height:0;
	border:100px solid #f00;
}
</style>
<div class="square"></div>

6.深拷贝与浅拷贝

1.js的基础数据类型，比如数字，布尔，字符串，undefined,null，Symbol都是按值传递的，基本数据类型放在栈内

var a = 1;
var b = a;
b = 3
a //1

这里我们先把a赋值给b,再修改b的值，a值不变，a和b是相互独立的，互不影响的
2.js中还有一类是引用类型的变量，比如对象，数组和函数，引用类型数据放在堆内

var l = {a:1};
var r = l;
r.a =5;
l.a //5

这里我们先把l赋值给r,再修改r的值，l值变，这里的l和r是指向同一个对象，所以会一块改变
3.浅拷贝：只复制一层，下面就是上面1和2

//简单实现
function shallowCopy(src){
	let dst = Array.isArray(src)?[]:{}
	for(let prop in src){  //遍历属性
		dst[prop] = src[prop]
	}
	return dst
}
let src = {
	a:1,
	f:{
		b:2
	}
}
let dst = shallowCopy(src)
dst.a = 100
dst.f.b = 200
src.a  //1
src.f.b //200
//使用Object.assign方法也可以

4.深拷贝算法：彻底拷贝，不管哪种类型

//简单实现
let src = {
	a:2,
	b:{
		c:3
	},
	get:function(){}
}
let dst = JSON.parse(JSON.stringify(src))
//dst就变成
{
	a:2,
	b:{
		c:3
	}
}
//会丢失get方法,进一步修正
function deepClone(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
  var objClone = Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空，并且是对象或者是
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          objClone[key] = deepClone(obj[key]);
        } else {
          objClone[key] = obj[key];
        }
      }
    }
  }
  return objClone;
}
deepClone(src)//完美深拷贝，函数也可搞。