学习ES6(上)

时间 2019-11-09

标签学习 es6 栏目 JavaScript 繁體版

原文原文链接

在写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-clihtml

安装完成后，咱们能够看一下咱们的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容许按照必定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中能够大量减小咱们的代码量，而且让咱们的程序结构更清晰。也许你仍是不太明白，那先来一个最简单的数组解构赋值来进行赋值。

数组的解构赋值：

简单的数组解构：

之前，为变量赋值，咱们只能直接指定值。好比下面的代码：vue

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参数)[http://www.jb51.net/article/118958.htm]webpack

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,再也不返回索引值

复制字符串

咱们有时候是须要字符串重复的，好比分隔符和特殊符号，这时候复制字符串就派上用场了，语法很简单。

### 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
```es6

NaN验证

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

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

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

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

let a='9.18';
console.log(Number.parseInt(a));
console.log(Number.parseFloat(a));
```npm

1. es6简单学习---（上）。
2. 学习es6
3. es6学习
4. ES6学习（四）
5. Javascript ES6学习
6. ES6学习
7. ES6学习(下)
8. es6的学习
9. ES6学习（二）
10. ES6学习（1）
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 适用于PHP初学者的学习线路和建议