zoukankan      html  css  js  c++  java
  • 学习ES6(上)

    • 在写vue项目时,很多地方用了ES6语法,让代码变得更简洁,所以在此将ES6语法总结一下

    ES6的开发环境搭建

    • 现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成ES5的语法。我们知道Webpack是有自动编译转换能力的,除了Webpack自动编译,我们还可以用Babel来完成,接下来我们使用babel把ES6编译成ES5.

    建立工程目录:

    • 先建立一个项目的工程目录,并在目录下边建立两个文件夹:src和dist
      • src:书写ES6代码的文件夹,写的js程序都放在这里。
      • dist:利用Babel编译成的ES5代码的文件夹,在HTML页面需要引入的时这里的js文件。

    编写index.html:

    • 文件夹建立好后,我们新建一个index.html文件。
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title></title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <script src="./dist/index.js"></script>
        </head>
        <body>
            Hello ECMA Script 6
        </body>
    </html>
    
    • 需要注意的是在引入js文件时,引入的是dist目录下的文件。
    • <script src="./dist/index.js"></script>

    编写index.js

    • 在src目录下,新建index.js文件。这个文件很简单,我们只作一个a变量的声明,并用console.log()打印出来。
    let a=1;
    console.log(a);
    
    • 我们用了let声明,这里let是ES6的一种声明方式,接下来我们需要把这个ES6的语法文件自动编程成ES5的语法文件

    初始化项目

    • 在安装Babel之前,需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具,进入项目目录,输入下边的命令:
      npm init -y
    • -y代表全部默认同意,就不用一次次按回车了。命令执行完成后,会在项目根目录下生产package.json文件。
    {
      "name": "es6",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }
    
    • 可以根据自己的需要进行修改,比如我们修改name的值。

    全局安装Babel-cli

    • 在终端中输入以下命令,如果你安装很慢的话,可以使用淘宝镜像的cnpm来进行安装

    本地安装babel-preset-es2015 和 babel-cli

    npm install --save-dev babel-preset-es2015 babel-cli

    • 安装完成后,我们可以看一下我们的package.json文件,已经多了devDependencies选项。
    "devDependencies": {
        "babel-cli": "^6.24.1",
        "babel-preset-es2015": "^6.24.1"
      }
    

    新建.babelrc

    • 在根目录下新建.babelrc文件,并打开录入下面的代码
    {
        "presets":[
            "es2015"
        ],
        "plugins":[]
    }
    
    • 这个文件我们建立完成后,现在可以在终端输入的转换命令了,这次ES6成功转化为ES5的语法。
      babel src/index.js -o dist/index.js

    简化转化命令:

    • 在学习vue 的时候,可以使用npm run build 直接利用webpack进行打包,在这里也希望利用这种方式完成转换。打开package.json文件,把文件修改成下面的样子。
    {
      "name": "es6",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "build": "babel src/index.js -o dist/index.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-cli": "^6.24.1",
        "babel-preset-es2015": "^6.24.1"
      }
    }
    
    • 修改好后,以后我们就可以使用 npm run build 来进行转换了。

    新的声明方式

    • var:在ES6中,var是用来声明全局变量
    • let :声明局部变量,可以防止数据的污染
    • const:声明常量,注意这个声明后,之后都不要改变它

    变量的解构赋值

    • ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量,并且让我们的程序结构更清晰。也许你还是不太明白,那先来一个最简单的数组解构赋值来进行赋值。

    数组的解构赋值:

    简单的数组解构:

    以前,为变量赋值,我们只能直接指定值。比如下面的代码:

    let a=0;
    let b=1;
    let c=2;
    
    • 而现在我们可以用数组解构的方式来进行赋值。
      let [a,b,c]=[1,2,3];
    • 上面的代码表示,可以从数组中提取值,按照位置的对象关系对变量赋值。
    数组模式和赋值模式统一:
    • 可以简单的理解为等号左边和等号右边的形式要统一,如果不统一解构将失败。
      let [a,[b,c],d]=[1,[2,3],4];
    • 如果等号两边形式不一样,很可能获得undefined或者直接报错。
    解构的默认值:
    • 解构赋值是允许你使用默认值的,先看一个最简单的默认是的例子。
    let [foo = true] =[];
    console.log(foo); //控制台打印出true
    
    • 上边的例子数组中只有一个值,可能你会多少有些疑惑,我们就来个多个值的数组,并给他一些默认值。
    let [a,b="JSPang"]=['技术胖']
    console.log(a+b); //控制台显示“技术胖JSPang”
    
    • 现在我们对默认值有所了解,需要注意的是undefined和null的区别。
    let [a,b="JSPang"]=['技术胖',undefined];
    console.log(a+b); //控制台显示“技术胖JSPang”
    
    • undefined相当于什么都没有,b是默认值。
    let [a,b="JSPang"]=['技术胖',null];
    console.log(a+b); //控制台显示“技术胖null”
    
    • null相当于有值,但值为null。所以b并没有取默认值,而是解构成了null。

    对象的解构赋值

    • 解构不仅可以用于数组,还可以用于对象。
    let {foo,bar} = {foo:'JSPang',bar:'技术胖'};
    console.log(foo+bar); //控制台打印出了“JSPang技术胖”
    
    • 注意:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性名同名,才能取到正确的值。

    圆括号的使用

    • 如果在解构之前就定义了变量,这时候你再解构会出现问题。下面是错误的代码,编译会报错。
    let foo;
    {foo} ={foo:'JSPang'};
    console.log(foo);
    
    • 要解决报错,使程序正常,我们这时候只要在解构的语句外边加一个圆括号就可以了。
    let foo;
    ({foo} ={foo:'JSPang'});
    console.log(foo); //控制台输出jspang
    

    字符串解构

    • 字符串也可以解构,这是因为,此时字符串被转换成了一个类似数组的对象。
    const [a,b,c,d,e,f]="JSPang";
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
    console.log(e);
    console.log(f);
    

    扩展运算符和rest参数

    rest参数

    • rest参数形式为:...变量名
    • rest参数搭配的变量是一个数组,该变量会将函数的参数放入一个数组中,所以可以用rest参数代替argouments对象,请看下面一个例子:
        function sortNumbers1 () {
         return Array.prototype.slice.call(arguments).sort();
    }
    const sortNumbers2 = (...values) =>{
        return values.sort();
    }
    console.log(sortNumbers1(9,2,5,1));
    console.log(sortNumbers2(9,2,5,1));
    
    rest参数和arguments对象的区别
    - arguments 对象不是一个真实的数组;上文的``` Array.prototype.slice.call(arguments)```就是将 arguments 对象转化成一个真数组,而rest参数是真实的 Array 实例,也就是说你能够在它上面直接使用所有的数组方法
    
    • rest 参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
      function f(a, ...b, c) { ... } // 报错

    字符串模版

    • ES6新增了字符串的操作,就是字符串模板,字符串模版的出现让我们再也不用拼接变量了,而且支持在模板里有简单计算操作

    字符串模版

    • 我们先看看ES5的字符串拼接:
    let jspang='技术胖';
    let blog = '非常高兴你能看到这篇文章,我是你的老朋友'+jspang+'。这节课我们学习字符串模版。';
    document.write(blog);
    
    • 这种方式很麻烦,也很容易出错
    • 再看看ES6的字符串拼接:
    let jspang='技术胖';
    let blog = `非常高兴你能看到这篇文章,我是你的老朋友${jspang}。这节课我们学习字符串模版。`;
    document.write(blog);
    
    • 可以从浏览器上看到跟上面的结果一样

    对运算的支持:

    let a=1;
    let b=2;
    let result=`${a+b}`;
    document.write(result);
    

    字符串查找

    • ES6直接用includes就可以判断,存在就返回true,不存在返回false,不再返回索引值

    复制字符串

    • 我们有时候是需要字符串重复的,比如分隔符和特殊符号,这时候复制字符串就派上用场了,语法很简单。
      document.write('jspang|'.repeat(3));

    ES6数字操作

    数字判断和转换

    数字验证Number.isFinite( xx )
    • 可以使用Number.isFinite( )来进行数字验证,只要是数字,不论是浮点型还是整形都会返回true,其他时候会返回false。
    let a= 11/4;
    console.log(Number.isFinite(a));//true
    console.log(Number.isFinite('jspang'));//false
    console.log(Number.isFinite(NaN));//false
    console.log(Number.isFinite(undefined));//false
    

    NaN验证

    • NaN是特殊的非数字,可以使用Number.isNaN()来进行验证。下边的代码控制台返回了true
      console.log(Number.isNaN(NaN));

    判断是否为整数Number.isInteger(xx)

    let a=123.1;
    console.log(Number.isInteger(a)); //false
    

    整数转换Number.parseInt(xxx)和浮点型转换Number.parseFloat(xxx)

    let a='9.18';
    console.log(Number.parseInt(a)); 
    console.log(Number.parseFloat(a));
    
  • 相关阅读:
    Java高级之类结构的认识
    14.8.9 Clustered and Secondary Indexes
    14.8.4 Moving or Copying InnoDB Tables to Another Machine 移动或者拷贝 InnoDB 表到另外机器
    14.8.3 Physical Row Structure of InnoDB Tables InnoDB 表的物理行结构
    14.8.2 Role of the .frm File for InnoDB Tables InnoDB 表得到 .frm文件的作用
    14.8.1 Creating InnoDB Tables 创建InnoDB 表
    14.7.4 InnoDB File-Per-Table Tablespaces
    14.7.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量和大小
    14.7.1 Resizing the InnoDB System Tablespace InnoDB 系统表空间大小
    14.6.11 Configuring Optimizer Statistics for InnoDB 配置优化统计信息用于InnoDB
  • 原文地址:https://www.cnblogs.com/wan-fei/p/8384261.html
Copyright © 2011-2022 走看看