前端问题记录

vw和百分比的关系

• vw只和设备宽度有关系
• %和继承（parent）有关系

行内元素和块内元素的区别

行内元素(inline-level elements)和块内元素 (block-level elements)

• 行内元素不从新行开始，只占用必要宽度，不能设置大小，由内容决定；块级元素总是从新行开始，并占用其父元素的可用的全部宽度。
• 块级元素可能包含行内元素，有时也包含其他块级元素，行内元素只能包含数据和其他行内元素。（行内元素只能包含数据和其他行内元素。a元素例外，它可以包含块级元素，例如div）

如何让谷歌支持小字体

transform:scale(0~1)；//缩放

  <p>
       字体
     </p>
     <p style="transform: scale(0.5); -webkit-transform: scale(0.5);">
       更小的字体
     </p>

var 和 let 的区别

• var声明的变量，会有声明提升的现象
• var没有局部作用域
• var声明覆盖

cosole.log(name);//你好世界，（var声明提升）(let 会报错 undefined)
var name = "你好世界";

function fn2(){
   for(var i = 0; i<5;i++）{
   }
   console.log(i);//5,(没有局部作用域）（let会报错undefined）

}

var name2 = "你好世界";
var name2 = "我好世界";
console.log(name2);//我好世界 ，（var声明覆盖）（let会报错undefined）

     

浅拷贝和深拷贝

浅拷贝：两个指向同一个操作域，两个改变，值会改变（类似于c++中的引用，起别名）
深拷贝：两个不同操作域，有不同的内存空间，两个改变值互相不影响

//1.基本数据类型,赋值 =>深拷贝
let a = 5;
let b = a;
b = 3;
console.log(a,b);// 5,3

//2.对象和数组，赋值=>浅拷贝
let arr= [1,2,3];
let newArr = arr;
newArr.push(4);
console.log(newArr,arr);//[1,2,3,4]    [1,2,3,4]


//3.解构赋值一维数组或一维对象=>深拷贝
let arr = [1,2,3];
let newArr = [...arr];
newArr.push(4);
console.log(newArr,arr)//[1,2,3,4]  [1,2,3]



//4.解构赋值二维数组或二维对象=>浅拷贝
let arr2  = [ [ 1,2,3],[ 4,5,6] ];
let newArr2 = [...arr2];
newArr2[0].push(888);
console.log(newArr2,arr2);// [ [1,2,3,888],[4,5,6] ]    [ [1,2,3,888],[4,5,6] ] 

//深拷贝用法***
let list = [
{id:1,stuName:'小明',class:'五年级二班'},
{id:2,stuName:'小青',class:'五年级二班'},
{id:3,stuName:'小章',class:'五年级二班'},
]

//基本数据,不能引用类型，function类型的深拷贝 function会变成"function"
let newList = JSON.parse(JSON.stringify(list));
newList.push({id:888});
console.log(list,newList);

//标准深拷贝=>针对引用数据类型(数组、对象）
function deepClone(source){
const targetObj = source.constructor === Array ? []:{};//查看是数组还是对象
for(let keys in source){
	if(source.hasOwnProperty(keys)){//查看是否有相关属性
			if(source[keys]  && typeof source[keys] === 'object'){
			//引用数据类型，需要递归
			targetObj[keys] = source[keys].constructor === Array?[]:{};
			//递归
			targetObj[keys]=deepClone(source[keys]);//容易忘记传递的是source内容而不是targetObj
			}else{
			//基本数据类型，直接复制
			targetObj[keys]=source[keys];
			}
	}

}
return targetObj;//容易忘返回对象


}


let objc = {
	ff:'name',
	gg:1,
	obj:{str:'111',age:12},
	arr:[1,2,3]
}

let newobjc = deepClone(objc);
newobjc.ff = "hello this is deep clone";
newobjc.arr.push("push a new num");
console.log(newobjc,objc);