前端学习第八天

一、数组扩展

扩展运算符

是三个点（…），将一个数组转为用逗号分隔的参数序列

console.log(...[1,2,3]);
//1,2,3

console.log(1,...[2,3,4],5);
//1,2,3,4,5

可以把数组的每个元素读取出来，不需要循环遍历了

替代函数的apply方法

由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了

//ES5的写法
Math.max.apply(null,[14,3,77]);

//ES6的写法
Math.max(...[14,3,77]);

//等同于
Math.max(14,3,77);

合并数组 

const arr1 = ['a','b'];
const arr1 = ['c'];
const arr1 = ['d','e'];

//ES5
arr1.concat(arr2,arr3);

//ES6
[...arr1,...arr2,...arr3];

//['a','b','c','d','e']

数组新增方法 

Array.from()

用于将类数组转为真正的数组

常见的类数组有三类：

1.arguments

2.元素集合

3.类似数组的对象

//arguments

  //类数组、伪数组只能使用数组的读取方式和length属性，不能使用数组方法
function add(){
    let collet = Array.from(arguments);//可以读到未定义的参数：10，20，30
    collect.push(40);
    console.log(collect); //console.log(Array.from(arguments));
}

add(10,20,30)；


//元素集合
let titles = document.querySelectorAll("h3");
console.log(titles);


//类似数组的对象
var user = {
    "0":"iwen",
    "1":20,
    "2":"男",
    length:3
};

 Array.of()

用于将一组值，转换为数组

二、对象的扩展

属性的简洁表示法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。

var name = "iwen";
var user = {
    name,
    age:20,
    //属性简洁表示法
    getName(){
        console.log(this.name);
    }
}


user.getName();

  三、Set数据结构

类似于数组，但元素唯一，不能重复

Set本身是一个构造函数，用来生成Set数据结构

const s = new Set();

[2,3,5,4,5,2,2].forEach(x => s.add(x));

for(let i of s){
    console.log(i);
}

//2 3 5 4

Set函数可以接受一个数组作为参数，也可以去除重复字符串；

size属性返回set实例的成员总数

四、Promise对象

定义

Promise是异步编程的一种解决方案，ES6提供了Promise

Promise简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。

Promise可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数；提供统一接口，使控制异步操作更加容易。

用法

Promise对象是一个构造函数，用来生成Promise实例

const promise = new Promise(function(resolve,reject)){
    //some code...

    if(/*异步操作成功*/){
        resolve(value);
    } else {
        reject(error);
    }
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject，它们是两个函数，由JavaScript引擎提供，不用自己部署

Promise实例生成以后，可以用then方法分别指定resolved和rejected状态的回调函数 

promise.then(function(value)){
    //success
},function(error){
    //failure
});

五、Async函数

async函数可以将异步操作变为同步操作

function print(){
    //定时器是异步的
    setTimeout(() =>{
        console.log("定时器");
    },1000)；
    console.log("hello");
}

print(); //hello 定时器

//async

function timeout(ms){
    const promise = new Promise((resolve,reject) => {
        setTimeout(functio(){
            console.log("定时器");
        }
        ,ms)
    });
    return promise;
}

function asyncPrint(ms, value){
    //把具有异步操作的代码前面放入：await
    await timeout(ms);
    console.log(value);
}

asyncPrint(100,"hello"); //定时器 hello