jaksgfdshkv

解构赋值

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 ]

posted on 2022-03-15 12:39  jaksgfdshkv  阅读(40)  评论(0编辑  收藏  举报

导航