ES6的新特性？？_ES6是什么+30分钟带你了解ES6核心内容（上）

13 浏览量 2021-01-08 11:47:46 上传评论收藏 136KB PDF 举报

资源推荐

资源详情

资源评论

ES6的新特性？？的新特性？？_ES6是什么是什么+30分钟带你了解分钟带你了解ES6核心内容核心内容

（上）（上）

文章目录文章目录一.ES6是什么？目标二.新特性1.const 与 let 变量let与const规则和var的区别2.模版字变量3.解构赋值定义：解构模型

数组模型的解构（Array）对象模型的解构（Object）4 对象字面量简写法5.迭代器Iterator迭代过程可迭代的值:for…of循环可

迭代的数据结构6.展开运算符应用：可变参数

一一.ES6是什么？是什么？

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，里并没有类的概念，（在dw中js文件中直接编写ES6也会提示报错，

报错信息’is avaliable in ES6(use'esversion:6')or Mozilla JS extension(use moz) ）

但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

目标目标

适应更复杂的应用；实现代码库之间的共享；不断迭代维护新版本。

二二.新特性新特性

1.const 与与 let 变量变量

使用var带来的麻烦:

function getClothing(isCold) {

if (isCold) {

var freezing = 'Grab a jacket!';

} else {

var hot = 'It's a shorts kind of day.';

console.log(freezing);

}

运行getClothing(false)后输出的是，因为在脚本开始运行的时候，var声明的变量freezing已经存在，但是还没有赋值所以会输出

undefined,这也就是执行执行function函数之前函数之前,所有变量都会被提升所有变量都会被提升, 提升到函数作用域顶部提升到函数作用域顶部.

let与const声明的变量解决了这种问题,因为他们是块级作用域块级作用域, 在代码块(用{}表示)中使用let或const声明变量, 该变量会陷入暂

时性死区直到该变量的声明被处理.

function getClothing(isCold) {

if (isCold) {

const freezing = 'Grab a jacket!';

} else {

const hot = 'It's a shorts kind of day.';

console.log(freezing);

}

运行**getClothing(false)**后输出的是ReferenceError: freezing is not defined,因为 freezing 没有在 else 语句、函数作用域或全局作用

域内声明，所以抛出 ReferenceError。

let与与const规则和规则和var的区别的区别

let 声明的变量只在 let 命令所在的代码块内有效。var 是在全局范围内有效:

let 只能声明一次， var 可以声明多次:

例如： for 循环计数器很适合用 let

for (var i = 0; i < 10; i++) {

setTimeout(function(){

console.log(i);

})

}

// 输出十个 10

for (let j = 0; j < 10; j++) {

setTimeout(function(){

console.log(j);

})

}

// 输出 0123456789

变量

是用

var

声明的，在全局范围内有效，所以全局中只有一个变量

每次循环时，

setTimeout

定时器里面的

指的是全局

变量

，而循环里的十个

setTimeout

是在循环结束后才执行，所以此时的

都是

。

变量

是用

let

声明的，当前的

只在本轮循环中有效，每次循环的

其实都是一个新的变量，所以

setTimeout

定时器里面的

其实是不同的变量，即最后输出

12345

。（若每次循环的变量

都是重新声明的，如何知道前一个循环的值？这是因为

JavaScript

引擎内部会记住前一个循环的值）。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。这意味着一旦声明必须初始化，否则会报错。

let 不存在变量提升，var 会变量提升:所以当脚本开始运行的时候，var定义的变量已经存在了，但是还没有赋值，所以会输出

undefine

ES6 明确规定，代码块内如果存在 let 或者 const，代码块会对这些命令声明的变量从块的开始就形成一个封闭作用域。

const 如何做到变量在声明初始化之后不允许改变的？如何做到变量在声明初始化之后不允许改变的？

const 保证变量指向的内存地址所保存的数据不允许改动。

而简单类型和复合类型保存值的方式是不同的。

简单类型简单类型（数值 number、字符串 string 、布尔值 boolean）,值就保存在变量指向的那个内存地址，因此 const 声明的简单类

型变量等同于常量。

复杂类型复杂类型（对象 object，数组 array，函数 function），变量指向的内存地址其实是保存了一个指向实际数据的指针，所以

const 只能保证指针是固定的，至于指针指向的数据结构变不变就无法控制了，所以使用 const 声明复杂类型对象时要慎重。

2.模版字变量模版字变量

**在ES6之前,将字符串连接到一起的方法是+或者concat()方法,**如

const student = {

name: 'Richard Kalehoff',

guardian: 'Mr. Kalehoff'

};

const teacher = {

name: 'Mrs. Wilson',

room: 'N231'

}

let message = student.name + ' please see ' + teacher.name + ' in ' + teacher.room + ' to pick up your report card.';

模板字面量本质上是包含嵌入式表达式的字符串字面量模板字面量本质上是包含嵌入式表达式的字符串字面量.

模板字面量用倒引号 ( “ )倒引号在1的左边可以包含用 ${expression} 表示的占位符

let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick up your report card.`;

3.解构赋值解构赋值

定义：定义：

解构赋值是对赋值运算符的扩展。解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

解构模型解构模型

解构的源，解构赋值表达式的右边部分。解构的源，解构赋值表达式的右边部分。

解构的目标，解构赋值表达式的左边部分。解构的目标，解构赋值表达式的左边部分。

解构数组的值解构数组的值:

const point = [10, 25, -34];

const [x, y, z] = point;

console.log(x, y, z);

剩余10页未读，继续阅读

评论收藏

内容反馈

weixin_38632488

粉丝: 11
资源: 950

ES6的新特性？？_ES6是什么+30分钟带你了解ES6核心内容（上）

ES6新特性一： let和const命令详解

es6的一些特性

深入浅出ES6

ES6_es6_

ES6新特性小小简单总结.md

ES6总结及面试题集合

javascript的经典面试题汇总

30分钟快速入门掌握ES6/ES2015的核心内容（上）

30分钟快速入门掌握ES6/ES2015的核心内容（下）

30分钟快速入门掌握ES6 ES2021的核心内容（上）.docx

三ES6新特性.pdf

es6标准入门_阮一峰最新版_第三版pdf

ES6新特性，看这就够了.pdf

js文档__es6文档__linux命令__linux基础知识__sequelize中文文档__个人_wawj

ES6 新特性示例代码.zip

ES6新特性思维导图

8小时美女老师带你完全掌握ES6新规范讲解

ES6新特性以及ReactJS入门.zip

es6新特性 学习word版2018最新

30分钟内让你明白正则表达式是什么，并对它有一些基本的了解，让你可以在自己的程序或网页里使用它。

30分钟了解c++11新特性

正则表达式 30分钟内让你明白正则表达式是什么，并对它有一些基本的了解，让你可以在自己的程序或网页里使用它。

30分钟了解C++11新特性1

JavaScript ES6函数式编程入门经典_javascript_

ES6_for_Humans

ES6新特性.docx

JavaScript ES6函数式编程入门经典_javascript_tall7cj_

最新资源

js文档es6文档linux命令linux基础知识sequelize中文文档__个人_wawj

es6新特性学习word版2018最新