zoukankan      html  css  js  c++  java
  • ES6进一步整理

    内容:

    1.变量及赋值

    2.函数

    3.数组及json

    4.字符串

    5.面向对象

    6.Promise

    7.generator

    8.模块

    1.变量及赋值

    (1)ES5变量定义

    var:     可以重复定义、不能限制修改、没有块级作用域  --> 不再建议使用

    (2)ES6新增变量定义

    新时代的js建议使用以下来定义变量:

    • let 不能重复定义、变量、块级作用域
    • const 不能重复定义、常量、块级作用域

    (3)赋值

    1 解构赋值:
    2   1.左右两边必须一样;右边得是个东西
    3   2.必须定义和赋值同步完成
    1 let [a, b, c] = [1, 2, 3];
    2 // let {a, b, c} = {a: 1, b: 2, c: 3};  
    3 alert(a+b+c);  // 输出6
    1 let [n1, {a, b, c}, n2] = [12, {a: {n1: 5, n2:8}, b: 12, c: 88}, 55];
    2 console.log(n1, a, b, c, n2);
    3 // 输出: 12 {n1: 5, n2: 8} 12 88 55

    2.函数

    (1)箭头函数

    箭头函数就是匿名函数定义的简化版, 宣称能使得代码更简洁,实际上就是纯粹的垃圾
    箭头函数的 this 值是绑定了的,箭头函数没有 arguments 对象,如果要多参数, 必须用 ...

     1 // (参数1, 参数2) => { 语句 }
     2 // (参数1, 参数2) => 语句
     3 // 上面两行相当于下面这函数
     4 function(参数1, 参数2) {
     5     return 语句
     6 }
     7 
     8 // 如果只有一个参数,圆括号可省略的
     9 // (参数1) => { 语句 }
    10 // 参数1 => { 语句 }
    11 
    12 // 但是如果没有参数, 必须需要使用圆括号
    13 // () => { 语句 }
    14 
    15 // 例子
    16 var a1 = [1, 2, 3]
    17 // 下面两个等价
    18 var a2 = a1.map(function(n){
    19     return n * n
    20 })
    21 var a3 = a1.map( n => n * n )
    22 
    23 n => n * n
    24 // 上面 1 行等价于下面 3 行
    25 function(n) {
    26     return n * n
    27 }

    (2)默认参数

     1 // 传统写法
     2 var test = function(a, b, c){
     3     b = b||5;
     4     c = c||12;
     5     console.log(a, b, c);  // 1, 5, 12
     6 }
     7 test(1);
     8 
     9 // ES6写法:
    10 var test = function(a, b=5, c=12){
    11     console.log(a, b, c);  // 1, 5, 12
    12 }
    13 test(1);

    (3)参数展开(剩余参数)

    接受剩余参数如下:

    1 var test = function(a, b, ...args){
    2     // 第一个和第二个参数传给a和b其他参数传给args
    3     console.log(a, b, args);
    4 }
    5 
    6 test(1, 3, 5, 7, 9);  // 1, 3, [5, 7, 9]

    注:...args必须在参数最后面

    展开一个数组:

    1 let arr = [111, 222, 333];
    2 let arr2 = [1, 3, 5, ...arr, 7, 9];
    3 console.log(arr2);
    4 // 输出: [1, 3, 5, 111, 222, 333, 7, 9]

    3.数组及json

    (1)数组 - 5种方法

    map 映射:一个 -> 一个

     1 let arr=[62, 55, 82, 37, 26];
     2 
     3 let arr2=arr.map(function (item){
     4   if(item>=60){
     5     return true;
     6   }else{
     7     return false;
     8   }
     9 });
    10 
    11 alert(arr2);  // true,false,true,false,false

    filter 过滤:

    1 let arr=[12,5,88,37,21,91,17,24];
    2 
    3 let arr2=arr.filter(function(item){
    4     if(item%2==0){
    5         return item;
    6     }
    7 });
    8 
    9 alert(arr2);  // 12,88,24

    forEach 遍历:

    1 let arr=[12,5,88,37,21,91,17,24];
    2 
    3 let sum=0;
    4 arr.forEach(function(item){
    5   sum+=item;
    6 });
    7 
    8 alert(sum);  // 295

    reduce 汇总:一堆 -> 一个

    1 let arr=[12,5,88,37,21,91,17,24];
    2 
    3 let sum=arr.reduce(function(tmp,item,index){
    4   console.log(tmp, item, index);
    5 
    6   return tmp+item;
    7 });
    8 
    9 console.log(sum);  // 结果: 295

    array-like对象转换成Array:

    在DOM操作中,有时候有一些array-like对象(无法使用forEach方法),可以这样将其转换成真正的Array:

    Array.from([array-like]) -> [xxx, xxx, xxx],然后就可以使用forEach方法了

    (2)json - 2变化

    简写:名字和值一样的,可以省

    1 let a=12;
    2 let b=5;
    3 
    4 let json={a, b};
    5 // 上面一句等价于:
    6 // let json={a: a, b: b};
    7 
    8 console.log(json);  // {a: 12, b: 5}

    function可以不写:

     1 /*let json={
     2   a: 12,
     3   b: 5,
     4   show: function (){
     5     alert(this.a+this.b);
     6   }
     7 };*/
     8 
     9 // 下面的和上面的同理
    10 let json={
    11   a: 12,
    12   b: 5,
    13   show(){
    14     alert(this.a+this.b);
    15   }
    16 };
    17 
    18 json.show();

    4.字符串

    字符串模板:

    1 let json={name: 'wyb', age: 21};
    2 
    3 //alert('我叫:'+json.name+',我今年'+json.age+'岁');
    4 alert(`我叫:${json.name},我今年${json.age}岁`);

    多行字符串:

    1 let msg = `sf
    2 sdf
    3 dkj
    4 `;
    5 
    6 alert(msg);

    startsWith和endsWith:

     1 if(sNum.startsWith('135')){
     2   alert('移动');
     3 }else{
     4   alert('联通 or 电信');
     5 }
     6 
     7 if(filename.endsWith('.txt')){
     8   alert('文本文件');
     9 }else{
    10   alert('其他文件');
    11 }

    5.面向对象

    (1)基础 构造函数和继承

    • class/constructor
    • extends/super
     1 // 类的定义:
     2 class Person{
     3   constructor(name, age){
     4     this.name = name;
     5     this.age = age;
     6   }
     7 
     8   showName(){
     9     alert('我叫' + this.name);
    10   }
    11   showAge(){
    12     alert('我' + this.age + '岁');
    13   }
    14 }
    15 
    16 let p = new Person('wyb', 21);
    17 
    18 p.showName();
    19 p.showAge();
     1 // 类的继承
     2 class Person{
     3   constructor(name, age){
     4     this.name = name;
     5     this.age = age;
     6   }
     7 
     8   showName(){
     9     alert('我叫' + this.name);
    10   }
    11   showAge(){
    12     alert('我' + this.age + '岁');
    13   }
    14 }
    15 
    16 
    17 class Worker extends Person{
    18   constructor(name, age, job){
    19     //super-超类(父类)
    20     super(name, age);
    21     this.job = job;
    22   }
    23 
    24   showJob(){
    25     alert('我是做:' + this.job);
    26   }
    27 }
    28 
    29 let w = new Worker('wyb', 21, '打杂的');
    30 
    31 w.showName();
    32 w.showAge();
    33 w.showJob();

    (2)this

    • 普通函数:根据调用我的人 this老变
    • 箭头函数:根据所在的环境 this恒定
    • bind——给函数定死一个this

    6.Promise

    Promise - 异步、同步化  ->  用同步的方式去写异步

    • promise:解决异步操作
    • 同步——串行 简单、方便
    • 异步——并发 性能高、体验好

    Promise用法:

    1 let p=new Promise((resolve, reject)=>{
    2     resolve();
    3 
    4     reject();
    5 });
    6 
    7 p.then(()=>{}, ()=>{});  // 第一个函数为resolve  第二个函数为reject

    Promise使用实例:

    • Promise.all(); 与:所有的都成功
    • Promise.race(); 或:只要有一个完成
     1 //Promise -> 用同步的方式实现异步
     2 Promise.all([
     3   $.ajax('/banner_data'),
     4   $.ajax('/item_data'),
     5   $.ajax('/user_data'),
     6   $.ajax('/news_data'),
     7 ]).then(function(arr){
     8   let [banners, items, user, news]=arr;
     9 }, function(){});
    10 // then方法第一个函数为resolve函数(成功)  第二个函数为reject函数(失败)

    注意:

    • Proimse有用——解除异步操作
    • Promise有局限——带逻辑的异步操作麻烦

    7.generator

    generator - 生成器  --》 能暂停

    简单实例 :

     1 // 生成器函数
     2 function *show(){
     3   alert('aaa');
     4   yield;  // 暂停 
     5   alert('bbb');
     6 }
     7 
     8 let gen = show();
     9 
    10 gen.next();   // aaa
    11 
    12 setTimeout(function (){
    13   gen.next();   // bbb
    14 }, 5000);

    yield实例:

     1 // yield:
     2 // 1.可以传参数      function (a, b, c)
     3 // 2.可以返回         return
     4 
     5 // yield返回值
     6 function *show(){
     7   alert('aaa');
     8   let a=yield;
     9   alert('bbb'+a);
    10 }
    11 
    12 let gen=show();
    13 
    14 gen.next();      // aaa
    15 gen.next(12);  // bbb12
    16 
    17 
    18 // yield传值:
    19 function *show(){
    20   alert('aaa');
    21   yield 55;
    22 
    23   alert('bbb');
    24   return 89;
    25 }
    26 
    27 let gen=show();
    28 
    29 let res1=gen.next(); 
    30 console.log(res1);    //{value: 55, done: false}
    31 
    32 let res2=gen.next(); 
    33 console.log(res2);    //{value: 89, done: true}

    generator+promise配合(并不常用):

    1.外来的runner辅助执行——不统一、不标准、性能低
    2.generator函数不能写成箭头函数

    补充 - async/await - 常用:

    大致写法:

    1 // async写法:
    2 async function xxx(){
    3     ....
    4     let res=await xx;
    5     ....
    6     let res2=await xxx;
    7     // let 结果=await 异步操作;(异步操作可以是promise、generator、另一个async函数其中的任意一个)  
    8     ....
    9 }

    实例(async使用及错误处理):

     1 async function show(){
     2   try{
     3     let data1=await $.ajax({url: '1.txt', dataType: 'json'});
     4     let data2=await $.ajax({url: '33.txt', dataType: 'json'});
     5     let data3=await $.ajax({url: '3.txt', dataType: 'json'});
     6 
     7     console.log(data1, data2, data3);
     8   }catch(e){
     9     alert('有问题');
    10 
    11     throw new Error('错了....');
    12   }
    13 }
    14 
    15 show();

    8.模块化ES6

    打包、编译:

    • 编译:ES6 -> ES5  使用babel
    • 打包: browserify

    (1)babel

    最初作为一个polyfill工具使用,只是用来扩充浏览器的功能,可以用来将ES6编译成ES5

    babel官网:http://babeljs.io/,babel需要node.js,使用babel之前要先安装node,node官网:https://nodejs.org/en

    node:语言、环境、平台    node的npm:包管理(类似python的pip)

    安装使用babel:

    • 替换源:npm install -g cnpm --registry=https://registry.npm.taobao.org
    • 项目初始化:cnpm init
    • 在项目中下载babel:cnpm install --save-dev babel-cli
    • 安装之后,改写package.json包(配置文件)如下:
     1 {
     2   //...略去了其他的内容
     3   "devDependencies": {
     4     "babel-cli": "^6.0.0"  //这里的版本号为安装的时候的版本号,一般安装的时候就会自动写入
     5   },
     6   "scripts": {
     7     "build": "babel src -d lib" 
     8     //编译整个 src 目录并将其输出到 lib 目录。这里的src指的是需要转换的目录,lib指的是输出的内容的存放目录
     9   },
    10 }

    然后在项目中新建.babelrc然后配置babelrc:

    1 {
    2     "presets": ["env"]
    3 }

    然后执行:cnpm i babel-preset-env -D

    最后编译:npm run build

     1 // 编译前的代码:
     2 let a=12;
     3 let [b,c]=[5,8];
     4 
     5 const show=()=>{
     6   alert(a+b+c);
     7 };
     8 
     9 show();
    10 
    11 // 编译后的代码:
    12 "use strict";
    13 
    14 var a = 12;
    15 var b = 5,
    16     c = 8;
    17 
    18 
    19 var show = function show() {
    20   alert(a + b + c);
    21 };
    22 
    23 show();

    (2)browserify

    browesrify -> 和模块化配合一起用

  • 相关阅读:
    C#类型转换
    C#面向对象之多态
    C#面向对象之继承
    C#各种字段类型对比
    C#关键字:static
    C#面向对象之封装
    C#关键字:访问修饰符
    C#类型成员:构造函数
    C#类型成员:方法
    C#类类型
  • 原文地址:https://www.cnblogs.com/wyb666/p/9607575.html
Copyright © 2011-2022 走看看