为什么学习es6？
- es5先天性不足
- vue react框架都是用es6，作者最开始以为自己看不懂vue，后来发现其实是看不懂es6语法 /(ㄒoㄒ)/~~
- 暂时大部分公司都是用es6
ES6是js语言的标准，目标是可以编写复杂的大型应用程序，成为企业级开发语言
babel：被称为下一代的JS编译器，可以把es6变成es5
ES6新特性
let 和 const 命令
let 和 const都是和var一样来声明变量
let：
//这样写会把a变量提升到最上面，但是不赋值，所以会打印undefined
console.log(a);
var a = 2;
//这样写会报错，因为let不会提升变量
console.log(b);
let b = 10;
//let是一个块级作用域
console.log(c1) //不报错
console.log(c2) //报错
if(true){
var c1 = 1;
let c2 = 1;
}
// let 不能重复声明 ， var就可以
let d = 1;
let d = 2; //报错
const:除了let的三个限制之外，还有着一旦声明无法改变的特性，相当于声明常量
es6的模板字符串
在以前，想拼接一个字符串就要这样
<div class="box">
</div>
<script>
const oBox = document.querySelector('.box');
let id = 1,
name = "小帅";
oBox.innerHTML = "<ul><li><p id="+id+">"+name+"</p></li></ul>"
</script>
es6可以快速的添加模板字符串
<script>
const oBox = document.querySelector('.box');
let id = 1,
name = "小帅";
let htmlStr = `<ul>
<li>
<p id='${
id}'>${
name}</p>
</li>
</ul>`;
oBox.innerHTML = htmlStr;
</script>
增强的函数
赋默认值的操作
//es5
function add(a,b) {
a = a || 10;
b = b || 20;
return a+b;
}
//es6
functon add(a = 10 , b = 20){
return a+b ;
}
默认表达式也可以是一个函数
function getVal(val){
return val+5;
}
//默认值可以直接为表达式
function add(a,b = getVal(5)){
}
剩余参数
let book = {
title:"aa教程",
author:'zs',
year:2023
}
//eas5 写法
function pick5(obj) {
let result = Object.create(null);
for(let i = 1; i < arguments.length ; i++){
result[arguments[i]] = obj[arguments[i]];
}
return result
}
//es6 剩余参数的写法 由三个点和一个紧跟着的具名参数指定
function pick6(obj,...keys) {
let result = Object.create(null);
for(let i = 0 ; i < keys.length ; i++){
result[keys[i]] = obj[keys[i]];
}
return result;
}
let bookData5 = pick5(book,'author','year');
let bookData6 = pick6(book,'author','year');
console.log(bookData5);
console.log(bookData6);
扩展运算符
//剩余运算符，把多个独立的合到一个数组中
//扩展运算符：将一个数组分割，并且将各个项作为分离的参数传给函数
const arr = [10,20,30,50,60,100];
console.log(Math,max.apply(null,arr)); //es5写法
console.log(Math.max(...arr)); //扩展运算符写法
箭头函数
//使用 => 来定义
// function(){}等于 ()=>{}
let add = function(a,b) {
return a+b;
}
//es6写法
let add6 = (a,b)=>{
return a+b;
}
//一个参数
let add1 = val => {
return val+5;
}
//再简便就是
let add2 = val => (val+5);
//函数嵌套
let fn = (() => {
return () => {
console.log('hello world');
}
})();
fn();
//箭头函数的this绑定
let PageHandle5 = {
id:123,
init:function (){
document.addEventListener('click',function(event) {
this.doSomethings(event,type);
}.bind(this),false)
},
doSomethings:function(type){
console.log(`事件类型:${
type},当前id:${
this.id}`);
}
}
PageHandle5.init();
//es6
let PageHandle6 = {
id:123,
init:function (){
document.addEventListener('click',(event) => {
this.doSomethings(event,type);
},false)
},
doSomethings:function(type){
console.log(`事件类型:${
type},当前id:${
this.id}`);
}
}
PageHandle6.init();
注意
1. 箭头函数内部没有arguments
2. 箭头函数不能使用new关键字来实例化对象
解构赋值
解构赋值是对赋值运算符的一种扩展
他针对数组和对象来进行操作
优点：代码书写简洁
let node = {
type : "c",
name : "zs"
}
//es5
let type = node.type;
let name = node.name;
//es6 - 完全解构
let {
type,name} = node;
//再如 - 不完全解构
let obj = {
a:{
name:'张三'
},
b:[],
c:'helloWorld'
}
let {
a} = obj
//可以使用剩余运算符
let {
a,...res} = obj;
//也可以对数组进行解构，参数名随便取
扩展的字符串，对象，数组功能
扩展的对象的功能：
- es6直接写入变量和函数，作为对象的属性和方法
const name = 'zs',age = 20;
const person = {
name, //等价于name:name
age
sayName(){
console.log(this.name);
}
}
//可以出来给对象添加值,用[]来拼接名字
const obj = {
};
obj.isShow = true;
const name = 'z';
obj[name + 's'] = 21;
console.log(obj);
is() ===
//比较两个值是否严格相等
console.log(NaN === NaN) //false,特殊
//is()是严格比较，啥都相同
Object.is(NaN,NaN);
assign()
//对象的合并
//Object,assign(target,obj1,obj2,....)
let target = {
name:'zs'
}
target = Obj.assign(target,{
a:1},{
b:2});
Symbol
Symbol是es6提供的一种新的原始数据类型
他表示是独一无二的值
const name = Symbol('name');
const name2 = Symbol('name');
console.log(name === name2) //false
他最大的用途：用来定义对象的私有变量
let s1 = Symbol('s1');
console.log(s1); //Symbol('s1')
let obj = {
};
obj[s1] = 'zs';
//或者这么直接复制
let obj2 = {
[s1]:'zs'
}
//如公用Symbol定义对象中的变量，取值时一定用[变量名]
console.log(obj[s1]);
//通过反射得到Symbol声明的属性名 (作为对象的key)
const syms = Object.getOwnPropertySymbols(ibj);
console.log(syms[0]);
let syms1 = Reflect.ownKeys(obj);
Map和Set
Set：无重复值的有序列表
let set = new Set();
//添加元素 ,任意类型
set.add(2)；
// 删除元素
set.delete(2);
set.has(2); //判断有无
set.size; //大小
//将set转换成数组
let set2 = new Set([1,2,3,4,5,6,7,8]);
let arr = [...set2]; // 通过扩展运算符来进行操作
//set中对象的引用无法被释放
let set3 = new Set(),obj = {
};
set.add(obj);
obj = null; //释放资源 ， 这里无法释放
//解决方法- 使用WeakSet
let set4 = new WeakSet(),obj2 = {
}
set.add(obj2);
obj = null; //这里可以直接释放，set4中的obj2没了
WeakSet
1. 不能传入非对象类型的参数
2. 不可迭代
3. 没有forEach()
4. 没有size
Map:是键值对类型的有序列表，键和值时任意类型，Set就是键等于值的Map
let map = new Map();
map.set('key','value');
//或者这样创建
let map2 = new Map(['key1','value1'],['key2','value2']);
//forEach遍历
map.forEach((val,key) =>{
})