字节跳动前端实习面经

(1) 将元素display为内联元素，利用 text-align: center; 实现将其在块级元素内部居中
(2) 若块级元素为固定宽度，则可以通过 margin: 0 auto; 使其水平居中
(3) 利用弹性布局，display: flex; 实现水平居中，其中 justify-content: center; 

(1) 单行内容的垂直居中
给容器设置相等的height和line-height
(2) 多行内容的垂直居中，且容器高度可变
设置上下的padding值相同
(3) 把容器当作表格单元
display: table-cell;
vertical-align: middle;

// 块级元素垂直居中
.parent{
    position: relative;
}

.child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

// flex布局垂直居中
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}    

标签选择器
类选择器
ID选择器
全局选择器
组合选择器
继承选择器
伪类选择器

(1) HTML对象获取问题
FireFox：document.getElementById("idName")
ie:document.idname或者document.getElementById("idName")
解决办法：统一使用document.getElementById("idName")
(2) const问题
Firefox下,可以使用const关键字或var关键字来定义常量
IE下,只能使用var关键字来定义常量
解决方法：统一使用var关键字来定义常量
(3) event.x与event.y问题
IE下,event对象有x,y属性,但是没有pageX,pageY属性
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性
解决方法：使用mX(mX  =   event.x   ?   event.x  :   event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX

var str = "zhaochucichu";
var o = {};
// 用对象的属性来统计每一字符的频数
for (var i = 0, length = str.length; i < length; i++) {
  // charAt() 方法可返回指定位置的字符
  var char = str.charAt(i);
  if (o[char]) {
    o[char]++;
  } else {
    o[char] = 1;
  }
}
console.log(o);
// 找到频数最高的值
var max = 0;
for (var key in o) {
  if (max < o[key]) {
    max = o[key];
  }
}
// 找到频数最高值对应的字符及其频数
for (var key in o) {
  if (o[key] == max) {
    console.log("最多的字符是" + key);
    console.log("出现的次数是" + max);
  }
}

function copy (obj) {
    var newobj = {};
    for (var i in obj) {
        if (typeof obj[i] == "object") {
            newobj[i] = copy(obj[i]);
        } else {
            newobj[i] = obj[i];
        }
     }
     return newobj;
}

var  reg=new RegExp('abc','gi');
// 或者 var  reg=/abc/gi;
// 第一个参数是正则的内容，第二个参数是修饰符，修饰符通常有三种 i,g,m
// i表示忽略大小写进行匹配
// g表示全局匹配，匹配到第一个后不停止匹配
// m表示多行匹配，遇到换行不停止匹配
// 一些常用的方法，test方法，测试是否与正则匹配

1. 通过jsonp跨域
jsonp在页面上引入不同域上的js脚本文件实现请求不同域上的数据
(1) 通过script标签引入一个js文件
(2) js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入
注：需要服务器端的页面进行相应的配合
2. 通过修改document.domain来跨子域
3. 使用window.name来进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

Array.prototype.unique = function() {
  var newArray = [];
  var obj = {};
  for (var i = 0; i < this.length; i++) {
     if (!obj[this[i]]) {
         newArray.push(this[i]);
         obj[this[i]] = 1;
     }
  }
  return newArray;
}

ES6实现
let newArray = [...new Set(arr)];

// Promise
var promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise1.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

var reverseString = function(s) {
    var start = 0, end = s.length - 1;
    // 先转化为数组再进行反转
    var ret = s.split('');
    
    while (start < end) {
        var tmp = ret[start];
        ret[start++] = ret[end];
        ret[end--] = tmp;
    }
    
    return ret.join('');
};

(1)使用局部变量来代替this指针
(2)使用call或apply方法
call 普通传参
function say(arg1,arg2){
  console.log(this.name,arg1,arg2);
};
var obj = {
  name : 'tom',
  say : function(){
    console.log(this.name);
  }
}
say.call(obj,'one','two');//tom one two

apply 以数组的形式传参
function say(arg1,arg2){
  console.log(this.name,arg1,arg2);
};
var obj = {
  name : 'tom',
  say : function(){
    console.log(this.name);
  }
}
say.apply(obj,['one','two']);//tom one two

//简易模版函数
function template(tmpl, data) {
    var result = tmpl;
    for(var key in data){
        //console.log(`key ${key} data${data[key]}`)
        result = result.replace(new RegExp(key, 'g'), data[key]);
    }
    console.log(result);
}
template('我的名字是(name)，我的工作是(work)', {
  name: 'xxx',
  work: 'yy'
});