JavaScript高频面试题一

　1、浏览器内核

浏览器内核分为渲染引擎和js引擎，渲染引擎取得网页内容，整理数据，然后显示在浏览器页面上，JS引擎负责解析并执行js来实现网页的动态效果；

浏览器要渲染出网页给用户看，必须加载html编码和js脚本，渲染引擎渲染页面的UI和js执行引擎操作内存，就是浏览器的重要组成程序：内核；根据不同的浏览器厂商，使用不同的内核，内核的程序是很难实现的，根据我的了解，有一些内核是公司自己实现的，有一些是直接借用的，比如：

1、IE浏览器内核：Trident内核，也是俗称的IE内核； 　　2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核； 　　3、Firefox浏览器内核：Gecko内核，俗称Firefox内核； 　　4、Safari浏览器内核：Webkit内核； 　　5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

不是用自己内核的浏览器：国内的浏览器

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

9、2345浏览器内核：好像以前是IE内核，现在也是IE+Chrome双内核了；

10、UC浏览器内核：这个众口不一，UC说是他们自己研发的U3内核，但好像还是基于Webkit和Trident，还有说是基于火狐内核。

以下是各大浏览器支持情况及开始时间:

2、es5 和es6的区别

答题思路：

列出es6的新技术 + 解决了es5中哪些的不足 + 看法

  1. 通过不同的语法作答

  2. 准备几个技术点去分析：优化 性能 缺陷（es6中promice）

  3. 自己查es6的更深一点的技术点

ES6是ES5 的语法糖。ES6的所有功能，使用ES5都可以实现，但是使用ES6更加简单、简介、标准化.

 

1、系统库的引入 es5：ES5中的引用需要先使用require导入React包，成为对象，再去进行真正引用 es6：ES6里，可以使用import方法来直接实现系统库引用，不需要额外制作一个类库对象 导出及引用单个类 es5：ES5中要导出一个类给别的模块用，一般通过module.exports来实现。引用时，则依然通过require方法来获取 es6：ES6中，则可以使用用export default来实现相同的功能，使用import方法来实现导入。 注意:ES5和ES6的导入导出方法是成对出现的，不可以混用。 比如：使用export default来导出，只能通过import 来导入。若使用require来导入，编译将不能通过。

2、定义组件 es5：ES5中，组件类的定义通过React.createClass实现。 注意;ES5中React.createClass后面是需要小括号的，且结尾必须有分号。 es6：在ES6里，让组件类去继承React.Component类就可以了。 注意：这里结尾时不会出现小括号，也不需要添加分号。

3、组件内部定义方法 es5：ES5中采用的是 ###:function()的形式，方法大括号末尾需要添加逗号 es6：ES6中省略了【: function】这一段，并且结尾不需要加逗号来实现分隔。 注意:使用ES6定义的规则的话，外层必须用【class #### extend React.Component】的方式来申明这个类，否则会报错。

4、定义组件的属性类型和默认属性 es5：在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现(这两个方法应该是固定名称的) es6：在ES6里，统一使用static成员来实现 ES6中也可以在组件类声明完成后追加其静态方法。虽不推荐，但写法上也没问题

5、初始化state es5：在ES5中，初始化state的方法是固定的getInitialState es6：ES6中存在两种写法， ● 第一种，直接构造state函数 ● 第二种，相当于OC中的方法重写，重写constructor方法

6、es6新特性 1、 新增let命令 区别 : es5声明变量都是通过var，let命令与var类似，但是不同的是，let声明的变量，只在let命令所在的代码块内有用。 2、 const命令 const声明的是一个只读的常量。一旦声明，常量的值就不能改变。 3、 声明变量的方法 es5声明变量的方法只有var和function，而es6除了es5中的两种方法外，还包括let，const，inport，和class命令。es6一共有6种声明变量的方法。 4、 箭头函数 5、 等等等等… ● ES6中的let命令，声明变量，用法和var差不多，但是let是为JavaScript新增了块级作用域，ES5中是没有块级作用域的，并且var有变量提升的概念，但是在let中，使用的变量一定要进行声明； ● ES6中变量的结构赋值，包括对象解构和数组解构以及混合解构，比如：var [a,b,c] = [0,1,2]; ● ES6中的函数定义也不再使用关键字function，而是利用了箭头函数=>来进行定义； ● ES6中可以设置默认函数参数，如function A（x,y=9）{}; ● ES6中新增了Set集合和Map集合； ● ES6新增了一个基本数据类型Symbol；

3、讲一讲es6的版本怎么更新的（略少）

现在Firefox，Chrome，Edge，Safari和Node.js的最新版都原生实现了 ES6 规范中超过95％的标准了，但是我们并不需要等到规范百分百的被支持再使用新语法。在描述如何使用之前，我们先看看规范指定的几个阶段。

  • Stage0 ：任何尚未提交为正式提案的讨论，想法，改变或对已有规范的补充建议都被认为是一个稻草人草案（“strawman” proposal），但只有TC39成员可以提出此阶段的草案。

  • Stage1 ：此阶段，稻草人草案升级为正式化的提案，并将逐步解决多部门关切的问题，如与其他提案的相互之间会有什么影响，这一草案具体该如何实施等问题。人们需要对这些问题提供具体的解决方案。stage1的提案通常还需要包括API描述，拥有说明性使用示例，并对语义和算法进行讨论，一般来说草案在这一阶段会经历巨大的变化。

  • Stage2 ：此阶段，草案就有了初始的规范。通过polyfill，开发者可以开始使用这一阶段的草案了，一些浏览器引擎也会逐步对这一阶段的规范的提供原生支持，此外通过使用构建工具也可以编译源代码为现有引擎可以执行的代码，这些方法都使得这一阶段的草案可以开始被使用了。

  • State3 ：此阶段的规范就属于候选推荐规范了，这一阶段之后变化就不会那么大了，要达到这一阶段需要满足以下条件：

    • 规范的编辑和指定的审阅者必须在最终规范上签字；

    • 用户也应该对该提议感兴趣；

    • 提案必须至少被一个浏览器原生支持；

    • 拥有高效的ployfill，或者被Babel支持；

  • Stage4 ：此阶段的提案必须有两个独立的通过验收测试的实现，进入第4阶段的提案将包含在 ECMAScript 的下一个修订版中。

ES6开始，TC39每年都会发布新的规范，新的规范将包含年号，如ES6 别名 ES2015，2016年通过的规范将叫 真名叫 ES2016 而非ES7，以此类推。不过对ES6，社区还是习惯喊其为 ES6，因为其在新命名规则公布之前就以被大家熟悉，ES7有时候也会面临类似的问题，不过之后就会好转了，我们之后会说ES6，ES2016，ES2017，ES2018等等。

精简提案流程和每年发布的新版本使得新版标准的发布得以持续化，不过这也意味着版本号不再那么重要了，这也使得现在大家都把精力放在提案上，对参考ECMAScript标准的期待反而变少了。

4、什么叫语法糖？有哪些语法糖？

定义：语法糖（Syntactic sugar），也译为糖衣语法。指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。

作用：通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。语法糖”可以给我们带来方便，是一种便捷的写法，编译器会帮我们做转换；而且可以提高开发编码的效率，在性能上也不会带来损失。

1、对象字面量

let sex1 = 'man', sex2 = ‘woman’
let sex = {man,woman}  

2、箭头函数

let fun = function(params){}
//可以缩写成如下 箭头函数会改变this的指向
let fun= params =>{}
//当参数有两个及以上时,如下：
let fun= (params1,params2,,,)=>{}

3、数组解构

let arr = ['a','b','c'];
let {a,b} = arr
console.log(a) // a
//数组解构也允许你跳过你不想用到的值，在对应地方留白即可，举例如下
let {a,,c} = array
console.log(c)  //c

4、函数默认参数

function  getResponse(a,b=0) {
  //常用于请求数据时，设置默认值 
}

5、拓展运算符

function test() {
  return [...arguments]
}
test('a', 'b', 'c') // ['a','b','c']
//扩展符还可以拼合数组
 let all = ['1',...['2','3'],...['4','5'],'6']   // ["1", "2", "3", "4", "5", "6"]

6、模板字符串

let id = '小狐狸'
let blog = '博主id是:${a}' // 博主id是是:小狐狸

7、多行字符串

//利用反引号实现多行字符串（虽然回车换行也是同一个字符串）
let poem = `A Pledge
    By heaven,
    I shall love you
    To the end of time!
    Till mountains crumble,
    Streams run dry,
    Thunder rumbles in winter,
    Snow falls in summer,
    And the earth mingles with the sky —
    Not till then will I cease to love you!`

8、拆包表达式

const data = {
      a: 'a',
      b: 'b',
      c: 'c'
}
let {a,c} = data
console.log(c); // c 
​

9、ES6中的类

class helloJs{
// 构造方法
  constructor(options = {}, data = []) { 
        this.name = '小狐狸';
        this.data = data;
        this.options = options;
    }
 // 成员方法
    getName() { 
        return this.name;
    }
}

10、模块化开发

// 新建一个util.js 文件夹
let formatTime = date=>{
    ....
}
let endTime = date=>{
    ....
}
​
module.exports = {
   formatTime,
   endTime,
}
//可以用import {名称} from '模块' 
//然后再同级目录创建一个js文件 引入 util.js
//import {endTime} from 'util'
//或者全部引入
//import util from 'util'

 

posted @ 2022-07-08 17:04  小狐狸ya  阅读(21)  评论(0)  编辑  收藏  举报