ES6

ES6

let

//let
//1.变量不能重复声明
//2.块级作用域
//3.不存在变量提升
//4.不影响作用作用链效果

const

//const
//1.一定要赋值
//2.常量的值不能修改
//3.块级作用域
//4.对于数组和对象的元素修改，不算对常量的修改，不会报错

解构赋值

//ES6允许按照一定模式从数组和对象中提取，对变量进行复制
//这被称为解构赋值
//1.数组解构
const F4 = ['苹果', '香蕉', '梨', '菠萝'];
let [1, 2, 3, 4] = F4;
console.log(1) //苹果
console.log(2) //香蕉
console.log(3) //梨
console.log(4) //菠萝

//2.对象的解构
const zhao = {
	name: '赵本山',
	age: '不详',
	xiaopin: function() {
		console.log('我可以演小品');
	}
};
let {name, age, xiaopin} = zhao;
console.log(name); //赵本山
console.log(age); //不详
console.log(xiaopin); // 我可以演小品
xiaopin();

//在外界调用xiaopin时，需要zhao.xiaopin()
//现在直接向下面即可
let {xiaopin} = zhao;
xiaopin();

模板字符串

//1.声明
let str = `我也是字符串`;
console.log(str, typeof str)//String

//2.内容中可以直接出现换行符
let str = `<ul><li>刘亦菲</li></ul>`;

//3.变量拼接
let lovest = '刘亦菲';
let out = `${lovest}是我心中女神`;//刘亦菲是我心中女神

简化对象写法

//ES6允许在大括号内里面，直接写入变量和函数，作为对象的属性和方法
let name = '刘亚亚';
let change = function() {
	console.log('我们可以改变你')
}

const school = {
	name, // name: name
	change, // change: change
	improve() {
		console.log('我们可以')
	}
	//improve: function() {
		console.log('我们可以')
	}
}

箭头函数

let fn = () => {} // let fn = function() {}

//1.this是静态的，this始终指向函数声明时所在作用域下
function getname() {
	console.log(this.name);
}
let getname2 = () => {
	console.log(this.name)
}

window.name = '刘亦菲';
const school = {
	name: '刘亚亚'
}

//直接调用
getname() //刘亦菲
getname2() //刘亦菲

//call 方法调用， 可以改变this指向
getname.call(school);//刘亚亚
getname2.call(school);//刘亦菲

//3.不能作为构造实例化对象
let person = (name, age) => {
	this.name = name;
	this.age = age;
}
let me = new person('xiao', 30);
console.log(me)
//报错

//3.不能使用arguments
let fn = () => {
	console.log(arguments)
}
fn(1, 2, 3); //报错，未定义

//4.箭头函数简写
//（1）省略小括号，当形参有且只有一个的时候
let add = n => {
	return n + n;
}
//let add = (n) => {
//	return n + n;
}
console.log(add(9)) //18

//（2）省略花括号，当代码体只有一条语句时，此时的return必须省略
//而且语句的执行结果就是函数的返回值

```javascript
let pow = (n) => n*n;
pow(9);//81
// let pow = (n) => {
//	return n*n;
//}
//pow(9);//81

setTimeout中this的指向问题

//setTimeout()中this指向的是windows
var num = 0;
function Obj (){
    this.num = 1,
    this.getNum = function(){
        console.log(this.num);
    },
    this.getNumLater = function(){
        setTimeout(() => {
            console.log(this.num);
        }, 1000)    //箭头函数中的this总是指向外层调用者，也就是Obj
    }
}
var obj = new Obj; 
obj.getNum();//1　　打印的是obj.num，值为1
obj.getNumLater()//1　　打印的是obj.num，值为1

//解决方法
//1.将当前this存为一个变量that
var num = 0;
function Obj (){
    var that = this;    //将this存为一个变量，此时的this指向obj
    this.num = 1,
    this.getNum = function(){
        console.log(this.num);
    },
    this.getNumLater = function(){
        setTimeout(function(){
            console.log(that.num);    //利用闭包访问that，that是一个指向obj的指针
        }, 1000)
    }
}
var obj = new Obj; 
obj.getNum();//1　　打印的是obj.num，值为1
obj.getNumLater()//1　　打印的是obj.num，值为1


//2利用箭头函数
var num = 0;
function Obj (){
    this.num = 1,
    this.getNum = function(){
        console.log(this.num);
    },
    this.getNumLater = function(){
        setTimeout(() => {
            console.log(this.num);
        }, 1000)    //箭头函数中的this总是指向外层调用者，也就是Obj
    }
}
var obj = new Obj; 
obj.getNum();//1　　打印的是obj.num，值为1
obj.getNumLater()//1　　打印的是obj.num，值为1

允许函数形参赋初始值

//1.形参初始值 具有默认值得参数， 一般位置要靠后
function add(a, b, c=10) {
	return a + b + c;
}
let result = add(1, 2)//13

//2.与解构赋值结合
function connect(host = '127.0.0.1', username, password, port) {
	console.log(host)//atguigu.com
	console.log(username)//root
	console.log(password)//root
	console.log(port)//3306 端口号
}
connect ({
	host: 'atguigu.com',
	username: 'root',
	password: 'root',
	port: 3306
})

rest参数使用

//ES5获取实参方式
function date() {
	console.log(arguments);//返回值是一个对象的形式
}
date('白纸'， '阿娇', '四惠')


//ES6的获取形参方式rest
function date(...args) {
	console.log(args);//返回值是一个数组
}
date('白纸'， '阿娇', '四惠')


//rest参数必须要放到参数最后
let fn = (a, b, args) => {
	console.log(a)
	console.log(b)
	console.log(args)
}
fn(1, 2, 3, 4, 5, 6)

扩展运算符

... 扩展运算符能将数组转换为逗号分隔的参数序列
const boy = ['刘', '黄', '李'];
// => '刘', '黄', '李',

let chunwan = () => {
	console.log(arguments)
}
chunwan(...boy);//chunwan('刘', '黄', '李')

//应用
//1.数组合并
const a = [1,2,3];
const b = [4,5,6];
const c = [...a, ...b];//c=[1,2,3,4,5,6]

//2.数组克隆
const a = [1,2]
const b = [...a]//b=[1,2]

//3.将伪数组转换为真数组
<div></div>
<div></div>
<div></div>
const divs = document.querySelectorAll('div')
const divArr = [...divs]//将伪数组divs转换为真数组

Symbol

//Symbol函数对象
//创建Symbol （函数）
let s = Symbol();
let s2 = Symbol('尚硅谷');
let s3 = Symbol('尚硅谷');
console.log(s2===s3)//false

//Symbol.for的创建 (对象)
let s4 = Symbol.for('尚硅谷');
let s5 = Symbol.for('尚硅谷');
console.log(s4 ===s5) //true

//不能与其他数据进行运算

//Symbol 创建对象属性
//向对象中添加方法 up down
let game = {}
let methods = {
	up: Symbol(),
	down: Symbol()
};
game[methods.up] = function() {
	console.log(1)
}
game[methods.up] = function() {
	console.log(2)
}
console.log(game)

//----------------------
let youxi = {
	name: '狼人杀',
	[Symbol('say')]: function() {
		console.log(1)
	},
	[Symbol('zibao')]: function() {
		console.log(2)
	}
}
console.log(youxi)

迭代器

const xiyou = ['唐生', '悟空', '猪八戒', '杀神']
//使用for..of 遍历数组
for(let v of xiyou) {
	console.log(v);
}
let iterator = xiyou[Symbol.iterator]();

//调用对象next()方法
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())

/**
迭代器工作原理
1.创建一个指针对象，指向当前数据结构的起始位置
2.第一次调用对象的next方法，指针自动指向数据结构的第一个成员
3.接下来不断调用next方法，指针一直往后移动，直到指向最后一个成员
4.每调用next方法返回一个包含value和done属性的对象
**/

//迭代器自定义遍历对象
//声明一个对象
const banji = {
	name: '终极一班',
	stus: [
		'xiaoming',
		'xiaoming',
		'xiaotian',
		'lihua'
	],
	[Symbol.iterator]() {
		//索引变量
		let index = 0;
		//this指向问题
		let _this = this;
		//返回一个对象
		return {
			//对象中带有next方法以及value,done的属性值
			next: function() {
			//done的作用于判断遍历是否完成，完成是true
				if(index < _this.stus.length) {
					const result = {value: _this.stus[index], done: false}
					return result
				}else {
					return {value: undefind, done: true}
				}
			}
		}
	}
}

生成器

yield语句没有返回值或者说返回值为undefined，但如果next()方法带有参数，则这个参数会被当做上一条yield语句的返回值。

//生成器就是一个特殊的函数
//yield 函数代码的分隔符 3个分隔符产生4段
function * gen() {
	console.log(1);
	yield '一';
	console.log(2);
	yield '二';
	console.log(3);
	yield '三';
	console.log(4);
}
let iterator = gen();
iterator.next();//1
iterator.next();//2
iterator.next();//3
iterator.next();//4

for(let v of gen()) {
	console.log(v)//一二三
}

//生成器参数
function * gen(arg) {
	console.log(arg);
	let one = yield 111;
	console.log(one);
	let two = yield 222;
	console.log(two);
	let three = yield 333;
	console.log(three)
}

//执行获取迭代器对象
let iterator = gen('AAA')
console.log(iterator.next());
//next方法传入实参
console.log(iterator.next('BBB'))//第一个整体语句返回结构
console.log(iterator.next('CCC'))//第二个整体语句返回结构
console.log(iterator.next('DDD'))//第三个整体语句返回结构
//yield语句没有返回值或者说返回值为undefined，但如果next()方法带有参数，则这个参数会被当做上一条yield语句的返回值。


//生成器函数实例1
function a() {
	setTimeout(() => {
		console.log(111);
		iterator.next();
	})
}
function b() {
	setTimeout(() => {
		console.log(222);
		iterator.next();
	})
}
function c() {
	setTimeout(() => {
		console.log(333);
		iterator.next();
	})
}
function d() {
	setTimeout(() => {
		console.log(444);
		iterator.next();
	})
}

//建立生成器
function * fn() {
	yield a();
	yield b();
	yield c();
	yield d();
}

let iterator = gen();
iterator.next();


//实例2
function getusers() {
    setTimeout(() => {
        let data = '用户数据';
        iterator.next(data)
    }, 1000)
}
function getorders() {
    setTimeout(() => {
        let data = '订单数据';
        iterator.next(data)
    }, 1000)
}
function getgoods() {
    setTimeout(() => {
        let data = '商业数据';
        iterator.next(data)
    }, 1000)
}

//建立一个生成器
function* gen() {
    let user = yield getusers();
    console.log(user);
    let orders = yield getorders();
    console.log(orders)
    let goods = yield getgoods();
    console.log(goods);
}

//调用一个生成器
let iterator = gen();
// 调用gen()函数中的next方法
iterator.next();

promise

const p = new Promise(function(resolve, reject) {
	setTimeout(function() {
		let data = '数据库中的用户数据'
		//成功调用resolve
		resolve(data);
		let err = '数据库读取失败';
		reject(err);
	}, 1000)
});
//then方法 value 为正确返回，reason为错误返回
p.then(function(value) {
	console.log(value);
}, function(reason) {
	console.error(reason)
})

//用promise进行封装
const p = new Promise(function(resolve, reject) {
	fs.readFile('./a.txt', (err,data) => {
		if(err) reject(err);
		resolve(data);
	})
})

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

//catch方法
const p = new Promise((resolve, reject) => {
	setTimeout(() => {
		reject('出错啦')
	}, 1000)
})
//p.then((value) => {},(reason) => {
//	console.error(reason)
//});
p.catch(function(reason) {
	console.warn(reason);
})


//then方法

Set

//声明set(对象)
les s = new Set();
let s2 = new Set([1, 2, 3, 4,4]);//{1,2,3,4}去重复

//元素个数
console.log(s2.size);//4
//添加新的元素
s2.add(5);//{1,2,3,4,5}
//删除新元素
s2.delete(5) //{1,2,3,4}
//检测
console.log(s2.has(1))//true
console.log(s2.has(5))//false
//清空
s2.clear()

//遍历
for(let v of s2) {
	console.log(v)
}

//Set 实践
let arr = [1,2,3,4,5,4,3,2,1]
//1.数组去重
let result = [...new Set(arr)];
console.log(result);
//2.交集
let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let arr2 = [4, 5, 6, 5, 6];
//has()里面只能带数组，不能带对象集合
//new Set()返回的是一个对象集合
let result = [...new Set(arr)].filter(item => {
    let s2 = new Set(arr2);
    console.log(typeof s2);
    if (s2.has(item)) {
        return true;
    } else {
        return false
    }
})
console.log(result);

//3.并集
let union = [...new Set([...arr, ...arr2])];
console.log(union);//[1,2,3,4,5,6]

//差集
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
console.log(diff);

map

let m = new Map()

//添加元素
m.set('name', '刘亚亚');
m.set('change', function() {
	console.log('很帅')
});
let key = {
	school: 'abcd'
};
m.set(key, ['liu', 'li', 'huang'])

//删除
m.delete('name');

//获取
console.log(m.get('change'))

//清空
m.clear()

//遍历
for(let v of m) {
	console.log(v)
}

（补充）js原型以及原型链

this指向问题补充

// objage中的this指向的是windows的age
        // f里面的this指向的是obj
        var name = 'liu', age = 17;
        var obj = {
            name: 'li',
            objage: this.age,
            f: function () {
                console.log(this.name + this.age)
            }
        }
        console.log(obj.objage);
        obj.f();

函数call()

var name = 'liu', age = 17;
        var obj = {
            name: 'li',
            objage: this.age,
            f: function () {
                console.log(this.name + this.age)
            }
        }
var db ={
	name: 'li',
	age: 16
}
console.log(obj.f.call(db)) //li 15
//call用来重定义this这个对象


//call传参情况下
var name = 'liu', age = 17;
        var obj = {
            name: 'li',
            objage: this.age,
            f: function (a, b) {
                console.log(this.name + this.age + a + b)
            }
        }
var db ={
	name: 'li',
	age: 16
}
console.log(obj.f.call(db, '王', '打枪')) //li 15 王 打枪

class

//类声明
//手机
        function Phone(brand, price) {
            this.brand = brand;
            this.price = price
        }

        //添加方法
        Phone.prototype.call = function () {
            console.log('可以打电话');
        }

        //实例化对象
        //new Phone() 调用构造函数
        let Huawei = new Phone('华为', 5999)

        console.log(Huawei)

        //class
        class Shouji {
            //构造方法 名字不能修改
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }

            //方法必须使用该语法，不能使用ES5的对象完整形式
            call() {
                console.log('可以打电话');
            }
        }

        let oneplus = new Shouji('1+', 1999)
        console.log(oneplus);


//静态成员
// Phone是一个构造函数(也是一个特殊对象)
        function Phone() { }
        //name 和change这两个属性是属于Phone的，不属于实例对象，这两个属性即为静态成员
        Phone.name = '手机';
        Phone.change = function () {
            console.log('我很帅');
        }
        Phone.prototype.call = function () {
            console.log('我可以和实例对象相通');
        }
        // nokia是一个实例对象
        let nokia = new Phone()
        console.log(nokia.name);//undefined,因为实例对象和构造函数不会相通
        console.log(nokia.call); //实例对象与构造函数的原型（prototype）相通



        class Phone {
            //静态属性
            // 加了static的属性即变为静态属性，不能用实例对像进行调用
            static name = '手机';
            static change() {
                console.log('我可以改变世界');
            }
            age = 18;
        }

        let nokia = new Phone()
        console.log(nokia.name);
        console.log(Phone.name);
        console.log(nokia.age);



//对象继承


 //手机
        function Phone(brand, price) {
            this.brand = brand;
            this.price = price;
        }

        Phone.prototype.call = function () {
            console.log('我可以打电话')
        }

        function SmartPhone(brand, price, color, size) {
            Phone.call(this, brand, price);//调用了父类的构造方法
            this.color = color;
            this.size = size;
        }

        //设置子级构造函数原型
        SmartPhone.prototype = new Phone();

        //声明子类的方法
        SmartPhone.prototype.photo = function () {
            console.log('我可以拍照');
        }
        SmartPhone.prototype.playGame = function () {
            console.log('我可以玩游戏')
        }
        const chuizi = new SmartPhone('锤子', 2499, 'heise', '5.5inch')
        console.log(chuizi);


//类继承
class Phone {
            //构造方法
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }

            //父类的成员属性
            call() {
                console.log('我可以打电话')
            }
        }

        class SmartPhone extends Phone {
            //构造方法
            constructor(brand, price, color, size) {
                super(brand, price);//Phone.call(this, brand, price)
                this.color = color;
                this.size = size;
            }

            photo() {
                console.log('拍照')
            }
            playgame() {
                console.log('玩游戏')
            }
        }
        const xiaomi = new SmartPhone('小米', 799, '黑色', '4.7inch')
        console.log(xiaomi);


//set 和 get
class Phone {
	get price() {
		console.log('价格属性被读取了')
		return 'iloveyou'
	}
	set price(newVal) {
		console.log('价格被修改了')
	}
}

//实例化对象

let s = new Phone();

console.log(s.price)//价格属性被读取了  iloveyou
s.price = 'free'//价格被修改了

数值扩展

//Number.EPSION是Javascript表示的最小精度
function equal(a,b) {
	if(Math.abs(a-b) < Number.ESPILON) {
		return true
	}else {
		return false
	}
}
console.log(equal(0.1+0.2, 0.3))

//二进制、八进制

//Number.isFinite 检测一个数值是不是有限数
console.log(Number.isFinite(100))//true

//Number.isNaN 检测一个数值是否为NaN
console.log(Number.isNaN(123))

//Number.parseInt Number.parseFloat 字符串转化为整数

//Number.isInteger 判断一个数是否为整数

//Math.trunc 将小数部分抹掉

//Math.sign 判断一个数到底为正数1 负数-1 0（0）

//对象方法扩展
//1.Object.is 判断两个值是否完全相等
console.log(Object.is(120, 120))

//2.Object.assign 对象合并
const a = {
	name: 'liu',
	age: 18,
	password: '123456'
}
const b = {
	name: 'li',
	age: 19
}
//后面的会覆盖掉前面重名的属性
console.log(Object.assign(a,b))

//Object.setPrototype 设置原型对象

模块化导入与导出

export
import

ES7

includes

const a =[1,2,3,,4];
//includes判断是否在数组里面，返回false/true

console.log(a.includes(1))//true
console.log(a.includes(5))//false

ES8

async

//async 函数
async function fn() {
	return 'liu' //promise value: liu
	//返回的结果不是一个promise类型对象，返回的结果就是成功的promise对象
	//返回一个promise对象
	return new Promise((resolve, reject) => {
		resolve('成功的数据')
	})
	//则fn返回的也是一个成功的promise对象
	const result = fn()
	//调用then方法
	
	//当promise正确，会调用value,否则调用reason
	result.then(value => {
		console.log(value);
	}, reason => {
		console.log.warn(reason)
	})
}

await

const p = new Promise((resolve, reject) => {
	resolve('用户数据')
})

//await 要放在async函数中
//await结果是promise正确里面的值
async function main() {
	let result = await p;
	//
	consolet.log(result)
}
main();//用户数据

//失败
const p = new Promise((resolve, reject) => {
	reject('失败啦')
})

//await 要放在async函数中
//await 失败用try catch

async function main() {
	try{
		let result = await p;
		consolet.log(result)
	} catch(e) {
		console.log(e)//失败啦
	}
	
}
main();//用户数据