ES6新特性总结
1.const 与 let 变量
let 表示申明变量。const 表示申明常量。
常量定义了就不能改了。对象除外,因为对象指向的地址没变。
const在申明是必须被赋值。
两者都为块级作用域。
块级作用域与函数作用域。任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域。函数作用域就好理解了,定义在函数中的参数和变量在函数外部是不可见的。
const a = 1 a = 0 //报错
关于使用let与const规则:
使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明
使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值
2. 模块字符串``
可以使用反引号``来进行字符拼接。${}
模板字面量本质上是包含嵌入式表达式的字符串字面量。
模板字面量用倒引号 ( `` )(而不是单引号 ( '' ) 或双引号( "" ))表示,可以包含用 ${expression} 表示的占位符。
let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick up your report card.`;
3. 解构
可以使用{}来对数组和对象进行解构。
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
a、数组解构
数组解构使用中括号[]
let [a, b, c] = [1, 2, 3]; let [foo, [bar], baz] = [1, [2], 3]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3]; x // 1 y // 3 不完全解构 let [x, y] = [1, 2, 3]; x // 1 y // 2 let [a, [b], d] = [1, [2, 3], 4]; a // 1 b // 2 d // 4 剩余项...tail,剩余项必须是最后一项。 let [head, ...tail] = [1, 2, 3, 4]; head // 1 tail // [2, 3, 4] let [x, y, ...z] = ['a']; x // "a" y // undefined z // []var [...cc] = [1,2,3,4] cc//[1,2,3,4] 克隆数组默认值 let [foo = true] = []; foo // true let [x, y = 'b'] = ['a'];// x='a', y='b' let [x, y = 'b'] = ['a', undefined];// x='a', y='b' undefined比较特殊
4. 函数的参数默认值
函数传参可以有默认值
// ES6; function printText(text = 'default') { console.log(text); }
5. Spread / Rest 操作符...
Spread / Rest 操作符指的是 ...,具体是 Spread 还是 Rest 需要看上下文语境。
当被用于迭代器中时,它是一个 Spread 操作符:迭代器 (Iterator)是按照一定的顺序对一个或多个容 器 中的元素行进遍历的一种机制
function foo(x,y,z) { console.log(x,y,z); } let arr = [1,2,3]; foo(...arr); // 1 2 3
当被用于函数传参时,是一个 Rest 操作符:当被用于函数传参时,是一个 Rest 操作符:
function foo(...args) { console.log(args); } foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
6. 箭头函数
不需要 function 关键字来创建函数
省略 return 关键字
this始终指向函数申明时所在作用域下的this值
//es5 var fun = function() { } //es6 var fn = () => { }
7. for of
for of遍历的是键值对中的值
for in遍历的是键值对中的键
8. class类
ES6 中支持 class 语法,不过,ES6的class不是新的对象继承模型,它只是原型链的语法糖表现形式。
class Student { constructor() { console.log("I'm a student."); } study() { console.log('study!'); } static read() { console.log("Reading Now."); } } console.log(typeof Student); // function let stu = new Student(); // "I'm a student." stu.study(); // "study!" stu.read(); // "Reading Now."
9. 导入导出
导入improt
导出export default
10. promise
Promise 用于更优雅地处理异步请求。
<script> new Promise((resolve,reject) => { setTimeout(function() { resolve('成功了!') },1000) // reject("失败了,wuwu") }).then(data => { console.log(data) }).catch(err => { console.log(err) }) </script>
11. async/await
比promise更好的解决了回调地狱。
async function() { awiat fn() }
12. Symbol
ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。
ES6 数据类型除了 Number 、 String 、 Boolean 、 Object、 null 和 undefined ,还新增了 Symbol 。
Symbol 函数栈不能用 new 命令,因为 Symbol 是原始数据类型,不是对象。可以接受一个字符串作为参数,为新创建的 Symbol 提供描述,用来显示在控制台或者作为字符串的时候使用,便于区分。
let sy = Symbol("KK"); console.log(sy); // Symbol(KK) typeof(sy); // "symbol" // 相同参数 Symbol() 返回的值不相等let sy1 = Symbol("kk"); sy === sy1; // false
13. Set集合
存储任何类型的唯一值,即集合中所保存的元素是不重复的。类数组结构。
arr = [1,2,3,1] let arrNew = new Set(arr) arrNew = [1,2,3]
类数组不是数组,要转化为数组Array.form(arrNew)这样arrNew才是数组了
- 尝鲜,Windows 11默认壁纸下载,4K分辨率哦
- ThinkPHP5/6 查询并进行数据计算的快捷方法
- PHP中,如果存在继承关系,其中子类和父类都定义了构造函数__construct(),怎么处理?
- Thinkphp6获取请求的模块名、类名和方法名的方式
- nginx跨域访问,需要如何配置?宝塔面板如何配置跨域?
- 谷歌发布全新操作系统chromeOS Flex首个稳定版,可用于 PC 和 Mac
- 82个常规的前端JavaScript方法封装(61~70)
- 最美的国产操作系统:深度操作系统 deepin 20.5 发布
- JavaScript实现json数据深拷贝的几种方法
- Thinkphp6使用Dompdf将HTML转换为PDF,并且支持中文