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( )实例方法:

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);
}

箭头函数

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

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数据结构

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方法。结果也是可以调用到的。
posted @ 2018-02-01 17:44  不止于学  阅读(248)  评论(0编辑  收藏  举报