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数据结构)[http://www.javashuo.com/article/p-wiynkcmo-ep.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方法。结果也是能够调用到的。