前端高频面试题 Day02_网站优化分享_上海毫米网络优化公司

面试题

var 和 let const 的区别

var 是 ES5 及之前的语法，let const 是 ES6 语法
var 和 let 是变量，可修改；const 是常量，不可修改
var 有变量提升，let const 没有

var 没有块级作用域，let const 有（ES6 语法有块级作用域）

// var 变量提升
console.log('a', a)
var a = 100
// let 没有变量提升
console.log('b', b)
let b = 200

// var 没有块级作用域
for (var i = 0; i < 10; i++) {
    var j = 1 + i
}
console.log(i, j)
// let 有块级作用域
for (let x = 0; x < 10; x++) {
    let y = 1 + x
}
console.log(x, y)

typeof 有哪些返回类型？

// 判断所有值类型
let a
console.log(a) // 'undefined'
const str = 'abc'
typeof str  // 'string'
const n = 100
typeof n // 'number'
const b = true
typeof b // 'boolean'
const s = Symbol('s')
typeof s // 'symbol'

列举强制类型转换和隐式类型转换

强制 parseInt parseFloat

隐式 if ，== ， + 拼接字符串

手写深度比较，如 lodash isEqual

// 实现如下效果
const obj1 = {a: 10, b: { x: 100, y: 200 }}
const obj2 = {a: 10, b: { x: 100, y: 200 }}
isEqual(obj1, obj2) === true

// 判断是否是 object
function isObject(obj) {
    return typeof obj === 'object' && obj !== null
}
// 全相等
function isEqual(obj1, obj2) {
    if (!isObject(obj1) || !isObject(obj2)) {
        // 值类型，不是对象或数组（注意，equal 时一般不会有函数，这里忽略）
        return obj1 === obj2
    }
    if (obj1 === obj2) {
        // 两个引用类型全相等（同一个地址）
        return true
    }
    // 两个都是引用类型，不全相等
    // 1. 先取出 obje2 obj2 的 keys，比较个数
    const obj1Keys = Object.keys(obj1)
    const obj2Keys = Object.keys(obj2)
    if (obj1Keys.length !== obj2Keys.length) {
        // keys 个数不相等，则不是全等
        return false
    }
    // 2. 以 obj1 为基准，和 obj2 依次递归比较
    for (let key in obj1) {
        // 递归比较
        const res = isEqual(obj1[key], obj2[key])
        if (!res) {
            // 遇到一个不相等的，则直接返回 false
            return false
        }
    }
    // 3. 都相等，则返回 true
    return true
}

split() 和 join() 的区别

'1-2-3'.split('-')
[1,2,3].join('-')

数组的 pop push unshift shift 分别做什么

注意以下几点

前端高频面试题 Day02,前端高频面试题 Day02,第1张

函数作用是什么？
返回值是什么？
对原数组是否造成影响？
如何对原数组不造成影响？concat slice map filter
【扩展】数组 API 的纯函数和非纯函数

纯函数 —— 1. 不改变来源的数组； 2. 返回一个数组
- concat
- map
- filter
- slice
```
const arr = [100, 200, 300]
const arr1 = arr.concat([400, 500])
const arr2 = arr.map(num => num * 10)
const arr3 = arr.filter(num => num > 100)
const arr4 = arr.slice(-1)
```
  非纯函数
  
  情况1，改变了原数组
  - push
  - reverse
  - sort
  - splice
    情况2，未返回数组
    - push
    - forEach
    - reduce
    - some
      数组 slice 和 splice 的区别？
      
      slice - 切片；splice - 剪接；
```
// slice()
const arr1 = [10, 20, 30, 40, 50]
const arr2 = arr1.slice() // arr2 和 arr1 不是一个地址，纯函数，重要！！！
// arr.slice(start, end)
const arr1 = [10, 20, 30, 40, 50]
const arr2 = arr1.slice(1, 4) // [20, 30, 40]
// arr.slice(start)
const arr1 = [10, 20, 30, 40, 50]
const arr2 = arr1.slice(2) // [30, 40, 50]
// 负值
const arr1 = [10, 20, 30, 40, 50]
const arr2 = arr1.slice(-2) // [40, 50]
```
```
// arr.splice(index, howmany, item1, ....., itemX)
const arr1 = [10, 20, 30, 40, 50]
const arr2 = arr1.splice(1, 2, 'a', 'b', 'c') // [20, 30]
// arr1 会被修改，不是纯函数，即有副作用
```
      [10, 20, 30].map(parseInt) 的结果是什么？
```
// 拆解开就是
[10, 20, 30].map((num, index) => {
    return parseInt(num, index)
    // parseInt 第二个参数是进制
    // 如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。
    // 如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN
})
```
```
// 可以对比
[10, 20, 30].map((num, index) => {
    return parseInt(num, 10)
})
```
      ajax 请求中 get 和 post 的区别
      - get 一般用于查询操作，post 一般用于提交操作
      - get 参数在 url 上，post 在请求体内
      - 安全性：post 请求易于防止 CSRF
        （post 代码演示：网页，postname）
        
        call 和 apply 的区别
        
        fn.call(this, p1, p2, p3)
        fn.apply(this, arguments)
        事件委托（代理）是什么
        
        const p1 = document.getElementById('p1') const body = document.body bindEvent(p1, 'click', e => { e.stopPropagation() // 注释掉这一行，来体会事件冒泡 alert('激活') }) bindEvent(body, 'click', e => { alert('取消') })
        
        闭包是什么，有什么特性，对页面有什么影响
        
        回归作用域和自由变量
        闭包的应用场景：函数作为参数被传入，函数作为返回值被返回
        关键点：自由变量的查找，要在函数定义的地方，而不是执行的地方
        对页面的影响
        
        变量内存得不到释放，可能会造成内存积累（不一定是泄露）
        // 自由变量示例 —— 内存会被释放 let a = 0 function fn1() { let a1 = 100 function fn2() { let a2 = 200 function fn3() { let a3 = 300 return a + a1 + a2 + a3 } fn3() } fn2() } fn1()
        
        // 闭包函数作为返回值 —— 内存不会被释放 function create() { let a = 100 return function () { console.log(a) } } let fn = create() let a = 200 fn() // 100 // 闭包函数作为参数 —— 内存不会被释放 function print(fn) { let a = 200 fn() } let a = 100 function fn() { console.log(a) } print(fn) // 100
        
        如何阻止事件冒泡和默认行为
        
        event.stopPropagation()
        event.preventDefault()
        
        解释 jsonp 的原理，以及为什么不是真正的 ajax
        
        浏览器的同源策略，什么是跨域？
        哪些 html 标签能绕过跨域？
        jsonp 原理
        document load 和 document ready 的区别
        
        window.addEventListener('load', function () { // 页面的全部资源加载完才会执行，包括图片、视频等 }) document.addEventListener('DOMContentLoaded', function () { // DOM 渲染完即可执行，此时图片、视频还可能没有加载完 })
        
        == 和 === 的不同
        
        == 会尝试进行类型转换
        === 严格相等
        函数声明与函数表达式的区别？
        
        const res = sum(10, 20) console.log(res) // 30 // 函数声明 function sum(x, y) { return x + y }
        
        const res = sum(100, 200) console.log(res) // 报错！！！ // 函数表达式 const sum = function(x, y) { return x + y }
        
        new Object() 和 Object.create() 的区别
        
        示例一
        
        const obj1 = { a: 10, b: 20, sum() { return this.a + this.b } } const obj2 = new Object({ a: 10, b: 20, sum() { return this.a + this.b } }) const obj3 = Object.create({ a: 10, b: 20, sum() { return this.a + this.b } }) // 分别打印看结构
        
        示例二
        
        const obj1 = { a: 10, b: 20, sum() { return this.a + this.b } } const obj2 = new Object(obj1) console.log(obj1 === obj2) // true const obj3 = Object.create(obj1) console.log(obj1 === obj3) // false const obj4 = Object.create(obj1) console.log(obj3 === obj4) // false // 然后修改 obj1 ，看 obj2 obj3 和 obj4 obj1.printA = function () { console.log(this.a) }
        
        对作用域上下文和 this 的理解，场景题
        
        const User = { count: 1, getCount: function() { return this.count } } console.log(User.getCount()) // what? const func = User.getCount console.log( func() ) // what?
        
        对作用域和自由变量的理解，场景题
        
        let i for(i = 1; i <= 3; i++) { setTimeout(function(){ console.log(i) }, 0) } // what?
        
        判断字符串以字母开头，后面可以是数字，下划线，字母，长度为 6-30
        
        const reg = /^[a-zA-Z]\w{5,29}$/
        
        查看正则表达式规则 https://www.runoob.com/regexp/regexp-syntax.html
        查看常见正则表达式
        /\d{6}/ // 邮政编码 /^[a-z]+$/ // 小写英文字母 /^[A-Za-z]+$/ // 英文字母 /^\d{4}-\d{1,2}-\d{1,2}$/ // 日期格式 /^[a-zA-Z]\w{5,17}$/ // 用户名（字母开头，字母数字下划线，5-17位） /\d+\.\d+\.\d+\.\d+/ // 简单的 IP 地址格式
        
        以下代码，分别 alert 出什么？
        
        let a = 100 function test() { alert(a) a = 10 alert(a) } test() alert(a) // what?
        
        手写 trim 函数，保证浏览器兼容性
        
        String.prototype.trim= function (){ return this.replace(/^\s+/,"").replace(/\s+$/,"") }
        
        知识点：原型，this，正则
        
        如何获取多个数值中的最大值？
        
        Math.max(10, 30, 20, 40) // 以及 Math.min
        
        function max() { const nums = Array.prototype.slice.call(arguments) // 变为数组 let max = 0 nums.forEach(n => { if (n > max) { max = n } }) return max }
        
        如何用 JS 实现继承？
        
        class 代码
        
        程序中捕获异常的方法
        
        try { // todo } catch (ex) { console.error(ex) // 手动捕获 catch } finally { // todo }
        
        // 自动捕获 catch（但对跨域的 js 如 CDN 的，不会有详细的报错信息） window.onerror = function (message, source, lineNom, colNom, error) { }
        
        什么是 JSON ？
        
        首先，json 是一种数据格式标准，本质是一段字符串，独立于任何语言和平台。注意，json 中的字符串都必须用双引号。
        
        { "name": "张三", "info": { "single": true, "age": 30, "city": "北京" }, "like": ["篮球", "音乐"] }
        
        其次，JSON 是 js 中一个内置的全局变量，有 JSON.parse 和 JSON.stringify 两个 API 。
        
        获取当前页面 url 参数
        
        自己实现
        
        // const url = 'https://www.xxx.com/path/index.html?a=100&b=200&c=300#anchor' function query(name) { const search = location.search.substr(1) // 去掉前面的 `?` const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i') const res = search.match(reg) if (res === null) { return null } return decodeURIComponent(res[2]) } console.log( query('a') ) console.log( query('c') )
        
        新的 API URLSearchParams
        
        const pList = new URLSearchParams(location.search) pList.get('a')
        
        将 url 参数解析为 JS 对象？
        
        自己编写
        
        function queryToObj() { const res = {} const search = location.search.substr(1) // 去掉前面的 `?` search.split('&').forEach(paramStr => { const arr = paramStr.split('=') const key = arr[0] const val = arr[1] res[key] = val }) return res }
        
        新的 API URLSearchParams
        
        function queryToObj() { const res = {} const pList = new URLSearchParams(location.search) pList.forEach((val, key) => { res[key] = val }) return res }
        
        实现数组 flatern ，考虑多层级
        
        function flat(arr) { // 验证 arr 中，还有没有深层数组，如 [1, [2, 3], 4] const isDeep = arr.some(item => item instanceof Array) if (!isDeep) { return arr // 没有深层的，则返回 } // 多深层的，则 concat 拼接 const res = Array.prototype.concat.apply([], arr) // 回归上文，apply 和 call 的区别 return flat(res) // 递归调用，考虑多层 } flat([[1,2], 3, [4,5, [6,7, [8, 9, [10, 11]]]]])
        
        数组去重
        
        要考虑：
        
        顺序是否一致？
        时间复杂度
        ES5 语法手写。
        
        // 写法一 function unique(arr) { const obj = {} arr.forEach(item => { obj[item] = 1 // 用 Object ，去重计算高效，但顺序不能保证。以及，非字符串会被转换为字符串！！！ }) return Object.keys(obj) } unique([30, 10, 20, 30, 40, 10])
        
        // 写法二 function unique(arr) { const res = [] arr.forEach(item => { if (res.indexOf(item) < 0) { // 用数组，每次都得判断是否重复（低效），但能保证顺序 res.push(item) } }) return res } unique([30, 10, 20, 30, 40, 10])
        
        用 ES6 Set
        
        // 数组去重 function unique(arr) { const set = new Set(arr) return [...set] } unique([30, 10, 20, 30, 40, 10])
        
        手写深拷贝
        
        粘贴代码
        
        【注意】Object.assign 不是深拷贝，可以顺带讲一下用法
        
        Object.assign(obj1, {...})
        const obj2 = Object.assign({}, obj1, {...})
        介绍一下 RAF requestAnimationFrame
        
        想用 JS 去实现动画，老旧的方式是用 setTimeout 实时刷新，但这样效率非常低，而且可能会出现卡顿。
        
        想要动画流畅，更新频率是 60帧/s ，即每 16.6ms 更新一次试图。太慢了，肉眼会感觉卡顿，太快了肉眼也感觉不到，资源浪费。
        用 setTimeout 需要自己控制这个频率，而 requestAnimationFrame 不用自己控制，浏览器会自动控制
        在后台标签或者隐藏的中，setTimeout 依然会执行，而 requestAnimationFrame 会自动暂停，节省计算资源 <p>（代码演示）</p> <h3>对前端性能优化有什么了解？一般都通过那几个方面去优化的？</h3> <p>原则</p> <ul><li>多使用内存、缓存或者其他方法</li><li>减少 CPU 计算、较少网络 <p>方向</p> <ul><li>加载页面和静态资源</li><li>页面渲染</li></ul></div><div class="fanye"><p> 上一篇：<a href="/read/55463.html">css实现文字大小自适应</a></p><p class="next-chapter"> 下一篇：<a href="/read/55465.html">React 入门（超详细）</a></p></div></div></div></div></div><div class="footer"><div class="footer2 g-cf"><div class="container"><div class="footer2-l g-f-l"><dl><dt>网站优化运营</dt> <dd><a href="/wangluoyunyingcehua/zzyh/">整站seo优化</a></dd> <dd><a href="/wangluoyunyingcehua/wlyy/">网络营销运营</a></dd> </dl><dl><dt>成功案例</dt> <dd><a href="/wangzhanjiansheanli/ppcy/">品牌创意网站</a></dd> <dd><a href="/wangzhanjiansheanli/yxxwz/">营销型网站</a></dd> </dl><dl><dt>小程序</dt> <dd><a href="/weixinxiaochengxu/wx/">微信小程序</a></dd> <dd><a href="/weixinxiaochengxu/gzh/">微信公众号</a></dd> <dd><a href="/weixinxiaochengxu/bd/">百度熊掌号</a></dd> </dl><dl><dt>网站优化分享</dt> </dl><dl><dt>关于我们</dt> <dd><a href="/about/gaikuang/">公司概况</a></dd> <dd><a href="/about/news/">公司新闻</a></dd> <dd><a href="/about/wenhua/">公司文化</a></dd> <dd><a href="/about/jiegou/">结构体系</a></dd> <dd><a href="/about/zizhi/">企业资质</a></dd> <dd><a href="/about/jiaru/">加入我们</a></dd> </dl></div><div class="footer2-r g-f-r"><img src="/view/s303/images/ewm_03.jpg" alt=""><dl><dt>关注我们</dt><dd>扫描二维码</dd><dd>获取更多信息</dd><dd>精彩一手掌握</dd></dl></div></div></div><div class="footer3"><div class="container"><div class="g-f-l">Copyright © 2014-2019 seo,上海网站优化_网络制作_网站seo排名_网站建设推广_上海网络公司版权所有 <a rel="nofollow" href="http://wap.scjgj.sh.gov.cn/businessCheck/verifKey.do?showType=extShow&serial=9031000020190315154530000004460194-SAIC_SHOW_310000-2c9be8bd6f7928c3016f95557bbd0fb2001&signData=MEQCIDnCi7Mo6tQ24efUE+g/fxOznIQWMI0XmVuBtKXK6QO0AiAYWaO8JiJ8Ng7t8cOqv8XZfQ3riTsVLA/cIzEvX0HBaw=="_blank"><img width="31" height="37" border="0" src="https://www.saix.com.cn/images/liangzhao.jpg"></a><a rel="nofollow" href="https://beian.miit.gov.cn/" target="_blank">沪ICP备19022315号 </a></div></div></div></div><div class="mb-footer"><span style="width:24.4%;"><a href="/"><img src="/view/s303/images/foot1_02.jpg" alt=""></a></span><span style="width:25.6%;"><a href="tel:021-80394720"><img src="/view/s303/images/foot2_03.jpg" alt=""></a></span><span style="width:25.6%;"><a href="http://wpa.qq.com/msgrd?v=3&uin=21988846&site=qq&menu=yes" target="_blank"><img src="/view/s303/images/foot3_03.jpg" alt=""></a></span><span style="width:24.4%;"><a href="/zhenghecelue/"><img src="/view/s303/images/foot4_03.jpg" alt=""></a></span></div><div class="shade" style="width:75px; display: block;left: -80%;"></div></div><div class="suspend"><ul><li><a href="http://wpa.qq.com/msgrd?v=3&uin=21988846&site=qq&menu=yes" target="_blank"><img src="/view/s303/images/xf_01.png" alt=""><span>在线咨询</span></a></li><li class="suspend-qq"><a href="http://wpa.qq.com/msgrd?v=3&uin=21988846&site=qq&menu=yes" target="_blank"><img src="/view/s303/images/xf_02.png" alt=""><span>QQ咨询</span></a></li><li class="suspend-tel" style="position: relative;"><a href="/lianxi/"><div class="lxwm"><img src="/view/s303/images/xf_03.png" alt=""><div class="xf—phone">021-80394720</div></div><span>联系我们</span></a></li><li class="backtop"><a href="javascript:;"><img src="/view/s303/images/xf_04.png" alt=""><span>返回顶部</span></a></li></ul></div><script> $(function(){ $(".backtop").click(function () { var speed=800;//滑动的速度 $('body,html').animate({ scrollTop: 0 }, speed); return false; }); $(".suspend-qq").click(function(){ $(".send-qq").show() }) }) </script></body></html>

面试题

var 和 let const 的区别

typeof 有哪些返回类型？

列举强制类型转换和隐式类型转换

手写深度比较，如 lodash isEqual

split() 和 join() 的区别

数组的 pop push unshift shift 分别做什么

数组 slice 和 splice 的区别？

[10, 20, 30].map(parseInt) 的结果是什么？

ajax 请求中 get 和 post 的区别

call 和 apply 的区别

事件委托（代理）是什么

闭包是什么，有什么特性，对页面有什么影响

如何阻止事件冒泡和默认行为

解释 jsonp 的原理，以及为什么不是真正的 ajax

document load 和 document ready 的区别

== 和 === 的不同

函数声明与函数表达式的区别？

new Object() 和 Object.create() 的区别

对作用域上下文和 this 的理解，场景题

对作用域和自由变量的理解，场景题

判断字符串以字母开头，后面可以是数字，下划线，字母，长度为 6-30

以下代码，分别 alert 出什么？

手写 trim 函数，保证浏览器兼容性

如何获取多个数值中的最大值？

如何用 JS 实现继承？

程序中捕获异常的方法

什么是 JSON ？

获取当前页面 url 参数

将 url 参数解析为 JS 对象？

实现数组 flatern ，考虑多层级

数组去重

手写深拷贝

介绍一下 RAF requestAnimationFrame