【JavaScript教程】扬帆JavaScript的未来:ES6核心语法探索之旅(基础篇)

零 JavaScript教程评论76字数 1661阅读5分32秒阅读模式

前言

ECMAScript 6(ES6)的问世,为JavaScript语言开启了崭新篇章。这一版本不只是带来了更新迭代,更是引入了多项创新特性,从而极大扩展了开发者的工具箱,同时也显著提高了代码的可读性、可维护性以及执行效率。ES6的推出,不仅仅是版本的升级,更是JavaScript演进为更成熟和现代化编程语言的重要里程碑。这篇导览将带你详细了解ES6的各项新特性,让你全面掌握其精髓。

1.let,const,var的使用

屏幕截图 2024-05-19 131006.png文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15306.html

这个想必我们都很清楚是由于var声明的变量存在声明提升。因此打印undefined。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15306.html

屏幕截图 2024-05-19 131057.png文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15306.html

此外var声明的变量是挂载在window上的,会污染全局变量。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15306.html

屏幕截图 2024-05-19 131124.png文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15306.html

而let声明的变量则不存在声明提升,会报错。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15306.html

屏幕截图 2024-05-19 131304.png文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15306.html

这里会报错,因为let 会和{}形成块级作用域,这个时候只会因为里面存在myname,形成暂时性死区,不会往外找,但是又由于let声明的变量不存在声明提升,因此里面又找不到,最终报错。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15306.html

屏幕截图 2024-05-19 131426.png文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15306.html

const声明常量,不可更改数据。文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/15306.html

屏幕截图 2024-05-19 132217.png

而声明一个对象时,为什么更改属性就可以呢?

屏幕截图 2024-05-19 132628.png

这得从js存储数据的结构说起,基本数据类型是存储在栈里面,而引用数据类型是存储在堆里面,但是引用数据类型的地址是存储在栈里面的,我们从这个例子可以看出,obj和obj2都是指向相同的地址,因此obj中的属性改变时,obj2中的属性也会改变,由此我们也知道了改变一个引用类型比如对象的属性我们并没有改变它的栈里地址,而是改变了堆里的数据,因此我们不会报错。

2.解构

屏幕截图 2024-05-19 132917.png

我们首先了解一下数组解构,其实数组解构就是左边声明一个和数组对应的形式,最终的数据就会一一对应。这样子可以节约时间,非常方便。

屏幕截图 2024-05-19 133000.png

我们也可以不解构全部内容。

屏幕截图 2024-05-19 133035.png

js中有一个剩余参数的概念,我们这个时候的c就是一个数组【3,4,5】

屏幕截图 2024-05-19 133148.png

我们也可以在解构内容中赋值默认值,当然在有参数传递时还是以传递的参数为主,这里f依然为6.

屏幕截图 2024-05-19 133620.png

解构对象时,我们必须一一对应。这里的结果就是它们对应的值.

屏幕截图 2024-05-19 133824.png

为什么可以像之前那样子解构对象呢?这是因为在对象中,如果属性值和属性名一样,属性值可以省略不写。这里面我们为了区别,特地把属性名和值改成不一样的。而之前我们之所以可以直接打印属性名,是因为相同内容被省略了。

屏幕截图 2024-05-19 134150.png

字符串的解构和数组是类似的。

3.BigInt

屏幕截图 2024-05-19 134725.png

js中有一个缺陷,就是大于2的53次方的数进行算数时会出错,因此我们引入第6个(前5个分别是Number,String,boolean,Undefined,Null)基本数据类型大整形。具体作用就是解决这个缺陷。它和数字number是不一样的基本数据类型。

屏幕截图 2024-05-19 134759.png

4.关于函数中的剩余参数

屏幕截图 2024-05-19 140538.png

我们这里可以得到一个伪数组(只有部分属性),它是函数里自带的。

屏幕截图 2024-05-19 140643.png

而当我们使用剩余参数去接收时,会更加方便一些。得到的是一个真数组。

5.关于判断相等

屏幕截图 2024-05-19 141426.png

首先我们要明确 == 和=== 的区别,==会把两边数据转换为同一个数据类型再进行比较,而 === 则直接进行比较。这里的结果是true。

屏幕截图 2024-05-19 141458.png

而我们这里的结果依然是true。

屏幕截图 2024-05-19 141519.png

这个时候就是fasle了。

屏幕截图 2024-05-19 141624.png

我们接下来聊一聊对象的判断问题,首先两边都是对象,因此== 和 === 的结果是一样的,不必转换数据类型,我们前面已经提到过,对象在栈里存储的是地址,即使我们创建了两个相同的对象,地址也肯定不相同。因此结果为false

6.第7个基本数据类型Symbol

屏幕截图 2024-05-19 141853.png

这个数据类型的作用就是创造一个独一无二的数据,即使两个数据完全一样也不相等。这里我们输出false。

7.小结

本次学习小结不仅是知识点的罗列,更是一次思维方式的升级启示。ES6以其现代化的特性,促使开发者们重新思考和构建代码,提升开发效率与项目质量。更重要的是,它标志着JavaScript作为一门语言,正不断进化以适应快速发展的Web开发需求,持续焕发着生机与活力。

站在ES6的新起点上,每一位开发者都拥有了更强大的工具去创造更加丰富、高效、可维护的Web应用。未来,随着ES7、ES8乃至更多新特性的涌现,掌握ES6将是通向高阶JavaScript编程的必经之路。继续探索,让我们的代码之旅因ES6而更加精彩纷呈。

零
  • 转载请务必保留本文链接:https://www.0s52.com/bcjc/javascriptjc/15306.html
    本社区资源仅供用于学习和交流,请勿用于商业用途
    未经允许不得进行转载/复制/分享

发表评论