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; // false13. Set集合
存储任何类型的唯一值,即集合中所保存的元素是不重复的。类数组结构。
arr = [1,2,3,1] let arrNew = new Set(arr) arrNew = [1,2,3]
类数组不是数组,要转化为数组Array.form(arrNew)这样arrNew才是数组了
- Xshell提示 “要继续使用此程序,您必须应用最新的更新或使用新版本”
- 微信小程序wx.scanCode,扫描二维码或者条形码获取数据
- Nginx实现二级域名或三级域名泛解析
- ref, toRef, toRefs,reactive, defineComponent, computed, unref, toRaw, watchEffect, onUpdated 10个VUE3前端API总结
- 研发/技术总监(CTO)的日常工作都在做些什么?
- 82个常规的前端JavaScript方法封装(61~70)
- PHP实现计算剩余几天几时几分倒计时间的方法
- jQuery.ajax对应的post/get/delete/put请求方法封装
- 宝塔面板查看登录地址、账号密码、运行状态和一键重启等命令
- TP6便捷快速查询日、月、年数据的方法

