let的解构赋值_前端开发es6知识模块化、解构赋值、字符串模板

项目开发中一些常用的es6知识，主要是为以后分享小程序开发、node+koa项目开发以及vueSSR（vue服务端渲染）做个前置铺垫。

项目开发常用es6介绍

1、块级作用域 let const
2、箭头函数及this指向
3、promise、asnyc await语法
4、模块化 module export和import
5、解构赋值、字符串模板
……

Module

Module即模块的意思，在一些小项目中可能用不到这个概念。但是对于一些大型的、复杂的项目尤其在多人协作的情况下几乎是必须的。

在 ES6 之前，最主要的有 CommonJS 和 AMD 两种模块化解决方案。前者用于服务器，后者用于浏览器。ES6 的出现实现了模块功能，而且实现得相当简单完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。

简单的说ES6 模块是通过export命令指定输出的代码，再通过import命令导入

下面我们直接通过代码来演示：

<!
DOCTYPE html
>
<
html
>
<
head lang
=
"en"
><
meta charset
=
"UTF-8"
><
title
></
title
>
</
head
>
<
body
><
script type
=
"module"
>//index.htmlimport*as util from
"./js/scrpit.js"
;//用星号（*）指定一个对象，所有输出值都加载在这个对象上面util
.
func1
()//1util
.
func2
()//2console
.
log
(
util
.
a
==
3
)//true</
script
>
</
body
>
</
html
>
//script.js
exportfunctionfunc1
(){console
.
log
(
1
)
}
exportfunctionfunc2
(){console
.
log
(
2
)
}
exportvara
=3
;

可以看到body里面的script标签与我们平常写的稍有不同，加入了type="module"属性，这样浏览器才会知道这是一个 ES6 模块。

当然，模块的导入导出还可以有别的方式：

比如常用的导出模块的两种方式：

//script.js 方式1
exportfunctionfunc1
(){console
.
log
(
1
)
}
exportfunctionfunc2
(){console
.
log
(
2
)
}
exportvara
=3
;
//script.js 方式2
functionfunc1
(){console
.
log
(
1
)
}
functionfunc2
(){console
.
log
(
2
)
}
vara
=3
;
export{
func1
,
func2
,
a
}

常用的导入模块的两种方式：

///方式1
import{
func1
,
func2
,
a
}from
"./js/scrpit.js"
;
func1
()//1
func2
()//2
console
.
log
(
a
==
3
)//true
///方式2
import*as util from
"./js/scrpit.js"
;
util
.
func1
()//1
util
.
func2
()//2
console
.
log
(
util
.
a
==
3
)//true

解构赋值

其实在模块的导入中就已经用到了解构赋值。即按照一定模式，从数组和对象中提取值，并对变量进行赋值。

下面列举一些简单的示例，如需深入学习建议大家去学习阮一峰写的es6入门哈

//情景1
let
[
foo
,[[
bar
],baz
]]=[
1
,[[
2
],3
]];
foo
// 1
bar
// 2
baz
// 3
//情景2
let
[,,third
]=[
"foo"
,"bar"
,"baz"
];
third
// "baz"
//情景3
let
[
x
,,y
]=[
1
,2
,3
];
x
// 1
y
// 3
//情景4
let
[
head
,...
tail
]=[
1
,2
,3
,4
];
head
// 1
tail
// [2, 3, 4]
//情景5
let
[
x
,y
,...
z
]=[
'a'
];
x
// "a"
y
// undefined
z
// []

如果解构不成功，变量的值就等于undefined。

let
[
foo
]=[];
let
[
bar
,foo
]=[
1
];

以上两种情况都属于解构不成功，foo的值都会等于undefined。

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

let
[
x
,y
]=[
1
,2
,3
];
x
// 1
y
// 2
let
[
a
,[
b
],d
]=[
1
,[
2
,3
],4
];
a
// 1
b
// 2
d
// 4

上面两个例子，都属于不完全解构，但是可以成功。

如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错。

// 报错
let
[
foo
]=1
;
let
[
foo
]=false
;
let
[
foo
]=NaN
;
let
[
foo
]=undefined
;
let
[
foo
]=null
;
let
[
foo
]={};

解构赋值允许指定默认值。

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

let
[
foo
=true
]=[];
foo
// true
let
[
x
,y
='b'
]=[
'a'
];// x='a', y='b'
let
[
x
,y
='b'
]=[
'a'
,undefined
];// x='a', y='b'
let
[
x
=1
]=[
undefined
];
x
// 1
let
[
x
=1
]=[
null
];
x
// null
//上面代码中，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。

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

let
{foo
,bar
}={foo
:"aaa"
,bar
:"bbb"};
foo
// "aaa"
bar
// "bbb"

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

let
{bar
,foo
}={foo
:"aaa"
,bar
:"bbb"};
foo
// "aaa"
bar
// "bbb"
let
{baz
}={foo
:"aaa"
,bar
:"bbb"};
baz
// undefined

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

let
{foo
:baz
}={foo
:'aaa'
,bar
:'bbb'};
baz
// "aaa"
let obj
={first
:'hello'
,last
:'world'};
let
{first
:f
,last
:l
}=obj
;
f
// 'hello'
l
// 'world'

对象的解构也可以指定默认值。默认值生效的条件是，对象的属性值严格等于undefined。

var{
x
=3
}={
x
:undefined
};
x
// 3
var{
x
=3
}={
x
:null
};
x
// null

模板字符串

传统的 JavaScript 语言，输出模板通常是这样写的:

$
(
'#result'
).
append
('There are <b>'+basket
.
count
+'</b> '+'items in your basket, '+'<em>'+basket
.
onSale
+'</em> are on sale!'
);

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

$
(
'#result'
).
append
(`Thereare
<
b
>
$
{
basket
.
count
}</
b
>itemsin your basket
,<
em
>
$
{
basket
.
onSale
}</
em
>are on sale
!
`);

即用反引号(Tab上面的按键)表示，如果模板字符串中嵌入变量，需要将变量名写在${}之中。这样就不需要使用大量的引号和加号，大大节约了开发时间。

注：在本地浏览器中使用模块化需要配置服务环境，如果使用的是vscode编辑器可以安装Open with live server插件，安装完成后重启编辑器就可以在.html文件上右键选择Open with live server，然后浏览器输入localhost:5500打开，端口号看编辑器最下方提示。如果是Hbuilder编辑器则需要配置一下web服务器，其它编辑器具体的可以百度一下哈。阿门~

做开发十多年的时间，如果大家对于学习编程有很多疑惑，没有思路，不知道如何有效率的学习，可以私信我，我带你起飞，如果需要最新系统的学习教程也可以管我要。做了很多年开发，对于学习方式，如何提高自己的技术有一定的经验，术业有专攻，多跟有经验的人交流学习，对这个行业信息了解的多，职业发展的空间就越大。

let的解构赋值_前端开发es6知识模块化、解构赋值、字符串模板相关推荐

vue解构赋值_前端开发es6知识模块化、解构赋值、字符串模板
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍1.块级作用域 let const 2.箭 ...
人工智能实战小程序之语音_前端开发
1. 人工智能实战小程序之准备工作 2. 人工智能实战小程序之语音_前端开发今天这部分主要讲小程序前端功能的开发由于我偏后端,css是我的弱项,可能很多人和我一样开发小程序不知道如何下手,希望本篇 ...
JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
前端开发核心知识进阶
课程内容开篇词:如何突破前端开发技术瓶颈日本后现代主义作家村上春树写过一本富有哲理的书--<当我谈跑步时我谈些什么>. 书中,他谈到,跑步跟写作一样:都需要坚毅隐忍,追逐超越:都需要心 ...
网站前端开发基础知识学什么？必备技能
网站前端开发基础知识学什么?Web前端开发网页制主要由HTML.CSS.JavaScript三大要素组成.随着企业需求变,前端开发技术的三要素也演变成现今的HTML5.CSS3.jQuery.响应式布 ...
java socket中属性详解_前端开发：关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构
往期回顾: 前端开发必备 - ES6 新特性之 let 和 const 命令前端开发必备 - ES6 新特性之变量的解构赋值前端开发必备 - ES6 新特性之字符串的拓展前端开发必备 - E ...
中引入文件报错_关于前端开发中的模块化
前端开发离不开模块化,与模块化有关的关键字有以下几个: require/module.exports export/import define/require/exprots define/seajs ...
vue 获取元素在浏览器的位置_前端开发JS获取页面元素的位置
1.网页的大小和浏览器窗口的大小一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和 document元素的clientHeight和clientWidth属性,就代表了网页的大小. f ...

let的解构赋值_前端开发es6知识模块化、解构赋值、字符串模板

let的解构赋值_前端开发es6知识模块化、解构赋值、字符串模板相关推荐

最新文章

热门文章

let的解构赋值_前端开发es6知识 模块化、解构赋值、字符串模板

let的解构赋值_前端开发es6知识 模块化、解构赋值、字符串模板相关推荐

最新文章

热门文章

let的解构赋值_前端开发es6知识模块化、解构赋值、字符串模板

let的解构赋值_前端开发es6知识模块化、解构赋值、字符串模板相关推荐