关于ES6的详解（上）

ES6新特性详解

最新推荐文章于 2025-09-04 07:00:00 发布

原创最新推荐文章于 2025-09-04 07:00:00 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

ES

ECMAScript的简写，es6，就是ECMAScript的第六个版本，在2015年6月发布，这是一个标准，不是啥插件，这个版本主要是为了解决 ES5 的先天不足，新加了类这个之前没有的概念

诞生历史：

1997 年 ECMAScript 1.0 诞生。
1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。
1999 年 12 月 ECMAScript 3.0诞生，它是一个巨大的成功，在业界得到了广泛的支持，它奠定了 JS 的基本语法，被其后版本完全继承。直到今天，我们一开始学习 JS ，其实就是在学 3.0 版的语法。
2000 年的 ECMAScript 4.0 是当下 ES6 的前身，但由于这个版本太过激烈，对 ES 3 做了彻底升级，所以暂时被"和谐"了。
2009 年 12 月，ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。2011年6月，ES 5.1 版发布，并且成为 ISO 国际标准。
2013 年，ES6 草案冻结，不再添加新的功能，新的功能将被放到 ES7 中；
2015年6月， ES6 正式通过，成为国际标准。

量

let	变量，不可提前声明，块级作用域
const	常量，不可提前声明，不可重新赋值

先说一下es新增的域：块级作用域，之前一直有全局作用域和局部作用域，实质来说这两个也没有确切的说法，全局也是相对的，如果在一个函数里面再写一个函数和一个变量，对于外套的函数，里面的是否可以当成一个全局作用域呢，新增的块级主要表现在{},比如if的执行，for循环的执行

let

let的生命周期只存在在{}内，当脱离块级作用域，外部就无法访问到这个变量，let区别于var有几个特点：
1：let存活块级作用域
2：不允许重复声明
3：不会提前声明
4：在代码块内，使用let命令声明变量之前，该变量都是不可用的。这叫进去暂时性死区。

实例拓展：结合这几个特点，在项目实例中之前遇到的一个问题，对多个节点循环绑定点击事件，之气的写法是立即执行函数或者对象属性绑定，现在直接let声明

for(var i = 0; i < inp.length; i ++){
	(function(j){
		inp[j].onclick = function(){
			console.log(this.innerText)
		}			
	}(i))//立即执行函数

	inp[i].index = i;
	inp[i].onclick = function(){
		console.log(inp[this.index].innerText)
	}//对象属性绑定
}

for(let i = 0; i < inp.length ; i++){
	inp[i].onclick = function(){
		console.log(inp[i].innerText)		
	}
}

const

const声明一个只读的常量。一旦声明，常量的值就不能改变。
const一旦声明变量，就必须立即初始化，不然报错。
const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

const没什么实例拓展，这个算是严谨的语法规范吧，在大型项目中过多的全局变量眼花缭乱，如果不小心重新赋值/定义一个变量，找起错误也是相当费劲了，const的诞生就是为了防止意外修改变量

字符串

字符串拼接

${}变量名放在花括号中，载体不是""，放在``中

var num = 10;
console.log("余额为"+num)

//新的语法
console.log(`余额为${num}`)

字符串遍历

for(let str of 'hello'){
	console.log(str);
}

字符串的方法

includes()：返回布尔值，是否找到了参数字符串。
startsWith()：返回布尔值，参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，参数字符串是否在原字符串的尾部。

解构赋值

解构赋值是对赋值运算符的扩展。ES6 允许按照一定模式，针对数组或者对象进行模式匹配，从其中提取值，对变量进行赋值，只要等号两边的模式相同，左边的变量就会被赋予对应的值。。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

数组：

let [a, b, c] = [1, 2, 3];
//a = 1,b = 2,c = 3

let [a, [[b], c]] = [1, [[2], 3]];
//a = 1,b = 2,c = 3

let [a, , b] = [1, 2, 3];
//a = 1,b = 3

let [a = 1, b] = []; 
// a = 1, b = undefined

let [a, ...b] = [1, 2, 3];
//a = 1,b = [2, 3]

let [a, b, c] = 'DSB';
//a = D,b = S, c = B

对象

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
 
let { baz : foo } = { baz : 'ddd' };
// foo = 'ddd'

函数

默认参数

function fn(x,y=20,z=10){
	console.log(x+y+z)
}
fn(30)

按照以往必须参数对应，es6中加入默认参数，极大的方便了代码的调用
注意点：
1：只有在未传递参数，或者参数为 undefined 时，才会使用默认参数。
2：使用函数默认参数时，不允许有同名参数。
3：null 值被认为是有效的值传递。

不定参数

function fn(...str){
	console.log(str)
}
fn(1,2,3,4,5)

不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。具名参数只能放在参数组的最后，并且有且只有一个不定参数。

箭头函数

(参数1,参数2,....) => {}

注意：
1：如果参数只有一个,可以省略()，如果没有参数, 必须加上 ()
2：{}中只有一个renturn语句,省略{}和return

箭头函数好处
1: 简化回调函数
2中this指向定义的时作用域