ECMAScript6

2018-06-24 01:55:19来源：未知阅读 ()

  1  1、开发环境搭建
  2     1) 版本控制工具
  3     svn 和 git
  4     
  5     2) 下载安装 nodeJS 和 npm
  6     
  7     3) 在开发工具 (Hbuilder) 中配置 cmd 终端，通过终端安装 Babel 编译器
  8     1.初始化项目
  9     在安装Babel之前，需要用npm init先初始化我们的项目。打开终端或者通过cmd打开命令行工具，进入项目目录，输入下边的命令：
 10     1    npm init -y
 11     -y代表全部默认同意，就不用一次次按回车了。命令执行完成后，会在项目根目录下生产package.json文件。
 12     {
 13       "name": "es6",
 14       "version": "1.0.0",
 15       "description": "",
 16       "main": "index.js",
 17       "scripts": {
 18         "test": "echo \"Error: no test specified\" && exit 1"
 19       },
 20       "keywords": [],
 21       "author": "",
 22       "license": "ISC"
 23     }
 24     可以根据自己的需要进行修改，比如我们修改name的值。
 25     
 26     2.全局安装 Babel-cli 
 27     在终端中输入以下命令,如果你安装很慢的话，可以使用淘宝镜像的cnpm来进行安装。
 28     1    npm install -g babel-cli
 29     注：安装时有 "npm ERR! Windows_NT 6.1.7601" 报错情况别急可如下处理：
 30         方法一：
 31         1、关闭npm的https
 32             npm config set strict-ssl false
 33         2、设置npm的获取地址
 34             npm config set registry "http://registry.npmjs.org/"
 35         方法二：
 36         还在获取中
 37     安装好 Babel-cli 后可以通过 "babel 编译文件的js路径 -o 引入文件的js路径" 命令来生成引入文件中的 js ，但此时的 js 文件还是没有被编译，还是使用了 ES6 的语法，此时我们还需要安装转化宝才能成功转换
 38     
 39     3.本地安装 babel-preset-es2015 和 babel-cli
 40     1    npm install --save-dev babel-preset-es2015 babel-cli
 41     安装完成后，我们可以看一下我们的package.json文件，已经多了devDependencies选项。
 42       "devDependencies": {
 43         "babel-cli": "^6.24.1",
 44         "babel-preset-es2015": "^6.24.1"
 45       }
 46     
 47     4.新建 .babelrc 文件
 48     在根目录下新建.babelrc文件，并打开录入下面的代码
 49     {
 50         "presets":[
 51             "es2015"
 52         ],
 53         "plugins":[]
 54     }
 55     这个文件建立完成后，我们就可以在终端输入 "babel src/index.js -o dist/index.js" 转化命令将 ES6 转化为 ES5 语法
 56     
 57     5.简化转化命令
 58     在学习vue 的时候，可以使用 npm run build 直接利用 webpack 进行打包，在这里也希望利用这种方式完成转换。打开package.json文件，把文件修改成下面的样子。
 59     {
 60       "name": "es6",
 61       "version": "1.0.0",
 62       "description": "",
 63       "main": "index.js",
 64       "scripts": {
 65         "test": "echo \"Error: no test specified\" && exit 1"
 66       },
 67       "keywords": [],
 68       "author": "",
 69       "license": "ISC",
 70       "devDependencies": {
 71          "babel-cli": "^6.26.0",
 72          "babel-preset-es2015": "^6.24.1"
 73        }
 74     }
 75     修改好后，以后我们就可以直接使用 npm run build 来进行转换了。
 76     
 77 2、变量
 78     var          重复声明、函数级
 79     let           不能重复声明、块级、变量
 80     const        不能重复声明、块级、常量
 81     
 82     箭头函数
 83     1、如果只有一个参数, ()可以省
 84     2、如果只有一个return, {}可以省
 85     
 86 3、解构赋值
 87     1.数组的结构赋值
 88     一 一对应原则，左右两边不统一会报错
 89     注：undefined 和 null 的区别
 90     
 91     let [a,b="JSPang"]=['技术胖',undefined];
 92     console.log(a+b); //控制台显示“技术胖JSPang”
 93     undefined相当于什么都没有，b是默认值。
 94     
 95     let [a,b="JSPang"]=['技术胖',null];
 96     console.log(a+b); //控制台显示“技术胖null”
 97     null相当于有值，但值为null。所以b并没有取默认值，而是解构成了null。
 98     
 99     2.对象的结构赋值
100     对象是根据属性名来确定取值的
101     注：圆括号的使用
102     let foo;
103     ({foo} ={foo:'JSPang'}); //不加圆括号会报错
104     console.log(foo); //控制台输出jspang
105     
106     3.字符串结构赋值
107     const [a, b, c, d] = "wang";
108     console.log(a);
109     console.log(b);
110     console.log(c);
111     console.log(d);
112     
113 4、扩展运算符和 rest 运算符
114     function wang(…args){
115         console.log(args[0]);
116         console.log(args[1]);
117         console.log(args[2]);
118         console.log(args[3]);
119     }
120     wang(1,2,3);
121     
122 5、字符串模板
123     字符串查找/判断是否存在
124     indexOf()       返回索引值
125     includes()       返回布尔值
126     startsWith()   判断开头是否存在
127     endsWith()   判断开头是否存在
128     
129 6、ES6数字操作
130     //二进制声明    Binary
131     let binary = 0B010101;
132     console.log(binary);//21
133     
134     //八进制声明     Octal
135     let octal = 0o666;
136     console.log(octal);//438
137     
138     Number 对象