ES6
声明与表达式
let
作用域在块里面
var
全局
注意 函数有自己的作用域
const
常量
常量的值 是不能被更改的
可以使用const 来做预定义 处理
应用场景
1.私有协议
即时通讯
与硬件通讯
2.预定义数据值
网络接口
解构赋值
定义
解构赋值是对赋值运算符的扩展。
他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。
在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取
数组格式的解构赋值
基本
let [a,b] = [2,3];
let [username,age] = ["小明",2]
可嵌套
let [username,[boy,girl],age] = ["小明",["小猫","小花"],12];
可省略
/*
* 可以省略部分变量名
* */
let [a,,,b] = [1,3,5,6];
console.log(a)
console.log(b)
不完全解构
如果有变量 不需要初始化值 就可以使用不完全解构
let [view = document.createElement("div"),timer] = [];
剩余运算符
var [timer,...views] = [0,[document.createElement("div"),document.createElement("div")]]
console.log(views[0][0]);
字符串
let [a, b, c, d, e] = 'hello';
// a = 'h'
// b = 'e'
// c = 'l'
// d = 'l'
// e = 'o'
对象模型的解构（Object）
基本
let { foo, bar } = { foo: "哈哈哈", bar: 'bbb' };
console.log(foo,bar);
可嵌套
{
let {a:[b,c]} = {a:[22,33]}
console.log(b)
console.log(c)
let {key:[name1,name2]} = {key:["属性1的值","属性2的值"]}
console.log(name1)
console.log(name2)
let {
listener:[
click,
dlclick,
tapstart
],
event:[ce,de,te]
} = {
listener:[
function () {
console.log("click")
},
function () {
console.log("dlclick")
}
],
event:[{name:"点击"},{name:"双击"}]
}
click();
console.log(ce)
/*
* 定义接口文件 http
*
* 主机地址 host:"api.bianmazhe.com"
* 测试环境 evn:true
* api:
* login:"/login"
* register:"/register"
* */
let {http:[host,evn,api]} = {
http:["api.bianmazhe.com",false,{login:"/login",register:"/register"}]
}
console.log(api.login)
let {http:[host1,evn1,[login,register]]} = {
http:["api.bianmazhe.com",false,["/login","/register"]]
}
console.log(login);
}
可省略
let {key:[]} = {key:[2,3]}
let {key:[]} = {key:[2,3],key2:"dfk"}
let {} = {key:[2,3]}
不完全解构
let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'
剩余运算符
let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}
Symbol
用于定义一个独一无二的属性
通过Symbol创建出来的两个属性是不相同的
let n1 = Symbol(2);
let n2 = Symbol(2);
console.log(n1 === n2);
数据类型
string
模板字符串
`
`
允许换行
var container = document.querySelector(".container");
container.innerHTML = `
`;
支持嵌入变量
var item = "标题";
var container = document.querySelector(".container");
container.innerHTML = `
- ${item}
`;
新增方法
includes()：返回布尔值，判断是否找到参数字符串。
startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。
字符串重复
repeat
console.log("Hello,".repeat(2)); // "Hello,Hello,"
字符串补全
padStart
padEnd
console.log("h".padStart(5,"o")); // "ooooh"
console.log("h".padEnd(5,"o")); // "hoooo"
console.log("h".padStart(5)); // " h"
array
创建数组
Array.of()
Array.from()
查找符合的元素
find
var arr = [33,4,2,99];
var v = arr.find(function (item) {
return item<10;
});
console.log(v);
查找符合元素的下标
findIndex()
var index = arr.findIndex(function (item) {
return item < 10;
})
console.log(index);
填充
fill(要填充的值，填充的位置，可选（填充结束的位置）)
返回一个填充好的数组
let arr = Array.of(1, 2, 3, 4);
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]
嵌套数组（多维）转一维数组
flat
var arr5 = [[[[1,4,5]],[55,77]],[3,9]]
//Infinity 无穷数
var arr6 = arr5.flat(Infinity);
console.log(arr6);
合并数组
var arr7 = [3,4,88];
console.log([1,...arr7]);
set
类似数组
set里面的数据 都是唯一的
初始化
new Set()
存取值
存值
add();
数组去重
var arr7 = [77,55,77,99,55];
var set2 = new Set(arr7);
console.log(set2);
map
类似Object
一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
初始化
new Map()
存取之
存
set(key,value)
取
get(key)
长度
size
遍历
for in
for (let key in map){
console.log(map.get(key));
}
for of
for ( let [key,value] of map){
console.log(key,value);
}
forEach
map.forEach(function (item,key) {
console.log(item,key)
})
函数
可以给函数的形参 添加默认值
function f(a=1,b=3) {
}
箭头函数
作用
语法简洁
var fun2 = function () {
console.log("...");
}
var fun2 = ()=>{
console.log("....");
}
fun2();
//传参数 简化写法
var fun3 = a => {
console.log(a);
}
var fun4 = (a,b) => {
console.log(a,b);
}
//函数体比较简单 省略花括号
var sum = (a,b) => a+b;
var sum = function (a,b) {
return a+b;
}
无需在箭头函数中 再去设置this指向
function View() {
this.title = "标题";
var self = this;
this.dom = document.querySelector(".container");
this.dom.onclick = function () {
alert(self.title)
}
this.dom.onclick = ()=> {
alert(this.title)
}
}
new View();
对象
简写
属性
var obj = {uname,uage};
方法
var obj = {
run(){}
}
使用...合并对象
var obj1 = {a:1,b:3}
var obj2 = {...obj1};
is
类方法（静态方法）
var obj3 = {};
var obj4 = {};
var obj5 = obj3;
console.log(Object.is(obj3,obj4));
console.log(Object.is(obj3,obj5));
assign
浅拷贝 是一个静态方法
var tObj = {}
var sObj = {a:1,b:2};
Object.assign(tObj,sObj);
console.log(tObj);
类
class关键字
定义类
/*
* class 关键字 创建类
* */
class Person{}
constructor
构造函数
注意：
1.构造函数 是一个特殊的函数
在实例化对象（new）的时候 就会自动调用这个函数
2.不一定必须实现构造函数->可以省略
如
/*
* class 关键字 创建类
* */
class Person{}
/*
* ES6 构造函数
* */
class Animation{
constructor(...args) {
console.log(args);
}
}
new Animation(1,2);
new Person();
属性
原型属性
实例属性
class ImageView{
//原型属性
path = "";
constructor() {
this.ttt = "实例属性"
}
}
set get 方法
防止类中的set get方法的递归调用
get hname(){
return this.hname;
}
set hname(_name){
console.log(_name);
this.hname = _name;
}
注意 使用set get方法的属性名前 添加_
class Hero {
constructor(_name) {
this.hname = _name;
}
get hname(){
return this._hname;
}
set hname(_name){
console.log(_name);
this._hname = _name;
}
}
静态属性 静态方法
需要使用 static 关键字
class Weapon{
static type = "魔法装";
static att(){
console.log("攻击")
}
}
console.log(Weapon.type);
Weapon.att();
继承
使用extends 实现继承
super
调用父类的构造函数
如
class Student{
constructor() {
console.log("我要学到很多知识");
}
study(){console.log("好好学习")}
}
//extends 关键字 可用于继承
class TangZhi extends Student{
constructor() {
//使用父类的构造函数
super();
console.log("我得学好了 找个合心的工作");
}
}
let haoXueSheng = new TangZhi();
haoXueSheng.study();
模块
把具有相同功能的代码 组织到一起 ->这一块 代码 就可以看成一个模块
ES6
1.引入js 需要添加type属性 属性值是module
2.导出模块 导入模块
导出模块
export
1.
export {obj999，obj777} 可以同时导出多个 对象
2.导出一个模块
export default StringTool;
导入模块
import
1. import {obj999,obj777} from "./StringTool.js" 可以同时导入多个对象
console.log(obj999)
2.导入一个模块
import StringTool from "./StringTool.js";
as 给模块 重命名
export {StringTool as ST}
import {ST} from "./StringTool";
异步编程
Promise
允诺 承诺
完成
then
出现意外
catch
创建
new Promise(function(success,fail){})
new Promise((success,fail)=>{})
async
异步 函数
会得到一个promise对象
await
可以让修饰的部分 等待执行（必须与异步函数配合使用）
如果promise对象有结果的时候 再执行
function fun() {
return new Promise(success=>setTimeout(()=>success(111),1000))
}
async function fun2() {
let a = await fun();
console.log(a);
console.log("fun2")
}
fun2()
如果等待的是promise对象，先等待promise有回应了 并且解析要传递出来的数据 才会继续执行
js实现同步
Generator 函数
定义
一是在 function 后面，函数名之前有个 * ；
就可以定义成 一个生成器类型的函数
函数内部有 yield 表达式。
调用
使用生成器里面的每一个模块
let f = fun();//得到生成器对象
f.next();//可以执行通过yield分成的模块
f.next();
f.next();//如果f.next();done：true已经执行完所有的模块
注意：
不要每一次调用next函数 都是用一个新的生成器对象调用
这样执行的永远都是第一个模块的内容
fun().next();//可以执行通过yield分成的模块
fun().next();
fun().next();//如果f.next();done：true已经执行完所有的模块
next会返回一个对象
value
done
迭代器
核心概念
迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。
迭代器是用于遍历数据结构元素的指针（如数据库中的游标
如
let arr = [1,2,3,45,7,5];
let it = arr[Symbol.iterator]();
console.log(it.next());
代理、映射
代理
帮别人干某些事
Proxy 可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理。它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作
如
//想找代理的人
let xiaoMao = {
username:"小毛",
age:18
}
//帮忙干事的人（做代理的人）
let handler = {
get(target,key){
console.log("收100元");
//...
return target[key];
},
set(target,key,value){
console.log("收500元");
//..
target[key] = value;
}
};
//组织两人关系的地方
let py = new Proxy(xiaoMao,handler);
console.log(py.username);
py.age = 30;
映射 反射 Reflect
Reflect.get(target, name, receiver)