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 对象