概念:
1.ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。
2.因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。
3.虽然目前不是所有浏览器都兼容,但是很多程序员实际项目当中已经开始使用ES6开发了;
依赖:
npm(包管理工具)
-v查看版本
-g全局安装
在mac的终端里,需要添加 sudo 前缀,输入密码,才能全局安装;
npm init 初始化
会创建一个 package.json 文件 (包管理文件)
npm install jquery
安装jquery(等工具)
--save
将配置,保存到 package.json 文件的依赖中去;
(依赖:项目所需要的工具,当项目初始化(npm install)的时候,会主动帮我们安装依赖里面的工具)
npm install jquery@1.12.4 --save
可以使用 @ 来安装指定版本
Babel转码器
Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
使用方法:
依赖: Node.js
npm install -g babel-cli (全局安装一个命令行工具)
1.项目初始化
npm init
2.全局安装babel
npm install --save-dev babel-cli babel-preset-env
3.在项目目录下创建一个文件
后缀名为 .babelrc
内容为:
presets(预设)
{
"presets": ["env"]
}
4.命令行操作,执行转码
babel 01.js -o 01babel.js
将 01.js 进行转码,新建一个 01babel.js 承接;
babel-node 01.js
转码运行,但是不会生成新文件;
webpack脚手架工具
可以将 js css 等文件,打包生成一个文件;
使用方法:
依赖: npm install -g webpack (webpack脚手架工具)
1.项目初始化
npm init
2.打包,生成新文件;
webpack 01.js 02.js
将01.js进行打包,生成02.js
01.js 中,引入的文件也会被打包进来;
使用方法2: (配置文件打包)
webpack.config.js
最常用的ES6特性
let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments
声明变量:
let
用途类似于 var 都是用来声明变量的,但是又有很大的区别;
1. let 为JavaScript新增了 块级作用域 ,使用 let 声明的变量,只在 let 命令所在的代码块内有效;
例如:
let name = 'zach'
while (true) {
let name = 'obama'
console.log(name) //obama
break
}
console.log(name) //zach
外面的 let 并不会影响里面的内容;
2. let 可以避免变量泄露为全局变量
例如:
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
用 var 声明的 i 作用域是全局,所以每一次循环新的i值都会覆盖旧值,导致即使 a[6] 会出现最终的值 10;
而用 let 则不会出现这样的问题:
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 6
3.let 不可以提前声明(变量提升),也不可以重复声明
const
同样是声明变量,但是声明的是 常量.(常量的值不能改变)
原型:
ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。
新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。
例如:
class Animal {
constructor(){
this.type = 'animal'
}
says(say){
console.log(this.type + ' says ' + say)
}
}
let animal = new Animal()
animal.says('hello') //animal says hello
class Cat extends Animal {
constructor(){
super()
this.type = 'cat'
}
}
let cat = new Cat()
cat.says('hello') //cat says hello
上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。
简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实力对象可以共享的。
Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。
上面定义了一个Cat类，该类通过extends关键字，继承了Animal类的所有属性和方法。
super关键字，它指代父类的实例（即父类的this对象）
子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。
ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
箭头函数(arrow function)
例如:
function(i){ return i + 1; } //
(i) => i + 1 //ES6
特性:箭头函数里面的this指向父级;
模板字符串 `` (反引号)
在模板字符串中,可以回车换行,拼接也很方便,把变量放在 ${} 里面就行;
解构
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构
例如:
let cat = 'ken'
let dog = 'lili'
let zoo = {cat, dog}
console.log(zoo) //Object {cat: "ken", dog: "lili"}
声明了2个变量,cat dog,再声明 zoo = {cat,dog} 就可以把这两个合并;
数组的解构:
let [a,b,c] = [1,2,3];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
对象的解构:
let dog = {type: 'animal', many: 2}
let { type, many} = dog
console.log(type, many) //animal 2
参数默认值
在ES6中有函数参数默认值,当你没有给函数传递参数的时候,就会使用默认值
例如:
function animal(type = 'cat'){
console.log(type)
}
animal()
type = 'cat' //此时, cat 就是函数的默认参数
在调用函数时,如果不写参数,就会默认有一个参数 cat,如果写了,就会替换它;
总结
以上就是ES6最常用的一些语法，可以说这20%的语法，在ES6的日常使用中占了80%...
