深入探索ES6：下一代JavaScript核心特性与实践

L_言覃
482 阅读4分钟

前言

什么是ES6?

ES6 是 ECMAScript 2015 的简称，是 JavaScript 语言的一个重要更新版本。发布于2015年，这个版本引入了许多新特性和语法改进，旨在使 JavaScript 更适合构建复杂和大规模的应用程序。ES6 引入了如箭头函数、Promise、模块系统、Class语法、let与const声明、模板字符串、解构赋值等特性，极大地丰富了语言的功能并提高了代码的可读性和可维护性。尽管正式名称为ECMAScript 2015，但因习惯延续，人们常称之为ES6。随着时间推移，后续的ECMAScript版本（如ES2016、ES2017等）也被统称为“ES6+”特性集合的一部分。

let、const和var

相同之处：

  • 都是用来声明变量
  • let和const 都提供了块级作用域，不支持变量提升

不同之处：

  • var(适用于ES5及更早版本)在声明变量的时候会出现变量提升
  • let声明的变量可以重新赋值
  • const一旦被赋值后，其值就不能被改变
var声明变量
console.log(a);
var a = 1

打印的结果是undefined,却不报错，是因为var声明的变量会出现变量提升。

在js引擎的眼里代码是这样的：

var a
console.log(a);
a = 1
let声明变量
let a = 1
let b = a
b = 2
console.log(b);

打印结果

image.png

const声明变量
const a = 1
const b = a
b = 2
console.log(b);

打印结果

image.png

出现这个错误Assignment to constant variable. 说明你正在给一个常量重新赋值。

问：用 const 声明的对象里面的值可以改变吗？

答案是肯定的

const obj = {
    age: 18
}
obj.age = 19
console.log(obj.age);

打印结果

image.png

分析 因为v8在预编译的时候会产生一个全局执行上下文调用栈，而栈的空间是有限的，对象可以无限大，所以对象的值放在一个堆里，调用栈中存储对象的内存地址，地址不会变，但是堆中存放的对象的值可以改变，所以打印的结果是19。

image.png

解构

解构是什么？

解构是一种允许你从数组或对象中直接提取值到变量的表达式。

从数组中取值

let arr = ['a', 'b', 'c', 'd']
let a = arr[0]
console.log(a)

打印结果

image.png

let arr = ['a', 'b', 'c', 'd']
let[a, b, c, d] = arr
console.log(arr)

打印结果

image.png

从对象中取值

let obj = {
    a: 1,
    b: 2,
    c: {
        n: 3
    }
}

let { a, b, c, c: { n } } = obj
console.log(a, b, c, n);

打印结果

image.png

箭头函数

什么是箭头函数

箭头函数是ES6（ECMAScript 2015）中引入的一种新的函数表达式编写方式，它提供了一种更简洁、更清晰的语法来定义函数。

var arr = [1, 3, 2, 9, 7]

arr.sort((a, b) => {
    return b - a
})
// 这样写法和上面一样，不写{}，默认有return
arr.sort((a, b) => b - a
)

console.log(arr);

打印结果

image.png

sort方法用于给数组排序 b - a是降序，a - b是升序。

函数

function foo(a, b, ...args) {
    console.log(args);
}

foo(1, 2, 3, 4)

打印结果

image.png ...args用于接收函数多余的参数并以数组的形式返回

BigInt类型

什么是BigInt类型

BigInt类型是一种内置的原始数据类型，它能够安全地存储和操作极大或极小的整数，这些整数超出了标准JavaScript数字类型的范围。在JavaScript中，Number类型使用双精度浮点数表示，这限制了它可以精确表示的整数范围大约在 -(2^53 - 1) 到 2^53 - 1 之间。对于超过这个范围的整数，使用Number类型将会丢失精度。

BigInt类型则不受此限制，它可以表示任意大小的整数，保证了整数运算的精确度。BigInt类型的值通过在整数的末尾附加n来字面量创建。

2^53 + 1本来应该是9007199254740993，但是在浏览器中运行结果为

image.png 无法得到正确的值，于是使用BigInt类型来操作极大或极小的整数,直接在整数后面加n

image.png

let big = 999999999999999999999999999999999999999n
let big1 = 1n
console.log(big + big1);

打印结果

image.png

字符串方法——endsWith()

endsWith方法能干啥？

这个方法用于判断一个字符串是否以指定的子字符串结束。如果字符串确实以指定的子字符串结尾，则返回 true；否则，返回 false。

let str = '2906561443@qq.com'
console.log(str.endsWith('@qq.com'));
if(str.endsWith('@qq.com')) {
    console.log('这是qq邮箱');
}

打印结果

image.png

原始类型Symbol

什么是Symbol?

Symble 类型也是原始类型，创建一个独一无二的值

var a = Symbol(123) 
var b = Symbol(123)

console.log(a === b);

打印结果

image.png

Thanks.jpg

avatar
文章
阅读
粉丝