js 面试题搜罗, 一些代码段 js 面试题搜罗 ES6 /////////////////////////////// // from page-82 // try-p82-keys var obj ={ a:1, b:2, }; Object.setPrototypeOf(obj,{ c:3, }); console.log(Object.keys(obj)); // ["a", "b"] console.log(JSON.stringify(obj)); // {"a":1,"b":2} var keys1 =[]; for(let key in obj)keys1.push(key); console.log(keys1); // ["a", "b", "c"] var keys2 =[]; for(let key in Object.assign({},obj))keys2.push(key); console.log(keys2); // ["a", "b"] /////////////////////////////// 逻辑 /////////////////////////////// // 逻辑 a=1 b=2 不使用第三个变了量交换a,b // var a = 1, b = 2; // // 最牛逼的 // a = [b,b=a][0] // 0使用临时变量 - low // var t = a // a = b // b = t // 1 // a = a + b // b = a - b // a = a - b // 2-1 // a = a^b //a^=b // b = b^a //b^=a // a = a^b //a^=b // 2-2 // a = (b^=a^=b)^a; // 3 // a = {a: b,b: a} // b = a.

Continue reading

ES6 标准入门

一些 ES6 标准 let 和 const 命令 let let 声明的变量只在所在的代码块中有效。 let 不存在变量提升,,一定要先声明后使用(暂时性死区)。 let 实际上为 js 新增了块级作用域,外层作用域无法读取内层作用域的变量。块级作用域的出现使得立即执行表达式不再必要了。 es5 规定函数不能在块级作用域定义,但是 es6 允许在其中声明函数,但应该尽量避免,而是使用函数表达式。 for (let i = 0; i < 10; i++) { // ... } console.log(i) // ReferenceError: i is not defined const const 声明一个只读变量,一旦声明不可变。作用域和 let 相同 变量的解构赋值 数组解构赋值 按照『模式匹配』从数组和对象中抽取值。 let [a, b, c] = [1,2,3]; let [head, ...tail] = [1,2,3,4] head // 1 tail // [2,3,4] let [x,y, ...z] = ['a'] x // "a" y // undefined, 解构不成功变量的值就是 undefined z // [] // 不完全解构也可以成功。事实上,只要具备 Iterator 接口,都可以用数组形式解构赋值 let [x,y]=[1,2,3] x //1 y //2 function* fibs() { let a=0; let b=1; while (true) { yield a; [a,b] = [b, a+b]; } } // es6 内部使用严格相等运算符 === let [x=1] = [undefined]; x //1 let [x=1] = [null] x //null,以为 null 不是严格等于 undefined,所以可以被赋值 注意如果默认值是一个表达式,他是惰性求值的。

Continue reading

Fe Solutions

前端遇到的问题及解决方案: 页面内容不足以铺满屏幕高度时,footer 居底显示: 要实现的效果就是,在主要内容不足以铺满整个屏幕的情况下,footer居于屏幕低部显示,使得整个页面占满屏幕。而当主要内容高度大于整个屏幕高度的时候,footer跟随主要内容进行显示; 方法一: html <div class="page"> 主要页面 </div> <footer>底部</footer> css html,body{ height: 100%; margin: 0; padding: 0; } .page{ box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/ min-height: 100%; padding-bottom: 300px; } footer{ height: 300px; margin-top: -300px; opacity: 0.5; } 主要内容放在page内部,page最小高度为100%(注意这里html,body高度也要设为100%)。page有个padding-bottom大小为footer的高度(按需要调整),最重要的一点page的box-sizing:border-box,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,也就是说page的padding-bottom也会设定在min-height:100%内。而footer的margin-top为负的自身高度,把自己拉到page的padding-bottom空白块上,从而达到需求效果。 优点:简洁明了,没有冗余的div盒子; 缺点:box-sizing:border-box; 的兼容问题,ie7以下包括ie7不支持; 方法二: html <div class="page-container"> <div class="page-main"> 主要页面 </div> <footer>底部</footer> </div> css html,body{ height: 100%; margin: 0; padding: 0; } .page-container{ position: relative; min-height: 100%; } .

Continue reading

移动端页面开发资源总结及技巧 工作的过程中遇到过很多问题,bug的解决方案,记录下来,以便后用!!!内容并不是很全,以后每遇到一个问题都会总结在这里,分享给大家! 一、meta标签相关知识 1、移动端页面设置视口宽度等于设备宽度,并禁止缩放。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 2、移动端页面设置视口宽度等于定宽(如640px),并禁止缩放,常用于微信浏览器页面。 <meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 3、禁止将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 4、忽略Android平台中对邮箱地址的识别 <meta name="format-detection" content="email=no" /> 5、当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后,safari上已看不到效果 --> 6、将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可选default、black、black-translucent --> viewport 模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>title</title> <link rel="stylesheet" href="index.

Continue reading

30 道 Vue 面试题,内含详细讲解(涵盖入门到精通,自测 Vue 掌握程度) 前言 本文以前端面试官的角度出发,对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总,意在帮助作者及读者自测下 Vue 掌握的程度。 本文章节结构以从易到难进行组织,建议读者按章节顺序进行阅读,当然大佬级别的请随意。 希望读者读完本文,有一定的启发思考,也能对自己的 Vue 掌握程度有一定的认识,对缺漏之处进行弥补,对 Vue 有更好的掌握。文章最后一题,欢迎同学们积极回答,分享各自的经验 ~~~ 1、说说你对 SPA 单页面的理解,它的优缺点分别是什么? SPA( single-page application )仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转;取而代之的是利用路由机制实现 HTML 内容的变换,UI 与用户的交互,避免页面的重新加载。 优点: 用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染; 基于上面一点,SPA 相对对服务器压力小; 前后端职责分离,架构清晰,前端进行交互逻辑,后端负责数据处理; 缺点: 初次加载耗时多:为实现单页 Web 应用功能及显示效果,需要在加载页面的时候将 JavaScript、CSS 统一加载,部分页面按需加载; 前进后退路由管理:由于单页应用在一个页面中显示所有的内容,所以不能使用浏览器的前进后退功能,所有的页面切换需要自己建立堆栈管理; SEO 难度较大:由于所有的内容都在一个页面中动态替换显示,所以在 SEO 上其有着天然的弱势。 2、v-show 与 v-if 有什么区别? v-if 是真正的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。 v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 的 “display” 属性进行切换。

Continue reading

Author's picture

xn213

余生 倾尽天下

FE

Peking