ES6学习，第二部分

上一部分： https://blog.csdn.net/yiersan__/article/details/107599406

对象

对象的写法

var name='bob',age=15;
function fun(){
    alert(1);
}
var person={
    name,
    age,
    fun(){
        alert(1);
    }
};

var person2={
    name:name,
    age:age,
    fun:function(){
        alert(1);
    }
};

var person3={
    name:'bob',
    age:15,
    fun:fun
};

这三种写法都是相同的。

属性名

除了上面例子中可以看到我们可以用变量名作为属性名之外，在ES6中我们还可以用表达式作为属性名，不过需要用[]括起来。

var hello='hello';
var s={
    ['i'+'love']:"china",
    ['i'+'am'+'form'](){
        return "china";
    },
    // [hello]//属性名表达式不能用变量名  错误
    [hello+'i']:"am"
}

拓展运算符（…）

在上一部分讲Map和Set中，用过拓展运算符，主要用于将Map和Set分别合并或转为数组。

它的解释为取出参数对象所有可遍历属性然后拷贝到当前对象。

let per={
    name:'bob',
    age:'16'
};
let sex={
    g:'girl',
    b:'boy'
}
let per2={...per};//把per中的可遍历属性取出并复制到per2
let I={...per,...sex};//合并两个对象，如果有重名的属性，后面的会覆盖前面的
let per3={...per,name:"lucy"};

对象方法

1. Object.assign(target, source_1, ···):

• 将source源对象中的所有可枚举属性复制到target目标对象中，是浅拷贝。
• 还是一样，如果有同名属性，后面的会覆盖前面的。
• 如果该函数只有一个参数，当参数为对象时，直接返回该对象；当参数不是对象时，会先将参数转为对象然后返回。而null或undefined如果作为只有一个的参数或者目标对象出现，会报错

2. Object.is(value1, value2)：

用来比较两个值是否严格相等，参考===

• 和===相同的是，对于[]、{}、function(){}即使值和任何属性任何代码都相同，他们也是不等的
• 不同的是:

	===	Object.is()
+0与-0	true	false
NaN与NaN	false	true

数组

创建数组

let a=Array.of(1,'2',true);
let b=[1,'2',true];

这两种是一样的。

转换数组

也是在上个博客讲Map和Set的时候，用到过这个方法。
Array.form(arraylike,mapfunction,thisArg)：

• arraylike:想要转换的类数组对象或可迭代对象
• mapfunction:对arraylike中每个元素的处理
• thisArg:执行mapfunction时this指代的对象

那我们先说说什么是类数组对象和可迭代对象:
类数组对象：
类数组对象首先是一个对象，它的声明方式肯定是{}，我们知道数组的话是由下标和值构成的，一个下标有相应的值，而对象是一个属性名对应一个属性值。类数组就是属性名是下标，即是数值或可以转换为数值的字符，并含有length属性。

let a={
    0:"zero",
    1:"one",
    '2':"two",
    length:3
};

可迭代对象：
可迭代对象包括：Map、Set、字符串
这个就不多说了，上个博客已经讲过了。

那么我们现在来看例子：

let a={
    0:"zero",
    1:"one",
    '2':"two",
    length:3
};//a是一个类数组对象
let b=new Map([["0","zero"],["1","one"],["2","two"]]);//b是一个可迭代对象
console.log(a);
console.log(b);
let map={
    do(n){
        return n+" number";
    }
};
console.log(Array.from(a,function(n){
    return this.do(n);
},map));
console.log(Array.from(b));

方法

• find(条件)：查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。
• findIndex(条件)：查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。
• fill(值，起始索引，结束索引(默认为结尾))：将一定范围索引的数组元素内容填充为单个指定的值。
• copyWithin(被修改的起始索引，被用来覆盖的数据的起始索引，被用来覆盖的数据的结束索引，默认为数组末尾)：将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。
• entries()：遍历键值对。Map和Set
• keys()：遍历键名
• values()：遍历键值
• includes()：数组是否包含指定值
• 嵌套数组转一维数组：

1. flat(n)：指定转换的嵌套层数
2. flatMap(fun,thisArg)：fun(当前元素、当前元素索引、原数组),对原数组元素进行函数处理，再执行flat方法

拓展运算符

(...)也可以用于数组，赋值数组，合并数组，和对象用法一样。

函数

参数

函数的参数可以设为默认值，但只有在未传递此参数或参数为undefined时，才会使用默认值，null是有效的。

function fun(x,y=2){
    return x+y;
}
console.log(fun(1));//1+2=3
console.log(fun(1,null));//1+null=1
console.log(fun(1,3));//1+3=4

不定参数：
不定参数就是不确定参数个数，形如 ...变量名，不定参数只能放在数组最后，且只能有一个。

function fun(...values){
    return values[1];
}
console.log(fun(1));//undefined
console.log(fun(1,'x',3,4,'5',6));//x
console.log(fun(1,3));//3

箭头函数

箭头函数是原始函数的一种简单写法：
参数=>函数体

function fun(x){
    return x+1;
}
var f=x=>x+1;
console.log(fun(1));//2
console.log(f(1));//2

注意：

• 当箭头函数没有参数或者有多个参数，要用 () 括起来。
• 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
• 当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来
• 箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象

Promise

我们可以想一下，如果我想分三次输出字符串，三次的间隔时间都不相同，应该怎么做？按我们之前学的，写三个setTimeOut一层层嵌套？
正是为了更好的解决需要多次执行异步操作的问题，引入了Promise对象。

---

Promise 异步操作有三种状态：`pending（进行中）、fulfilled（已成功）和 rejected（已失败）`。而`pending`和`fulfilled`状态被称为`resolved（定型）`。 除了异步操作的结果，任何其他操作都无法改变这个状态。哪怕是return。

缺点：

1. 无法取消 Promise ，一旦新建它就会立即执行，无法中途取消。
2. 如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。
3. 当处于 pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成

let p=new Promise(function(reslove,reject){
    //reslove('success');
    reject('fail');
});//称为起始函数，resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的
//then 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，
//第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。
//在 JavaScript 事件队列的当前运行完成之前，回调函数永远不会被调用
p.then(function(value){//接收到Promise成功或失败的参数
    console.log(value);
    return value+value;//向第二个then传递参数
},function(value){
    console.log("失败："+value);
    return value+value;
}).then(function(value){//接收第一个then的参数
    console.log(value);
    return Promise.resolve('resolve');//向第三个then传递Promise成功的参数
}).then(function(value){//接收第二个then
    console.log(value);
    return Promise.reject('reject');
}).then(function(value){//成功
    console.log("成功："+value);
},function(value){//失败
    console.log("失败："+value);
});

我们把Promise调用的函数换为resolve: