ES6新特性详解-优快云博客

ES6学习之路-02

ES6声明变量的方式

var方式

var在ES6里是用来升级全局变量的，我们可以先作一个最简单的实例，用var声明一个变量a,然后用console.log进行输出。如何理解它的作用是声明全局变量那？我们用匿名函数给他进行一个包裹，然后在匿名函数中调用这个a变量，看看能不能调用到。

var a=2;
{
   var a=3;
}
console.log(a);
复制代码

上述代码打印出3，可见var 声明变量的范围是全局的。

let方式

通过上面简单的例子，我们对var的全局声明有了一定了解。那跟var向对应的是let，它是局部变量声明。还是上面的例子，我们试着在区块里用let声明。

let a = 2; {
    let a = 3;
}
console.log(a);
复制代码

babel转换成es5的文件内容为：

var a = 2;{
    var _a = 3;
}
console.log(a);
复制代码

let的作用范围

et声明只在区块内起作用，外部是不可以调用的。下面的代码执行时会报错。

{
   let a=3;
}
console.log(a);
复制代码

let的作用是防止数据污染，在一个大型的项目中，使用let安全性会非常高。

const方式

在程序开发中，有些变量是希望声明后在业务层就不再发生变化了，简单来说就是从声明开始，这个变量始终不变，就需要用const进行声明。

const a = "JSPang";
var a = '技术胖';
console.log(a);
复制代码

上面的代码编译阶段就报错了，原因就是我们const声明的变量是不可以改变的。

变量的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构赋值在实际开发中可以大量减少我们的代码量，并且让我们的程序结构更清晰。

数组的解构赋值

简单的数组解构

以前，为变量赋值，我们只能直接指定值。比如下面的代码：

let a = 0;
let b = 1;
let c = 2;
复制代码

而现在我们可以用数组解构的方式来进行赋值。

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="JSPang"]=['技术胖']
console.log(a+b); //控制台显示“技术胖JSPang”
复制代码

现在我们对默认值有所了解，需要注意的是undefined和null的区别。

let [a,b="JSPang"]=['技术胖',undefined];
console.log(a+b); //控制台显示“技术胖JSPang”
复制代码

undefined相当于什么都没有，b是默认值。

let [a,b="JSPang"]=['技术胖',null];
console.log(a+b); //控制台显示“技术胖null”
复制代码

null相当于有值，但值为null。所以b并没有取默认值，而是解构成了null。

对象的解构赋值

解构不仅可以用于数组，还可以用于对象。

let { foo, bar } = { foo: "foo", bar: "bar" }
console.log(foo)
console.log(bar)
复制代码

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

扩展运算符和rest运算符

对象扩展运算符（...）

当编写一个方法时，我们允许它传入的参数是不确定的。这时候可以使用对象扩展运算符来作参数，看一个简单的列子：

function jspang(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);
 
}
jspang(1,2,3);
复制代码

扩展运算符的用处

先用一个例子说明，我们声明两个数组arr1和arr2，然后我们把arr1赋值给arr2，然后我们改变arr2的值，你会发现arr1的值也改变了，因为我们这是对内存堆栈的引用，而不是真正的赋值。

   /**扩展运算符的用处-数组赋值 */
let arr1 = ["du", "ming", "es6"]
let arr2 = arr1
console.log(arr2)
arr2.push("study")
console.log(arr1)
输出实例如下：
["du", "ming", "es6"]
["du", "ming", "es6", "study"]
复制代码

利用扩展运算符可以解决数组深度构造的问题。

let arr3 = ["du", "ming", "es6"]
let arr4 = [...arr3]
console.log(arr3)
arr4.push("study")
console.log(arr3)

(3) ["du", "ming", "es6"]
(3) ["du", "ming", "es6"]
复制代码

可见arr3并没有被改变，与arr4是各自独立占一块内存。

rest运算符

如果你已经很好的掌握了对象扩展运算符，那么理解rest运算符并不困难，它们有很多相似之处，甚至很多时候你不用特意去区分。它也用...（三个点）来表示，我们先来看一个例子。

    /**rest运算符 */
function restOper(first, ...args) {

    console.log(args.length)
}
restOper(0, 1, 2, 3, 4, 5, 6, 7)
打印出7 ，说明args中有7个元素。
复制代码

for...of循环

function restOperForOf(first, ...args) {
    for (let val of args)
        console.log(val)
}
restOperForOf(0, 1, 2, 3, 4, 5, 6, 7)
复制代码

for...of的循环可以避免我们开拓内存空间，增加代码运行效率，所以建议大家在以后的工作中使用for...of循环。有的小伙伴会说了，反正最后要转换成ES5，没有什么差别，但是至少从代码量上我们少打了一些单词，这就是开发效率的提高。

字符串模板

这节主要学习ES6对字符串新增的操作，最重要的就是字符串模版，字符串模版的出现让我们再也不用拼接变量了，而且支持在模板里有简单计算操作。

先看ES5下的字符串拼接实例

let username = 'jake1036'
let blog = '欢迎大家来到' + username + '博客'
document.write(blog)
复制代码

ES5下必须用+username+这样的形式进行拼接，这样很麻烦而且很容易出错。ES6新增了字符串模版，可以很好的解决这个问题。字符串模版不再使用'xxx'这样的单引号，而是换成了xxx这种形式(可以看下面的代码)，也叫连接号。这时我们再引用jspang变量就需要用${username}这种形式了，我们对上边的代码进行改造。

/**es6改造 */
let username_es6 = 'jake1036'
let blog_es6 = `es6欢迎大家来到 ${username}
博客`
document.write(blog_es6)
复制代码

还可以在字符串中增加html样式和代码

    /**es6字符串添加html代码 */
let username_es6_html = 'jake1036'
let blog_es6_html = `<br/>es6欢迎大家来到<b> ${username}</b>
博客`
document.write(blog_es6_html)
复制代码

对运算的支持

    /**对运算符的支持 */
let a_es6 = 1
let b_es6 = 2
document.write(`<br/>a+b:${a_es6+b_es6}`)
复制代码

字符串函数

    /**字符串函数的应用 */
let str_es6 = `测试es6字符串函数查找，支持汉字`
console.log(str_es6.includes('es6'))
document.write('es6|'.repeat(3)); //字符串重复
复制代码

ES6数字操作

二进制和八进制

二进制和八进制数字的声明并不是ES6的特性，我们只是做一个常识性的回顾。

二进制声明二进制的英文单词是Binary,二进制的开始是0（零），然后第二个位置是b（注意这里大小写都可以实现），然后跟上二进制的值就可以了。

let binaryVal = 0B0110
console.log(binaryVal)
复制代码

控制台打印出6.

八进制声明八进制的英文单词是Octal，也是以0（零）开始的，然后第二个位置是O（欧），然后跟上八进制的值就可以了。

let b=0o666;
console.log(b);
复制代码

控制台打印出438。

数字判断和转换

数字验证Number.isFinite( xx ) 可以使用Number.isFinite( )来进行数字验证，只要是数字，不论是浮点型还是整形都会返回true，其他时候会返回false。

/**判断是否是数字 */
let numberVal = 11 / 4
console.log(Number.isFinite(numberVal)) //true
console.log(Number.isFinite(0.3434)) //true
console.log(Number.isFinite('test')) //false
复制代码

NaN验证 NaN是特殊的非数字，可以使用Number.isNaN()来进行验证。下边的代码控制台返回了true。

console.log(Number.isNaN(NaN));
复制代码

判断是否为整数Number.isInteger(xx)

console.log(Number.isInteger(0.3434))
复制代码

参考

jishupang老师博客