腾讯前端面试题合集

var obj = {   name : 'cuggz',   fun : function(){     console.log(this.name);   } } obj.fun()     // cuggznew obj.fun() // undefined

function curry(fn) {    // 保存参数，除去第一个函数参数    let args = [].slice.call(arguments, 1);    // 返回一个新函数    let curried = function () {        // 新函数调用时会继续传参        let allArgs = [...args, ...arguments];        return curry(fn, ...allArgs);    };    // 利用toString隐式转换的特性，当最后执行函数时，会隐式转换    curried.toString = function () {        return fn(...args);    };    return curried;}
// 测试function add(...args) {  return args.reduce((pre, cur) => pre + cur, 0);}console.log(add(1, 2, 3, 4));let addCurry = curry(add);console.log(addCurry(1)(2)(3) == 6); // trueconsole.log(addCurry(1, 2, 3)(4) == 10); // trueconsole.log(addCurry(2, 6)(1).toString()); // 9console.log(addCurry(2, 6)(1, 8)); // 打印 curried 函数

var friendName = 'World';(function() {  if (typeof friendName === 'undefined') {    var friendName = 'Jack';    console.log('Goodbye ' + friendName);  } else {    console.log('Hello ' + friendName);  }})();

var name = 'World!';(function () {    var name;    if (typeof name === 'undefined') {        name = 'Jack';        console.log('Goodbye ' + name);    } else {        console.log('Hello ' + name);    }})();

1.ES6引入来严格模式    变量必须声明后在使用    函数的参数不能有同名属性, 否则报错    不能使用with语句 (说实话我基本没用过)    不能对只读属性赋值, 否则报错    不能使用前缀0表示八进制数,否则报错 (说实话我基本没用过)    不能删除不可删除的数据, 否则报错    不能删除变量delete prop, 会报错, 只能删除属性delete global[prop]    eval不会在它的外层作用域引入变量    eval和arguments不能被重新赋值    arguments不会自动反映函数参数的变化    不能使用arguments.caller (说实话我基本没用过)    不能使用arguments.callee (说实话我基本没用过)    禁止this指向全局对象    不能使用fn.caller和fn.arguments获取函数调用的堆栈 (说实话我基本没用过)    增加了保留字（比如protected、static和interface）
2.关于let和const新增的变量声明
3.变量的解构赋值
4.字符串的扩展    includes()：返回布尔值，表示是否找到了参数字符串。    startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。    endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。5.数值的扩展    Number.isFinite()用来检查一个数值是否为有限的（finite）。    Number.isNaN()用来检查一个值是否为NaN。6.函数的扩展    函数参数指定默认值7.数组的扩展    扩展运算符8.对象的扩展    对象的解构9.新增symbol数据类型
10.Set 和 Map 数据结构     ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 Set 本身是一个构造函数，用来生成 Set 数据结构。
    Map它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。11.Proxy    Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问    都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。    Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。    Vue3.0使用了proxy12.Promise    Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。    特点是：        对象的状态不受外界影响。        一旦状态改变，就不会再变，任何时候都可以得到这个结果。13.async 函数     async函数对 Generator 函数的区别：    （1）内置执行器。    Generator 函数的执行必须靠执行器，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。    （2）更好的语义。    async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。    （3）正常情况下，await命令后面是一个 Promise 对象。如果不是，会被转成一个立即resolve的 Promise 对象。    （4）返回值是 Promise。    async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。14.Class     class跟let、const一样：不存在变量提升、不能重复声明...    ES6 的class可以看作只是一个语法糖，它的绝大部分功能    ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。15.Module    ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。    import和export命令以及export和export default的区别

function Person(name) {    this.name = name}var p2 = new Person('king');console.log(p2.__proto__) //Person.prototypeconsole.log(p2.__proto__.__proto__) //Object.prototypeconsole.log(p2.__proto__.__proto__.__proto__) // nullconsole.log(p2.__proto__.__proto__.__proto__.__proto__)//null后面没有了，报错console.log(p2.__proto__.__proto__.__proto__.__proto__.__proto__)//null后面没有了，报错console.log(p2.constructor)//Personconsole.log(p2.prototype)//undefined p2是实例，没有prototype属性console.log(Person.constructor)//Function 一个空函数console.log(Person.prototype)//打印出Person.prototype这个对象里所有的方法和属性console.log(Person.prototype.constructor)//Personconsole.log(Person.prototype.__proto__)// Object.prototypeconsole.log(Person.__proto__) //Function.prototypeconsole.log(Function.prototype.__proto__)//Object.prototypeconsole.log(Function.__proto__)//Function.prototypeconsole.log(Object.__proto__)//Function.prototypeconsole.log(Object.prototype.__proto__)//null

CSS3中的盒模型有以下两种:标准盒模型、IE盒模型盒模型都是由四个部分组成的,分别是margin、border、padding和content标准盒模型和IE盒模型的区别在于设置width和height时, 所对应的范围不同1、标准盒模型的width和height属性的范围只包含了content2、IE盒模型的width和height属性的范围包含了border、padding和content可以通过修改元素的box-sizing属性来改变元素的盒模型；1、box-sizing：content-box表示标准盒模型（默认值）2、box-sizing：border-box表示IE盒模型（怪异盒模型）

var length = 10;function fn() {    console.log(this.length);}
var obj = {  length: 5,  method: function(fn) {    fn();    arguments[0]();  }};
obj.method(fn, 1);

let period = 60 * 1000 * 60 * 2let startTime = new Date().getTime()let count = 0let end = new Date().getTime() + periodlet interval = 1000let currentInterval = intervalfunction loop() {  count++  // 代码执行所消耗的时间  let offset = new Date().getTime() - (startTime + count * interval);  let diff = end - new Date().getTime()  let h = Math.floor(diff / (60 * 1000 * 60))  let hdiff = diff % (60 * 1000 * 60)  let m = Math.floor(hdiff / (60 * 1000))  let mdiff = hdiff % (60 * 1000)  let s = mdiff / (1000)  let sCeil = Math.ceil(s)  let sFloor = Math.floor(s)  // 得到下一次循环所消耗的时间  currentInterval = interval - offset   console.log('时：'+h, '分：'+m, '毫秒：'+s, '秒向上取整：'+sCeil, '代码执行时间：'+offset, '下次循环间隔'+currentInterval)   setTimeout(loop, currentInterval)}setTimeout(loop, currentInterval)

function demo() {  setInterval(function(){    console.log(2)  },1000)  sleep(2000)}demo()

function setInterval(callback, interval) {  let timer  const now = Date.now  let startTime = now()  let endTime = startTime  const loop = () => {    timer = window.requestAnimationFrame(loop)    endTime = now()    if (endTime - startTime >= interval) {      startTime = endTime = now()      callback(timer)    }  }  timer = window.requestAnimationFrame(loop)  return timer}let a = 0setInterval(timer => {  console.log(1)  a++  if (a === 3) cancelAnimationFrame(timer)}, 1000)

// 这里只考虑对象类型function shallowClone(obj) {    if(!isObject(obj)) return obj;    let newObj = Array.isArray(obj) ? [] : {};    // for...in 只会遍历对象自身的和继承的可枚举的属性（不含 Symbol 属性）    for(let key in obj) {        // obj.hasOwnProperty() 方法只考虑对象自身的属性        if(obj.hasOwnProperty(key)) {            newObj[key] = obj[key];        }    }    return newObj;}

function insertSort(arr) {  for (let i = 1; i < arr.length; i++) {    let j = i;    let target = arr[j];    while (j > 0 && arr[j - 1] > target) {      arr[j] = arr[j - 1];      j--;    }    arr[j] = target;  }  return arr;}// console.log(insertSort([3, 6, 2, 4, 1]));

function add(...args) {  let allArgs = [...args];  function fn(...newArgs) {    allArgs = [...allArgs, ...newArgs];    return fn;  }  fn.toString = function () {    if (!allArgs.length) {      return;    }    return allArgs.reduce((sum, cur) => sum + cur);  };  return fn;}

<img src="image-128.png" srcset="image-256.png 2x" />

<img src="image-128.png"     srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"     sizes="(max-width: 360px) 340px, 128px" />

sizes="[media query] [length], [media query] [length] ... "

Promise.resolve().then(() => {    console.log('1');    throw 'Error';}).then(() => {    console.log('2');}).catch(() => {    console.log('3');    throw 'Error';}).then(() => {    console.log('4');}).catch(() => {    console.log('5');}).then(() => {    console.log('6');});

1 3 5 6

.outer {  position: relative;  height: 100px;}
.left {  position: absolute;  width: 100px;  height: 100px;  background: tomato;}
.right {  position: absolute;  top: 0;  right: 0;  width: 200px;  height: 100px;  background: gold;}
.center {  margin-left: 100px;  margin-right: 200px;  height: 100px;  background: lightgreen;}

.outer {  display: flex;  height: 100px;}
.left {  width: 100px;  background: tomato;}
.right {  width: 100px;  background: gold;}
.center {  flex: 1;  background: lightgreen;}

.outer {  height: 100px;}
.left {  float: left;  width: 100px;  height: 100px;  background: tomato;}
.right {  float: right;  width: 200px;  height: 100px;  background: gold;}
.center {  height: 100px;  margin-left: 100px;  margin-right: 200px;  background: lightgreen;}

.outer {  height: 100px;  padding-left: 100px;  padding-right: 200px;}
.left {  position: relative;  left: -100px;
  float: left;  margin-left: -100%;
  width: 100px;  height: 100px;  background: tomato;}
.right {  position: relative;  left: 200px;
  float: right;  margin-left: -200px;
  width: 200px;  height: 100px;  background: gold;}
.center {  float: left;
  width: 100%;  height: 100px;  background: lightgreen;}

.outer {  height: 100px;}
.left {  float: left;  margin-left: -100%;
  width: 100px;  height: 100px;  background: tomato;}
.right {  float: left;  margin-left: -200px;
  width: 200px;  height: 100px;  background: gold;}
.wrapper {  float: left;
  width: 100%;  height: 100px;  background: lightgreen;}
.center {  margin-left: 100px;  margin-right: 200px;  height: 100px;}