ES6(一)

最新推荐文章于 2025-12-30 13:13:13 发布

原创最新推荐文章于 2025-12-30 13:13:13 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6

本文详细介绍了JavaScript中的let和const声明变量的差异，包括作用域、变量提升和不可重复声明。此外，还讲解了解构赋值在数组和对象中的应用，以及箭头函数的简洁语法和this指向特性。通过实例展示了这些特性如何提高代码的可读性和效率。

1.let声明变量

1. let声明的变量不会挂在window中，不会造成全局变量污染
2. 新增一个块级作用域
3. let不允许重复声明
4. let不会有声明提升（只是人为看到没有，但其实本身是由声明提升的，只是提升至暂时性死区中）

 let num = 123;
 console.log(num) //123
 console.log(window.num) //undefined

 console.log(foo)//报错
 let foo = 2;

  function func() {
            var a = 10;
            let a = 100;
            console.log(a)
        }
        func() //报错

2、const声明变量

1. let的四点const都有
2. 不允许被修改，不允许改变内存空间地址
3. const声明和赋值必须一次性完成

 const num;
 num = 10;
 console.log(num) //报错

3、解构赋值

1. 解构赋值是对赋值运算符的扩展
2. 针对数组或者对象进行模式匹配，然后对其中的变量进行赋值 3.代码简洁且易读，语义更加清晰明了，方便了复杂对象中数据字段获取

3.1用在数组上


let arr = [2,4 ,6 ,8 ];
// 解构整个数组
let strArr = [...arr];
// 得到整个数组
console.log(strArr);

3.2用在对象上

let obj = {
   className : "jack",
   age: 18
}
let {className} = obj; // 得到jack
let {age} = obj;	// 得到18

4.箭头函数

4.1箭头函数的缩写

1. 如果箭头函数的参数只有一个可以省略小括号
参数 => {}
2. 如果箭头函数的函数体中只有一条返回语句，可以省略花括号，可以省略return关键字
参数 => 返回值
如果返回值是一个对象的时候,就会把对象的花括号认为时函数体的花括号，解决办法就是把返回值变成表达式的形式

4.2箭头函数的this指向问题

1. 箭头函数中没有this,arguments,new.target,如果非要使用，则指向外层函数对应的this，arguments,new.target，在函数定义的时候就已经决定了。
ps:箭头函数的this指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this
2.箭头函数没有原型，所以说占用空间非常小，且不能当成构造函数来使用

function fn3(){
  setTimeout(()=>{
    // 定义时，this 绑定的是 fn3 中的 this 对象
    console.log(this.a);
  },0)
}
var a = 10;
// fn3 的 this 对象为 {a: 10}，因为它指向全局: window.a
fn3.call({a: 18});  // 改变this指向，此时 a = 18