没有合适的资源?快使用搜索试试~ 我知道了~
ES6的新特性??_ES6是什么+30分钟带你了解ES6核心内容(上)
2 下载量 49 浏览量
2021-01-08
11:47:46
上传
评论
收藏 136KB PDF 举报
温馨提示
文章目录一.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也会提
资源推荐
资源详情
资源评论
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
变量
i
是用
var
声明的,在全局范围内有效,所以全局中只有一个变量
i,
每次循环时,
setTimeout
定时器里面的
i
指的是全局
变量
i
,而循环里的十个
setTimeout
是在循环结束后才执行,所以此时的
i
都是
10
。
变量
j
是用
let
声明的,当前的
j
只在本轮循环中有效,每次循环的
j
其实都是一个新的变量,所以
setTimeout
定时器里面的
j
其实是不同的变量,即最后输出
12345
。(若每次循环的变量
j
都是重新声明的,如何知道前一个循环的值?这是因为
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
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功