本文系统梳理ES6核心语法，深入解析let与const的作用域及暂时性死区特性，详解数组与对象的解构赋值规则，剖析箭头函数中this的静态绑定机制，并介绍剩余参数的使用场景，帮助开发者掌握现代JavaScript基础。
一、let、const与var的区别
let
let关键字用于声明块级变量。
其主要特点在于仅在{}代码块内有效，而var不具备此特性。
它可以防止循环变量意外泄露为全局变量。
使用let声明的变量不会发生变量提升。
let存在暂时性死区（TDZ）机制，即必须先声明后使用。
const
const用于声明常量，即一旦赋值后其内存地址不可更改。
需要注意的是，若常量为对象，其内部属性仍可修改，但对象本身的引用地址不可变。
三者区别总结
var声明的变量作用域限于所在函数内部，且存在变量提升现象。
let声明的变量作用域限于所在代码块，不存在变量提升。
const声明的是常量，后续代码中禁止修改该常量的值。
使用let和const声明的变量不属于顶层对象（如window），访问时返回undefined。
二、解构赋值
1. 数组解构
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
let[a,...c] = [1,2,3];//合并运算符可以展开数组也可合并数组
console.log(c);//[2, 3]
console.log(...c);//2 3
let [x,y='2'] = ['a',undefined];
console.log(y);//如果没有定义，可以用默认值说明：ES6内部使用严格相等运算符（===）判断位置是否有值。因此，只有当数组成员严格等于undefined时，默认值才会生效。
2. 对象解构
根据键名（key）进行解构。
let person = {name:"小帅",age:18};
let {name,age,height} = person;
console.log(name);//小帅
console.log(age);//18
console.log(height);//undefined说明：对象解构与数组不同，数组元素按顺序排列，变量取值由位置决定；而对象属性无序，变量必须与属性同名才能正确取值，否则解构结果为undefined。
let { realname: myname,height=173 } = { realname: '张三', age: 18};
console.log(Myname);//张三
console.log(Myage)//18
console.log(realname)//realname is not defined
console.log(height)//当属性没有的时候支持默认值说明：对象解构赋值的内部机制是先查找同名属性，再赋值给对应变量。真正被赋值的是右侧的变量，而非左侧的模式。
3. 字符串解构
let [a,b,c] = "hello";
console.log(a);//h
console.log(b);//e
console.log(c);//l三、箭头函数
1. 基础语法
//原js写法
function myFun(k,v){
return k + v;
}
//es6 写法
const myFun1 = (k,v) => {
return k+v;
}2. 省略写法
如果形参只有一个或代码块仅有一条语句，可以简化书写。
Const myFun = (k) => {return k+1;}
简写：
Const myFun = k => k +1;3. 对象方法中的this指向
当函数作为对象方法调用时，this指向调用该方法的上级对象。
const person = {
name:"张三",
age:18,
say:function(){
console.log(this.name);// 张三 这时候的this是person的对象
}
}
person.say();4. apply/call调用时的this
myfun1();//对象是Windows
myfun1.call(person1);//对象改变为person1说明：两者的区别在于参数传递方式，myfun.call(person,18,29); 与 myfun.apply(person,[18,29]);。
5. 箭头函数中的this
箭头函数不绑定this关键字，其内部的this指向函数定义位置的上下文this。
箭头函数的this指向取决于它被定义（声明）的位置，即定义箭头函数时所在作用域的this指向谁，它就指向谁。
const obj = { name: '张三'}
function fn () {
console.log(this);//this 指向 是obj对象
return () => {
console.log(this);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象
}
}
const resFn = fn.call(obj); //{ name: '张三'}
resFn();//{ name: '张三'}一：全局作用域下this指向
1:普通函数
function global(){
console.log(this);//window
}
global();
2：箭头函数
const global = ()=>{
console.log(this);//window
}
global();
二：对象里面的this指向
1:普通函数
const Person = {realname:"张三",age:19,
say:function(){
console.log(this.realname);//当前的对象 "张三"
}
}
Person.say();
2:箭头函数
const Person = {realname:"张三",age:19,
say:()=>{
console.log(this);//window
}
}
Person.say();
三：构造函数的this指向
1:普通函数
function Person(realname,age){
this.realname = realname;
this.age = age;
this.say = function(){
console.log(this);
}
}
const P1 = new Person("张三",19);
P1.say();
const P2 = new Person("李四",19);
P2.say.call(P1);//原来李四，现在是张三 call和apply改变this指向，区别传输参数的区别
2:箭头函数
function Person(realname,age){
this.realname = realname;
this.age = age;
this.say = ()=>{
console.log(this);
}
}
const P1 = new Person("张三",19);
P1.say();
const P2 = new Person("李四",19);
P2.say.call(P1);//不能改变箭头函数的this指向
总结：普通函数与箭头函数this的区别
1：普通的函数this与调用者有关，调用者是谁就是谁;
2：箭头函数的this与当时定义的上下文的this有关，this是静态的一旦定义了就无法改变6. 箭头函数应用
练习1：单击按钮2s后改变按钮文字：按钮被点击，在单击按钮改变文字：点击被取消。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 点击按钮 2s后显示：文字被点击，在点击出现文字：点击被取消。 -->
<!-- （附加：点击10次后提示“今日点击次数已上限，按钮变成灰色”） -->
<body>
<button>点击</button>
<script>
let bth = document.querySelector("button")
let flag = false
let num=0
bth.addEventListener("click", function () {
flag = !flag
num++
if(num>10){
this.innerHTML="今日点击次数已上限"
this.disabled=true
this.style.backgroundColor="grey"
return false
}
time1=setTimeout(() => {
if (flag) {
// console.log(this);
this.innerHTML="文字被点击"
}
else{
this.innerHTML="点击被取消"
}
}, 100);
})
</script>
</body>
</html>四、剩余参数
剩余参数语法允许将不定数量的参数表示为一个数组。这种定义方式方便处理参数数量未知的函数声明。
1:rest参数
function demo(...nums){
console.log(nums);//数组
console.log(...nums);//解构数组
}
demo(1,2,3);
2:rest参数 对象
function connect({username,...info}){
console.log(username);
console.log(info);
}
connect(
{username:"root",password:"123456",port:"3306"}
)
3:输出数组
const arr = [1,2,3];
console.log(...arr);
4:合并两个数组
const arr1 = [1,2,3];
const arr2 = [4,5,6];
console.log([...arr1,...arr2]);
5:将类数组转为数组
const liNode = document.querySelectorAll("li");
console.log(typeof [...liNode]);
const arr1 = [1,2,3];
const arr2 = [...arr1];//复制数组
arr1[0] = 10;
console.log(arr2);
6:剩余参数必须放入最后(rest参数) 不然报错
function demo(a,b,...nums){
console.log(nums);//数组
}
demo(1,2,3,4,5);总结
到此这篇关于ES6学习笔记之let、箭头函数和剩余参数的文章就介绍到这了,更多相关ES6 let、箭头函数和剩余参数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！