[JavaScript知识库]ES6数据类型新用法和解构赋值

ES6是什么？和js有什么区别？

ES时ESMAScript的简称，

JS由三部分组成，ESMAScript,BOM,DOM,

ES是JS中的语法规范；

BOM全称Browser Object Model，浏览器对象模型，主要处理浏览器窗口和框架,提供了独立于内容而与浏览器进行交互的对象。

DOM全称Document Object Model，文档对象模型，是HTML和XML文档的编程接口;它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。

let、const和var的区别

let 定义的变量只在let所在的代码块中有效，有块级作用域 值可更改

cosnt 表示定义一个只读的变量 无法被更改 （对象之类的取址赋值可以被更改）

var 是普通的定义变量的关键字?

浏览器兼容ES6

安装node,用npm安装babel

npm install babel-core@5

引用babel

我们把browser.min.js引入（文件位置的路径要确保正确）。并且设置第二个script标签的type为”text/babel”。

解构赋值

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

传统的变量赋值

var arr = [1,2,3]

var a = arr[0]

var b = arr[1]

var c = arr[2]

ES6解构赋值

var [a,b,c] = [1,2,3]

数组的解构赋值

解构赋值是可以嵌套的

var [a,b,[c1,c2]]? = [1,2,[3.1,3.2]]

var [a,b,c] = [1,2]

当左边的模式（你可以理解为格式）与右边不完全一样的时候，那么赋值过程中，只会给模式匹配成功的部分的变量赋值，例如：变量c没有在右边找到匹配的模式，所以无法进行赋值，但这并不影响变量a和变量b的赋值，因为它们在右边找到与之匹配的模式，这种叫做不完全解构。

允许设置默认值

var [a,b,c=3]? = [1,2]

var [a,b,c=3] = [1,2,4]

这个时候默认值3会被新的值4覆盖，c的值为4；注意：当新的值为undefined的时候，是不会覆盖默认值的。

对象的解构赋值

var? {a,b,c}? = {"a":1,"b":2,"c":3}

var {a,b,c} =?{"a":1,"c":3,"b":2}

这两段代码虽然有区别，但是结果都是一样的。

对象的解构赋值不会受到属性的排列次序影响（数组则会受影响），它是跟属性名关联起来的，变量名要和属性名一致，才会成功赋值。

var{ a }? ?= {"b":2}

如果变量找不到与其名字相同的属性，就会赋值不成功

如果你想给一个变量名与属性名不一样的变量解构赋值，可以这样写：

var { b:a }? =? { "b" : 2}

这样变量a同样可以赋值成功，a的值最终为2

对象的解构赋值也可以嵌套

var? { a:{ b }?}? = { "a" : { "b":1 } }

b的值为1

也可以指定默认值

var { a,b = 2? }? = { "a" : 1}

b的值为2

字符串的解构赋值

var [a,b,c,d,e,f]? = "我就是前端君"

a = 我

b = 就

c = 是

d = 前

e = 端

f = 君被转成了类似数组的对象

在解构赋值的过程中，将字符串

解构赋值的作用

1.交换变量的值

传统做法最常用的是引入第三个变量来临时存放

例：

var x? = 1;

var y = 2;?

var z = x;

x = y;

y = z;

解构赋值

var x = 1

var y = 2

[? x , y ]? = [? y , x ]?