这篇看完我得理解ES6中中常见语法

前言

1let篇

1.1作用域

1.2变量提升

1.3相同作用域赋值

2const篇

3模板字符串篇

3.1传统

3.2模板字符串复制

4扩展运算符篇

4.1传统赋值

4.2扩展字符串复制

前言

ES6是前端面试中常考查得知识点，还请大家不断得去琢磨琢磨

let篇

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>for (var i = 0; i < 6; i++) {}console.log(i);</script></body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>for (let i = 0; i < 6; i++) {}console.log(i);</script></body></html>

作用域不同

var声明的是全局变量，在函数内未使用var声明的变量自动变为全局变量
let 声明一个块级作用域的变量，有暂时性死区，
所谓暂时性死区就是（在声明变量前使用变量就会报错）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>console.log(i);var i;</script></body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>console.log(i);let i;</script></body></html>

变量提升现象

var声明的变量会被提升到作用域顶部，并初始化为undefined,
let声明的变量不会被提升到顶部，也未被初始化

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>var i = 100;var i = 200;console.log(i);</script></body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let i = 100;let i = 200;console.log(i);</script></body></html>

相同作用域重复命名变量

var 声明的变量是允许重复命名的，且后边的会覆盖掉前边的变量

let 声明的变量是不允许重复命名相同变量的let,会报错

const篇

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const i = 200;console.log(i);i = 200;</script></body></html>

const声明一个只读的常量，一旦声明就不能改变，也就意味着声明的时候就必须赋值，不能像var那样，留在以后赋值，否则就会报错，其他和let相同

模板字符串篇

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let name = 'geyao'let age = 19str = "名字" + name + "年龄" + age;console.log(str);</script></body></html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let name = 'geyao'let age = 19let str1 = `我的名字叫${name}我今年${age}岁`;console.log(str1);</script></body></html>

扩展运算符篇

传统复制

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let arr = ['geyao']let arr1 = ['woshi']arr1 = arr.concat(arr1);console.log(arr1);</script></body></html>

扩展运算符

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let arr = ['geyao']arr.push(...[1, 2, 3])console.log(arr);</script></body></html>