学习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));
posted @ 2018-01-31 10:16  不止于学  阅读(152)  评论(0)  编辑  收藏  举报