学习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));
原文地址:https://www.cnblogs.com/wan-fei/p/8384261.html