ES6新特性教程（一）

1.ES6历史
2.部署进度：各大浏览器对ES6的支持度达到90%。
3.ES6的开发环境搭建：如果是vue的项目，webpack可以自动编译转换功能的，不是vue的项目，可以使用Babel转码器转化。
4.Babel转码器：是ES6转ES5语法的一个转码器，从而在现有环境执行，可用ES6的语法进行编程。

简述过程：首先创建两个文件夹，dist/src
src：写es6的语法，
dist：通过环境搭建后(通过Babel转码器)可将es6的文件打包好成es5的放在dist下，自动生成ES5的语法形式，在index.html中引入的是dist/html，因为大部分浏览器还不支持es6.
步骤：(没有webpack的情况下，自己创建的项目)
A.npm init,初始化项目，创建package.json文件（命令执行完成后，会在项目根目录下生产package.json文件，也可执行npm init -y-y代表全部默认同意，就不用一次次按回车了）
B.npm install -g babel-cli,全局安装babel-cli（虽然已经安装了babel-cli，只是这样还不能成功进行转换，如果你不相信可以输入下边的命令试一下babel src/index.js -o dist/index.js在dist目录下确实生产了index.js文件，但是文件并没有变化，还是使用了ES6的语法在dist目录下确实生产了index.js文件，但是文件并没有变化，还是使用了ES6的语法）
C.npm install --save-dev babel-preset-es2015 babel-cli，本地安装babel-preset-es2015和babel-cli,这是安装包转换。安装后可发现package.json文件，已经多了devDependencies选项。
"devDependencies": { "babel-cli": "^6.24.1", "babel-preset-es2015": "^6.24.1" }
D.在目录新建.babelrc文件，录入下面的代码
{ "presets":[ "es2015" ], "plugins":[] }
E.最后在命令行执行：babel src/index.js -o dist/index.js，配置环境完成。在各个浏览器都可以正常显示了。
Traceur 转码器：Google 公司的Traceur转码器，也可以将 ES6 代码转为 ES5 代码。
ES6开发环境搭建的目的：目前ES5还是开发的主流，除了chrome等主流浏览器支持ES6写法外，其余浏览器想要正常显示，要搭建ES6开发环境，将ES6转换成ES5的语法形式，浏览器才能正式显示。

ES6语法学习：
var,let和const命令
var: 全局声明，会污染外部代码（var在ES6里是用来升级全局变量的）
let：局部声明，所声明的变量，只在let命令所在的代码块内有效。和var用法一样。（防止数据被污染）
const: 常亮声明，声明了之后就不能变了，const声明一个只读的常量。一旦声明，常量的值就不能改变。对于const来说，只声明不赋值，就会报错。
例子：

用var声明的循环
for(var i=0;i<10;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);  //循环体外的i变量被污染, 打印出 循环体外:10

用let声明的循环
for(let i=0;i<10;i++){
console.log('循环体中:'+i);
}
console.log('循环体外:'+i);  //你执行时会发现控制台报错了，找不到循环体外的i变量

const声明常量
const a="JSPang";
var a='技术胖';
console.log(a);  //报错，const声明的变量是不可以改变

变量的解析赋值
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解析。
- 数组的解构赋值：
  数组模式和赋值模式统一：
  let [a,b,c]=[1,2,3]; let [a,[b,c],d]=[1,[2,3],4] //等号左边和等号右边的形式要统一
  let [foo = true] =[]; //解析的默认值 console.log(foo); //控制台打印出true
  let [a,b="Hello"]=['哈喽'] console.log(a+b); //控制台显示“哈喽Hello” // 默认值
  let [a,b="Hello"]=['哈喽'',undefined]; console.log(a+b); //控制台显示“哈喽'Hello” //undefined相当于什么都没有，b是默认值
  let [a,b="Hello"]=['哈喽',null]; console.log(a+b); //控制台显示“哈喽null” //null相当于有值，但值为null。所以b并没有取默认值，而是解构成了null
- 对象的解构赋值
  let {foo,bar} = {foo:'Hello',bar:'哈喽'}; console.log(foo+bar); //控制台打印出了“Hello哈喽”
  圆括号的使用：
  如果在解构之前就定义了变量，这时候你再解构会出现问题。下面是错误的代码，编译会报错。
  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);
注意：在实战项目中解构Json数据格式还是很普遍的
扩展运算符和rest运算符
rest参数的形式为：…变量名；扩展运算符是三个点（…）
- 对象扩展运算符（…）
  当编写一个方法时，我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数。

 function hello(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);    //分别打印出 1,2,3，undefined。可以传入多个值，并且就算方法中引用多了也不会报错
  }      
hello(1,2,3);

扩展运算符的用处：
我们声明两个数组arr1和arr2，然后我们把arr1赋值给arr2，然后我们改变arr2的值，你会发现arr1的值也改变了，因为我们这是对内存堆栈的引用，而不是真正的赋值。

let arr1=['www','jspang','com'];
let arr2=arr1;
console.log(arr2);  //["www", "jspang", "com"]
arr2.push('shengHongYu');  
console.log(arr1);  //["www", "jspang", "com", "shengHongYu"]

let arr1=['www','jspang','com'];
//let arr2=arr1;
let arr2=[...arr1];  //对象扩展运算符的写法
console.log(arr2); //["www", "jspang", "com"]
arr2.push('shengHongYu');
console.log(arr2);  //["www", "jspang", "com", "shengHongYu"]
console.log(arr1);//["www", "jspang", "com"]，arr1并没有跟着改变。所以推荐这种写法。

rest运算符：
rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中

function jspang(first,...arg){  //rest运算符写法
    console.log(arg.length);  
}
jspang(0,1,2,3,4,5,6,7);

function add(...values) {
 let sum = 0;
 for (var val of values) {
 sum += val;
 }
 return sum;
} 
add(1, 2, 3) // 6

例子：
合并数组：

var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合并数组
arr1.concat(arr2, arr3) // [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合并数组
[...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]

与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest // [2, 3, 4, 5] 
const [first, ...rest] = [];
first // undefined
rest // []
const [first, ...rest] = ["foo"];
first // "foo"
rest // []

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5]; // 报错 
const [first, ...middle, last] = [1, 2, 3, 4, 5]; // 报错

将字符串转为数组

var str = 'hello'; 
// ES5 
var arr1 = str.split(''); // [ "h", "e", "l", "l", "o" ] 
// ES6 
var arr2 = [...str]; // [ "h", "e", "l", "l", "o" ]

字符串模版
字符串拼接 ${}：
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);
字符串查找 includes：
es5下： let jspang='技术胖'; let blog = '非常高兴你能看到这篇文章，我是你的老朋友技术胖。这节课我们学习字符串模版。'; document.write(blog.indexOf(jspang)); //返回的是索引值20
es6下： let jspang='技术胖'; let blog = '非常高兴你能看到这篇文章，我是你的老朋友技术胖。这节课我们学习字符串模版。'; document.write(blog.includes(jspang));
判断开头是否存在 startsWith：
blog.startsWith(jspang);
判断结尾是否存在 endsWith：
blog.endsWith(jspang);
复制字符串 repeat:
document.write('jspang|'.repeat(3));

ES6新特性教程（一）

ES6新特性教程（一）

ES6语法学习：

猜你喜欢