前端ES6学习

• 变量不能重复声明
• 块级作用(全局，函数，eval)
• 不存在变量提升
• 不影响作用域链

• 一定要赋初始值
• 一般常量使用大写
• 常量值不能修改
• 块级作用域
• 对于数组和对象的元素修改，不算对常量修改，不会报错

• 数组的解构let[xiao,liu,zhao,song];
• 对象的解构

const zhao={
 	name:"xiao"
	age:"12"
	setname:function(name){
	this.name=name;
}
};
let{name,age,setname}=zhao;

• 声明字符串

let str=`我是个字符串`;

内容中可以出现换行符

//变量拼接
let a='xiaoming';
let b=`${a}lovexiaohong`;
const school={
	remove(){
	console.log('在大括号中可以写入变量和函数')；
}
}；

• 箭头函数

let fun=(a,b)=>{
 	return a+b;
}

this是静态的this始终指向函数声明时所在作用域下的this值

不能作为构造函数实例化对象
不能使用argunments变量
简写(一个形参)
let a=n=>(){
}
ES6允许给函数形参赋初始值一般位置靠后

• 与解构赋值结合
  ES6引入rest参数
• 扩展运算符

const tyboys=['tang','yang'];
function  fun(){}
fun(...tyboys);

• 数组合并

const shuzu[...xxx,...yyy];

• 数组克隆

const sing=[...shuzu];

• 将伪数组转换为真数组

• 值是唯一的(不能运算)

let s=Symbol();
let s1=Symbol('atguigu');(标志)
let s2=Symbol.for();
let s3=Symbol.for('atguigu');

• 作用
  向对象中添加方法

let methods={
	up:Symbol(),
	down:Symbol(),
	[Symbol('say')]:function(){}
}

//for.....of循环遍历(保存键值)
//for.....in(保存键名)
const  a=[1,11,1,1,1,1,];
for let v of(a){
	console.log(v);
}

• 迭代器实例

    const banji={
	name:"xiao",
	age:"20",
	stus:[
	'xioaming',
	'xiaohong'
    ],
	[Symbol.iterator](){
	        let index=0;
	        let _this=this;
	        return {
	        next:function(){
	        if(index<_this.stus.length){
	        const result={value:_this.stus[index],done:false}
	        index++;
	        return result;
    	    }else{
	        	    return{value:undefined,done:true};
        	    }
            }
        }
    }
}
for(let v of banji){
	console.log(v)
}

function * gen(){
	//console.log('hello');
	yield'asas';
	console.log('asss');
	//yield函数代码分隔符
	yield'aaaaa';
	console.log('adddd');
	}

	let iterator=gen();
	iterator.next();
	iterator.next();
	iterator.next();
	for(let v of gen()){
		console.log(v);
	}

• 生成器函数参数
  next方法可以传入实参

• 实例

function one(){
	setTimeout(()=>{
	console.log(111);
	iterator.next();
},1000)
}
function two(){
	setTimeout(()=>{
	console.log(222);
	iterator.next();
},2000)
}
function three(){
	setTimeout(()=>{
	console.log(333);
	iterator.next();
},3000)
}

function * gen(){
	yield one();
	yield two();
	yield three();
}
let iterator=gen();
iterator.next();

---

• 应用

function getUsers(){
	setTimeout(()=>{
	let data='用户数据';
	iterator.next(data);
},1000)
}//用户数据
function getOrders(){
	setTimeout(()=>{
	let data='订单数据';
	iterator.next(data);
},2000)
}//订单数据
function getGoods(){
	setTimeout(()=>{
	let data='商品数据';
	iterator.next(data);
},3000)
}//商品数据
function * gen(){
	var user=yield getUsers();//接受返回值
	console.log(user);
	yield getOrders();
	yield getGoods();
}
let iterator=gen();
iterator.next();

const p=new Promise(function(resolve,reject){
	setTimeout(()=>{
	//let data='用户数据调用成功'；
	//resolve(data);
	let err='数据读取失败'；
	reject(err);	
},1000)
});

p.then(function(value){
	console.log(value);
},function(reason){
	console.log(reason);
})


var fs=require("fs");

const p=new Promise(function(resolve,reject){
    fs.readFile("C:\\Users\\tangwen\\Desktop\\tangwen.txt",(err,data)=>{
        if(err) reject(err)
        resolve(data)
    })
})

p.then(function(value){
    console.log(value.toString())
},function(reason){
    console.log('读取失败')
})



//Promise封装ajax请求
        const p=new Promise(function(resolve,reject){
        const xhr=new XMLHttpRequest();
        xhr.open("GET","https://api.apiopen.top/getJoke")
        xhr.send();
        xhr.onreadystatechange=function(){
            if(xhr.readyState===4){
                if(xhr.status>=200&&xhr.status<300)
                {
                    resolve(xhr.response);
                }else{
                    reject(xhr.status);
                }
            }
        }
        })
        p.then(function(value){
            console.log(value)
        },function(reason){
            console.log(reason)
        })

const p=new Promise(function(resolve,reject){
    fs.readFile("C:\\Users\\tangwen\\Desktop\\tangwen.txt",(err,data)=>{
        resolve(data)
    })
})

p.then(function(value){
    return new Promise(function(resolve,reject){
        fs.readFile("C:\\Users\\tangwen\\Desktop\\hello.txt",(err,data)=>{
            resolve([value,data])
        })
    })
}).then(function(value){
    return new Promise(function(resolve,reject){
        fs.readFile("C:\\Users\\tangwen\\Desktop\\yangxiao.txt",(err,data)=>{
            value.push(data)
            resolve(value)
        })
    })
}).then(function(value){
    console.log(value.join('\n'))
})


Promise的catch方法
const p=new Promise((resolve,reject)=>{})
p.catch(function(reason){})

let s=new Set();
let s2=new Set([‘1’,‘2’,‘3’]);
.add(‘4’)
.delete(‘1’)
.has(‘1’)
.clear()

let m=new map();
m.set('name','atguigu');
let key={
names:'ATGUIGU'
}
m.set(key,['x','x','x'])
m.delete('name')
m.clear()
m.get(key)

class Phone{
construtor(a,b){
this.a=a;
this.b=b;
}
call(){
console.log('我可以打电话了');
}
}

class extends SmartPhone{
construtor(a,b,c,d){
super(a,b)
this.c=c
this.d=d
}

//重写父类方法
call(){
console.log('xxxxxxxx')
}
}

object.is判断两个值是否完全相等

object.assign对象合并

object.setPrototypeOf设置原型对象

export和import
//分别暴露
export let x=‘x’;
//统一暴露
export{x,fn};
//默认暴露
export default{
x:‘atguigu’,
change:function(){}
}
引入模块导入方式
通用
import * as m from “./xxx/xxx/xxx.js”
解构赋值形式
import {x,fn} from"./xxx/xxx/xxx.js";
//解决重名问题
import{x as y,fn} from"./xxx/xxx/xxx.js";
import{default as m}from “./xxx/xxx/xxx.js”;
//简便形式(默认暴露)
import m from “./xxx/xxx/xxx.js”;
//模块babel工具
//安装工具
npm i babel-cli babel-preset-env browserify -D
//解析代码文件
npx babel src/js -d dist/js

"use strict";

var _m = require("./m.js");

var m = _interopRequireWildcard(_m);

var _m2 = require("./m1.js");

var m1 = _interopRequireWildcard(_m2);

var _m3 = require("./m2.js");

var m2 = _interopRequireWildcard(_m3);

var _jquery = require("jquery");

var _jquery2 = _interopRequireDefault(_jquery);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

console.log(m);
console.log(m1);
console.log(m2);

(0, _jquery2.default)('body').css('background', 'pink');

//打包
npx browserify dist/js/app.js -o dist/budle.js

ES8@TOC
async和await
async函数返回值为Promise对象
await放在async函数中

//分组捕获
		// let str='<a href="http://www.atguigu.com">尚硅谷</a>'
        // let reg=/<a href="(.*)">(.*)<\/a>/
        // const result=reg.exec(str)
        // console.log(result)
        let str='<a href="http://www.atguigu.com">尚硅谷</a>'
        let reg=/<a href="(?<url>.*)">(?<text>.*)<\/a>/
        const result=reg.exec(str)
        console.log(result.groups.url,result.groups.text)

		let str='json5201314汉化555哈哈哈哈';
        //正向断言
        const reg=/\d+(?=哈)/
        const result=reg.exec(str)
        console.log(result)
        //反向断言
        const reg1=/(?<=化)\d+/
        const result1=reg1.exec(str)
        console.log(result1)

• trimStart清除字符串左边空白
• trimEnd清除尾部空白

• flat将多维数组转换为低位数组

• flat()参数为深度默认为1

• class私有属性
  #name
  #weight

?.
function main(config){
const dbHost=config?.db?.host;
console.log(dbHost);
}
main({db:{
host:‘127.0.0.1’,
username:‘root’
}})

let n=521n;
let n