2020.11.13——对象、元素居中方案

JS基础 && CSS面试题 - 2020.11.13

• a.JS基础

   i. 了解JS中的对象： 如何创建对象，如何获取对象中的属性（. 和 [] 获取方式有什么不同），如何修改&&增加对象的属性，拷贝对象时拷贝的是整个对象还是对象的引用， 如何判断对象中是否存在某一个属性，如何查看对象中存在的所有属性，如何对对象中的所有属性做一个遍历，如何删除对象中的属性
  

  创建对象的三种方法：

  1、使用new Object方法
  var obj1=new Object();
  obj1.a='a';
  obj1.b='b';
  

  2、使用{}符号创建
  var obj2={
  	a:1;
  	b:2;
  };
  

  3、使用构造函数来创建
  function myObj(){
  	this.a=10;
  	this.b=20;
  }
  var obj3=new myObj();
  

  获取对象属性

   通过.方式获取属性值，key是静态的
  var aa = {name: "zhang", age: 18};
  console.log(aa.name);
  
  通过[]获取属性值, key是动态的，可以是字符串，或者数字的形式
  var bb = {"apple": 3, "pear": 2}
  var cc = {1: "number1", 2: "number2"}
  console.log(bb["apple"]);
  console.log(cc[1]);  // 注意这里的写法跟数组容易混淆，cc仍是对象，不是数组
  
   获取对象所有key的方法
  console.log(Object.keys(bb));  // 输出[ 'apple', 'pear' ]
  

  遍历对象属性

  for (variable in object)
  {
  	执行的代码……
  }
  

  拷贝对象 拷贝的是对象的引用

  var person = {
  	firstName:"John", 
  	lastName:"Doe",
  	 age:50, 
  	 eyeColor:"blue"
  	 }
  
  var x = person;
  x.age = 10;      //  x.age 和 person.age 都会改变
  

  删除对象属性

  var obj = {x : 1};  //定义对象
  delete obj.x;  //删除对象的属性x
  console.log(obj.x);  //返回undefined
  

• b.css面试题

   元素居中方案（包括行内、块级元素，定宽、不定宽元素，水平、垂直居中），方案尽可能多
  

  行内元素

  水平居中
  div {
  	text-align: center;
  }
  
  垂直居中
  div{
  	height:30px;
  	line-height:30px;
  }
  

  块级元素

  div{
  	width: 300px;
  	margin: 0 auto;
  }
  

  已知宽高

  div{
  	height:300px;
  	position:relative; //父级元素相对定位
  }
  div p{
  	position:absolute; //子元素相对定位
  	top:50%;
  	left:50%;
  	margin:-100px 0 0 -100px;
  	width:200px;
  	height:200px;
  }
  
  

  未知宽高

  div{
      height: 300px;
      position: relative;
  }
  
  div p{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }