ES6新特性(一)

ES6指的是ECMAScript 6,也被称为ES2015。它是JavaScript的一种版本,是ECMAScript标准的第六个版本,于2015年发布。ECMAScript是JavaScript的规范,定义了语言的核心特性和行为。ES6引入了许多新的语法特性和功能,以使JavaScript代码更加现代化、清晰和强大。 在此专栏中,我们会持续更新有关于ES6的新特性,感兴趣的小伙伴们可以订阅一下~

前言

今天我们来聊聊ES6新特性中新增的letconst关键字,用于声明变量,解决了使用var可能导致的一些问题。字符串模板,允许使用更简单的语法来处理字符串拼接和多行字符串。解构赋值,允许从数组或对象中提取值,并将其赋给变量。我们一起来看看叭~

let 和 const

  1. var允许重复声明,let不行

使用 var 重复声明:

js 复制代码
var x = 10;
console.log(x); // 输出 10

var x = 20; // 重复声明,没有错误
console.log(x); // 输出 20

在这个例子中,变量 x 被两次声明,第二次声明没有引发错误。

使用 let 不允许重复声明:

js 复制代码
let y = 30;
console.log(y); // 输出 30

// 下一行的声明会引发错误:Uncaught SyntaxError: Identifier 'y' has already been declared
let y = 40;

在这个例子中,尝试使用 let 重复声明相同的变量 y 会导致语法错误。

  1. var 存在声明提升 let 不存在

var 存在声明提升,这意味着在代码执行前,变量会被提升到其作用域的顶部。而 letconst 不具备这种声明提升的特性。以下是一个关于声明提升的例子:

使用 var 的声明提升:

js 复制代码
console.log(a); // 输出 undefined,而不是 ReferenceError
var a = 5;
console.log(a); // 输出 5

在这个例子中,尽管在 console.log(a) 前面进行了赋值操作,但由于变量 a 被提升到作用域顶部,所以不会引发 ReferenceError,而输出的是 undefined

使用 let 的没有声明提升:

js 复制代码
// 下一行的声明会引发错误:Uncaught ReferenceError: Cannot access 'b' before initialization
console.log(b);

let b = 10;
console.log(b); // 这一行不会被执行,因为上一行已经引发错误

在这个例子中,由于 let 不会进行声明提升,尝试在声明之前访问变量 b 会引发 ReferenceError

let 声明的变量具有块级作用域,这意味着它们在声明的块(通常是由花括号 {} 包围的代码块)内部有效,而在块外部无效。这与使用 var 声明的变量的函数作用域不同。

我们来看一个使用 let 的块级作用域的例子:

js 复制代码
// 使用 var,i 具有函数作用域
for (var i = 0; i < 5; i++) {
    // 循环结束后,i 仍然可以被访问
}
console.log(i); // 输出 5,i 在整个函数作用域内有效

// 使用 let,j 具有块级作用域
for (let j = 0; j < 5; j++) {
    // 循环结束后,j 在此块级作用域外无法访问
}
// 下一行的访问会引发错误:Uncaught ReferenceError: j is not defined
console.log(j);

在这个例子中,i 由于使用 var 声明,具有全局作用域,因此在循环外仍然可以访问。而 j 使用 let 声明,具有块级作用域,因此在循环外无法访问。

  1. var 声明的全局变量会添加在window上, let不会

当使用 var 在全局作用域声明变量时,该变量会成为全局对象(通常是 window 对象,如果在浏览器中执行)的属性。这就意味着,使用 var 声明的全局变量可以通过全局对象来访问。

js 复制代码
var globalVar = "I'm a global variable";
console.log(window.globalVar); // 在浏览器中输出 "I'm a global variable"

然而,使用 let 在全局作用域声明变量时,并不会将该变量添加到全局对象上。这是 let 在处理全局变量时的一种改进,以减少全局命名空间的污染。

js 复制代码
let globalLet = "I'm a global variable";
console.log(window.globalLet); // 输出 undefined,因为let声明的全局变量不会添加到window对

Const

const 是 JavaScript 中用于声明常量的关键字。使用 const 声明的变量必须被初始化,并且一旦赋值之后,就不能再被修改。这意味着 const 声明的变量具有恒定不变的值。

我们来看一个例子:

js 复制代码
const pi = 3.14;
console.log(pi); // 输出 3.14

// 尝试修改 const 声明的变量会引发错误
// pi = 3.14159; // TypeError: Assignment to constant variable.

在这个例子中,pi 被声明为常量,并且在声明时被赋予了一个初始值。尝试在后续代码中修改 pi 的值会导致 TypeError,因为常量的值是不可变的。

常量的作用域规则与 let 相同,它具有块级作用域:

arduino 复制代码
javascriptCopy code
if (true) {
    const x = 10;
    console.log(x); // 输出 10
}

// x 在此处不可访问
// console.log(x); // ReferenceError: x is not defined

const 常用于声明不会被重新赋值的常量,例如数学常数、配置项等。需要注意的是,使用 const 声明的变量仅保证其引用不变,而不是其值不变。如果常量是一个对象,对象的属性是可以被修改的。

js 复制代码
const person = {
    name: 'John',
    age: 30
};

person.age = 31; // 这是有效的,因为 person 是一个对象,const 保证的是 person 引用不变,而不是其属性值

// 尝试修改 person 的引用会引发错误
// person = {}; // TypeError: Assignment to constant variable.

字符串模板

JavaScript 字符串模板,也被称为模板字符串,是一种允许嵌入表达式的字符串字面量。模板字符串使用反引号(`)来定义,其中可以包含变量、表达式、换行符等,使得字符串拼接更加简洁和直观。

我们来看看例子:

js 复制代码
// 使用模板字符串
let name = 'World';
let greeting = `Hello, ${name}!`;

console.log(greeting); // 输出 Hello, World!

在这个例子中,${name} 是一个表达式,它会被替换为变量 name 的值。使用模板字符串可以更方便地插入变量,并使字符串的拼接更加清晰。

多行字符串:

js 复制代码
// 使用模板字符串创建多行字符串
let multiLineString = `
    This is a
    multi-line
    string.`;

console.log(multiLineString);
// 输出:
//     This is a
//     multi-line
//     string.

嵌套表达式:

js 复制代码
// 使用嵌套表达式
let a = 5;
let b = 10;
let result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result); // 输出 The sum of 5 and 10 is 15.

今天的内容就到这啦,如果你觉得小编写的还不错的话,或者对你有所启发,请给小编一个辛苦的赞吧

相关推荐
_Legend_King2 分钟前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
爱吃青椒不爱吃西红柿‍️3 分钟前
华为ASP与CSP是什么?
服务器·前端·数据库
余生H3 分钟前
transformer.js(三):底层架构及性能优化指南
javascript·深度学习·架构·transformer
一棵开花的树,枝芽无限靠近你6 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜9 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑17 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
SameX18 分钟前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
石小石Orz26 分钟前
Three.js + AI:AI 算法生成 3D 萤火虫飞舞效果~
javascript·人工智能·算法
小行星12528 分钟前
前端预览pdf文件流
前端·javascript·vue.js
join829 分钟前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf