「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」
Es6
字面量的增强写法
var name = "why"
var age = 18
var obj = {
// 1.property shorthand(属性的简写)
name,
age,
// 2.method shorthand(方法的简写)
foo: function() {
console.log(this)
},
bar() {
console.log(this)
},
baz: () => {
console.log(this)
},
// 3.computed property name(计算属性名)
[name + 123]: 'hehehehe'
}
解构
数组解构
遍历数组，将数组中的元素赋值给相应的变量。
// 对数组的解构: []
var [item1, item2, item3] = names
console.log(item1, item2, item3)
// 解构后面的元素
var [, , itemz] = names
console.log(itemz)
// 解构出一个元素,后面的元素放到一个新数组中
var [itemx, ...newNames] = names
console.log(itemx, newNames)
// 解构的默认值
var [itema, itemb, itemc, itemd = "aaa"] = names
console.log(itemd)
对象解构
利用键进行解构，与解构的顺序无关
var obj = {
name: "why",
age: 18,
height: 1.88
}
// 对象的解构: {}
var { name, age, height } = obj
//修改变量名
var { name: newName } = obj
//设置默认值
var { address: newAddress = "广州市" } = obj
let/const
- const本质上是传递的值不可以修改，但是如果传递的是一个引用类型(内存地址), 可以通过引用找到对应的对象, 去修改对象内部的属性, 这个是可以的
- 通过let/const定义的变量名是不可以重复定义
- 没有作用域提升
- 全局作用域中，var定义的变量会被添加都window对象上，但const/let定义的变量不会添加都window上
块级作用
{ }形成一个块级作用域
注意：不同的浏览器有不同实现的(大部分浏览器为了兼容以前的代码, 让function是没有块级作用域)
块级作用域外面可以访问当demo()函数
{
let foo = "why"
function demo() {
console.log("demo function")
}
class Person {}
}
demo();
应用场景
//使用let定义i,i会产生块级作用域，在点击button时,会调用函数在上层块级作用域中找到相应的i的值，因此可以正确的找到i
//但是var定义的i,因为没有块级作用域，当btn被点击时，回调函数向上级作用域中查找i,因为没有块级作用域，所以上层作为域为全局作用域，但是此时全局作用域中的i已经被循环执行变为了2,所以不管点击哪一个button都是打印i的值为btns.length-1。
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
console.log("第" + i + "个按钮被点击")
}
}
模板字符串
模板字符串可以保存字符串的书写格式，比普通的字符串更美观。可以通过${}给模板字符串传递定义的变量。
let name = 'wang';
let age = 12
let allName = `${name}wu`;
console.log(allName);//wangwu
function foo() {
return 'foo is a function'
}
console.log(`my function a ${foo()}`);//my function a foo is a function
//通过模板字符串调用函数
//第一个是被分割的模板字符数组，之后的参数为模板字符串中的变量
function baz(arg1, name, age) {
console.log(arg1, name, age);//[ 'hel', 'low', 'ord' ] wang 12
}
// baz('fewaf', 'feafe');
baz `hel${name}low${age}ord`;
函数的默认参数
//参数默认值
function fn(name = 'lisi', age = 20) {
console.log(name, age);
}
对象参数默认值
//方式一
function baz({ name, age } = { name: 'eee', age: 14 }) {
console.log(name, age);
}
//方式二
function foo({ name = 'serf', age = 15 } = {}) {
console.log(name, age);
}
箭头函数
格式：（）=> { }
简写格式
- 当只有一个参数时，小括号可以省略
- 当执行代码只有一句时，可以省略大括号，并且会将这一句代码的返回值作为函数的返回值
- 当只有一句代码，并且返回的是一个对象是，可以省略return 但是需要在对象外面1加一个小括号，表示把大括号中的内容作为一个对象来解析。
let b = () => ({ name: 'efa', age: 123 })
没有显示原型
箭头函数是没有显式原型的，所以不能作为构造函数，使用new来创建对象；
展开语法
展开语法是一种浅拷贝
const names = ["abc", "cba", "nba"]
const name = "why"
const info = {name: "why", age: 18}
// 1.函数调用时
function foo(x, y, z) {
console.log(x, y, z)
}
// foo.apply(null, names)
foo(...names)
foo(...name)
// 2.构造数组时
const newNames = [...names, ...name]
console.log(newNames)
// 3.构建对象字面量时ES2018(ES9)
const obj = { ...info, address: "广州市", ...names }
console.log(obj)
Set
size：返回Set中元素的个数；
Set常用的方法：
add(value)：添加某个元素，返回Set对象本身；
delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
has(value)：判断set中是否存在某个元素，返回boolean类型；
clear()：清空set中所有的元素，没有返回值；
forEach(callback, [, thisArg])：通过forEach遍历set；
另外Set是支持for of的遍历的。
Set中的元素不可以重复，所有通常用于数组去重。
//数组去重
var arr = [1, 5, 7, 3, 2, 1, 5];
var set = new Set(arr);
//将set转为数组
var arr1 = [...set];
var arr2 = Array.from(set);
weakSet
和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构
和Set的区别：
- WeakSet中只能存放对象类型，不能存放基本数据类型；
- WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC可以对该对象进行回收；
常用方法：
add(value)：添加某个元素，返回WeakSet对象本身；
delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
has(value)：判断WeakSet中是否存在某个元素，返回boolean类型
使用场景
使用较少，没有明确的使用场景
const personSet = new WeakSet()
class Person {
constructor() {
personSet.add(this)
}
running() {
if (!personSet.has(this)) { //this为调用running方法对象
throw new Error("不能通过非构造方法创建出来的对象调用running方法")
}
console.log("running~", this)
}
}
let p = new Person();
p.running()
p.running.call({ name: "why" })
Map
Map用于存储映射关系
和对象存储的区别：
- 事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；
- 某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key；
Map的常用方法
Map常见的属性：size：返回Map中元素的个数；
Map常见的方法：
set(key, value)：在Map中添加key、value，并且返回整个Map对象；
get(key)：根据key获取Map中的value；
has(key)：判断是否包括某一个key，返回Boolean类型；
delete(key)：根据key删除一个键值对，返回Boolean类型；
clear()：清空所有的元素；
遍历方法：
forEach(callback, [, thisArg])：通过forEach遍历Map；
Map也可以通过for of进行遍历
weakMap
weakMap的key只能用对象类型，weakMap不可以遍历，因为key是弱引用类型。
和Map的区别：
区别一：WeakMap的key只能使用对象，不接受其他的类型作为key；
区别二：WeakMap的key对对象想的引用是弱引用，如果没有其他引用引用这个对象，那么GC可以回收该对象；
常用的四个方法：
set(key, value)：在Map中添加key、value，并且返回整个Map对象；
get(key)：根据key获取Map中的value；
has(key)：判断是否包括某一个key，返回Boolean类型；
delete(key)：根据key删除一个键值对，返回Boolean类型；
应用场景
vue响应式
