前端面试需要准备的知识(一) JS语法与CSS

JavaScript语法

我比较薄弱的地方，

• map
  map是一种数据结构，里面有set和get方法
  （如果你亲自实现过链表、队列、栈这几个数据结构，你就应该明白我在说什么）。
  看代码

var myMap = new Map();

var keyString = 'a string',
    keyObj = {},
    keyFunc = function() {};

// setting the values
myMap.set(keyString, "value associated with 'a string'");
myMap.set(keyObj, 'value associated with keyObj');
myMap.set(keyFunc, 'value associated with keyFunc');

myMap.size; // 3

// getting the values
myMap.get(keyString);    // "value associated with 'a string'"
myMap.get(keyObj);       // "value associated with keyObj"
myMap.get(keyFunc);      // "value associated with keyFunc"

myMap.get('a string');   // "value associated with 'a string'"
                         // because keyString === 'a string'

map的遍历

var myMap = new Map();
myMap.set(0, 'zero');
myMap.set(1, 'one');
for (var [key, value] of myMap) {
  console.log(key + ' = ' + value);
}
// 0 = zero
// 1 = one

map用箭头函数作为参数

let a = new MyArray(1,2,3);
let mapped = a.map(x => x * x);
// mapped is [1,4,9]

• 面向对象（类）
  初始化，其实也是自动化，就是创建一个实例，就会自动执行的。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
    draw();
  }
}

原型方法，官网是这么写的

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

我改成这样写，没有一丝毛病

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }

  // Method
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.calcArea());

然后是静态方法，就是这个静态方法不能给实例用，只能给类用。（我也不知道这有jb毛用）

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    let res = a + b
    return res
  }
}

console.log(Point.distance(7, 8)); // 15

继承

class Animal { 
  constructor(name) {
    this.name = name;
  }
  
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

  speak() {
    console.log(this.name + ' barks.');
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

CSS

调用方法

// External Style Sheet




// Internal Style Sheet




// Inline Styles
This is a heading

样式优先级(从高到底)，原因是浏览器渲染顺序是从根节点render的，外部的link相当于根节点。
!important
inline
link style
然后浏览器也是先render元素选择器，再render class选择器，在render id选择器。

居中写法
block元素居中：
margin: 0 auto;

inline或inline-block元素居中：
text-align: center;

垂直和水平居中：

垂直居中
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
    // bottom: 50%;
    //transform: translateY(50%);
}
                         
水平居中
{
    position: absolute;
    left: 50%;
    transform: translateX(50%)                
}

更多内容（比现在写的更理解的）我在自己的fe6.js文件保存了。