ECMAScript6学习笔记 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


ECMAScript6学习笔记

2019-6-27 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

这周萌芽决定好好学习一下ES6,感兴趣的小伙伴们来一起学习吧~
ES6(ES2015)——IE10+、Chrome、FireFox、移动端、Node.js

编译转换

1.在线转换(browser.js)
2.提前编译

ES6新特性
1.变量
2.函数
3.数组
4.字符串
5.面向对象
6.promise(串行化异步交互)
7.generator(把同步拆分为异步)
8.模块化(ES6自带模块化)

变量
var
1.可以重复声明
2.无法限制修改
3.没有块级作用域(没有语法块!)

let 不能重复声明(变量,可以修改)
const 不能重复声明(常量,不能修改)

块级作用域,let在外部无法调用

函数
箭头函数 =>

function show(){
//这是我们平常的函数
}
let show=()=>{
//箭头函数
}
//区别不大,把function省略掉换成箭头,主要就是为了方便,可传参

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);
    }
    *注意: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:上次求和总和,为两两相加,如果之前没有结果则为传进来的数组的第一个数。
//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都不是固定的,可以随便命名。意思都是当前的值!

 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(); //判断结尾,返回布尔类型

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汪,这种写法真得劲!

面向对象的应用
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="世界!"></Item>
</ul>
oDiv
);
};


打卡,下次就学这个了!===============

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中的方法。

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

json的标准写法:
1.只能用双引号
2.所有的名字都必须用引号包起来(所有的key都必须是双引号)

{a:12,b:5}     × 错误的写法
{"a":"萌萌萌","b":"芽子"}     √ 正确的写法
1
2
Promise(承诺)
异步:操作之间没啥关系,同时进行多个操作
同步:同时只能做一件事
优缺点:
异步:代码更复杂
同步:代码简单
Promise——消除异步操作
*用同步一样的方式来书写异步代码;

    let p = new Promise(function (resolve,reject) {
        //异步代码
        //resolve——成功
        //reject——失败
    })

-----------------------------------------访问我们的arr.txt文件,这里用到了jQuery的ajax就不详细介绍了。
  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(同事读多个数据,即使失败也没关系)

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之前函数里面的东西,干净的菜,切好的菜是中间过程也就是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:一次读一堆。
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: 严格的,不能重复声明,块级,变量
const:严格的,不能重复声明,块级,常量

2.箭头函数
2.1方便
i.如果只有一个参数,()可以省
ii.如果只有一个return,{}可以省
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];
左右结构一样,右边是个合法的东西,连生命带赋值一次完成。

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

预览版,目前极大多数浏览器都不支持,以后可能会支持,了解一下就好。
蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务

标签: ECMAScript6学习笔记 « 可视化数据大屏应该如何设计 | 全面的图标设计类型和风格总结»


蓝蓝 http://www.bjhbys.com

  1. 2019年9月(22)
  2. 2019年8月(63)
  3. 2019年7月(61)
  4. 2019年6月(59)
  5. 2019年5月(32)
  6. 帝皇彩票官网2019年4月(37)
  7. 2019年3月(43)
  8. 2019年2月(26)
  9. 2019年1月(45)
  10. 2018年12月(41)
  11. 2018年11月(40)
  12. 帝皇彩票官网2018年10月(29)
  13. 2018年9月(40)
  14. 2018年8月(87)
  15. 2018年7月(107)
  16. 2018年6月(86)
  17. 2018年5月(110)
  18. 2018年4月(40)
  19. 2018年3月(35)
  20. 2017年8月(35)
  21. 2017年7月(45)
  22. 2017年6月(7)
  23. 2017年5月(27)
  24. 2017年4月(51)
  25. 2017年3月(70)
  26. 2017年2月(65)
  27. 2017年1月(69)
  28. 2016年12月(55)
  29. 帝皇彩票官网2016年11月(111)
  30. 2016年10月(92)
  31. 2016年9月(53)
  32. 2016年8月(9)
  33. 2016年7月(4)
  34. 2016年6月(9)
  35. 2016年3月(19)
  36. 2016年2月(26)
  37. 2016年1月(30)
  38. 2015年12月(33)
  39. 2015年11月(35)
  40. 帝皇彩票官网2015年10月(46)
  41. 2015年9月(43)
  42. 2015年8月(40)
  43. 2015年7月(33)
  44. 帝皇彩票官网2015年6月(46)
  45. 2015年5月(58)
  46. 2015年4月(70)
  47. 2015年3月(55)
  48. 2015年2月(17)
  49. 2015年1月(33)
  50. 2014年12月(21)
  51. 2014年11月(84)
  52. 帝皇彩票官网2014年10月(94)
  53. 2014年9月(6)
  54. 2014年8月(1)
  55. 2014年7月(13)
  56. 2014年6月(66)
  57. 2014年5月(99)
  58. 2014年4月(88)
  59. 2014年3月(102)
  60. 2014年2月(68)
  61. 2014年1月(83)
  62. 2013年12月(106)
  63. 2013年11月(112)
  64. 2013年10月(61)
  65. 2013年9月(20)
  66. 帝皇彩票官网2013年7月(13)
  67. 2013年6月(27)
  68. 2013年5月(48)
  69. 2013年4月(39)
  70. 2013年3月(8)
  71. 2013年2月(20)
  72. 帝皇彩票官网2013年1月(31)
  73. 2012年12月(33)
  74. 2012年11月(31)
  75. 2012年10月(23)
  76. 2012年9月(8)
  77. 2012年7月(14)
  78. 帝皇彩票官网2012年6月(15)
  79. 2012年5月(31)
  80. 2012年4月(24)
  81. 2012年2月(4)
  82. 2012年1月(8)
  83. 2011年12月(35)
  84. 2011年11月(32)
  85. 2011年10月(13)
  86. 2011年8月(1)
  87. 2011年6月(1)
订阅Rss
状元彩票官网 红牛彩票投注 山东十一运夺金 博发彩票开奖 博发彩票开奖 帝皇彩票平台 桔子彩票登陆 桔子彩票官网 状元彩票开奖 大象彩票计划