前端面试题-js

1.对象深浅拷贝

1：为什么需要拷贝

        var a=1,
b=a;
a=3;
//此时b是不会被a的改变的
console.log(b);

因为对象赋值的时候赋值的是引用

        var a ={
a :1
};
var b=a;
a.a=2;
// 此时会被更改，因为赋值的是引用
console.log(b);

2 :如何实现对象的浅拷贝==引用跟一起变

        //浅拷贝；拷贝对象一层
var a ={
a:1,
b:2,
}
function simpleClone(obj) {
var cloneObj = {};
//es3语法实现,语义化不强
for(var i in obj){
cloneObj[i] = obj[i]
}
}
// console.log(Object.keys(obj));
// console.log(Object.values(obj));
// console.log(Object.entries(obj));
// for (var key of Object.keys(obj)) {
//     cloneObj[key] = obj[key];
// }
// es6语法
for (var [key,value] of Object.entries(obj)) {
cloneObj[key] = value;
}
return cloneObj;
//es5语法 defineProperty;
Object.getOwnPropertyNames(obj).forEach(function (key){
// cloneObj[key] = obj[key];
var des = Object.getOwnPropertyDescriptor(obj,key)
Object.defineProperty(cloneObj,key,des);
});
return cloneObj;
}
console.log(simpleClone(a))

3、如何实现深拷贝=不跟着变（引用:切断）

1、原生js实现对象的深拷贝：

创建一个对象，将原对象的属性赋到创建的对象上去；

    <script>
var obj ={
a:1,
b:{
c:3,
d:{
e:5
}
}
}
//对象里面包含对象，对象赋值存在引用(会跟着变)，所以要使用递归，一层层排除对象
function deepClone(obj,cloneObj) {
//如果存在数组
cloneObj[i] = Array.isArray(obj[i]) ? [] :{} ;
for( i in obj) {
if( typeof obj[i] === ‘object‘ && obj[i] !== null ) {
cloneObj[i] ={};
deepClone(obj[i],cloneObj[i]);
}
// 递归的出口：防止死循环
else{
cloneObj[i] = obj[i];
}
}
return cloneObj;
}
var obj1 = deepClone(obj);
// console.log(obj);
obj.b.c = 10;
console.log(obj1);
</script>

2、通过JSON.stringify实现

        var obj ={
a:1,
b:{
c:3,
d:{
e:5,
f:[1,2,3,4,5]
}
}
}
//JSON.parse JSON.stringify;
function deepClone(obj){
//把对象转换成字符串
console.log(JSON.stringify(obj));
//把字符串转换成对象
return (Json.parse(JSON.stringify(obj)))
}
var obj1 = deepClone(obj);
// console.log(obj);
obj.b.c = 10;
obj.b.d.f.push(7);
console.log(obj1);

3、使用JQuery-extend实现深拷贝

        var obj ={
a:1,
b:{
c:3,
d:{
e:5,
f:[1,2,3,4,5]
}
}
}
//3、使用jQuery中的extend实现深拷贝
console.log($.extend(true,{},obj))
function deepClone(obj) {
return $.extend(true,{},obj)
}
var obj1 = deepClone(obj);
// console.log(obj);
obj.b.c = 10;
obj.b.d.f.push(7);
console.log(obj1);

2.数组去重和排序

去重：

        //a.indexof(元素b) 返回为-1:数组a里面没有元素b;
//封装一个去重的函数 unique 独一无二的
function unique(arr) {
var newArr = [];
for (var i=0;i<arr.length;i++) {
if(newArr.indexOf(arr[i]) === -1){
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique(["成强","chengqiang","成强"]);
console.log(demo);

排序：

    <script>
var arr=[1,5,2,4,9,6,7];
var Newarr=[];
Newarr= arr.sort(function(a,b){
return a-b;//返回的升序
});
console.log(Newarr);
</script>

冒泡排序：

    <script>
var a= [7,5,1,4,3];
for(var i=0; i<a.length; i++) {
for(var j=0;j<a.length-i;j++){
if (a[j]>a[j+1]){
var t=a[j];
a[j]=a[j+1];
a[j+1]=t;
}
}
}
console.log(a);
</script>

2.数组扁平化

        //数组的扁平化
let arr = [1,2,[3,[4,[5,6]]]]
//要求将数组扁平化处理[1,2,3,4,5,6]
//方式一 flat(参数：深度)
console.log(arr.flat(Infinity))
//方式二 reduce 方法
let arr1 = [1,2,3,4]
let res = arr1.reduce((total,item)  => {
return total + item
},0)
console.log(res)
// function flatFn(arr){
//     return arr.reduce((total,item) => {
//         return res.concat(Array.isArray(item)?flatFn(item):item)
//     },[])
// }
// console.log(flatFn(arr))
//方式三 数组转成字符串，再将字符串转成数组
function flatfn(arr){
return arr.join(‘,‘).split(‘,‘).map((item) => {
return parseInt(item)
})
}
console.log(flatfn(arr))

前端面试题-js

原文：https://www.cnblogs.com/chengqiang521/p/15311374.html