ES6

let

所声明的变量,只在let命令所在的代码块内有效

{  let a = 10; // 暂时性死区  var b = 1;}b = 1 // 1a = 1 // ReferenceError: a is not defined.
console.log(a); //  Cannot access 'a' before initializationlet a = 20;

变量提升

引擎把变量的声明部分和函数的声明部分提升到代码开头的“行为”

由于一段JS代码需要先经过编译,此时会将一些声明的变量记录在变量环境中,然后再执行,所以会有变量提升这么个玩意,同时也说明了为什么重复定义的变量会覆盖之前定义的变量

带来的问题:

  1. 变量容易在不被察觉的情况下被覆盖掉 在函数内定义一个与全局同名的变量
  2. 本应销毁的变量没有被销毁 for循环中的var i

const

声明一个只读的常量。一旦声明,常量的值就不能改变。

{    const PI = 3;}console.log(PI); // PI is not defined
const PI; // Missing initializer in const declaration
const PI = 3.1415;PI = 3; // TypeError: Assignment to constant variable.

var、let、const

varletconst
函数级作用域块级作用域块级作用域
变量提升不存在变量提升不存在变量提升
值可更改值可更改值不可更改

在早期没有let与const之前,使用的立即执行函数表达式来创建一个作用域:

for(var i = 0; i < 20; i ++) {    void function(i){        var div = document.createElement("div");        div.innerHTML = i;        div.onclick = function(){            console.log(i);        }        document.body.appendChild(div);    }(i);}

通过 let 声明的变量,会被存放在词法环境的一个单独的区域中,这个区域中的变量并不影响作用域块外面的变量

2022101217334

变量查找过程

模板字符串

let name = "cxk"// 模板字符串中可以解析变量console.log(`your name is ${name}`)
const fn = ()=>'fn function ';// 模板字符串可以调用函数let text = `fn call: ${fn()}`;
// 模板字符串可以换行let info =`123456789`

解构赋值

解构赋值就是把数据结构分解,然后给变量进行赋值

如果解构不成功,变量跟数值个数不匹配的时候,变量的值为undefined

let [a, b, c] = [1, 2, 3];// a=1 b=2 c=3
const color = [1,2]const color2=[...color,3,4]// color2 = [1,2,3,4],同样能用于对象
let {name,age} = {name:"123",age:15}// name = "123" age = 15let {name:myName,age:myAge} = {name:"123",age:15}// myName = "123" myAge = 15

函数默认值

function a(a = 2){    console.log(a);}

剩余参数

function f(...args){  console.log(args); // [1,2,3,4]}f(1,2,3,4);

箭头函数

// 函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号let sum = (a,b) => a+b;// 如果形参只有一个,可以省略小括号let f = res => res.data;
// 箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this// 需要注意的是 如果有多层箭头函数 那么最里层的箭头函数this的指向最其外面一层的thisvar obj = {    f: () => {        console.log(this); // Window    }}obj.f();

Array新增方法

Arrat.from

//定义一个集合let arrayLike = {    '0': 'a',    '1': 'b',    '2': 'c',    length: 3}; //转成数组let arr2 = Array.from(arrayLike); // ['a', 'b', 'c'] let arrayLike = {      "0": 1,     "1": 2,     "length": 2 } let newAry = Array.from(arrayLike, item => item *2)//[2,4]

Array实例方法:find

[1,2,3].find(i=>i/2==1) // 2

Array实例方法:findIndex

[1,2,3].findIndex(i=>i/2==1) // 1

Array实例方法:includes

[1,2,3].includes(4) // false

String新增方法

实例方法:startsWith,endsWith

'javascript'.startsWith('java') // true'javascript'.endsWith('script') // true

实例方法:repeat

'x'.repeat(3) // xxx

数据结构Set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值

const set = new Set([1,2,3,4,4]) // set = {1,2,3,4}

一些方法

set.add(1); // 添加元素set.delete(1) // 删除元素set.has(1) // 判断是否有这个元素set.clear() // 清空集合set.forEach(v => console.log(v))