八股(自己整理版)ES6篇1

37 阅读3分钟

1.变量提升

指var声明的变量在编译阶段会被提升到当前作用域的顶部

只提升声明,不提升赋值

而函数声明会被完整提升到作用域顶部,包括函数体

let和const可以解决变量提升导致的混乱

声明的变量不会提升,会创建暂时性死区

从变量声明的块作用域开始,到该变量被赋值之前的区域,访问该变量会抛出错误

2.箭头函数

箭头函数更简洁 ()=>{ }

箭头函数没有自己的this 在自己作用域的上一层继承this

继承来的this指向不会改变

不可以作为构造函数使用

没有自己的arguments

3.扩展运算符

①对象

如果用户自定义的属性放在扩展运算符后面,扩展运算符内部的同名属性会被覆盖掉

let bar={a:1,b:2}
let baz={...bar,...{a:2,b:4}}  //{a:2,b:4}

扩展运算符对对象实例的拷贝属于浅拷贝

②数组

可以将一个数组转为用逗号分隔的参数序列,

且每次只能展开一层数组

扩展运算符被用在函数形参上时,可以把一个分离的参数序列整合成一个数组

function mutiple(...arg){}
mutiple(1,2,3,4);  //arg:[1,2,3,4]

4.数据解构

提取数据的方式,以元素的位置为匹配条件来获得想要的数据

①数组的解构

const [a,b,c]=[1,2,3];

可以设置空占位如:

const [a,,c]=[1,2,3];

②对象的解构

以属性名称为匹配条件

const stu={
     name:
     age:
}
const {name,age}=stu;

提取高度嵌套的对象里的指定属性:

const { classes : { stu : { name } } } = school

5.模板语法

允许用${}的方式嵌入变量

在模板字符串中,空格、换行、缩进都会被保留

支持运算式的表达式,可以在${}里完成一些计算

var name='css'
var hobby=['coding','writing']
var finalString=`my name is ${name},I love ${hobby[0]} and ${hobby[1]} `
function add(a,b){
     const finalString=`${a} +${b} = ${a+b}`}

6.var let const

三者的区别:

①作用域不同

var作用域是函数级 在函数外声明则为全局变量

let const作用域是块级,仅在声明它的代码块内有效(如if for {}等)

②变量提升和重复声明

var存在变量提升,变量声明被提升到作用域的顶部,赋值不会

可能导致未声明先使用时出现undefined

允许重复声明,后声明的会覆盖前一个

let和const不存在变量提升,必须先声明后使用否则报错

不允许重复声明

③可修改性

const声明的是常量,必须在声明时赋值,且赋值后不能重新赋值

var为什么会存在变量提升:

本质上是js引擎编译阶段处理变量声明的机制导致的

js先编译后执行

先对代码进行词法分析语法分析生成执行上下文,此时var声明的变量被提升

执行阶段再逐行执行代码,处理赋值运算等逻辑

变量提升的好处/坏处:

好处:

简化了早期的开发门槛

函数可以在声明前调用

坏处:

变量覆盖和重复声明隐患

作用域混淆

可读性下降