ES6基础语法新特性

最新推荐文章于 2025-11-06 21:38:46 发布

原创最新推荐文章于 2025-11-06 21:38:46 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

大前端专栏收录该内容

65 篇文章

订阅专栏

目录标题

ES6的历史
ES6基础语法

ES6的历史

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript 和 JavaScript 的关系

一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？

要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的ECMAScript 方言还有 Jscript 和 ActionScript）ES6 与 ECMAScript 2015 的关系ECMAScript 2015（简称 ES2015）这个词，也是经常可以看到的。

ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。我们说 ES6 的地方，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。

ES6基础语法

1. let声明变量

var 声明的变量没有局部作用域
let 声明的变量有局部作用域
var 可以声明多次
let 只能声明一次

2. const声明常量

声明之后不允许改变
一但声明必须初始化，否则会报错

3. 解构赋值

解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

//1、数组解构 
// 传统 
let a = 1, b = 2, c = 3 
console.log(a, b, c) 
// ES6 
let [x, y, z] = [1, 2, 3] 
console.log(x, y, z)

//2、对象解构 
let user = {name: 'kuangshen', age: 18} 
// 传统 
let name1 = user.name 
let age1 = user.age 
console.log(name1, age1) 
// ES6 
let { name, age } = user
//注意：解构的变量必须和user中的属性同名 
console.log(name, age)

4. 模板字符串

模板字符串相当于加强版的字符串，用反引号 `,
除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

// 字符串插入变量和表达式。变量名写在 ${} 中，
//${} 中可以放入 JavaScript 表达式。 
let name = 'Kuangshen' 
let age = 27 
let info = `My Name is ${name},I am ${age+1} years old next year.` 
console.log(info) 
// My Name is Kuangshen,I am 28 years old next year.

5. 声明对象简写

const age = 12 
const name = 'kuangshen' 
// 传统 
const person1 = {age: age, name: name} 
console.log(person1) 
// ES6 
const person2 = {age, name} 
console.log(person2) 
//{age: 12, name: 'kuangshen'}

6. 定义方法简写

// 传统 
const person1 = { sayHi:function(){ 
						console.log('Hi') 
						} 
}person1.sayHi();
//'Hi' 
// ES6 
const person2 = { 
			sayHi(){ console.log('Hi') } 
			}person2.sayHi() 
//'Hi'

7. 对象拓展运算符

{ ...person }代表直接复制拷贝，区别于引用拷贝

let person = {name: 'Kuangshen', age: 15} 
let someoneOld = person 
//引用赋值 
let someone = { ...person } 
//对拷拷贝 
someoneOld.name = 'KuangshenOld' 
someone.name = 'Kuangshen1' 
console.log(person) 
//{name: 'KuangshenOld', age: 15} 
console.log(someoneOld) 
//{name: 'KuangshenOld', age: 15} 
console.log(someone) 
//{name: 'Kuangshen', age: 15}

8. 函数的默认参数

function showInfo(name, age = 17) { 
		console.log(name + "," + age) 
	}
	// 只有在未传递参数，或者参数为 undefined 时，才会使用默认参数 
	// null 值被认为是有效的值传递。 
	showInfo("Kuangshen", 18) 
	// Kuangshen,18 
	showInfo("Kuangshen") 
	// Kuangshen,17 
	showInfo("Kuangshen", undefined) 
	// Kuangshen,17 
	showInfo("Kuangshen", null) 
	// Kuangshen, null 12345678910

9. 箭头函数

箭头函数提供了一种更加简洁的函数书写方式。基本语法是
参数 => 函数体

let arr = ["10", "5", "40", "25", "1000"]
let arr1 = arr.sort() 
console.log(arr1) 
//上面的代码没有按照数值的大小对数字进行排序， 
//要实现这一点，就必须使用一个排序函数 
arr2 = arr.sort(function(a,b){ return a - b })
// arr2 = arr.sort((a,b) => {return a - b}) 
// arr2 = arr.sort((a,b) => a - b) 
console.log(arr2)

// 当箭头函数没有参数或者有多个参数，要用 () 括起来。 
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块， 
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。 
var f3 = (a,b) => { let result = a+b return result 
}console.log(f3(6,2)) 
// 8 
// 前面代码相当于： 
var f4 = (a,b) => a+b