字节跳动EE部门前端面试经历及总结

<meta name="viewport" content="width=device-width, initial-scale=1.0">

// 绝对像素单位变为rem相对单位
px=>rem

// 保持高宽比
// 使用width属性
img {
	width: 100%;
	height: auto;
}

// 使用max-width属性
img {
	max-width: 100%;
	height: auto;
}

//  media query 不同设备显示不同图片和样式
/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body { 
        background-image: url('img_flowers.jpg'); 
    }
}

相同点：都表示“值的空缺”，相等运算符"=="认为两者是相等的，两者都可以转化为false，不包含任何属性和方法
不同点：严格相等运算符"==="认为两者是相等的

// 转化真正的数组
var args = Array.prototype.slice.call(arguments);
var args = [].slice.call(arguments);
// ES6使用Array.from()方法或扩展运算符将参数转换为真实数组
var args = Array.from(arguments);
var args = [...arguments];

1. 引用块级作用域的概念，可使用let命令和const命令
2. 数组的解构赋值（ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。）
3. 字符串的拓展（模板字符串，新增includes()等方法）
4. 数值的拓展（ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变，这样做的目的，是逐步减少全局性方法，使得语言逐步模块化）
5. 数组的拓展（数组的拓展运算符，新增Array.from()等API）
6. 对象的拓展（属性简洁表示，对象的拓展运算符，对象的合并等）
7. 函数的拓展（参数默认值，参数解构赋值，剩余操作符，箭头函数）
8. Promise对象
9. async函数
10. class类（super关键字）
11. Module的语法（export和import命令）

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then(console.log)

// 正常任务
setTimeout(function() {
  console.log(1);
}, 0);

// 微任务
new Promise(function (resolve, reject) {
  resolve(2);
}).then(console.log);

// 同步任务
console.log(3);
// 3
// 2
// 1

let promise = function (val){
    return new Promise(function (resolve, reject){
        setTimeout(()=>{
            console.log(val);
            resolve(val);
        },1000);
    });
};

let gen = function* (){
    let p1 = yield promise('1');
    let p2 = yield promise('2');
};

let genF = gen();

let promise = function (val){
    return new Promise(function (resolve, reject){
        setTimeout(()=>{
            console.log(val);
            resolve(val);
        },1000);
    });
};

let gen = async function (){
    let p1 = await promise('1');
    let p2 = await promise('2');
};

// 原型链的方式
// 用function定义对象
function Person(name, age) {
	this.name = name
	this.age = age
  	this.say = function() {
	  console.log(this.name)
	  console.log(this.age)
  }
}
// 新对象继承Person
function Man(name,age) {
    this.name = name
    this.age = age
}
Man.prototype = new Person()
Man.prototype.speak = function() {
    console.log("你好啊")
}

var m = new Man('hv',20)
m.say()

// apply方法的方式
function ClassA(name){
    this.name = name;
    this.sayName = function(){
        console.log(this.name);
    }
}

function ClassB(name,age){
    ClassA.apply(this,arguments);
    this.age = age;
    this.sayAge = function (){
        console.log(this.age);
    }
}

// 输出全为10
for(var i=0;i<10;i++){
   setTimeout(function(){
       console.log(i);
   },50);
}

// 输出相应的输出
for(var i=0;i<10;i++){
    (function(i){
        setTimeout(function(){
        console.log(i);
        },50);
    })(i);
}

// 如果你引用一个方法，它将失去和对象的连接
> var func = jane.describe;
> func()
TypeError: Cannot read property 'name' of undefined

// 解决办法是使用函数内置的bind()方法。它创建一个新函数，其this值固定为给定的值。
> var func2 = jane.describe.bind(jane);
> func2()
'Person named Jane'

function f(y) {return this.x + y}
var o = {x : 1}
var g = f.bind(o)
console.log(g(2))// 3

CSS盒模型和IE盒模型的区别：
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
box-sizing: content-box; // 在宽度和高度之外绘制元素的内边距和边框。内容盒模型
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
box-sizing: border-box; // 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。IE盒模型

// 基本类型：值相同即可
var a = 5
var b = 5
console.log(a == b) // true

// 对象类型：值和引用都相同才可
var a = [1,2,3]
var b =  [1,2,3]
console.log(a == b) // false

// 修改b的同时也在修改a
var a = [1,2,3]
var b =  a
console.log(a == b) // true

// 箭头函数
x => x * x

// 相当于下面的函数
function (x) {
    return x * x;
}

var fn = x => x * x
console.log(fn(4))

x => x * x

x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}

// 如果参数不是一个，就需要用括号()括起来
(x, y) => x * x + y * y