从JavaScript到TypeScript（6）[过渡到ES6]

从JavaScript到TypeScript（6）

在文章开始前，请先根据标号阅读前一篇文章，专栏地址：Vue入门

文章目录 从JavaScript到TypeScript（6）过渡到ES6let命令详解const命令 模板字符串箭头函数Rest参数与展开运算符展开运算符 JavaScript的解构对象的解构 对象的简化

过渡到ES6 let命令详解

用法类似于var ，只不过声明的变量是局部变量，只在对应的代码块内有效，常常被用于各种for循环的计数器，防止计数器因为变量提升、全局相同变量的作用而发生错误。

举个例子：

//Example1
var count =11
for(let count =1 ;count< 10;count++)
{
    console.log(count)
}
console.log(count)

内外层count互不干扰。

结果如下：

除此之外for循环实际上是存在两个作用域的（）内是一个父级作用域，{}内是一个子级作用域。

举个例子：

//Example2
for(let count =1 ;count< 10;count++)
{
    let count =1
    console.log(count)
}

实际上将1输出了9次，结果如下图：

同时他还有几个不同点：

没有变量提升，也就是说声明的位置之后才能调用它。暂时性死区，只有代码块内存在let关键字声明的变量，这个代码块就被let所绑定，形成了封闭作用域，在let声明之前调用此变量会造成Referenceerror。在以前去调用未定义的变量只是Undefine。不允许重复声明，在一个作用域内，不允许存在相同名字的变量，函数的形参和内部变量相同也是不被允许的，注意这里指的是同一个作用域的变量，单独一个代码块就形成了一个新的作用域，可以重复的声明，遵循就近原则。在块级作用域里面声明函数，虽然不存在变量提升但是还是存在函数提升（ES6中函数声明更类似于var，会提升到全局作用域或者函数作用域前端），为了避免这个复杂的问题建议使用函数表达式（let声明函数表达式）来解决。 const命令

const声明一个只读的常量。一旦声明，常量的值就不能改变，这就意味着一旦声明，就必须立即初始化，不能留到以后赋值。

const声明的变量和let一样有很多共同点：

声明变量为块级作用域。不存在变量提升，且存在暂时性死区。在同一作用域下，与let一样不可重复声明。

举个例子：

//Example3
if(true)
{
    const Max=5
}
console.log(MAX)

结果报错：

模板字符串

通常我们输出的时候使用的模板都是这样的：

//Example4
var test_string= "Jszszzy"
console.log("This is "+test_string+" test")

但是这需要很多的+号去合并字符串，不过问题不大，有了模板字符串我们就可以这样用：

console.log(`This is ${test_string} test`)

可以直接将变量镶嵌进去。同时如果我们需要换行等 *** 作，不再需要麻烦的输入转义换行符，模板字符串，会将里面的空格和换行自动添加进去。效果如下：

console.log(`This is ${test_string} 
test`)

输出结果如下：

箭头函数

ES6允许使用 =>来构造函数。

形式如下：

var f = v => v;

其等价于函数表达式：

var f = function(v)
{
	return v
};

当然当你的函数不需要参数的时候，也可以写成：

var f =() => 5;

其代表的意思就是：

var f = function(){
	return 5
};

实际上你对Lambda表达式很理解的话，你就会意识到这其实就是lambda表达式。

但需要注意的是当我们需要返回一个对象类型的时候应该这样，因为外层的大括号被认定为代码块，所以要单独加上一个小括号。

//Example5
var f= () => (
    {
        name: "jszszzy",
        ages: 21
    }
);

console.log(f());

结果如下：

需要注意的是这样返回的其实是undefine。

//Example5
var f= () => {
    5
};

console.log(f());

原因是，加上{}是在语句大于有的时候，如果要返回内容就要手动书写return来返回，此状态下并不能独立返回。

Rest参数与展开运算符

Rest参数用于在函数声明一个可以传入任意数目的参数，其形式为：...变量名，该参数将多余的参数放入到一个数组当中，举个例子：

//Example6
var f2 = (a,b,...values)=>{
    return a+b+values.length;
}

console.log(f2(1,2,3,4,5,6))

此函数输出的是第一个参数的值加上第二个参数的值再加上剩余参数的数目。

所以结果为：

展开运算符

展开运算符是指可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；

还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

myFunction(...iterableObj);

在数组或函数参数中使用展开语法时, 该语法只能用于 可迭代对象（拥有对应的迭代器且可以被 for...of 循环遍历的对象，例如数组等）。

//Example7
let numbers = [1,2,3,4,5,6,7]
console.log(...numbers);

当然在对象构造的时候也可以使用, 将已有对象的所有可枚举(enumerable)属性拷贝到新构造的对象中.

举个例子：

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// 克隆后的对象: { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }

JavaScript的解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

以前，为变量赋值，只能直接指定值。

let a = 1;
let b = 2;
let c = 3;

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。关键在于模式匹配，只要对应的模式能够匹配的上，即使是空的也没有关系。

//Example9
let [ , ,third] = [, , "third_test"] 
console.log(third)

let [x,y,...z] = ['a',1,2,3,4,5,6]
console.log(z)

结果如下

还有一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

let [p,q] = [1,2,3]
console.log(p+q)

结果为3.

事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

let [x, y, z] = new Set(['a', 'b', 'c']);

结果为：x=a y=b z=c。

数组的解构同样可以用于值的互换，此时不需要创建临时变量，如下所示：

let a=1;
let b=2;
[a,b] = [b,a];
console.log(q)

有趣的是你如果使用前边通过解构创建的变量，会造成undefined，例如前边的p、q。

对象的解构

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

对象的解构与数组不同的是，对象并没有下标无法直接定位，需要通过属性来实现解构。

//Example10
var deconstruct_object={name :"jszszzy",age:12,gender :"bot"}
let {name,age,gender }= deconstruct_object;
console.log(name)

如代码所示，我们尝试解构对象，只要有对应的名字的属性都可以进行解构。

最后输出值如下：

jszszzy。

解构不仅仅可以针对对象的成员同时可以针对对象的方法，如下所示我们把对应的console类的log方法解构出来：

const {log} = console;
log(gender)

最后输出如下：

bot。

如果变量名与属性名不一致，必须写成下面这样。

//example11
let {name:first,gender:second} = deconstruct_object
log(first)

这实际上说明，对象的解构赋值是下面形式的简写:

简写之前：

let {name:name,gender:gender} = {name:"Jszszzy",gender:"bot"}

简写之后：

let {name,gender} = {name:"Jszszzy",gender:"bot"}

上面代码中，name是匹配的模式，first才是变量。真正被赋值的是变量first，而不是模式name。

由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

上面代码对数组进行对象解构。数组arr的0键对应的值是1，[arr.length - 1]就是2键，对应的值是3。方括号这种写法，属于“属性名表达式”。

对象的简化

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

//Example 12
const var_name = 'Jszszzy'
const var_age =12

let init_tester = {var_age}
log(init_tester)

直接构造的结果就是，对象里面包含了一个成员和构造的变量名字、内容都相同。

同时它也支持这样写，看起来可能更不好理解一点，但是效果和上文是一样的。

let init_tester2 = {var_name:var_name}

属性名就是变量名, 属性值就是变量值，为了让清楚看到这两个内容的不同，我把vscode里面的代码形式放出来看一看。

当这种写法用于返回值的时候，很容易就能构造出来一个对象：

//Example 13
function returnWithObject(x,y){
    return {x,y}
}
log(returnWithObject(var_name,var_age))

输出结果如下：

实际上不只有以上的简写办法，同时针对方法也有简写办法：

const o = {
  method() {
    return "Hello!";
  }
};

// 等同于

const o = {
  method: function() {
    return "Hello!";
  }
};