Es6最新常用知识宝典（能够帮助你解决面试题困惑，编写程序中出现的问题等）

共创splendid--与您携手

已于 2022-07-18 11:18:08 修改

阅读量191

点赞数 2

分类专栏： JavaScript 文章标签： javascript

于 2022-07-12 14:58:16 首次发布

关注博主，为您提供更优质的作品与最全的知识内容

本文链接：https://blog.csdn.net/m0_59505309/article/details/125742132

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

常用知识宝典全部用案例实现并解析：

原始用var在for循环中定义初始值

// 1,let arr=[];
           // for(var i=0;i<3;i++){
           //    arr[i]=function(){
           //        console.log(i);
           //    }
           // }
           // arr[0]();
           // arr[1]();
           // arr[2]();
           //最终结果为3,3,3

这里是用let定义了一个空数组，利用for循环控制并且对齐逐打印出结果，而如今的的es6是是通过let来定义的初始值，让我们一起来看看结果有什么不同吧！！！

   // let arr=[];
           // for(let i=0;i<3;i++){
           //    arr[i]=function(){

           //        console.log(i);
           //    }
           // }
           // arr[0]();
           // arr[1]();
           // arr[2]();
           //最终结果为0,1,2

解析：因为他会向父级逐一的获取值，切记不能直接在函数内再次定义变量，那样会报错报错原因是未申明后使用

// let i=1;
           // if(true){
           //    let i=2;
           //    console.log('内部i:'+i) //2
           // }
           // console.log('外部i:'+i) //1

           // 3,暂时性死区
           // if(true){
           //    i=0;
           //    let i=2;
           // }//这里直接报错，这是因为为遵循先申明后使用的原则

作用域的区域所获得的值分清全局作用域与局部作用域

// if(true){
           //    i=0;
           //    let i=2;
           // }//这里直接报错，这是因为为遵循先申明后使用的原则

这里是短暂性死循环，其主要的含义是，在未进行声明就直接进行了使用，其次let不存在变量提升而原始的var是有的，可以先进行声明变量

	 let i=0;
	 let i=2;//这样会报错
			
	//但是这种是可以的,例如:
	let i=0;
	 i=2;
	//这是可以的

变量的申明不能重复

// const Person={
           //    renlname:"张三",age:"18",
           // }
           // console.log(Person);
           // 打印出来得是一个完整的对象内部的值
           // const Person={
           //    renlname:"张三",age:"18",
           // }
           // Person.renlname='李四';
           //这样是可以的但是不能这样写
       // const   Person();
       //会报错

           // console.log(Person);

const申明的变量为常量不可以更改的

// 解构赋值
           //交换两个值
           // 1:数值的解构赋值
           // let a=1;
           // let b=2;
           // [b,a]=[a,b]
           // console.log(a,b); //2 1

           // 2：数组解构
           // let arr=[1,2,3,4]
           // let [a,b,c,d] = arr;
           // console.log(a,b,c,d);
           //结果为1 2 3 4


           // 2：二维数组解构
           // let arr=[1,2,[3,4,5],6]
           // let [a,b,[c,d,e],f]=arr;
           // console.log(a,b,c,d,e,f);
           //最终结果为1 2 3 4 5 6

解构函数的传值

// let[a,b,,c]=[1,2,3,4]
// console.log(a,b,c);
//最终结果为1 2 4

省略变量

   // let[a,...c]=[1,2,3,4,5]
// console.log(a,c);
           //结果为1 [2, 3, 4, 5]

合并成数组的值

// let [a,b]=[1]
           // console.log(a,b)

//根据上面的数组可得，少了一位值，那么打印出来的是undefined 最终结果为1 undefined 但是如果这样的话
           // let [a,b=0]=[1]
           // console.log(a,b)
           //那么打印出来的是1 0 只有当少一位给定一个默认值时才会起到作用，否则不会使用依旧是undefined

默认数组

   // let Person={realname:'张三',age:19}
           // let {realname,age}=Person;
           // console.log(realname,age);
           // 最终结果为张三 19

对象解构

// let Person={realname:'张三',age:19}
       //这里的重命名是这样的先将usename赋给realname然后再将值赋给usename，所以如果只打印realname:usename
           // 那么为0,因为还没有赋值
           // let {realname:usename,age}=Person;
           // console.log(usename,age);
           //那么结果为：张三 19

重命名

   // function fnc(){
           //    return [1,2,3];
           // }
           // let [a,b,c]=fnc();
           // console.log(a,b,c);
           //最终结果为1 2 3

结构函数

关于this的指向：

// function globle(){
           //    console.log(this);
           // }
           // globle();
           //这里的结果为window

全局函数下的this 箭头函数里的this是静态的而普通函数下的this跟调用者有关

   // const globle=()=>{
           //    console.log(this);
           // }
           // globle();
           //最终结果也是window

箭头函数下的this是静态主要根据上下文的this

// const Person={
           //    uname:'张三',
           //    age:19,
           //    say:()=>{
           //        console.log(this);
           //    }
           // }
           // Person.say();
           // 这里打印的是window

对象方法里面的this

// function Person(realname,age){
           //    this.realname=realname;
           //    this.age=age;
           //    this.say=()=>{
           //        console.log(this);//这个this不会当时new 实例是谁就是谁
           //    }
           //        this.say1 = function(){
           //            console.log(this);
           //        }
           // }
           // const temp= new Person("张三",20);
           //    const temp1= new Person("李四",21);
           // // temp.say();
           // temp.say.call(temp1);
           // temp.say1.call(temp1);

构造函数的this就是当前的实例

箭头函数里的this一旦被定义了是不能发生改变的

数组对象解构：

// const pig=[
       //    {
       //        uname:'佩奇',
       //        age:'6',
       //    }
       // ]
       // //获取
       // const [{uname,age}]=pig
       // console.log(uname);
       // console.log(age);
       //最终结果为佩奇 6

对象解构的重命名旧变量名：新变量名
运用了数组中包含对象的方式

多级对象的解构：

   // const pig={
       //    name:'佩奇',
       //    family:{
       //        mother:'猪妈妈',
       //        father:'猪爸爸',
       //        sister:'乔治',
       //    },
       //    age:16
       // }
       // const {name,family:{mother,father,sister},age}=pig
       // console.log(name)
       // console.log(father)
       // console.log(sister)
       // console.log(age)
       //打印出的结果为：佩奇猪爸爸乔治 16

对象重命名：

// const pig={
       //    name:'佩奇',
       //    age:20,
       // }
       // const {name:username,age} = pig
       // console.log(username,age);
           //打印出的结果为佩奇 20
       //对象的重命名

let、const、var 的区别：

- 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象

- 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升

- 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

- 使用let，const的声明的变量不属性顶层对象，返回undefined。

在工作中以上知识点都是常用的，关注博主，每日都会为大家最新最全知识

下面是关于上面最后一个改变this指向的详细信息，可以点击进入阅览：

https://www.runoob.com/w3cnote/js-call-apply-bind.html

下面给大家展示一个案例，方便大家更好的理解this的指向

HTML内容部分：

<button id="btn">未点击</button>

js内容部分：

	
				let btnObj = document.querySelector("#btn");
				let flag = false;
				
				btnObj.addEventListener("click",function(){
					flag = !flag;
					
					if(flag){
						 setTimeout(()=>{
							console.log(this);
						this.innerText="已点击";//这个this原指向的是window但通过使用箭头函
    //数让他指向点击按钮
						},1000)
					}else{
						  this.innerText="未点击";//这里的函数包含在点击按钮之内，所以this指向window
					}
					
				})

很多小伙伴肯定有疑问，为何第一个this.innerText="已点击";原指向window，因为 setTimeout（）定时器前面有个window调用的。但现在使用了箭头函数是不会发生改变的，所以指向的是点击按钮。