关于ES6 ESNext的基础学习

最新推荐文章于 2024-08-18 14:18:24 发布

大聪明397

最新推荐文章于 2024-08-18 14:18:24 发布

阅读量2k

点赞数 2

分类专栏：前端基础文章标签：前端 es6 ecmascript

本文链接：https://blog.csdn.net/weixin_48391468/article/details/121316074

版权

本文介绍了ECMAScript的历史，重点讲解了ES6及以后版本的常用API，包括let和const的作用域特性，声明提升的区别，箭头函数的this指向，class的实例与静态方法，模板字符串的使用，以及解构赋值的原理与应用。文章还探讨了Iterator接口和可迭代对象的概念，展示了如何自定义可迭代对象。最后鼓励读者继续深入学习ESNext的新特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

历史

ECMAScript是由网景的布兰登·艾克开发的一种脚本语言的标准化规范；最初命名为Mocha，后来改名为LiveScript，最后重命名为JavaScript。1995年12月，升阳与网景联合发表了JavaScript。1996年11月，网景公司将JavaScript提交给欧洲计算机制造商协会进行标准化。ECMA-262的第一个版本于1997年6月被Ecma组织采纳。ECMAScript是由ECMA-262标准化的脚本语言的名称。
尽管JavaScript和JScript与ECMAScript兼容，但包含超出ECMAScript的功能。
总之: 严格来说, ES6是指2015年6月发布的ES2015标准, 但是很多人在谈及ES6的时候, 都会把ES2016 ES2017等标准的内容也带进去.
所以严谨的说, 在谈论ECMAScript标准的时候, 用年份更好一些. 但是也无所谓, 纠结这个没多大意义。

ESNext

其实ESNext是一个泛指, 它永远指向下一个版本. 比如当前最新版本是ES2020, 那么ESNext指的就是2021年6月将要发布的标准.

ES6及以后新增的常用API

let 和 const

先整一个经典面试题

for(var i=0;i<=3;i++){
    
    setTimeout(function() {
     
        console.log(i)  
    }, 10);
}

在这里插入图片描述
输出4444，两个原因：
1.var声明的变量是全局的，在每次循环的时候，其实全局只有一个i，值在进行改变
2.setTimeout是异步执行，在下一轮事件循环，等到执行的时候去找i的值，所以找到了已经遍历完之后的i，这个时候i==4，所以输出如上

如果是以下代码：

for(let i=0;i<=3;i++){
    
    setTimeout(function() {
     
        console.log(i)  
    }, 10);
}

那结果就是
在这里插入图片描述
因为：
let声明的变量是有作用域限制的，他只在块级作用域内生效，创建setTimeout的时候，i在作用域内，而且对于每次循环，实际上console.log(i)里面的i是i的一个新的实例，对let声明的i进行引用
其实也可以不通过let达到输出0123的效果

for(var i = 0; i <=3; i++) {
   
    (function (i) {
   
        setTimeout(function () {
   
            console.log(i);
        }, 10);
    })(i);
}

通过自执行函数，每次循环的时候都会传入当前i，所以和let进行声明能达到同样的效果

声明提升

console.log(i)
var i = 1;//undefined

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

对于var，在变量声明之前进行使用是不会报错的，而let会报错
const则是在let的基础上，不可被修改

箭头函数

1.最大的区别：箭头函数里的this是定义的时候决定的, 普通函数里的this是使用的时候决定的
普通函数

const test = {
   
   name: 'geilaozichong',
   getName: function() {
   
       return `${
     this.name}`
   }
}
console.log(teacher.getName());

最低0.47元/天解锁文章