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));