手写面试编程题

Posted 2021-02-17 iwishicould

 

第1题==》实现数组去重 通过 new Set(数组名)
// var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6];
// var newarr1 = new Set(arr);
// console.log([...newarr1]);
// 输出的值是  [12, 3, 4, 5, 6]

第2题==》深拷贝：
==》拷贝出来的对象互相的独立，不会影响 使用的JSON.stringify和JSON.parse(user2);

var user1={name:"张三",age:18,sex:"男"};
var user2=JSON.stringify(user1); //用JSON.stringify()把对象转为一个字符串
var user3=JSON.parse(user2); //JSON.parse()会根据这个字符串转为一个新的对象。
console.log(user3);

第3题===>获取 你当前被点击的文本内容
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>

$("li").on("click",function(){
console.log($(this).text());
})

on语法是==》父辈的元素对象.on("事件类型","触发的元素",function(){})

第4题==》 设置奇数偶数背景色
odd 奇数 和 even偶数 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）
li:nth-child(odd) { background: #0f0;} 设置奇数行

计算交集数组
var a = [1,2,3,4,5];
var b = [2,4,6,8,10];

var c = a.filter(function(v){ return b.indexOf(v) > -1 }) //交集

var d = a.filter(function(v){ return b.indexOf(v) == -1 }) //差集

var e = a.filter(function(v){ return !(b.indexOf(v) > -1) }) //补集
.concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}))

//并集
var f = a.concat(b.filter(function(v){ return !(a.indexOf(v) > -1)}));

console.log("a与b的交集：", c); // a与b的交集： (2) [2, 4]
console.log("a与b的差集：", d); //  [1, 3, 5]
console.log("a与b的补集：", e); // [1, 3, 5, 6, 8, 10]
console.log("a与b的并集：", f); //(8) [1, 2, 3, 4, 5, 6, 8, 10]

第五题： JS中检测变量为string类型的方法
var aa = "hello world";
function stringCheck (str) {
if(typeof str =="string" || str.constructor == String) {
return true;
} else {
return false;
}
}
console.log(stringCheck(aa)) ;

 

第6题闭包
// 子函数跨作用域访问了父函数的变量 形成闭包 num不会给释放 。它利用了必报的缺点
var getNum = (function () {
var num = 10;
return function () {
return num++
};
})();

var rst1 = getNum();
var rst2 = getNum();
console.log(rst1, rst2); //10 11

第7题==》 将两个数组合并为一个数组
var a = [1, 2, 3,4,5];
var b = [4, 5, 6];

var c = a.concat(b); //链接
var d=new Set(c); //数组去重
console.log([...d]); //将伪数组变为真实的数组

第8题==》 怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
　　createDocumentFragment() //创建一个DOM片段
　　createElement() //创建一个具体的元素
　　createTextNode() //创建一个文本节点

　　appendChild() //添加
　　removeChild() //移除
　　replaceChild() //替换
　　insertBefore() //插入

3）查找
　　getElementsByTagName() //通过标签名称
　　getElementsByName() //通过元素的Name属性的值
　　getElementById() //通过元素Id，唯一性

第9题==》计算某个

第10题，原型继承提
function Child(name, age){
this.name = name;
this.age = age;
}
Child.prototype = new People();
var child = new Child(‘Rainy‘, 20);
child.say()

 

第11题==》构造函数的继承
function Child(name, age){
People.call(this)
this.name = name;
this.age = age;
}
var child = new Child(‘Rainy‘, 20);
child.say();

第12题 ===》对一个数组实现随机排序
var a=[12,34,1,2,3,0,-23]; //对这个数组实现随机排序
function shuffle(arr) {
arr.sort(function () {
return Math.random() - 0.5;
});
}
shuffle(a);
console.log(a);

 

第13题==》让元素水平 垂直居中的三种方式
/* 第一种方式 绝对定位 距离石中玉为0 最后margin:auto 兼容性：,IE7及之前版本不支持 这种方式的兼容性是最好的了*/
div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}

/* 第二种方式 div绝对定位 【margin 负间距】*/
/* div {
width: 200px;
height: 200px;
background: green;

position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
} */

/* 第三种方式 用了css3的知识 div绝对定位水平垂直居中【Transforms 变形】 IE8不支持*/
div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

第14题===》通过jQuery的extend方法实现深拷贝
var array = [1,2,3,4];
var newArray = $.extend(true,[],array);