追求卓越一諾千金

藍藍設計_|山西柳林联盛集团,2011年成立||-整理英文,主創清華團隊-_旁蒂克车标,專注軟件和互聯網ui設計開發_|-光明农场好玩吗。擅長企業信息化管理-__阿荣旗贴吧、監控||6120c主题下载、大數據軟件UIUE谘詢和設計開發服務__习水教育科技网。立足UI--|金家墩客运站时刻表,好好學習|奖牌图片,天天進步--3分快三是官方的吗!


ECMAScript6學習筆記

2019-6-27 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容-|偷吃人参果简介,每天自動發到您的郵箱中--|精华布衣1234, 請點這裏

這周萌芽決定好好學習一下ES6-|1588彩票是真的吗,感興趣的小夥伴們來一起學習吧~
ES6(ES2015)——IE10+|-_盈发彩票是真的假的、Chrome-__陇南市人民政府网站、FireFox|_-35选7大星走势图、移動端|__逃亡鳄鱼岛国语版、Node.js

編譯轉換

1.在線轉換(browser.js)
2.提前編譯

ES6新特性
1.變量
2.函數
3.數組
4.字符串
5.麵向對象
6.promise(串行化異步交互)
7.generator(把同步拆分為異步)
8.模塊化(ES6自帶模塊化)

變量
var
1.可以重複聲明
2.無法限製修改
3.沒有塊級作用域(沒有語法塊-|_078彩票中奖可以提现吗!)

let 不能重複聲明(變量|东港复印纸,可以修改)
const 不能重複聲明(常量|_16岁打英雄联盟入迷,不能修改)

塊級作用域|_|11先5助手苹果手机版,let在外部無法調用

函數
箭頭函數 =>

function show(){
//這是我們平常的函數
}
let show=()=>{
//箭頭函數
}
//區別不大_易彩—彩民福地登录APP,把function省略掉換成箭頭--_爱国者同盟网,主要就是為了方便-|与狼共舞oa,可傳參

1.如果隻有一個參數-|灵宝党政网,()可以省去_|仙剑奇侠传五破解。

 let show=a=>{
        return a*2
    }

2.如果隻有一個return_-金钱豹团购,{}可以省略

   let show=a=>a*2;
   let arr = [15,2,37,11,67,4,6]; //排序
  
   arr.sort((n1,n2)=>{
        return n1-n2;
    })
    
    arr.sort((n1,n2)=> n1-n2 );
    console.log(arr)


函數的參數
1.參數擴展/展開
2.默認參數

參數的擴展
1.收集參數

 function arrData(a,b,...args) {
        alert(a);
        alert(b);
        alert(args);
    }
    *注意-海马骑士7:Rest Parameter必須是最後一個(除其他語言)
1

2.展開數組

    arrData(...arr);       //等價於 arrData(1,2,3);
1
這仨點兒【…】代表把數組內容掏出來放這-|_旺拉虫草。

默認參數

//jQuery中的默認參數
$('#div1').animate({width:'200px'});
$('#div1').animate({width:'200px'},1000);

//ES6默認傳參
   function showOne(a,b=10,c=5) {
        console.log(a,b,c)
    }

解構賦值
1.左右兩邊解構必須一樣
2.右邊必須是個合法的東西
3.聲明和賦值不能分開(必須在一句話裏完成)

    let  [one,two,three] = [10,20,30];
    let  {one1,two2,three3} = {a:10,b:20,c:30};

數組
map 映射(一個對一個--优博彩票正规吗?。傳幾個返回幾個)

let result = arr.map(function (item) {
    return item*2;
});//簡寫一下
let result = arr.map(item=>item*2 );

//判斷考試成績
let score = [19,18,78,65,100];
let result = score.map(item=>item>=60?'及格':'不及格');

reduce 彙總(算個總數-|羽毛球陈龙,算個平均數)

//tmp|-广州qm之窗:上次求和總和||诺基亚手机真伪查询,為兩兩相加|01彩票有没有苹果版的,如果之前沒有結果則為傳進來的數組的第一個數-艳艳乡村全文阅读。
//itme-_沪通铁路规划图:當前的數_-|黑熊般一身粗肉。
//index__-言兑网:執行的次數--众彩国际。

   let result = arr.reduce(function (tmp, item, index) {
       return tmp + item;
    });
    //簡寫
    arr.reduce((tmp, item, index)=>tmp + item);

filter 過濾器(篩選掉不需要的)

 let result = arr.filter(item=>{
        if (item%2 == 0){
            return true;
        } else {
            return false;
        }
    });
    
 //簡寫
let result = arr.filter(item=>item%2 == 0);
       
//***萌芽在這裏提一下|-_鹿喜微!json和之前的item都不是固定的|_qq2009手机版,可以隨便命名_-6坪是多大。意思都是當前的值-||英杰交流中心!

 let arrProce = [
        {title:'男士襯衫',price:75},
        {title:'女士包包',price:5000},
        {title:'男士包包',price:20},
        {title:'女士鞋',price:2500}
    ];
    let result = arrProce.filter(jsom=>json.price >= 2000);
    console.log(result);

forEach循環(迭代)

   arr.forEach((item,index)=>{
        alert(index+":"+item)
    })

字符串
1.多了倆新方法
startsWith()鲤鱼山火山爆发时间; //判斷開頭___摩登城市辅助,返回布爾類型
endWith()--|娱乐彩票平台哪个好; //判斷結尾|_2019香港赛駌会彩经,返回布爾類型

let str='hello,world!'
str.startsWith('h')
str.endWith('!')      //返回true

2.字符串模板
字符串連接
2.1直接把東西塞進字符串裏麵 ${東西}
2.2可以折行

<h1>${title}</h1>
<p>${content}</p>

ES6的麵向對象
1.class關鍵字||肥东新闻,構造器和類分開啦--澳门黑社会老大尹国驹。
2.class裏麵直接加方法--抖音温婉百度云。

    class User{
        constructor(name,password){   //構造器
            this.name = name;
            this.password = password;
        }

        showName(){
            alert(this.name);
        }
        showPass(){
           alert(this.password);
        }
    }

    var user = new User('萌芽子','123456');
    user.showName();
    user.showPass();

繼承

    class VipUser extends User{
        constructor(name,password,age){
        super(name,password);          //super 超類
        this.age = age;
        }
        showAge(){
            alert(this.age)
        }
    }
    var user = new VipUser('萌芽子','123456','18歲');
    user.showName();
    user.showPass();
    user.showAge();

不得不說作為一隻JAVA汪||劫后余生3 9,這種寫法真得勁__騒麦歌词!

麵向對象的應用
React
1.組件化(class)
2.JSX(JSXbabelbrowser.js)
JSX屬於JS的擴展版

class Test extends React.Component{
 constructor(...args){
 super(...args);
 }
render(){
return <li>{this.props.str}</li>         //props:屬性
}
}

window.onload = function(){
let oDiv = document.getElementById('div1');

ReactDOM.render(
<ul>
<Item str="你好"></Item>
<Item str="世界|-腾翼c70论坛!"></Item>
</ul>
oDiv
);
};


打卡-|诺基亚6120c游戏,下次就學這個了|-临泽公务网!===============

json
1.JSON對象

JSON.stringify() json轉字符串

 let json = {a:10, b:20};//JSON.stringify   字符串化
    let str = 'http://www.baidu.com/path/user?data='+JSON.stringify(json);
    str = 'http://www.baidu.com/path/user?data='+encodeURIComponent(JSON.stringify(json));
    alert(str)
1
2
3
4
JSON.parse() 字符串轉json

    let str = '{"a":12,"b":20,"c":"可樂"}';
    let json = JSON.parse(str);
    console.log(json);

2.簡寫
在新版的ES6當中名字一樣的鍵(key)和值(value)可以隻寫一個_-青岛黄岛论坛。

    let a = 12;
    let b = 5;
    let json = {a,b,c:21};

簡化了JSON中的方法_|-nba热火vs雷霆总决赛。

 let json ={
        a:12,
        showJson(){
            alert(this.a);
        }
    };
    json.showJson();

json的標準寫法_||17英里ktv团购:
1.隻能用雙引號
2.所有的名字都必須用引號包起來(所有的key都必須是雙引號)

{a:12,b:5}     × 錯誤的寫法
{"a":"萌萌萌","b":"芽子"}     √ 正確的寫法
1
2
Promise(承諾)
異步__醒木镇:操作之間沒啥關係__小米盒子越狱教程,同時進行多個操作
同步__寻找了解绝杀技:同時隻能做一件事
優缺點|-|106cc彩票:
異步--智彩电子走势图11:代碼更複雜
同步_-_宠妃 肉的章节:代碼簡單
Promise——消除異步操作
*用同步一樣的方式來書寫異步代碼|陈qq;

    let p = new Promise(function (resolve,reject) {
        //異步代碼
        //resolve——成功
        //reject——失敗
    })

-----------------------------------------訪問我們的arr.txt文件_|08彩票注册,這裏用到了jQuery的ajax就不詳細介紹了||搬运工包吃住8000月结。
  let p = new Promise(function (resolve, reject) {
        //異步代碼
        //resolve——成功
        //reject——失敗
        $.ajax({
            url: 'arr.txt',
            dataType: 'json',
            success(arr) {
                resolve(arr);
            }, error(err) {
                reject(err);
            }
        })
    });
    //結果
    p.then(function (arr) {
        alert('成功啦' + arr)
    }, function (err) {
        alert('失敗了' + err)
        console.log(err)
    });
-----------------------------------------------多個請求地址
  Promise.all([p1,p2]).then(function (arr){
        let [res1,res2] = arr;
        alert('全部成功啦');
        console.log(res1);
        console.log(res2);
    },function (){
        alert('至少有一個失敗了');
    });
    ----------------------------再簡化
    function createPromise(url){
    return new Promise(function (resolve, reject) {
            $.ajax({
                url,
                dataType: 'json',
                success(arr) {
                    resolve(arr);
                }, error(err) {
                    reject(err);
                }
            })
        });
    }
  Promise.all([
        createPromise('arr.txt'),
        createPromise('json.txt')
    ]).then(function (arr){
        let [res1,res2] = arr;
        alert('全部成功啦');
        console.log(res1);
        console.log(res2);
    },function (){
        alert('至少有一個失敗了');
    });
----------------------完美寫法
 Promise.all([
        $.ajax({url:'arr.txt',dataType:'json'}),
        $.ajax({url:'json.txt',dataType:'json'})
    ]).then(function (results) {
        let [arr,json] = results;
        alert("成功了");
        console.log(arr,json)
    },function () {
        alert("失敗了")
    })

我們有了promise之後的異步-中国梦想秀圆梦专场:

 Promise.all([ $.ajax(),$.ajax() ]).then( results=>{
   //對了
    },err=> {
   //錯了
    })

Promise.all (必須全部成功)
Promise.race(同事讀多個數據__11选5投注官网,即使失敗也沒關係)

generator(生成器)
普通函數 - 一路到底執行不可中斷
generator函數 - 可中斷

 function * show() {
        alert('a');
        yield;//暫時放棄執行
        alert('b');
    }
    let genObj = show();
    genObj.next();
    genObj.next();

yield
yield傳參

  function * show(num1,num2) {
        alert(`${num1},${num2}`);//es6
        alert('a');
       let a = yield;//暫時放棄執行
        console.log(a);
        alert('b');
    }
    let genObj = show(99,88);
    genObj.next(12);//第一個next無法給yield傳參的-|盈彩娱乐是骗局吗,廢的
    genObj.next(5);

yield返回

  function *show() {
        alert('a');
        yield 12;
        alert('b');
        return 55;
    }

    let gen = show();
    let res1 = gen.next();
    console.log(res1);      //{value: 12, done: false}
    let res2 = gen.next();
    console.log(res2);//{value: undefined, done: true}  加了return  {value: 55, done: true}



還沒做的菜叫函數參數|-易中彩票可信?,過程是yield之前函數裏麵的東西|_|御龙在天祝融夫人坐标,幹淨的菜|_诺基亚7070拆机视频,切好的菜是中間過程也就是yield-优信彩票大发是真的吗,最終我們將它返回出去|优酷加速器官方免费下载!不得不說這圖很生動_|-黄牛课件网。
異步操作
1.回調

$.ajax({
    url:'url',
    dataType:'json',
    success(data){
        $.ajax({
            url:'xxx',
            dataType: 'json',
            success(data) {
                //完事兒了
            },error(err) {
                alert('錯了')
            }
        })
    },error(){
        alert('失敗')
    }
})

2.Promise

Promise.all([
        $.ajax({url:xxx,dataType:'json'}),
        $.ajax({url:xxx,dataType:'json'}),
        $.ajax({url:xxx,dataType:'json'})
    ]).then(results=>{
        //完事兒
    },err=>{
        //錯誤的
    })

3.generator

runner(function  *(){
let data1 = yield $.ajax({ulr:xxx,dataType:'json'});
let data2 = yield $.ajax({ulr:xxx,dataType:'json'});
let data3 = yield $.ajax({ulr:xxx,dataType:'json'});
})
1
2
3
4
5
generator(不能用=>函數)
邏輯判斷下非常好用||_汽油提价。
Promise-1288彩票是正规公司吗?:一次讀一堆|-_西单商场打折。
generator|-暴走鞋在哪买:邏輯性_-动感地带随心聊。

runner(function *(){
let userData = yield $.ajax({url:'getUserData',dataType:'json'});
if(userData.type == 'VIP'){
let items = yield $.ajax({url:'getVIPItems',dataTyoe:'jsom'});
}else{
let items = yield $.ajax({url:'getItems',dataTyoe:'jsom'});
      }
//生成...
}
})

總結
1.變量||_梦幻诛仙蛙腿点心:
var|_印度新娘之真爱无悔:能重複聲明--众赢彩票是真的吗?、函數級
let---3g彩票网地址: 嚴格的___闪聚,不能重複聲明|-惧龟,塊級--_c7000,變量
const_2019最新免费彩金论坛:嚴格的-|_360双色球开奖号码查询,不能重複聲明||-365天天彩票是不是真的,塊級___赢彩彩票提现会到账吗,常量

2.箭頭函數
2.1方便
i.如果隻有一個參數--2239期海南头尾规律,()可以省
ii.如果隻有一個return-_-优惠活动彩票注册送28,{}可以省
2.2修正了this
this相對正常點

3.參數擴展
…能收集
…能擴展
默認參數

4.數組方法
map 映射
reduce 彙總
filter 過濾
forEach 循環

5.字符串
starsWith/endWith
字符串模板:${a}xxx{b}

6.Promise
封裝異步操作
Promise.all([]);

7.generator
function *show(){
yield
}

8.JSON
JSON.stringify({ a :12,b :5}) => {“a”:12,“b”:5}
JSON.parse(’{“a”:12,“b”:5}’) =>{a:12,b:5}//字符串

9.解構賦值
let [a,b,c] = [12,5,8]-至尊彩是不是真的;
左右結構一樣||英雄哥华汉,右邊是個合法的東西_|糗事百科邀请码获取器,連生命帶賦值一次完成|_掌上购彩App是不是骗局。

10.麵向對象
class Test(){
constructor(xxx){
this = xxx
}
方法1(){
}
方法2(){
}
}
繼承
class Test2 extends Test(){
constructor(){
super();
}
}

談談ES7和ES8
1.數組includes
數組是否包含某個東西

2.數組 keys/values/entries
for…in(循環數組)
對於數組來講循環的是下標
對於json循環的是key

for…of(循環迭代器)
對於數組循環的是值
不能用於JSON-|1960彩票,json並不是迭代器

keys = >所有的key拿出來 0,1,2,3…
values =>所有的values拿出來 23,5,8,1…
entries =>所有的鍵值對拿出來 {key:0,value:a}

let arr = [12,5,8,99];
for(let [key,value] of arr.entries()){
alert(`${key} = ${value}`);

預覽版__盈众彩票网页,目前極大多數瀏覽器都不支持-2019香港赛马日程表,以後可能會支持__1分钟彩票App,了解一下就好-|-滦县二中吧。
藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司___易彩彩票是诈骗吗,為期望卓越的國內外企業提供卓越的UI界麵設計--_尊彩升级的星彩网APP、BS界麵設計 --熊猫人战袍在哪买、 cs界麵設計 _1q币购物券怎么用、 ipad界麵設計 --_中兴彩票首页、 包裝設計 |||第一财经视频网、 圖標定製 -|_语法点点通、 用戶體驗 -_阳谋为上、交互設計_苏通大桥有多长、網站建設 -_-众发娱乐下载网址、平麵設計服務_22选5开奖结果河南福彩。

標簽: ECMAScript6學習筆記 « 可視化數據大屏應該如何設計 | 全麵的圖標設計類型和風格總結»


訂閱Rss