前端相关

一些知识点的总结

2018-03-14  本文已影响9人  DeeJay_Y

最近开始找工作了，有些常见的题目分享一下：

HTML

  1. 如何理解HTML语义化
第一种举例，段落用 p，边栏用 aside，主要内容用 main 标签
第二种
最开始是 PHP 后端写 HTML，不会 CSS，于是就用 table 来布局。table 使用展示表格的。严重违反了 HTML 语义化。
后来有了专门的写 CSS 的前端，他们会使用 DIV + CSS 布局，主要是用 float 和绝对定位布局。稍微符合了 HTML 语义化。
再后来，前端专业化，知道 HTML 的各个标签的用法，于是会使用恰当的标签来展示内容，而不是傻傻的全用 div，会尽量使用 h1、ul、p、main、header 等标签
  1. meta viewport 是做什么用的，怎么写？
死背： 
控制页面在移动端不要缩小显示。
侃侃而谈
一开始，所有页面都是给PC准备的，乔布斯推出 iPhone 3GS，页面是不适应手机屏幕的，所以乔布斯的工程师想了一个办法，默认把手机模拟成 980px，页面缩小。
后来，智能手机普及，这个功能在部分网站不需要了，所以我们就用 meta:vp 让手机不要缩小我的网页。
  1. canvas元素是干什么的？
    mdn canvas

CSS

  1. 说说盒模型
content-box: width == 内容区宽度
border-box: width == 内容区宽度 + padding 宽度（不管 IE *{box-sizing: border-box;}）
  1. css reset 和 normalize.css的区别
reset 重置，之前的样式我不要，a{color: red;}，抛弃默认样式
normalize 让所有浏览器的标签都跟标准规定的默认样式一致，各浏览器上的标签默认样式基本统一。
  1. 如何居中
水平居中：
内联：爸爸身上写 text-align:center;
块级：margin-left: auto; margin-right: auto;


 垂直居中： [七种方式实现垂直居中](https://jscode.me/t/topic/1936)
  1. 选择器优先级如何确定
选择器越具体，优先级越高。 #xxx 大于 .yyy
同样优先级，写在后面的覆盖前面的。
color: red !important; 优先级最高。
  1. BFC是什么？
*   overflow:hidden 清除浮动。（用 .clearfix 清除浮动，坚决不用 overflow:hidden 清除浮动）
*   overflow:hidden 取消父子 margin 合并。[http://jsbin.com/conulod/1/edit?html,css,js,output](http://jsbin.com/conulod/1/edit?html,css,js,output) （也可以用 padding-top: 1px;）
  1. 如何清除浮动？
1.   overflow: hidden;( 即生成一个BFC,不推荐）
2.  .clearfix 清除浮动写在爸爸身上
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
.clearfix{
    zoom: 1; /* IE 兼容 */
}

JS

  1. JS有哪些数据类型？
string number bool undefined null object symbol
object 包括了数组、函数、正则、日期等对象
一旦出现（数组、函数、正则、日期、NaN）直接0分
  1. Promise怎么使用？
then 
  $.ajax(...).then(成功函数, 失败函数)
链式调用
  $.ajax(...).then(成功函数, 失败函数).then(成功函数2, 失败函数2)
如何自己生成 Promise 对象
  function xxx(){
    return new Promise(function(resolve, reject){
        setTimeout(()=>{
            resolve() 或者 reject()
        },3000)
    })
  }
  xxx().then(...)
  1. Ajax手写一下？
//    Ajax
    function ajax (method,url,resolve) {
        let xhr = new XMLHttpRequest()
        xhr.open(method,url)
        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4) {
                if(xhr.status === 200 || xhr.status === 304) {
                    resolve(xhr.response)
                }
            }
        }
        xhr.send()
    }
    let resolve = (str) => {
        console.log(str)
    }
    ajax('GET','/api/xxx',resolve)
  1. 闭包是什么？
//    闭包
    let n = 0
    function wrapper () {
        let n = 0
        function inner () {
            n += 1
            console.log('inner n: ' + n)
        }
        return inner
    }
    let res = wrapper()
    res()
    res()
    console.log('outer n: ' + n) // 作用是，提供一种间接访问局部变量的方法，而不是直接访问
  1. 这段代码的this是什么？
fn() 里面的 this 就是 window
fn() 是 strict mode，this 就是 undefined
a.b.c.fn() 里面的 this 就是 a.b.c
new F() 里面的 this 就是新生成的实例
() => console.log(this) 里面 this 跟外面的 this 的值一模一样

    let obj = {
        fn1: {
            fn2: {
                fn3() {
                    console.log(this)
                }
            }
        }
    }
    obj.fn1.fn2.fn3()//obj.fn1.fn2           obj.fn1.fn2.fn3.call(obj.fn1.fn2)
  1. 什么是立即执行函数？
立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行
目的是：造出一个函数作用域，防止污染全局变量。（可以采用es6）
  1. async/await 语法了解程度？
    function returnPromise () {
        return new Promise ((resolve,reject) => {
            setTimeout(()=>{
                resolve('asdfhkj')
            },2000)
        })
    }
//    returnPromise().then( (msg) => {  then写法
//        console.log(msg)
//        return msg
//    })
    async function result () { // async 写法  将异步写成同步
        let res = await returnPromise()
        console.log(res)
    }
    result()
  1. 如何实现深拷贝？
1.  JSON.parse( JSON.stringify() )实现
var a = {...}
var b = JSON.parse( JSON.stringify(a) )
2. 递归
    var oldObj = {
        name: 'deejay',
        age: 20,
        friend: {
            name: 'dee',
            age: 20,
        }
    }
    function deepCopy (oldObj) {
        var newObj = {}; //创建一个地址不同的新对象
            for (var key in oldObj) { //遍历oldObj中的所有属性
                if (oldObj.hasOwnProperty(key)) {  // 针对自身拥有的定义的属性进行拷贝
                    if (typeof oldObj[key] === 'string' || typeof oldObj[key] === 'number' || typeof oldObj[key] === 'boolean'
                            || oldObj[key] === null || oldObj[key] === undefined) { //完整的判断是否嵌套的条件
                        newObj[key] = oldObj[key];
                    }
                    else {  // 不是上面判断的条件，即为嵌套的属性，通过递归进行拷贝
                        newObj[key] = deepCopy(oldObj[key]);
                    }
                }
            }
        return newObj;
    }
    var newObj = deepCopy(oldObj);
    console.log(newObj);
    newObj.age++;
    console.log(oldObj.age);  //20  newobj的age增加，oldobj的age仍然不变
    newObj.friend.age++;
    console.log(oldObj.friend.age); // 20  newobj中的friend中的age增加，oldObj仍然不变，newObj和oldObj是相互独立的
//    不管有多少层嵌套的属性，都是相互独立的，即为深拷贝
  1. 如何实现数组去重？
1. Set
let newArr = Array.from(new Set(arr));
2. indexOf
function unique1 (arr) {
    // indexOf
    var newArr = []
    for (var i = 0; i < arr.length; i ++ ) {
        if (newArr.indexOf(arr[i]) == -1) {
            newArr.push(arr[i])
        }
    }
    return newArr
}
var newArr1 = unique1(arr)
console.log(newArr1)
  1. 如何使用正则实现String.trim()
function trim(string){
    return string.replace(/^\s+|\s+$/g, '')
}
  1. JS原型是什么？
  2. ES6 class了解么？
  3. JS如何实现继承？
  4. ==题目

DOM

  1. DOM事件模型是什么？
  2. 移动端touch事件了解一下？
  3. 事件委托是什么？有什么好处？

HTTP

  1. HTTP状态码知道哪些？
  2. 301和302的区别是什么？
  3. HTTP缓存怎么做？
  4. Cache-Control和Etag的区别？
  5. Cookie是什么？Session是什么？
  6. LocalStorage和Cookie的区别？
  7. GET和POIST的区别？
  8. 怎么跨域？JSONP是什么？CORS是什么？postMessage是什么？

Vue

  1. Vue的生命周期钩子函数？
  2. Vue如何实现组件通信？
  3. Vuex的作用是什么？
  4. VueRouter路由是什么？
  5. Vue的双向绑定怎么实现的？

算法

  1. 排序（冒泡，快排，选择，技术，插入，归并）
  2. 二分查找法
  3. 反转二叉树

安全方面

  1. XSS是什么？如何预防？
  2. 什么是CSRF攻击，如何预防？

webpack

  1. 转译出的文件过大怎么办？
  2. 转移速度慢怎么办？
  3. 写个webpack loader？

奇葩面试题

  1. [1,2,3].map(parseInt)
a.x = a = {}
var a = {n: 1}
var b = a
a.x = a = {n:2}

问a.x是多少？

  1. (a == 1 && a== 2 && a ==3 )可能为true么？
上一篇下一篇

猜你喜欢

热点阅读