Skip to content

Latest commit

 

History

History
520 lines (348 loc) · 20.5 KB

QUESTIONS.md

File metadata and controls

520 lines (348 loc) · 20.5 KB

html

  1. HTML5 和 CSS3 有哪些

https://www.cnblogs.com/star91/p/5659134.html

css

  1. BFC
  1. CSS 清浮动处理
  1. 移动端 1px

首先要了解虚拟像素(css 像素)、物理像素(设备像素)、逻辑像素 和设备像素比(dpr)的概念,然后要了解我们设计师的设计稿一般都是 750*1334,这个设计稿上的 1px 是 css 像素, 而设计师要的效果是 1px 的物理像素,所以需要除于设备像素比(dpr),比如 iPhone6 的 dpr 是 2,就 1/2

dpr 的意思可以这样理解,1css 像素要用 dpr 个物理像素来表示

  1. 圣杯布局和双飞翼布局
  1. CSS 画扇形

js

表达式和语句

表达式是由运算符构成,并运算产生结果的语法结构。每个表达式都会产生一个值,它可以放在任何需要一个值的地方

语句则是由“;(分号)”分隔的句子或命令。如果在表达式后面加上一个“;”分隔符,这就被称为“表达式语句”。

  1. getcomputedstyle 和 style 的区别
1.只读与可写
  getComputedStyle方法是只读的,只能获取样式,不能设置;而element.style能读能写,能屈能伸。
2.获取的对象范围
  getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来);
  而element.style只能获取元素style属性中的CSS样式。
  因此对于一个光秃秃的元素<p>,getComputedStyle方法返回对象中length属性值(如果有)就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异),
  而element.style就是0。
3.作用
  getComputedStyle方法有一个很重要的,类似css()方法没有的功能——获取伪类元素样式
4.兼容性
  getComputedStyle方法IE6~8是不支持的

  1. 判断数据类型的方法
  • typeof
console.log(typeof 2);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof undefined);       // undefined
console.log(typeof []);              // object
console.log(typeof {});              // object
console.log(typeof function(){});    // function
console.log(typeof null);            // object

  • instanceof
console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false
console.log('str' instanceof String);                // false
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true
  • Object.prototype.toString.call()
var toString = Object.prototype.toString;

console.log(toString.call(2));                      //[object Number]
console.log(toString.call(true));                   //[object Boolean]
console.log(toString.call('str'));                  //[object String]
console.log(toString.call([]));                     //[object Array]
console.log(toString.call(function(){}));           //[object Function]
console.log(toString.call({}));                     //[object Object]
console.log(toString.call(undefined));              //[object Undefined]
console.log(toString.call(null));                   //[object Null]
  1. 变量提升&作用域
  1. 闭包
  1. this
1. 普通函数的调用:this指向window(浏览器环境)。
2. 对象方法的调用:this指向调用对象。(隐式绑定)
3. 构造函数:this指向构造函数实例。
4. apply、call、bind:this指向绑定值。(显示绑定)
5. 箭头函数this:this指向外层第一个普通函数调用的this。(默认绑定)(对于箭头函数,只要看它在哪里创建)


优先级
1. 函数是否存在new绑定调用:如果是的话this绑定到新创建的对象上。
2. 函数是否通过apply、call、bind显示绑定:如果是,this绑定到指定对象上。
3. 函数是否在对象方法隐式调用:如果是的话,this绑定到调用对象。
4. 如果上面三条都不满足的话:在严格模型下,this绑定到undefined,在非严格模式下,this绑定到全局对象上。

5.0 new 执行的操作

1. 创建一个全新的对象。
2. 这个新对象会被执行 [[Prototype]] 连接。
3. 这个新对象会绑定到函数调用的 this。
4. 如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象。

手动实现 new

function New(Constructor, ...args){
    let obj = {};   // 创建一个新对象
    Object.setPrototypeOf(obj, Constructor.prototype);  // 连接新对象与函数的原型
    return Constructor.apply(obj, args) || obj;   // 执行函数,改变 this 指向新的对象
}

function Foo(a){
    this.a = a;
}

New(Foo, 1);  // Foo { a: 1 }

function _new() {
    let target = {}; //创建的新对象
    //第一个参数是构造函数
    let [constructor, ...args] = [...arguments];
    //执行[[原型]]连接;target 是 constructor 的实例
    target.__proto__ = constructor.prototype;
    //执行构造函数,将属性或方法添加到创建的空对象上
    let result = constructor.apply(target, args);
    if (result && (typeof (result) == "object" || typeof (result) == "function")) {
        //如果构造函数执行的结构返回的是一个对象,那么返回这个对象
        return result;
    }
    //如果构造函数返回的不是一个对象,返回创建的新对象
    return target;
}

Object.create

  1. 理解 constructor、prototype、proto和原型链
任何一个对象都有constructor
对象和函数的constructor都是Function

  1. let const var
  1. setTimeout 和 setInterval 和 requestAnimationFrame
  1. Event Loop

JSON.parse(JSON.stringify())的缺点

在 JSON.stringify()阶段

1.如果obj里面有时间对象,则JSON.stringify后再JSON.parse的结果,时间将只是字符串的形式,而不是对象的形式

2.如果obj里有RegExp(正则表达式的缩写)、Error对象,则序列化的结果将只得到空对象

3、如果obj里有函数,undefined,则序列化的结果会把函数或 undefined丢失

4、如果obj里有NaN、Infinity和-Infinity,则序列化的结果会变成null

5、JSON.stringify()只能序列化对象的可枚举的自有属性,例如 如果obj中的对象是有构造函数生成的, 则使用JSON.parse(JSON.stringify(obj))深拷贝后,会丢弃对象的constructor

6、如果对象中存在循环引用的情况也无法正确实现深拷贝

进程与线程

函数式编程

深拷贝与浅拷贝

防抖与节流

对象与数组的遍历

举个栗子

var a = { a: 1 };
var b = { b: 2 };
b.__proto__ = a;
Object.defineProperty(b, "c", {
  value: 3
});
b[Symbol()] = 4;

Object.keys(b); // ["b"]  返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

for (var i in b) {
  console.log(i, ":", b[i]);
} // b : 2 a : 1   循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)

Object.getOwnPropertyNames(obj); // ["b", "c"] 返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).
Reflect.ownKeys(b); // ["b", "c", Symbol()] 返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.

数组去重

严格模式

严格模式主要有以下限制。

变量必须声明后再使用
函数的参数不能有同名属性,否则报错
不能使用with语句
不能对只读属性赋值,否则报错
不能使用前缀 0 表示八进制数,否则报错
不能删除不可删除的属性,否则报错
不能删除变量delete prop,会报错,只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字(比如protected、static和interface)

异常处理

代码质量

正则表达式

typescript

vue

vue响应式原理

vue-cli

vue3

组件间通信示例

react 组件间通信示例

  • Context
  • render prop
  • 组合组件,提升组件层次,把组件作为 prop
  • redux

es6

什么叫暂时性死区

在代码块内,使用 let 命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称 TDZ)。

weex

源码

react

小程序

taro

webpack

浏览器

页面渲染

缓存

跨域与安全

1. XSS(cross-site-scripting, 跨站脚本)攻击

解决方法: 字符串转义

2. 跨站请求伪造(CSRF)

解决方法: 1.明文传递cookie
         2. 请求一个随机字符串(只能用一次)

iframe = document.createElement('iframe');
iframe.src = String(window.location);
document.body.appendChild(iframe);

iframe.contentWindow.Symbol.for('foo') === Symbol.for('foo')
// true
  • 限制网站被 iframe 包裹

添加这个 http 头可以限制别人把你的网站套成它的 iframe

X-Frame-Options: SAMEORIGIN

http

垃圾回收

架构

性能优化

移动端

nodejs

npm

服务端相关

算法与数据结构

复杂度

二叉树


选择题

手写题

服务端渲染