ES6基础

1. let

新加的声明变量关键字，

1. let声明旨在所处块级有效，而var不具有块级作用域特性

if(true) {
let a = 10;
}
console.log(a) // 报错，a未被声明

2. 不存在变量提升，需要先定义后使用，而var存在变量提升
3. 无法声明之前已经声明的变量,防止循环变量变成全局变量

2. const声明常量

特点

1. 具有块级作用域
2. 声明变量时必须赋值,且赋值后无法更改
3. 如果是复杂数据类型，不能更改地址值

3. 解构赋值

将数组或者对象按照对应位置,对变量赋值

1. 数组解构

let [a,b,c] = [1,2,3]

2. 对象解构

 let person = { name: 'zhangsan', age: 20 }; 
 let { name, age } = person;

注意

1. 解构失败时,变量值为undefined,

2. 解构赋值也可以嵌套 {a,[b],c} = {1,[2],3}

4. 箭头函数=>

() =>{} 

1. ()传参所需的括号,多个或者无参数不能省,一个可以

2. 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

function sum(n1,n2){
	return a1+a2;
}
//es6
const sum = (a1,a2) => n1+n2;

3. 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

const obj = { name: '张三'} 
 function fn () { 
     console.log(this);//this 指向 是obj对象
     return () => { 
         console.log(this);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象
     } 
 } 
 const resFn = fn.call(obj); 
 resFn();

4. 箭头函数没有argument，同时也无法使用new关键字生成

5. 新数据类型

新数据类型 Symbol 表示独一无二的值

const name = Symbol(‘name’)

const name2 = Symbol(‘name’)

name !=name2 内存地址不同 Symbol变量需要[]调用，无法直接遍历，需使用object方法，或者使用反射

6. 剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组，

function sum(a1,...ar){
	console.log(a1);//1
	console.log(ar);//[2,3,4]
}
sum(1,2,3,4);

直接将argument转化为数组形式,经常于解构搭配使用

7. 新增数据解构

Map据结构

键值对有序列表，键值对是任意对象

//实例方法
set（key,value）
get(key)

let m = new Map([
	['a',1],
	['b',2]
])

set数据结构

成员唯一的类似数组的数据结构

//实例方法
add()
delete()
has()
clear()

8. Array扩展

1. 扩展运算符可以将数组转为逗号隔开的参数序列

   可用于合并数组,或者分离数组,将伪数组转化为数组

   let a = [1,2,3];
   console.log(..a) //1,2,3
   
   //合并
   let a1 = [1,2,3];
   let a2 = [4,5,6];
   let a3 = [...a1,...a2]
   或者
   a1.push(...a2);
   
   //转化
   let lis = $('li')
   lis = [...lis]
   

2. 构造数组方法 Array.from()

   将伪数组直接俄转化为数组对象

   //定义一个集合
   let arrayLike = {
       '0': 'a',
       '1': 'b',
       '2': 'c',
       length: 3
   }; 
   //转成数组
   let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
   

   方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

    let arrayLike = { 
        "0": 1,
        "1": 2,
        "length": 2
    }
    let newAry = Array.from(arrayLike, item => item *2)//[2,4]
   //如果是对象，那么属性需要写对应的索引
   

   实例方法find()

   找出第一个符合条件的数组成员

   实例方法findindex()

   找出第一个符合条件的元素索引

   实例方法includes()

   判断是否存在给定值,返回布尔值

9. String扩展

1. 模板字符串

   使用反引号创建字符串

   let a = `张三`;
   

   特点

   1. 可以换行书写字符串内容

   2. 可以解析变量

   3. 也可以调用函数

      `<div>
           <span>${result.name}</span>
           <span>${result.age()}</span>
           <span>${result.sex}</span>
       </div> `
      

2. 实例方法：startsWith() 和 endsWith()

   • startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
   • endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值

3. 实例方法：repeat()

   repeat方法表示将原字符串重复n次，返回一个新字符串

10. generator函数

在function后面加*号 ，yield阻塞函数执行,next()继续执行yield后面代码，参数是对yield前数据赋值

function* sum (){
	let a = yield 10;
}
sum().next();//执行yield 后代码返回值10
sum().next(100);//为a赋值

11. promise（承诺）

相当于一个容器，保证未来结束的事件的结果

特点

1.保证对象状态不受外界影响，处理异步操作结果三个状态 pending（执行中)resolved(成功)，rejected（失败）

2. 一旦状态改变，就不会继续改变，任何情况都是以上三个结果

var p = new promise(function (resolved,rejected){
	let a = 10;
	//let a = 11
	if(a==10)
	{
	resolved(a);
	}
	else
	rejected(a)
})

p.then((val)=>{},(err)=>{})
p.then((val=>{})).catch(err=>{})

//第一个调用执行成功函数,第二个可选参数是失败执行函数，值为resolved 
//rejected传入值，返回值是一个新promise对象，实现链式,catch

其他方法

1. resolve()方法：直接将任意对象转化为promise 对象，传值为resolve后then的值，rejecte()类似

2. all()方法：并行执行promise操作，返回promise对象p，p.then()方法resolved状态为所有promise操作成功后才成功

3. race()方法：某个异步操作设置请求超时时间，并在超时后执行有关操作

   p.race([succss(),timeout()]).then()
   

4. finally(),最后不管成功失败始终需要执行

promise封装ajax请求

function get(url)
{
//便于在promise封装中传入参数
	return new promise(function (resolve,reject){
	var HXR = new XMRHttpRequest();
	XHR.open("GET",url,true);
	XHR.send();
	
	XHR.onreadystatechage = function (){
	if(XHR.readyState == 4 && XHR.status==200)
	{
	try{
		var res = JSON.parse(XHR.responseText);
		resolve(res);
		}catch(e) {
		reject(e);
		}
	}
	else
	reject(new Error(XHR.statusText));
	}
	})
}

12. async异步操作

定义异步操作,方便异步操作,返回promise对象,是Generator 的语法糖

async function f (){
	let s= await 'hello world';
	let data = await s.splite('');
	return data;
	}
	//如果async函数中右多个await操作,then()函数会等待所有await操作后调用
f().then(v=> {console.log(v)}).catch(e=>console.log(e));

注意

只要有一个await操作后变成了rejected状态,后续await操作不对继续执行

黑马前端全栈教程