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)   //我也是一个字符串  +  String2,特性
一: 内容中可以直接出现换行符
二: 变量拼接
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  constructor3,不能使用 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;赋默认值，打印结果为132与解构赋值结合
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，创建symbollet 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  underfineds  stringo  objectb  boolenSymbol  的使用:// 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  类的声明//classclass 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 命令是用于输入其他模块提供的功能