前段面试题(不定期更新)

一.CSS部分

1.实现不知宽高元素的垂直水平居中
2. CSS优先级算法如何计算
元素选择符： 1

class选择符： 10

id选择符：100

元素标签：1000

➤!important声明的样式优先级最高，如果冲突再进行计算。

➤如果优先级相同，则选择最后出现的样式。

➤继承得到的样式的优先级最低
3.雪碧图（精灵图）用法优点
4.flex布局

Javascript部分

1.打印结果

let food = ['apple', 'pear', 'banana', 'grap'];
for (let i=0;i<food.length;i++) {
  setTimeout(function(){
    console.log(food[i])
  },1)
}

2.打印结果

function test() {
  console.log(a);
  console.log(foo());
  let a = 1;
  function foo() {
    return 2;
  }
}
test()

3.打印结果

let fullName = 'aaa';
let obj = {
  fullName: 'bbb',
  prop: {
    fullName: 'ccc',
    getFullName: function() {
      return this.fullName;
    }
  }
}
var test = obj.prop.getFullName;
console.log(obj.prop.getFullName());
console.log(test())

4.编写代码实现如下功能
console.log(‘hello’.repeatify(3))
输出 hellohellohello

考点：自定义函数
参考：

String.prototype.repeatify = function (id) {
	let str = ""
	for (var i = 0; i < id; i++) {
	  str += this;
	}
	return str;
};
let strs = "hello";
console.log(strs.repeatify(3))

5.写一个函数实现
mul(f1(),f2(),f3()) 等价于 f3(f2(f1()))
实例：
// const add = x => x + 1;
// const multiply = (x, y) => x * y;
// const mix = x => x-10
// const newFn = composeFunctions(multiply, add);
// newFn(3, 4) // 返回 3

let add = function (x) {
  return x + 1
}
let mul = function (x, y) {
  return x * y
}
let mix = function (x) {
  return x-10
}
let newFn = composeFunctions(mul, add, mix)
function composeFunctions(...funcs) {
  return funcs.reduceRight((pre, next) => {
    return (...args) => pre(next(...args))
  })
}
console.log(newFn(3,4))

6.写一个函数完成如下输出
console.log(mul(2)(3)(4)) // 24
a.这种写法不推荐，虽然可以完成要求，但未答到考点

function mul (x) {
  return function (y) {
    return function (z) {
      return x*y*z
    }
  }
}

b.

function mul(x) {
  var sum = x
  var curried = function (y) {
    sum = sum * y
    return curried
  }
  curried.toString = function () {
    return sum
  }
  return curried
}

7.数组去重复

var arr = [1,2,1,3,3,4,8,5,4,3,2,1,3,5]

8.去掉数组中相邻的两个中重复的元素

var arr = [1,2,2,3,3,4,5,5]