ES6学习(下)

ES6中新增的数组知识

JSON数组格式转换

JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式

let  json = {
    '0': 'jspang',
    '1': '技术胖',
    '2': '大胖逼逼叨',
    length:3
}
let arr=Array.from(json);
console.log(arr)

Array.from(xxx)可以将类似数组结构的代码转换成数组，比如json数据结构与set数据结构等，同时用扩展操作符比如[...set数据结构]也能将set数据结构转化成数组

Array.of()方法

可以把一堆文本或者变量转换成数组

let arr =Array.of(3,4,5,6);
console.log(arr);

let arr =Array.of('技术胖','jspang','大胖逼逼叨');
console.log(arr);

find( )实例方法:

这个方法就是从数组中查找到符合条件的项，返回不是数组，而filter返回时数组
(ES6-map、filter、find、findIndex讲解)[http://www.cnblogs.com/studyshufei/p/7910384.html]

fill( )实例方法：

fill()也是一个实例方法，它的作用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置。

let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('jspang',2,5);
console.log(arr)

数组的遍历:for…of循环

ES6新增的数组遍历

let arr=['jspang','技术胖','大胖逼逼叨']
for (let item of arr){
    console.log(item);
}

箭头函数

(箭头函数)[http://www.cnblogs.com/huansky/p/5684867.html]

ES6中的函数和数组补漏

对象的函数解构

我们在前后端分离时，后端经常返回来JSON格式的数据，前端的美好愿望是直接把这个JSON格式数据当作参数，传递到函数内部进行处理。ES6就为我们提供了这样的解构赋值。

let json = {
    a:'jspang',
    b:'技术胖'
}
function fun({a,b='jspang'}){
    console.log(a,b);
}
fun(json);

数组的函数解构

函数能解构JSON，那解构我们的数组就更不在话下了，我们看下边的代码。我们声明一个数组，然后写一个方法，最后用…进行解构赋值。

let arr = ['jspang','技术胖','免费教程'];
function fun(a,b,c){
    console.log(a,b,c);
}
fun(...arr);

...arr这里用到了扩展操作符，因为扩展操作符内默认执行for...of...循环将扩展操作符是把数组扩展成单独的参数,之后才能解构赋值。（因为解构赋值必须解构结构要统一，不然会报错）

in的用法

可以用来检测某个对象中是否有存在某个值

let obj={
    a:'jspang',
    b:'技术胖'
}
console.log('a' in obj);  //true

如果检测某个数组中是否存在某个值，可以用indexOf方法判断或者用includes方法判断

新的基本数据类型Symbol

Symbol就是用来产生一个独一无二的值，可以防止属性名的冲突

声明Symbol

var a = new String;
var b = new Number;
var c = new Boolean;
var d = new Array;
var e = new Object; 
var f= Symbol();
console.log(typeof(d));//Symbol

声明Symbol前不能加new

Symbol在对象中的应用

看一下如何用Symbol构建对象的Key，并调用和赋值

var jspang = Symbol();
var obj={
    [jspang]:'技术胖'
}
console.log(obj[jspang]);//技术胖
obj[jspang]='web';
console.log(obj[jspang]);//web

(Symbol)[https://www.jianshu.com/p/174f88d189c6]

ES6中对象

Object.is( ) 对象比较

对象的比较方法,以前进行对象值的比较，经常使用===来判断，比如下面的代码

var obj1 = {name:'jspang'};
var obj2 = {name:'jspang'};
console.log(obj1.name === obj2.name);//true

那ES6为我们提供了is方法进行对比。

var obj1 = {name:'jspang'};
var obj2 = {name:'jspang'};
console.log(Object.is(obj1.name,obj2.name)); //true

区分=== 和 is方法的区别是什么，看下面的代码输出结果。

console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

这太诡异了，我要怎么记忆，那技术胖在这里告诉你一个小妙招，===为同值相等，is()为严格相等。

Object.assign( )合并对象

作数组时我们经常使用数组合并，那对象也有合并方法，那就是assgin( )。看一下啊具体的用法。

var a={a:'jspang'};
var b={b:'技术胖'};
var c={c:'web'};
let d=Object.assign(a,b,c)
console.log(d);

Set和WeakSet数据结构

(Set和WeakSet数据结构)[http://jspang.com/2016/06/14/es6001/]

map数据结构

(Map数据结构)[https://www.cnblogs.com/dagaoxiaozheng/p/6605981.html]

promise的基本用法

let state=1;
function step1(resolve,reject){
    console.log('1.开始-洗菜做饭');
    if(state==1){
        resolve('洗菜做饭--完成');
    }else{
        reject('洗菜做饭--出错');
    }
}
function step2(resolve,reject){
    console.log('2.开始-坐下来吃饭');
    if(state==1){
        resolve('坐下来吃饭--完成');
    }else{
        reject('坐下来吃饭--出错');
    }
}
function step3(resolve,reject){
    console.log('3.开始-收拾桌子洗完');
     if(state==1){
        resolve('收拾桌子洗完--完成');
    }else{
        reject('收拾桌子洗完--出错');
    }
}
new Promise(step1).then(function(val){
    console.log(val);
    return new Promise(step2);
 
}).then(function(val){
     console.log(val);
    return new Promise(step3);
}).then(function(val){
    console.log(val);
    return val;
});

class类的使用

类的声明与使用

class Coder{
    name(val){
        console.log(val);
    }
}
let jspang= new Coder;
jspang.name('jspang');

类的多方法声明

class Coder{
    name(val){
        console.log(val);
        return val;
    }
    skill(val){
        console.log(this.name('jspang')+':'+'Skill:'+val);
    }
}
let jspang= new Coder;
jspang.name('jspang');
jspang.skill('web');

这里需要注意的是两个方法中间不要写逗号了，还有这里的this指类本身，还有要注意return 的用法。

类的传参

在类的参数传递中我们用constructor( )进行传参。传递参数后可以直接使用this.xxx进行调用。

class Coder{
    name(val){
        console.log(val);
        return val;
    }
    skill(val){
        console.log(this.name('jspang')+':'+'Skill:'+val);
    }
    constructor(a,b){
        this.a=a;
        this.b=b;
    }
    add(){
        return this.a+this.b;
    }
}
let jspang=new Coder(1,2);
console.log(jspang.add());

我们用constructor来约定了传递参数，然后用作了一个add方法，把参数相加。这和以前我们的传递方法有些不一样，所以需要小伙伴们多注意下。

class的继承

class htmler extends Coder{
 
}
 
let pang=new htmler;
pang.name('技术胖');

声明一个htmler的新类并继承Coder类，htmler新类里边为空，这时候我们实例化新类，并调用里边的name方法。结果也是可以调用到的。