es6 语法简单使用

ES 6学习笔记：

声明变量：

let声明变量不可重复声明

var 可以重复声明变量

块级作用域： 全局，函数，eval

let 的作用域只是在代码块中。 if else while for

var 的作用域是全局作用域

不存在变量提升：

let[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkVTN2Ef-1672538086501)(C:\Users\12926\AppData\Roaming\Typora\typora-user-images\image-20221227103328781.png)]let 不允许在变量声明之前去使用变量 会报错，

var 在变量之前去使用变量，会出现undefined

不影响作用域链

Const 常量 及特点：

1，const 常量一定要赋初始值

2，一般常量使用大写

3，常量的值不能修改

4，块级作用域

5，对于数组和对象里的属性作修改，不算对常量的修改，不会报错

变量解构赋值：

解构赋值：es 6 允许按照一定的模式从数组和对象中提取值，对变量进行赋值

1，数组的解构

const  F4  = ['XIA','LI','JUN','张']
let [xiao,liu ,zhao,song ] = F4;
console.log(xiao);   //XIA
console.log(liu);    //LI
console.log(zhao);   //JUN
console.log(song);   //张

2，对象的解构

const  zhao = {
    name :'夏'，
    age: '19',
    xiaopin : function(){
        conlog.log("xxxxxx")
    }
}

let { name ,age ,xiaopin }  = zhao;
conlog.log(name)    // 夏
conlog.log(age)     // 19
conlog.log(xiaopin)  //上面那个方法

es6 模板字符串

ES6  引入新的声明字符串的方式  [ `` ]  , ''  ,  ""
1,声明  

let str  = `我也是一个字符串`;
console.log(str,typeof str)   //我也是一个字符串  +  String

2,特性
一: 内容中可以直接出现换行符
二: 变量拼接
let a = '夏'；
let b = `${a} 是我心目中最帅的人`；
console.log(b)  //打印: 夏是我心目中最帅的人

es6 的对象简写写法

ES  6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法  
//这样书写也更加的简洁

let name  = '尚硅谷';
let change = function(){
    console.log('尚硅谷白嫖还不错!')
} 
const  school = {
    name,
    change 
    //定义一个方法，可以直接简写为
    improve(){
        console.log("我们是简写之后的方法!!!")
    }
}
console.log(school)  //打印结果为: '尚硅谷' ,  function()

es6 箭头函数

ES6  允许使用[ 箭头函数] (=>)定义函数
//声明一个函数
之前声明:
let  fn = function(){
    
}
使用箭头函数
let fn = (形参1，形参2) => {
    //代码体
    return 形参1+形参2;
}
//调用箭头函数
let result = fn(形参1,形参2)
console.log(result);  //结果为  形参1+形参2

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

//设置window  对象的name  属性
window.name = '尚硅谷';
const school = {
    name: "ATGUIGU"
}
//直接调用俩个函数
getName();       //尚硅谷
getName2();      //尚硅谷

getName.call(school);    //ATGUIGU
getName2.call(school);   //尚硅谷

2，不能作为构造函数实例化对象
let person = (name,age) => {
    this,name = name;
    this,age = age;
}
let me = new Person('xia',30)
console.log(me)   //会报一个 语法错误，person is not  a  constructor

3,不能使用 argument  变量
 let  fn = () =>{
     console.log(argument)  //会报argument  没有被定义
 }
 
4 .箭头函数的简写

1，省略小括号， 当形参有且只有一个的时候
  原:let add = (n) => {   ==>  
        return n + n;
    }
因为只有一个形参  可以简写为: 
     let add = n =>{
         return n + n;
     }                                                   
    console.log(add(9));

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

原:let pow = (n) => {
    return n*n;
 };
console.log(pow(9));

简写为:
let pow = n => n*n;

箭头函数允许给参数赋值初始值

1.形参的一个初始值
function add(a,b,c=10){
    //形参初始值，具有默认值的参数，一般的位置要靠后  （潜规则）
    return a+b+c;
}
let result = add(1,2);
console.log(result);     //  通过给c=10;赋默认值，打印结果为13

2与解构赋值结合
function connect(options,username,password,port){
    console.log(username)
}
connect({
    host: 'localhost',
    username: 'root',
    password:'root',
    port:3306
})

es6 —rest 参数

//es6  引入rest 参数，用于获取函数的实参，用来代替arguments 
//es5  获取实参的方式
function date(){
    console.log(arguments)
}
date('夏','茂');

// es6获取实参的方式  --rest 方式
 function date(...args) {
      console.log(args)   //filter some every map
 }
date('夏','mao')   

//rest 参数必须要放到参数的最后
function date(a,b,...args){
			console.log(a)
			console.log(b)
			console.log(args)
		}
		date(1,2,3,4,5,6)  打印1，2      3，4，5，6  数组

es6 扩展运算符

// [ ... ]  扩展运算符能将 数组转换为逗号分隔的 参数序列
       //声明一个数组  ...
		const tfboys = ['王实际','齐菁菁','高俊']
		//声明一个函数   -->将一个数组变成三个参数
		function chuanwan(){
			console.log(arguments);
		}
		chuanwan(...tfboys);


//应用
//1.数组的合并
		const kuaizi = ['王太利','肖洋'];
		const fenghuang = ['凤凰传奇','玲花'];
		//es5  的合并方法
		console.log(kuaizi.concat(fenghuang));
		//es6  扩展运算符
		const hebin = [...kuaizi,...fenghuang];
		console.log(hebin);
		
		//2.数组的克隆
		const sanzhihua = ['E','G','M'];
		const sanzhicao = [...sanzhihua];
		console.log(sanzhicao);
		
		//3.将伪数组转换成真正的数组
		const divs = document.querySelectorAll('div');
		const arrdivs = [...divs];
		console.log(arrdivs);

es6 之Symbol 的介绍与创建

Symbol 的特点:
1,Symbol  的值是唯一的，用来解决命名冲突问题
2,Symbol  的值不能与其他数据进行运算
3,Symbol  定义的对象属性不能使用 for ... in  循环遍历，但是可以使用
  Reflect.ownKeys 来获取对象的所有键名；
  
  //1，创建symbol
		let s= Symbol();
		console.log(s,typeof s);
		//2，第二种创建symbol 的方法
		let s2 = Symbol('夏天');
		let s3 = Symbol('夏天');
		console.log(s2);
		console.log(s3);
		console.log(s2 === s3);
		
		//3，第三种创建的方法
		let s4 = Symbol.for('冬天');
		console.log(s4);
//USONB  
  u  underfined
  s  string
  o  object
  b  boolen
  
Symbol  的使用:
 
// Symbol 向对象中添加方法
		//  Symbol 表示独一无二 的值，往对象中添加方法和属性
		let game  = {}
		//声明一个对象
		let methods = {
			up: Symbol(),   //表明我当前的方法是独一无二的
			down: Symbol()
		};
		
		game[methods.up] =function(){
			console.log("我可以改变形状");
		}
		game[methods.down] = function(){
			console.log("我可以啊安全的下降");
		}
		console.log(game);
// 第二种添加方法
     let youxi ={
			name: "狼人杀",
			[Symbol('say')]:function(){
				console.log("我可以发芽吗？");
			}
		}
		console.log(youxi);   

Symbol 内置值

1, Symbol.isConcatSpreadable 
2, Symbol.unscopables
3, Symbol.match
4, Symbol.replace
5, Symbol.search
6, Symbol.spilt
7, Symbol.iterator
8, Symbol.toPrimitive
9, Symbol.toStringTag
10,Symbol.species

迭代器

//声明一个数组
		const xiyou = ['唐总','孙悟空','猪八戒','沙僧']
		console.log(xiyou);
		//使用for  of  遍历
		for(let v of xiyou){
			console.log(v); // 唐总,孙悟空,猪八戒,沙僧  键值
		}
		for(let v in xiyou){
			console.log(v);  //0,1,2,3   键名
		
		let iterator = xiyou[Symbol.iterator]();
		console.log(iterator);
		//调用对象的next  方法
		// console.log(iterator.next());
		// console.log(iterator.next());
		// console.log(iterator.next());
		// console.log(iterator.next());
 
            
            
迭代器的应用:
            	
		//迭代器的应用  -->  自定义遍历数据的时候，需要用到迭代器
		const banji = {
			name: '终极一班',
			stus:[
				'xiaoxia',
				'xiaozhang',
				'knight',
				'zhangzhang'
			],
			[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:false}
						}
					}
				};
			}
		}

生成器函数 声明与调用

初体验:
//生成器其实就是一个特殊的函数
			// 异步编程   纯回调函数
			function * gen(){
				console.log("你好");
				//yield  函数代码的分隔符
				yield '小溪是我的朋友';
				console.log("小溪是我的朋友");
				yield '法外狂徒张三';
				console.log("法外狂徒张三");
				yield '就是牛，你怎么说?';
				console.log("就是牛");
			}
			let iterator = gen();
			console.log(iterator);
			console.log(iterator.next());
			console.log(iterator.next());
			console.log(iterator.next());
			
			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());
			console.log(iterator.next('BBB'));
			console.log(iterator.next('CCC'));
			console.log(iterator.next());
			

Promise

promise  是es6 引入异步编程的新解决方案。语法上是promise是一个构造函数，用来封装异步操作并可以获取其成功或者失败的结果
1，Promise 构造函数: Promise(excutor) {},
2，Promise.prototype.then 方法
3，Promise.prototype.catch 方法

三种状态:
等待: (pending) , 已完成(fulfilled) , 已拒绝 (rejected) 
初识Promise :
//实例化Promise  对象
			const p = new Promise(function(resolve,reject){
				setTimeout(function(){
					//
					// let data = '数据库中的用户数据';
					// // 调用resolve方法，promise对象的状态就会变成成功
					// resolve(data);  
					let err = '数据读取失败';
					
					//调用reject  这个promise 的状态就会变成失败
					reject(err);
				},1000);
			});
			//调用Promise 的then  方法
			p.then(function(value){
				//成功
				console.log('我打印成功的数据',value)
			},function(reson){
				console.error('我打印失败的数据',reson)
			})

使用Promise 封装Ajax 请求

const p = new Promise((resolve ,reject) => {
				const xhr = new XMLHttpRequest();
				xhr.open("Get","http://localhost:8083/personTest/getAllTest");
				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(vallue) {
				console.log(vallue);
			},function(reason){
				console.error(reason);
			})
			

Promise – then 方法

<script type="text/javascript">
			//创建 promise对象
			const p = new Promise((resolve,reject) =>{
				setTimeout(()=>{
					// resolve('用户数据');
					reject('读取用户数据失败了!');
				},1000)
			});
			
			//调用then  方法  then  方法的返回结果是promise
			// 对象，对象的状态是由回调函数的执行结果决定的
			
			const result =  p.then(value => {
				console.log(value);
			},reason =>{
				console.warn(reason);
			});		
			console.error(result);

Promise —Catch 方法

      const p = new Promise((resolve,reject)=>{
				setTimeout(()=>{
					//设置P 对象的状态为失败
					reject('我出错了，咋办?');
				},1000)
			});
			
			// p.then(value=>{
			// 	console.log(value);
			// },reason=>{
			// 	console.warn(reason);
			// })
			p.catch(reason => {
				console.warn(reason);
			})

Set集合

            let s = new Set();
			let s2 = new Set(['1','2','3','2'])
			console.warn(s2, typeof s);
			console.error(s2.size);
			s2.add('100');
			console.log(s2);
			
			for (let v of s2){
				console.log(v)
	}

Map集合

es 6提供了Map 数据结构，它类似于对象，也是键值对的集合，但是 “键” 的范围不限于字符串，各种类型的值，包括对象，都可以当作键， Map 也实现了iterator 接口，所有可以使用扩展运算符 【 … 】 和 for … of … 进行遍历，Map 的属性 和方法:

size  返回 Map 的元素个i数

set   增加一个新元素，返回当前的Map 

get   返回键名对象的键值

has   检测当前Map 中是否包含某个元素，返回 一个 boolen 值

clear 清空集合 ，返回 undefined  

class 类

知识点:

class 声明类

constructor  定义构造函数初始化

extends  继承父类

super  调用父类的构造方法

static  定义静态方法和属性

父类方法可以重写

            //es 6  类的声明
			//class
			 class Phone{
				 //构造方法  名字固定
				 constructor(brand,price){
					 this.brand = brand;
					 this.price = price;
				 }
				 //方法
				 call() {
					 console.warn("我乐意打电话!");
				 }
			 }
			 let onePlus = new Phone("iphone",100);
			 console.warn(onePlus.call());
			 console.error(onePlus);

类的静态成员

	       class Person{
				//静态属性属于类而不属于实例化对象
				static name = '张大炮';
				static change(){
					console.warn("可以改变世界");
				}
			}
			let person = new Person();
			 console.log(Person.name)
		     console.log(Person.change());

es6 类继承

 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);
				 this.color = color;
				 this.size = size;
			 }
			 photo(){
				 console.log("拍照");
			 }
		 }
		 const xiaomi = new smartPhone('xiaomi',799,'yellow',6.7);
		 console.log(xiaomi.photo());
.....

对象方法的扩展

	// Objects.is  判断俩个值是否完全相等
			// console.warn(Object.is(120,120));
			// console.log(NaN === NaN);
			// console.log(Object.is(NaN,NaN));
			// Objects.assign  对象的合并
			const config1 = {
				host: 'localhost',
				port: '3306'
			};
			const config2 = {
				host : 'xilijun.com',
				port: '8888'
			}

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来

模块化的好处: 1,防止命名冲突 2，代码复用 3，高维护性

模块功能主要由俩个命令构成: export 和 import

export 命令是用于规定模块的对外接口

.size = size;
}
photo(){
console.log(“拍照”);
}
}
const xiaomi = new smartPhone(‘xiaomi’,799,‘yellow’,6.7);
console.log(xiaomi.photo());
…

### 对象方法的扩展

```javascript
	// Objects.is  判断俩个值是否完全相等
			// console.warn(Object.is(120,120));
			// console.log(NaN === NaN);
			// console.log(Object.is(NaN,NaN));
			// Objects.assign  对象的合并
			const config1 = {
				host: 'localhost',
				port: '3306'
			};
			const config2 = {
				host : 'xilijun.com',
				port: '8888'
			}

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来

模块化的好处: 1,防止命名冲突 2，代码复用 3，高维护性

模块功能主要由俩个命令构成: export 和 import

export 命令是用于规定模块的对外接口

import 命令是用于输入其他模块提供的功能