【web】ES6+

ES6+

第7 个数据类型：symbol（）

产生一个唯一的值，不可控

全称：ECMAScript6

弱类型语言：在编译过程中确定数据类型

let

用于声明变量
1.1let声明的变量不能重复声明
1.2let声明的变量不能变量提升
1.3块状作用域 eg.点击i弹出第n个
1.4使用let声明的变量不属于J顶层对象

const

用于声明常量
1.1声明常量用大写 不是规则，是一种moqi
1.2常量不能修改
1.3块状作用域
1.4使用const声明的常量也不属于J顶层对象

变量的解构赋值

在不使用第三个变量的情况下交换a和b的值：

let a 1;
let b 2;
[a,b]=[b,a];

数组的解构赋值

var[a,b,c]=[1,2,3]:
console.log(a,b,c);
//可以给变量添加默认值：a=1

对象的解构赋值

let book = {
    name: '水浒传',
    des: '105+3',
    sale: function() {
     console.log('35一本')
   }
}

 let {data} = res
 console.log(sale())

特殊对象的解构赋值

//字符串做数组
let[a,b,c]=“var;
console.log(a,b,c);
//字符串做对象
let {length:len}=“function”;
console.log(len);
/Math的应用
let{Pl:p)=Math;
console.log(p);

实际应用

//交换2个变量的值
let a 100;
let b 200;
[a,b]=[b,a];
//提取json中的数据
let jsonData ={
id:1,
status:“okokok”,
data:[1,2,3,4,5]
}
let {id,status,data)jsonData;
//用于函数参数默认值
function fn({id,name=“张三}){
console.log(id,name);
}
fn({id:4})

for…of

for (let val of xxx){
console.log(val)}

用于遍历

数组
字符串
用于遍历
元素列表
类数组对象
es6新培Map Set

比较

for of 纯数组与类数组集合均可遍历
for in 用于数组与对家，获取的是key
forEach 用于纯数组

模板字符串

就是反引号的用法
定义比较长，复杂的字符串
可以插入变量
可以插入函数

函数新特性

函数参数默认值 注：具有默认值的参数要写到后边

args参数

function fn(…args){}
可替代arguments
arguments,是一个类数组对象，args是纯数组对象

箭头函数

let fn val=>val;
//等同于
let fn function(val){return val;}


//实现两个数的和
let sum =(num1,num2)=>num1+num2;
console.log(sum(1,5));

若要执行多条语句需要加花括号

作用

目的：简化回调函数的写法
箭头函数中的this：是函数声明时所在的对象

特性：this指向函数所在的作用域
箭头函数中的this：指向函数所在作用域的上下文

拓展运算符

定义：将数组类数组展开以逗号隔开的列表

类数组转数组:[…btns]

1. 数组合并

var a = [1, 2, 3];
    var b = [4, 5, 6];
    var c=[...a,...b];
    console.log(c);

2. 复制(一级)

var a=[1,2,3] 
   var b=[...a]//创建了新的数组，b。改值不会影响a
   b[0]="hou"
   console.log(a,b)

3. 参数（实参形参）
   • 普通函数也可以
   • 除去ab一人一个，剩下的都在，因此，它得放到最后一个来放剩余数据

var text=(...arr)=>{//她也是数组
    console.log(arr)//[1, 2, 3, 4, 5] 
}
text(1,2,3,4,5)
----------
var text2=(a,b,...arr)=>{
    console.log(arr)//[3, 4, 5],a:1,b:2
}
text2(1,2,3,4,5)

4. 伪数组转换

  function test(){
      var arr=[...arguments]
      console.log(arr)
  }
  test(1,2,3,4,5,6)

5. 对象

• 同理
• 注意，如果有同名的，会后面的覆盖前面的

var obj1={
    name:"hou",
    age:23
}
var obj2={
    name:'hou1',
    happy:'dog'
}
var obj={
    ...obj1,
    ...obj2
}
console.log(obj)//{name: 'hou1', age: 23, happy: 'dog'}

适用于所有的类数组集合（实现了遍历器接口的数据类型)

Array构造函数新增方法

方法

静态方法 构造函数调用

实例方法 实例对象调用

Array.from()

将类数组对象转换为纯数组

Array.of(a,b,c)

将参数列表返回一个数组
相当于创建数组
Array.of(3)!=new Array(3)

数组对象新增方法

find(callback)

返回数组中第一个满足条件的元素

let arr=[9,16,-9,7,56];
var result arr.find(function(val,index){
if (val 10){
return true;
}
retum false
}）

findlndex(callback)

返回数组中第一个满足条件的元素的索引

entries()

帮助数组遍历每一个key值与value值

let arr=[9,16,-9,7,56]:
for (let [key,value]of arr.entries()){
console.log(key,value);
}

keys()

帮助数组遍历所有的key值

includes()

检索数组是否包含桌个值，返回布尔值，用于基本数据类型

filter(callback)

过滤数组单元，将满足条件的元泰过滤，
工作原理：返回值为真，将元素加入新数组

callback ==function(value,index){}
自动将每一个元素放入callback中进行处理，如果返回值为ue,将元素放入新数组中，否则不操作
形参value,代表数组中的每一个值
形参index,代表数组中每一个值的下标

map(callback)

原理：将计算后的结果放入新数组
对数组进行遍历，将计算后的值返回新数组

callback同上，不返回bool,返回具体值

some(callback)

对数组进行遍历，只要有一个满足条件，则返回true,并终止遍历，否则返回false，用于引用数据类型

every(callback)

对数组进行遍历，如果有一个不满足条件，则返回false,并终止遍历，否则返回true

forEach(callback)

遍历数组
无返回值

reduce(function(preValue,nowValue,index,arrSelf)

return preValue+nowValue})

累加数组单元
preValue上一个值
nowValue当前值
index当前值下标
arrSelf当前数组

对象的新增特性

属性及方法的简洁表示

(key名与value名相同)
let name=“ce”
let age =18;
//ES5
var obj1 ={
name:name,
age:age,
run:function0{console.log(快速跑！)}
}
//ES6
var obj2 ={
name,
age,
run0{console.log(“快速跑！)}
}

Object…is0相当于全等

但是有区别
Object.is(1,2)
Object.is(NaN,NaN)
Object.is(0,-0)

Object…assign(obj1,obj2,obj3)合并对象

所有对象都会合并到obj1,如果是相同的属性，后边的对象的属性值会对前边的进行覆盖

Object.keys(obj)

将obj的key值返回一个纯数组

Object.values(obj)

将obj的value值返回一个纯数组

Object.entries(obj)

返回一个二维数组，每一个小数组都是一对[key,value]

Promise

• js是单线程的语言，所以很多操作都是异步操作，而异步操作多由回调函数完成，这里边就会引出一个现象“回调地狱”即回调函数中有回调函数，这种现象会导致代码的可读性降低，为了解决这个问题我们选择使用Promise

作用

• 防止出现回调地狱，提高代码的可读性，像同步操作那样去执行异步操作

写法

• 固定单词: resolve 返回then (处理成功的状态),reject 返回catch (处理失败的状态)
• 一般登录界面登录成功后有一个登录成功的识别标志： token: ‘用户名+密码+时间戳+对称加密’
  • 对称加密：加密之后还能解出来，非对称加密：加密之后解不回来

一个promise对象就代表一个异步操作，通过状态去管理异步操作

三状态

pending 执行中
fulfilled 完成，也就是执行了resolve()
rejected 失败，reject()执行

fetch(‘’)

  // fetch('') 本质是promise封装ajax 会return一个promise
    //    Stream 二进制数据流
    
    fetch('')
    .then(res=>res.json())//返回一个promise

Promise.all()

内部运行时异步 并行操作

等待最后一个结果，然后按顺序全部获取

Promise.race ()

并行操作

只要有一个输出结果，救输出它

class

特点：

• 必须包含constructor
• 属性添加到constructor中
• class的本质仍然是构造函数
• this指向class的实例

async await 语法糖

async await 语法糖 某某的简写

async：

async： 用来声明异步函数 ,返回的结果是一个promise对象
如果这个函数的返回值是一个具体的值，那么会把这个值放入Promise.resolve(值)
函数的结果 是异步，函数的执行不是异步

await：

作用：（阻塞线程）暂停当前函数内其他代码执行，等待当前promise的执行结束
前提：await只能用于async声明的函数内部
await如果修饰一个数值，那么会立刻返回这个数值

module 模块化

在js中引入js

目的

提高代码的阅读性，独立性

什么是模块化

一个大文件划分为多个小文件

好处

进行逻辑分离，提高代码独立性，复用性，可读性