| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> 学习笔记:ES6 -> 正文阅读 |
|
[JavaScript知识库]学习笔记:ES6 |
一、let和constvar:存在变量提升,可以重复声明,不支持块级作用域,不能定义常量 let:只在代码块内有效,必须先声明再使用(不能提升) const:声明一个只读的常量(常量指向的内存地址不变),只在代码块内有效。常量对象内的属性可以变 二、变量的解构赋值
ES6
允许按照?定模式,从数组和对象中提取值,对变量进?赋值
let
[
x1
,[[
y1
],
z1
]]
=
[
10
,[[
20
],
30
]];
//
嵌套数组
let
[ , ,
z
]
=
[
"one"
,
"two"
,
"three"
];
console
.
log
(
z
);
//three
//
其中
...
为
ES6
的扩展运算符,即
d
加上
...
可以接收多个值
let
[
a
,
...
d
]
=
[
1
,
2
,
3
,
4
];
console
.
log
(
a
);
// 1
console
.
log
(
d
);
// [2, 3, 4]
let
[
x
,
y
=
'b'
]
=
[
'a'
];
// x='a', y='b'? ? ? ? //默认值
对象的解构赋值:
要求变量必须与属性同名
let
{
age
,
name
}
=
{
name
:
'
张三
'
,
age
:
20
};
//
如果变量名与属性名不?致,必须写成下?这样
let
{
email
:
em
,
password
:
ps
}
=
{
email
:
'zs@163.com'
,
password
:
'123456'
};
//
如上代码
email
和
password
都是匹配的模式,
em
才是变量。真正被赋值的是变量
em
,?不是模式
email
类似数组的对象都有?个
length属性,因此还可以对这个属性解构赋值。
let
{
length
:
len
}
=
'hello'
;
console
.
log
(
len
);
// 5
用途:1、交换变量的值
let
x
=
1
;
let
y
=
2
;
[
x
,
y
]
=
[
y
,
x
];
`
2、
从函数返回多个值
//
返回?个数组
function
example1
() {
????????return
[
1
,
2
,
3
];
}
let
[
a
,
b
,
c
]
=
example1
();
//
返回?个对象
function
example2
() {
????????return
{
????????????????foo
:
1
,
????????????????bar
:
2
????????};
}
let
{
foo
,
bar
}
=
example2
();
3、函数参数的定义
//
参数是?组有次序的值
function
f
([
x
,
y
,
z
]) {
...
}
f
([
1
,
2
,
3
]);
//
参数是?组?次序的值
function
f
({
x
,
y
,
z
}) {
...
}
f
({
z
:
3
,
y
:
2
,
x
:
1
});
4、提取json的值
//
解构赋值对提取
JSON
对象中的数据,尤其有?。
let
jsonData
=
{
????????id
:
42
,
????????status
:
"OK"
,
????????data
: [
867
,
5309
]
};
let
{
id
,
status
,
data
:
number
}
=
jsonData
;
console
.
log
(
id
,
status
,
number
);
// 42, "OK", [867, 5309]
三、函数的扩展1、函数的默认值
function
add
(
x
=
0
,
y
=
0
){
return
x
+
y
;
}
console
.
log
(
add
());
//0
console
.
log
(
add
(
10
));
//10
2、箭头函数?
(
=>
)
var
sum
=
(
num1
,
num2
)
=>
{
return
num1
+
num2
; }
由于?括号被解释为代码块,所以如果箭头函数直接返回?个对象,必须在对象外?加上括号,否
则会报错。
let
getTempItem
=
id
=>
({
id
:
id
,
name
:
"Temp"
});
箭头函数有?个使?注意点。
(1
)函数体内的
this
对象,就是定义时所在的对象,?不是使?时所在的对象。
(2
)不可以当作构造函数,也就是说,不可以使?
new
命令,否则会抛出?个错误。
(3
)当你真的需要
this的时候,如为对象添加普通?法或事件绑定回调函数使?箭头函数,可能获取不到
this
。
(4
)不可以使?
arguments
对象,该对象在函数体内不存在。
上?四点中,第?点尤其值得注意。
this
对象的指向是可变的,但是在箭头函数中,它是固定的。
数组的扩展:遍历:for(普通for循环)? for...in(会遍历其他非数字属性) for...of(不会遍历非数字属性,支持break和continue) a.forEach(使用回调函数遍历)
//
数组对象
entries()
?法返回?个数组的迭代对象,该对象包含数组的键值对
(key/value)
。
//1.
使?
for...of
遍历数组:
let
a
=
[
'zhangsan'
,
'lisi'
,
'wangwu'
];
for
(
let
[
k
,
v
]
of
a
.
entries
()){
????????console
.
log
(
k
,
v
);
}
//0 "zhangsan"
//1 "lisi"
//1 "lisi"
Array.from()
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
????????<meta
charset
=
"UTF-8"
>
????????<title>
Array.from()
使?实例
</title>
</head>
<body>
????????<ul>
????????????????<li>
zhangsan
</li>
????????????????<li>
lisi
</li>
????????????????<li>
wangwu
</li>
????????</ul>
????????<script
type
=
"text/javascript"
>
????????????????//获取上?的li
节点对象列表
????????????????let
nlists
=
document
.
querySelectorAll
(
"li"
);
????????????????console
.
log
(
nlists
);
//NodeList(3) [li, li, li]
????????????????//将NodeList列表对象转成数组,并解析出每个元素之间的内容。
????????????????const
alist
=
Array
.
from
(
nlists
,
li
=>
li
.
textContent
);
????????????????console
.
log
(
alist
);
// ["zhangsan", "lisi", "wangwu"]
????????</script>
</body>
</html>
Array.of()
console
.
log
(
Array
.
of
(
1
,
2
,
3
));
//[1,2,3]
创建?个值为
1
,
2
,
3
的数组
数组实例的 find() 和 findIndex()
let
s2
=
data
.
find
(
v
=>
v
[
'name'
]
==
'lisi'
);
console
.
log
(
s2
);
//{name: "lisi", age: 25, sex: "woman"}
let
s4
=
data
.
findIndex
(
v
=>
v
[
'name'
]
==
'lisi'
);
console
.
log
(
s4
);
//1
数组实例的 some() 和 every()
every
()和
some
()?的:确定数组的所有成员是否满?指定的测试
.
????????some()?法 只要其中?个为
true
就会返回
true
。
????????every()?法必须所有都返回
true
才会返回
true
,哪怕有?个
false
,就会返回
false
。
即:
every:
?假即假;
some:
?真即真。
?数组实例的 .fill()
fill()
函数,使?指定的元素替换原数组内容,会改变原来的数组。
语法结构:
arr.fill(value[, start[, end]])
????????value:替换值。
????????start:替换起始位置(数组的下标),可以省略。
????????end:替换结束位置(数组的下标),如果省略不写就默认为数组结束
|
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/24 13:25:28- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |