1.什么是ES 6:
ES 6 全称 ECMAScript 6.0,也叫 ES 2015,它是2015年6月发布的,是JavaScript语言的下一代标准,它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
ECMAScript 和 JavaScript 的关系:前者是后者的规格,后者是前者的一种实现。
2.浏览器对ES6的支持:
ES6提供了许多新的特性,但并不是所有的浏览器都能够完美支持,附一段桌面端浏览器对ES6的支持情况:
- Chrome:51 版起便可以支持 97% 的 ES6 新特性。
- Firefox:53 版起便可以支持 97% 的 ES6 新特性。
- Safari:10 版起便可以支持 99% 的 ES6 新特性。
- IE:Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。(IE7~11 基本不支持 ES6)
3.ES6的一些新特性:
(1)let :用来声明变量,同 var 一样;
let a = 123;
console.log(a) //输出123
* let 和 var 的区别:
{
var a = 123;
console.log(a) //输出123
let b = 456;
console.log(b) //输出456
}
console.log(a); //输出123
console.log(b); //报错
区别1:var 具有全有作用域和局部作用域,而 let 具备块级作用域,也就是只有在代码块内才能进行输出,比如{ },if,for....
console.log(a) //输出undefined
var a = 123;
console.log(b); //报错
let b = 123;
区别2:var 是具有变量声明提升的,而 let 不允许变量声明提升;
var a = 10;
var a = 123;
console.log(a) //输出123,就近原则
let b = 10;
let b = 123;
console.log(b) //直接报错
区别3:var 是可以重复声明的,而 let 不允许重复声明;
//举一个例子:点击以下每个li中的数字,让控制台输出其对应的数字,HTML代码如下:
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
//JavaScript代码如下:
var lis = document.getElementsByTagName("li")
for(var i = 0;i < lis.length;i ++){
(function(i){
lis[i].onclick = function(){
console.log(i)
}
})(i)
}
//注:如果不使用立即执行函数,控制台只会输出一个5
//当将 var 换成是 let 时
for(let i = 0;i < lis.length;i ++){
lis[i].onclick = function(){
console.log(i)
}
}
//此时控制台就会正确输出对应的数字,因为使用let以后,循环体内部形成了各自单独的作用域
(2)const:声明一个只读的常量,一旦声明,常量的值就不能改变;并且声明之后,必须要赋值;
const A = 123; //人为规范:常量名全部使用大写
A = 456;
console.log(A) //直接报错
const 也是只在声明所在的块级作用域中才有效,同时也不允许声明提升和声明重复;
(3)字符串模板:
在ES6以前,只能通过 "字符串" + 变量 + " 字符串" 来进行字符串的拼接过程,并且不能直接换行,若要换行必须要加 \ (反斜杠)进行换行,大大的增加了代码量,而且容易出错;
在ES6中,是将变量放在${ }中,和字符串进行拼接,并且可以直接进行换行,书写格式:` 字符串${变量} ` ;注意是 ` 符号;
//ES6以前
ar a = 123;
console.log('hello' + a)
//ES6中
let a = 123;
console.log(`hello${a}`) //二者输出结果一样
(4)字符串中的一些方法:
includes:判断字符串中是否含有该字符,若有,返回true,反之返回false;
var a = "hello";
console.log(a.includes("a")) //输出true
repeat:获取字符串并可以进行重复n次:
var b = "ha";
console.log(b.repeat(3)) //输出hahaha
startsWith 和 endsWith :判断字符是否在字符串的头部和末尾,返回布尔值:
var a = "hello world!";
console.log(a.startsWith('h')); //true
console.log(a.endsWith('!')) // true
(5)数组的一些扩展方法:
先来看一下ES6以前的数组的复制,克隆:
var arr = [1,2,3];
var arr1 = arr;
console.log(arr == arr1) //true
//二者之间进行比较,比较的是地址
arr1[0] = 5; //将arr1中内容发生改变
console.log(arr == arr1) //true
console.log(arr,arr1) //二者都输出523
//不管怎么改变,它们的地址始终不会变,并且arr的值会根据arr1的改变而改变
var arr2 = [];
console.log(arr == arr2) //false
//只有为引用值时才能产生一个新的地址,也就是重新创建一个数组
for(var i = 0;i < arr.length;i ++){
arr2.push(arr[i]); //将arr中的值添加到arr2中
}
console.log(arr2) //523
arr2[0] = 2; //进行arr2的值的改变
console.log(arr,arr2) //输出523 和 223
//这是数组的深度克隆,前者不会因为后者的改变而改变
再来看ES6中的数组的克隆:
//第一种 Array.form方法
var arr = [1,2,3];
var arr1 = Array.from(arr);
console.log(arr,arr1); //结果相同,但地址不同
console.log(arr == arr1) //false
//第二种:数组的超引用
var arr2 = [...arr];
console.log(arr == arr2); //false
ES6以前,类数组想要拥有数组中方法必须要加 Array.prototype....方法:
function str(){
console.log(arguments); //arguments是获取所有形参,它本身就是一个类数组
arguments.push = Array.prototype.push; //添加数组中push方法
arguments.push(5);
console.log(arguments) //添加成功
}
str(1,2,3,4)
在ES6中,简化了代码,并且直接以数组的形式输出出来;
function str(...age){ //名字随便定义,相当于获取了所有的形参
console.log(age); //[1,2,3,4]
age.push(5); //直接使用数组中的方法
console.log(age) //[1,2,3,4,5]
}
str(1,2,3,4)