前端面试之ES6 语法

Posted 2023-04-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端面试之ES6 语法相关的知识，希望对你有一定的参考价值。

参考技术A ++本文系慕课网学习笔记++

    模块化的基本语法

        export 、export default、 import

    开发环境配置 —— babel

        安装 node 环境，运行 npm init

        npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest

        创建 .bablelrc 文件

        npm install --global babel-cli

        babel --version

        创建 ./src/index.js

        内容： [ 1， 2， 3 ].map(item => item + 1);

        运行 babel ./src/index.js

开发环境配置 —— webpack

    npm install webpack babel-loader --save-dev

    配置 webpack.config.js

    配置 package.json 中的 scripts

    运行 npm start

开发环境配置 —— rollup

    npm init

    npm i rollup-plugin-node-resolve rollup-plugin-babel babel-plugin-external-helpers babel-preset-latest --save-dev

    配置 .babelrc

    配置 rollup.config.js

    rollup 功能单一， webpack 功能强大

    参考设计原则和《Linux/Unix设计思想》

    工具要尽量功能单一，可集成，可扩展

    wangEditor 用的 gulp + rollup

关于 JS 众多模块化的标准

    没有模块化

    AMD 成为标准，require.js （也有 CMD）

    前端打包工具，是的 nodejs 模块化可以被使用

    ES6 出现，想统一现在所有模块化标准

    nodejs 积极支持，浏览器尚未统一

    你可以自造 lib，但是不要自造标准

JS 构造函数

    继承

Class 基本语法

    继承

    语法糖

Callback Hell

Promise 语法

前端面试之立即执行函数

什么是立即执行函数

声明一个函数，并马上调用这个匿名函数就叫做立即执行函数。在定义好一个函数后，直接执行。

(function() {alert('立即执行函数')})()

用声明一个函数，用括号包起来，调用此函数。

立即执行函数的写法

有时候，我们定义函数以后，立即调用该函数，这时不能在函数的定义后面直接加圆括号，这会产生语法错误。产生语法错误的原因是，function这个关键字，既可以当做语句，也可以当做表达式。

//语句
function fn() {};

//表达式
var fn = function(){};

规定：如果function出现在行首，一律解析成语句。行首是function关键字时，这一段都是函数定义，不应该以圆括号结尾，所以会报错。当不让function出现在行首时，这将被理解为一个表达式，最简单的处理方式就是将其放在一个圆括号里。

(function() {
    ...
}())

(function() {
    ...
})()

以圆括号开头，这将被理解为表达式，而不是一个函数定义语句，所以就避免了错误，这就叫“立即执行函数”。
其他的写法：

(function() {alert('匿名函数')}())  //用括号将整个表达式包起来
(function() {alert('匿名函数')})()  //用括号将函数包起来
!function() {alert('匿名函数')}()   
+function() {alert('匿名函数')}()
-function() {alert('匿名函数')}()
~function() {alert('匿名函数')}()
void function() {alert('匿名函数')}()
new function() {alert('匿名函数')}()

立即执行函数的作用

1、不必为函数命名，避免了污染全局变量。

2、立即执行函数内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

3、封装变量。

面试题

var list = document.getElementById("list");
var li = list.children;
for(var i = 0 ;i<li.length;i++){
  li[i].onclick=function(){
    alert(i);  // 结果总是3.而不是0，1，2
    }
}

因为i是贯穿整个作用域的，而不是给每一个li分配一个i，点击事件使异步用户一定是在for运行完以后才点击，此时i已经变成3了。

解决方法：

1、使用立即执行函数，给每个li创建一个独立的作用域，在立即执行函数执行的时候，i的值从0到2，对应三个立即执行函数，所以就能正常输出了。

var list = document.getElementById("list");
    var li = list.children;
    for(var i = 0 ;i<li.length;i++){
      (function(j) {li[j].onclick=function(){
        alert(j);  // 结果是0，1，2
      }})(i)
    }

2、使用ES6的块级作用域：

var list = document.getElementById("list");
var li = list.children;
for(let i = 0 ;i<li.length;i++){
  li[i].onclick=function(){
    alert(i);  // 结果总是3.而不是0，1，2
    }
}