diff --git a/about/index.html b/about/index.html index bd563205..8adcfe01 100644 --- a/about/index.html +++ b/about/index.html @@ -7,7 +7,7 @@ - + @@ -56,7 +56,7 @@ isHome: false, isHighlightShrink: false, isToc: false, - postUpdate: '2023-11-01 08:31:47' + postUpdate: '2023-11-03 06:20:13' }

about页面

我是about页面-其他菜单页面-不会显示在博客列表

+ })(window)

about页面

我是about页面-其他菜单页面-不会显示在博客列表

哪个英文字母最酷？ 因为西装裤(C装酷)

门里站着一个人?

-
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

个人简历

+ })(window)

个人简历

yt
@@ -164,7 +164,7 @@
-30岁丨武汉丨三好青年 +32岁丨武汉丨三好青年
求职意向：在职中 @@ -207,14 +207,15 @@

个人评价

热爱学习总结做笔记，通过专业课程、 恒为实习和网络学习了大量计算机基础与开发技能，做事细心负责，热爱编程技术，思维活跃，经常开发有帮助的工具脚本， 熟悉Linux环境，勇于迎接挑战，克服困难， 勤奋踏实，刻苦努力。

-
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

一月 2020

文章总览 - 3
2020
JavaScript基础
JavaScript内置对象
JavaScript面向对象编程
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
+ + 分类 + +
+
标签
JavaScript面试小程序CSSES6utilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcli
归档 +
网站资讯
文章数目 :
49
本站总字数 :
177.7k
本站访客数 :
本站总访问量 :
最后更新时间 :
\ No newline at end of file diff --git a/archives/2020/02/index.html b/archives/2020/02/index.html new file mode 100644 index 00000000..e449bd63 --- /dev/null +++ b/archives/2020/02/index.html @@ -0,0 +1,207 @@ +二月 2020 | YT 前端日记 + + + + + + + + + + +

二月 2020

文章总览 - 1
2020
阮一峰ES6入门学习笔记
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
+ + 分类 + +
+
标签
JavaScript面试小程序CSSES6utilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcli
归档 +
网站资讯
文章数目 :
49
本站总字数 :
177.7k
本站访客数 :
本站总访问量 :
最后更新时间 :
\ No newline at end of file diff --git a/archives/2020/08/index.html b/archives/2020/08/index.html new file mode 100644 index 00000000..111e115b --- /dev/null +++ b/archives/2020/08/index.html @@ -0,0 +1,207 @@ +八月 2020 | YT 前端日记 + + + + + + + + + + +

八月 2020

文章总览 - 1
2020
CSS教程和技巧收藏
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
+ + 分类 + +
+
标签
JavaScript面试小程序CSSES6utilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcli
归档 +
网站资讯
文章数目 :
49
本站总字数 :
177.7k
本站访客数 :
本站总访问量 :
最后更新时间 :
\ No newline at end of file diff --git a/archives/2020/index.html b/archives/2020/index.html new file mode 100644 index 00000000..a50258da --- /dev/null +++ b/archives/2020/index.html @@ -0,0 +1,207 @@ +2020 | YT 前端日记 + + + + + + + + + + +

2020

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
+ + 分类 + +
+
标签
JavaScript面试小程序CSSES6utilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcli
归档 +
网站资讯
文章数目 :
49
本站总字数 :
177.7k
本站访客数 :
本站总访问量 :
最后更新时间 :
\ No newline at end of file diff --git a/archives/2022/09/index.html b/archives/2022/09/index.html new file mode 100644 index 00000000..7f120fbb --- /dev/null +++ b/archives/2022/09/index.html @@ -0,0 +1,207 @@ +九月 2022 | YT 前端日记 + + + + + + + + + + +

九月 2022

文章总览 - 1
2022
test
test
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
+ + 分类 + +
+
标签
JavaScript面试小程序CSSES6utilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcli
归档 +
网站资讯
文章数目 :
49
本站总字数 :
177.7k
本站访客数 :
本站总访问量 :
最后更新时间 :
\ No newline at end of file diff --git a/archives/2022/10/index.html b/archives/2022/10/index.html new file mode 100644 index 00000000..899e9d67 --- /dev/null +++ b/archives/2022/10/index.html @@ -0,0 +1,207 @@ +十月 2022 | YT 前端日记 + + + + + + + + + + +

十月 2022

文章总览 - 1
2022
Hello World
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
+ + 分类 + +
+
标签
JavaScript面试小程序CSSES6utilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcli
归档 +
网站资讯
文章数目 :
49
本站总字数 :
177.7k
本站访客数 :
本站总访问量 :
最后更新时间 :
\ No newline at end of file diff --git a/archives/2022/index.html b/archives/2022/index.html new file mode 100644 index 00000000..515bc8f2 --- /dev/null +++ b/archives/2022/index.html @@ -0,0 +1,207 @@ +2022 | YT 前端日记 + + + + + + + + + + +

2022

文章总览 - 2
2022
Hello World
test
test
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
+ + 分类 + +
+
标签
JavaScript面试小程序CSSES6utilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcli
归档 +
网站资讯
文章数目 :
49
本站总字数 :
177.7k
本站访客数 :
本站总访问量 :
最后更新时间 :
\ No newline at end of file diff --git a/archives/2023/01/index.html b/archives/2023/01/index.html index 8f5ffdc4..a1c70f02 100644 --- a/archives/2023/01/index.html +++ b/archives/2023/01/index.html @@ -54,7 +54,7 @@ isHome: false, isHighlightShrink: false, isToc: false, - postUpdate: '2023-11-01 08:31:59' + postUpdate: '2023-11-03 06:20:29' }

一月 2023

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

一月 2023

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

四月 2023

文章总览 - 1
2023
GitHub Actions 定时运行代码
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

四月 2023

文章总览 - 1
2023
GitHub Actions 定时运行代码
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

五月 2023

文章总览 - 1
2023
使用CSS实现进度条和饼图
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

五月 2023

文章总览 - 1
2023
使用CSS实现进度条和饼图
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

八月 2023

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

八月 2023

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

九月 2023

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

九月 2023

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

九月 2023

文章总览 - 13
2023
20道大厂面试题
test
test
Spring-SpringMVC-Mybatis整合
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

九月 2023

文章总览 - 12
2023
20道大厂面试题
Spring-SpringMVC-Mybatis整合
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

十月 2023

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

十月 2023

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

十月 2023

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

十月 2023

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

十一月 2023

文章总览 - 1
2023
Hello World
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

十一月 2023

文章总览 - 2
2023
我的GitHub首页
常用meta整理
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

2023

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

2023

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

2023

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

2023

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

2023

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

2023

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

2023

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

2023

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

2023

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

2023

文章总览 - 42
2023
一份前端够用的 Linux 命令
大厂JS必考手写题
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

文章

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

文章

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

文章

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

文章

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

文章

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

文章

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

文章

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

文章

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

文章

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

文章

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

GitHub

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

GitHub

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

Java

分类 - Java
2023
Spring-SpringMVC-Mybatis整合
Java类加载机制
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

Java

分类 - Java
2023
Spring-SpringMVC-Mybatis整合
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

Linux

分类 - Linux
2023
一份前端够用的 Linux 命令
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

Linux

分类 - Linux
2023
一份前端够用的 Linux 命令
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

NodeJS

分类 - NodeJS
2023
NodeJS框架Express与Koa对比
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

NodeJS

分类 - NodeJS
2023
NodeJS框架Express与Koa对比
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

分类

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

分类

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

前端

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

前端

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

前端

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

前端

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

前端

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

前端

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

前端

分类 - 前端
2020
JavaScript面向对象编程
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
+ + 分类 + +
+
标签
JavaScript面试小程序CSSES6utilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcli
归档 +
网站资讯
文章数目 :
49
本站总字数 :
177.7k
本站访客数 :
本站总访问量 :
最后更新时间 :
\ No newline at end of file diff --git "a/categories/\345\260\217\347\250\213\345\272\217/index.html" "b/categories/\345\260\217\347\250\213\345\272\217/index.html" index 2e02db9c..00847f67 100644 --- "a/categories/\345\260\217\347\250\213\345\272\217/index.html" +++ "b/categories/\345\260\217\347\250\213\345\272\217/index.html" @@ -54,7 +54,7 @@ isHome: false, isHighlightShrink: false, isToc: false, - postUpdate: '2023-11-01 08:31:59' + postUpdate: '2023-11-03 06:20:29' }

小程序

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

小程序

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

技术

avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+ })(window)

技术

avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

girl

+ })(window)

girl

[{"url":"https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg","alt":""},{"url":"https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg","alt":""}]
-
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

images

+ })(window)

images

Group Image Gallery
@@ -192,14 +192,15 @@
-
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

刘德华

+ })(window)

刘德华

[{"url":"https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023111/ldh.jpg","alt":""},{"url":"https://xiaojinhe-cdn.iyoudui.cn/upload/common/2023111/ldh1.jpg","alt":""}]
-
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

YT 前端日记

Hello World
发表于
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. -Quick StartCreate a new post1$ hexo new "My New Post" + })(window)

YT 前端日记

我的GitHub首页
发表于
+JavaScript Learning... -More info: Writing -Run server1$ hexo server +阮一峰老师的 ES6 入门教程 -More info: Server -Generate static files1$ hexo generate -More info: Generating -Deploy to remote sites1$ hexo deploy +ES6 入门教程 +==> +学习总结 -More info: Deployment -
使用Gitalk实现静态博客无后台评论系统
发表于|技术
使用Gitalk实现静态博客无后台评论系统前言Gitalk，一个基于 Github Issue 和 Preact 开发的评论插件。 + + +ES6 简介 +参考链接 +最新提案 + + +let 和 const 简介 +变量的解构赋值 +字符串的扩展 + + +字符串的新增方法 +正则的扩展 +数值的扩展 + + +函数的扩展 +数组的扩展 +对象的扩展 + + +对象的新增方法 +Symbol +Set 和 Map 数据结构 + + +Proxy +Reflect +Promise 对象 + + +async 函数 +Generator 函数的语法 +Generator 函数的异步应用 + + +Iterator 和 for…of 循环 +Class 的基本语法 +Class 的继承 + + +Module 的语法 +Module 的加载实现 +编程风格 + + +读懂 ECMAScript 规格 +异步遍历器 +ArrayBuffer + + +装饰器 +函数式编程 +Mixin + + + + +面试系列 +面试问题锦集 +什么是进程？什么的线程？有什么区别 +说说你对 shell 的理解？常见的命令？ +call和apply、bind的理解及模拟实现 +JavaScript从原型到原 ...
常用meta整理
发表于
常用meta整理<meta> 元素概要meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 +必要属性 + + + +属性 +值 +描述 + + + +content +some text +定义与http-equiv或name属性相关的元信息 + + +可选属性 + + + +属性 +值 +描述 + + + +http-equiv +content-type / expire / refresh / set-cookie +把content属性关联到HTTP头部。 + + +name +author / description / keywords / generator / revised / others +把 content 属性关联到一个name。 + + +content +some text +定义用于翻译 content 属性值的格式。 + + +网页相关 +申明编码 + +1<meta charset='utf-8' ...
使用Gitalk实现静态博客无后台评论系统
发表于|技术
使用Gitalk实现静态博客无后台评论系统前言Gitalk，一个基于 Github Issue 和 Preact 开发的评论插件。 下面我们来用它在vuepress搭建的博客中搭建评论区吧 @@ -295,36 +400,15 @@ pushed(created):>2019-11-15 <关键字> 更新 或 创建 日期在2019年11月16日之后的带关键字查询 license:apache-2.0 <关键字> LICENSE为apache-2.0的带关键字查询 language:java <关键词> 仓库语言为Java的带关键字查询 -user:<用户名> 查询某个用户的项 ...
GitHub Actions 实现自动部署静态博客
发表于|GitHub
GitHub Actions 实现自动部署静态博客在了解GitHub Actions之后，尝试使用它发现能够满足我的需求。GitHub Actions 入门教程 -GitHub-Actionsactions顾名思义就是一堆动作，是一个持续集成服务，持续集成包含了拉代码、运行测试、编译代码、登录远程服务器，发布到第三方服务等等的操作，GitHub将这些操作称为actions。 -概念：Workflows, Events, Jobs, Actions, Runners - -Workflows 工作流 - -一个 Workflow 由多个 Jobs 组成 - -Events - -定义哪些事件可以触发 Workflow - -Jobs - -一条 Job 由多个 step 组成，每个步骤可以是一条可执行的 shell 脚本或者是一个 action - -Actions - -一个 Action 是一个复杂且重复的任务，可以看成是多个job的组合 - -Runners - -跑工作流的 server，由 Github 提供一个工作流可以由一个或者多个 Job 组成，每个 Job 可以由一个或者多个 Step 和 Action 组成。工 ...
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+user:<用户名> 查询某个用户的项 ...
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

link

友情链接

那些人，那些事
+ })(window)

link

友情链接

那些人，那些事
@@ -190,14 +190,15 @@
社交分享平台

link页面

-
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

YT 前端日记

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？
发表于|前端
面试官：Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？ + })(window)

YT 前端日记

GitHub Actions 实现自动部署静态博客
发表于|GitHub
GitHub Actions 实现自动部署静态博客在了解GitHub Actions之后，尝试使用它发现能够满足我的需求。GitHub Actions 入门教程 +GitHub-Actionsactions顾名思义就是一堆动作，是一个持续集成服务，持续集成包含了拉代码、运行测试、编译代码、登录远程服务器，发布到第三方服务等等的操作，GitHub将这些操作称为actions。 +概念：Workflows, Events, Jobs, Actions, Runners + +Workflows 工作流 + +一个 Workflow 由多个 Jobs 组成 + +Events + +定义哪些事件可以触发 Workflow + +Jobs + +一条 Job 由多个 step 组成，每个步骤可以是一条可执行的 shell 脚本或者是一个 action + +Actions + +一个 Action 是一个复杂且重复的任务，可以看成是多个job的组合 + +Runners + +跑工作流的 server，由 Github 提供一个工作流可以由一个或者多个 Job 组成，每个 Job 可以由一个或者多个 Step 和 Action 组成。工 ...
Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？
发表于|前端
面试官：Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？ 开始之前Composition API 可以说是Vue3的最大特点，那么为什么要推出Composition Api，解决了什么问题？ 通常使用Vue2开发的项目，普遍会存在以下问题： @@ -266,23 +288,15 @@ initialValue 是可选的，表示累积器的初始值。 reduce 函数的执行过程如下： -1、如果没有提供 initialValue，则将数组的第一个元素作为累积器 ...
从零开始配置webpack
发表于|前端
从零开始配置webpack(基于webpack 4 和 babel 7版本)webpack 核心概念: -Entry: 入口 -Module:模块，webpack中一切皆是模块 -Chunk:代码库，一个chunk由十多个模块组合而成，用于代码合并与分割 -Loader:模块转换器，用于把模块原内容按照需求转换成新内容 -Plugin:扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情 -Output: 输出结果 - -webpack流程:webpack启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有Module.每找到一个Module,就会根据配置的Loader去找出对应的转换规则，对Module进行转换后，再解析出当前的Module依赖的Module.这些模块会以Entry为单位进行分组，一个Entry和其所有依赖的Module被分到一个组也就是一个Chunk。最好Webpack会把所有Chunk转换成文件输出。在整个流程中Webpack会在恰当的时机执行Plugin里定义的逻辑。 -下面我们开始从零开始配置一个支持打包图片 ...
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+1、如果没有提供 initialValue，则将数组的第一个元素作为累积器 ...
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

YT 前端日记

9个你不知道的 CSS 伪元素
发表于|前端
9个你不知道的 CSS 伪元素CSS 伪元素是一项强大的功能，它允许您为所选元素的特定部分设置样式，而无需额外的 JavaScript 代码。虽然许多开发人员都熟悉常用的伪元素，如 ::before 和 ::after，但还有一些其他元素经常被忽视或未得到充分利用。 + })(window)

YT 前端日记

从零开始配置webpack
发表于|前端
从零开始配置webpack(基于webpack 4 和 babel 7版本)webpack 核心概念: +Entry: 入口 +Module:模块，webpack中一切皆是模块 +Chunk:代码库，一个chunk由十多个模块组合而成，用于代码合并与分割 +Loader:模块转换器，用于把模块原内容按照需求转换成新内容 +Plugin:扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情 +Output: 输出结果 + +webpack流程:webpack启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有Module.每找到一个Module,就会根据配置的Loader去找出对应的转换规则，对Module进行转换后，再解析出当前的Module依赖的Module.这些模块会以Entry为单位进行分组，一个Entry和其所有依赖的Module被分到一个组也就是一个Chunk。最好Webpack会把所有Chunk转换成文件输出。在整个流程中Webpack会在恰当的时机执行Plugin里定义的逻辑。 +下面我们开始从零开始配置一个支持打包图片 ...
9个你不知道的 CSS 伪元素
发表于|前端
9个你不知道的 CSS 伪元素CSS 伪元素是一项强大的功能，它允许您为所选元素的特定部分设置样式，而无需额外的 JavaScript 代码。虽然许多开发人员都熟悉常用的伪元素，如 ::before 和 ::after，但还有一些其他元素经常被忽视或未得到充分利用。 1. ::selection 伪元素::selection 伪元素以用户选择的文本部分为目标。它提供了一种将样式应用于所选文本并自定义其外观的方法。 例子： 1234::selection { background-color: yellow; color: red;} @@ -170,32 +179,7 @@ 创建一个空对象，构造函数中的this指向这个空对象 这个新对象被执行 [[原型]] 连接 执行构造函数方法，属性和方法被添加到this引用的对象中 -如果构造函数中没有返回其它对象，那么返回this，即创建的这个的新对象，否则，返回构造函数中返回的对象。123456789101112131415function _new() { let target = {}; //创建的新对象 //第一个参数是构造函数 let [constructor, ...args] = [...arguments]; //执行[[原型]]连接;target 是 constructor 的实例 target.__proto__ = constructor.prototype; //执行构造函数，将属性或方法添加到创建的空对象上 let result = constructor.apply(target, args); if (result && (typeof (re ...
test
test
发表于
博客目录打造一系列前端进阶的优质文章，博客将侧重于原生JS、 React、ReactNative和Webpack等入门与底层原理分析，只有在自己实践和深入理解后，才会输出相关博文，以确保博文内容的准确性。 -微信公众号: - -欢迎关注本人的博文: - -segmentFault -掘金 - - -面试系列 - -【面试篇】寒冬求职季之你必须要懂的原生JS(上) -【面试篇】寒冬求职季之你必须要懂的原生JS(中) -【面试篇】寒冬求职之你必须要懂的Web安全 -这儿有20道大厂面试题等你查收 - - -Step-By-Step - -【Step-By-Step】高频面试题深入解析 / 周刊 01 -【Step-By-Step】高频面试题深入解析/ 周刊 02 -【Step-By-Step】高频面试题深入解析/ 周刊 03 -【Step-By-Step】高频面试题深入解析/ 周刊 04 -【Step-By-Step】高频面试题深入解析/ 周刊 05 -【Step-By-Step】高频面试题深入解析/ 周刊 06 -【Step-By-Step】高频面试题深入解析/ 周刊 ...
Spring-SpringMVC-Mybatis整合
发表于|Java
Maven + Spring + SpringMVC + Mybatis 整合通过这篇文章你可以获取的内容： +如果构造函数中没有返回其它对象，那么返回this，即创建的这个的新对象，否则，返回构造函数中返回的对象。123456789101112131415function _new() { let target = {}; //创建的新对象 //第一个参数是构造函数 let [constructor, ...args] = [...arguments]; //执行[[原型]]连接;target 是 constructor 的实例 target.__proto__ = constructor.prototype; //执行构造函数，将属性或方法添加到创建的空对象上 let result = constructor.apply(target, args); if (result && (typeof (re ...
Spring-SpringMVC-Mybatis整合
发表于|Java
Maven + Spring + SpringMVC + Mybatis 整合通过这篇文章你可以获取的内容： 整个配置流程。 对于每一个配置项，Spring 到底帮我们做了什么？ @@ -242,37 +226,27 @@ 12345678910111213141516171819var array = [ { id: 1, name: "小明" }, { id: 2, name: "小红" },];/**///旧key到新key的映射var keyMap = { id: "value", name: "label" };for (var i = 0; i < array.length; i++) { var obj = array[i]; for (var key in obj) { var newKey = keyMap[key]; if (newKey) { obj[newKey] = obj[key]; delete obj[key]; } }}console.log(array); 方法二 -12345678 ...
Java类加载机制
发表于|Java
谈谈 Java 类加载机制最近在学习 Tomcat 架构，其中很重要的一个模块是类加载器，因为以前学习的不够深入，所以趁这个机会好好把类加载机制搞明白。 - - - -谈谈 Java 类加载机制 -Overview -API for class loading -java.lang.ClassLoader -java.security.SecureClassLoader -java.net.URLClassLoader - - -Tomcat 8.5.15 class loading Mechanism -Reference - - +12345678 ...
项目性能优化方案
发表于|前端
Vue 项目性能优化方案 +前言 +Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成： +Vue 代码层面的优化； +webpack 配置层面的优化； +基础的 Web 技术层面的优化。 -Overview -类加载器主要分为两类，一类是 JDK 默认提供的，一类是用户自定义的。JDK 默认提供三种类加载器 -Bootstrap ClassLoader，启动类加载器，每次执行 java 命令时都会使用该加载器为虚拟机加载核心类。该加载器是由 native code 实现，而不是 Java 代码，加载类的路径为 <JAVA_HOME>/jre/lib。特别的 <JAVA_HOME>/jre/lib/rt.jar 中包含了 sun.misc.La ...
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+一、代码层面的优化1.1、v-if 和 v-show 区分使用场景v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 +v-show 就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 displa ...
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

YT 前端日记

项目性能优化方案
发表于|前端
Vue 项目性能优化方案 -前言 -Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成： - -Vue 代码层面的优化； - -webpack 配置层面的优化； - -基础的 Web 技术层面的优化。 - - -一、代码层面的优化1.1、v-if 和 v-show 区分使用场景v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 -v-show 就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 displa ...
手摸手教你撸一个脚手架
发表于|前端
脚手架vue-cli, create-react-app、react-native-cli 等都是非常优秀的脚手架，通过脚手架，我们可以快速初始化一个项目，无需自己从零开始一步步配置，有效提升开发体验。尽管这些脚手架非常优秀，但是未必是符合我们的实际应用的，我们可以定制一个属于自己的脚手架(或公司通用脚手架)，来提升自己的开发效率。 + })(window)

YT 前端日记

手摸手教你撸一个脚手架
发表于|前端
脚手架vue-cli, create-react-app、react-native-cli 等都是非常优秀的脚手架，通过脚手架，我们可以快速初始化一个项目，无需自己从零开始一步步配置，有效提升开发体验。尽管这些脚手架非常优秀，但是未必是符合我们的实际应用的，我们可以定制一个属于自己的脚手架(或公司通用脚手架)，来提升自己的开发效率。 脚手架的作用 @@ -212,20 +200,7 @@ 1234567function SomeMethod(paramThatCanBeUndefined) { const localValue = paramThatCanBeUndefined || "Default Value"; console.log(localValue); // ...}SomeMethod(); // Default ValueSomeMethod("SomeValue"); // SomeValue 尝试以下方法： -123456function SomeMethod( console.log(paramThatCanBeUndefined) // ...}SomeMethod() // Default ValueSomeMet ...
谈谈Tomcat请求处理流程
发表于
谈谈 Tomcat 请求处理流程《谈谈 Tomcat 架构及启动过程[含部署]》已重新修订!（与本文在 GitHub 同一目录下）包括架构和 Tomcat Start 过程中的 MapperListener 相关描述。Connector 启动相关的内容与请求处理关系比较紧密，所以就独立出来放在本文中了。 -建议结合《谈谈 Tomcat 架构及启动过程[含部署]》一起看! -很多东西在时序图中体现的已经非常清楚了，没有必要再一步一步的作介绍，所以本文以图为主，然后对部分内容加以简单解释。 - -绘制图形使用的工具是 PlantUML + Visual Studio Code + PlantUML Extension - -本文对 Tomcat 的介绍以 Tomcat-9.0.0.M22 为标准。 -Tomcat-9.0.0.M22 是 Tomcat 目前最新的版本，但尚未发布，它实现了 Servlet4.0 及 JSP2.3 并提供了很多新特性，需要 1.8 及以上的 JDK 支持等等，详情请查阅 Tomcat-9.0-doc - - - -谈谈 Tomcat 请求处理流程 -Overview -Connecto ...
什么是全局数据共享
发表于|小程序
wx 小程序中的全局数据共享方案 MonX什么是全局数据共享全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有： Vuex 、 Redux 、 MobX 等。 2. 小程序中的全局数据共享方案在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中：mobx-miniprogram 用来创建 Store 实例对象mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用 +123456function SomeMethod( console.log(paramThatCanBeUndefined) // ...}SomeMethod() // Default ValueSomeMet ...
什么是全局数据共享
发表于|小程序
wx 小程序中的全局数据共享方案 MonX什么是全局数据共享全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。开发中常用的全局数据共享方案有： Vuex 、 Redux 、 MobX 等。 2. 小程序中的全局数据共享方案在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其中：mobx-miniprogram 用来创建 Store 实例对象mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用 在项目中运行如下的命令，安装 MobX 相关的包： 1npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1 @@ -247,14 +222,26 @@ 第二种场景，用来计数的循环变量泄露为全局变量。 -123456var s = "hello";for (var i = O; i < s.length; i++) { console.log(s[i]);}console.log(i); / ...
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+123456var s = "hello";for (var i = O; i < s.length; i++) { console.log(s[i]);}console.log(i); / ...
ES6面试理论知识点汇总
发表于|前端
一、问：ES6 是什么，为什么要学习它，不学习 ES6 会怎么样?答：ES6 是新一代的 JS 语言标准，对分 JS 语言核心内容做了升级优化，规范了 JS 使用标准，新增了 JS 原生方法，使得 JS 使用更加规范，更加优雅，更适合大型应用的开发。学习 ES6 是成为专业前端正规军的必经之路。不学习 ES6 也可以写代码打鬼子，但是最多只能当个游击队长。 +二、问：ES5、ES6 和 ES2015 有什么区别?答：ES2015 特指在 2015 年发布的新一代 JS 语言标准，ES6 泛指下一代 JS 语言标准，包含 ES2015、ES2016、ES2017、ES2018 等。现阶段在绝大部分场景下，ES2015 默认等同 ES6。ES5 泛指上一代语言标准。ES2015 可以理解为 ES5 和 ES6 的时间分界线。 +三、问：babel 是什么，有什么作用?答：babel 是一个 ES6 转码器，可以将 ES6 代码转为 ES5 代码，以便兼容那些还没支持 ES6 的平台。 +四、问：let 有什么用，有了 var 为什么还要用 let？答：在 ES6 之前，声明变量只能用 var，v ...
NodeJS框架Express与Koa对比
发表于|NodeJS
NodeJS框架Express与Koa对比框架介绍express框架是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，主要基于 Connect 中间件，并且自身封装了路由、视图处理等功能。 +koa是 Express 原班人马基于 ES6 新特性重新开发的框架，主要基于 co 中间件，框架自身不包含任何中间件，很多功能需要借助第三方中间件解决，但是由于其基于 ES6 generator 特性的异步流程控制，解决了 “callback hell” 和麻烦的错误处理问题。 +相同点两个框架都对http进行了封装。相关的api都差不多，同一批人所写。 +不同点express内置了许多中间件可供使用，而koa没有。 +express包含路由，视图渲染等特性，而koa只有http模块。 +express的中间件模型为线型，而koa的中间件模型为U型，也可称为洋葱模型构造中间件。 +express通过回调实现异步函数，在多个回调、多个中间件中写起来容易逻辑混乱。 +一、起步：创建一个简单的服务器原生node +123456789101112131415161718var http = requ ...
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

YT 前端日记

ES6面试理论知识点汇总
发表于|前端
一、问：ES6 是什么，为什么要学习它，不学习 ES6 会怎么样?答：ES6 是新一代的 JS 语言标准，对分 JS 语言核心内容做了升级优化，规范了 JS 使用标准，新增了 JS 原生方法，使得 JS 使用更加规范，更加优雅，更适合大型应用的开发。学习 ES6 是成为专业前端正规军的必经之路。不学习 ES6 也可以写代码打鬼子，但是最多只能当个游击队长。 -二、问：ES5、ES6 和 ES2015 有什么区别?答：ES2015 特指在 2015 年发布的新一代 JS 语言标准，ES6 泛指下一代 JS 语言标准，包含 ES2015、ES2016、ES2017、ES2018 等。现阶段在绝大部分场景下，ES2015 默认等同 ES6。ES5 泛指上一代语言标准。ES2015 可以理解为 ES5 和 ES6 的时间分界线。 -三、问：babel 是什么，有什么作用?答：babel 是一个 ES6 转码器，可以将 ES6 代码转为 ES5 代码，以便兼容那些还没支持 ES6 的平台。 -四、问：let 有什么用，有了 var 为什么还要用 let？答：在 ES6 之前，声明变量只能用 var，v ...
NodeJS框架Express与Koa对比
发表于|NodeJS
NodeJS框架Express与Koa对比框架介绍express框架是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，主要基于 Connect 中间件，并且自身封装了路由、视图处理等功能。 -koa是 Express 原班人马基于 ES6 新特性重新开发的框架，主要基于 co 中间件，框架自身不包含任何中间件，很多功能需要借助第三方中间件解决，但是由于其基于 ES6 generator 特性的异步流程控制，解决了 “callback hell” 和麻烦的错误处理问题。 -相同点两个框架都对http进行了封装。相关的api都差不多，同一批人所写。 -不同点express内置了许多中间件可供使用，而koa没有。 -express包含路由，视图渲染等特性，而koa只有http模块。 -express的中间件模型为线型，而koa的中间件模型为U型，也可称为洋葱模型构造中间件。 -express通过回调实现异步函数，在多个回调、多个中间件中写起来容易逻辑混乱。 -一、起步：创建一个简单的服务器原生node -123456789101112131415161718var http = requ ...
一份前端够用的 Linux 命令
发表于|Linux
一份前端够用的 Linux 命令我在建站的过程中，必不可少会用到 Linux 命令，所以此篇写一份基本够用的 Linux 命令，会涵盖博客搭建系列文章用到的各种命令，方便查询和学习使用。 + })(window)

YT 前端日记

一份前端够用的 Linux 命令
发表于|Linux
一份前端够用的 Linux 命令我在建站的过程中，必不可少会用到 Linux 命令，所以此篇写一份基本够用的 Linux 命令，会涵盖博客搭建系列文章用到的各种命令，方便查询和学习使用。 0. Owner、Group、Others、RootLinux 系统是一种多用户系统，它将文件访问者身份分为三种： 文件所有者（Owner）当创建一个用户的时候，Linux 会为该用户创建一个主目录，路径为 /home/<username>，我们可以使用 cd ~，快捷进入主目录。如果你想放一个私密文件，就可以放在自己的主目录里，然后设置只能自己查看。 群组（Group）每个用户都有一个用户组，方便多人操作的时候，为一群人分配权限。当创建用户的时候，会自动创建一个与它同名的用户组。 @@ -181,14 +170,129 @@ 🌟 promise实现 promise考察频率: (⭐⭐⭐⭐⭐) 参考代码[1] 实现 promise.all考察频率: (⭐⭐⭐⭐⭐) -1234567891011121314151617181920212223function PromiseAll(promises) { return new Promise((resolve, reject) => { if (!Array.isArray(promises)) { throw ...
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
+1234567891011121314151617181920212223function PromiseAll(promises) { return new Promise((resolve, reject) => { if (!Array.isArray(promises)) { throw ...
Hello World
发表于
Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. +Quick StartCreate a new post1$ hexo new "My New Post" + +More info: Writing +Run server1$ hexo server + +More info: Server +Generate static files1$ hexo generate + +More info: Generating +Deploy to remote sites1$ hexo deploy + +More info: Deployment +
test
test
发表于
博客目录打造一系列前端进阶的优质文章，博客将侧重于原生JS、 React、ReactNative和Webpack等入门与底层原理分析，只有在自己实践和深入理解后，才会输出相关博文，以确保博文内容的准确性。 +微信公众号: + +欢迎关注本人的博文: + +segmentFault +掘金 + + +面试系列 + +【面试篇】寒冬求职季之你必须要懂的原生JS(上) +【面试篇】寒冬求职季之你必须要懂的原生JS(中) +【面试篇】寒冬求职之你必须要懂的Web安全 +这儿有20道大厂面试题等你查收 + + +Step-By-Step + +【Step-By-Step】高频面试题深入解析 / 周刊 01 +【Step-By-Step】高频面试题深入解析/ 周刊 02 +【Step-By-Step】高频面试题深入解析/ 周刊 03 +【Step-By-Step】高频面试题深入解析/ 周刊 04 +【Step-By-Step】高频面试题深入解析/ 周刊 05 +【Step-By-Step】高频面试题深入解析/ 周刊 06 +【Step-By-Step】高频面试题深入解析/ 周刊 ...
CSS教程和技巧收藏
发表于|前端
CSS教程和技巧收藏 +只要一行代码，实现五种 CSS 经典布局 +Flex 布局教程：语法篇 +Flex 布局教程：实例篇 +CSS Grid 网格布局教程 +CSS 定位详解 +CSS 的空格处理 +CSS 变量教程 +CSS in JS 简介 +CSS Modules 用法教程 +CSS动画简介 +CSS使用技巧 +CSS3常用功能的写法 +CSS选择器笔记 +CSS中背景图片定位方法 + +
阮一峰ES6入门学习笔记
发表于|前端
阮一峰ES6入门学习笔记let和const +let只会在命令所在代码块内生效 + +在for循环中使用let，会在设置循环变量的地方建立一个父作用域（即for代码块内依旧可以声明同名变量 + +相比较var，let不能在声明之前使用 + +只要块级作用域中存在let，那么外部的同名变量就被屏蔽，这时候如果在声明前使用，会进入『暂时性死区』，将该变量看做不存在 + +如果存在暂时性死区，那么无论是调用该变量还是使用typeof都会抛出ReferenceError + +let不允许同一变量的重复声明 + +外层块级作用域的变量可以在内层块级作用域被访问 + +块级作用域可以替代匿名立即执行函数表达式（匿名IIFE）实现不污染外部变量的效果 +1234567891011// IIFE 写法(function () { var tmp = ...; ...}());// 块级作用域写法{ let tmp = ...; ...} + +函数可以在块级作用域内声明，但只能在作用域内被调用（ES6），ES5之前的版本会污染外部同名函数 + +块级作用域必须包含括号 +1234567// 第 ...
JavaScript基础
发表于|前端
+说明：本章内容为博主在原教程基础上添加自己的学习笔记，来源https://wangdoc.com/javascript/，教程版权归原作者所有。 + +基础篇一、JS的一些名词概念什么是作用域？变量存在的范围。 +可分为全局作用域和函数作用域，ES6新增块级作用域。 +什么是闭包？闭包就是能够读取其他函数内部变量的函数。 + +闭包的形式：函数内部定义函数 +本质上闭包就是将函数内部和外部连接起来的一座桥梁 + +闭包的作用： + +可以读取函数内部变量 +让这些变量始终保持在内存中，即闭包可以使得它诞生的环境一直存在。 +封装对象的私有属性和私有方法 + +什么是构造函数？用于构造(生成)实例的一个函数，使实例拥有构造函数内定于的属性和方法。 +什么是实例对象？实例对象就是通过new 构造函数生成的，拥有构造函数内定于的属性和方法的一个对象。 +什么是this？就是属性或方法当前所在的对象，指向当前运行环境（对象） +什么是原型？每个函数都有一个prototype属性，指向一个对象，该对象称为原型对象。 +什么是原型链？所有对象都有自己的原型对象，由于原型对象也是对象，因此它也有自己的原型，这就会形成一个原型链。 +最顶 ...
JavaScript内置对象
发表于|前端
内置对象篇一、Object对象1、概述JavaScript 原生提供Object对象（注意起首的O是大写），本章介绍该对象原生的各种方法。 +JavaScript 的所有其他对象都继承自Object对象，即那些对象都是Object的实例。 +Object对象的原生方法分成两类：Object本身的方法与Object的实例方法。 +（1）Object对象本身的方法 +所谓“本身的方法”就是直接定义在Object对象的方法。 +1Object.print = function (o) { console.log(o) }; + +上面代码中，print方法就是直接定义在Object对象上。 +（2）Object的实例方法 +所谓实例方法就是定义在Object原型对象Object.prototype上的方法。它可以被Object实例直接使用。 +123456Object.prototype.print = function () { console.log(this);};var obj = new Object();obj.print() // Object + +上面代码 ...
JavaScript面向对象编程
发表于|前端
面向对象编程一、实例对象与new命令1、对象是什么面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。 +每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。对象可以复用，通过继承机制还可以定制。因此，面向对象编程具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比起由一系列函数或指令组成的传统的过程式编程（procedural programming），更适合多人合作的大型软件项目。 +那么，“对象”（object）到底是什么？我们从两个层次来理解。 +（1）对象是单个实物的抽象。 +一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。 +（2）对象是一个容器，封装了属性（property）和方法（method）。 +属性是对象的状态，方法是对象的行为（完成某种任务）。 ...
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
分类
标签
JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
归档
网站资讯
文章数目 :
44
本站总字数 :
104.8k
本站访客数 :
本站总访问量 :
最后更新时间 :

npm常用命令

发表于|更新于|前端
|字数总计:1k|阅读时长:3分钟|阅读量:|评论数:

npm常用命令

简介

npm是跟随node一起安装的包（模块）管理器。常见的使用场景有以下几种：

+ })(window)

npm常用命令

发表于|更新于|前端
|字数总计:1k|阅读时长:3分钟|阅读量:|评论数:

npm常用命令

简介

npm是跟随node一起安装的包（模块）管理器。常见的使用场景有以下几种：

  • 允许用户从npm服务器下载别人编写的第三方包到本地使用。
  • 允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用。
    • @@ -205,7 +205,7 @@ 

    1
    2
    nrm ls # 查看可用的源
    nrm use <registry>　# 切换到指定源
    -

文章作者: Yang Tao
文章链接: https://whyta.cn/post/01619847fe92/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

Hello World

发表于|更新于
|字数总计:75|阅读时长:1分钟|阅读量:|评论数:

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

+ })(window)

Hello World

发表于|更新于
|字数总计:75|阅读时长:1分钟|阅读量:|评论数:

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

@@ -166,7 +166,7 @@

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

-
文章作者: Yang Tao
文章链接: https://whyta.cn/post/b5e7a3b20e6f/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
test
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

H5 调用支付宝小程序 Alipay JSAPI

发表于|更新于|小程序
|字数总计:432|阅读时长:2分钟|阅读量:|评论数:

H5 调用支付宝小程序 Alipay JSAPI

参考链接 官方文档：。
demo：

+ })(window)

H5 调用支付宝小程序 Alipay JSAPI

发表于|更新于|小程序
|字数总计:432|阅读时长:2分钟|阅读量:|评论数:

H5 调用支付宝小程序 Alipay JSAPI

参考链接 官方文档：。
demo：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>
    <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>

    <title>Alipay-demo</title>
  </head>
  <body>
    <div class="parent">
      hello
      <div class="child" contenteditable="true">world</div>
      <button class="btn1" onclick="fn()">点击1</button>
      <button class="btn2">点击2</button>
    </div>
    <script>
      var vConsole = new VConsole();
      function ready(callback) {
        if (window.AlipayJSBridge) {
          callback && callback();
          console.log(1);
        } else {
          console.log("请在支付宝打开");
          document.addEventListener("AlipayJSBridgeReady", callback, false);
          window.AlipayJSBridge = {
            call: function () {
              console.log("mock AlipayJSBridge call");
            },
          };
        }
      }
      ready(function () {
        document.querySelector(".btn2").addEventListener("click", function () {
          AlipayJSBridge.call(
            "beehiveOptionsPicker",
            {
              title: "还款日选择",
              optionsOne: [
                "每周一",
                "每周二",
                "每周三",
                "每周四",
                "每周五",
                "每周六",
                "每周日",
              ],
              selectedOneIndex: 2,
            },
            function (result) {
              alert(JSON.stringify(result));
            }
          );
          // AlipayJSBridge.call(
          //   "chooseContact",
          //   {
          //     title: "choose contacts", // title show on the title bar
          //     multiMax: 2, // max contact items size, default 50
          //     multiMaxText: "max!", // message if selected more than max
          //   },
          //   function (result) {
          //     alert(JSON.stringify(result));
          //   }
          // );
        });
      });
      function fn() {
        AlipayJSBridge.call("toast", {
          content: "请填写正确的姓名",
          type: "none",
          duration: 2000,
        });
      }
    </script>
  </body>
</html>

用 open with live server 方式打开生成二维码，然后用支付宝扫码预览

-
文章作者: Yang Tao
文章链接: https://whyta.cn/post/0b5b0be39ebf/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
小程序
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

JS异步编程

发表于|更新于|前端
|字数总计:2.2k|阅读时长:8分钟|阅读量:|评论数:

JS异步发展历程

知其然知其所以然，首先了解三个概念：

+ })(window)

JS异步编程

发表于|更新于|前端
|字数总计:2.2k|阅读时长:8分钟|阅读量:|评论数:

JS异步发展历程

知其然知其所以然，首先了解三个概念：

1.什么是同步？

所谓同步，就是在发出一个”调用”时，在没有得到结果之前，该“调用”就不返回。但是一旦调用返回，就得到返回值了。换句话说，就是由“调用者”主动等待这个“调用”的结果。此调用执行完之前，阻塞之后的代码执行。

2.什么是异步？

@@ -211,7 +211,7 @@ 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function read(url) {
    return new Promise((resolve, reject) => {
        fs.readFile(url, 'utf8', (err, data) => {
            if(err) reject(err);
            resolve(data);
        });
    });
}

async function readAsync() {
    let data = await Promise.all([
        read(A),
        read(B),
        read(C)
    ]);
    return data;
}

readAsync().then(data => {
    console.log(data);
});

所以JS的异步发展史，可以认为是从 callback -> promise -> generator -> async/await。async/await 使得异步代码看起来像同步代码，异步编程发展的目标就是让异步逻辑的代码看起来像同步一样。

因本人水平有限，文中内容未必百分百正确，如有不对的地方，请给我留言，谢谢。

-

文章作者: Yang Tao
文章链接: https://whyta.cn/post/0f1b1cae935f/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
JavaScript
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

GitHub高级搜索技巧

发表于|更新于
|字数总计:354|阅读时长:1分钟|阅读量:|评论数:

GitHub高级搜索技巧

in:name <关键字>
仓库名称带关键字查询

+ })(window)

GitHub高级搜索技巧

发表于|更新于
|字数总计:354|阅读时长:1分钟|阅读量:|评论数:

GitHub高级搜索技巧

in:name <关键字>
仓库名称带关键字查询

in:description <关键字>
仓库描述带关键字查询

in:readme <关键字>
README文件带关键字查询

@@ -174,7 +174,7 @@

*或使用高级搜索页搜索：

https://github.com/search/advanced

-
文章作者: Yang Tao
文章链接: https://whyta.cn/post/1aee7dab272b/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

使用CSS实现进度条和饼图

发表于|更新于|前端
|字数总计:3.6k|阅读时长:14分钟|阅读量:|评论数:

进度条，是我们日常界面中使用的非常多的一种，下面我们来看看。到今天，我们可以如何实现进度条。

+ })(window)

使用CSS实现进度条和饼图

发表于|更新于|前端
|字数总计:3.6k|阅读时长:14分钟|阅读量:|评论数:

进度条，是我们日常界面中使用的非常多的一种，下面我们来看看。到今天，我们可以如何实现进度条。

HTML 标签 – meter & progress

这个可能是一些同学还不太清楚的，HTML5 原生提供了两个标签 <meter> 和 <progress> 来实现进度条。

  • <meter>：用来显示已知范围的标量值或者分数值
    • @@ -339,7 +339,7 @@

    最后

    好了，本文到此结束，希望本文对你有所帮助 :)

    -
文章作者: Yang Tao
文章链接: https://whyta.cn/post/1fcbce14f5b5/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
CSS
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

JavaScript基础

发表于|更新于|前端
|字数总计:5.2k|阅读时长:19分钟|阅读量:|评论数:
+

说明：本章内容为博主在原教程基础上添加自己的学习笔记，来源https://wangdoc.com/javascript/，教程版权归原作者所有。

+
+

基础篇

一、JS的一些名词概念

什么是作用域？

变量存在的范围。

+

可分为全局作用域和函数作用域，ES6新增块级作用域。

+

什么是闭包？

闭包就是能够读取其他函数内部变量的函数。

+
    +
  • 闭包的形式：函数内部定义函数
    • +
  • 本质上闭包就是将函数内部和外部连接起来的一座桥梁
    • +
+

闭包的作用：

+
    +
  • 可以读取函数内部变量
    • +
  • 让这些变量始终保持在内存中，即闭包可以使得它诞生的环境一直存在。
    • +
  • 封装对象的私有属性和私有方法
    • +
+

什么是构造函数？

用于构造(生成)实例的一个函数，使实例拥有构造函数内定于的属性和方法。

+

什么是实例对象？

实例对象就是通过new 构造函数生成的，拥有构造函数内定于的属性和方法的一个对象。

+

什么是this？

就是属性或方法当前所在的对象，指向当前运行环境（对象）

+

什么是原型？

每个函数都有一个prototype属性，指向一个对象，该对象称为原型对象。

+

什么是原型链？

所有对象都有自己的原型对象，由于原型对象也是对象，因此它也有自己的原型，这就会形成一个原型链。

+

最顶层的原型是Object.prototype。

+
+

读取对象属性时，JS会先在对象自身上找，找到就直接返回，如果找不到，会到原型上找，如果还是找不到，就会去原型的原型上找，最终会到最顶层的Object.prototype上找，还是找不到就会返回undefined。

+
+

什么是constructor？

prototype原型对象都有一个constructor属性，默认指向prototype对象所在的构造函数。

+

什么是包装对象？

包装对象指的是将原始类型（数字、字符串、布尔值）进行实例化。

+

二、数据类型的转换

1、强制（手动）转换

强制转换主要指使用Number()、String()和Boolean()三个函数，手动将各种类型的值，分别转换成数字、字符串、布尔值。

+

Number()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 数值：转换后还是原来的值
Number(324) // 324

// 字符串：如果可以被解析为数值，则转换为相应的数值
Number('324') // 324

// 字符串：如果不可以被解析为数值，返回 NaN
Number('324abc') // NaN

// 空字符串转为0
Number('') // 0

// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0

// undefined：转成 NaN
Number(undefined) // NaN

// null：转成0
Number(null) // 0

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5
Number([]) // 0

//使用parseInt()转数组
parseInt([1, 2, 3]) // 1
+ +

String()

1
2
3
4
5
6
7
8
9
10
11
12
// 原始类型的转换
String(123) // "123"
String('abc') // "abc"
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"

// 对象的转换
String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"
String([]) // ""  空字符串
String(function(){}) // "function(){}"
+ +

Boolean()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 除了这五个为false，其他都为true
Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false

//true
Boolean({}) // true
Boolean([]) // true
Boolean(new Boolean(false)) // true

Boolean(1) // true
Boolean(' ') // true // 注意字符串内有个空格
+ +

2、自动转换

下面介绍自动转换，它是以强制转换为基础的。

+

遇到以下三种情况时，JavaScript 会自动转换数据类型，即转换是自动完成的，用户不可见。

+

第一种情况，不同类型的数据互相运算。

+
1
123 + 'abc' // "123abc"
+ +

第二种情况，对非布尔值类型的数据求布尔值。

+
1
2
3
if ('abc') {
  console.log('hello')
}  // "hello"
+ +

第三种情况，对非数值类型的值使用一元运算符（即+和-）。

+
1
2
+ {foo: 'bar'} // NaN
- [1, 2, 3] // NaN
+ +

自动转换的规则是这样的：预期什么类型的值，就调用该类型的转换函数。比如，某个位置预期为字符串，就调用String函数进行转换。如果该位置即可以是字符串，也可能是数值，那么默认转为数值。

+

由于自动转换具有不确定性，而且不易除错，建议在预期为布尔值、数值、字符串的地方，全部使用Boolean、Number和String函数进行显式转换。

+

自动转换为布尔值（Boolean）

JavaScript 遇到预期为布尔值的地方（比如if语句的条件部分），就会将非布尔值的参数自动转换为布尔值。系统内部会自动调用Boolean函数。

+

因此除了以下五个值，其他都是自动转为true。

+
    +
  • undefined
    • +
  • null
    • +
  • +0或-0
    • +
  • NaN
    • +
  • ''（空字符串）
    • +
+

下面这个例子中，条件部分的每个值都相当于false，使用否定运算符后，就变成了true。

+
1
2
3
4
5
6
7
8
if ( !undefined
  && !null
  && !0
  && !NaN
  && !''
) {
  console.log('true');
} // true
+ +

下面两种写法，有时也用于将一个表达式转为布尔值。它们内部调用的也是Boolean函数。

+
1
2
3
4
5
// 三元运算符
expression ? true : false

// 取反运算符
!! expression
+ + + +

自动转换为字符串（String）

JavaScript 遇到预期为字符串的地方，就会将非字符串的值自动转为字符串。具体规则是，先将复合类型的值转为原始类型的值，再将原始类型的值转为字符串。

+

字符串的自动转换，主要发生在字符串的加法运算时。当一个值为字符串，另一个值为非字符串，则后者转为字符串。

+
所有类型的值与字符串相加都会变成字符串
1
2
3
4
5
6
7
8
9
10
11
'5' + 1 // '51'
 1  + '5' // '15'
'5' + true // "5true"
'5' + false // "5false"
'5' + {} // "5[object Object]"
 5 + {} // "5[object Object]"
'5' + [] // "5"
 5 + [] // "5"
'5' + function (){} // "5function (){}"
'5' + undefined // "5undefined"
'5' + null // "5null"
+ +

这种自动转换不注意的话很容易出错。

+
1
2
3
4
5
6
var obj = {
  width: '100'
};

obj.width + 20 // "10020"
parerInt(obj.width) + 20 // 120
+ +

上面代码中，开发者可能期望返回120，但是由于自动转换，实际上返回了一个字符10020。正确做法是先把字符串转成数字。

+

自动转换为数值（Number）

JavaScript 遇到预期为数值的地方，就会将参数值自动转换为数值。系统内部会自动调用Number函数。

+
除加号与字符串运行会转成字符串外，其他运行基本都会自动转成数值
1
2
3
4
5
6
7
8
9
10
11
12
'5' - '2' // 3
'5' * '2' // 10
true - 1  // 0
false - 1 // -1
'1' - 1   // 0
'5' * []    // 0
false / '5' // 0
'abc' - 1   // NaN
null + 1 // 1
undefined + 1 // NaN

true+true // 2
+ +

上面代码中，运算符两侧的运算子，都被转成了数值。

+
+

注意：null转为数值时为0，而undefined转为数值时为NaN。

+
+

数值与布尔值、null也会转为数值

+
1
2
3
5+true // 6
5+false // 5
5+null //5
+ + + +

一元运算符也会把运算子转成数值。

+
1
2
3
4
+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0
+ + + +

三、错误处理机制

1、Error实例对象

JavaScript 解析或运行时，一旦发生错误，引擎就会抛出一个错误对象。JavaScript 原生提供Error构造函数，所有抛出的错误都是这个构造函数的实例。

+
1
2
var err = new Error('出错了');
err.message // "出错了"
+ +

上面代码中，我们调用Error构造函数，生成一个实例对象err。Error构造函数接受一个参数，表示错误提示，可以从实例的message属性读到这个参数。抛出Error实例对象以后，整个程序就中断在发生错误的地方，不再往下执行。

+

JavaScript 语言标准只提到，Error实例对象必须有message属性，表示出错时的提示信息，没有提到其他属性。大多数 JavaScript 引擎，对Error实例还提供name和stack属性，分别表示错误的名称和错误的堆栈，但它们是非标准的，不是每种实现都有。

+
    +
  • message：错误提示信息
    • +
  • name：错误名称（非标准属性）
    • +
  • stack：错误的堆栈（非标准属性）
    • +
+

使用name和message这两个属性，可以对发生什么错误有一个大概的了解。

+
1
2
3
4
var err = new Error('出错了');
if (err.name) {
  console.log(err.name + ': ' + err.message); // Error: 出错了
}
+ +

stack属性用来查看错误发生时的堆栈。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function throwit() {
  throw new Error('');
}

function catchit() {
  try {
    throwit();
  } catch(e) {
    console.log(e.stack); // print stack trace
  }
}

catchit()
// Error
//    at throwit (~/examples/throwcatch.js:9:11) // 堆栈的最内层throwit函数
//    at catchit (~/examples/throwcatch.js:3:9) // 向外一层catchit函数
//    at repl:1:5 // 函数的运行环境


// 堆栈信息说明
// Error 错误
//    at throwit 在throwit方法 (~/examples/throwcatch.js:9:11) 文件名：第几行：第几个字符
//    at catchit 在catchit方法 (~/examples/throwcatch.js:3:9) 文件名：第几行：第几个字符
//    at repl:1:5 // 函数的运行环境
+ +

上面代码中，错误堆栈的最内层是throwit函数，然后是catchit函数，最后是函数的运行环境。

+

2、原生错误类型

Error实例对象是最一般的错误类型，在它的基础上，JavaScript 还定义了其他6种错误对象。也就是说，存在Error的6个派生对象。

+

SyntaxError 对象（语法错误）

SyntaxError对象是解析代码时发生的语法错误。

+
1
2
3
4
5
6
7
8
9
// 变量名错误
var 1a;
// Uncaught SyntaxError: Invalid or unexpected token
// 语法错误：无效或意外的标记符号

// 缺少括号
console.log 'hello');
// Uncaught SyntaxError: Unexpected string
// 语法错误：意外的字符串
+ +

上面代码的错误，都是在语法解析阶段就可以发现，所以会抛出SyntaxError。第一个错误提示是“token 非法”，第二个错误提示是“字符串不符合要求”。

+

ReferenceError 对象（引用错误）

ReferenceError对象是引用一个不存在的变量时发生的错误。

+
1
2
3
4
// 使用一个不存在的变量
unknownVariable
// Uncaught ReferenceError: unknownVariable is not defined
// 引用错误： unknownVariable 没有定义
+ +

另一种触发场景是，将一个值分配给无法分配的对象，比如对函数的运行结果或者this赋值。

+
1
2
3
4
5
6
7
8
9
// 等号左侧不是变量
console.log() = 1
// Uncaught ReferenceError: Invalid left-hand side in assignment
// 引用错误： 赋值中左边是无效的

// this 对象不能手动赋值
this = 1
// ReferenceError: Invalid left-hand side in assignment
// 引用错误：  赋值中左边是无效的
+ +

上面代码对函数console.log的运行结果和this赋值，结果都引发了ReferenceError错误。

+

RangeError 对象（范围错误）

RangeError对象是一个值超出有效范围时发生的错误。主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。

+
1
2
3
4
// 数组长度不得为负数
new Array(-1)
// Uncaught RangeError: Invalid array length
// 范围错误：无效的数组长度
+ + + +

TypeError 对象（类型错误）

TypeError对象是变量或参数不是预期类型时发生的错误。比如，对字符串、布尔值、数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数。

+
1
2
3
4
5
6
7
8
new 123
// Uncaught TypeError: number is not a function
// 类型错误： 数字不是一个函数

var obj = {};
obj.unknownMethod()
// Uncaught TypeError: obj.unknownMethod is not a function
// 类型错误：obj.unknownMethod 不是一个函数
+ +

上面代码的第二种情况，调用对象不存在的方法，也会抛出TypeError错误，因为obj.unknownMethod的值是undefined，而不是一个函数。

+

URIError 对象 （URI错误）

URIError对象是 URI 相关函数的参数不正确时抛出的错误，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。

+
1
2
decodeURI('%2')
// URIError: URI malformed
+ + + +

EvalError 对象 （eval错误）

eval函数没有被正确执行时，会抛出EvalError错误。该错误类型已经不再使用了，只是为了保证与以前代码兼容，才继续保留。

+

总结（开发者手动使用）

以上这6种派生错误，连同原始的Error对象，都是构造函数。开发者可以使用它们，手动生成错误对象的实例。这些构造函数都接受一个参数，代表错误提示信息（message）。

+
1
2
3
4
5
6
7
var err1 = new Error('出错了！');
var err2 = new RangeError('出错了，变量超出有效范围！');
var err3 = new TypeError('出错了，变量类型无效！');

err1.message // "出错了！"
err2.message // "出错了，变量超出有效范围！"
err3.message // "出错了，变量类型无效！"
+ + + +

3、自定义错误

除了 JavaScript 原生提供的七种错误对象，还可以定义自己的错误对象。

+
1
2
3
4
5
6
7
8
9
10
function UserError(message) {
  this.message = message || '默认信息';
  this.name = 'UserError';
}

UserError.prototype = new Error(); // 原型继承 Error对象
UserError.prototype.constructor = UserError;

// 使用
new UserError('这是自定义的错误！');
+ +

上面代码自定义一个错误对象UserError，让它继承Error对象。然后，就可以生成这种自定义类型的错误了。

+

4、throw 语句 （中断程序并抛出错误）

throw语句的作用是手动中断程序执行，抛出一个错误。

+
1
2
3
4
5
var x = 0;
if (x <= 0) {
  throw new Error('x 必须为正数');
}
// Uncaught Error: x 必须为正数
+ +

上面代码中，如果变量x小于等于0，就手动抛出一个错误，告诉用户x的值不正确，整个程序就会在这里中断执行。可以看到，throw抛出的错误就是它的参数，这里是一个Error实例。

+
1
2
3
4
5
6
7
function UserError(message) {
  this.message = message || '默认信息';
  this.name = 'UserError';
}

throw new UserError('出错了！');
// Uncaught UserError {message: "出错了！", name: "UserError"}
+ +

上面代码中，throw抛出的是一个UserError实例。

+

实际上，throw可以抛出任何类型的值。也就是说，它的参数可以是任何值。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 抛出一个字符串
throw 'Error！';
// Uncaught Error！

// 抛出一个数值
throw 42;
// Uncaught 42

// 抛出一个布尔值
throw true;
// Uncaught true

// 抛出一个对象
throw {
  toString: function () {
    return 'Error!';
  }
};
// Uncaught {toString: ƒ}
+ +

对于 JavaScript 引擎来说，遇到throw语句，程序就中止了。引擎会接收到throw抛出的信息，可能是一个错误实例，也可能是其他类型的值。

+

5、try…catch 结构（捕获错误，对错误进行处理，不中断）

一旦发生错误，程序就中止执行了。JavaScript 提供了try...catch结构，允许对错误进行处理，选择是否往下执行。

+
1
2
3
4
5
6
7
8
9
try {
  throw new Error('出错了!');
} catch (e) {
  console.log(e.name + ": " + e.message);
  console.log(e.stack);
}
// Error: 出错了!
//   at <anonymous>:3:9
//   ...
+ +

上面代码中，try代码块抛出错误（上例用的是throw语句），JavaScript 引擎就立即把代码的执行，转到catch代码块，或者说错误被catch代码块捕获了。catch接受一个参数，表示try代码块抛出的值。

+

如果你不确定某些代码是否会报错，就可以把它们放在try...catch代码块之中，便于进一步对错误进行处理。

+
1
2
3
4
5
try {
  f();
} catch(e) {
  // 处理错误
}
+ +

上面代码中，如果函数f执行报错，就会进行catch代码块，接着对错误进行处理。

+

catch代码块捕获错误之后，程序不会中断，会按照正常流程继续执行下去。

+
1
2
3
4
5
6
7
8
try {
  throw "出错了";
} catch (e) {
  console.log(111);
}
console.log(222);
// 111
// 222
+ +

上面代码中，try代码块抛出的错误，被catch代码块捕获后，程序会继续向下执行。

+

catch代码块之中，还可以再抛出错误，甚至使用嵌套的try...catch结构。

+
1
2
3
4
5
6
7
8
9
10
11
12
var n = 100;

try {
  throw n;
} catch (e) {
  if (e <= 50) {
    // ...
  } else {
    throw e;
  }
}
// Uncaught 100
+ +

上面代码中，catch代码之中又抛出了一个错误。

+

为了捕捉不同类型的错误，catch代码块之中可以加入判断语句。

+
1
2
3
4
5
6
7
8
9
10
try {
  foo.bar();
} catch (e) {
  if (e instanceof EvalError) {
    console.log(e.name + ": " + e.message);
  } else if (e instanceof RangeError) {
    console.log(e.name + ": " + e.message);
  }
  // ...
}
+ +

上面代码中，catch捕获错误之后，会判断错误类型（EvalError还是RangeError），进行不同的处理。

+

6、finally 代码块（在try..catch最后，必执行的）

try...catch结构允许在最后添加一个finally代码块，表示不管是否出现错误，都必需在最后运行的语句。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function cleansUp() {
  try {
    throw new Error('出错了……');
    console.log('此行不会执行');
  } finally { // 不管有没有出错都会执行finally
    console.log('完成清理工作');
  }
  console.log('此行不会执行');
}

cleansUp()
// 完成清理工作
// Uncaught Error: 出错了……
//    at cleansUp (<anonymous>:3:11)
//    at <anonymous>:10:1

// 由于没有catch语句，所以会打印出错误信息，并中断除finally以外的代码。
// 如果有catch语句则会执行catch内的代码块，而不会打印错误信息。且不会中断代码。
+ +

上面代码中，由于没有catch语句块，一旦发生错误，代码就会中断执行。中断执行之前，会先执行finally代码块，然后再向用户提示报错信息。

+
1
2
3
4
5
6
7
8
9
10
11
12
function idle(x) {
  try {
    console.log(x);
    return 'result';
  } finally {
    console.log('FINALLY');
  }
}

idle('hello')
// hello
// FINALLY
+ +

上面代码中，try代码块没有发生错误，而且里面还包括return语句，但是finally代码块依然会执行。而且，这个函数的返回值还是result。

+

下面的例子说明，return语句的执行是排在finally代码之前，只是等finally代码执行完毕后才返回。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
var count = 0;
function countUp() {
  try {
    return count;
  } finally {
    count++;
  }
}

countUp()
// 0
count
// 1
+ +

上面代码说明，return语句里面的count的值，是在finally代码块运行之前就获取了。

+

下面是finally代码块用法的典型场景。

+
1
2
3
4
5
6
7
8
9
openFile(); // 打开文件

try {
  writeFile(Data); // 写入文件
} catch(e) {
  handleError(e); // 如果写入出错这处理错误
} finally {
  closeFile();// 不管是否出错都会执行关闭文件
}
+ +

上面代码首先打开一个文件，然后在try代码块中写入文件，如果没有发生错误，则运行finally代码块关闭文件；一旦发生错误，则先使用catch代码块处理错误，再使用finally代码块关闭文件。

+

下面的例子充分反映了try...catch...finally这三者之间的执行顺序。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function f() {
  try {
    console.log(0);
    throw 'bug';
  } catch(e) {
    console.log(1);
    return true; // 这句原本会延迟到 finally 代码块结束再执行
    console.log(2); // 不会运行
  } finally {
    console.log(3);
    return false; // 这句会覆盖掉前面那句 return
    console.log(4); // 不会运行
  }

  console.log(5); // 不会运行
}

var result = f();
// 0
// 1
// 3

result
// false
+ +

上面代码中，catch代码块结束执行之前，会先执行finally代码块。

+

catch代码块之中，触发转入finally代码块的标志，不仅有return语句，还有throw语句。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function f() {
  try {
    throw '出错了！';
  } catch(e) {
    console.log('捕捉到内部错误');
    throw e; // 这句原本会等到finally结束再执行
  } finally {
    return false; // 直接返回
  }
}

try {
  f(); // 接收到返回值false，并没有接收到错误
} catch(e) {
  // 此处不会执行
  console.log('caught outer "bogus"');
}

//  捕捉到内部错误
+ +

上面代码中，进入catch代码块之后，一遇到throw语句，就会去执行finally代码块，其中有return false语句，因此就直接返回了，不再会回去执行catch代码块剩下的部分了。

+

try代码块内部，还可以再使用try代码块。

+
1
2
3
4
5
6
7
8
9
10
11
12
13
try {
  try {
    consle.log('Hello world!'); // 报错，console拼错
  }
  finally {
    console.log('Finally');
  }
  console.log('Will I run?');
} catch(error) {
  console.error(error.message);
}
// Finally
// consle is not defined
+ +

上面代码中，try里面还有一个try。内层的try报错（console拼错了），这时会执行内层的finally代码块，然后抛出错误，被外层的catch捕获。

+

四、console对象

console.time()，console.timeEnd() （用于计算程序的用时）

这两个方法用于计时，可以算出一个操作所花费的准确时间。

+
1
2
3
4
5
6
7
8
9
console.time('Array initialize');

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
};

console.timeEnd('Array initialize');
// Array initialize: 1914.481ms
+ +

time方法表示计时开始，timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后，控制台会显示“计时器名称: 所耗费的时间”。

+

文档

学习文档：https://wangdoc.com/javascript/

+
文章作者: Yang Tao
文章链接: https://whyta.cn/post/2708b90f67a7/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
JavaScript
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
目录
  1. 1. 基础篇
    1. 1.1. 一、JS的一些名词概念
      1. 1.1.0.1. 什么是作用域？
      2. 1.1.0.2. 什么是闭包？
      3. 1.1.0.3. 什么是构造函数？
      4. 1.1.0.4. 什么是实例对象？
      5. 1.1.0.5. 什么是this？
      6. 1.1.0.6. 什么是原型？
      7. 1.1.0.7. 什么是原型链？
      8. 1.1.0.8. 什么是constructor？
      9. 1.1.0.9. 什么是包装对象？
  2. 1.2. 二、数据类型的转换
    1. 1.2.1. 1、强制（手动）转换
      1. 1.2.1.1. Number()
      2. 1.2.1.2. String()
      3. 1.2.1.3. Boolean()
    2. 1.2.2. 2、自动转换
      1. 1.2.2.1. 自动转换为布尔值（Boolean）
      2. 1.2.2.2. 自动转换为字符串（String）
        1. 1.2.2.2.1. 所有类型的值与字符串相加都会变成字符串
        2. 1.2.2.2.2.
      3. 1.2.2.3. 自动转换为数值（Number）
        1. 1.2.2.3.1. 除加号与字符串运行会转成字符串外，其他运行基本都会自动转成数值
  3. 1.3. 三、错误处理机制
    1. 1.3.1. 1、Error实例对象
    2. 1.3.2. 2、原生错误类型
      1. 1.3.2.1. SyntaxError 对象（语法错误）
      2. 1.3.2.2. ReferenceError 对象（引用错误）
      3. 1.3.2.3. RangeError 对象（范围错误）
      4. 1.3.2.4. TypeError 对象（类型错误）
      5. 1.3.2.5. URIError 对象 （URI错误）
      6. 1.3.2.6. EvalError 对象 （eval错误）
      7. 1.3.2.7. 总结（开发者手动使用）
    3. 1.3.3. 3、自定义错误
    4. 1.3.4. 4、throw 语句 （中断程序并抛出错误）
    5. 1.3.5. 5、try…catch 结构（捕获错误，对错误进行处理，不中断）
    6. 1.3.6. 6、finally 代码块（在try..catch最后，必执行的）
  4. 1.4. 四、console对象
    1. 1.4.1. console.time()，console.timeEnd() （用于计算程序的用时）
  5. 1.5. 文档
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
\ No newline at end of file diff --git a/post/2711ab091b13/index.html b/post/2711ab091b13/index.html index ff6e345e..926a608a 100644 --- a/post/2711ab091b13/index.html +++ b/post/2711ab091b13/index.html @@ -7,7 +7,7 @@ - + @@ -58,7 +58,7 @@ isHome: false, isHighlightShrink: false, isToc: true, - postUpdate: '2023-11-01 08:31:47' + postUpdate: '2023-11-03 06:20:13' }

ES6来简化代码,你都用过哪些

发表于|更新于|前端
|字数总计:2.8k|阅读时长:11分钟|阅读量:|评论数:

块级作用域

为什么需要块级作用域?

+ })(window)

ES6来简化代码,你都用过哪些

发表于|更新于|前端
|字数总计:2.8k|阅读时长:11分钟|阅读量:|评论数:

块级作用域

为什么需要块级作用域?

ES5 只有全局作用域和函数作用域，没有块级作用域，这导致很多场景不合理。

JavaScript面试ES6
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

GitHub Actions 实现自动部署静态博客

发表于|更新于|GitHub
|字数总计:1.3k|阅读时长:4分钟|阅读量:|评论数:

GitHub Actions 实现自动部署静态博客

在了解GitHub Actions之后，尝试使用它发现能够满足我的需求。GitHub Actions 入门教程

+ })(window)

GitHub Actions 实现自动部署静态博客

发表于|更新于|GitHub
|字数总计:1.3k|阅读时长:4分钟|阅读量:|评论数:

GitHub Actions 实现自动部署静态博客

在了解GitHub Actions之后，尝试使用它发现能够满足我的需求。GitHub Actions 入门教程

GitHub-Actions

actions顾名思义就是一堆动作，是一个持续集成服务，持续集成包含了拉代码、运行测试、编译代码、登录远程服务器，发布到第三方服务等等的操作，GitHub将这些操作称为actions。

概念：Workflows, Events, Jobs, Actions, Runners

文章作者: Yang Tao
文章链接: https://whyta.cn/post/2a5926c022be/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

js倒计时

发表于|更新于|前端
|字数总计:291|阅读时长:1分钟|阅读量:|评论数:

JS 实现倒计时功能

html

+ })(window)

js倒计时

发表于|更新于|前端
|字数总计:291|阅读时长:1分钟|阅读量:|评论数:

JS 实现倒计时功能

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
  <head>
    <meta charset="UTF-8" />
    <title>30分钟倒计时</title>
  </head>
  <body>
    <div id="timer" style="color: red"></div>
  </body>
  <script type="text/javascript">
    var oBox = document.getElementById("timer");
    var maxtime = 30 * 60;
    function CountDown() {
      if (maxtime >= 0) {
        minutes = Math.floor(maxtime / 60);
        seconds = Math.floor(maxtime % 60);
        msg = "距离结束还有" + minutes + "分" + seconds + "秒";
        oBox.innerHTML = msg;
        if (maxtime == 5 * 60) alert("还剩5分钟");
        --maxtime;
      } else {
        clearInterval(timer);
        alert("时间到，结束!");
      }
    }
    timer = setInterval("CountDown()", 1000);
  </script>
</html>

vue

-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//data中定义 minutes, seconds
//methods中的方法
 madeTime() {
 	  //let now = new Date().getTime();
      // 设置截止时间
      //let end = new Date(this.curStartTime).getTime();
      //let maxtime = end - now;

      var maxtime = 30 * 60; //30分钟(1800秒)
      // var minutes, seconds, msg;
      var _this = this;
      var timer = setInterval(() => {
        if (maxtime >= 0) {
          _this.minutes = Math.floor(maxtime / 60)
            .toString()
            .padStart(2, "0");
          _this.seconds = Math.floor(maxtime % 60)
            .toString()
            .padStart(2, "0");
          // msg = "距离结束还有" + minutes + "分" + seconds + "秒";
          if (maxtime == 5 * 60) alert("还剩5分钟");
          --maxtime;
        } else {
          clearInterval(timer);
          alert("时间到，结束!");
        }
      }, 1000);
    }
文章作者: Yang Tao
文章链接: https://whyta.cn/post/2fd5979576c4/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

项目性能优化方案

发表于|更新于|前端
|字数总计:5.2k|阅读时长:17分钟|阅读量:|评论数:

Vue 项目性能优化方案

+ })(window)

项目性能优化方案

发表于|更新于|前端
|字数总计:5.2k|阅读时长:17分钟|阅读量:|评论数:

Vue 项目性能优化方案

前言

Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成：

JavaScript面试
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

GitHub Actions 定时运行代码

发表于|更新于|GitHub
|字数总计:1.4k|阅读时长:5分钟|阅读量:|评论数:

GitHub Actions 定时运行代码：每天定时百度链接推送

GitHub Actions 是一个 CI/CD（持续集成/持续部署）工具，但也可用作代码运行环境。功能非常强大，能够玩出许多花样。

+ })(window)

GitHub Actions 定时运行代码

发表于|更新于|GitHub
|字数总计:1.4k|阅读时长:5分钟|阅读量:|评论数:

GitHub Actions 定时运行代码：每天定时百度链接推送

GitHub Actions 是一个 CI/CD（持续集成/持续部署）工具，但也可用作代码运行环境。功能非常强大，能够玩出许多花样。

百度主动链接推送

链接主动推送在百度站长中有介绍

@@ -204,7 +204,7 @@

每天早上7点定时向邮箱推送天气预报

-

文章作者: Yang Tao
文章链接: https://whyta.cn/post/413a7e2da9de/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

JS正则表达式的使用

发表于|更新于|前端
|字数总计:3k|阅读时长:11分钟|阅读量:|评论数:

正则表达式用来处理字符串特别好用，在JavaScript中能用到正则表达式的地方有很多，本文对正则表达式基础知识和Javascript中正则表达式的使用做一个总结。

+ })(window)

JS正则表达式的使用

发表于|更新于|前端
|字数总计:3k|阅读时长:11分钟|阅读量:|评论数:

正则表达式用来处理字符串特别好用，在JavaScript中能用到正则表达式的地方有很多，本文对正则表达式基础知识和Javascript中正则表达式的使用做一个总结。

第一部分简单列举了正则表达式在JavaScript中的使用场景；第二部分详细介绍正则表达式的基础知识，写出一些例子方便理解。

本文的内容是我自己看完正则表达式写法，和犀牛书中js正则表达式的章节后的总结，所以内容可能会有疏漏和不严谨的地方。若有大神路过发现文中错误的地方，欢迎斧正！

Javascript中正则表达式的使用

一个正则表达式可以认为是对一种字符片段的特征描述，而它的作用就是从一堆字符串中找出满足条件的子字符串。比如我在JavaScript中定义一个正则表达式：

@@ -247,7 +247,7 @@ 

1
2
"aadasd\nbasdc".match(/^[a-z]+$/g);  //null  字符串^和$之间有换行符，匹配不上 [a-z]+ ,故返回null
"aadasd\nbasdc".match(/^[a-z]+$/gm);  // ["aadasd", "basdc"] ，改变^$的含义，让其匹配一行的开头和末尾，可以得到两行的结果

文章作者: Yang Tao
文章链接: https://whyta.cn/post/43f1f7cbd836/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
JavaScript
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

test

发表于|更新于
|字数总计:431|阅读时长:1分钟|阅读量:|评论数:

博客目录

打造一系列前端进阶的优质文章，博客将侧重于原生JS、 React、ReactNative和Webpack等入门与底层原理分析，只有在自己实践和深入理解后，才会输出相关博文，以确保博文内容的准确性。

+ })(window)

test

发表于|更新于
|字数总计:431|阅读时长:1分钟|阅读量:|评论数:

博客目录

打造一系列前端进阶的优质文章，博客将侧重于原生JS、 React、ReactNative和Webpack等入门与底层原理分析，只有在自己实践和深入理解后，才会输出相关博文，以确保博文内容的准确性。

微信公众号:

欢迎关注本人的博文:

@@ -210,7 +210,7 @@

9102了，你还不会移动端真机调试？

html中的空格

xxx

-
文章作者: Yang Tao
文章链接: https://whyta.cn/post/8de39939fd57/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
test
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

reduce的妙用

发表于|更新于|前端
|字数总计:1.4k|阅读时长:6分钟|阅读量:|评论数:

reduce 函数可以根据需要进行累加、过滤、分组、映射等操作，是一个非常强大的数组方法。在数据处理时使用的非常频繁，很多复杂的逻辑如果用reduce去处理，都非常的简洁，在实际的开发工作过程中，积累了一些常见又超级好用的 reduce 技巧的代码片段，筛选了如下 10 个，以供大家参考

+ })(window)

reduce的妙用

发表于|更新于|前端
|字数总计:1.4k|阅读时长:6分钟|阅读量:|评论数:

reduce 函数可以根据需要进行累加、过滤、分组、映射等操作，是一个非常强大的数组方法。在数据处理时使用的非常频繁，很多复杂的逻辑如果用reduce去处理，都非常的简洁，在实际的开发工作过程中，积累了一些常见又超级好用的 reduce 技巧的代码片段，筛选了如下 10 个，以供大家参考

reduce 介绍

reduce 是数组的方法，可以对数组中的每个元素依次执行一个回调函数，从左到右依次累积计算出一个最终的值。其语法为：

1
arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
@@ -187,7 +187,7 @@

文章作者: Yang Tao
文章链接: https://whyta.cn/post/4a1f85f59803/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！

JavaScript
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

一份前端够用的 Linux 命令

发表于|更新于|Linux
|字数总计:2.7k|阅读时长:10分钟|阅读量:|评论数:

一份前端够用的 Linux 命令

我在建站的过程中，必不可少会用到 Linux 命令，所以此篇写一份基本够用的 Linux 命令，会涵盖博客搭建系列文章用到的各种命令，方便查询和学习使用。

+ })(window)

一份前端够用的 Linux 命令

发表于|更新于|Linux
|字数总计:2.7k|阅读时长:10分钟|阅读量:|评论数:

一份前端够用的 Linux 命令

我在建站的过程中，必不可少会用到 Linux 命令，所以此篇写一份基本够用的 Linux 命令，会涵盖博客搭建系列文章用到的各种命令，方便查询和学习使用。

0. Owner、Group、Others、Root

Linux 系统是一种多用户系统，它将文件访问者身份分为三种：

文件所有者（Owner）

当创建一个用户的时候，Linux 会为该用户创建一个主目录，路径为 /home/<username>，我们可以使用 cd ~，快捷进入主目录。如果你想放一个私密文件，就可以放在自己的主目录里，然后设置只能自己查看。

群组（Group）

每个用户都有一个用户组，方便多人操作的时候，为一群人分配权限。当创建用户的时候，会自动创建一个与它同名的用户组。

@@ -356,7 +356,7 @@ 

1
2
3
4
# -v 冗详模式，打印关于运行情况的调试信息
ssh -v git@8.8.8.8


Linux 下安装 MySQL

参考链接 Linux 下安装 Mysql（rpm 包安装）。

-

文章作者: Yang Tao
文章链接: https://whyta.cn/post/50cfe4754950/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
Linux
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

NodeJS框架Express与Koa对比

发表于|更新于|NodeJS
|字数总计:1.6k|阅读时长:7分钟|阅读量:|评论数:

NodeJS框架Express与Koa对比

框架介绍

express框架是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，主要基于 Connect 中间件，并且自身封装了路由、视图处理等功能。

+ })(window)

NodeJS框架Express与Koa对比

发表于|更新于|NodeJS
|字数总计:1.6k|阅读时长:7分钟|阅读量:|评论数:

NodeJS框架Express与Koa对比

框架介绍

express框架是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，主要基于 Connect 中间件，并且自身封装了路由、视图处理等功能。

koa是 Express 原班人马基于 ES6 新特性重新开发的框架，主要基于 co 中间件，框架自身不包含任何中间件，很多功能需要借助第三方中间件解决，但是由于其基于 ES6 generator 特性的异步流程控制，解决了 “callback hell” 和麻烦的错误处理问题。

相同点
两个框架都对http进行了封装。相关的api都差不多，同一批人所写。

不同点
express内置了许多中间件可供使用，而koa没有。

@@ -209,7 +209,7 @@

六、cookie管理

express
使用中间件向 Node.js 服务器发送 cookie 信息

1
2
3
4
5
6
7
8
9
10
11
12
13
// express_cookie.js 文件
var express = require('express')
var cookieParser = require('cookie-parser')
var util = require('util');
 
var app = express()
app.use(cookieParser())
 
app.get('/', function(req, res) {
    console.log("Cookies: " + util.inspect(req.cookies));
})
 
app.listen(8081)
-
文章作者: Yang Tao
文章链接: https://whyta.cn/post/57df6de567e2/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
NodeJSExpressKoa
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？

发表于|更新于|前端
|字数总计:1.3k|阅读时长:5分钟|阅读量:|评论数:

面试官：Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？

+ })(window)

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？

发表于|更新于|前端
|字数总计:1.3k|阅读时长:5分钟|阅读量:|评论数:

面试官：Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？

开始之前

Composition API 可以说是Vue3的最大特点，那么为什么要推出Composition Api，解决了什么问题？

通常使用Vue2开发的项目，普遍会存在以下问题：

    @@ -218,7 +218,7 @@

    小结Composition API中见不到this的使用，减少了this指向不明的情况
  • 如果是小型组件，可以继续使用Options API，也是十分友好的

-
文章作者: Yang Tao
文章链接: https://whyta.cn/post/582971d4aea1/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
vue
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

Vue 和 React 的区别

发表于|更新于|前端
|字数总计:3.3k|阅读时长:10分钟|阅读量:|评论数:

Vue 和 React 的区别看这里

+ })(window)

Vue 和 React 的区别

发表于|更新于|前端
|字数总计:3.3k|阅读时长:10分钟|阅读量:|评论数:

Vue 和 React 的区别看这里

简单说说 Vue 和 React 的区别

青铜级

只要真正了解一些，或者用过两个框架开发，就一定能说上来的一些语法层面：

  • Vue API 多，React API 少
    • @@ -203,7 +203,7 @@

    从加载速度，运行时性能来说，我觉得这两个框架综合各种场景应该是没什么质的差别的。硬要说的话，Vue 在更新时性能优化方面需要的心智负担可能会少那么一点，特别是 Vue3，而 React 如果不注意，容易导致一些组件无用的 Diff，但其实实际项目中真正能遇到这种性能瓶颈的也是极少数，所以(这里有两种说法)：

    (如果公司主要用 Vue 技术栈的话)：所以总的来说我觉得 Vue 性能上会更有优势一点，特别是 Vue3 更加灵活，有很好的可扩展性，同时有更快的渲染速度和更小的打包体积。从 mixins 到 HOC 到 render props 再到 hooks，React 基本已经废掉了过去很多基于组件的逻辑抽象模式，抹掉了 JSX 对比模板的一个优势，Vue3 中现在也都能做到，所以我会偏向 Vue3。

    (如果公司主要用 React 技术栈的话)：所以总的来说我觉得要是一些不大的系统或者 H5 就用 Vue，因为不管是上手还是开发难度上都很简单，开发效率也高嘛，而且它有更小的打包体积，毕竟在移动端网络差异大的情况下，资源体积是非常重要的。但像是一些中后台系统，或者一些大点的项目，会越做越大的，多人协作开发的，就用 React，因为它的函数式编程有更加灵活的结构和可扩展性，丰富的生态圈和工具链，解决方案多，后期也更方便迭代与维护，还适用原生 APP，所以我会偏向 React。

    -

文章作者: Yang Tao
文章链接: https://whyta.cn/post/5939c1eb0f86/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
JavaScript
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
44
标签
17
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
Hello World
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令
Set、Map、WeakSet、WeakMap是什么
相关推荐
评论
GitalkValine
avatar
Yang Tao
share & study
文章
49
标签
16
分类
7
Follow Me
公告
=>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
最新文章
我的GitHub首页
常用meta整理
使用Gitalk实现静态博客无后台评论系统
Markdown使用教程
npm常用命令

JS数字精度丢失的问题

发表于|更新于|前端
|字数总计:1.9k|阅读时长:6分钟|阅读量:|评论数:

一、场景复现

+ })(window)

JS数字精度丢失的问题

发表于|更新于|前端
|字数总计:1.9k|阅读时长:6分钟|阅读量:|评论数:

一、场景复现

JS数字精度丢失的一些常见问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 加法 =====================
0.1 + 0.2 === 0.3 // false
0.1 + 0.2 = 0.30000000000000004
0.7 + 0.1 = 0.7999999999999999
0.2 + 0.4 = 0.6000000000000001

// 减法 =====================
1.5 - 1.2 = 0.30000000000000004
0.3 - 0.2 = 0.09999999999999998
 
// 乘法 =====================
19.9 * 100 = 1989.9999999999998
0.8 * 3 = 2.4000000000000004
35.41 * 100 = 3540.9999999999995

// 除法 =====================
0.3 / 0.1 = 2.9999999999999996
0.69 / 10 = 0.06899999999999999
@@ -236,7 +236,7 @@

数值-阮一峰
  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt
    • -

    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/67dc59a2dbf1/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    JavaScript
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    9个你不知道的 CSS 伪元素

    发表于|更新于|前端
    |字数总计:1.1k|阅读时长:3分钟|阅读量:|评论数:

    9个你不知道的 CSS 伪元素

    CSS 伪元素是一项强大的功能，它允许您为所选元素的特定部分设置样式，而无需额外的 JavaScript 代码。
    虽然许多开发人员都熟悉常用的伪元素，如 ::before 和 ::after，但还有一些其他元素经常被忽视或未得到充分利用。

    + })(window)

    9个你不知道的 CSS 伪元素

    发表于|更新于|前端
    |字数总计:1.1k|阅读时长:3分钟|阅读量:|评论数:

    9个你不知道的 CSS 伪元素

    CSS 伪元素是一项强大的功能，它允许您为所选元素的特定部分设置样式，而无需额外的 JavaScript 代码。
    虽然许多开发人员都熟悉常用的伪元素，如 ::before 和 ::after，但还有一些其他元素经常被忽视或未得到充分利用。

    1. ::selection 伪元素

    ::selection 伪元素以用户选择的文本部分为目标。它提供了一种将样式应用于所选文本并自定义其外观的方法。

    例子：

    1
    2
    3
    4
    ::selection {
      background-color: yellow;
      color: red;
    }
    @@ -191,7 +191,7 @@

    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/6ce935d403d7/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！

    CSS
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    常用meta整理

    发表于|更新于
    |字数总计:1.9k|阅读时长:8分钟|阅读量:|评论数:

    常用meta整理

    <meta> 元素

    概要

    meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

    +

    必要属性

    + + + + + + + + + + + + + +
    属性值描述
    contentsome text定义与http-equiv或name属性相关的元信息
    +

    可选属性

    + + + + + + + + + + + + + + + + + + + + + + + +
    属性值描述
    http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。
    nameauthor / description / keywords / generator / revised / others把 content 属性关联到一个name。
    contentsome text定义用于翻译 content 属性值的格式。
    +

    网页相关

      +
    • 申明编码
      • +
    +
    1
    <meta charset='utf-8' />
    + +
      +
    • 优先使用 IE 最新版本和 Chrome
      • +
    +
    1
    2
    3
    4
    5
    6
    <!-- 关于X-UA-Compatible -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 推荐 -->

    <meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
    <meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
    <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
    + +
      +
    • 浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。参考文档
      • +
    +
    1
    2
    3
    默认用极速核(Chrome)：<meta name="renderer" content="webkit">
    默认用ie兼容内核（IE6/7）：<meta name="renderer" content="ie-comp">
    默认用ie标准内核（IE9/IE10/IE11/取决于用户的IE）：<meta name="renderer" content="ie-stand">
    + +

    国内双核浏览器默认内核模式如下：

    +
      +
    1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）
      2. +
    2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）
      3. +
    +
      +
    • 禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。
      • +
    +
    1
    <meta http-equiv="Pragma" content="no-cache">
    + +
      +
    • Windows 8
      • +
    +
    1
    2
    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
    + +
      +
    • 站点适配：主要用于PC-手机页的对应关系。
      • +
    +
    1
    2
    3
    4
    5
    <meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
    <!--
    [wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
    url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
     -->
    + +
      +
    • 转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta。
      • +
    +
    1
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    + + + + + +

    SEO优化

    参考文档

    +
      +
    • 页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。
      使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。
      • +
    +
    1
    <meta name="keywords" content="your tags" />
    + +
      +
    • 页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
      • +
    +
    1
    <meta name="description" content="150 words" />
    + +
      +
    • 搜索引擎索引方式，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。确保正确使用nofollow和noindex属性值。
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <meta name="robots" content="index,follow" />
    <!--
        all：文件将被检索，且页面上的链接可以被查询；
        none：文件将不被检索，且页面上的链接不可以被查询；
        index：文件将被检索；
        follow：页面上的链接可以被查询；
        noindex：文件将不被检索；
        nofollow：页面上的链接不可以被查询。
     -->
    + +
      +
    • 页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。
      • +
    +
    1
    <meta http-equiv="refresh" content="0;url=" />
    + +
      +
    • 其他
      • +
    +
    1
    2
    3
    4
    <meta name="author" content="author name" /> <!-- 定义网页作者 -->
    <meta name="google" content="index,follow" />
    <meta name="googlebot" content="index,follow" />
    <meta name="verify" content="index,follow" />
    + +

    移动设备

      +
    • viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。
      • +
    +
    1
    2
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <!--这是常用的移动meta设置-->
    + +
      +
    1. width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
      2. +
    2. height：高度（数值 / device-height）（范围从223 到10,000）
      3. +
    3. initial-scale：初始的缩放比例 （范围从>0 到10）
      4. +
    4. minimum-scale：允许用户缩放到的最小比例
      5. +
    5. maximum-scale：允许用户缩放到的最大比例
      6. +
    6. user-scalable：用户是否可以手动缩 (no,yes)
      7. +
    +

    注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

    +
      +
    • WebApp全屏模式：伪装app，离线应用。
      • +
    +
    1
    <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
    + +
      +
    • 主题颜色
      • +
    +
    1
    <meta name="theme-color" content="#11a8cd">
    + +

    +
      +
    • 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
      • +
    +
    1
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    + +
      +
    • 添加到主屏后的标题
      • +
    +
    1
    <meta name="apple-mobile-web-app-title" content="标题">
    + +
      +
    • 忽略数字自动识别为电话号码
      • +
    +
    1
    <meta content="telephone=no" name="format-detection" />
    + +
      +
    • 忽略识别邮箱
      • +
    +
    1
    <meta content="email=no" name="format-detection" />
    + +
      +
    • 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner(如下图)。参考文档
      • +
    +
    1
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    + +

    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    + + + +

    一个常用的移动端页面meta设置

    1
    2
    3
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0,maximum-scale=1.0,user-scalable=no">
    +
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/709a013c850b/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    \ No newline at end of file diff --git a/post/7f27b9d82419/index.html b/post/7f27b9d82419/index.html deleted file mode 100644 index 41b9687a..00000000 --- a/post/7f27b9d82419/index.html +++ /dev/null @@ -1,368 +0,0 @@ -谈谈Tomcat请求处理流程 | YT 前端日记 - - - - - - - - - - - - - -

    谈谈Tomcat请求处理流程

    发表于|更新于
    |字数总计:1.7k|阅读时长:6分钟|阅读量:|评论数:

    谈谈 Tomcat 请求处理流程

    《谈谈 Tomcat 架构及启动过程[含部署]》已重新修订!（与本文在 GitHub 同一目录下）包括架构和 Tomcat Start 过程中的 MapperListener 相关描述。Connector 启动相关的内容与请求处理关系比较紧密，所以就独立出来放在本文中了。

    -

    建议结合《谈谈 Tomcat 架构及启动过程[含部署]》一起看!

    -

    很多东西在时序图中体现的已经非常清楚了，没有必要再一步一步的作介绍，所以本文以图为主，然后对部分内容加以简单解释。

    - -

    本文对 Tomcat 的介绍以 Tomcat-9.0.0.M22 为标准。

    -

    Tomcat-9.0.0.M22 是 Tomcat 目前最新的版本，但尚未发布，它实现了 Servlet4.0 及 JSP2.3 并提供了很多新特性，需要 1.8 及以上的 JDK 支持等等，详情请查阅 Tomcat-9.0-doc

    - - - - - -
    -

    Overview

    -
      -
    1. Connector 启动以后会启动一组线程用于不同阶段的请求处理过程。
        -
      1. Acceptor 线程组。用于接受新连接，并将新连接封装一下，选择一个 Poller 将新连接添加到 Poller 的事件队列中。
        2. -
      2. Poller 线程组。用于监听 Socket 事件，当 Socket 可读或可写等等时，将 Socket 封装一下添加到 worker 线程池的任务队列中。
        3. -
      3. worker 线程组。用于对请求进行处理，包括分析请求报文并创建 Request 对象，调用容器的 pipeline 进行处理。
        4. -
      -
      2. -
    -
      -
    • Acceptor、Poller、worker 所在的 ThreadPoolExecutor 都维护在 NioEndpoint 中。
      • -
    -

    Connector Init and Start

    -
      -
    1. initServerSocket()，通过 ServerSocketChannel.open() 打开一个 ServerSocket，默认绑定到 8080 端口，默认的连接等待队列长度是 100， 当超过 100 个时会拒绝服务。我们可以通过配置 conf/server.xml 中 Connector 的 acceptCount 属性对其进行定制。
      2. -
    2. createExecutor() 用于创建 Worker 线程池。默认会启动 10 个 Worker 线程，Tomcat 处理请求过程中，Woker 最多不超过 200 个。我们可以通过配置 conf/server.xml 中 Connector 的 minSpareThreads 和 maxThreads 对这两个属性进行定制。
      3. -
    3. Pollor 用于检测已就绪的 Socket。 默认最多不超过 2 个，Math.min(2,Runtime.getRuntime().availableProcessors());。我们可以通过配置 pollerThreadCount 来定制。
      4. -
    4. Acceptor 用于接受新连接。默认是 1 个。我们可以通过配置 acceptorThreadCount 对其进行定制。
      5. -
    -

    Requtst Process

    Acceptor

    -
      -
    1. Acceptor 在启动后会阻塞在 ServerSocketChannel.accept(); 方法处，当有新连接到达时，该方法返回一个 SocketChannel。
      2. -
    2. 配置完 Socket 以后将 Socket 封装到 NioChannel 中，并注册到 Poller,值的一提的是，我们一开始就启动了多个 Poller 线程，注册的时候，连接是公平的分配到每个 Poller 的。NioEndpoint 维护了一个 Poller 数组，当一个连接分配给 pollers[index] 时，下一个连接就会分配给 pollers[(index+1)%pollers.length].
      3. -
    3. addEvent() 方法会将 Socket 添加到该 Poller 的 PollerEvent 队列中。到此 Acceptor 的任务就完成了。
      4. -
    -

    Poller

    -
      -
    1. selector.select(1000)。当 Poller 启动后因为 selector 中并没有已注册的 Channel，所以当执行到该方法时只能阻塞。所有的 Poller 共用一个 Selector，其实现类是 sun.nio.ch.EPollSelectorImpl
      2. -
    2. events() 方法会将通过 addEvent() 方法添加到事件队列中的 Socket 注册到 EPollSelectorImpl，当 Socket 可读时，Poller 才对其进行处理
      3. -
    3. createSocketProcessor() 方法将 Socket 封装到 SocketProcessor 中，SocketProcessor 实现了 Runnable 接口。worker 线程通过调用其 run() 方法来对 Socket 进行处理。
      4. -
    4. execute(SocketProcessor) 方法将 SocketProcessor 提交到线程池，放入线程池的 workQueue 中。workQueue 是 BlockingQueue 的实例。到此 Poller 的任务就完成了。
      5. -
    -

    Worker

    -
      -
    1. worker 线程被创建以后就执行 ThreadPoolExecutor 的 runWorker() 方法，试图从 workQueue 中取待处理任务，但是一开始 workQueue 是空的，所以 worker 线程会阻塞在 workQueue.take() 方法。
      2. -
    2. 当新任务添加到 workQueue后，workQueue.take() 方法会返回一个 Runnable，通常是 SocketProcessor,然后 worker 线程调用 SocketProcessor 的 run() 方法对 Socket 进行处理。
      3. -
    3. createProcessor() 会创建一个 Http11Processor, 它用来解析 Socket，将 Socket 中的内容封装到 Request 中。注意这个 Request 是临时使用的一个类，它的全类名是 org.apache.coyote.Request，
      4. -
    4. postParseRequest() 方法封装一下 Request，并处理一下映射关系(从 URL 映射到相应的 Host、Context、Wrapper)。
        -
      1. CoyoteAdapter 将 Rquest 提交给 Container 处理之前，并将 org.apache.coyote.Request 封装到 org.apache.catalina.connector.Request，传递给 Container 处理的 Request 是 org.apache.catalina.connector.Request。
        2. -
      2. connector.getService().getMapper().map()，用来在 Mapper 中查询 URL 的映射关系。映射关系会保留到 org.apache.catalina.connector.Request 中，Container 处理阶段 request.getHost() 是使用的就是这个阶段查询到的映射主机，以此类推 request.getContext()、request.getWrapper() 都是。
        3. -
      -
      5. -
    5. connector.getService().getContainer().getPipeline().getFirst().invoke() 会将请求传递到 Container 处理，当然了 Container 处理也是在 Worker 线程中执行的，但是这是一个相对独立的模块，所以单独分出来一节。
      6. -
    -

    Container

    -
      -
    1. 需要注意的是，基本上每一个容器的 StandardPipeline 上都会有多个已注册的 Valve，我们只关注每个容器的 Basic Valve。其他 Valve 都是在 Basic Valve 前执行。
      2. -
    2. request.getHost().getPipeline().getFirst().invoke() 先获取对应的 StandardHost，并执行其 pipeline。
      3. -
    3. request.getContext().getPipeline().getFirst().invoke() 先获取对应的 StandardContext,并执行其 pipeline。
      4. -
    4. request.getWrapper().getPipeline().getFirst().invoke() 先获取对应的 StandardWrapper，并执行其 pipeline。
      5. -
    5. 最值得说的就是 StandardWrapper 的 Basic Valve，StandardWrapperValve
        -
      1. allocate() 用来加载并初始化 Servlet，值的一提的是 Servlet 并不都是单例的，当 Servlet 实现了 SingleThreadModel 接口后，StandardWrapper 会维护一组 Servlet 实例，这是享元模式。当然了 SingleThreadModel 在 Servlet 2.4 以后就弃用了。
        2. -
      2. createFilterChain() 方法会从 StandardContext 中获取到所有的过滤器，然后将匹配 Request URL 的所有过滤器挑选出来添加到 filterChain 中。
        3. -
      3. doFilter() 执行过滤链,当所有的过滤器都执行完毕后调用 Servlet 的 service() 方法。
        4. -
      -
      6. -
    -

    At last

    博客在 CentOS 7 下编辑，这个平台的中文输入法没有搜狗用的爽，文中出现的错别字的概率可能会大一点，如果影响到了理解内容，请给我提 Issue，我会尽快修订～

    -

    博客持续更新，欢迎 Star & watch。

    -

    PS： 马上大四了，正在准备校招，如果各位大佬觉得博客写的还行的话，请砸面试机会给我。谢谢～

    - -

    另：非常感谢 DaoCloud 公司提供的面试机会！

    -

    Reference

      -
    1. 《How Tomcat works》
      2. -
    2. 《Tomcat 架构解析》– 刘光瑞
      3. -
    3. Tomcat-9.0-doc
      4. -
    4. apache-tomcat-9.0.0.M22-src
      5. -
    5. tomcat架构分析 (connector NIO 实现)
      6. -
    -
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/7f27b9d82419/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    JavaTomcat
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    \ No newline at end of file diff --git a/post/913d762db9ee/index.html b/post/913d762db9ee/index.html index 5f25cd4a..4b27ca2b 100644 --- a/post/913d762db9ee/index.html +++ b/post/913d762db9ee/index.html @@ -7,7 +7,7 @@ - + @@ -56,7 +56,7 @@ isHome: false, isHighlightShrink: false, isToc: true, - postUpdate: '2023-11-01 08:31:47' + postUpdate: '2023-11-03 06:20:13' }

    什么是 Proxy

    发表于|更新于|前端
    |字数总计:1.7k|阅读时长:6分钟|阅读量:|评论数:

    什么是 Proxy

    通常，当谈到JavaScript语言时，我们讨论的是ES6标准提供的新特性，本文也不例外。 我们将讨论JavaScript代理以及它们的作用，但在我们深入研究之前，我们先来看一下Proxy的定义是什么。

    + })(window)

    什么是 Proxy

    发表于|更新于|前端
    |字数总计:1.7k|阅读时长:6分钟|阅读量:|评论数:

    什么是 Proxy

    通常，当谈到JavaScript语言时，我们讨论的是ES6标准提供的新特性，本文也不例外。 我们将讨论JavaScript代理以及它们的作用，但在我们深入研究之前，我们先来看一下Proxy的定义是什么。

    MDN上的定义是：代理对象是用于定义基本操作的自定义行为（例如，属性查找，赋值，枚举，函数调用等）。

    换句话说，我们可以说代理对象是我们的目标对象的包装器，我们可以在其中操纵其属性并阻止对它的直接访问。 你可能会发现将它们应用到实际代码中很困难，我鼓励你仔细阅读这个概念，它可能会改变你的观点。

    术语

    handler

    @@ -192,7 +192,7 @@ 

    1
    delete api.get; //throw new Error('API methods cannot be deleted!');

    结论

    当您需要对数据进行更多控制时，代理可以派上用场。你可以根据受控规则扩展或拒绝对原始数据的访问，从而监视对象并确保正确行为。

    -

    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/913d762db9ee/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    JavaScript
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    25 条示例代码让你的代码更简洁

    发表于|更新于|前端
    |字数总计:1.8k|阅读时长:9分钟|阅读量:|评论数:

    25 条示例代码让你的代码更简洁

    JavaScript 无处不在，从 PC 端到移动设备端，甚至是后端，都在使用 JavaScript。

    + })(window)

    25 条示例代码让你的代码更简洁

    发表于|更新于|前端
    |字数总计:1.8k|阅读时长:9分钟|阅读量:|评论数:

    25 条示例代码让你的代码更简洁

    JavaScript 无处不在，从 PC 端到移动设备端，甚至是后端，都在使用 JavaScript。

    在本文中，我将尝试一些可用来使代码看起来更简洁的实践方案。

    1、使用默认参数代替短路或条件

    默认参数通常比短路更简洁。

    1
    2
    3
    4
    5
    6
    7
    function SomeMethod(paramThatCanBeUndefined) {
      const localValue = paramThatCanBeUndefined || "Default Value";
      console.log(localValue);
      // ...
    }
    SomeMethod(); // Default Value
    SomeMethod("SomeValue"); // SomeValue
    @@ -231,7 +231,7 @@

    25.函数参数校验

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // bad
    let findStudentByAge = (arr, age) => {
      if (!age) throw new Error("参数不能为空");
      return arr.filter((num) => num === age);
    };

    // good
    let checkoutType = () => {
      throw new Error("参数不能为空");
    };
    let findStudentByAge = (arr, age = checkoutType()) =>
      arr.filter((num) => num === age);

    欢迎大佬们指正交流，感谢支持

    -
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/92ec9a680643/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    JavaScript
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    使用Gitalk实现静态博客无后台评论系统

    发表于|更新于|技术
    |字数总计:834|阅读时长:3分钟|阅读量:|评论数:

    使用Gitalk实现静态博客无后台评论系统

    前言

    Gitalk，一个基于 Github Issue 和 Preact 开发的评论插件。

    + })(window)

    使用Gitalk实现静态博客无后台评论系统

    发表于|更新于|技术
    |字数总计:834|阅读时长:3分钟|阅读量:|评论数:
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    面试官：Vue3.0里为什么要用 Proxy API 替代 defineProperty API

    发表于|更新于
    |字数总计:1.5k|阅读时长:6分钟|阅读量:|评论数:

    面试官：Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？

    + })(window)

    面试官：Vue3.0里为什么要用 Proxy API 替代 defineProperty API

    发表于|更新于
    |字数总计:1.5k|阅读时长:6分钟|阅读量:|评论数:
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/95f7ade9b089/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    图片加载不出来，使用默认图片的三种方法

    发表于|更新于
    |字数总计:958|阅读时长:3分钟|阅读量:|评论数:

    vue 自定义指令，图片加载不出来，使用默认图片的三种方法

    一、常规解决方法

    我们都知道，img 标签支持 onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发 onerror 事件。可以使用一张提示错误的图片代替显示不了的图片。

    + })(window)

    图片加载不出来，使用默认图片的三种方法

    发表于|更新于
    |字数总计:958|阅读时长:3分钟|阅读量:|评论数:

    vue 自定义指令，图片加载不出来，使用默认图片的三种方法

    一、常规解决方法

    我们都知道，img 标签支持 onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发 onerror 事件。可以使用一张提示错误的图片代替显示不了的图片。

    1
    <img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">

    当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个 logoError.png 图片。也就是说图片存在则显示 logo.png，图片不存在将显示 logoError.png。
    但是，注意哦，这里有个大坑哦，如果 logoError.png 也不存在，则会继续触发 onerror，导致死循环，页面卡死。而且，就算图片存在，但网络很不通畅，也可能触发 onerror。
    当然，解决办法是有的：

    @@ -178,7 +178,7 @@ 

    1
    2
    3
    4
    5
    6
    directives: {
            "fontweight":
            	function (el, binding) {
                 	el.style.fontWeight = binding.value;
            	}
    }
    -

    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/a07779cfb79d/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    yaml语言教程

    发表于|更新于
    |字数总计:1.3k|阅读时长:5分钟|阅读量:|评论数:

    yaml语言教程

    简介

    YAML 是 “YAML Ain’t a Markup Language”（YAML 不是一种标记语言）的递归缩写。在开发的这种语言时，YAML 的意思其实是：”Yet Another Markup Language”（仍是一种标记语言）。

    + })(window)

    yaml语言教程

    发表于|更新于
    |字数总计:1.3k|阅读时长:5分钟|阅读量:|评论数:

    yaml语言教程

    简介

    YAML 是 “YAML Ain’t a Markup Language”（YAML 不是一种标记语言）的递归缩写。在开发的这种语言时，YAML 的意思其实是：”Yet Another Markup Language”（仍是一种标记语言）。

    YAML 的语法和其他高级语言类似，并且可以简单表达清单、散列表，标量等数据形态。它使用空白符号缩进和大量依赖外观的特色，特别适合用来表达或编辑数据结构、各种配置文件、倾印调试内容、文件大纲（例如：许多电子邮件标题格式和YAML非常接近）。

    YAML 的配置文件后缀为 .yml，如：runoob.yml 。

    @@ -293,7 +293,7 @@

    https://www.ruanyifeng.com/blog/2016/07/yaml.html

    -
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/a40879d345a9/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    Set、Map、WeakSet、WeakMap是什么

    发表于|更新于|前端
    |字数总计:2.2k|阅读时长:8分钟|阅读量:|评论数:

    Set、Map、WeakSet、WeakMap

    如果要用一句来描述，我们可以说
    Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构

    + })(window)

    Set、Map、WeakSet、WeakMap是什么

    发表于|更新于|前端
    |字数总计:2.2k|阅读时长:8分钟|阅读量:|评论数:

    Set、Map、WeakSet、WeakMap

    如果要用一句来描述，我们可以说
    Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构

    那什么是集合？什么又是字典呢？

    -
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/a9a087945710/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    什么是进程?什么的线程?

    发表于|更新于
    |字数总计:1.2k|阅读时长:3分钟|阅读量:|评论数:

    进程

    操作系统中最核心的概念就是进程，进程是对正在运行中的程序的一个抽象，是系统进行资源分配和调度的基本单位

    + })(window)

    什么是进程?什么的线程?

    发表于|更新于
    |字数总计:1.2k|阅读时长:3分钟|阅读量:|评论数:

    进程

    操作系统中最核心的概念就是进程，进程是对正在运行中的程序的一个抽象，是系统进行资源分配和调度的基本单位

    操作系统的其他所有内容都是围绕着进程展开的，负责执行这些任务的是 CPU

    进程是一种抽象的概念，从来没有统一的标准定义看，一般由程序、数据集合和进程控制块三部分组成：

      @@ -197,7 +197,7 @@

      区别

      进程间不会相互影响，一个线程挂掉将导致整个进程挂掉（一列火车不会影响到另外一列火车，但是如果一列火车上中间的一节车厢着火了，将影响到所有车厢）

    -
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/ae7d37d3307a/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    大厂JS必考手写题

    发表于|更新于|前端
    |字数总计:9.3k|阅读时长:44分钟|阅读量:|评论数:

    篇一

    🎄 前言

    + })(window)

    大厂JS必考手写题

    发表于|更新于|前端
    |字数总计:9.3k|阅读时长:44分钟|阅读量:|评论数:

    篇一

    🎄 前言

    本文主要总结了 2021 年前端提前批和秋招所考察的手写题，题目来源于牛客网前端面经区，统计时间自 3 月初至 10 月底，面经来源于阿里、腾讯、百度、字节、美团、京东、快手、拼多多等 15 家公司，并做了简单的频次划分。

    • ⭐⭐⭐⭐⭐: 在 15 家公司面试中出现 10+
      • @@ -457,7 +457,7 @@

      32.图片懒加载

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      let imgList = [...document.querySelectorAll("img")];
      let length = imgList.length;

      const imgLazyLoad = function () {
        let count = 0;
        return (function () {
          let deleteIndexList = [];
          imgList.forEach((img, index) => {
            let rect = img.getBoundingClientRect();
            if (rect.top < window.innerHeight) {
              img.src = img.dataset.src;
              deleteIndexList.push(index);
              count++;
              if (count === length) {
                document.removeEventListener("scroll", imgLazyLoad);
              }
            }
          });
          imgList = imgList.filter((img, index) => !deleteIndexList.includes(index));
        })();
      };

      // 这里最好加上防抖处理
      document.addEventListener("scroll", imgLazyLoad);

      有些重复的，可做参考 ⭐ 。

      -
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/b11c6f1c0c11/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    JavaScript面试
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    目录
    1. 1. 篇一
    2. 2. 🌟 promise
      1. 2.1. 实现 promise
      2. 2.2. 实现 promise.all
      3. 2.3. 实现 promise.finally
      4. 2.4. 实现 promise.allSettled
      5. 2.5. 实现 promise.race
      6. 2.6. 来说一下如何串行执行多个 Promise
      7. 2.7. promise.any
      8. 2.8. resolve
      9. 2.9. reject
    3. 3. 🐳 Array 篇
      1. 3.1. 数组去重
        1. 3.1.1. 使用双重 for 和 splice
        2. 3.1.2. 使用 indexOf 或 includes 加新数组
        3. 3.1.3. sort 排序后，使用快慢指针的思想
        4. 3.1.4. ES6 提供的 Set 去重
        5. 3.1.5. 使用哈希表存储元素是否出现(ES6 提供的 map)
        6. 3.1.6. filter 配合 indexOf
        7. 3.1.7. reduce 配合 includes
      2. 3.2. 数组扁平化
      3. 3.3. forEach
      4. 3.4. reduce
      5. 3.5. map
      6. 3.6. filter
      7. 3.7. every
      8. 3.8. some
      9. 3.9. find/findIndex
      10. 3.10. indexOf
      11. 3.11. 实现 sort
    4. 4. 🌊 防抖节流
      1. 4.1. 实现防抖函数 debounce
      2. 4.2. 实现节流函数 throttle
    5. 5. ⛲ Object 篇
      1. 5.1. 能不能写一个完整的深拷贝
      2. 5.2. 实现 new
      3. 5.3. 继承
        1. 5.3.1. 原型链继承
        2. 5.3.2. 借用构造函数(经典继承)
        3. 5.3.3. 组合继承
        4. 5.3.4. 原型式继承
        5. 5.3.5. 寄生式继承
        6. 5.3.6. 寄生组合式继承
        7. 5.3.7. Class 实现继承(补充一下)
      4. 5.4. 实现 object.create
    6. 6. 🚂 Function 篇
      1. 6.1. call
      2. 6.2. bind
      3. 6.3. apply
      4. 6.4. 实现柯里化
      5. 6.5. 实现链式调用
      6. 6.6. 偏函数
    7. 7. 🌍 ajax 与 jsonp
      1. 7.1. 实现 ajax
      2. 7.2. 实现 jsonp
    8. 8. 🛫 ES6 篇
      1. 8.1. 实现 set
      2. 8.2. 实现 map
      3. 8.3. 实现 es6 的 class
    9. 9. 🦉 其他
      1. 9.1. instanceof
      2. 9.2. 实现千分位分隔符
      3. 9.3. 把一个 JSON 对象的 key 从下划线形式（Pascal）转换到小驼峰形式（Camel）
      4. 9.4. 实现数据类型判断函数
      5. 9.5. 实现数组转树
      6. 9.6. 实现 sleep 函数
      7. 9.7. 实现发布订阅模式
    10. 10. 篇二
      1. 10.1. 1.call 的实现
      2. 10.2. 2.apply 的实现
      3. 10.3. 3.bind 的实现
      4. 10.4. 4.寄生式组合继承
      5. 10.5. 5.ES6 继承
      6. 10.6. 6.new 的实现
      7. 10.7. 7.instanceof 的实现
      8. 10.8. 8.Object.create()的实现
      9. 10.9. 9.实现 Object.assign
      10. 10.10. 10.Promise 的实现
        1. 10.10.1. Promise.resolve
        2. 10.10.2. Promise.reject
        3. 10.10.3. Promise.all
        4. 10.10.4. Promise.race
      11. 10.11. 11.Ajax 的实现
      12. 10.12. 12.实现防抖函数（debounce）
      13. 10.13. 13.实现节流函数（throttle）
      14. 10.14. 14.深拷贝（deepclone）
      15. 10.15. 15.数组扁平化的实现(flat)
      16. 10.16. 16.函数柯里化
      17. 10.17. 17.使用闭包实现每隔一秒打印 1,2,3,4
      18. 10.18. 18.手写一个 jsonp
      19. 10.19. 19.手写一个观察者模式
      20. 10.20. 20.EventEmitter 实现
      21. 10.21. 21.生成随机数的各种方法？
      22. 10.22. 22.如何实现数组的随机排序？
      23. 10.23. 23.写一个通用的事件侦听器函数。
      24. 10.24. 24.使用迭代的方式实现 flatten 函数。
      25. 10.25. 25.怎么实现一个 sleep
      26. 10.26. 26.实现正则切分千分位（10000 => 10,000）
      27. 10.27. 27.对象数组去重
      28. 10.28. 28.解析 URL Params 为对象
      29. 10.29. 29.模板引擎实现
      30. 10.30. 30.转化为驼峰命名
      31. 10.31. 31.查找字符串中出现最多的字符和个数
      32. 10.32. 32.图片懒加载
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    目录
    1. 1. 篇一
    2. 2. 🌟 promise
      1. 2.1. 实现 promise
      2. 2.2. 实现 promise.all
      3. 2.3. 实现 promise.finally
      4. 2.4. 实现 promise.allSettled
      5. 2.5. 实现 promise.race
      6. 2.6. 来说一下如何串行执行多个 Promise
      7. 2.7. promise.any
      8. 2.8. resolve
      9. 2.9. reject
    3. 3. 🐳 Array 篇
      1. 3.1. 数组去重
        1. 3.1.1. 使用双重 for 和 splice
        2. 3.1.2. 使用 indexOf 或 includes 加新数组
        3. 3.1.3. sort 排序后，使用快慢指针的思想
        4. 3.1.4. ES6 提供的 Set 去重
        5. 3.1.5. 使用哈希表存储元素是否出现(ES6 提供的 map)
        6. 3.1.6. filter 配合 indexOf
        7. 3.1.7. reduce 配合 includes
      2. 3.2. 数组扁平化
      3. 3.3. forEach
      4. 3.4. reduce
      5. 3.5. map
      6. 3.6. filter
      7. 3.7. every
      8. 3.8. some
      9. 3.9. find/findIndex
      10. 3.10. indexOf
      11. 3.11. 实现 sort
    4. 4. 🌊 防抖节流
      1. 4.1. 实现防抖函数 debounce
      2. 4.2. 实现节流函数 throttle
    5. 5. ⛲ Object 篇
      1. 5.1. 能不能写一个完整的深拷贝
      2. 5.2. 实现 new
      3. 5.3. 继承
        1. 5.3.1. 原型链继承
        2. 5.3.2. 借用构造函数(经典继承)
        3. 5.3.3. 组合继承
        4. 5.3.4. 原型式继承
        5. 5.3.5. 寄生式继承
        6. 5.3.6. 寄生组合式继承
        7. 5.3.7. Class 实现继承(补充一下)
      4. 5.4. 实现 object.create
    6. 6. 🚂 Function 篇
      1. 6.1. call
      2. 6.2. bind
      3. 6.3. apply
      4. 6.4. 实现柯里化
      5. 6.5. 实现链式调用
      6. 6.6. 偏函数
    7. 7. 🌍 ajax 与 jsonp
      1. 7.1. 实现 ajax
      2. 7.2. 实现 jsonp
    8. 8. 🛫 ES6 篇
      1. 8.1. 实现 set
      2. 8.2. 实现 map
      3. 8.3. 实现 es6 的 class
    9. 9. 🦉 其他
      1. 9.1. instanceof
      2. 9.2. 实现千分位分隔符
      3. 9.3. 把一个 JSON 对象的 key 从下划线形式（Pascal）转换到小驼峰形式（Camel）
      4. 9.4. 实现数据类型判断函数
      5. 9.5. 实现数组转树
      6. 9.6. 实现 sleep 函数
      7. 9.7. 实现发布订阅模式
    10. 10. 篇二
      1. 10.1. 1.call 的实现
      2. 10.2. 2.apply 的实现
      3. 10.3. 3.bind 的实现
      4. 10.4. 4.寄生式组合继承
      5. 10.5. 5.ES6 继承
      6. 10.6. 6.new 的实现
      7. 10.7. 7.instanceof 的实现
      8. 10.8. 8.Object.create()的实现
      9. 10.9. 9.实现 Object.assign
      10. 10.10. 10.Promise 的实现
        1. 10.10.1. Promise.resolve
        2. 10.10.2. Promise.reject
        3. 10.10.3. Promise.all
        4. 10.10.4. Promise.race
      11. 10.11. 11.Ajax 的实现
      12. 10.12. 12.实现防抖函数（debounce）
      13. 10.13. 13.实现节流函数（throttle）
      14. 10.14. 14.深拷贝（deepclone）
      15. 10.15. 15.数组扁平化的实现(flat)
      16. 10.16. 16.函数柯里化
      17. 10.17. 17.使用闭包实现每隔一秒打印 1,2,3,4
      18. 10.18. 18.手写一个 jsonp
      19. 10.19. 19.手写一个观察者模式
      20. 10.20. 20.EventEmitter 实现
      21. 10.21. 21.生成随机数的各种方法？
      22. 10.22. 22.如何实现数组的随机排序？
      23. 10.23. 23.写一个通用的事件侦听器函数。
      24. 10.24. 24.使用迭代的方式实现 flatten 函数。
      25. 10.25. 25.怎么实现一个 sleep
      26. 10.26. 26.实现正则切分千分位（10000 => 10,000）
      27. 10.27. 27.对象数组去重
      28. 10.28. 28.解析 URL Params 为对象
      29. 10.29. 29.模板引擎实现
      30. 10.30. 30.转化为驼峰命名
      31. 10.31. 31.查找字符串中出现最多的字符和个数
      32. 10.32. 32.图片懒加载
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    Java类加载机制

    发表于|更新于|Java
    |字数总计:1.8k|阅读时长:6分钟|阅读量:|评论数:

    谈谈 Java 类加载机制

    最近在学习 Tomcat 架构，其中很重要的一个模块是类加载器，因为以前学习的不够深入，所以趁这个机会好好把类加载机制搞明白。

    - - - - - -
    -

    Overview

    -

    类加载器主要分为两类，一类是 JDK 默认提供的，一类是用户自定义的。
    JDK 默认提供三种类加载器

    -
      -
    1. Bootstrap ClassLoader，启动类加载器，每次执行 java 命令时都会使用该加载器为虚拟机加载核心类。该加载器是由 native code 实现，而不是 Java 代码，加载类的路径为 <JAVA_HOME>/jre/lib。特别的 <JAVA_HOME>/jre/lib/rt.jar 中包含了 sun.misc.Launcher 类， 而 sun.misc.Launcher$ExtClassLoader 和 sun.misc.Launcher$AppClassLoader 都是 sun.misc.Launcher 的内部类，所以拓展类加载器和系统类加载器都是由启动类加载器加载的。
      2. -
    2. Extension ClassLoader, 拓展类加载器，用于加载拓展库中的类。拓展库路径为 <JAVA_HOME>/jre/lib/ext/。实现类为 sun.misc.Launcher$ExtClassLoader
      3. -
    3. System ClassLoader, 系统类加载器。用于加载 CLASSPATH 中的类。实现类为 sun.misc.Launcher$AppClassLoader
      4. -
    -

    用户自定义的类加载器

    -
      -
    1. Custom ClassLoader, 一般都是 java.lang.ClassLoder 的子类
      2. -
    -

    正统的类加载机制是基于双亲委派的，也就是当调用类加载器加载类时，首先将加载任务委派给双亲，若双亲无法加载成功时，自己才进行类加载。

    -

    在实例化一个新的类加载器时，我们可以为其指定一个 parent，即双亲，若未显式指定，则 System ClassLoader 就作为默认双亲。

    -

    具体的说，类加载任务是由 ClassLoader 的 loadClass() 方法来执行的，他会按照以下顺序加载类：

    -
      -
    1. 通过 findLoadedClass() 看该类是否已经被加载。该方法为 native code 实现，若已加载则返回。
      2. -
    2. 若未加载则委派给双亲，parent.loadClass()，若成功则返回
      3. -
    3. 若未成功，则调用 findClass() 方法加载类。java.lang.ClassLoader 中该方法只是简单的抛出一个 ClassNotFoundException 所以，自定义的 ClassLoader 都需要 Override findClass() 方法
      4. -
    -

    API for class loading

    java.lang.ClassLoader

      -
    • ClassLoader 是一个抽象类。
      • -
    • 待加载的类必须用 The Java™ Language Specification 定义的全类名，全类名的定义请查阅 The Form of a Binary。
      • -
    • 给定一个全类名，类加载器应该去定位该类所在的位置。通用的策略是将全类名转换为类文件路径，然后通过类文件路径在文件系统中定位。
      • -
    • 每一个加载到内存的类都由一个 Class 对象来表示，每一个 Class 对象都有一个指向加载该类的类加载器的引用。但是数组的 Class 对象是由 Java 运行时环境创建的，通过 Class.getClassLoader() 方法返回的是数组元素的类加载器，若数组元素是基本类型，则返回 null，若类是由 Bootstrap ClassLoader 加载的话也是返回 null 
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      public class Main {
          public static void main(String[] args) {
              // Object 类在 <java_home>/jre/lib/rt.jar 中，
              // 由 Bootstrap ClassLoader 加载，由于该类加载器是由 native code 编写
              // 所以输出为 null
              Object[] objects = new Object[5];
              System.out.println();
              System.out.println(objects.getClass().getClassLoader());

              // ZipFileAttributes 类在 <java_home>/jre/lib/ext/zipfs.jar 中，
              // 由 Extension ClassLoader 加载，
              // 输出为  sun.misc.Launcher$ExtClassLoader@4b67cf4d
              ZipFileAttributes[] attributes = new ZipFileAttributes[5];
              System.out.println();
              System.out.println(attributes.getClass().getClassLoader());

              // Main 类是自定义的类，
              // 默认由 System ClassLoader 加载，
              // 输出为 sun.misc.Launcher$AppClassLoader@18b4aac2
              Main[] array = new Main[5];
              array[0] = new Main();
              System.out.println();
              System.out.println(array.getClass().getClassLoader());
          }
      }
      • -
    • ClassLoader 默认支持并行加载，但是其子类必须调用 ClassLoader.registerAsParallelCapable() 来启用并行加载
      • -
    • 一般来说,JVM 从本地文件系统加载类的行为是与平台有关的。
      • -
    • defineClass() 方法可以将字节流转换成一个 Class 对象。然后调用 Class.newInstance() 来创建类的实例
      • -
    -

    java.security.SecureClassLoader

    增加了一层权限验证，因为关注点不在安全，所以暂不讨论。

    -

    java.net.URLClassLoader

    该类加载器用来加载 URL 指定的 JAR 文件或目录中的类和资源，以 / 结尾的 URL 认为是目录，否则认为是 JAR 文件。

    -
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    // 尝试通过 URLClassLoader 来加载桌面下的 Test 类。
    public class Main {
        public static void main(String[] args) {
            try {
                URL[] urls = new URL[1];
                URLStreamHandler streamHandler = null;
                File classPath = new File("/home/chen/Desktop/");
                String repository = (new URL("file", null,
                        classPath.getCanonicalPath() + File.separator))
                        .toString();
                urls[0] = new URL(null, repository, streamHandler);

                ClassLoader loader = new URLClassLoader(urls);

                Class testClass = loader.loadClass("Test");

                // output:  java.net.URLClassLoader@7f31245a
                System.out.println(testClass.getClassLoader());
            } catch (MalformedURLException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            } catch (ClassNotFoundException e) {
                e.printStackTrace();
            }
        }
    }
    - -

    Tomcat 8.5.15 class loading Mechanism

    -

    Tomcat 使用正统的类加载机制(双亲委派),但部分地方做了改动。

    -
      -

    • Bootstrap classLoader 和 Extension classLoader 的作用不变

      -
      • -

    • System classLoader 正常情况下加载的是 CLASSPATH 下的类，但是 Tomcat 的启动脚本并未使用该变量，而是从以下仓库下加载类：

      -
        -
      1. $CATALINA_HOME/bin/bootstrap.jar 包含了 Tomcat 的启动类。在该启动类中创建了 Common classLoader、Catalina classLoader、shared classLoader。因为 $CATALINA_BASE/conf/catalina.properties 中只对 common.loader 属性做了定义，server.loader 和 shared.loader 属性为空，所以默认情况下，这三个 classLoader 都是 CommonLoader。具体的代码逻辑可以查阅 org.apache.catalina.startup.Bootstrap 类的 initClassLoaders() 方法和 createClassLoader() 方法。
        2. -
      2. $CATALINA_BASE/bin/tomcat-juli.jar 包含了 Tomcat 日志模块所需要的实现类
        3. -
      3. $CATALINA_HOME/bin/commons-daemon.jar
        4. -
      -
      • -

    • Common classLoader 是位于 Tomcat 应用服务器顶层的公用类加载器。由其加载的类可以由 Tomcat 自身类和所有应用程序使用。扫描路径由 $CATALINA_BASE/conf/catalina.properties 文件中的 common.loader 属性定义。默认是 $CATALINA_HOME/lib.

      -
      • -

    • catalina classLoader 用于加载服务器内部可见类，这些类应用程序不能访问。

      -
      • -

    • shared classLoader 用于加载应用程序共享类，这些类服务器不会依赖。

      -
      • -

    • Webapp classLoader 。每个应用程序都会有一个独一无二的 webapp classloader，他用来加载本应用程序 /WEB-INF/classes 和 /WEB-INF/lib 下的类。

      -
      • -
    -

    特别的：

    -

    Webapp classLoader 的默认行为会与正常的双亲委派模式不同：

    -
      -
    1. 从 Bootstrap classloader 加载
      2. -
    2. 若没有，从 /WEB-INF/classes 加载
      3. -
    3. 若没有，从 /WEB-INF/lib/*.jar 加载
      4. -
    4. 若没有，则依次从 System、Common、shared 加载（该步骤使用双亲委派）
      5. -
    -

    当然了，我们也可以通过配置来使 Webapp classLoader 严格按照双亲委派模式加载类：

    -
      -
    1. 通过在工程的 META-INF/context.xml（和 WEB-INF/classes 在同一目录下） 配置文件中添加 <Loader delegate="true"/>
      2. -
    2. 因为 Webapp classLoader 的实现类是 org.apache.catalina.loader.WebappLoader，他有一个属性叫 delegate， 用来控制类加载器的加载行为，默认为 false，我们可以使用 set 方法，将其设为 true 来启用严格双亲委派加载模式。
      3. -
    -

    严格双亲委派模式加载步骤：

    -
      -
    1. 从 Bootstrap classloader 加载
      2. -
    2. 若没有，则依次从 System、Common、shared 加载
      3. -
    3. 若没有，从 /WEB-INF/classes 加载
      4. -
    4. 若没有，从 /WEB-INF/lib/*.jar 加载
      5. -
    -

    Reference

      -
    1. The Java Class Loading Mechanism
      2. -
    2. Java Classloader
      3. -
    3. Class Loader HOW-TO - Apache Tomcat 8
      4. -
    4. 《Tomcat 架构解析》
      5. -
    5. 《深入理解 Java 虚拟机》
      6. -
    -
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/b220394d8ab3/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    Java
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    \ No newline at end of file diff --git a/post/b76cc576c624/index.html b/post/b76cc576c624/index.html index 6dcf3e31..45021b8e 100644 --- a/post/b76cc576c624/index.html +++ b/post/b76cc576c624/index.html @@ -7,7 +7,7 @@ - + @@ -56,7 +56,7 @@ isHome: false, isHighlightShrink: false, isToc: true, - postUpdate: '2023-11-01 08:31:47' + postUpdate: '2023-11-03 06:20:13' }

    Spring-SpringMVC-Mybatis整合

    发表于|更新于|Java
    |字数总计:4.8k|阅读时长:24分钟|阅读量:|评论数:

    Maven + Spring + SpringMVC + Mybatis 整合

    通过这篇文章你可以获取的内容：

    + })(window)

    Spring-SpringMVC-Mybatis整合

    发表于|更新于|Java
    |字数总计:4.8k|阅读时长:24分钟|阅读量:|评论数:

    Maven + Spring + SpringMVC + Mybatis 整合

    通过这篇文章你可以获取的内容：

    1. 整个配置流程。
    2. 对于每一个配置项，Spring 到底帮我们做了什么？
      3. @@ -337,7 +337,7 @@

      参考mybatis
    3. mybatis-spring

    -
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/b76cc576c624/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    Java
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    ES6面试理论知识点汇总

    发表于|更新于|前端
    |字数总计:5.3k|阅读时长:18分钟|阅读量:|评论数:

    一、问：ES6 是什么，为什么要学习它，不学习 ES6 会怎么样?

    答：ES6 是新一代的 JS 语言标准，对分 JS 语言核心内容做了升级优化，规范了 JS 使用标准，新增了 JS 原生方法，使得 JS 使用更加规范，更加优雅，更适合大型应用的开发。学习 ES6 是成为专业前端正规军的必经之路。不学习 ES6 也可以写代码打鬼子，但是最多只能当个游击队长。

    + })(window)

    ES6面试理论知识点汇总

    发表于|更新于|前端
    |字数总计:5.3k|阅读时长:18分钟|阅读量:|评论数:

    一、问：ES6 是什么，为什么要学习它，不学习 ES6 会怎么样?

    答：ES6 是新一代的 JS 语言标准，对分 JS 语言核心内容做了升级优化，规范了 JS 使用标准，新增了 JS 原生方法，使得 JS 使用更加规范，更加优雅，更适合大型应用的开发。学习 ES6 是成为专业前端正规军的必经之路。不学习 ES6 也可以写代码打鬼子，但是最多只能当个游击队长。

    二、问：ES5、ES6 和 ES2015 有什么区别?

    答：ES2015 特指在 2015 年发布的新一代 JS 语言标准，ES6 泛指下一代 JS 语言标准，包含 ES2015、ES2016、ES2017、ES2018 等。现阶段在绝大部分场景下，ES2015 默认等同 ES6。ES5 泛指上一代语言标准。ES2015 可以理解为 ES5 和 ES6 的时间分界线。

    三、问：babel 是什么，有什么作用?

    答：babel 是一个 ES6 转码器，可以将 ES6 代码转为 ES5 代码，以便兼容那些还没支持 ES6 的平台。

    四、问：let 有什么用，有了 var 为什么还要用 let？

    答：在 ES6 之前，声明变量只能用 var，var 方式声明变量其实是很不合理的，准确的说，是因为 ES5 里面没有块级作用域是很不合理的，甚至可以说是一个语言层面的 bug(这也是很多 c++、java 开发人员看不懂，也瞧不起 JS 语言的劣势之一)。没有块级作用域会带来很多难以理解的问题，比如 for 循环 var 变量泄露，变量覆盖等问题。let 声明的变量拥有自己的块级作用域，且修复了 var 声明变量带来的变量提升问题。

    @@ -248,7 +248,7 @@

    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/b7a64886691a/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！

    JavaScript面试ES6
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    目录
    1. 1. 一、问：ES6 是什么，为什么要学习它，不学习 ES6 会怎么样?
    2. 2. 二、问：ES5、ES6 和 ES2015 有什么区别?
    3. 3. 三、问：babel 是什么，有什么作用?
    4. 4. 四、问：let 有什么用，有了 var 为什么还要用 let？
    5. 5. 五、问：举一些 ES6 对 String 字符串类型做的常用升级优化?
      1. 5.1. 1、优化部分：
      2. 5.2. 2、升级部分:
    6. 6. 六、问：举一些 ES6 对 Array 数组类型做的常用升级优化?
      1. 6.1. 1、优化部分：
      2. 6.2. 2、升级部分:
    7. 7. 七、问：举一些 ES6 对 Number 数字类型做的常用升级优化?
      1. 7.1. 1、优化部分：
      2. 7.2. 2、升级部分:
    8. 8. 八、问：举一些 ES6 对 Object 类型做的常用升级优化?(重要)
      1. 8.1. 1、优化部分：
      2. 8.2. 2、升级部分:
    9. 9. 九、问：举一些 ES6 对 Function 函数类型做的常用升级优化?(重要)
      1. 9.1. 1、优化部分：
      2. 9.2. 2、升级部分:
    10. 10. 十、问：Symbol 是什么，有什么作用？
    11. 11. 十一、问：Set 是什么，有什么作用？
    12. 12. 十二、问：Map 是什么，有什么作用？
    13. 13. 十三、问：Proxy 是什么，有什么作用？
    14. 14. 十四、问：Reflect 是什么，有什么作用？
    15. 15. 十五、问：Promise 是什么，有什么作用？
    16. 16. 十六、问：Iterator 是什么，有什么作用？(重要)
    17. 17. 十七、问：for…in 和 for…of 有什么区别？
    18. 18. 十八、Generator 函数是什么，有什么作用？
    19. 19. 十九、async 函数是什么，有什么作用？
    20. 20. 二十、Class、extends 是什么，有什么作用？
    21. 21. 二十一、module、export、import 是什么，有什么作用？
    22. 22. 二十二、日常前端代码开发中，有哪些值得用 ES6 去改进的编程优化或者规范？
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    目录
    1. 1. 一、问：ES6 是什么，为什么要学习它，不学习 ES6 会怎么样?
    2. 2. 二、问：ES5、ES6 和 ES2015 有什么区别?
    3. 3. 三、问：babel 是什么，有什么作用?
    4. 4. 四、问：let 有什么用，有了 var 为什么还要用 let？
    5. 5. 五、问：举一些 ES6 对 String 字符串类型做的常用升级优化?
      1. 5.1. 1、优化部分：
      2. 5.2. 2、升级部分:
    6. 6. 六、问：举一些 ES6 对 Array 数组类型做的常用升级优化?
      1. 6.1. 1、优化部分：
      2. 6.2. 2、升级部分:
    7. 7. 七、问：举一些 ES6 对 Number 数字类型做的常用升级优化?
      1. 7.1. 1、优化部分：
      2. 7.2. 2、升级部分:
    8. 8. 八、问：举一些 ES6 对 Object 类型做的常用升级优化?(重要)
      1. 8.1. 1、优化部分：
      2. 8.2. 2、升级部分:
    9. 9. 九、问：举一些 ES6 对 Function 函数类型做的常用升级优化?(重要)
      1. 9.1. 1、优化部分：
      2. 9.2. 2、升级部分:
    10. 10. 十、问：Symbol 是什么，有什么作用？
    11. 11. 十一、问：Set 是什么，有什么作用？
    12. 12. 十二、问：Map 是什么，有什么作用？
    13. 13. 十三、问：Proxy 是什么，有什么作用？
    14. 14. 十四、问：Reflect 是什么，有什么作用？
    15. 15. 十五、问：Promise 是什么，有什么作用？
    16. 16. 十六、问：Iterator 是什么，有什么作用？(重要)
    17. 17. 十七、问：for…in 和 for…of 有什么区别？
    18. 18. 十八、Generator 函数是什么，有什么作用？
    19. 19. 十九、async 函数是什么，有什么作用？
    20. 20. 二十、Class、extends 是什么，有什么作用？
    21. 21. 二十一、module、export、import 是什么，有什么作用？
    22. 22. 二十二、日常前端代码开发中，有哪些值得用 ES6 去改进的编程优化或者规范？
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    修改对象数组的属性（key）名

    发表于|更新于|前端
    |字数总计:1.2k|阅读时长:5分钟|阅读量:|评论数:

    修改数组对象的属性（key）名

    方法一

    + })(window)

    修改对象数组的属性（key）名

    发表于|更新于|前端
    |字数总计:1.2k|阅读时长:5分钟|阅读量:|评论数:

    修改数组对象的属性（key）名

    方法一

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var array = [
      { id: 1, name: "小明" },
      { id: 2, name: "小红" },
    ];
    /**/
    //旧key到新key的映射
    var keyMap = { id: "value", name: "label" };

    for (var i = 0; i < array.length; i++) {
      var obj = array[i];
      for (var key in obj) {
        var newKey = keyMap[key];
        if (newKey) {
          obj[newKey] = obj[key];
          delete obj[key];
        }
      }
    }
    console.log(array);

    方法二

    @@ -183,7 +183,7 @@ 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    render: (h) => {
      return h("div", {
        //给div绑定value属性
        props: {
          value: "",
        }, //给div绑定样式
        style: {
          width: "30px",
        }, //给div绑定点击事件
        on: {
          click: () => {
            console.log("点击事件");
          },
        },
      });
    };
    -

    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/b9a25a07667b/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    JavaScript
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    60个JS实用的代码小技巧

    发表于|更新于|前端
    |字数总计:7.7k|阅读时长:29分钟|阅读量:|评论数:

    JavaScript 有很多很酷的特性，大多数初学者和中级开发人员都不知道。今天分享一些，我经常在项目中使用一些技巧。

    + })(window)

    60个JS实用的代码小技巧

    发表于|更新于|前端
    |字数总计:7.7k|阅读时长:29分钟|阅读量:|评论数:

    JavaScript 有很多很酷的特性，大多数初学者和中级开发人员都不知道。今天分享一些，我经常在项目中使用一些技巧。

    1. JS 为什么单线程

    一个简单的原因就是，js在设计之初只是进行一些简单的表单校验，这完全不需要多线程，单线程完全可以胜任这项工作。即便后来前端发展迅速，承载的能力越来越多，也没有发展到非多线程不可的程度。

    而且还有一个主要的原因，设想一下，如果js是多线程的，在运行时多个线程同时对DOM元素进行操作，那具体以哪个线程为主就是个问题了，线程的调度问题是一个比较复杂的问题。

    HTML5新的标准中允许使用new Worker的方式来开启一个新的线程，去运行一段单独的js文件脚本，但是在这个新线程中严格的要求了可以使用的功能，比如说他只能使用ECMAScript, 不能访问DOM和BOM。这也就限制死了多个线程同时操作DOM元素的可能。

    @@ -435,7 +435,7 @@

    60.从数组中获取最小值/最大值

    1
    2
    3
    4
    const numbers = [6, 8, 1, 3, 9];

    console.log(Math.max(...numbers)); // 9
    console.log(Math.min(...numbers)); // 1

    ::: tip 提示
    有部分重复内容，欢迎指正！:stuck_out_tongue_winking_eye:
    :::

    -
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/c127f8d6d358/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    JavaScript
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    目录
    1. 1. 1. JS 为什么单线程
    2. 2. 2.使用 css 写出一个三角形角标
    3. 3. 3.水平垂直居中
    4. 4. 4. css 一行文本超出…
    5. 5. 5.多行文本超出显示…
    6. 6. 6.IOS 手机容器滚动条滑动不流畅
    7. 7. 7.修改滚动条样式
    8. 8. 8.解决 ios audio 无法自动播放、循环播放的问题
    9. 9. 9.隐藏页面元素
    10. 10. 10.前端工程化
    11. 11. 11.contenteditable
    12. 12. 12.calc
    13. 13. 13.Date 对象
    14. 14. 14.Proxy 和 Object.defineProperty 区别
    15. 15. 15.Reflect
    16. 16. 16.解析 get 参数
    17. 17. 17.解析连接 url
    18. 18. 18.localStorage
    19. 19. 19.sessionStorage
    20. 20. 20.会话 cookie
    21. 21. 21.标签模板字符串
    22. 22. 22.字符串常用的几个方法
      1. 22.1. 1. includes();
      2. 22.2. 2. startsWith();
      3. 22.3. 3. endsWith();
      4. 22.4. 4. repeat(number);
      5. 22.5. 5. ‘abc’.padEnd(5, ‘1’); // abc11;
      6. 22.6. 6. ‘abc’.padStart(5, ‘1’); // 11abc;
    23. 23. 23.数组快速去重
    24. 24. 24.Object.keys, values, entries
    25. 25. 25.Object.getOwnPropertyDescriptors
    26. 26. 26.BigInt
    27. 27. 27.??合并空运算符
    28. 28. 28.?可选链运算符
    29. 29. 29.import
    30. 30. 30. 0.1 + 0.2 === 0.3 // false
    31. 31. 31. 有条件地向对象添加属性
    32. 32. 32.检查属性是否存在对象中
    33. 33. 33.对象中的动态属性名称
    34. 34. 34. 使用动态键进行对象解构
    35. 35. 35. 空值合并 ?? 操作符
    36. 36. 36.可选链 ?.
    37. 37. 37. 使用 !! 操作符
    38. 38. 38. 字符串和整数转换
    39. 39. 39. 检查数组中的假值
    40. 40. 40. 扁平化数组
    41. 41. 41.Object.entries
    42. 42. 42.replaceAll 方法
    43. 43. 43.数字分隔符
    44. 44. 44.document.designMode
    45. 45. 45.逻辑赋值运算符
    46. 46. 46.同步阻塞法实现 sleep 函数
    47. 47. 47.利用 new URL 解析 URL
    48. 48. 48.一行代码实现星级评分
    49. 49. 49.用位运算提升效率
    50. 50. 50.判断是否是千分符字符
    51. 51. 51.复制文本到剪切板
    52. 52. 52.一行代码生成指定长度的数组
    53. 53. 53.判断数据类型
    54. 54. 54.正则判断字符重复次数不超过两次
    55. 55. 55.正则匹配可以只有 0 但开头不能是 0 的数字
    56. 56. 56.使用 history.back() 可以创建一个浏览器“返回”按钮。
    57. 57. 57.事件监听器只运行一次
    58. 58. 58.从数组中过滤所有虚值
    59. 59. 59.妙用 reduce 对数组求和
    60. 60. 60.从数组中获取最小值/最大值
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    目录
    1. 1. 1. JS 为什么单线程
    2. 2. 2.使用 css 写出一个三角形角标
    3. 3. 3.水平垂直居中
    4. 4. 4. css 一行文本超出…
    5. 5. 5.多行文本超出显示…
    6. 6. 6.IOS 手机容器滚动条滑动不流畅
    7. 7. 7.修改滚动条样式
    8. 8. 8.解决 ios audio 无法自动播放、循环播放的问题
    9. 9. 9.隐藏页面元素
    10. 10. 10.前端工程化
    11. 11. 11.contenteditable
    12. 12. 12.calc
    13. 13. 13.Date 对象
    14. 14. 14.Proxy 和 Object.defineProperty 区别
    15. 15. 15.Reflect
    16. 16. 16.解析 get 参数
    17. 17. 17.解析连接 url
    18. 18. 18.localStorage
    19. 19. 19.sessionStorage
    20. 20. 20.会话 cookie
    21. 21. 21.标签模板字符串
    22. 22. 22.字符串常用的几个方法
      1. 22.1. 1. includes();
      2. 22.2. 2. startsWith();
      3. 22.3. 3. endsWith();
      4. 22.4. 4. repeat(number);
      5. 22.5. 5. ‘abc’.padEnd(5, ‘1’); // abc11;
      6. 22.6. 6. ‘abc’.padStart(5, ‘1’); // 11abc;
    23. 23. 23.数组快速去重
    24. 24. 24.Object.keys, values, entries
    25. 25. 25.Object.getOwnPropertyDescriptors
    26. 26. 26.BigInt
    27. 27. 27.??合并空运算符
    28. 28. 28.?可选链运算符
    29. 29. 29.import
    30. 30. 30. 0.1 + 0.2 === 0.3 // false
    31. 31. 31. 有条件地向对象添加属性
    32. 32. 32.检查属性是否存在对象中
    33. 33. 33.对象中的动态属性名称
    34. 34. 34. 使用动态键进行对象解构
    35. 35. 35. 空值合并 ?? 操作符
    36. 36. 36.可选链 ?.
    37. 37. 37. 使用 !! 操作符
    38. 38. 38. 字符串和整数转换
    39. 39. 39. 检查数组中的假值
    40. 40. 40. 扁平化数组
    41. 41. 41.Object.entries
    42. 42. 42.replaceAll 方法
    43. 43. 43.数字分隔符
    44. 44. 44.document.designMode
    45. 45. 45.逻辑赋值运算符
    46. 46. 46.同步阻塞法实现 sleep 函数
    47. 47. 47.利用 new URL 解析 URL
    48. 48. 48.一行代码实现星级评分
    49. 49. 49.用位运算提升效率
    50. 50. 50.判断是否是千分符字符
    51. 51. 51.复制文本到剪切板
    52. 52. 52.一行代码生成指定长度的数组
    53. 53. 53.判断数据类型
    54. 54. 54.正则判断字符重复次数不超过两次
    55. 55. 55.正则匹配可以只有 0 但开头不能是 0 的数字
    56. 56. 56.使用 history.back() 可以创建一个浏览器“返回”按钮。
    57. 57. 57.事件监听器只运行一次
    58. 58. 58.从数组中过滤所有虚值
    59. 59. 59.妙用 reduce 对数组求和
    60. 60. 60.从数组中获取最小值/最大值
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    JavaScript面向对象编程

    发表于|更新于|前端
    |字数总计:19.4k|阅读时长:70分钟|阅读量:|评论数:

    面向对象编程

    一、实例对象与new命令

    1、对象是什么

    面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式。它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。

    +

    每一个对象都是功能中心，具有明确分工，可以完成接受信息、处理数据、发出信息等任务。对象可以复用，通过继承机制还可以定制。因此，面向对象编程具有灵活、代码可复用、高度模块化等特点，容易维护和开发，比起由一系列函数或指令组成的传统的过程式编程（procedural programming），更适合多人合作的大型软件项目。

    +

    那么，“对象”（object）到底是什么？我们从两个层次来理解。

    +

    （1）对象是单个实物的抽象。

    +

    一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。

    +

    （2）对象是一个容器，封装了属性（property）和方法（method）。

    +

    属性是对象的状态，方法是对象的行为（完成某种任务）。比如，我们可以把动物抽象为animal对象，使用“属性”记录具体是那一种动物，使用“方法”表示动物的某种行为（奔跑、捕猎、休息等等）。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var person = { // 对象
        name: '张三', // 属性
        interest: function(){ // 方法(行为)
            return this.name + '正在喝酒'
        }
    }
    person.interest() // 张三正在喝酒

    // 真实世界： 有一个人，名字叫张三，他正在喝酒。
    // 对象模拟： 一个人抽象为一个对象person，对象是一个容器，内部封装了属性name叫张三，他正在喝酒封装成方法interest

    + +

    2、构造函数

    面向对象编程的第一步，就是要生成对象。前面说过，对象是单个实物的抽象。通常需要一个模板，表示某一类实物的共同特征，然后对象根据这个模板生成。

    +

    典型的面向对象编程语言（比如 C++ 和 Java），都有“类”（class）这个概念。所谓“类”就是对象的模板，对象就是“类”的实例。但是，JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。

    +

    JavaScript 语言使用构造函数（constructor）作为对象的模板。

    +

    所谓”构造函数”，就是专门用来生成实例对象的函数。

    +

    它就是对象的模板，描述实例对象的基本结构。

    +

    一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。

    +

    构造函数就是一个普通的函数，但是有自己的特征和用法。

    +
    1
    2
    3
    var Vehicle = function () {
      this.price = 1000;
    };
    + +

    上面代码中，Vehicle就是构造函数。为了与普通函数区别，构造函数名字的第一个字母通常大写。

    +

    构造函数的特点有两个。

    +
      +
    • 函数体内部使用了this关键字，代表了所要生成的对象实例。
      • +
    • 生成对象的时候，必须使用new命令。
      • +
    +

    下面先介绍new命令。

    +

    3、new命令

    基本用法

    new命令的作用：执行构造函数，返回一个实例对象。

    +
    1
    2
    3
    4
    5
    6
    var Vehicle = function () {
      this.price = 1000; // this指向实例对象v
    };

    var v = new Vehicle();  // new 执行一个构造函数，返回一个实例对象给v
    v.price // 1000
    + +

    上面代码通过new命令，让构造函数Vehicle生成一个实例对象，保存在变量v中。这个新生成的实例对象，从构造函数Vehicle得到了price属性。new命令执行时，构造函数内部的this，就代表了新生成的实例对象，this.price表示实例对象有一个price属性，值是1000。

    +

    使用new命令时，根据需要，构造函数也可以接受参数。

    +
    1
    2
    3
    4
    5
    var Vehicle = function (p) {
      this.price = p;
    };

    var v = new Vehicle(500); // new 命令时，构造函数可以接受参数
    + +

    new命令本身就可以执行构造函数，所以后面的构造函数可以带括号，也可以不带括号。下面两行代码是等价的，但是为了表示这里是函数调用，推荐使用括号。

    +
    1
    2
    3
    4
    // 推荐的写法
    var v = new Vehicle();
    // 不推荐的写法
    var v = new Vehicle;
    + +

    一个很自然的问题是，如果忘了使用new命令，直接调用构造函数会发生什么事？

    +

    这种情况下，构造函数就变成了普通函数，并不会生成实例对象。而且由于后面会说到的原因，this这时代表全局对象，将造成一些意想不到的结果。

    +
    1
    2
    3
    4
    5
    6
    7
    var Vehicle = function (){
      this.price = 1000;
    };

    var v = Vehicle(); // 忘记使用new命令，构造函数变成普通函数，不会生成实例，函数内部this指向window
    v // undefined   函数为普通函数且没有返回值，所有v为undefined
    price // 1000  函数内部this指向window， price变成全局属性，等价于window.price
    + +

    上面代码中，调用Vehicle构造函数时，忘了加上new命令。结果，变量v变成了undefined，而price属性变成了全局变量。因此，应该非常小心，避免不使用new命令、直接调用构造函数。

    +

    为了保证构造函数必须与new命令一起使用，一个解决办法是，构造函数内部使用严格模式，即第一行加上use strict。这样的话，一旦忘了使用new命令，直接调用构造函数就会报错。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    function Fubar(foo, bar){
      'use strict';
      this._foo = foo; // 严格模式中this不能指向window对象，不加new调用this等于undefined，给undefined添加属性会报错
      this._bar = bar;
    }

    Fubar()
    // TypeError: Cannot set property '_foo' of undefined
    + +

    上面代码的Fubar为构造函数，use strict命令保证了该函数在严格模式下运行。由于严格模式中，函数内部的this不能指向全局对象，默认等于undefined，导致不加new调用会报错（JavaScript 不允许对undefined添加属性）。

    +

    另一个解决办法，构造函数内部判断是否使用new命令，如果发现没有使用，则直接返回一个实例对象。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function Fubar(foo, bar) {
      // instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链（），返回布尔值。
      // 语法： <实例对象> instanceof <构造函数>
      if (!(this instanceof Fubar)) {  // 或 使用 (!new.target) 判断是否使用new命令
        return new Fubar(foo, bar);
      }

      this._foo = foo;
      this._bar = bar;
    }

    Fubar(1, 2)._foo // 1
    (new Fubar(1, 2))._foo // 1
    + +

    上面代码中的构造函数，不管加不加new命令，都会得到同样的结果。

    +

    new 命令的原理

    使用new命令时，它后面的函数依次执行下面的步骤。

    +
      +

    1. 创建一个空对象，作为将要返回的实例对象。

      +
      2. +

    2. 将这个空对象的原型，指向构造函数的prototype属性。

      +
      3. +

    3. 将这个空对象赋值给函数内部的this关键字。

      +
      4. +

    4. 开始执行构造函数内部的代码。（代码中this指向空对象（实例对象））

      +
      5. +

    5. 返回实例对象（或自定义对象）

      +
      6. +
    +

    也就是说，构造函数内部，this指的是一个新生成的空对象，所有针对this的操作，都会发生在这个空对象上。构造函数之所以叫“构造函数”，就是说这个函数的目的，就是操作一个空对象（即this对象），将其“构造”为需要的样子。

    +

    如果构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var Vehicle = function () {
      this.price = 1000;
      return 1000; // 1000 非对象，被忽略，返回的是this对象；如果是return {}，则会返回{}

    };

    (new Vehicle()) === 1000
    // false
    + +

    上面代码中，构造函数Vehicle的return语句返回一个数值。这时，new命令就会忽略这个return语句，返回“构造”后的this对象。

    +

    但是，如果return语句返回的是一个跟this无关的新对象，new命令会返回这个新对象，而不是this对象。这一点需要特别引起注意。

    +
    1
    2
    3
    4
    5
    6
    7
    var Vehicle = function (){
      this.price = 1000;
      return { price: 2000 }; // return的是一个对象，会被返回出去。
    };

    (new Vehicle()).price
    // 2000
    + +

    上面代码中，构造函数Vehicle的return语句，返回的是一个新对象。new命令会返回这个对象，而不是this对象。

    +

    另一方面，如果对普通函数（内部没有this关键字的函数）使用new命令，则会返回一个空对象。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    function getMessage() { // 内部沒有this关键字，会返回一个空对象
      return 'this is a message';
    }

    var msg = new getMessage();

    msg // {}
    typeof msg // "object"
    + +

    上面代码中，getMessage是一个普通函数，返回一个字符串。对它使用new命令，会得到一个空对象。这是因为**new命令总是返回一个对象，要么是实例对象，要么是return语句指定的对象**。本例中，return语句返回的是字符串，所以new命令就忽略了该语句。

    +

    new命令简化的内部流程，可以用下面的代码表示。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    // 构造函数
    function Person(name,age){
        this.name = name
        this.age = age
    }

    // new的原理：自定义_new
    function _new() {
      // 将 arguments 对象转为数组
      var args = [].slice.call(arguments);
      // 取出构造函数
      var constructor = args.shift();
      // 创建一个空对象，继承构造函数的 prototype 属性
      var context = Object.create(constructor.prototype);
      // 执行构造函数
      var result = constructor.apply(context, args);
      // 如果返回结果是对象，就直接返回，否则返回 context 对象
      return (typeof result === 'object' && result != null) ? result : context;
    }

    // 自定义_new2
    function _new2(/* 构造函数 */ constructor, /* 构造函数参数 */ params) {
      // 创建一个空对象，继承构造函数的 prototype 属性
      var context = Object.create(constructor.prototype);
      // 执行构造函数
      var result = constructor.apply(context, params);
      // 如果返回结果是对象，就直接返回，否则返回 context 对象
      return (typeof result === 'object' && result != null) ? result : context;
      // （当用户在构造函数内部自定义返回对象的话则使用该对象，否则返回context）
    }


    // 通过自定义_new 返回实例
    var actor = _new(Person, '张三', 28);
    actor.name // 张三

    // 通过自定义_new2 返回实例
    var actor2 = _new2(Person, ['李四', 29]);
    actor2.name // 李四

    // 通过new命令 返回实例
    var actor3 = new Person('王五',30)
    actor3.name // 王五

    + + + +

    new.target 属性

    构造函数内部可以使用new.target属性。如果当前函数是new命令调用，new.target指向当前函数，否则为undefined。

    +
    1
    2
    3
    4
    5
    6
    function f() {
      console.log(new.target === f);
    }

    f() // false
    new f() // true
    + +

    使用这个属性，可以判断函数调用的时候，是否使用new命令。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    function f() {
      if (!new.target) {
        throw new Error('请使用 new 命令调用！');
      }
      // ...
    }

    f() // Uncaught Error: 请使用 new 命令调用！
    + +

    上面代码中，构造函数f调用时，没有使用new命令，就抛出一个错误。

    +

    4、Object.create()创建实例对象

    构造函数作为模板，可以生成实例对象。但是，有时拿不到构造函数，只能拿到一个现有的对象。我们希望以这个现有的对象作为模板，生成新的实例对象，这时就可以使用Object.create()方法。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // 这个例子没有构造函数，只有一个对象

    var person1 = { // 这个对象用来生成实例对象，它被当成一个模板
      name: '张三',
      age: 38,
      greeting: function() {
        console.log('Hi! I\'m ' + this.name + '.');
      }
    };

    var person2 = Object.create(person1);

    person2.name // 张三
    person2.greeting() // Hi! I'm 张三.
    + +

    上面代码中，对象person1是person2的模板，后者继承了前者的属性和方法。

    +

    Object.create()的详细介绍，请看后面的相关章节。

    +

    二、this关键字

    1、涵义

    this关键字是一个非常重要的语法点。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。

    +

    前一章已经提到，this可以用在构造函数之中，表示实例对象。除此之外，this还可以用在别的场合。但不管是什么场合，this都有一个共同点：它总是返回一个对象。

    +

    简单说，**this就是属性或方法“当前”所在的对象**。

    +
    1
    this.property // this代表property属性当前所在的对象
    + +

    上面代码中，this就代表property属性当前所在的对象。

    +

    下面是一个实际的例子。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var person = {
      name: '张三',
      describe: function () {
        return '姓名：'+ this.name;
      }
    };

    person.describe()
    // "姓名：张三"
    + +

    上面代码中，this.name表示name属性所在的那个对象。由于this.name是在describe方法中调用，而describe方法所在的当前对象是person，因此this指向person，this.name就是person.name。

    +

    由于对象的属性可以赋给另一个对象，所以属性所在的当前对象是可变的，即this的指向是可变的。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    var A = {
      name: '张三',
      describe: function () {
        return '姓名：'+ this.name;
      }
    };

    var B = {
      name: '李四'
    };

    B.describe = A.describe;

    /* 此时B的值：
    B={
    	name: '李四',
        describe: function () {
            return '姓名：'+ this.name;
        }
    }
    */

    B.describe() // B内部的this指向B对象
    // "姓名：李四"
    + +

    上面代码中，A.describe属性被赋给B，于是B.describe就表示describe方法所在的当前对象是B，所以this.name就指向B.name。

    +

    稍稍重构这个例子，this的动态指向就能看得更清楚。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    function f() {
      return '姓名：'+ this.name;
    }

    var A = {
      name: '张三',
      describe: f
    };

    var B = {
      name: '李四',
      describe: f
    };

    A.describe() // "姓名：张三"
    B.describe() // "姓名：李四"
    + +

    上面代码中，函数f内部使用了this关键字，随着f所在的对象不同，this的指向也不同。

    +

    只要函数被赋给另一个变量，this的指向就会变。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var A = {
      name: '张三',
      describe: function () {
        return '姓名：'+ this.name;
      }
    };

    var name = '李四';
    var f = A.describe;
    f() // "姓名：李四" f函数中的this和name变量所在的对象都为window顶层对象
    + +

    上面代码中，A.describe被赋值给变量f，内部的this就会指向f运行时所在的对象（本例是顶层对象）。

    +

    再看一个网页编程的例子。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    <input type="text" name="age" size=3 onChange="validate(this, 18, 99);">

    <script>
    function validate(obj, lowval, hival){
      if ((obj.value < lowval) || (obj.value > hival))
        console.log('Invalid Value!');
    }
    </script>
    + +

    上面代码是一个文本输入框，每当用户输入一个值，就会调用onChange回调函数，验证这个值是否在指定范围。浏览器会向回调函数传入当前对象，因此this就代表传入当前对象（即文本框），然后就可以从this.value上面读到用户的输入值。

    +

    总结一下，JavaScript 语言之中，一切皆对象，运行环境也是对象，所以函数都是在某个对象之中运行，this就是函数运行时所在的对象（环境）。这本来并不会让用户糊涂，但是 JavaScript 支持运行环境动态切换，也就是说，this的指向是动态的，没有办法事先确定到底指向哪个对象，这才是最让初学者感到困惑的地方。

    +

    2、实质

    JavaScript 语言之所以有 this 的设计，跟内存里面的数据结构有关系。

    +
    1
    var obj = { foo:  5 };
    + +

    上面的代码将一个对象赋值给变量obj。JavaScript 引擎会先在内存里面，生成一个对象{ foo: 5 }，然后把这个对象的内存地址赋值给变量obj。也就是说，变量obj是一个地址（reference）。后面如果要读取obj.foo，引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的foo属性。

    +

    原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。举例来说，上面例子的foo属性，实际上是以下面的形式保存的。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    {
      foo: {
        [[value]]: 5
        [[writable]]: true
        [[enumerable]]: true
        [[configurable]]: true
      }
    }
    + +

    注意，foo属性的值保存在属性描述对象的value属性里面。

    +

    这样的结构是很清晰的，问题在于属性的值可能是一个函数。

    +
    1
    var obj = { foo: function () {} };
    + +

    这时，引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。

    +
    1
    2
    3
    4
    5
    6
    {
      foo: {
        [[value]]: 函数的地址
        ...
      }
    }
    + +

    由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var f = function () {};
    var obj = { f: f };

    // 单独执行
    f()

    // obj 环境执行
    obj.f()
    + +

    JavaScript 允许在函数体内部，引用当前环境的其他变量。

    +
    1
    2
    3
    var f = function () {
      console.log(x);
    };
    + +

    上面代码中，函数体里面使用了变量x。该变量由运行环境提供。

    +

    现在问题就来了，由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

    +
    1
    2
    3
    var f = function () {
      console.log(this.x);
    }
    + +

    上面代码中，函数体里面的this.x就是指当前运行环境的x。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var f = function () {
      console.log(this.x);
    }

    var x = 1;
    var obj = {
      f: f,
      x: 2,
    };

    // 单独执行
    f() // 1  f方法当前运行环境为window对象

    // obj 环境执行
    obj.f() // 2 f方法当前运行环境为obj对象
    + +

    上面代码中，函数f在全局环境执行，this.x指向全局环境的x；在obj环境执行，this.x指向obj.x。

    +

    3、使用场合

    this主要有以下几个使用场合。

    +

    （1）全局环境

    全局环境使用this，它指的就是顶层对象window。

    +
    1
    2
    3
    4
    5
    6
    this === window // true

    function f() {
      console.log(this === window);
    }
    f() // true
    + +

    上面代码说明，不管是不是在函数内部，只要是在全局环境下运行，this就是指顶层对象window。

    +

    （2）构造函数

    构造函数中的this，指的是实例对象。

    +
    1
    2
    3
    4
    5
    var Obj = function (p) {
      this.p = p; // this指向实例对象，在实例对象上定义属性p等于p值
    };
    var o = new Obj('Hello World!'); // 通过new构造函数来声明实例对象o
    o.p // "Hello World!"
    + +

    上面代码定义了一个构造函数Obj。由于this指向实例对象，所以在构造函数内部定义this.p，就相当于定义实例对象有一个p属性。

    +

    （3）对象的方法

    如果对象的方法里面包含this，this的指向就是方法运行时所在的对象。该方法赋值给另一个对象，就会改变this的指向。

    +

    但是，这条规则很不容易把握。请看下面的代码。

    +
    1
    2
    3
    4
    5
    6
    7
    var obj ={
      foo: function () {
        console.log(this);
      }
    };

    obj.foo() // obj
    + +

    上面代码中，obj.foo方法执行时，它内部的this指向obj。

    +

    但是，下面这几种用法，都会改变this的指向。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    // 情况一
    (obj.foo = obj.foo)() // window
    // 情况二
    (false || obj.foo)() // window
    // 情况三
    (1, obj.foo)() // window

    //obj.foo 是一个内存地址，它直接取出了 function () {console.log(this);} ，可以把obj.foo看做function () {console.log(this);}
    + +

    上面代码中，obj.foo就是一个值。这个值真正调用的时候，运行环境已经不是obj了，而是全局环境，所以this不再指向obj。

    +

    可以这样理解，JavaScript 引擎内部，**obj和obj.foo储存在两个内存地址，称为地址一和地址二。obj.foo()这样调用时，是从地址一调用地址二，因此地址二的运行环境是地址一，this指向obj。但是，上面三种情况，都是直接取出地址二进行调用，这样的话，运行环境就是全局环境，因此this指向全局环境**。上面三种情况等同于下面的代码。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    //obj.foo 是一个内存地址，它直接取出了 function () {console.log(this);} ，可以把obj.foo看做function () {console.log(this);}

    // 情况一
    (obj.foo = function () {
      console.log(this);
    })()
    // 等同于
    (function () {
      console.log(this);
    })()

    // 情况二
    (false || function () {
      console.log(this);
    })()

    // 情况三
    (1, function () {
      console.log(this);
    })()
    + +

    如果this所在的方法不在对象的第一层，这时this只是指向当前一层的对象，而不会继承更上面的层。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var a = {
      p: 'Hello',
      b: {
        m: function() {
          console.log(this.p);
        }
      }
    };

    a.b.m() // undefined
    + +

    上面代码中，a.b.m方法在a对象的第二层，该方法内部的this不是指向a，而是指向a.b，因为实际执行的是下面的代码。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var b = {
      m: function() {
       console.log(this.p);
      }
    };

    var a = {
      p: 'Hello',
      b: b
    };

    (a.b).m() // 等同于 b.m()
    + +

    如果要达到预期效果，只有写成下面这样。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var a = {
      b: {
        m: function() {
          console.log(this.p);
        },
        p: 'Hello'
      }
    };
    + +

    如果这时将嵌套对象内部的方法赋值给一个变量，this依然会指向全局对象。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var a = {
      b: {
        m: function() {
          console.log(this.p);
        },
        p: 'Hello'
      }
    };

    var hello = a.b.m; // 把方法的内存地址赋值给了hello
    hello() // undefined  内部this指向window
    + +

    上面代码中，m是多层对象内部的一个方法。为求简便，将其赋值给hello变量，结果调用时，this指向了顶层对象。为了避免这个问题，可以只将m所在的对象赋值给hello，这样调用时，this的指向就不会变。

    +
    1
    2
    var hello = a.b;
    hello.m() // Hello   this指向不变
    + +

    4、使用注意点

    （1）避免多层 this

    由于this的指向是不确定的，所以切勿在函数中包含多层的this。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var o = {
      f1: function () {
        console.log(this); // this指向o对象
        var f2 = function () { // 方法会另起一个内存地址
          console.log(this); // this指向window对象
        }();
      }
    }

    o.f1()
    // Object
    // Window
    + +

    上面代码包含两层this，结果运行后，第一层指向对象o，第二层指向全局对象，因为实际执行的是下面的代码。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var temp = function () {
      console.log(this);
    };

    var o = {
      f1: function () {
        console.log(this);
        var f2 = temp();
      }
    }
    + +

    一个解决方法是在第二层改用一个指向外层this的变量。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var o = {
      f1: function() {
        console.log(this);
        var that = this; // 使用变量保存this
        var f2 = function() {
          console.log(that);
        }();
      }
    }

    o.f1()
    // Object
    // Object
    + +

    上面代码定义了变量that，固定指向外层的this，然后在内层使用that，就不会发生this指向的改变。

    +

    事实上，使用一个变量固定this的值，然后内层函数调用这个变量，是非常常见的做法，请务必掌握。

    +

    JavaScript 提供了严格模式，也可以硬性避免这种问题。严格模式下，如果函数内部的this指向顶层对象，就会报错。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var counter = {
      count: 0
    };
    counter.inc = function () {
      'use strict';
      this.count++
    };
    var f = counter.inc; // 这里直接取出方法的内存地址赋值给f，运行环境为window
    f()
    // TypeError: Cannot read property 'count' of undefined
    + +

    上面代码中，inc方法通过'use strict'声明采用严格模式，这时内部的this一旦指向顶层对象，就会报错。

    +

    （2）避免数组处理方法中的 this

    数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this 。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var o = {
      v: 'hello',
      p: [ 'a1', 'a2' ],
      f: function f() {
        this.p.forEach(function (item) { // 这个方法的运行环境为window
          console.log(this.v + ' ' + item);
        });
      }
    }

    o.f()
    // undefined a1
    // undefined a2
    + +

    上面代码中，foreach方法的回调函数中的this，其实是指向window对象，因此取不到o.v的值。原因跟上一段的多层this是一样的，就是内层的this不指向外部，而指向顶层对象。

    +

    解决这个问题的一种方法，就是前面提到的，使用中间变量固定this。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var o = {
      v: 'hello',
      p: [ 'a1', 'a2' ],
      f: function f() {
        var that = this;
        this.p.forEach(function (item) {
          console.log(that.v+' '+item);
        });
      }
    }

    o.f()
    // hello a1
    // hello a2
    + +

    另一种方法是将this当作foreach方法的第二个参数，固定它的运行环境。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var o = {
      v: 'hello',
      p: [ 'a1', 'a2' ],
      f: function f() {
        this.p.forEach(function (item) {
          console.log(this.v + ' ' + item);
        }, this);
      }
    }

    o.f()
    // hello a1
    // hello a2
    + +

    ES6箭头函数

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var o = {
      v: 'hello',
      p: [ 'a1', 'a2' ],
      f: function f() {
        this.p.forEach((item) => { // 箭头函数使this指向为o对象
          console.log(this.v+' '+item);
        });
      }
    }

    o.f()
    // hello a1
    // hello a2
    + + + +

    （3）避免回调函数中的 this

    回调函数中的this往往会改变指向，最好避免使用。

    +
    1
    2
    3
    4
    5
    6
    7
    var o = new Object();
    o.f = function () {
      console.log(this === o);
    }

    // jQuery 的写法
    $('#button').on('click', o.f);
    + +

    上面代码中，点击按钮以后，控制台会显示false。原因是此时this不再指向o对象，而是指向按钮的 DOM 对象，因为f方法是在按钮对象的环境中被调用的。这种细微的差别，很容易在编程中忽视，导致难以察觉的错误。

    +

    为了解决这个问题，可以采用下面的一些方法对this进行绑定，也就是使得this固定指向某个对象，减少不确定性。

    +

    5、绑定 this 的方法

    this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。

    +

    Function.prototype.call()

    函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var obj = {};

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

    f() === window // true
    f.call(obj) === obj // true 使函数内this指向obj，相当于把函数放入obj对象内运行。
    + +

    上面代码中，全局环境运行函数f时，this指向全局环境（浏览器为window对象）；call方法可以改变this的指向，指定this指向对象obj，然后在对象obj的作用域中运行函数f。

    +

    call方法的参数，应该是一个对象。如果参数为空、null和undefined，则默认传入全局对象。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var n = 123;
    var obj = { n: 456 };

    function a() {
      console.log(this.n);
    }

    // 参数为空、null、undefined时默认传入全局对象
    a.call() // 123
    a.call(null) // 123
    a.call(undefined) // 123

    a.call(window) // 123

    a.call(obj) // 456
    + +

    上面代码中，a函数中的this关键字，如果指向全局对象，返回结果为123。如果使用call方法将this关键字指向obj对象，返回结果为456。可以看到，如果call方法没有参数，或者参数为null或undefined，则等同于指向全局对象。

    +

    如果call方法的参数是一个原始值，那么这个原始值会自动转成对应的包装对象，然后传入call方法。

    +
    1
    2
    3
    4
    5
    6
    var f = function () {
      return this;
    };

    f.call(5)
    // Number {[[PrimitiveValue]]: 5} // Number的实例对象
    + +

    上面代码中，call的参数为5，不是对象，会被自动转成包装对象（Number的实例），绑定f内部的this。

    +

    call方法还可以接受多个参数。

    +
    语法
    1
    2
    3
    func.call(thisValue, arg1, arg2, ...)
    // 第一个参数thisValue为函数内this将要指向的对象
    // 其余参数为传入函数的参数
    + +

    call的第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。

    +
    1
    2
    3
    4
    5
    function add(a, b) {
      return a + b;
    }

    add.call(this, 1, 2) // 3
    + +

    上面代码中，call方法指定函数add内部的this绑定当前环境（对象），并且参数为1和2，因此函数add运行后得到3。

    +
    应用：调用对象的原生方法

    call方法的一个应用是调用对象的原生方法。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var obj = {};
    obj.hasOwnProperty('toString') // false 判断obj是否有toString属性，注意这里不是toString()方法

    // 覆盖掉继承的 hasOwnProperty 方法
    obj.hasOwnProperty = function () {
      return true;
    };
    obj.hasOwnProperty('toString') // true

    Object.prototype.hasOwnProperty.call(obj, 'toString') // false
    + +

    上面代码中，hasOwnProperty是obj对象继承的方法，如果这个方法一旦被覆盖，就不会得到正确结果。call方法可以解决这个问题，它将hasOwnProperty方法的原始定义放到obj对象上执行，这样无论obj上有没有同名方法，都不会影响结果。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var objArr = { // 类数组对象
        0:'a',
        1:'b',
        2:'c',
        length:3
    }

    var arr = Array.prototype.slice.call(objArr) // 执行数组的slice方法，并把obj指定为方法的this
    // 或 arr = [].slice.call(obj)

    arr // ['a','b','c']
    + +

    上面代码中，objArr是一个类似数组的对象，使用call调用数组的slice方法，指定objArr为slice方法内部的this，slice方法返回值赋给arr。

    +

    另外来看看数组slice方法的内部实现原理

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    Array.prototype.slice=function(start,end){  //数组方法slice的底层内部实现
        var result = new Array(); //新数组
        var start = start || 0;
        var end = end || this.length; //this指向调用的对象，用了call之后，改变this的指向，指向传进来的对象
        for(var i=start; i<end; i++){
            result.push(this[i]);
        }
        return result;	//返回的为一个新的数组
    }
    + +

    Function.prototype.apply()

    apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数，使用格式如下。

    +
    语法
    1
    2
    3
    func.apply(thisValue, [arg1, arg2, ...])
    // 第一个参数thisValue为函数内this将要指向的对象
    // 第二个参数为一个数组，数组每一项为传入函数的参数
    + +

    apply方法的第一个参数也是this所要指向的那个对象，如果设为null或undefined，则等同于指定全局对象。第二个参数则是一个数组，该数组的所有成员依次作为参数，传入原函数。原函数的参数，在call方法中必须一个个添加，但是在apply方法中，必须以数组形式添加。

    +
    1
    2
    3
    4
    5
    6
    function f(x, y){
      console.log(x + y);
    }

    f.call(null, 1, 1) // 2
    f.apply(null, [1, 1]) // 2
    + +

    上面代码中，f函数本来接受两个参数，使用apply方法以后，就变成可以接受一个数组作为参数。

    +

    利用这一点，可以做一些有趣的应用。

    +
    应用：
    （1）获取数组最大/最小元素

    JavaScript 不提供找出数组最大元素的函数。结合使用apply方法和Math.max/Math.min方法，就可以返回数组的最大/最小元素。

    +

    利用第二个参数为数组的特点

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 获取最大值
    var a = [10, 2, 4, 15, 9];
    Math.max.apply(null, a) // 15

    //Math.max方法获取最大值
    //Math.max(10, 2, 4, 15, 9) // 15

    // 获取最小值
    var a = [10, 2, 4, 15, 9];
    Math.min.apply(null, a) // 15    null等于绑定全局对象
    + +
    （2）将数组的空元素变为undefined

    通过apply方法，利用Array构造函数将数组的空元素变成undefined。

    +
    1
    2
    Array.apply(null, ['a', ,'b'])
    // [ 'a', undefined, 'b' ]
    + +

    空元素与undefined的差别在于，数组的forEach方法会跳过空元素，但是不会跳过undefined。因此，遍历内部元素的时候，会得到不同的结果。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var a = ['a', , 'b'];

    function print(i) {
      console.log(i);
    }

    a.forEach(print)
    // a
    // b

    Array.apply(null, a).forEach(print)
    // a
    // undefined
    // b
    + +
    （3）转换类似数组的对象

    另外，利用数组对象的slice方法，可以将一个类似数组的对象（比如arguments对象）转为真正的数组。

    +

    和使用call方法的效果一样。

    +
    1
    2
    3
    4
    Array.prototype.slice.apply({0: 1, length: 1}) // [1]
    Array.prototype.slice.apply({0: 1}) // []
    Array.prototype.slice.apply({0: 1, length: 2}) // [1, undefined]
    Array.prototype.slice.apply({length: 1}) // [undefined]
    + +

    上面代码的apply方法的参数都是对象，但是返回结果都是数组，这就起到了将对象转成数组的目的。从上面代码可以看到，这个方法起作用的前提是，被处理的对象必须有length属性，以及相对应的数字键。

    +
    （4）绑定回调函数的对象

    前面的按钮点击事件的例子，可以改写如下。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var o = new Object();

    o.f = function () {
      console.log(this === o);// true  ，如未改变this指向，this将指向 DOM 对象
    }

    var f = function (){
      o.f.apply(o);
      // 或者 o.f.call(o);
    };

    // jQuery 的写法
    $('#button').on('click', f);
    + +

    上面代码中，点击按钮以后，控制台将会显示true。由于apply方法（或者call方法）不仅绑定函数执行时所在的对象，还会立即执行函数，因此不得不把绑定语句写在一个函数体内。更简洁的写法是采用下面介绍的bind方法。

    +

    Function.prototype.bind()

    bind方法用于将函数体内的this绑定到某个对象，然后返回一个新函数，bind方法并非立即执行一个函数。

    +
    语法
    1
    2
    3
    4
    func.bind(thisValue, arg1, arg2, ...)()
    // 第一个参数thisValue为函数内this将要指向的对象
    // 其余参数为传入函数的参数
    // bind方法返回一个新函数，并非立即执行，如需执行要在后面加个括号
    + + + +
    1
    2
    3
    4
    5
    var d = new Date();
    d.getTime() // 1481869925657

    var print = d.getTime;
    print() // Uncaught TypeError: this is not a Date object.
    + +

    上面代码中，我们将d.getTime方法赋给变量print，然后调用print就报错了。这是因为getTime方法内部的this，绑定Date对象的实例，赋给变量print以后，内部的this已经不指向Date对象的实例了。

    +

    bind方法可以解决这个问题。

    +
    1
    2
    var print = d.getTime.bind(d);
    print() // 1481869925657
    + +

    上面代码中，bind方法将getTime方法内部的this绑定到d对象，这时就可以安全地将这个方法赋值给其他变量了。

    +

    bind方法的参数就是所要绑定this的对象，下面是一个更清晰的例子。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var counter = {
      count: 0,
      inc: function () {
        this.count++;
      }
    };

    var func = counter.inc.bind(counter);
    func();
    counter.count // 1
    + +

    上面代码中，counter.inc方法被赋值给变量func。这时必须用bind方法将inc内部的this，绑定到counter，否则就会出错。

    +

    this绑定到其他对象也是可以的。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var counter = {
      count: 0,
      inc: function () {
        this.count++;
      }
    };

    var obj = {
      count: 100
    };
    var func = counter.inc.bind(obj);
    func();
    obj.count // 101
    + +

    上面代码中，bind方法将inc方法内部的this，绑定到obj对象。结果调用func函数以后，递增的就是obj内部的count属性。

    +

    bind还可以接受更多的参数，将这些参数绑定原函数的参数。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var add = function (x, y) {
      return x * this.m + y * this.n;
    }

    var obj = {
      m: 2,
      n: 2
    };

    var newAdd = add.bind(obj, 5); // 第二个参数为add内的x
    newAdd(5) // 20 传入的参数为add内的y
    + +

    上面代码中，bind方法除了绑定this对象，还将add函数的第一个参数x绑定成5，然后返回一个新函数newAdd，这个函数只要再接受一个参数y就能运行了。

    +

    如果bind方法的第一个参数是null或undefined，等于将this绑定到全局对象，函数运行时this指向顶层对象（浏览器为window）。

    +
    1
    2
    3
    4
    5
    6
    function add(x, y) {
      return x + y;
    }

    var plus5 = add.bind(null, 5);
    plus5(10) // 15  传入的参数为add内的y
    + +

    上面代码中，函数add内部并没有this，使用bind方法的主要目的是绑定参数x，以后每次运行新函数plus5，就只需要提供另一个参数y就够了。而且因为add内部没有this，所以bind的第一个参数是null，不过这里如果是其他对象，也没有影响。

    +
    bind要注意的点：
    （1）每一次返回一个新函数

    bind方法每运行一次，就返回一个新函数，这会产生一些问题。比如，监听事件的时候，不能写成下面这样。

    +
    1
    element.addEventListener('click', o.m.bind(o));
    + +

    上面代码中，click事件绑定bind方法生成的一个匿名函数。这样会导致无法取消绑定，所以，下面的代码是无效的。

    +
    1
    element.removeEventListener('click', o.m.bind(o));
    + +

    正确的方法是写成下面这样：

    +
    1
    2
    3
    4
    var listener = o.m.bind(o);
    element.addEventListener('click', listener);
    //  ...
    element.removeEventListener('click', listener);
    + +
    （2）结合回调函数使用

    回调函数是 JavaScript 最常用的模式之一，但是一个常见的错误是，将包含this的方法直接当作回调函数。解决方法就是使用bind方法，将counter.inc绑定counter。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var counter = {
      count: 0,
      inc: function () {
        'use strict';
        this.count++;
      }
    };

    function callIt(callback) {
      callback();
    }

    callIt(counter.inc.bind(counter));
    counter.count // 1
    + +

    上面代码中，callIt方法会调用回调函数。这时如果直接把counter.inc传入，调用时counter.inc内部的this就会指向全局对象。使用bind方法将counter.inc绑定counter以后，就不会有这个问题，this总是指向counter。

    +

    还有一种情况比较隐蔽，就是某些数组方法可以接受一个函数当作参数。这些函数内部的this指向，很可能也会出错。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var obj = {
      name: '张三',
      times: [1, 2, 3],
      print: function () {
        this.times.forEach(function (n) { // 数组的forEach方法内部this指向问题
          console.log(this.name); // 这里的this指向全局对象
        });
      }
    };

    obj.print()
    // 没有任何输出
    + +

    上面代码中，obj.print内部this.times的this是指向obj的，这个没有问题。但是，forEach方法的回调函数内部的this.name却是指向全局对象，导致没有办法取到值。稍微改动一下，就可以看得更清楚。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    obj.print = function () {
      this.times.forEach(function (n) {
        console.log(this === window);
      });
    };

    obj.print()
    // true
    // true
    // true
    + +

    解决这个问题，也是通过bind方法绑定this。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    obj.print = function () {
      this.times.forEach(function (n) {
        console.log(this.name);
      }.bind(this));// 使用bind把this指向的obj对象传入方法内
    };

    obj.print()
    // 张三
    // 张三
    // 张三
    + +
    （3）结合call方法使用（改写数组方法调用形式）

    利用bind方法，可以改写一些 JavaScript 原生方法的使用形式，以数组的slice方法为例。

    +
    1
    2
    3
    [1, 2, 3].slice(0, 1) // [1]
    // 等同于
    Array.prototype.slice.call([1, 2, 3], 0, 1) // [1]
    + +

    上面的代码中，数组的slice方法从[1, 2, 3]里面，按照指定位置和长度切分出另一个数组。这样做的本质是在[1, 2, 3]上面调用Array.prototype.slice方法，因此可以用call方法表达这个过程，得到同样的结果。

    +

    call方法实质上是调用Function.prototype.call方法，因此上面的表达式可以用bind方法改写。

    +
    1
    2
    var slice = Function.prototype.call.bind(Array.prototype.slice);
    slice([1, 2, 3], 0, 1) // [1]
    + +

    上面代码的含义就是，将Array.prototype.slice变成Function.prototype.call方法所在的对象，调用时就变成了Array.prototype.slice.call。类似的写法还可以用于其他数组方法。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var push = Function.prototype.call.bind(Array.prototype.push);
    var pop = Function.prototype.call.bind(Array.prototype.pop);

    var a = [1 ,2 ,3];
    push(a, 4)
    a // [1, 2, 3, 4]

    pop(a)
    a // [1, 2, 3]
    + +

    如果再进一步，将Function.prototype.call方法绑定到Function.prototype.bind对象，就意味着bind的调用形式也可以被改写。

    +
    1
    2
    3
    4
    5
    6
    7
    function f() {
      console.log(this.v);
    }

    var o = { v: 123 };
    var bind = Function.prototype.call.bind(Function.prototype.bind);
    bind(f, o)() // 123
    + +

    上面代码的含义就是，将Function.prototype.bind方法绑定在Function.prototype.call上面，所以bind方法就可以直接使用，不需要在函数实例上使用。

    +

    总结，call()、apply()、bind()的区别

    这三个方法都是改变函数内部this指向的。

    +

    它们的区别是：

    +

    call()第一个参数为函数内this将要指向的对象，其余参数为传入函数的参数。

    +

    apply()第一个参数为函数内this将要指向的对象，第二个参数为数组，数组每一项为传入函数的参数。

    +

    bind()传入参数和call()一样，区别是bind()返回一个新的函数，并非立即执行。

    +

    三、对象的继承

    面向对象编程很重要的一个方面，就是对象的继承。A 对象通过继承 B 对象，就能直接拥有 B 对象的所有属性和方法。这对于代码的复用是非常有用的。

    +

    大部分面向对象的编程语言，都是通过“类”（class）实现对象的继承。传统上，JavaScript 语言的继承不通过 class，而是通过“原型对象”（prototype）实现，本章介绍 JavaScript 的原型链继承。

    +

    ES6 引入了 class 语法，基于 class 的继承不在这个教程介绍，请参阅《ES6 标准入门》一书的相关章节。

    +

    ES5 是通过“原型对象”（prototype）实现继承。

    +

    1、原型对象概述

    （1）构造函数的缺点

    JavaScript 通过构造函数生成新对象，因此构造函数可以视为对象的模板。实例对象的属性和方法，可以定义在构造函数内部。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function Cat (name, color) {
      this.name = name;
      this.color = color;
    }

    var cat1 = new Cat('大毛', '白色');

    cat1.name // '大毛'
    cat1.color // '白色'
    + +

    上面代码中，Cat函数是一个构造函数，函数内部定义了name属性和color属性，所有实例对象（上例是cat1）都会生成这两个属性，即这两个属性会定义在实例对象上面。

    +

    通过构造函数为实例对象定义属性，虽然很方便，但是有一个缺点。同一个构造函数的多个实例之间，无法共享属性，从而造成对系统资源的浪费。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    function Cat(name, color) {
      this.name = name;
      this.color = color;
      this.meow = function () {
        console.log('喵喵');
      };
    }

    // 解决方法，就是在原型对象（prototype）上创建共同的方法
    Cat.prototype.meow2 = function(){
        console.log('喵喵');
    }

    var cat1 = new Cat('大毛', '白色');
    var cat2 = new Cat('二毛', '黑色');

    // cat1和cat2是同一个构造函数的两个实例对象，他们无法共享meow属性，从而造成对系统资源的浪费。
    cat1.meow === cat2.meow
    // false

    cat1.meow2 === cat2.meow2
    // true
    + +

    上面代码中，cat1和cat2是同一个构造函数的两个实例，它们都具有meow方法。由于meow方法是生成在每个实例对象上面，所以两个实例就生成了两次。也就是说，每新建一个实例，就会新建一个meow方法。这既没有必要，又浪费系统资源，因为所有meow方法都是同样的行为，完全应该共享。

    +

    这个问题的解决方法，就是 JavaScript 的原型对象（prototype）。

    +

    （2）prototype 属性的作用

    JavaScript 继承机制的设计思想就是，原型对象的所有属性和方法，都能被实例对象共享。也就是说，如果属性和方法定义在原型上，那么所有实例对象就能共享，不仅节省了内存，还体现了实例对象之间的联系。

    +

    下面，先看怎么为对象指定原型。JavaScript 规定，每个函数都有一个prototype属性，指向一个对象。

    +
    1
    2
    function f() {}
    typeof f.prototype // "object"
    + +

    上面代码中，函数f默认具有prototype属性，指向一个对象。

    +

    对于普通函数来说，该属性基本无用。但是，对于构造函数来说，生成实例的时候，该属性会自动成为实例对象的原型。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function Animal(name) {
      this.name = name;
    }
    // Animal.prototype属性是实例cat1和cat2的原型对象，在上面添加属性，实例就共享了该属性
    Animal.prototype.color = 'white';

    var cat1 = new Animal('大毛');
    var cat2 = new Animal('二毛');

    cat1.color // 'white'
    cat2.color // 'white'
    + +

    上面代码中，构造函数Animal的prototype属性，就是实例对象cat1和cat2的原型对象。原型对象上添加一个color属性，结果，实例对象都共享了该属性。

    +

    原型对象的属性不是实例对象自身的属性。只要修改原型对象，变动就立刻会体现在所有实例对象上。

    +
    1
    2
    3
    4
    5
    6
    Animal.prototype.color = 'yellow';


    // color属性并非实例对象cat1/cat2本身的属性,只是当实例本身没有该属性或方法时，它会到原型对象去寻找该属性或方法
    cat1.color // "yellow"
    cat2.color // "yellow"
    + +

    上面代码中，原型对象的color属性的值变为yellow，两个实例对象的color属性立刻跟着变了。这是因为实例对象其实没有color属性，都是读取原型对象的color属性。也就是说，当实例对象本身没有某个属性或方法的时候，它会到原型对象去寻找该属性或方法。这就是原型对象的特殊之处。

    +

    如果实例对象自身就有某个属性或方法，它就不会再去原型对象寻找这个属性或方法。

    +
    1
    2
    3
    4
    5
    cat1.color = 'black';

    cat1.color // 'black'
    cat2.color // 'yellow'
    Animal.prototype.color // 'yellow';
    + +

    上面代码中，实例对象cat1的color属性改为black，就使得它不再去原型对象读取color属性，后者的值依然为yellow。

    +

    总结一下，原型对象的作用，就是定义所有实例对象共享的属性和方法。这也是它被称为原型对象的原因，而实例对象可以视作从原型对象衍生出来的子对象。

    +
    1
    2
    3
    Animal.prototype.walk = function () {
      console.log(this.name + ' is walking');
    };
    + +

    上面代码中，Animal.prototype对象上面定义了一个walk方法，这个方法将可以在所有Animal实例对象上面调用。

    +

    （3）原型链

    JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型……

    +

    如果一层层地上溯，所有对象的原型最终都可以上溯到Object.prototype，即Object构造函数的prototype属性。也就是说，所有对象都继承了Object.prototype的属性。这就是所有对象都有valueOf和toString方法的原因，因为这是从Object.prototype继承的。

    +

    那么，Object.prototype对象有没有它的原型呢？回答是Object.prototype的原型是null。null没有任何属性和方法，也没有自己的原型。因此，**原型链的尽头就是null**。

    +
    1
    2
    Object.getPrototypeOf(Object.prototype) // Object.getPrototypeOf方法返回对象的原型
    // null
    + +

    上面代码表示，Object.prototype对象的原型是null，由于null没有任何属性，所以原型链到此为止。Object.getPrototypeOf方法返回参数对象的原型，具体介绍请看后文。

    +

    **读取对象的某个属性时，JavaScript 引擎先寻找对象本身的属性，如果找不到，就到它的原型去找，如果还是找不到，就到原型的原型去找。如果直到最顶层的Object.prototype还是找不到，则返回undefined**。如果对象自身和它的原型，都定义了一个同名属性，那么优先读取对象自身的属性，这叫做“覆盖”（overriding）。

    +

    注意，一级级向上，在整个原型链上寻找某个属性，对性能是有影响的。所寻找的属性在越上层的原型对象，对性能的影响越大。如果寻找某个不存在的属性，将会遍历整个原型链。

    +

    举例来说，如果让构造函数的prototype属性指向一个数组，就意味着实例对象可以调用数组方法。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var MyArray = function () {};

    MyArray.prototype = new Array(); // 构造函数MyArray的原型指向 数组实例
    MyArray.prototype.constructor = MyArray;

    var mine = new MyArray(); // mine是构造函数MyArray的实例
    mine.push(1, 2, 3);
    mine.length // 3
    mine instanceof Array // true 判断实例对象mine是否为构造函数Array的实例
    + +

    上面代码中，mine是构造函数MyArray的实例对象，由于MyArray.prototype指向一个数组实例，使得mine可以调用数组方法（这些方法定义在数组实例的prototype对象上面）。最后那行instanceof表达式，用来比较一个对象是否为某个构造函数的实例，结果就是证明mine为Array的实例，instanceof运算符的详细解释详见后文。

    +

    上面代码还出现了原型对象的constructor属性，这个属性的含义下一节就来解释。

    +

    （4）constructor 属性

    prototype对象有一个constructor属性，默认指向prototype对象所在的构造函数。

    +
    1
    2
    function P() {}
    P.prototype.constructor === P // true
    + +

    由于constructor属性定义在prototype对象上面，意味着可以被所有实例对象继承。

    +
    1
    2
    3
    4
    5
    6
    function P() {}
    var p = new P();

    p.constructor === P // true  p自身没有constructor属性，它是读取原型上的
    p.constructor === P.prototype.constructor // true
    p.hasOwnProperty('constructor') // false
    + +

    上面代码中，p是构造函数P的实例对象，但是p自身没有constructor属性，该属性其实是读取原型链上面的P.prototype.constructor属性。

    +
    作用

    constructor属性的作用是，可以得知某个实例对象，到底是哪一个构造函数产生的。

    +
    1
    2
    3
    4
    5
    function F() {};
    var f = new F();

    f.constructor === F // true
    f.constructor === RegExp // false
    + +

    上面代码中，constructor属性确定了实例对象f的构造函数是F，而不是RegExp。

    +

    另一方面，有了constructor属性，就可以从一个实例对象新建另一个实例。

    +
    1
    2
    3
    4
    5
    function Constr() {}
    var x = new Constr();

    var y = new x.constructor();  // 等同于 new Constr()
    y instanceof Constr // true
    + +

    上面代码中，x是构造函数Constr的实例，可以从x.constructor间接调用构造函数。这使得在实例方法中，调用自身的构造函数成为可能。

    +
    1
    2
    3
    Constr.prototype.createCopy = function () {
      return new this.constructor();
    };
    + +

    上面代码中，createCopy方法调用构造函数，新建另一个实例。

    +

    constructor属性表示原型对象与构造函数之间的关联关系，如果修改了原型对象，一般会同时修改constructor属性，防止引用的时候出错。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function Person(name) {
      this.name = name;
    }

    Person.prototype.constructor === Person // true

    Person.prototype = { // 修改了原型对象,但没有修改原型下的constructor
      method: function () {}
    };

    //  由于原型对象已被修改，原型下的constructor也被修改
    Person.prototype.constructor === Person // false
    Person.prototype.constructor === Object // true // 普通对象的constructor指向object构造函数
    + +

    上面代码中，构造函数Person的原型对象改掉了，但是没有修改constructor属性，导致这个属性不再指向Person。由于Person的新原型是一个普通对象，而普通对象的constructor属性指向Object构造函数，导致Person.prototype.constructor变成了Object。

    +

    所以，修改原型对象时，一般要同时修改constructor属性的指向。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 坏的写法
    C.prototype = {
      method1: function (...) { ... },
      // ...
    };

    // 好的写法
    C.prototype = {
      constructor: C,
      method1: function (...) { ... },
      // ...
    };

    // 更好的写法 （只是在原型对象上添加方法）
    C.prototype.method1 = function (...) { ... };
    + +

    上面代码中，要么将constructor属性重新指向原来的构造函数，要么只在原型对象上添加方法，这样可以保证instanceof运算符不会失真。

    +

    如果不能确定constructor属性是什么函数，还有一个办法：通过name属性，从实例得到构造函数的名称。

    +
    1
    2
    3
    function Foo() {}
    var f = new Foo();
    f.constructor.name // "Foo"
    + +

    2、instanceof 运算符

    instanceof运算符，判断对象是否为某个构造函数的实例，返回一个布尔值。

    +

    语法

    1
    <实例对象> instanceof <构造函数>
    + + + +
    1
    2
    var v = new Vehicle();
    v instanceof Vehicle // true   v是构造函数Vehicel的实例
    + +

    上面代码中，对象v是构造函数Vehicle的实例，所以返回true。

    +

    instanceof运算符的左边是实例对象，右边是构造函数。它会检查右边构造函数的原型对象（prototype），是否在左边对象的原型链上。因此，下面两种写法是等价的。

    +
    1
    2
    3
    v instanceof Vehicle
    // 等同于
    Vehicle.prototype.isPrototypeOf(v)
    + +

    上面代码中，Object.prototype.isPrototypeOf的详细解释见后文。

    +

    由于instanceof检查整个原型链，因此同一个实例对象，可能会对多个构造函数都返回true。

    +
    1
    2
    3
    var d = new Date();
    d instanceof Date // true
    d instanceof Object // true
    + +

    上面代码中，d同时是Date和Object的实例，因此对这两个构造函数都返回true。

    +

    由于任意对象（除了null）都是Object的实例，所以instanceof运算符可以判断一个值是否为非null的对象。

    +
    1
    2
    3
    4
    var obj = { foo: 123 };
    obj instanceof Object // true

    null instanceof Object // false
    + +

    上面代码中，除了null，其他对象的instanceOf Object的运算结果都是true。

    +

    instanceof的原理是检查右边构造函数的prototype属性，是否在左边对象的原型链上。有一种特殊情况，就是左边对象的原型链上，只有null对象。这时，instanceof判断会失真。

    +
    1
    2
    3
    var obj = Object.create(null);
    typeof obj // "object"
    Object.create(null) instanceof Object // false
    + +

    上面代码中，Object.create(null)返回一个新对象obj，它的原型是null（Object.create的详细介绍见后文）。右边的构造函数Object的prototype属性，不在左边的原型链上，因此instanceof就认为obj不是Object的实例。但是，只要一个对象的原型不是null，instanceof运算符的判断就不会失真。

    +

    用处

    instanceof运算符的一个用处，是判断值的类型。

    +
    1
    2
    3
    4
    5
    6
    var x = [1, 2, 3];
    var y = {};
    var z = function (){};
    x instanceof Array // true
    y instanceof Object // true
    y instanceof Function // true
    + +

    上面代码中，instanceof运算符判断，变量x是数组，变量y是对象，变量z是函数。

    +

    注意，instanceof运算符只能用于对象，不适用原始类型的值。

    +
    1
    2
    3
    4
    5
    var s = 'hello';
    var z = 0;
    s instanceof String // false
    z instanceof Number // false
    // 原始类型并没有实例化，所有都返回false
    + +

    上面代码中，字符串不是String对象的实例（因为字符串不是对象），所以返回false。

    +

    此外，对于undefined和null，instanceof运算符总是返回false。

    +
    1
    2
    undefined instanceof Object // false
    null instanceof Object // false
    + +

    利用instanceof运算符，还可以巧妙地解决，调用构造函数时，忘了加new命令的问题。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function Fubar (foo, bar) {
      if (this instanceof Fubar) { // 忘加new命令时 this为 全局对象window
        this._foo = foo;
        this._bar = bar;
      } else {
        return new Fubar(foo, bar);
      }
    }
    Fubar(1, 2)._foo // 1
    (new Fubar(1, 2))._foo // 1
    + +

    上面代码使用instanceof运算符，在函数体内部判断this关键字是否为构造函数Fubar的实例。如果不是，就表明忘了加new命令。

    +

    3、构造函数的继承

    让一个构造函数继承另一个构造函数，是非常常见的需求。

    +

    这可以分成两步实现。第一步是在子类的构造函数中，调用父类的构造函数。

    +
    1
    2
    3
    4
    function Sub(value) { // Sub是子类构造函数
      Super.call(this); // Super是父类构造函数，这的this是子类的实例
      this.prop = value;
    }
    + +

    上面代码中，Sub是子类的构造函数，this是子类的实例。在实例上调用父类的构造函数Super，就会让子类实例具有父类实例的属性。

    +

    第二步，是让子类的原型指向父类的原型，这样子类就可以继承父类原型。

    +
    1
    2
    3
    4
    // 子类的原型指向一个新对象，新对象原型指向父类原型，等于子类原型继承了父类原型，且对子类原型操作不会影响到父类原型
    Sub.prototype = Object.create(Super.prototype);
    Sub.prototype.constructor = Sub;
    Sub.prototype.method = '...';
    + +

    上面代码中，Sub.prototype是子类的原型，要将它赋值为Object.create(Super.prototype)，而不是直接等于Super.prototype。否则后面两行对Sub.prototype的操作，会连父类的原型Super.prototype一起修改掉。

    +

    另外一种写法是Sub.prototype等于一个父类实例。

    +
    1
    Sub.prototype = new Super();// 这个写法会继承父类实例的方法，不推荐
    + +

    上面这种写法也有继承的效果，但是子类会具有父类实例的方法。有时，这可能不是我们需要的，所以不推荐使用这种写法。

    +

    举例来说，下面是一个Shape构造函数。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function Shape() {
      this.x = 0;
      this.y = 0;
    }

    Shape.prototype.move = function (x, y) {
      this.x += x;
      this.y += y;
      console.info('Shape moved.');
    };
    + +

    我们需要让Rectangle构造函数继承Shape。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 第一步，子类继承父类的实例
    function Rectangle() {
      Shape.call(this); // 调用父类构造函数
    }
    // 另一种写法
    function Rectangle() {
      this.base = Shape;
      this.base();
    }

    // 第二步，子类继承父类的原型
    Rectangle.prototype = Object.create(Shape.prototype);
    Rectangle.prototype.constructor = Rectangle;
    + +

    采用这样的写法以后，instanceof运算符会对子类和父类的构造函数，都返回true。

    +
    1
    2
    3
    4
    var rect = new Rectangle();

    rect instanceof Rectangle  // true
    rect instanceof Shape  // true
    + +

    上面代码中，子类是整体继承父类。有时只需要单个方法的继承，这时可以采用下面的写法。

    +
    1
    2
    3
    4
    ClassB.prototype.print = function() {// 单个方法的继承
      ClassA.prototype.print.call(this);// 继承了ClassA的print方法
      // some code
    }
    + +

    上面代码中，子类B的print方法先调用父类A的print方法，再部署自己的代码。这就等于继承了父类A的print方法。

    +

    4、多重继承

    JavaScript 不提供多重继承功能，即不允许一个对象同时继承多个对象。但是，可以通过变通方法，实现这个功能。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    function M1() { // 构造函数M1
      this.hello = 'hello';
    }

    function M2() { // 构造函数M2
      this.world = 'world';
    }

    function S() { // 子类构造函数S
      M1.call(this);
      M2.call(this);
    }

    // 继承 M1
    S.prototype = Object.create(M1.prototype);
    // 继承链上加入 M2
    Object.assign(S.prototype, M2.prototype);

    // 指定构造函数
    S.prototype.constructor = S;

    var s = new S();
    s.hello // 'hello'
    s.world // 'world'
    + +

    上面代码中，子类S同时继承了父类M1和M2。这种模式又称为 Mixin（混入）。

    +

    5、模块

    随着网站逐渐变成“互联网应用程序”，嵌入网页的 JavaScript 代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等……开发者必须使用软件工程的方法，管理网页的业务逻辑。

    +

    JavaScript 模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。

    +

    但是，JavaScript 不是一种模块化编程语言，ES6 才开始支持“类”和“模块”。下面介绍传统的做法，如何利用对象实现模块的效果。

    +

    （1）基本的实现方法

    模块是实现特定功能的一组属性和方法的封装。

    +

    简单的做法是把模块写成一个对象，所有的模块成员都放到这个对象里面。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var module1 = new Object({
    　_count : 0,
    　m1 : function (){
    　　//...
    　},
    　m2 : function (){
      　//...
    　}
    });
    + +

    上面的函数m1和m2，都封装在module1对象里。使用的时候，就是调用这个对象的属性。

    +
    1
    2
    // 使用
    module1.m1();
    + +

    但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。

    +
    1
    module1._count = 5;
    + + + +

    （2）封装私有变量：

    （2-1）构造函数的写法

    我们可以利用构造函数，封装私有变量。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function StringBuilder() {
      var buffer = []; // 模块的私有变量

      this.add = function (str) {
         buffer.push(str);
      };

      this.toString = function () {
        return buffer.join('');
      };

    }
    + +

    上面代码中，buffer是模块的私有变量。一旦生成实例对象，外部是无法直接访问buffer的。但是，这种方法将私有变量封装在构造函数中，导致构造函数与实例对象是一体的，总是存在于内存之中，无法在使用完成后清除。这意味着，构造函数有双重作用，既用来塑造实例对象，又用来保存实例对象的数据，违背了构造函数与实例对象在数据上相分离的原则（即实例对象的数据，不应该保存在实例对象以外）。同时，非常耗费内存。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function StringBuilder() {
      this._buffer = [];
    }

    StringBuilder.prototype = {
      constructor: StringBuilder,
      add: function (str) {
        this._buffer.push(str);
      },
      toString: function () {
        return this._buffer.join('');
      }
    };
    + +

    这种方法将私有变量放入实例对象中，好处是看上去更自然，但是它的私有变量可以从外部读写，不是很安全。

    +
    （2-2）立即执行函数的写法

    另一种做法是使用“立即执行函数”（Immediately-Invoked Function Expression，IIFE），将相关的属性和方法封装在一个函数作用域里面，可以达到不暴露私有成员的目的。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var module1 = (function () {
    　var _count = 0;
    　var m1 = function () {
    　  //...
    　};
    　var m2 = function () {
    　　//...
    　};
    　return {
    　　m1 : m1,
    　　m2 : m2
    　};
    })();
    + +

    使用上面的写法，外部代码无法读取内部的_count变量。

    +
    1
    console.info(module1._count); //undefined
    + +

    上面的module1就是 JavaScript 模块的基本写法。下面，再对这种写法进行加工。

    +

    （3）模块的放大模式（向模块添加新方法）

    如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用“放大模式”（augmentation）。

    +
    1
    2
    3
    4
    5
    6
    var module1 = (function (mod){
    　mod.m3 = function () {
    　　//...
    　};
    　return mod;
    })(module1);
    + +

    上面的代码为module1模块添加了一个新方法m3()，然后返回新的module1模块。

    +

    在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上面的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用”宽放大模式”（Loose augmentation）。

    +
    1
    2
    3
    4
    var module1 = (function (mod) {
    　//...
    　return mod;
    })(window.module1 || {});
    + +

    与”放大模式”相比，“宽放大模式”就是“立即执行函数”的参数可以是空对象。

    +

    （4）输入全局变量（保证独立性）

    独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

    +

    为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

    +
    1
    2
    3
    var module1 = (function ($, YAHOO) {
    　//...
    })(jQuery, YAHOO); // 向模块内部传入全局变量
    + +

    上面的module1模块需要使用 jQuery 库和 YUI 库，就把这两个库（其实是两个模块）当作参数输入module1。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。

    +

    立即执行函数还可以起到命名空间的作用。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    (function($, window, document) {

      function go(num) {
      }

      function handleEvents() {
      }

      function initialize() {
      }

      function dieCarouselDie() {
      }

      //attach to the global scope
      window.finalCarousel = { // 对外暴露接口
        init : initialize,
        destroy : dieCarouselDie
      }

    })( jQuery, window, document );
    + +

    上面代码中，finalCarousel对象输出到全局，对外暴露init和destroy接口，内部方法go、handleEvents、initialize、dieCarouselDie都是外部无法调用的。

    +

    四、Object 对象的相关方法

    JavaScript 在Object对象上面，提供了很多相关方法，处理面向对象编程的相关操作。本章介绍这些方法。

    +

    1、Object.getPrototypeOf() 获取原型对象

    Object.getPrototypeOf方法返回参数对象的原型。这是获取原型对象的标准方法。

    +
    1
    2
    3
    var F = function () {};
    var f = new F();
    Object.getPrototypeOf(f) === F.prototype // true
    + +

    上面代码中，实例对象f的原型是F.prototype。

    +

    下面是几种特殊对象的原型。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 空对象的原型是 Object.prototype
    Object.getPrototypeOf({}) === Object.prototype // true

    // Object.prototype 的原型是 null
    Object.getPrototypeOf(Object.prototype) === null // true

    // 函数的原型是 Function.prototype
    function f() {}
    Object.getPrototypeOf(f) === Function.prototype // true
    + + + +

    2、Object.setPrototypeOf() 设置原型对象

    Object.setPrototypeOf方法为参数对象设置原型，返回该参数对象。它接受两个参数，第一个是现有对象，第二个是原型对象。

    +
    1
    2
    3
    4
    5
    6
    var a = {};
    var b = {x: 1};
    Object.setPrototypeOf(a, b);

    Object.getPrototypeOf(a) === b // true
    a.x // 1  a对象共享b对象的属性
    + +

    上面代码中，Object.setPrototypeOf方法将对象a的原型，设置为对象b，因此a可以共享b的属性。

    +
    使用Object.setPrototypeOf方法模拟new命令
    1
    2
    3
    4
    5
    6
    7
    8
    var F = function () {
      this.foo = 'bar';
    };

    var f = new F();
    // 等同于
    var f = Object.setPrototypeOf({}, F.prototype); // 模拟new命令
    F.call(f);
    + +

    上面代码中，new命令新建实例对象，其实可以分成两步。第一步，将一个空对象的原型设为构造函数的prototype属性（上例是F.prototype）；第二步，将构造函数内部的this绑定这个空对象，然后执行构造函数，使得定义在this上面的方法和属性（上例是this.foo），都转移到这个空对象上。

    +

    3、 Object.create() 创建实例对象，指向目标对象的原型

    生成实例对象的常用方法是，使用new命令让构造函数返回一个实例。但是很多时候，只能拿到一个实例对象，它可能根本不是由构建函数生成的，那么能不能从一个实例对象，生成另一个实例对象呢？

    +

    JavaScript 提供了Object.create方法，用来满足这种需求。该方法接受一个对象作为参数，然后以它为原型，返回一个实例对象。该实例完全继承原型对象的属性。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 原型对象
    var A = {
      print: function () {
        console.log('hello');
      }
    };

    // 实例对象
    var B = Object.create(A); // 以A为原型，创建了B实例对象，使B继承了A的属性

    Object.getPrototypeOf(B) === A // true
    B.print() // hello
    B.print === A.print // true
    + +

    上面代码中，Object.create方法以A对象为原型，生成了B对象。B继承了A的所有属性和方法。

    +

    实际上，Object.create方法可以用下面的代码代替。

    +
    内部实现原理
    1
    2
    3
    4
    5
    6
    7
    if (typeof Object.create !== 'function') {
      Object.create = function (obj) { // 模拟Object.create方法
        function F() {} // 创建一个空构造函数F
        F.prototype = obj; // 让F的原型 指向参数obj（obj为传入的原型对象）
        return new F(); // 返回一个F的实例
      };
    }
    + +

    上面代码表明，Object.create方法的实质是新建一个空的构造函数F，然后让F.prototype属性指向参数对象obj，最后返回一个F的实例，从而实现让该实例继承obj的属性。

    +

    下面三种方式生成的新对象是等价的。

    +
    1
    2
    3
    var obj1 = Object.create({});
    var obj2 = Object.create(Object.prototype);
    var obj3 = new Object();
    + +

    如果想要生成一个不继承任何属性（比如没有toString和valueOf方法）的对象，可以将Object.create的参数设为null。

    +
    1
    2
    3
    4
    var obj = Object.create(null); // 不继承Object的toString和valueOf方法的一个对象

    obj.valueOf()
    // TypeError: Object [object Object] has no method 'valueOf'
    + +

    上面代码中，对象obj的原型是null，它就不具备一些定义在Object.prototype对象上面的属性，比如valueOf方法。

    +

    使用Object.create方法的时候，必须提供对象原型，即参数不能为空，或者不是对象，否则会报错。

    +
    1
    2
    3
    4
    Object.create()
    // TypeError: Object prototype may only be an Object or null
    Object.create(123)
    // TypeError: Object prototype may only be an Object or null
    + +

    Object.create方法生成的新对象，动态继承了原型。在原型上添加或修改任何方法，会立刻反映在新对象之上。

    +
    1
    2
    3
    4
    5
    var obj1 = { p: 1 };
    var obj2 = Object.create(obj1);

    obj1.p = 2;
    obj2.p // 2  obj2的原型指向obj1，当访问obj2上的p属性时，js引擎会先在obj2本身上找，没找到会去原型上找
    + +

    上面代码中，修改对象原型obj1会影响到实例对象obj2。

    +

    除了对象的原型，Object.create方法还可以接受第二个参数。该参数是一个属性描述对象，它所描述的对象属性，会添加到实例对象，作为该对象自身的属性。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var obj = Object.create({}, {
      p1: { // p1为添加到obj实例对象自身的属性
        value: 123,
        enumerable: true,
        configurable: true,
        writable: true,
      },
      p2: {
        value: 'abc',
        enumerable: true,
        configurable: true,
        writable: true,
      }
    });

    // 等同于
    var obj = Object.create({});
    obj.p1 = 123;
    obj.p2 = 'abc';
    + +

    Object.create方法生成的对象，继承了它的原型对象的构造函数。

    +
    1
    2
    3
    4
    5
    6
    function A() {}
    var a = new A();
    var b = Object.create(a);

    b.constructor === A // true
    b instanceof A // true
    + +

    上面代码中，b对象的原型是a对象，因此继承了a对象的构造函数A。

    +

    4、Object.prototype.isPrototypeOf()判断某个对象是否为参数对象的原型

    实例对象的isPrototypeOf方法，用来判断该对象是否为参数对象的原型。

    +
    1
    2
    3
    4
    5
    6
    var o1 = {};
    var o2 = Object.create(o1);
    var o3 = Object.create(o2);

    o2.isPrototypeOf(o3) // true  判断o2是否为o3的原型
    o1.isPrototypeOf(o3) // true  判断o1是否为o3的原型
    + +

    上面代码中，o1和o2都是o3的原型。这表明只要实例对象处在参数对象的原型链上，isPrototypeOf方法都返回true。

    +
    1
    2
    3
    4
    Object.prototype.isPrototypeOf({}) // true
    Object.prototype.isPrototypeOf([]) // true
    Object.prototype.isPrototypeOf(/xyz/) // true
    Object.prototype.isPrototypeOf(Object.create(null)) // false
    + +

    上面代码中，由于Object.prototype处于原型链的最顶端，所以对各种实例都返回true，只有直接继承自null的对象除外。

    +

    5、Object.prototype.__proto__ 返回该对象的原型，可读写

    实例对象的__proto__属性（前后各两个下划线），返回该对象的原型。该属性可读写。

    +
    1
    2
    3
    var obj = Object.create({x:1}) // 创建实例对象obj，其原型指定为{x:1}
    obj.__proto__ // {x: 1}  实例对象obj的__proto__属性，返回obj的原型
    Object.getPrototypeOf(obj) // {x: 1}
    + +

    上面代码通过Object.create创建实例对象obj，指定其原型为{x:1}，访问obj对象的__proto__属性，返回其原型。

    +
    1
    2
    3
    4
    5
    6
    var obj = {};
    var p = {};

    obj.__proto__ = p; // 原型属性可读写
    Object.getPrototypeOf(obj) === p // true
    obj.__proto__ === Object.getPrototypeOf(obj) //true
    + +

    上面代码通过__proto__属性，将p对象设为obj对象的原型。

    +

    根据语言标准，__proto__属性只有浏览器才需要部署，其他环境可以没有这个属性。它前后的两根下划线，表明它本质是一个内部属性，不应该对使用者暴露。因此，应该尽量少用这个属性，而是用Object.getPrototypeOf()和Object.setPrototypeOf()，进行原型对象的读写操作。

    +

    原型链可以用__proto__很直观地表示。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    var A = {
      name: '张三'
    };
    var B = {
      name: '李四'
    };

    var proto = {
      print: function () {
        console.log(this.name);
      }
    };

    A.__proto__ = proto; // 将A的原型指向proto对象
    B.__proto__ = proto; // 将B的原型指向proto对象

    // 共享print方法，都是在调用proto对象内的print方法
    A.print() // 张三
    B.print() // 李四

    A.print === B.print // true
    A.print === proto.print // true
    B.print === proto.print // true
    + +

    上面代码中，A对象和B对象的原型都是proto对象，它们都共享proto对象的print方法。也就是说，A和B的print方法，都是在调用proto对象的print方法。

    +

    6、获取原型对象方法的比较

    如前所述，__proto__属性指向当前对象的原型对象，即构造函数的prototype属性。

    +
    1
    2
    3
    4
    5
    6
    var obj = new Object();

    obj.__proto__ === Object.prototype
    // true
    obj.__proto__ === obj.constructor.prototype
    // true
    + +

    上面代码首先新建了一个对象obj，它的__proto__属性，指向构造函数（Object或obj.constructor）的prototype属性。

    +

    因此，获取实例对象obj的原型对象，有三种方法。

    +
      +
    • obj.__proto__
      • +
    • obj.constructor.prototype
      • +
    • Object.getPrototypeOf(obj)
      • +
    +

    上面三种方法之中，前两种都不是很可靠。__proto__属性只有浏览器才需要部署，其他环境可以不部署。而obj.constructor.prototype在手动改变原型对象时，可能会失效。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var P = function () {};
    var p = new P();

    var C = function () {};
    C.prototype = p;
    var c = new C();

    c.constructor.prototype === p // false
    + +

    上面代码中，构造函数C的原型对象被改成了p，但是实例对象的c.constructor.prototype却没有指向p。所以，在改变原型对象时，一般要同时设置constructor属性。

    +
    1
    2
    3
    4
    5
    C.prototype = p;
    C.prototype.constructor = C; // 如在构造函数的继承中就使用到这个操作

    var c = new C();
    c.constructor.prototype === p // true
    + +

    因此，推荐使用第三种Object.getPrototypeOf方法，获取原型对象。

    +

    7、Object.getOwnPropertyNames()

    Object.getOwnPropertyNames方法返回一个数组，成员是参数对象本身的所有属性的键名，不包含继承的属性键名。

    +
    1
    2
    Object.getOwnPropertyNames(Date)
    // ["parse", "arguments", "UTC", "caller", "name", "prototype", "now", "length"]
    + +

    上面代码中，Object.getOwnPropertyNames方法返回Date所有自身的属性名。

    +

    对象本身的属性之中，有的是可以遍历的（enumerable），有的是不可以遍历的。Object.getOwnPropertyNames方法返回所有键名，不管是否可以遍历。只获取那些可以遍历的属性，使用Object.keys方法。

    +
    1
    Object.keys(Date) // []
    + +

    上面代码表明，Date对象所有自身的属性，都是不可以遍历的。

    +

    8、Object.prototype.hasOwnProperty()

    对象实例的hasOwnProperty方法返回一个布尔值，用于判断某个属性定义在对象自身，还是定义在原型链上。

    +
    1
    2
    Date.hasOwnProperty('length') // true
    Date.hasOwnProperty('toString') // false
    + +

    上面代码表明，Date.length（构造函数Date可以接受多少个参数）是Date自身的属性，Date.toString是继承的属性。

    +

    另外，hasOwnProperty方法是 JavaScript 之中唯一一个处理对象属性时，不会遍历原型链的方法。

    +

    9、in 运算符和 for…in 循环

    in运算符返回一个布尔值，表示一个对象是否具有某个属性。它不区分该属性是对象自身的属性，还是继承的属性。

    +
    1
    2
    'length' in Date // true
    'toString' in Date // true
    + +

    in运算符常用于检查一个属性是否存在。

    +

    获得对象的所有可遍历属性（不管是自身的还是继承的），可以使用for...in循环。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var o1 = { p1: 123 };

    var o2 = Object.create(o1, { // o2的原型指向o1，并且在o2上定义一个属性p2
      p2: { value: "abc", enumerable: true }
    });

    for (p in o2) {
      console.info(p);
    }
    // p2
    // p1    继承的属性
    + +

    上面代码中，对象o2的p2属性是自身的，p1属性是继承的。这两个属性都会被for...in循环遍历。

    +

    为了在for...in循环中获得对象自身的属性，可以采用hasOwnProperty方法判断一下。

    +
    1
    2
    3
    4
    5
    for ( var name in object ) {
      if ( object.hasOwnProperty(name) ) { // 过滤掉非自身的属性
        /* loop code */
      }
    }
    + +

    获得对象的所有属性（不管是自身的还是继承的，也不管是否可枚举），可以使用下面的函数。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function inheritedPropertyNames(obj) {
      var props = {};
      while(obj) {
         // 获取obj对象的所有属性，包括不可枚举的，
        Object.getOwnPropertyNames(obj).forEach(function(p) {
          props[p] = true;
        });
        obj = Object.getPrototypeOf(obj); // 获取对象的原型
      }
        console.log(props)
      return Object.getOwnPropertyNames(props);
    }
    + +

    上面代码依次获取obj对象的每一级原型对象“自身”的属性，从而获取obj对象的“所有”属性，不管是否可遍历。

    +

    下面是一个例子，列出Date对象的所有属性。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    inheritedPropertyNames(Date)
    // [
    //  "caller",
    //  "constructor",
    //  "toString",
    //  "UTC",
    //  ...
    // ]
    + +

    10、对象的拷贝

    如果要拷贝一个对象，需要做到下面两件事情。

    +
      +
    • 确保拷贝后的对象，与原对象具有同样的原型。
      • +
    • 确保拷贝后的对象，与原对象具有同样的实例属性。
      • +
    +

    下面就是根据上面两点，实现的对象拷贝函数。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function copyObject(orig) { // 拷贝对象函数
        // 创建一个新对象，新对象的原型指向旧对象的原型
      var copy = Object.create(Object.getPrototypeOf(orig));
      copyOwnPropertiesFrom(copy, orig);
      return copy;
    }

    function copyOwnPropertiesFrom(target, source) { // 拷贝旧对象的实例属性
      Object
        .getOwnPropertyNames(source)
        .forEach(function (propKey) {
          // 获取每个属性的 属性描述对象
          var desc = Object.getOwnPropertyDescriptor(source, propKey);
          // 定义属性，给target对象定义propKey属性，其属性描述对象是desc
          Object.defineProperty(target, propKey, desc);
        });
      return target;
    }
    + +

    另一种更简单的写法，是利用 ES2017 才引入标准的Object.getOwnPropertyDescriptors方法。

    +
    1
    2
    3
    4
    5
    6
    function copyObject(orig) {
      return Object.create(
        Object.getPrototypeOf(orig),
        Object.getOwnPropertyDescriptors(orig)
      );
    }
    + +

    五、严格模式

    除了正常的运行模式，JavaScript 还有第二种运行模式：严格模式（strict mode）。顾名思义，这种模式采用更加严格的 JavaScript 语法。

    +

    同样的代码，在正常模式和严格模式中，可能会有不一样的运行结果。一些在正常模式下可以运行的语句，在严格模式下将不能运行。

    +

    1、设计目的

    早期的 JavaScript 语言有很多设计不合理的地方，但是为了兼容以前的代码，又不能改变老的语法，只能不断添加新的语法，引导程序员使用新语法。

    +

    严格模式是从 ES5 进入标准的，主要目的有以下几个。

    +
      +
    • 明确禁止一些不合理、不严谨的语法，减少 JavaScript 语言的一些怪异行为。
      • +
    • 增加更多报错的场合，消除代码运行的一些不安全之处，保证代码运行的安全。
      • +
    • 提高编译器效率，增加运行速度。
      • +
    • 为未来新版本的 JavaScript 语法做好铺垫。
      • +
    +

    总之，严格模式体现了 JavaScript 更合理、更安全、更严谨的发展方向。

    +

    2、启用方法

    1
    'use strict';
    + +
    +

    更多关于严格模式内容：https://wangdoc.com/javascript/oop/strict.html

    +
    +

    文档

    学习文档：https://wangdoc.com/javascript/

    +
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/c263b14e4d89/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    JavaScript
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    目录
    1. 1. 面向对象编程
      1. 1.1. 一、实例对象与new命令
        1. 1.1.1. 1、对象是什么
        2. 1.1.2. 2、构造函数
        3. 1.1.3. 3、new命令
          1. 1.1.3.1. 基本用法
          2. 1.1.3.2. new 命令的原理
          3. 1.1.3.3. new.target 属性
        4. 1.1.4. 4、Object.create()创建实例对象
      2. 1.2. 二、this关键字
        1. 1.2.1. 1、涵义
        2. 1.2.2. 2、实质
        3. 1.2.3. 3、使用场合
          1. 1.2.3.1. （1）全局环境
          2. 1.2.3.2. （2）构造函数
          3. 1.2.3.3. （3）对象的方法
        4. 1.2.4. 4、使用注意点
          1. 1.2.4.1. （1）避免多层 this
          2. 1.2.4.2. （2）避免数组处理方法中的 this
          3. 1.2.4.3. （3）避免回调函数中的 this
        5. 1.2.5. 5、绑定 this 的方法
          1. 1.2.5.1. Function.prototype.call()
            1. 1.2.5.1.1. 语法
            2. 1.2.5.1.2. 应用：调用对象的原生方法
          2. 1.2.5.2. Function.prototype.apply()
            1. 1.2.5.2.1. 语法
            2. 1.2.5.2.2. 应用：
            3. 1.2.5.2.3. （1）获取数组最大/最小元素
            4. 1.2.5.2.4. （2）将数组的空元素变为undefined
            5. 1.2.5.2.5. （3）转换类似数组的对象
            6. 1.2.5.2.6. （4）绑定回调函数的对象
          3. 1.2.5.3. Function.prototype.bind()
            1. 1.2.5.3.1. 语法
            2. 1.2.5.3.2. bind要注意的点：
            3. 1.2.5.3.3. （1）每一次返回一个新函数
            4. 1.2.5.3.4. （2）结合回调函数使用
            5. 1.2.5.3.5. （3）结合call方法使用（改写数组方法调用形式）
          4. 1.2.5.4. 总结，call()、apply()、bind()的区别
      3. 1.3. 三、对象的继承
        1. 1.3.1. 1、原型对象概述
          1. 1.3.1.1. （1）构造函数的缺点
          2. 1.3.1.2. （2）prototype 属性的作用
          3. 1.3.1.3. （3）原型链
          4. 1.3.1.4. （4）constructor 属性
            1. 1.3.1.4.1. 作用
        2. 1.3.2. 2、instanceof 运算符
          1. 1.3.2.1. 语法
          2. 1.3.2.2. 用处
        3. 1.3.3. 3、构造函数的继承
        4. 1.3.4. 4、多重继承
        5. 1.3.5. 5、模块
          1. 1.3.5.1. （1）基本的实现方法
          2. 1.3.5.2. （2）封装私有变量：
            1. 1.3.5.2.1. （2-1）构造函数的写法
            2. 1.3.5.2.2. （2-2）立即执行函数的写法
          3. 1.3.5.3. （3）模块的放大模式（向模块添加新方法）
          4. 1.3.5.4. （4）输入全局变量（保证独立性）
      4. 1.4. 四、Object 对象的相关方法
        1. 1.4.1. 1、Object.getPrototypeOf() 获取原型对象
        2. 1.4.2. 2、Object.setPrototypeOf() 设置原型对象
          1. 1.4.2.0.1. 使用Object.setPrototypeOf方法模拟new命令
      5. 1.4.3. 3、 Object.create() 创建实例对象，指向目标对象的原型
        1. 1.4.3.0.1. 内部实现原理
    2. 1.4.4. 4、Object.prototype.isPrototypeOf()判断某个对象是否为参数对象的原型
    3. 1.4.5. 5、Object.prototype.__proto__ 返回该对象的原型，可读写
    4. 1.4.6. 6、获取原型对象方法的比较
    5. 1.4.7. 7、Object.getOwnPropertyNames()
    6. 1.4.8. 8、Object.prototype.hasOwnProperty()
    7. 1.4.9. 9、in 运算符和 for…in 循环
    8. 1.4.10. 10、对象的拷贝
  • 1.5. 五、严格模式
    1. 1.5.1. 1、设计目的
    2. 1.5.2. 2、启用方法
  • 1.6. 文档
    • 最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    \ No newline at end of file diff --git a/post/d358c5c77f42/index.html b/post/d358c5c77f42/index.html new file mode 100644 index 00000000..41c698be --- /dev/null +++ b/post/d358c5c77f42/index.html @@ -0,0 +1,282 @@ +CSS教程和技巧收藏 | YT 前端日记 + + + + + + + + + + + + +

    CSS教程和技巧收藏

    发表于|更新于|前端
    |字数总计:108|阅读时长:1分钟|阅读量:|评论数:
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/d358c5c77f42/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    CSS
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    \ No newline at end of file diff --git a/post/d42987132638/index.html b/post/d42987132638/index.html new file mode 100644 index 00000000..3e848a0a --- /dev/null +++ b/post/d42987132638/index.html @@ -0,0 +1,2060 @@ +JavaScript内置对象 | YT 前端日记 + + + + + + + + + + + + +

    JavaScript内置对象

    发表于|更新于|前端
    |字数总计:40.7k|阅读时长:157分钟|阅读量:|评论数:

    内置对象篇

    一、Object对象

    1、概述

    JavaScript 原生提供Object对象（注意起首的O是大写），本章介绍该对象原生的各种方法。

    +

    JavaScript 的所有其他对象都继承自Object对象，即那些对象都是Object的实例。

    +

    Object对象的原生方法分成两类：Object本身的方法与Object的实例方法。

    +

    （1）Object对象本身的方法

    +

    所谓“本身的方法”就是直接定义在Object对象的方法。

    +
    1
    Object.print = function (o) { console.log(o) };
    + +

    上面代码中，print方法就是直接定义在Object对象上。

    +

    （2）Object的实例方法

    +

    所谓实例方法就是定义在Object原型对象Object.prototype上的方法。它可以被Object实例直接使用。

    +
    1
    2
    3
    4
    5
    6
    Object.prototype.print = function () {
      console.log(this);
    };

    var obj = new Object();
    obj.print() // Object
    + +

    上面代码中，Object.prototype定义了一个print方法，然后生成一个Object的实例obj。obj直接继承了Object.prototype的属性和方法，可以直接使用obj.print调用print方法。也就是说，obj对象的print方法实质上就是调用Object.prototype.print方法。

    +

    关于原型对象object.prototype的详细解释，参见《面向对象编程》章节。这里只要知道，凡是定义在Object.prototype对象上面的属性和方法，将被所有实例对象共享就可以了。

    +

    以下先介绍Object作为函数的用法，然后再介绍Object对象的原生方法，分成对象自身的方法（又称为“静态方法”）和实例方法两部分。

    +

    2、Object() 当作工具方法（不通过new创建）

    Object()本身是一个函数，可以当作工具方法使用，将任意值转为对象。这个方法常用于保证某个值一定是对象。

    +

    如果参数为空（或者为undefined和null），Object()返回一个空对象。

    +
    1
    2
    3
    4
    5
    var obj = Object() // obj => {}
    // 等同于
    obj = Object(undefined)
    obj = Object(null)
    obj instanceof Object // true
    + +

    上面代码的含义，是将undefined和null转为对象，结果得到了一个空对象obj。

    +

    instanceof运算符用来验证，一个对象是否为指定的构造函数的实例。obj instanceof Object返回true，就表示obj对象是Object的实例。

    +

    如果参数是原始类型的值，Object方法将其转为对应的包装对象的实例（参见《原始类型的包装对象》一章）。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 包装对象实例

    var obj = Object(1) // obj => Number{1}
    obj instanceof Object // true     in s tan ce of 判断对象类型
    obj instanceof Number // true


    var obj = Object('foo') // obj => String{‘foo’}
    obj instanceof Object // true
    obj instanceof String // true

    var obj = Object(true) // obj => Boolean{‘foo’}
    obj instanceof Object // true
    obj instanceof Boolean // true

    + +

    上面代码中，Object函数的参数是各种原始类型的值，转换成对象就是原始类型值对应的包装对象。

    +

    如果Object方法的参数是一个对象，它总是返回该对象，即不用转换。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var arr = []
    var obj = Object(arr) // obj => []
    obj === arr // true


    var value = {}
    var obj = Object(value) // obj => {}
    obj === value // true


    var fn = function() {}
    var obj = Object(fn) // obj => function(){}
    obj === fn // true
    + + + +

    利用这一点，可以写一个判断变量是否为对象的函数。

    +
    1
    2
    3
    4
    5
    6
    7
    function isObject(value){
        return value === Object(value)
    }

    isObject([]) // true
    isObject({}) // true
    isObject('123') // false
    + + + +

    3、Object构造函数（通过new创建）

    Object构造函数的首要用途，是直接通过它来生成新对象。

    +
    1
    var obj = new Object() // 等同于 var obj = {}
    + +
    +

    注意，通过var obj = new Object()的写法生成新对象，与字面量的写法var obj = {}是等价的。或者说，后者只是前者的一种简便写法。

    +
    +

    Object构造函数的用法与工具方法很相似，几乎一模一样。使用时，可以接受一个参数，如果该参数是一个对象，则直接返回这个对象；如果是一个原始类型的值，则返回该值对应的包装对象（详见《包装对象》一章）。

    +
    1
    2
    3
    4
    5
    6
    var o1 = {a: 1};
    var o2 = new Object(o1);
    o1 === o2 // true

    var obj = new Object(123);
    obj instanceof Number // true
    + +

    虽然用法相似，但是Object(value)与new Object(value)两者的语义是不同的，Object(value)表示将value转成一个对象，new Object(value)则表示新生成一个对象，它的值是value。

    +

    4、Object 的静态方法

    所谓“静态方法”，是指部署在Object对象自身的方法。

    +

    Object.keys()

    Object.keys()方法和Object.getOwnPropertyNames()方法都用来遍历对象的属性。

    +

    Object.keys()方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名。

    +
    1
    2
    3
    4
    5
    6
    var obj = {
        p1: 123,
        p2: 456
    }

    Object.keys(obj) // ['p1','p2']  注意是属性名
    + +

    Object.getOwnPropertyNames()

    Object.getOwnPropertyNames方法与Object.keys类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。

    +
    1
    2
    3
    4
    5
    6
    var obj = {
        p1: 123,
        p2: 456
    }
    Object.getOwnPropertyNames(obj) // ['p1','p2']
    // getOwnPropertyNames 中文含义：获取自己的属性名
    + +

    对于一般的对象来说，Object.keys()和Object.getOwnPropertyNames()返回的结果是一样的。只有涉及不可枚举属性时，才会有不一样的结果。Object.keys方法只返回可枚举的属性（详见《对象属性的描述对象》一章），Object.getOwnPropertyNames方法还返回不可枚举的属性名。

    +
    1
    2
    3
    var a = ['hello','world']
    Object.keys(a) // ['0',‘1’]  如果对象是数组时返回索引字符串
    Object.getOwnPropertyNames(a) // [‘0’,‘1’,'length']
    + +

    上面代码中，数组的length属性是不可枚举的属性，所以只出现在Object.getOwnPropertyNames方法的返回结果中。

    +

    由于 JavaScript 没有提供计算对象属性个数的方法，所以可以用这两个方法代替。

    +

    获取对象属性个数长度

    +
    1
    2
    3
    4
    5
    6
    7
    var obj = {
      p1: 123,
      p2: 456
    };

    Object.keys(obj).length // 2
    Object.getOwnPropertyNames(obj).length // 2
    + +

    一般情况下，几乎总是使用Object.keys方法，遍历对象的属性。

    +

    Object的其他静态方法

    除了上面提到的两个方法，Object还有不少其他静态方法，将在后文逐一详细介绍。

    +

    （1）对象属性模型的相关方法

      +
    • Object.getOwnPropertyDescriptor()：获取某个属性的描述对象。
      • +
    • Object.defineProperty()：通过描述对象，定义某个属性。
      • +
    • Object.defineProperties()：通过描述对象，定义多个属性。
      • +
    +

    （2）控制对象状态的方法

      +
    • Object.preventExtensions()：防止对象扩展。
      • +
    • Object.isExtensible()：判断对象是否可扩展。
      • +
    • Object.seal()：禁止对象配置。
      • +
    • Object.isSealed()：判断一个对象是否可配置。
      • +
    • Object.freeze()：冻结一个对象。
      • +
    • Object.isFrozen()：判断一个对象是否被冻结。
      • +
    +

    （3）原型链相关方法

      +
    • Object.create()：该方法可以指定原型对象和属性，返回一个新的对象。
      • +
    • Object.getPrototypeOf()：获取对象的Prototype对象。
      • +
    +

    、

    +

    有部分方法为列入此文档，更多方法详情：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object

    +

    5、Object 的实例方法

    除了静态方法，还有不少方法定义在Object.prototype对象。它们称为实例方法，所有Object的实例对象都继承了这些方法。

    +

    Object实例对象的方法，主要有以下六个。

    +
      +
    • Object.prototype.valueOf()：返回当前对象对应的值。
      • +
    • Object.prototype.toString()：返回当前对象对应的字符串形式。
      • +
    • Object.prototype.toLocaleString()：返回当前对象对应的本地字符串形式。
      • +
    • Object.prototype.hasOwnProperty()：判断某个属性是否为当前对象自身的属性，还是继承自原型对象的属性。
      • +
    • Object.prototype.isPrototypeOf()：判断当前对象是否为另一个对象的原型。
      • +
    • Object.prototype.propertyIsEnumerable()：判断某个属性是否可枚举。
      • +
    +

    本节介绍前四个方法，另外两个方法将在后文相关章节介绍。

    +

    Object.prototype.valueOf()

    valueOf方法的作用是返回一个对象的“值”，默认情况下返回对象本身。

    +
    1
    2
    var obj = new Object()
    obj.valueof() === obj //true
    + +

    上面代码比较obj.valueOf()与obj本身，两者是一样的。

    +

    valueOf方法的主要用途是，JavaScript 自动类型转换时会默认调用这个方法（详见《数据类型转换》一章）。

    +
    1
    2
    var obj = Object()
    1+obj //"1[object Object]"
    + +

    上面代码将对象obj与数字1相加，这时 JavaScript 就会自动调用valueOf()方法，求出obj的值再与1相加。所以，如果自定义valueOf方法，就可以得到想要的结果。

    +
    1
    2
    3
    4
    5
    var obj = new Object()
    obj.valueof = function () {
        return 2
    }
    1 + obj // 3
    + +

    上面代码自定义了obj对象的valueOf方法，于是1 + obj就得到了3。这种方法就相当于用自定义的obj.valueOf，覆盖Object.prototype.valueOf。

    +

    Object.prototype.toString()

    toString方法的作用是返回一个对象的字符串形式，默认情况下返回类型字符串。

    +
    1
    2
    3
    4
    5
    var o1 = new Object()
    o1.toString() // "[object Object]"

    var o2 = {a:2}
    o2.toString() // "[object Object]"
    + +

    上面代码表示，对于一个对象调用toString方法，会返回字符串[object Object]，该字符串说明对象的类型。

    +

    字符串[object Object]本身没有太大的用处，但是通过自定义toString方法，可以让对象在自动类型转换时，得到想要的字符串形式。

    +
    1
    2
    3
    4
    5
    6
    var obj = new Object()

    obj.toString = function() {
        return 'hello'
    }
    obj + ' '+ 'world' // "hello world"
    + +

    上面代码表示，当对象用于字符串加法时，会自动调用toString方法。由于自定义了toString方法，所以返回字符串hello world。

    +

    数组、字符串、函数、Date 对象都分别部署了自定义的toString方法，覆盖了Object.prototype.toString方法。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    [1, 2, 3].toString() // "1,2,3"

    '123'.toString() // "123"

    (function () {
      return 123;
    }).toString()
    // "function () {
    //   return 123;
    // }"

    (new Date()).toString()
    // "Tue May 10 2016 09:11:31 GMT+0800 (CST)"
    + +

    上面代码中，数组、字符串、函数、Date 对象调用toString方法，并不会返回[object Object]，因为它们都自定义了toString方法，覆盖原始方法。

    +

    toString() 的应用：判断数据类型

    Object.prototype.toString方法返回对象的类型字符串，因此可以用来判断一个值的类型。

    +
    1
    2
    var obj = {};
    obj.toString() // "[object Object]"
    + +

    上面代码调用空对象的toString方法，结果返回一个字符串object Object，其中第二个Object表示该值的构造函数。这是一个十分有用的判断数据类型的方法。

    +

    由于实例对象可能会自定义toString方法，覆盖掉Object.prototype.toString方法，所以为了得到类型字符串，最好直接使用Object.prototype.toString方法。通过函数的call方法，可以在任意值上调用这个方法，帮助我们判断这个值的类型。

    +
    1
    Object.prototype.toString.call(value)
    + +

    上面代码表示对value这个值调用Object.prototype.toString方法。

    +

    不同数据类型的Object.prototype.toString方法返回值如下。

    +
      +
    • 数值：返回[object Number]。
      • +
    • 字符串：返回[object String]。
      • +
    • 布尔值：返回[object Boolean]。
      • +
    • undefined：返回[object Undefined]。
      • +
    • null：返回[object Null]。
      • +
    • 数组：返回[object Array]。
      • +
    • arguments 对象：返回[object Arguments]。
      • +
    • 函数：返回[object Function]。
      • +
    • Error 对象：返回[object Error]。
      • +
    • Date 对象：返回[object Date]。
      • +
    • RegExp 对象：返回[object RegExp]。
      • +
    • 其他对象：返回[object Object]。
      • +
    +

    这就是说，Object.prototype.toString可以看出一个值到底是什么类型。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    Object.prototype.toString.call(2) // "[object Number]"
    Object.prototype.toString.call('') // "[object String]"
    Object.prototype.toString.call(true) // "[object Boolean]"
    Object.prototype.toString.call(undefined) // "[object Undefined]"
    Object.prototype.toString.call(null) // "[object Null]"
    Object.prototype.toString.call(Math) // "[object Math]"
    Object.prototype.toString.call({}) // "[object Object]"
    Object.prototype.toString.call([]) // "[object Array]"
    + +

    利用这个特性，可以写出一个比typeof运算符更准确的类型判断函数。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var type = function (o){
        var s = Object.prototype.toString.call(o)
        return s.match(/\[object (.*?)\]/)[1].toLowerCase()
    }
    type({}); // "object"
    type([]); // "array"
    type(5); // "number"
    type(null); // "null"
    type(); // "undefined"
    type(/abcd/); // "regex"
    type(new Date()); // "date"
    + +

    在上面这个type函数的基础上，还可以加上专门判断某种类型数据的方法。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    var type = function (o){
      var s = Object.prototype.toString.call(o);
      return s.match(/\[object (.*?)\]/)[1].toLowerCase();
    };

    ['Null',
     'Undefined',
     'Object',
     'Array',
     'String',
     'Number',
     'Boolean',
     'Function',
     'RegExp'
    ].forEach(function (t) {
      type['is' + t] = function (o) {
        return type(o) === t.toLowerCase();
      };
    });

    type.isObject({}) // true
    type.isNumber(NaN) // true
    type.isRegExp(/abc/) // true
    + +

    Object.prototype.toLocaleString()

    Object.prototype.toLocaleString方法与toString的返回结果相同，也是返回一个值的字符串形式。

    +
    1
    2
    3
    var obj = {};
    obj.toString(obj) // "[object Object]"
    obj.toLocaleString(obj) // "[object Object]"
    + +

    这个方法的主要作用是留出一个接口，让各种不同的对象实现自己版本的toLocaleString，用来返回针对某些地域的特定的值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var person = {
      toString: function () {
        return 'Henry Norman Bethune';
      },
      toLocaleString: function () {
        return '白求恩';
      }
    };

    person.toString() // Henry Norman Bethune
    person.toLocaleString() // 白求恩
    + +

    上面代码中，toString()方法返回对象的一般字符串形式，toLocaleString()方法返回本地的字符串形式。

    +

    目前，主要有三个对象自定义了toLocaleString方法。

    +
      +
    • Array.prototype.toLocaleString()
      • +
    • Number.prototype.toLocaleString()
      • +
    • Date.prototype.toLocaleString()
      • +
    +

    举例来说，日期的实例对象的toString和toLocaleString返回值就不一样，而且toLocaleString的返回值跟用户设定的所在地域相关。

    +
    1
    2
    3
    var date = new Date();
    date.toString() // "Sun Oct 06 2019 15:50:04 GMT+0800 (中国标准时间)"
    date.toLocaleString() // "2019/10/6 下午3:50:04"
    + +

    Object.prototype.hasOwnProperty()

    Object.prototype.hasOwnProperty方法接受一个字符串作为参数，返回一个布尔值，表示该实例对象自身是否具有该属性。

    +

    检查对象是否包含有某个属性，返回布尔值

    +
    1
    2
    3
    4
    5
    6
    var obj = {
      p: 123
    };

    obj.hasOwnProperty('p') // true
    obj.hasOwnProperty('toString') // false
    + +

    上面代码中，对象obj自身具有p属性，所以返回true。toString属性是继承的，所以返回false。

    +

    二、属性描述对象

    1、概述

    JavaScript 提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”（attributes object）。每个属性都有自己对应的属性描述对象，保存该属性的一些元信息。

    +

    下面是属性描述对象的一个例子。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    {
      value: 123, // 该属性的属性值，默认undefined
      writable: false, // 属性值是否可改变，默认为true
      enumerable: true, // 该属性是否可遍历，默认为true
      configurable: false, //属性描述对象的可配置性,默认为true
      get: undefined, // 该属性的取值函数（getter），默认为undefined
      set: undefined // 该属性的存值函数（setter），默认为undefined
    }
    + +

    属性描述对象提供6个元属性。

    +

    （1）value

    +

    value是该属性的属性值，默认为undefined。

    +

    （2）writable

    +

    writable是一个布尔值，表示属性值（value）是否可改变（即是否可写），默认为true。

    +

    （3）enumerable

    +

    enumerable是一个布尔值，表示该属性是否可遍历，默认为true。如果设为false，会使得某些操作（比如for...in循环、Object.keys()）跳过该属性。

    +

    （4）configurable

    +

    configurable是一个布尔值，表示可配置性，默认为true。如果设为false，将阻止某些操作改写该属性，比如无法删除该属性，也不得改变该属性的属性描述对象（value属性除外）。也就是说，configurable属性控制了属性描述对象的可写性。

    +

    （5）get

    +

    get是一个函数，表示该属性的取值函数（getter），默认为undefined。

    +

    （6）set

    +

    set是一个函数，表示该属性的存值函数（setter），默认为undefined。

    +

    2、Object.getOwnPropertyDescriptor()

    Object.getOwnPropertyDescriptor()方法可以获取属性描述对象。它的第一个参数是目标对象，第二个参数是一个字符串，对应目标对象的某个属性名。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var obj = {p:'a'}

    Object.getOwnPropertyDescriptor(obj,'p')
    // Object { value: "a",  // 属性值'a'
    //   writable: true, // 属性值'a' 可改写
    //   enumerable: true, // 'p'属性可被遍历
    //   configurable: true // 属性描述对象的可配置性
    // }


    // getOwnPropertyDescriptor 中文含义：获取自己的属性描述符
    + +

    注意，Object.getOwnPropertyDescriptor()方法只能用于对象自身的属性，不能用于继承的属性。

    +
    1
    2
    3
    4
    var obj = { p: 'a' };

    Object.getOwnPropertyDescriptor(obj, 'toString')
    // undefined
    + +

    上面代码中，toString是obj对象继承的属性，Object.getOwnPropertyDescriptor()无法获取。

    +

    3、Object.getOwnPropertyNames()

    Object.getOwnPropertyNames方法返回一个数组，成员是参数对象自身的全部属性的属性名，不管该属性是否可遍历。

    +

    返回对象的全部属性名

    +
    1
    2
    3
    4
    5
    6
    7
    var obj = Object.defineProperties({}, {
      p1: { value: 1, enumerable: true },
      p2: { value: 2, enumerable: false }
    });

    Object.getOwnPropertyNames(obj)
    // ["p1", "p2"]
    + +

    上面代码中，obj.p1是可遍历的，obj.p2是不可遍历的。Object.getOwnPropertyNames会将它们都返回。

    +

    这跟Object.keys的行为不同，Object.keys只返回对象自身的可遍历属性的全部属性名。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    Object.keys([]) // []
    Object.getOwnPropertyNames([]) // [ 'length' ]

    Object.keys(Object.prototype) // []
    Object.getOwnPropertyNames(Object.prototype)
     /*[
    	"constructor",   // 构造函数
        "__defineGetter__",
        "__defineSetter__",
        "hasOwnProperty",  // 检测属性名
        "__lookupGetter__",
        "__lookupSetter__",
        "isPrototypeOf",
        "propertyIsEnumerable",
        "toString",  // 返回类型字符串
        "valueOf",
        "__proto__",  // 原型链
        "toLocaleString"
       ]
    */
    + +

    上面代码中，数组自身的length属性是不可遍历的，Object.keys不会返回该属性。第二个例子的Object.prototype也是一个对象，所有实例对象都会继承它，它自身的属性都是不可遍历的。

    +

    4、Object.defineProperty()，Object.defineProperties()

    Object.defineProperty()方法允许通过属性描述对象，定义或修改一个属性，然后返回修改后的对象，它的用法如下。

    +
    1
    Object.defineProperty(object, propertyName, attributesObject)
    + +

    Object.defineProperty方法接受三个参数，依次如下。

    +
      +
    • object：属性所在的对象
      • +
    • propertyName：字符串，表示属性名
      • +
    • attributesObject：属性描述对象
      • +
    +

    举例来说，定义obj.p可以写成下面这样。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var obj = Object.defineProperty({}, 'p', {
      value: 123,
      writable: false, // 设置为false，无法被改写
      enumerable: true, // 可遍历
      configurable: false // 属性描述不可再被配置
    });

    obj.p // 123

    obj.p = 246; // 由于writable为false,改写无效
    obj.p // 123
    + +

    上面代码中，Object.defineProperty()方法定义了obj.p属性。由于属性描述对象的writable属性为false，所以obj.p属性不可写。注意，这里的Object.defineProperty方法的第一个参数是{}（一个新建的空对象），p属性直接定义在这个空对象上面，然后返回这个对象，这是Object.defineProperty()的常见用法。

    +

    如果属性已经存在，Object.defineProperty()方法相当于更新该属性的属性描述对象。

    +

    如果一次性定义或修改多个属性，可以使用Object.defineProperties()方法。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var obj = Object.defineProperties({}, {
      p1: { value: 123, enumerable: true },
      p2: { value: 'abc', enumerable: true },
      p3: { get: function () { return this.p1 + this.p2 },
        enumerable:true,
        configurable:true
      }
    });

    obj.p1 // 123
    obj.p2 // "abc"
    obj.p3 // "123abc"
    + +

    上面代码中，Object.defineProperties()同时定义了obj对象的三个属性。其中，p3属性定义了取值函数get，即每次读取该属性，都会调用这个取值函数。

    +

    注意，一旦定义了取值函数get（或存值函数set），就不能将writable属性设为true，或者同时定义value属性，否则会报错。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var obj = {};

    Object.defineProperty(obj, 'p', {
      value: 123,
      get: function() { return 456; }
    });
    // TypeError: Invalid property.
    // A property cannot both have accessors and be writable or have a value

    Object.defineProperty(obj, 'p', {
      writable: true,
      get: function() { return 456; }
    });
    // TypeError: Invalid property descriptor.
    // Cannot both specify accessors and a value or writable attribute
    + +

    上面代码中，同时定义了get属性和value属性，以及将writable属性设为true，就会报错。

    +

    Object.defineProperty()和Object.defineProperties()参数里面的属性描述对象，writable、configurable、enumerable这三个属性的默认值都为false。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var obj = {};
    Object.defineProperty(obj, 'foo', {});
    Object.getOwnPropertyDescriptor(obj, 'foo')
    // {  // 默认值
    //   value: undefined,
    //   writable: false,
    //   enumerable: false,
    //   configurable: false
    // }
    + +

    上面代码中，定义obj.foo时用了一个空的属性描述对象，就可以看到各个元属性的默认值。

    +

    5、Object.prototype.propertyIsEnumerable()

    实例对象的propertyIsEnumerable()方法返回一个布尔值，用来判断某个属性是否可遍历。注意，这个方法只能用于判断对象自身的属性，对于继承的属性一律返回false。

    +
    1
    2
    3
    4
    5
    var obj = {};
    obj.p = 123;

    obj.propertyIsEnumerable('p') // true
    obj.propertyIsEnumerable('toString') // false
    + +

    上面代码中，obj.p是可遍历的，而obj.toString是继承的属性。

    +

    6、元属性

    属性描述对象的各个属性称为“元属性”，因为它们可以看作是控制属性的属性。

    +

    value目标属性的值

    value属性是目标属性的值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var obj = {};
    obj.p = 123;

    Object.getOwnPropertyDescriptor(obj, 'p').value
    // 123

    Object.defineProperty(obj, 'p', { value: 246 });
    obj.p // 246
    + +

    上面代码是通过value属性，读取或改写obj.p的例子。

    +

    writable可写性

    writable属性是一个布尔值，决定了目标属性的值（value）是否可以被改变。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var obj = {};

    Object.defineProperty(obj, 'a', {
      value: 37,
      writable: false
    });

    obj.a // 37
    obj.a = 25; // 可写性为false，值无法被修改
    obj.a // 37
    + +

    上面代码中，obj.a的writable属性是false。然后，改变obj.a的值，不会有任何效果。

    +

    注意，正常模式下，对writable为false的属性赋值不会报错，只会默默失败。但是，严格模式下会报错，即使对a属性重新赋予一个同样的值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    'use strict';
    var obj = {};

    Object.defineProperty(obj, 'a', {
      value: 37,
      writable: false
    });

    obj.a = 37;
    // Uncaught TypeError: Cannot assign to read only property 'a' of object
    + +

    上面代码是严格模式，对obj.a任何赋值行为都会报错。

    +

    如果原型对象的某个属性的writable为false，那么子对象将无法自定义这个属性。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var proto = Object.defineProperty({}, 'foo', {
      value: 'a',
      writable: false
    });

    var obj = Object.create(proto); // obj对象继承proto对象

    obj.foo = 'b';
    obj.foo // 'a'
    + +

    上面代码中，proto是原型对象，它的foo属性不可写。obj对象继承proto，也不可以再自定义这个属性了。如果是严格模式，这样做还会抛出一个错误。

    +

    但是，有一个规避方法，就是通过覆盖属性描述对象，绕过这个限制。原因是这种情况下，原型链会被完全忽视。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var proto = Object.defineProperty({}, 'foo', {
      value: 'a',
      writable: false
    });

    var obj = Object.create(proto);
    Object.defineProperty(obj, 'foo', {
      value: 'b'
    });

    obj.foo // "b"
    + + + +

    enumerable可遍历性

    enumerable（可遍历性）返回一个布尔值，表示目标属性是否可遍历。

    +

    JavaScript 的早期版本，for...in循环是基于in运算符的。我们知道，in运算符不管某个属性是对象自身的还是继承的，都会返回true。

    +
    1
    2
    var obj = {};
    'toString' in obj // true
    + +

    上面代码中，toString不是obj对象自身的属性，但是in运算符也返回true，这导致了toString属性也会被for...in循环遍历。

    +

    这显然不太合理，后来就引入了“可遍历性”这个概念。只有可遍历的属性，才会被for...in循环遍历，同时还规定toString这一类实例对象继承的原生属性，都是不可遍历的，这样就保证了for...in循环的可用性。

    +

    具体来说，如果一个属性的enumerable为false，下面三个操作不会取到该属性。

    +
      +
    • for..in循环
      • +
    • Object.keys方法
      • +
    • JSON.stringify方法
      • +
    +

    因此，enumerable可以用来设置“秘密”属性。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var obj = {};

    Object.defineProperty(obj, 'x', {
      value: 123,
      enumerable: false
    });

    obj.x // 123

    for (var key in obj) {
      console.log(key);
    }
    // undefined

    Object.keys(obj)  // []
    JSON.stringify(obj) // "{}"
    + +

    上面代码中，obj.x属性的enumerable为false，所以一般的遍历操作都无法获取该属性，使得它有点像“秘密”属性，但不是真正的私有属性，还是可以直接获取它的值。

    +

    注意，for...in循环包括继承的属性，Object.keys方法不包括继承的属性。如果需要获取对象自身的所有属性，不管是否可遍历，可以使用Object.getOwnPropertyNames方法。

    +

    另外，JSON.stringify方法会排除enumerable为false的属性，有时可以利用这一点。如果对象的 JSON 格式输出要排除某些属性，就可以把这些属性的enumerable设为false。

    +

    configurable可配置性

    configurable(可配置性）返回一个布尔值，决定了是否可以修改属性描述对象。也就是说，configurable为false时，value、writable、enumerable和configurable都不能被修改了。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    var obj = Object.defineProperty({}, 'p', {
      value: 1,
      writable: false,
      enumerable: false,
      configurable: false
    });

    Object.defineProperty(obj, 'p', {value: 2})
    // TypeError: Cannot redefine property: p

    Object.defineProperty(obj, 'p', {writable: true})
    // TypeError: Cannot redefine property: p

    Object.defineProperty(obj, 'p', {enumerable: true})
    // TypeError: Cannot redefine property: p

    Object.defineProperty(obj, 'p', {configurable: true})
    // TypeError: Cannot redefine property: p
    + +

    上面代码中，obj.p的configurable为false。然后，改动value、writable、enumerable、configurable，结果都报错。

    +

    注意，writable只有在false改为true会报错，true改为false是允许的。

    +
    1
    2
    3
    4
    5
    6
    7
    var obj = Object.defineProperty({}, 'p', {
      writable: true,
      configurable: false
    });

    Object.defineProperty(obj, 'p', {writable: false})
    // 修改成功
    + +

    至于value，只要writable和configurable有一个为true，就允许改动。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var o1 = Object.defineProperty({}, 'p', {
      value: 1,
      writable: true,
      configurable: false
    });

    Object.defineProperty(o1, 'p', {value: 2})
    // 修改成功

    var o2 = Object.defineProperty({}, 'p', {
      value: 1,
      writable: false,
      configurable: true
    });

    Object.defineProperty(o2, 'p', {value: 2})
    // 修改成功
    + +

    另外，writable为false时，直接给目标属性赋值，不报错，但不会成功。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var obj = Object.defineProperty({}, 'p', {
      value: 1,
      writable: false,
      configurable: false
    });

    obj.p = 2;
    obj.p // 1
    + +

    上面代码中，obj.p的writable为false，对obj.p直接赋值不会生效。如果是严格模式，还会报错。

    +

    可配置性决定了目标属性是否可以被删除（delete）。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var obj = Object.defineProperties({}, {
      p1: { value: 1, configurable: true },
      p2: { value: 2, configurable: false }
    });

    delete obj.p1 // true
    delete obj.p2 // false

    obj.p1 // undefined
    obj.p2 // 2
    + +

    上面代码中，obj.p1的configurable是true，所以可以被删除，obj.p2就无法删除。

    +

    7、存取器（get和set）

    除了直接定义以外，属性还可以用存取器（accessor）定义。其中，存值函数称为setter，使用属性描述对象的set属性；取值函数称为getter，使用属性描述对象的get属性。

    +

    一旦对目标属性定义了存取器，那么存取的时候，都将执行对应的函数。利用这个功能，可以实现许多高级特性，比如某个属性禁止赋值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var obj = Object.defineProperty({}, 'p', {
      get: function () { // 获取属性时执行
        return 'getter' // 这里相当于定义了p属性的值，如果设置了get则不能再设置value
      },
      set: function (value) { // 设置属性时执行
        console.log('setter: ' + value);
      }
    });

    obj.p // "getter"
    obj.p = 123 // "setter: 123"
    + +

    上面代码中，obj.p定义了get和set属性。obj.p取值时，就会调用get；赋值时，就会调用set。

    +

    JavaScript 还提供了存取器的另一种写法。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var obj = {
        get p(){ // 相当于为obj对象创建一个p属性，并且赋值为‘getter’
            return 'getter'
        },
        ser p(value){
            console.log('setter'+value)
        }
    }
    + +

    上面的写法与定义属性描述对象是等价的，而且使用更广泛。

    +

    注意，取值函数get不能接受参数，存值函数set只能接受一个参数（即属性的值）。

    +

    存取器往往用于，属性的值依赖对象内部数据的场合。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var obj ={
      $n : 5,
      get next() { return this.$n++ },
      set next(n) {
        if (n >= this.$n) this.$n = n;
        else throw new Error('新的值必须大于当前值');
      }
    };

    obj.next // 5

    obj.next = 10;
    obj.next // 10

    obj.next = 5;
    // Uncaught Error: 新的值必须大于当前值
    + +

    上面代码中，next属性的存值函数和取值函数，都依赖于内部属性$n。

    +
    +

    vue框架就是通过存取器来实现的数据响应式

    +
    +

    8、对象的拷贝

    有时，我们需要将一个对象的所有属性，拷贝到另一个对象，可以用下面的方法实现。

    +
    1
    2
    3
    4
    5
    6
    7
    var extend = function (to, from){
        for(var property in from) {
            to[property] = from[property]
        }
        return to
    }
    extend({}, {a: 1}) // {a:1}
    + +

    上面这个方法的问题在于，如果遇到存取器定义的属性，会只拷贝到属性和值，并不能拷贝到存取器

    +
    1
    2
    3
    4
    extend({}, {
      get a() { return 1 }
    })
    // {a: 1}   // 这里并没有拷贝到get方法
    + +

    为了解决这个问题，我们可以通过Object.defineProperty方法来拷贝属性。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var extend = function (to, from){
        for(var property in from){
        	if(!from.hasOwnProperty()) continue //过滤继承属性 continue 终止本次循环，继续剩余循环
            Object.defineProperty(
                to,
                property,
                Object.getOwnPropertyDescriptor(from,property)
            )
        }
        return to
    }
    extend({},{get a(){return 1}}) // {get a(){return 1}}
    + +

    上面代码中，hasOwnProperty那一行用来过滤掉继承的属性，否则可能会报错，因为Object.getOwnPropertyDescriptor读不到继承属性的属性描述对象。

    +

    9、控制对象读写状态

    有时需要冻结对象的读写状态，防止对象被改变。

    +

    JavaScript 提供了三种冻结方法：

    +
      +

    • 最弱的一种是Object.preventExtensions (不能新增，但能被删除和修改)

      +
      • +

    • 其次是Object.seal (不能新增和删除，但能修改)

      +
      • +

    • 最强的是Object.freeze (不能新增、删除和修改)

      +
      • +
    +

    Object.preventExtensions() 防止新增

    1
    2
    3
    4
    5
    6
    7
    8
    var obj = new Object()
    Object.preventExtensions(obj) // prevent Extensions 中文： 防止扩展
    Object.defineProperty(obj,'p',{
        value: 'hello'
    }) // TypeError:cannot define property:p, object is not extensible

    obj.p = 1
    obj.p // undefined
    + +

    上面代码中，obj对象经过Object.preventExtensions以后，就无法添加新属性了。

    +

    Object.isExtensible() 是可新增的？

    Object.isExtensible方法用于检查一个对象是否使用了Object.preventExtensions方法。也就是说，检查是否可以为一个对象添加属性。

    +
    1
    2
    3
    4
    var obj = new Object()
    Object.isExtensible(obj) // true    is Extensible 中文： 是可扩展的？
    Object.preventExtensions(obj)
    Object.isExtensible(obj) // false
    + +

    上面代码中，对obj对象使用Object.preventExtensions方法以后，再使用Object.isExtensible方法，返回false，表示已经不能添加新属性了。

    +

    Object.seal() 密封

    Object.seal方法使得一个对象既无法添加新属性，也无法删除旧属性。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var obj = {p: 'hello'}
    Object.seal(obj) // seal 中文： 密封

    delete obj.p // 删除属性无效
    obj.p // hello

    obj.p = 'hi' // 可修改值
    obj.p // hi

    obj.x = 'world' // 新增属性无效
    obj.x // undefined
    + +

    上面代码中，obj对象执行Object.seal方法以后，就无法添加新属性和删除旧属性了。

    +

    Object.seal实质是把属性描述对象的configurable属性设为false，因此属性描述对象不再能改变了。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    var obj = {p: 'a'}

    Object.getOwnPropertyDescriptor(obj, 'p')
    // Object {
    //   value: "a",
    //   writable: true,
    //   enumerable: true,
    //   configurable: true
    // }

    Object.seal(obj)

    Object.getOwnPropertyDescriptor(obj, 'p')
    // Object {
    //   value: "a",
    //   writable: true,
    //   enumerable: true,
    //   configurable: false
    // }

    Object.defineProperty(obj,'p',{
        enumerable:
    })
    // TypeError: Cannot redefine property: p
    + +

    上面代码中，使用Object.seal方法之后，属性描述对象的configurable属性就变成了false，然后改变enumerable属性就会报错。

    +

    Object.seal只是禁止新增或删除属性，并不影响修改某个属性的值。

    +
    1
    2
    3
    4
    var obj = { p: 'a' };
    Object.seal(obj);
    obj.p = 'b';
    obj.p // 'b'
    + +

    上面代码中，Object.seal方法对p属性的value无效，是因为此时p属性的可写性由writable决定。

    +

    Object.isSealed() 是密封的？

    Object.isSealed方法用于检查一个对象是否使用了Object.seal方法。

    +
    1
    2
    3
    var obj = {p:'a'}
    Object.seal(obj)
    Object.isSealed(obj) // true   is Sealed 中文： 是密封的？
    + +

    这时，Object.isExtensible方法也返回false。

    +
    1
    2
    3
    4
    var obj = { p: 'a' };

    Object.seal(obj);
    Object.isExtensible(obj) // false
    + +
    +

    isSealed为true，是密封的。isExtensible为false，不是可扩展的

    +
    +

    Object.freeze() 冻结

    Object.freeze方法可以使得一个对象无法添加新属性、无法删除旧属性、也无法改变属性的值，使得这个对象实际上变成了常量。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var obj = {p:'hello'}
    Object.freeze(obj)

    obj.p = 'world'
    obj.p // hello

    obj.t = 'hello'
    obj.t // nudefined

    delete obj.p // false
    obj.p // hello
    + +

    上面代码中，对obj对象进行Object.freeze()以后，修改属性、新增属性、删除属性都无效了。这些操作并不报错，只是默默地失败。如果在严格模式下，则会报错。

    +

    Object.isFrozen() 是冻结的？

    Object.isFrozen方法用于检查一个对象是否使用了Object.freeze方法。

    +
    1
    2
    3
    4
    5
    6
    var obj = {
      p: 'hello'
    };

    Object.freeze(obj);
    Object.isFrozen(obj) // true // 是冻结的
    + + + +

    使用Object.freeze方法以后，Object.isSealed将会返回true，Object.isExtensible返回false。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var obj = {
      p: 'hello'
    };

    Object.freeze(obj);

    Object.isSealed(obj) // true // 是密封的
    Object.isExtensible(obj) // false // 不是可扩展的
    + +

    Object.isFrozen的一个用途是，确认某个对象没有被冻结后，再对它的属性赋值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var obj = {
      p: 'hello'
    };

    Object.freeze(obj);

    if (!Object.isFrozen(obj)) {
      obj.p = 'world';
    }
    + +

    上面代码中，确认obj没有被冻结后，再对它的属性赋值，就不会报错了。

    +

    局限性

    上面的三个方法锁定对象的可写性有一个漏洞：可以通过改变原型对象，来为对象增加属性。

    +
    1
    2
    3
    4
    5
    6
    7
    var obj = new Object();
    Object.preventExtensions(obj);

    var proto = Object.getPrototypeOf(obj); // 获取原型对象
    proto.t = 'hello';
    obj.t
    // hello
    + +

    上面代码中，对象obj本身不能新增属性，但是可以在它的原型对象上新增属性，就依然能够在obj上读到。

    +

    一种解决方案是，把obj的原型也冻结住。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var obj = new Object();
    Object.preventExtensions(obj);

    var proto = Object.getPrototypeOf(obj);
    Object.preventExtensions(proto);

    proto.t = 'hello';
    obj.t // undefined
    + +

    另外一个局限是，如果属性值是对象，上面这些方法只能冻结属性指向的对象，而不能冻结对象本身的内容。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var obj = {
      foo: 1,
      bar: ['a', 'b']
    };
    Object.freeze(obj);

    obj.bar.push('c');
    obj.bar // ["a", "b", "c"]
    + +

    上面代码中，obj.bar属性指向一个数组，obj对象被冻结以后，这个指向无法改变，即无法指向其他值，但是所指向的数组是可以改变的。

    +

    三、Array对象

    1、Array构造函数

    Array是 JavaScript 的原生对象，同时也是一个构造函数，可以用它生成新的数组。

    +
    1
    2
    3
    var arr = new Array(2); // Array是原生对象，也是构造函数； 2表示生成2个成员
    arr.length // 2
    arr // [ empty x 2 ]
    + +

    上面代码中，Array构造函数的参数2，表示生成一个两个成员的数组，每个位置都是空值。

    +

    如果没有使用new，运行结果也是一样的。

    +
    1
    2
    3
    var arr = new Array(2);
    // 等同于
    var arr = Array(2);
    + +

    Array构造函数有一个很大的缺陷，就是不同的参数，会导致它的行为不一致。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // 无参数时，返回一个空数组
    new Array() // []

    // 单个正整数参数，表示返回的新数组的长度
    new Array(1) // [ empty ]
    new Array(2) // [ empty x 2 ]

    // 非正整数的数值作为参数，会报错
    new Array(3.2) // RangeError: Invalid array length
    new Array(-3) // RangeError: Invalid array length

    // 单个非数值（比如字符串、布尔值、对象等）作为参数，
    // 则该参数是返回的新数组的成员
    new Array('abc') // ['abc']
    new Array([1]) // [Array[1]]

    // 多参数时，所有参数都是返回的新数组的成员
    new Array(1, 2) // [1, 2]
    new Array('a', 'b', 'c') // ['a', 'b', 'c']
    + +

    可以看到，Array作为构造函数，行为很不一致。因此，不建议使用它生成新数组，直接使用数组字面量是更好的做法。

    +
    1
    2
    3
    4
    5
    // bad
    var arr = new Array(1, 2);

    // good
    var arr = [1, 2];
    + +

    注意，如果参数是一个正整数，返回数组的成员都是空位。虽然读取的时候返回undefined，但实际上该位置没有任何值。虽然可以取到length属性，但是取不到键名。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var a = new Array(3);
    var b = [undefined, undefined, undefined];

    a.length // 3
    b.length // 3

    a[0] // undefined
    b[0] // undefined

    0 in a // false  // in运算符用于数组时，前面的参数为数组索引
    0 in b // true
    + +

    上面代码中，a是一个长度为3的空数组，b是一个三个成员都是undefined的数组。读取键值的时候，a和b都返回undefined，但是a的键位都是空的，b的键位是有值的。

    +

    2、静态方法

    Array.isArray()

    Array.isArray方法返回一个布尔值，表示参数是否为数组。它可以弥补typeof运算符的不足。

    +
    1
    2
    3
    var arr = [1,2,3]
    typeof arr // object // 使用typeof返回的是object
    Array.isArray(arr)// true
    + +

    上面代码中，typeof运算符只能显示数组的类型是Object，而Array.isArray方法可以识别数组。

    +

    3、实例方法

    valueOf() 原数组，toString() 转字符串

    valueOf方法是一个所有对象都拥有的方法，表示对该对象求值。不同对象的valueOf方法不尽一致，数组的valueOf方法返回数组本身。

    +
    1
    2
    var arr = [1,2,3]
    arr.valueOf() // [1,2,3]
    + +

    toString方法也是对象的通用方法，数组的toString方法返回数组的字符串形式。

    +
    1
    2
    3
    4
    5
    var arr = [1, 2, 3];
    arr.toString() // "1,2,3"

    var arr = [1, 2, 3, [4, 5, 6]];
    arr.toString() // "1,2,3,4,5,6"
    + + + +

    push() 末尾添加，pop() 删除末尾

    push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

    +
    1
    2
    3
    4
    5
    6
    7
    var arr=[]
    arr.push(1) // 1
    arr.push('a') // 2
    arr.push(true,{}) // 4
    arr // [1,'a',true,{}]

    // 注：push()方法 返回添加后的数组长度，会改变原数组
    + +

    上面代码使用push方法，往数组中添加了四个成员。

    +

    pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组。

    +
    1
    2
    3
    var arr = ['a','b','c']
    arr.pop() // 'c'  删除最后一个元素，并返回该元素
    arr // ['a','b']
    + +

    对空数组使用pop方法，不会报错，而是返回undefined。

    +
    1
    [].pop() // undefined
    + + + +

    push和pop结合使用，就构成了“后进先出”的栈结构（stack）。

    +
    1
    2
    3
    4
    5
    var arr = [];
    arr.push(1, 2);
    arr.push(3);
    arr.pop();
    arr // [1, 2]
    + +

    上面代码中，3是最后进入数组的，但是最早离开数组。

    +

    unshift() 首位添加, shift() 删除首位

    unshift()方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

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

    a.unshift('x'); // 4
    a // ['x', 'a', 'b', 'c']
    + +

    unshift()方法可以接受多个参数，这些参数都会添加到目标数组头部。

    +
    1
    2
    3
    var arr = [ 'c', 'd' ];
    arr.unshift('a', 'b') // 4
    arr // [ 'a', 'b', 'c', 'd' ]
    + + + +

    shift()方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组。

    +
    1
    2
    3
    var a = ['a','b','c']
    a.shift() // 'a' 删除第一个元素，并返回该元素
    a // ['b','c']
    + +

    上面代码中，使用shift()方法以后，原数组就变了。

    +

    shift()方法可以遍历并清空一个数组。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var list = [1, 2, 3, 4];
    var item;

    while (item = list.shift()) {
      console.log(item);
    }

    list // []
    + +

    上面代码通过list.shift()方法每次取出一个元素，从而遍历数组。它的前提是数组元素不能是0或任何布尔值等于false的元素，因此这样的遍历不是很可靠。

    +

    push()和shift()结合使用，就构成了“先进先出”的队列(堆)结构（queue）。

    +
    1
    2
    3
    4
    5
    6
    var queue = []
    queue.push('1')
    queue.push('2')
    queue.push('3')
    queue.shift()
    queue // ['2','3']
    + + + +
    +

    push() 最后位置添加元素，unshift() 第一位置添加元素

    +

    pop() 删除最后一个元素，shift() 删除第一个元素

    +
    +

    join() 连接每个成员-转字符串

    join()方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。

    +

    数组转字符串

    +
    1
    2
    3
    4
    5
    6
    var a = [1,2,3,4]

    a.join('') // '1234'
    a.join(' ') // '1 2 3 4'
    a.join('|') // '1|2|3|4‘
    a.join() // '1,2,3,4'
    + +

    如果数组成员是undefined或null或空位，会被转成空字符串。

    +
    1
    2
    3
    4
    5
    [undefined, null].join('#')
    // '#'

    ['a',, 'b'].join('-')
    // 'a--b'
    + +

    通过call方法，这个方法也可以用于字符串或类似数组的对象。

    +
    1
    2
    3
    4
    5
    6
    7
    Array.prototype.join.call('hello', '-')
    // "h-e-l-l-o"
    // 等价 'hello'.split('').join('-')

    var obj = { 0: 'a', 1: 'b', length: 2 }; // 数组的变形对象
    Array.prototype.join.call(obj, '-')
    // 'a-b'
    + + + +

    concat() 合并数组

    concat方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    ['hello'].concat(['world'])
    // ['hello','world']

    ['hello'].concat(['world'],['!'])
    // ["hello", "world", "!"]

    [].concat({a: 1}, {b: 2})
    // [{ a: 1 }, { b: 2 }]

    [2].concat({a: 1})
    // [2, {a: 1}]

    [].concat(1,2)
    // [1,2]
    + +

    除了数组作为参数，concat也接受其他类型的值作为参数，添加到目标数组尾部。

    +
    1
    2
    [1, 2, 3].concat(4, 5, 6)
    // [1, 2, 3, 4, 5, 6]
    + +

    如果数组成员包括对象，concat方法返回当前数组的一个浅拷贝。所谓“浅拷贝”，指的是新数组拷贝的是对象的引用。

    +
    1
    2
    3
    4
    5
    6
    7
    var obj = { a: 1 };
    var oldArray = [obj]; // 浅拷贝

    var newArray = oldArray.concat();

    obj.a = 2; // 改变原对象以后，新数组跟着改变
    newArray[0].a // 2
    + +

    上面代码中，原数组包含一个对象，concat方法生成的新数组包含这个对象的引用。所以，改变原对象以后，新数组跟着改变。

    +

    reverse() 反转

    reverse方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组。

    +
    1
    2
    3
    var a = [1,2,3,4]
    a.reverse() // [4,3,2,1]
    a // [4,3,2,1]
    + + + +

    slice() 部分-提取部分成员

    slice方法用于提取目标数组的一部分，返回一个新数组，原数组不变。

    +
    1
    arr.slice(start, end);
    + +

    它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员。

    +
    1
    2
    3
    4
    5
    6
    var a = ['a','b','c']
    a.slice(0) // ['a','b','c'] 从0到最后一个成员
    a.slice(1) // ['b','c'] 从1到最后一个成员
    a.slice(1,2) // ['b'] 从1到2成员，不包含2成员
    a.slice(2,6) // ['c'] 从2到6成员，超出的不计算在内
    a.slice() //['a','b','c'] 无参数，默认全部，多用于拷贝数组到新的数组
    + +

    上面代码中，最后一个例子slice没有参数，实际上等于返回一个原数组的拷贝。

    +

    如果slice方法的参数是负数，则表示倒数计算的位置。

    +
    1
    2
    3
    var a = ['a', 'b', 'c'];
    a.slice(-2) // ["b", "c"]
    a.slice(-2, -1) // ["b"]
    + +

    上面代码中，-2表示倒数计算的第二个位置，-1表示倒数计算的第一个位置。

    +

    如果第一个参数大于等于数组长度，或者第二个参数小于第一个参数，则返回空数组。

    +
    1
    2
    3
    var a = ['a', 'b', 'c'];
    a.slice(4) // []
    a.slice(2, 1) // []
    + +

    应用-类数组转数组

    slice`方法的一个重要应用，是将类似数组的对象转为真正的数组。

    +
    1
    2
    3
    4
    5
    Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
    // ['a', 'b']

    Array.prototype.slice.call(document.querySelectorAll("div"));
    Array.prototype.slice.call(arguments);
    + +

    上面代码的参数都不是数组，但是通过call方法，在它们上面调用slice方法，就可以把它们转为真正的数组。

    +

    splice() 从第几个开始，删除几个，并添加成员，返回被删除成员。

    splice方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。

    +
    +

    也可以不删除成员同时在指定位置添加新成员

    +
    +
    1
    2
    arr.splice(start, count, addElement1, addElement2, ...);
    // 第几个开始，删除几个，加入的新成员...(非必需）
    + +

    splice的第一个参数是删除的起始位置（从0开始），第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。

    +
    1
    2
    3
    var a = [1,2,3,4,5,6]
    a.splice(2,2) // [3,4] 返回被删除成员
    a.[1,2,5,6]
    + +

    上面代码从原数组2号位置，删除了2个数组成员。

    +
    1
    2
    3
    var a = ['a', 'b', 'c', 'd', 'e', 'f'];
    a.splice(4, 2, 1, 2) // ["e", "f"]
    a // ["a", "b", "c", "d", 1, 2]
    + +

    上面代码从原数组4号位置删除2个成员，并插入了[1 , 2]新成员。

    +

    起始位置如果是负数，就表示从倒数位置开始删除。

    +
    1
    2
    var a = ['a', 'b', 'c', 'd', 'e', 'f'];
    a.splice(-4, 2) // ["c", "d"] 负数表示倒数
    + +

    上面代码表示，从倒数第四个位置c开始删除两个成员。

    +

    如果只是单纯地插入元素，splice方法的第二个参数可以设为0。

    +
    1
    2
    3
    4
    var a = [1, 1, 1];

    a.splice(1, 0, 'a') // [] // 不删除成员，并加入新成员到指定位置
    a // [1, 'a', 1, 1]
    + +

    应用-拆分数组

    如果只提供第一个参数，等同于将原数组在指定位置拆分成两个数组。

    +
    1
    2
    3
    4
    var a = [1, 2, 3, 4];
    var a2 = a.splice(2) // [3, 4]
    a // [1, 2]
    a2 // [3, 4]
    + + + +

    sort() 排序

    sort方法对数组成员进行排序，默认是按照字典顺序排序。排序后，将改变原数组。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    ['d', 'c', 'b', 'a'].sort()
    // ['a', 'b', 'c', 'd']


    [4, 3, 2, 1].sort()
    // [1, 2, 3, 4]

    ['abc','ba','ea','ae'].sort()
    // ["abc", "ae", "ba", "ea"]

    [11, 101].sort()
    // [101, 11]

    [10111, 1101, 111].sort()
    // [10111, 1101, 111]
    + +

    上面代码的最后三个例子，需要特殊注意。sort()方法不是按照大小排序，而是按照字典顺序。也就是说，数值会被先转成字符串，再按照字典顺序进行比较，所以101排在11的前面。

    +
    +

    先转成字符串，再从0位置开始对比对应位置上的值的顺序

    +
    +

    如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    [10111, 1101, 111].sort(function (a, b) { // 返回值大于0,则a排于b之后，否则反之。
      return a - b; // 升序
    })
    // [111, 1101, 10111]

    [10111, 1101, 111].sort(function (a, b) {
      return b - a; // 降序
    })
    // [10111，1101, 111]
    + +

    上面代码中，sort的参数函数本身接受两个参数，表示进行比较的两个数组成员。如果该函数的返回值大于0，表示第一个成员排在第二个成员后面；其他情况下，都是第一个元素排在第二个元素前面。

    +

    应用-自定义排序

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    [
      { name: "张三", age: 30 },
      { name: "李四", age: 24 },
      { name: "王五", age: 28  }
    ].sort(function (o1, o2) {
      return o1.age - o2.age;
    })
    // [
    //   { name: "李四", age: 24 },
    //   { name: "王五", age: 28  },
    //   { name: "张三", age: 30 }
    // ]


    // 自定义排序
    [
        {day: '星期日'}, {day:'星期一'}, {day:'星期五'}
    ].sort(function(o1,o2){
        return computedDay(o1.day.charAt(2)) - computedDay(o2.day.charAt(2))
    }) //[{ day: '星期一' }, { day: '星期五' }, { day: '星期日' }]

    function computedDay(v){
       return v === '一' ? 1 : v === '二' ? 2 : v === '三' ? 3 : v === '四' ? 4 : v === '五' ? 5 : v === '六' ? 6 : 7
    }
    + +

    注意，自定义的排序函数应该返回数值，否则不同的浏览器可能有不同的实现，不能保证结果都一致。

    +
    1
    2
    3
    4
    5
    // bad
    [1, 4, 2, 6, 0, 6, 2, 6].sort((a, b) => a > b) // 返回布尔值，不推荐

    // good
    [1, 4, 2, 6, 0, 6, 2, 6].sort((a, b) => a - b) // 返回数值，推荐
    + +

    上面代码中，前一种排序算法返回的是布尔值，这是不推荐使用的。后一种是数值，才是更好的写法。

    +

    map() 映射 每个成员 并返回

    map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。不改变原数组。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var numbers = [1, 2, 3];

    numbers.map(function (n) {
      return n + 1;
    });
    // [2, 3, 4]

    numbers
    // [1, 2, 3]
    + +

    上面代码中，numbers数组的所有成员依次执行参数函数，运行结果组成一个新数组返回，原数组没有变化。

    +

    map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前索引、数组本身。

    +
    1
    2
    3
    4
    [1, 2, 3].map(function(elem, index, arr) { // 当前成员、当前索引、数组本身
      return elem * index;
    });
    // [0, 2, 6]
    + +

    上面代码中，map方法的回调函数有三个参数，elem为当前成员的值，index为当前成员的索引，arr为原数组（[1, 2, 3]）。

    +

    map方法还可以接受第二个参数，用来绑定回调函数内部的this变量（详见《this 变量》一章）。

    +
    1
    2
    3
    4
    5
    6
    var arr = ['a', 'b', 'c'];

    [1, 2].map(function (e) {
      return this[e]; // this指向arr
    }, arr) // 使内部this指向arr
    // ['b', 'c']
    + +

    上面代码通过map方法的第二个参数，将回调函数内部的this对象，指向arr数组。

    +

    如果数组有空位，map方法的回调函数在这个位置不会执行，会跳过数组的空位。

    +
    1
    2
    3
    4
    5
    var f = function (n) { return 'a' };

    [1, undefined, 2].map(f) // ["a", "a", "a"]
    [1, null, 2].map(f) // ["a", "a", "a"]
    [1, , 2].map(f) // ["a", , "a"]
    + +

    上面代码中，map方法不会跳过undefined和null，但是会跳过空位。

    +

    forEach() 循环每个成员

    forEach方法与map方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。这就是说，如果数组遍历的目的是为了得到返回值，那么使用map方法，否则使用forEach方法。

    +

    forEach的用法与map方法一致，参数是一个函数，该函数同样接受三个参数：当前成员、当前索引、整个数组。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    function log(element, index, array) {  // 当前成员、当前索引、数组本身
      console.log('[' + index + '] = ' + element);
    }

    [2, 5, 9].forEach(log);
    // [0] = 2
    // [1] = 5
    // [2] = 9
    + +

    上面代码中，forEach遍历数组不是为了得到返回值，而是为了在屏幕输出内容，所以不必使用map方法。

    +

    forEach方法也可以接受第二个参数，绑定参数函数的this变量。

    +
    1
    2
    3
    4
    5
    6
    7
    var out = [];

    [1, 2, 3].forEach(function(elem) {
      this.push(elem * elem); // this指向为out
    }, out); // 使内部this指向out

    out // [1, 4, 9]
    + +

    上面代码中，空数组out是forEach方法的第二个参数，结果，回调函数内部的this关键字就指向out。

    +

    注意，forEach方法无法中断执行，总是会将所有成员遍历完。如果希望符合某种条件时，就中断遍历，要使用for循环。

    +
    1
    2
    3
    4
    5
    6
    var arr = [1, 2, 3];
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] === 2) break;
      console.log(arr[i]);
    }
    // 1
    + +

    上面代码中，执行到数组的第二个成员时，就会中断执行。forEach方法做不到这一点。

    +

    forEach方法也会跳过数组的空位。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var log = function (n) {
      console.log(n + 1);
    };

    [1, undefined, 2].forEach(log)
    // 2
    // NaN
    // 3

    [1, null, 2].forEach(log)
    // 2
    // 1  // null+1 => 1
    // 3

    [1, , 2].forEach(log)
    // 2
    // 3
    + +

    上面代码中，forEach方法不会跳过undefined和null，但会跳过空位。

    +

    filter() 过滤

    filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。

    +

    它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。

    +

    该方法不会改变原数组。

    +
    1
    2
    3
    4
    [1,2,3,4,5].filter(function(elem){
        return elem > 3
    })
    // [4,5]
    + +

    上面代码将大于3的数组成员，作为一个新数组返回。

    +
    1
    2
    3
    4
    var arr = [0, 1, 'a', false];

    arr.filter(Boolean)
    // [1, "a"]
    + +

    上面代码中，filter方法返回数组arr里面所有布尔值为true的成员。

    +

    filter方法的参数函数可以接受三个参数：当前成员，当前位置、整个数组。

    +
    1
    2
    3
    4
    [1, 2, 3, 4, 5].filter(function (elem, index, arr) { // 当前成员，当前位置、整个数组
      return index % 2 === 0;
    });
    // [1, 3, 5]
    + +

    上面代码返回偶数位置的成员组成的新数组。

    +

    filter方法还可以接受第二个参数，用来绑定参数函数内部的this变量。

    +
    1
    2
    3
    4
    5
    6
    7
    var obj = { MAX: 3 };
    var myFilter = function (item) {
      if (item > this.MAX) return true; // this指向obj
    };

    var arr = [2, 8, 3, 4, 1, 3, 2, 9];
    arr.filter(myFilter, obj) // [8, 4, 9]  // 使myFilter内部this指向obj
    + +

    上面代码中，过滤器myFilter内部有this变量，它可以被filter方法的第二个参数obj绑定，返回大于3的成员。

    +

    some()某个，every()每个

    这两个方法类似“断言”（assert），返回一个布尔值，表示判断数组成员是否符合某种条件。

    +

    它们接受一个函数作为参数，所有数组成员依次执行该函数。该函数接受三个参数：当前成员、当前位置、整个数组，然后返回一个布尔值。

    +

    some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false。

    +
    1
    2
    3
    4
    5
    var arr = [1,2,3,4,5]
    arr.some(function(elem,index,arr){ // 返回值中有一个为true则此方法返回true
        return elem >= 3
    })
    // true
    + +

    上面代码中，如果数组arr有一个成员大于等于3，some方法就返回true。

    +

    every方法是所有成员的返回值都是true，整个every方法才返回true，否则返回false。

    +
    1
    2
    3
    4
    5
    var arr = [1, 2, 3, 4, 5];
    arr.every(function (elem, index, arr) { // 每个返回值都为true，此方法才返回true，否则返回false
      return elem >= 3;
    });
    // false
    + +

    上面代码中，数组arr并非所有成员大于等于3，所以返回false。

    +

    注意，对于空数组，some方法返回false，every方法返回true，回调函数都不会执行。

    +
    1
    2
    3
    4
    function isEven(x) { return x % 2 === 0 } // 不会执行此函数

    [].some(isEven) // false
    [].every(isEven) // true
    + +

    some和every方法还可以接受第二个参数，用来绑定参数函数内部的this变量。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var arr = [1,2,3]
    var obj = {MAX:0}
    function fn(elem) {
        return elem > this.MAX // this指向obj
    }

    arr.some(fn,obj) // true
    arr.every(fn,obj) // true
    + + + +

    reduce() 累计器，reduceRight() 反向累计器

    reduce方法和reduceRight方法依次处理数组的每个成员，最终累计为一个值。它们的差别是，reduce是从左到右处理（从第一个成员到最后一个成员），reduceRight则是从右到左（从最后一个成员到第一个成员），其他完全一样。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    [1,2,3,4,5].reduce(function(a,b,c,d){
        // 记住a是默认是第一个成员，然后是上一次运算的返回值。
        console.log(a,b)
        console.log(c)
        return a+b
    })
    // 1 2
    // 3 3
    // 6 4
    // 10 5
    // 最终结果 15
    + +

    上面代码中，reduce方法求出数组所有成员的和。第一次执行，a是数组的第一个成员1，b是数组的第二个成员2。第二次执行，a为上一轮的返回值3，b为第三个成员3。第三次执行，a为上一轮的返回值6，b为第四个成员4。第四次执行，a为上一轮返回值10，b为第五个成员5。至此所有成员遍历完成，整个方法的返回值就是最后一轮的返回值15。

    +
    1
    2
    arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
    // 说明：中括号代表可选参数
    + +

    reduce方法和reduceRight方法的第一个参数都是一个callback函数。该函数接受以下四个参数。

    +
      +
    1. 累积变量，默认为数组的第一个成员
      2. +
    2. 当前变量，默认为数组的第二个成员
      3. +
    3. 当前位置（默认从1开始）, 如果提供了initialValue，则起始索引号为0，否则为1。 （可选）
      4. +
    4. 原数组（可选）
      5. +
    +

    initialValue可选

    +

    作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

    +

    如果要对累积变量指定初值，可以把它放在reduce方法和reduceRight方法的第二个参数。

    +
    1
    2
    3
    4
    [1, 2, 3, 4, 5].reduce(function (a, b) {
      return a + b;
    }, 10);
    // 25
    + +

    上面代码指定参数a的初值为10，所以数组从10开始累加，最终结果为25。注意，这时b是从数组的第一个成员开始遍历。

    +

    上面的第二个参数相当于设定了默认值，处理空数组时尤其有用。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    function add(prev, cur) {
      return prev + cur;
    }

    [].reduce(add) // 报错
    // TypeError: Reduce of empty array with no initial value
    [].reduce(add, 1)
    // 1
    + +

    上面代码中，由于空数组取不到初始值，reduce方法会报错。这时，加上第二个参数，就能保证总是会返回一个值。

    +

    下面是一个reduceRight方法的例子。

    +
    1
    2
    3
    4
    5
    6
    function subtract(prev, cur) {
      return prev - cur;
    }

    [3, 2, 1].reduce(subtract) // 0
    [3, 2, 1].reduceRight(subtract) // -4
    + +

    上面代码中，reduce方法相当于3减去2再减去1，reduceRight方法相当于1减去2再减去3。

    +

    应用-找出字符最长的数组成员

    由于这两个方法会遍历数组，所以实际上还可以用来做一些遍历相关的操作。比如，找出字符长度最长的数组成员。

    +
    1
    2
    3
    4
    5
    6
    7
    function findLongest(entries) {
      return entries.reduce(function (longest, entry) {
        return entry.length > longest.length ? entry : longest;
      }, '');
    }

    findLongest(['aaa', 'bb', 'c']) // "aaa"
    + +

    上面代码中，reduce的参数函数会将字符长度较长的那个数组成员，作为累积值。这导致遍历所有成员之后，累积值就是字符长度最长的那个成员。

    +

    应用-按属性对object分类

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    var people = [
      { name: 'Alice', age: 21 },
      { name: 'Max', age: 20 },
      { name: 'Jane', age: 20 }
    ];

    function groupBy(objectArray, property) {
      return objectArray.reduce(function (acc, obj) {
        var key = obj[property];
        if (!acc[key]) {// 当{}中没有对应分类属性时，先创建改属性
          acc[key] = [];
        }
        acc[key].push(obj);
        return acc;
      }, {}); // 初始值为{}
    }

    var groupedPeople = groupBy(people, 'age');
    // groupedPeople is:
    // {
    //   20: [
    //     { name: 'Max', age: 20 },
    //     { name: 'Jane', age: 20 }
    //   ],
    //   21: [{ name: 'Alice', age: 21 }]
    // }
    + +

    更多例子：< https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce >

    +

    indexOf() 搜索成员第一个出现的位置，lastIndexOf() 搜索成员最后出现的位置

    indexOf方法返回给定元素在数组中第一次出现的位置，如果**没有则返回-1**。

    +

    indexOf语法

    +
    1
    arr.indexOf(searchElement[, fromIndex = 0])
    + +
    1
    2
    3
    var a = [1,2,3,4,5]
    a.indexOf(3) // 2   3在数组a中第一次出现的位置为2
    a.indexOf(6) // -1  6在数组a中没有出现，返回-1
    + + + +

    indexOf方法还可以接受第二个参数，表示搜索的开始位置。

    +
    1
    ['a', 'b', 'c'].indexOf('a', 1) // -1 从1位置开始搜索a，没有搜索到
    + +

    上面代码从1号位置开始搜索字符a，结果为-1，表示没有搜索到。

    +

    lastIndexOf()语法

    +
    1
    arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])
    + +

    lastIndexOf方法返回给定元素在数组中最后一次出现的位置，如果没有则返回-1。

    +
    1
    2
    3
    var a = [2,3,4,2]
    a.lastIndexOf(2) //3   2在数组a中最后一次出现的位置为3
    a.lastIndexOf(5) //-1
    + + + +

    注意，这两个方法不能用来搜索NaN的位置，即它们无法确定数组成员是否包含NaN。

    +
    1
    2
    [NaN].indexOf(NaN) // -1
    [NaN].lastIndexOf(NaN) // -1
    + +

    这是因为这两个方法内部，使用严格相等运算符（===）进行比较，而NaN是唯一一个不等于自身的值。

    +

    链式使用

    上面这些数组方法之中，有不少返回的还是数组，所以可以链式使用。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    var users = [
      {name: 'tom', email: 'tom@example.com'},
      {name: 'peter', email: 'peter@example.com'}
    ];

    users
    .map(function (user) {
      return user.email;
    }) // 对每个成员进行遍历，使用返回值组成一个新的数组并返回
    .filter(function (email) { // 过滤返回值为false的成员，并返回一个过滤掉的新数组
      return /^t/.test(email);
    })
    .forEach(function (email) { // 遍历数组
      console.log(email);
    });
    // "tom@example.com"
    + +

    上面代码中，先产生一个所有 Email 地址组成的数组，然后再过滤出以t开头的 Email 地址，最后将它打印出来。

    +
    +

    方法的返回值能满足下一个方法的调用，即可使用链式调用。

    +
    +

    四、包装对象

    1、定义

    对象是JavaScript语言中最主要的数据类型，三种原始类型的值——数字、字符串、布尔值 在一定条件下，也会自动转为对象，也就是原始类型的包装对象（wrapper）

    +

    所谓“包装对象”，指的是与数字、字符串、布尔值分别相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var v1 = new Number(123);
    var v2 = new String('abc');
    var v3 = new Boolean(true);

    typeof v1 // "object"
    typeof v2 // "object"
    typeof v3 // "object"

    v1 === 123 // false
    v2 === 'abc' // false
    v3 === true // false
    + +

    上面代码中，基于原始类型的值，生成了三个对应的包装对象。可以看到，v1、v2、v3都是对象，且与对应的简单类型值不相等。

    +

    包装对象的设计目的，首先是使得“对象”这种类型可以覆盖 JavaScript 所有的值，整门语言有一个通用的数据模型，其次是使得原始类型的值也有办法调用自己的方法。

    +

    Number、String和Boolean这三个原生对象，如果不作为构造函数调用（即调用时不加new），而是作为普通函数调用，常常用于将任意类型的值转为数值、字符串和布尔值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    // 字符串转为数值
    Number('123') // 123

    // 数值转为字符串
    String(123) // "123"

    // 数值转为布尔值
    Boolean(123) // true
    + +

    上面这种数据类型的转换，详见《数据类型转换》一节。

    +

    总结一下，这三个对象作为构造函数使用（带有new）时，可以将原始类型的值转为对象；作为普通函数使用时（不带有new），可以将任意类型的值，转为原始类型的值。

    +

    2、实例方法

    三种包装对象各自提供了许多实例方法，详见后文。这里介绍两种它们共同具有、从Object对象继承的方法：valueOf()和toString()。

    +

    2.1 valueOf()

    valueOf()方法返回包装对象实例对应的原始类型的值。

    +
    1
    2
    3
    new Number(123).valueOf()  // 123
    new String('abc').valueOf() // "abc"
    new Boolean(true).valueOf() // true
    + +

    2.2 toString()

    toString()方法返回对应的字符串形式。

    +
    1
    2
    3
    new Number(123).toString() // "123"
    new String('abc').toString() // "abc"
    new Boolean(true).toString() // "true"
    + + + +

    3、原始类型与实例对象的自动转换

    某些场合，原始类型的值会自动当作包装对象调用，即调用包装对象的属性和方法。这时，JavaScript 引擎会自动将原始类型的值转为包装对象实例，并在使用后立刻销毁实例。

    +

    比如，字符串可以调用length属性，返回字符串的长度。

    +
    1
    'abc'.length // 3
    + +

    上面代码中，abc是一个字符串，本身不是对象，不能调用length属性。JavaScript 引擎自动将其转为包装对象，在这个对象上调用length属性。调用结束后，这个临时对象就会被销毁。这就叫原始类型与实例对象的自动转换。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var str = 'abc';
    str.length // 3

    //等同于
    var strObj = new String(str)
    // String{
    //		0:'a',1:'b',2:'c',length:3,[[PrimitiveValue]]: "abc"
    // }
    strObj.length // 3
    + +

    上面代码中，字符串abc的包装对象提供了多个属性，length只是其中之一。

    +

    自动转换生成的包装对象是只读的，无法修改。所以，字符串无法添加新属性。

    +
    1
    2
    3
    var s = 'Hello World';
    s.x = 123;
    s.x // undefined
    + +

    上面代码为字符串s添加了一个x属性，结果无效，总是返回undefined。

    +

    另一方面，调用结束后，包装对象实例会自动销毁。这意味着，下一次调用字符串的属性时，实际是调用一个新生成的对象，而不是上一次调用时生成的那个对象，所以取不到赋值在上一个对象的属性。如果要为字符串添加属性，只有在它的原型对象String.prototype上定义（参见《面向对象编程》章节）。

    +

    4、自定义方法

    除了原生的实例方法，包装对象还可以自定义方法和属性，供原始类型的值直接调用。

    +

    比如，我们可以新增一个double方法，使得字符串和数字翻倍。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    String.prototype.double = function () { // String是一个方法，String.prototype本质是一个实例对象
      return this.valueOf() + this.valueOf();
    };

    'abc'.double()
    // abcabc

    Number.prototype.double = function () {
      return this.valueOf() + this.valueOf();
    };

    (123).double() // 246 // 不加括号时点运算符会被解释成小数点
    + +

    上面代码在String和Number这两个对象的原型上面，分别自定义了一个方法，从而可以在所有实例对象上调用。注意，最后一张的123外面必须要加上圆括号，否则后面的点运算符（.）会被解释成小数点。

    +

    五、Boolean对象

    1、概述

    Boolean对象是 JavaScript 的三个包装对象之一。作为构造函数，它主要用于生成布尔值的包装对象实例。

    +
    1
    2
    3
    var b = new Boolean(true)
    typeof b // object
    b.valueOf() // true
    + +

    上面代码的变量b是一个Boolean对象的实例，它的类型是对象，值为布尔值true。

    +

    注意，false对应的包装对象实例，布尔运算结果也是true。

    +
    1
    2
    3
    4
    5
    6
    7
    if (new Boolean(false)) { // 返回的是一个对象，所有对象对应的布尔值都是true
      console.log('true');
    } // true

    if (new Boolean(false).valueOf()) { // 它的值为false
      console.log('true');
    } // 无输出
    + +

    上面代码的第一个例子之所以得到true，是因为false对应的包装对象实例是一个对象，进行逻辑运算时，被自动转化成布尔值true（因为所有对象对应的布尔值都是true）。而实例的valueOf方法，则返回实例对应的原始值，本例为false。

    +

    2、Boolean 函数的类型转换作用

    Boolean对象除了可以作为构造函数，还可以单独使用，将任意值转为布尔值。这时Boolean就是一个单纯的工具方法。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    Boolean(undefined) // false
    Boolean(null) // false
    Boolean(0) // false
    Boolean('') // false
    Boolean(NaN) // false

    Boolean(1) // true
    Boolean('false') // true
    Boolean([]) // true
    Boolean({}) // true
    Boolean(function () {}) // true
    Boolean(/foo/) // true
    + +

    上面代码中几种得到true的情况，都值得认真记住。

    +
    +

    直接使用上面方法括号内的参数进行if逻辑运行相当于调用了Boolean方法并传入参数

    +
    +

    顺便提一下，使用双重的否运算符（!）也可以将任意值转为对应的布尔值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    !!undefined // false
    !!null // false
    !!0 // false
    !!'' // false
    !!NaN // false

    !!1 // true
    !!'false' // true
    !![] // true
    !!{} // true
    !!function(){} // true
    !!/foo/ // true
    + + + +

    最后，对于一些特殊值，Boolean对象前面加不加new，会得到完全相反的结果，必须小心。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    if (Boolean(false)) {
      console.log('true');
    } // 无输出

    if (new Boolean(false)) { // 加new 转为对象，对象为true
      console.log('true');
    } // true

    if (Boolean(null)) {
      console.log('true');
    } // 无输出

    if (new Boolean(null)) { // 加new 转为对象，对象为true
      console.log('true');
    } // true
    + + + +

    六、Number对象

    1、概述

    Number对象是数值对应的包装对象，可以作为构造函数使用，也可以作为工具函数使用。

    +

    作为构造函数时，它用于生成值为数值的对象。

    +
    1
    2
    3
    var n =new Number(1) // 作为构造函数时，生成值为数值的对象
    typeof n // object
    n.valueOf() // 1
    + +

    上面代码中，Number对象作为构造函数使用，返回一个值为1的对象。

    +

    作为工具函数时，它可以将任何类型的值转为数值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    Number(true) // 1

    Number(false) // 0
    Number(null) // 0
    Number([]) // 0
    Number('') // 0

    Number({}) // NaN
    Number(undefined) // NaN

    Number('123')// 123
    + +

    上面代码将布尔值true转为数值1。Number作为工具函数的用法，详见《数据类型转换》一章。

    +

    2、静态属性

    Number对象拥有以下一些静态属性（即直接定义在Number对象上的属性，而不是定义在实例上的属性）。

    +
      +
    • Number.POSITIVE_INFINITY：正的无限，指向Infinity。
      • +
    • Number.NEGATIVE_INFINITY：负的无限，指向-Infinity。
      • +
    • Number.NaN：表示非数值，指向NaN。
      • +
    • Number.MAX_VALUE：表示最大的正数1.7976931348623157e+308，相应的，最小的负数为-Number.MAN_VALUE。
      • +
    • Number.MIN_VALUE：表示最小的正数（即最接近0的正数，在64位浮点数体系中为5e-324），相应的，最接近0的负数为-Number.MIN_VALUE。
      • +
    • Number.MAX_SAFE_INTEGER：表示能够精确表示的最大整数，即9007199254740991。
      • +
    • Number.MIN_SAFE_INTEGER：表示能够精确表示的最小整数，即-9007199254740991。
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    Number.POSITIVE_INFINITY // Infinity
    Number.NEGATIVE_INFINITY // -Infinity
    Number.NaN // NaN

    Number.MAX_VALUE
    // 1.7976931348623157e+308
    Number.MAX_VALUE < Infinity
    // true

    Number.MIN_VALUE
    // 5e-324
    Number.MIN_VALUE > 0
    // true

    Number.MAX_SAFE_INTEGER // 9007199254740991
    Number.MIN_SAFE_INTEGER // -9007199254740991
    + +

    3、实例方法

    Number对象有4个实例方法，都跟将数值转换成指定格式有关。

    +

    3.1 Number.prototype.toString() 可转成多种进制字符串

    Number对象部署了自己的toString方法，用来将一个数值转为字符串形式。

    +
    1
    (10).toString() // "10"
    + +

    toString方法可以接受一个参数，表示输出的进制。如果省略这个参数，默认将数值先转为十进制，再输出字符串；否则，就根据参数指定的进制，将一个数字转化成某个进制的字符串。

    +
    1
    2
    3
    (10).toString(2) // "1010"
    (10).toString(8) // "12"
    (10).toString(16) // "a"
    + +

    上面代码中，10一定要放在括号里，这样表明后面的点表示调用对象属性。如果不加括号，这个点会被 JavaScript 引擎解释成小数点，从而报错。

    +
    1
    2
    10.toString(2) // 不加括号会把点解释成小数点，从而报错
    // SyntaxError: Unexpected token ILLEGAL
    + +

    只要能够让 JavaScript 引擎不混淆小数点和对象的点运算符，各种写法都能用。除了为10加上括号，还可以在10后面加两个点，JavaScript 会把第一个点理解成小数点（即10.0），把第二个点理解成调用对象属性，从而得到正确结果。

    +
    1
    2
    3
    4
    5
    6
    10..toString(2)
    // "1010"

    // 其他方法还包括
    10 .toString(2) // "1010"
    10.0.toString(2) // "1010"
    + +

    这实际上意味着，可以直接对一个小数使用toString方法。

    +
    1
    2
    3
    4
    10.5.toString() // "10.5"
    10.5.toString(2) // "1010.1"
    10.5.toString(8) // "12.4"
    10.5.toString(16) // "a.8"
    + +

    通过方括号运算符也可以调用toString方法。

    +
    1
    10['toString'](2) // "1010"
    + +

    toString方法只能将十进制的数，转为其他进制的字符串。如果要将其他进制的数，转回十进制，需要使用parseInt方法。

    +

    3.2 Number.prototype.toFixed() 转成保留指定小数位数的字符串

    toFixed()方法先将一个数转为指定位数的小数，然后返回这个小数对应的字符串。

    +
    1
    2
    (10).toFixed(2) // "10.00"
    10.005.toFixed(2) // "10.01"
    + +

    上面代码中，10和10.005先转成2位小数，然后转成字符串。其中10必须放在括号里，否则后面的点会被处理成小数点。

    +

    toFixed()方法的参数为小数位数，有效范围为0到20，超出这个范围将抛出 RangeError 错误。

    +

    由于浮点数的原因，小数5的四舍五入是不确定的，使用的时候必须小心。

    +
    1
    2
    (10.055).toFixed(2) // 10.05
    (10.005).toFixed(2) // 10.01
    + +

    3.3 Number.prototype.toExponential() 转成科学计数法形式字符串

    toExponential方法用于将一个数转为科学计数法形式。

    +
    1
    2
    3
    4
    5
    6
    7
    (10).toExponential()  // "1e+1"
    (10).toExponential(1) // "1.0e+1"
    (10).toExponential(2) // "1.00e+1"

    (1234).toExponential()  // "1.234e+3"
    (1234).toExponential(1) // "1.2e+3"
    (1234).toExponential(2) // "1.23e+3"
    + +

    toExponential方法的参数是小数点后有效数字的位数，范围为0到20，超出这个范围，会抛出一个 RangeError 错误。

    +

    3.4 Number.prototype.toPrecision()转为指定位数的有效数字

    Number.prototype.toPrecision()方法用于将一个数转为指定位数的有效数字。

    +
    1
    2
    3
    4
    5
    (12.34).toPrecision(1) // "1e+1"
    (12.34).toPrecision(2) // "12"
    (12.34).toPrecision(3) // "12.3"
    (12.34).toPrecision(4) // "12.34"
    (12.34).toPrecision(5) // "12.340"
    + +

    该方法的参数为有效数字的位数，范围是1到21，超出这个范围会抛出 RangeError 错误。

    +

    该方法用于四舍五入时不太可靠，跟浮点数不是精确储存有关。

    +
    1
    2
    3
    4
    (12.35).toPrecision(3) // "12.3"
    (12.25).toPrecision(3) // "12.3"
    (12.15).toPrecision(3) // "12.2"
    (12.45).toPrecision(3) // "12.4"
    + +

    4.5 Number.prototype.toLocaleString()

    Number.prototype.toLocaleString()方法接受一个地区码作为参数，返回一个字符串，表示当前数字在该地区的当地书写形式。

    +
    1
    2
    (123).toLocaleString('zh-Hans-CN-u-nu-hanidec')
    // "一二三"
    + +

    该方法还可以接受第二个参数配置对象，用来定制指定用途的返回字符串。该对象的style属性指定输出样式，默认值是decimal，表示输出十进制形式。如果值为percent，表示输出百分数。

    +
    1
    2
    (123).toLocaleString('zh-Hans-CN', { style: 'persent' })
    // "12,300%"
    + +

    如果style属性的值为currency，则可以搭配currency属性，输出指定格式的货币字符串形式。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    (123).toLocaleString('zh-Hans-CN', { style: 'currency', currency: 'CNY' })
    // "￥123.00"

    (123).toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })
    // "123,00 €"

    (123).toLocaleString('en-US', { style: 'currency', currency: 'USD' })
    // "$123.00"
    + +

    如果Number.prototype.toLocaleString()省略了参数，则由浏览器自行决定如何处理，通常会使用操作系统的地区设定。注意，该方法如果使用浏览器不认识的地区码，会抛出一个错误。

    +
    1
    (123).toLocaleString('123') // 出错
    + + + +

    应用-添加千位分隔符

    1
    2
    (123456.789).toLocaleString()
    // 输出 "123,456.789"，常用。
    + +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    (1234566).toLocaleString('zh-Hans-CN-u-nu-hanidec');
    // 输出"一,二三四,五六六"

    (1234566).toLocaleString('zh-Hans-CN-u-nu-hanidec',{useGrouping: true});
    // 给.toLocaleString()加第二个参数，依然输出"一,二三四,五六六"

    // 不带千位分隔符
    (1234566).toLocaleString('zh-Hans-CN-u-nu-hanidec',{useGrouping: false});
    // 输出"一二三四五六六"，这个比较有用，也就是最简单的将阿拉伯数字变成汉字的办法。
    + + + +

    4、自定义方法

    与其他对象一样，Number.prototype对象上面可以自定义方法，被Number的实例继承。

    +
    1
    2
    3
    4
    5
    Number.prototype.add = function (x) {
      return this + x;
    };

    8['add'](2) // 10
    + +

    上面代码为Number对象实例定义了一个add方法。在数值上调用某个方法，数值会自动转为Number的实例对象，所以就可以调用add方法了。由于add方法返回的还是数值，所以可以链式运算。

    +
    1
    2
    3
    4
    5
    6
    Number.prototype.subtract = function (x) {
      return this - x;
    };

    (8).add(2).subtract(4)
    // 6
    + +

    上面代码在Number对象的实例上部署了subtract方法，它可以与add方法链式调用。

    +

    我们还可以部署更复杂的方法。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    Number.prototype.iterate = function () {
      var result = [];
      for (var i = 0; i <= this; i++) {
        result.push(i);
      }
      return result;
    };

    (8).iterate()
    // [0, 1, 2, 3, 4, 5, 6, 7, 8]
    + +

    上面代码在Number对象的原型上部署了iterate方法，将一个数值自动遍历为一个数组。

    +

    注意，数值的自定义方法，只能定义在它的原型对象Number.prototype上面，数值本身是无法自定义属性的。

    +
    1
    2
    3
    var n = 1;
    n.x = 1;
    n.x // undefined
    + +

    上面代码中，n是一个原始类型的数值。直接在它上面新增一个属性x，不会报错，但毫无作用，总是返回undefined。这是因为一旦被调用属性，n就自动转为Number的实例对象，调用结束后，该对象自动销毁。所以，下一次调用n的属性时，实际取到的是另一个对象，属性x当然就读不出来。

    +

    七、String对象

    1、概述

    String对象是 JavaScript 原生提供的三个包装对象之一，用来生成字符串对象。

    +
    1
    2
    3
    4
    5
    6
    7
    var s1 = 'abc';
    var s2 = new String('abc'); // 使用new关键字会变成包装对象

    typeof s1 // "string"
    typeof s2 // "object"

    s2.valueOf() // "abc"
    + +

    上面代码中，变量s1是字符串，s2是对象。由于s2是字符串对象，s2.valueOf方法返回的就是它所对应的原始字符串。

    +

    字符串对象是一个类似数组的对象（很像数组，但不是数组）。

    +
    1
    2
    3
    4
    var strObj = new String('abc')
    // String {0: "a", 1: "b", 2: "c", length: 3}

    strObj[1] // "b"
    + +

    上面代码中，字符串abc对应的字符串对象，有数值键（0、1、2）和length属性，所以可以像数组那样取值。

    +

    除了用作构造函数，String对象还可以当作工具方法使用，将任意类型的值转为字符串。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    String(true) // "true"
    String(false) // "false"
    String(5) // "5"
    String(null) // 'null'
    String(undefined) //'undefined'
    String({}) // '[object Object]'
    String([]) // ''
    String(['1','2']) // '1,2'
    + +

    上面代码将各种类型的值，分别转换为字符串。

    +

    2、静态方法

    String.fromCharCode()

    String对象提供的静态方法（即定义在对象本身，而不是定义在对象实例的方法），主要是String.fromCharCode()。该方法的参数是一个或多个数值，代表 Unicode 码点，返回值是这些码点组成的字符串。

    +
    1
    2
    3
    4
    String.fromCharCode() // ""
    String.fromCharCode(97) // "a"
    String.fromCharCode(104, 101, 108, 108, 111)
    // "hello"
    + +

    上面代码中，String.fromCharCode方法的参数为空，就返回空字符串；否则，返回参数对应的 Unicode 字符串。

    +

    注意，该方法不支持 Unicode 码点大于0xFFFF的字符，即传入的参数不能大于0xFFFF（即十进制的 65535）。

    +
    1
    2
    3
    4
    String.fromCharCode(0x20BB7)
    // "ஷ"
    String.fromCharCode(0x20BB7) === String.fromCharCode(0x0BB7)
    // true
    + +

    上面代码中，String.fromCharCode参数0x20BB7大于0xFFFF，导致返回结果出错。0x20BB7对应的字符是汉字𠮷，但是返回结果却是另一个字符（码点0x0BB7）。这是因为String.fromCharCode发现参数值大于0xFFFF，就会忽略多出的位（即忽略0x20BB7里面的2）。

    +

    这种现象的根本原因在于，码点大于0xFFFF的字符占用四个字节，而 JavaScript 默认支持两个字节的字符。这种情况下，必须把0x20BB7拆成两个字符表示。

    +
    1
    2
    String.fromCharCode(0xD842, 0xDFB7)
    // "𠮷"
    + +

    上面代码中，0x20BB7拆成两个字符0xD842和0xDFB7（即两个两字节字符，合成一个四字节字符），就能得到正确的结果。码点大于0xFFFF的字符的四字节表示法，由 UTF-16 编码方法决定。

    +

    3、实例属性

    String.prototype.length

    字符串实例的length属性返回字符串的长度。

    +
    1
    'abc'.length // 3
    + + + +

    4、实例方法

    4.1 String.prototype.charAt() 返回指定位置的字符

    charAt方法返回指定位置的字符，参数是从0开始编号的位置。

    +
    1
    2
    3
    4
    var s = new String('abc');

    s.charAt(1) // "b"
    s.charAt(s.length - 1) // "c"
    + +

    这个方法完全可以用数组下标替代。

    +
    1
    2
    'abc'.charAt(1) // "b"
    'abc'[1] // "b"
    + +

    如果参数为负数，或大于等于字符串的长度，charAt返回空字符串。

    +
    1
    2
    'abc'.charAt(-1) // ""
    'abc'.charAt(3) // ""
    + + + +

    4.2 String.prototype.charCodeAt()返回字符串指定位置的 Unicode 码点（十进制表示）

    charCodeAt方法返回字符串指定位置的 Unicode 码点（十进制表示），相当于String.fromCharCode()的逆操作。

    +
    1
    'abc'.charCodeAt(1) // 98
    + +

    上面代码中，abc的1号位置的字符是b，它的 Unicode 码点是98。

    +

    如果没有任何参数，charCodeAt返回首字符的 Unicode 码点。

    +
    1
    'abc'.charCodeAt() // 97
    + +

    如果参数为负数，或大于等于字符串的长度，charCodeAt返回NaN。

    +
    1
    2
    'abc'.charCodeAt(-1) // NaN
    'abc'.charCodeAt(4) // NaN
    + +

    注意，charCodeAt方法返回的 Unicode 码点不会大于65536（0xFFFF），也就是说，只返回两个字节的字符的码点。如果遇到码点大于 65536 的字符（四个字节的字符），必需连续使用两次charCodeAt，不仅读入charCodeAt(i)，还要读入charCodeAt(i+1)，将两个值放在一起，才能得到准确的字符。

    +

    4.3 String.prototype.concat() 合并字符串，返回新字符串，不改变原字符串

    concat方法用于连接两个字符串，返回一个新字符串，不改变原字符串。

    +
    1
    2
    3
    4
    5
    var s1 = 'abc';
    var s2 = 'def';

    s1.concat(s2) // "abcdef"
    s1 // "abc"
    + +

    该方法可以接受多个参数。

    +
    1
    'a'.concat('b', 'c') // "abc"
    + +

    如果参数不是字符串，concat方法会将其先转为字符串，然后再连接。

    +
    1
    2
    3
    4
    5
    6
    var one = 1;
    var two = 2;
    var three = '3';

    ''.concat(one, two, three) // "123"
    one + two + three // "33"
    + +

    上面代码中，concat方法将参数先转成字符串再连接，所以返回的是一个三个字符的字符串。作为对比，加号运算符在两个运算数都是数值时，不会转换类型，所以返回的是一个两个字符的字符串。

    +

    4.4 String.prototype.slice() 取出部分子字符串，不改变原字符串

    slice方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。

    +
    1
    'JavaScript'.slice(0, 4) // "Java"
    + +

    如果省略第二个参数，则表示子字符串一直到原字符串结束。

    +
    1
    'JavaScript'.slice(4) // "Script" 省略参数二，会取到结束
    + +

    如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。

    +
    负数表示倒数
    1
    2
    3
    'JavaScript'.slice(-6) // "Script"
    'JavaScript'.slice(0, -6) // "Java"
    'JavaScript'.slice(-2, -1) // "p"
    + +

    如果第一个参数大于第二个参数，slice方法返回一个空字符串。

    +
    1
    'JavaScript'.slice(2, 1) // ""
    + + + +

    4.5 String.prototype.substring() 和slice类似

    substring方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice方法很相像。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）。

    +
    1
    'JavaScript'.substring(0, 4) // "Java"
    + +

    如果省略第二个参数，则表示子字符串一直到原字符串的结束。

    +
    1
    'JavaScript'.substring(4) // "Script" 省略参数二，会取到结束
    + +

    如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置。

    +
    1
    2
    3
    'JavaScript'.substring(10, 4) // "Script"   // substring自动更换位置，slice则是返回空字符
    // 等同于
    'JavaScript'.substring(4, 10) // "Script"
    + +

    上面代码中，调换substring方法的两个参数，都得到同样的结果。

    +

    如果参数是负数，substring方法会自动将负数转为0。

    +
    1
    2
    'JavaScript'.substring(-3) // "JavaScript"  // substring负数自动转为0，slice负数表示倒数
    'JavaScript'.substring(4, -3) // "Java"
    + +

    上面代码中，第二个例子的参数-3会自动变成0，等同于'JavaScript'.substring(4, 0)。由于第二个参数小于第一个参数，会自动互换位置，所以返回Java。

    +

    由于这些规则违反直觉，因此**不建议使用substring方法，应该优先使用slice**。

    +

    小总结：substring() 和 slice() 的区别，有两个。

    +
      +
    • 负数参数：substring负数自动转为0，slice负数表示倒数
      • +
    • 参数一大于参数二：substring自动更换位置，slice则是返回空字符
      • +
    +
    +

    4.6 String.prototype.substr() 和 slice、substring类似，区别是参数二表示长度

    substr方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice和substring方法的作用相同。

    +

    substr方法的第一个参数是子字符串的开始位置（从0开始计算），第二个参数是子字符串的长度。

    +
    1
    'JavaScript'.substr(4, 6) // "Script"
    + +

    如果省略第二个参数，则表示子字符串一直到原字符串的结束。

    +
    1
    'JavaScript'.substr(4) // "Script" 省略参数二，会取到结束
    + +

    如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串。

    +
    1
    2
    'JavaScript'.substr(-6) // "Script" 参数一是负数表示倒数
    'JavaScript'.substr(4, -1) // ""  参数二是负数转为0
    + +

    上面代码中，第二个例子的参数-1自动转为0，表示子字符串长度为0，所以返回空字符串。

    +

    4.7 String.prototype.indexOf() 搜索子串第一个出现的位置，String.prototype.lastIndexOf() 搜索子串最后出现的位置

    indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1，就表示不匹配。

    +
    1
    2
    'hello world'.indexOf('o') // 4
    'JavaScript'.indexOf('script') // -1
    + +

    indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配。

    +
    1
    'hello world'.indexOf('o', 6) // 7
    + +

    lastIndexOf方法的用法跟indexOf方法一致，主要的区别是lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配。

    +
    1
    'hello world'.lastIndexOf('o') // 7
    + +

    另外，lastIndexOf的第二个参数表示从该位置起向前匹配。

    +
    1
    'hello world'.lastIndexOf('o', 6) // 4
    + + + +

    4.8 String.prototype.trim() ‘’修剪’‘两端空格，不改变原字符串

    trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。

    +
    1
    2
    '  hello world  '.trim()
    // "hello world"
    + +

    该方法去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）。

    +
    1
    '\r\nabc \t'.trim() // 'abc'
    + + + +

    4.9 String.prototype.toLowerCase() 全转小写，String.prototype.toUpperCase() 全转大写，都不改变原字符串

    toLowerCase方法用于将一个字符串全部转为小写，toUpperCase则是全部转为大写。它们都返回一个新字符串，不改变原字符串。

    +
    1
    2
    3
    4
    5
    'Hello World'.toLowerCase()
    // "hello world"

    'Hello World'.toUpperCase()
    // "HELLO WORLD"
    + + + +

    4.10 String.prototype.match() 匹配子串，返回数组（数组带index、input属性）

    match方法用于确定原字符串是否匹配某个子字符串，返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    'cat, bat, sat, fat'.match('at') // ["at"]
    // ["at", index: 1, input: "cat, bat, sat, fat", groups: undefined]

    'catbatsatbat'.match('bat') // ["bat"]
    //["bat", index: 3, input: "catbatsatbat", groups: undefined]
    // index属性为bat首次出现的索引

    'cat, bat, sat, fat'.match('xt') // null
    + +

    返回的数组还有**index属性和input属性，分别表示匹配字符串开始的位置和原始字符串**。

    +
    1
    2
    3
    var matches = 'cat, bat, sat, fat'.match('at');
    matches.index // 1  子串首次出现的索引位置
    matches.input // "cat, bat, sat, fat"
    + +

    match方法还可以使用正则表达式作为参数，详见《正则表达式》一章。

    +

    4.11 String.prototype.search() 搜索子串第一次出现的位置，没有则返-1，String.prototype.replace() 替换子串，参数二替换参数一，不改变原字符串

    search方法的用法基本等同于match，但是返回值为匹配的第一个位置。如果没有找到匹配，则返回-1。

    +
    1
    'cat, bat, sat, fat'.search('at') // 1
    + +

    search方法还可以使用正则表达式作为参数，详见《正则表达式》一节。

    +

    replace方法用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。

    +
    1
    2
    3
    4
    var str = 'aaa';
    str.replace('a', 'b') // "baa" 一般情况只替换第一个，除非带有g的正则
    str // 'aaa' 不改变原字符串
    str.replace('c','b') // 'aaa' 匹配不到返回原字符串
    + +

    replace方法还可以使用正则表达式作为参数，详见《正则表达式》一节。

    +

    4.12 String.prototype.split() 按给定规则分割字符串，返回数组

    split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。

    +
    1
    'a|b|c'.split('|') // ["a", "b", "c"]
    + +

    如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。

    +
    1
    'a|b|c'.split('') // ["a", "|", "b", "|", "c"]
    + +

    如果省略参数，则返回数组的唯一成员就是原字符串。

    +
    1
    'a|b|c'.split() // ["a|b|c"]
    + +

    如果满足分割规则的两个部分紧邻着（即两个分割符中间没有其他字符），则返回数组之中会有一个空字符串。

    +
    1
    'a||c'.split('|') // ['a', '', 'c']
    + +

    如果满足分割规则的部分处于字符串的开头或结尾（即它的前面或后面没有其他字符），则返回数组的第一个或最后一个成员是一个空字符串。

    +
    1
    2
    '|b|c'.split('|') // ["", "b", "c"]
    'a|b|'.split('|') // ["a", "b", ""]
    + +

    split方法还可以接受第二个参数，限定返回数组的最大成员数（数组长度）。

    +
    1
    2
    3
    4
    5
    'a|b|c'.split('|', 0) // []
    'a|b|c'.split('|', 1) // ["a"]
    'a|b|c'.split('|', 2) // ["a", "b"]
    'a|b|c'.split('|', 3) // ["a", "b", "c"]
    'a|b|c'.split('|', 4) // ["a", "b", "c"]
    + +

    上面代码中，split方法的第二个参数，决定了返回数组的成员数。

    +

    split方法还可以使用正则表达式作为参数，详见《正则表达式》一节。

    +

    4.13 String.prototype.localeCompare() 比较两个字符串，返回整数。

    localeCompare方法 用于比较两个字符串。它返回一个整数，如果小于0，表示第一个字符串小于第二个字符串；如果等于0，表示两者相等；如果大于0，表示第一个字符串大于第二个字符串。

    +
    1
    2
    'apple'.localeCompare('banana') // -1
    'apple'.localeCompare('apple') // 0
    + +

    该方法的最大特点，就是会考虑自然语言的顺序。举例来说，正常情况下，大写的英文字母小于小写字母。

    +
    1
    'B' > 'a' // false
    + +

    上面代码中，字母B小于字母a。因为 JavaScript 采用的是 Unicode 码点比较，B的码点是66，而a的码点是97。

    +

    但是，localeCompare方法会考虑自然语言的排序情况，将B排在a的前面。

    +
    1
    'B'.localeCompare('a') // 1
    + +

    上面代码中，localeCompare方法返回整数1，表示B较大。

    +

    localeCompare还可以有第二个参数，指定所使用的语言（默认是英语），然后根据该语言的规则进行比较。

    +
    1
    2
    'ä'.localeCompare('z', 'de') // -1
    'ä'.localeCompare('z', 'sv') // 1
    + +

    上面代码中，de表示德语，sv表示瑞典语。德语中，ä小于z，所以返回-1；瑞典语中，ä大于z，所以返回1。

    +

    八、Math对象

    Math是 JavaScript 的原生对象，提供各种数学功能。该对象不是构造函数，不能生成实例，所有的属性和方法都必须在Math对象上调用。

    +

    1、静态属性

    Math对象的静态属性，提供以下一些数学常数。

    +
      +
    • Math.E：常数e。
      • +
    • Math.LN2：2 的自然对数。
      • +
    • Math.LN10：10 的自然对数。
      • +
    • Math.LOG2E：以 2 为底的e的对数。
      • +
    • Math.LOG10E：以 10 为底的e的对数。
      • +
    • Math.PI：常数π。
      • +
    • Math.SQRT1_2：0.5 的平方根。
      • +
    • Math.SQRT2：2 的平方根。
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    Math.E // 2.718281828459045
    Math.LN2 // 0.6931471805599453
    Math.LN10 // 2.302585092994046
    Math.LOG2E // 1.4426950408889634
    Math.LOG10E // 0.4342944819032518
    Math.PI // 3.141592653589793
    Math.SQRT1_2 // 0.7071067811865476
    Math.SQRT2 // 1.4142135623730951
    + +

    这些属性都是只读的，不能修改。

    +

    2、静态方法

    Math对象提供以下一些静态方法。

    +
      +
    • Math.abs()：绝对值
      • +
    • Math.ceil()：向上取整
      • +
    • Math.floor()：向下取整
      • +
    • Math.max()：最大值
      • +
    • Math.min()：最小值
      • +
    • Math.pow()：指数运算
      • +
    • Math.sqrt()：平方根
      • +
    • Math.log()：自然对数
      • +
    • Math.exp()：e的指数
      • +
    • Math.round()：四舍五入
      • +
    • Math.random()：随机数
      • +
    +

    2.1 Math.abs() 绝对值

    Math.abs方法返回参数值的绝对值。

    +
    1
    2
    Math.abs(1) // 1
    Math.abs(-1) // 1
    + +

    2.2 Math.max() 最大值，Math.min()最 小值

    Math.max方法返回参数之中最大的那个值，Math.min返回最小的那个值。如果参数为空, Math.min返回Infinity, Math.max返回-Infinity。

    +
    1
    2
    3
    4
    Math.max(2, -1, 5) // 5
    Math.min(2, -1, 5) // -1
    Math.min() // Infinity
    Math.max() // -Infinity
    + +

    2.3 Math.floor() 向下取整，Math.ceil() 向上取整

    Math.floor方法返回小于参数值的最大整数（地板值）。

    +
    1
    2
    Math.floor(3.2) // 3
    Math.floor(-3.2) // -4
    + +

    Math.ceil方法返回大于参数值的最小整数（天花板值）。

    +
    1
    2
    Math.ceil(3.2) // 4
    Math.ceil(-3.2) // -3
    + +

    这两个方法可以结合起来，实现一个总是返回数值的整数部分的函数。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function ToInteger(x) {
      x = Number(x);
      return x < 0 ? Math.ceil(x) : Math.floor(x);
    }

    ToInteger(3.2) // 3
    ToInteger(3.5) // 3
    ToInteger(3.8) // 3
    ToInteger(-3.2) // -3
    ToInteger(-3.5) // -3
    ToInteger(-3.8) // -3
    + +

    上面代码中，不管正数或负数，ToInteger函数总是返回一个数值的整数部分。

    +

    2.4 Math.round() 四舍五入

    Math.round方法用于四舍五入。

    +
    1
    2
    3
    Math.round(0.1) // 0
    Math.round(0.5) // 1
    Math.round(0.6) // 1
    + +

    注意，它对负数的处理（主要是对.5的处理）。

    +
    1
    2
    3
    Math.round(-1.1) // -1
    Math.round(-1.5) // -1
    Math.round(-1.6) // -2
    + +

    2.5 Math.pow() 指数运算 （次方运算）

    Math.pow方法返回以第一个参数为底数、第二个参数为幂的指数值。

    +
    1
    2
    3
    4
    // 等同于 2 ** 2
    Math.pow(2, 2) // 4   2的2次方
    // 等同于 2 ** 3
    Math.pow(2, 3) // 8   2的3次方
    + +

    下面是计算圆面积的方法。

    +
    1
    2
    var radius = 20;
    var area = Math.PI * Math.pow(radius, 2); // 1256.6370614359173
    + +

    2.6 Math.sqrt() 平方根

    Math.sqrt方法返回参数值的平方根。如果参数是一个负值，则返回NaN。

    +
    1
    2
    Math.sqrt(4) // 2
    Math.sqrt(-4) // NaN
    + +

    2.7 Math.log() 自然对数

    Math.log方法返回以e为底的自然对数值。

    +
    1
    2
    Math.log(Math.E) // 1
    Math.log(10) // 2.302585092994046
    + +

    如果要计算以10为底的对数，可以先用Math.log求出自然对数，然后除以Math.LN10；求以2为底的对数，可以除以Math.LN2。

    +
    1
    2
    Math.log(100)/Math.LN10 // 2
    Math.log(8)/Math.LN2 // 3
    + +

    2.8 Math.exp() e的指数

    Math.exp方法返回常数e的参数次方。

    +
    1
    2
    Math.exp(1) // 2.718281828459045
    Math.exp(3) // 20.085536923187668
    + +

    2.9 Math.random() 0到1的随机数（可能等于0，但一定小于1）

    Math.random()返回0到1之间的一个伪随机数，可能等于0，但是一定小于1。

    +
    1
    Math.random() // 0.7151307314634323
    + +

    任意范围的随机数生成函数如下。

    +
    1
    2
    3
    4
    5
    6
    function getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min;
    }

    getRandomArbitrary(1.5, 6.5)
    // 2.4942810038223864
    + +

    任意范围的随机整数生成函数如下。

    +
    1
    2
    3
    4
    5
    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    getRandomInt(1, 6) // 5
    + +

    返回随机字符的例子如下。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    function random_str(length) {
      var ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      ALPHABET += 'abcdefghijklmnopqrstuvwxyz';
      ALPHABET += '0123456789-_';
      var str = '';
      for (var i = 0; i < length; ++i) {
        var rand = Math.floor(Math.random() * ALPHABET.length);
        str += ALPHABET.substring(rand, rand + 1);
      }
      return str;
    }

    random_str(6) // "NdQKOr" 参数为指定字符长度
    + +

    上面代码中，random_str函数接受一个整数作为参数，返回变量ALPHABET内的随机字符所组成的指定长度的字符串。

    +

    2.10 三角函数方法

    Math对象还提供一系列三角函数方法。

    +
      +
    • Math.sin()：返回参数的正弦（参数为弧度值）
      • +
    • Math.cos()：返回参数的余弦（参数为弧度值）
      • +
    • Math.tan()：返回参数的正切（参数为弧度值）
      • +
    • Math.asin()：返回参数的反正弦（返回值为弧度值）
      • +
    • Math.acos()：返回参数的反余弦（返回值为弧度值）
      • +
    • Math.atan()：返回参数的反正切（返回值为弧度值）
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    Math.sin(0) // 0
    Math.cos(0) // 1
    Math.tan(0) // 0

    Math.sin(Math.PI / 2) // 1

    Math.asin(1) // 1.5707963267948966
    Math.acos(1) // 0
    Math.atan(1) // 0.7853981633974483
    + +

    三角函数的应用相关知识：< https://www.w3cplus.com/javascript/trigonometry-you-must-know.html >

    +

    九、Date对象

    Date对象是 JavaScript 原生的时间库。它以国际标准时间（UTC）1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天（单位为毫秒）。

    +

    1、普通函数的用法

    Date对象可以作为普通函数直接调用，返回一个代表当前时间的字符串。

    +
    1
    2
    Date()
    // "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)" 字符串类型
    + +

    注意，即使带有参数，Date作为普通函数使用时，返回的还是当前时间。

    +
    1
    2
    Date(2000, 1, 1) // 作为普通函数使用时带有参数返回的也是当前时间
    // "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)"
    + +

    上面代码说明，无论有没有参数，直接调用Date总是返回当前时间。

    +

    2、构造函数的用法

    Date还可以当作构造函数使用。对它使用new命令，会返回一个Date对象的实例。如果不加参数，实例代表的就是当前时间。

    +
    1
    var today = new Date();
    + +

    Date实例有一个独特的地方。其他对象求值的时候，都是默认调用.valueOf()方法，但是Date实例求值的时候，默认调用的是toString()方法。这导致对Date实例求值，返回的是一个字符串，代表该实例对应的时间。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var today = new Date();

    today
    // "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)"

    // 等同于
    today.toString()
    // "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)"
    + +

    上面代码中，today是Date的实例，直接求值等同于调用toString方法。

    +

    作为构造函数时，Date对象可以接受多种格式的参数，返回一个该参数对应的时间实例。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 参数为时间零点开始计算的毫秒数
    new Date(1378218728000)
    // Tue Sep 03 2013 22:32:08 GMT+0800 (CST)

    // 参数为日期字符串
    new Date('January 6, 2013');
    // Sun Jan 06 2013 00:00:00 GMT+0800 (CST)

    // 参数为多个整数，
    // 代表年、月、日、小时、分钟、秒、毫秒
    new Date(2013, 0, 1, 0, 0, 0, 0)
    // Tue Jan 01 2013 00:00:00 GMT+0800 (CST)
    + +

    关于Date构造函数的参数，有几点说明。

    +

    第一点，参数可以是负整数，代表1970年元旦之前的时间。

    +
    1
    2
    new Date(-1378218728000)
    // Fri Apr 30 1926 17:27:52 GMT+0800 (CST)
    + +

    第二点，只要是能被Date.parse()方法解析的字符串，都可以当作参数。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    new Date('2013-2-15')
    new Date('2013/2/15')
    new Date('02/15/2013')
    new Date('2013-FEB-15')
    new Date('FEB, 15, 2013')
    new Date('FEB 15, 2013')
    new Date('February, 15, 2013')
    new Date('February 15, 2013')
    new Date('15 Feb 2013')
    new Date('15, February, 2013')
    // Fri Feb 15 2013 00:00:00 GMT+0800 (CST)
    + +

    上面多种日期字符串的写法，返回的都是同一个时间。

    +

    第三，参数为年、月、日等多个整数时，年和月是不能省略的，其他参数都可以省略的。也就是说，这时至少需要两个参数，因为如果只使用“年”这一个参数，Date会将其解释为毫秒数。

    +
    1
    2
    new Date(2013) // 只有一个数字的参数会解释为毫秒数
    // Thu Jan 01 1970 08:00:02 GMT+0800 (CST)
    + +

    上面代码中，2013被解释为毫秒数，而不是年份。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    new Date(2013, 0)
    // Tue Jan 01 2013 00:00:00 GMT+0800 (CST)
    new Date(2013, 0, 1)
    // Tue Jan 01 2013 00:00:00 GMT+0800 (CST)
    new Date(2013, 0, 1, 0)
    // Tue Jan 01 2013 00:00:00 GMT+0800 (CST)
    new Date(2013, 0, 1, 0, 0, 0, 0)
    // Tue Jan 01 2013 00:00:00 GMT+0800 (CST)
    + +

    上面代码中，不管有几个参数，返回的都是2013年1月1日零点。

    +

    最后，各个参数的取值范围如下。

    +
      +
    • 年：使用四位数年份，比如2000。如果写成两位数或个位数，则加上1900，即10代表1910年。如果是负数，表示公元前。
      • +
    • 月：**0表示一月，依次类推，11表示12月**。
      • +
    • 日：1到31。
      • +
    • 小时：0到23。
      • +
    • 分钟：0到59。
      • +
    • 秒：0到59
      • +
    • 毫秒：0到999。
      • +
    +

    注意，月份从0开始计算，但是，天数从1开始计算。另外，除了日期的默认值为1，小时、分钟、秒钟和毫秒的默认值都是0。

    +

    这些参数如果超出了正常范围，会被自动折算。比如，如果月设为15，就折算为下一年的4月。

    +
    1
    2
    3
    4
    new Date(2013, 15)
    // Tue Apr 01 2014 00:00:00 GMT+0800 (CST)
    new Date(2013, 0, 0)
    // Mon Dec 31 2012 00:00:00 GMT+0800 (CST)
    + +

    上面代码的第二个例子，日期设为0，就代表上个月的最后一天。

    +

    参数还可以使用负数，表示扣去的时间。

    +
    1
    2
    3
    4
    new Date(2013, -1)
    // Sat Dec 01 2012 00:00:00 GMT+0800 (CST)
    new Date(2013, 0, -1)
    // Sun Dec 30 2012 00:00:00 GMT+0800 (CST)
    + +

    上面代码中，分别对月和日使用了负数，表示从基准日扣去相应的时间。

    +

    3、日期的运算

    类型自动转换时，Date实例如果转为数值，则等于对应的毫秒数；如果转为字符串，则等于对应的日期字符串。所以，两个日期实例对象进行减法运算时，返回的是它们间隔的毫秒数；进行加法运算时，返回的是两个字符串连接而成的新字符串。

    +
    1
    2
    3
    4
    5
    6
    7
    var d1 = new Date(2000, 2, 1);
    var d2 = new Date(2000, 3, 1);

    d2 - d1 // 减法运算返回毫秒数
    // 2678400000
    d2 + d1 // 加法运算返回日期字符串
    // "Sat Apr 01 2000 00:00:00 GMT+0800 (CST)Wed Mar 01 2000 00:00:00 GMT+0800 (CST)"
    + + + +

    4、静态方法

    4.1 Date.now() 当前时间戳

    Date.now方法返回当前时间距离时间零点（1970年1月1日 00:00:00 UTC）的毫秒数（即时间戳），相当于 Unix 时间戳乘以1000。

    +
    1
    Date.now() // 1364026285194
    + +

    4.2 Date.parse() 解析日期字符串，返回该时间点的时间戳

    Date.parse方法用来解析日期字符串，返回该时间距离时间零点（1970年1月1日 00:00:00）的毫秒数。

    +

    日期字符串应该符合 RFC 2822 和 ISO 8061 这两个标准，即YYYY-MM-DDTHH:mm:ss.sssZ格式，其中最后的Z表示时区。但是，其他格式也可以被解析，请看下面的例子。

    +
    1
    2
    3
    4
    5
    6
    Date.parse('Aug 9, 1995')
    Date.parse('January 26, 2011 13:51:50')
    Date.parse('Mon, 25 Dec 1995 13:30:00 GMT')
    Date.parse('Mon, 25 Dec 1995 13:30:00 +0430')
    Date.parse('2011-10-10')
    Date.parse('2011-10-10T14:48:00')
    + +

    上面的日期字符串都可以解析。

    +

    如果解析失败，返回NaN。

    +
    1
    Date.parse('xxx') // NaN
    + +

    4.3 Date.UTC() 以年、月、日等变量作为参数，返回该时间点的时间戳

    Date.UTC方法接受年、月、日等变量作为参数，返回该时间距离时间零点（1970年1月1日 00:00:00 UTC）的毫秒数。

    +
    1
    2
    3
    4
    5
    6
    // 格式
    Date.UTC(year, month[, date[, hrs[, min[, sec[, ms]]]]])

    // 用法
    Date.UTC(2011, 0, 1, 2, 3, 4, 567)
    // 1293847384567
    + +

    该方法的参数用法与Date构造函数完全一致，比如月从0开始计算，日期从1开始计算。区别在于Date.UTC方法的参数，会被解释为 UTC 时间（世界标准时间），Date构造函数的参数会被解释为当前时区的时间。

    +

    5、实例方法

    Date的实例对象，有几十个自己的方法，除了valueOf和toString，可以分为以下三类。

    +
      +
    • to类：从Date对象返回一个字符串，表示指定的时间。
      • +
    • get类：获取Date对象的日期和时间。
      • +
    • set类：设置Date对象的日期和时间。
      • +
    +

    5.1 Date.prototype.valueOf() 返回时间戳，等同于getTime()。（减法运算默认调用）

    valueOf方法返回实例对象距离时间零点（1970年1月1日00:00:00 UTC）对应的毫秒数，该方法等同于getTime方法。

    +
    1
    2
    3
    4
    var d = new Date();

    d.valueOf() // 1362790014817
    d.getTime() // 1362790014817
    + +

    预期为数值的场合，Date实例会自动调用该方法，所以可以用下面的方法计算时间的间隔。

    +
    1
    2
    3
    4
    var start = new Date();
    // ...
    var end = new Date();
    var elapsed = end - start; // 自动调用valueOf()方法，返回时间戳的减法运算
    + +

    5.2 to 类方法（返回字符串相关）

    （1）Date.prototype.toString() 返回一个完整的日期字符串（直接读取实例默认调用此方法）

    toString方法返回一个完整的日期字符串。

    +
    1
    2
    3
    4
    5
    6
    var d = new Date(2013, 0, 1);

    d.toString()
    // "Tue Jan 01 2013 00:00:00 GMT+0800 (CST)"
    d
    // "Tue Jan 01 2013 00:00:00 GMT+0800 (CST)"
    + +

    因为toString是默认的调用方法，所以如果直接读取Date实例，就相当于调用这个方法。

    +

    （2）Date.prototype.toUTCString() 返回对应的UTC时间（世界标准时），比北京时间晚8小时

    toUTCString方法返回对应的 UTC 时间，也就是比北京时间晚8个小时。

    +
    1
    2
    3
    4
    var d = new Date(2013, 0, 1);

    d.toUTCString()
    // "Mon, 31 Dec 2012 16:00:00 GMT"
    + + + +

    （3）Date.prototype.toISOString() 返回对应时间的 ISO8601 写法（UTC时间）

    toISOString方法返回对应时间的 ISO8601 写法。

    +
    1
    2
    3
    4
    var d = new Date(2013, 0, 1);

    d.toISOString()
    // "2012-12-31T16:00:00.000Z"
    + +

    注意，toISOString方法返回的总是 UTC 时区的时间。

    +

    （4）Date.prototype.toJSON() 返回符合JSON格式字符串，与toISOString方法的返回结果完全相同。

    toJSON方法返回一个符合 JSON 格式的 ISO 日期字符串，与toISOString方法的返回结果完全相同。

    +
    1
    2
    3
    4
    var d = new Date(2013, 0, 1);

    d.toJSON()
    // "2012-12-31T16:00:00.000Z"
    + + + +

    （5）Date.prototype.toDateString() 返回日期字符串（不含时分秒）

    toDateString方法返回日期字符串（不含小时、分和秒）。

    +
    1
    2
    var d = new Date(2013, 0, 1);
    d.toDateString() // "Tue Jan 01 2013"
    + + + +

    （6）Date.prototype.toTimeString() 返回时间字符串（不含年月日）

    toTimeString方法返回时间字符串（不含年月日）。

    +
    1
    2
    var d = new Date(2013, 0, 1);
    d.toTimeString() // "00:00:00 GMT+0800 (CST)"
    + + + +

    （7）本地时间

    以下三种方法，可以将 Date 实例转为表示本地时间的字符串。

    +
      +
    • Date.prototype.toLocaleString()：完整的本地时间。
      • +
    • Date.prototype.toLocaleDateString()：本地日期（不含小时、分和秒）。
      • +
    • Date.prototype.toLocaleTimeString()：本地时间（不含年月日）。
      • +
    +

    下面是用法实例。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var d = new Date(2013, 0, 1);

    d.toLocaleString()
    // 中文版浏览器为"2013年1月1日 上午12:00:00"
    // 英文版浏览器为"1/1/2013 12:00:00 AM"

    d.toLocaleDateString()
    // 中文版浏览器为"2013年1月1日"
    // 英文版浏览器为"1/1/2013"

    d.toLocaleTimeString()
    // 中文版浏览器为"上午12:00:00"
    // 英文版浏览器为"12:00:00 AM"
    + +

    这三个方法都有两个可选的参数。

    +
    1
    2
    3
    dateObj.toLocaleString([locales[, options]])
    dateObj.toLocaleDateString([locales[, options]])
    dateObj.toLocaleTimeString([locales[, options]])
    + +

    这两个参数中，locales是一个指定所用语言的字符串，options是一个配置对象。下面是locales的例子。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var d = new Date(2013, 0, 1);

    d.toLocaleString('en-US') // "1/1/2013, 12:00:00 AM"
    d.toLocaleString('zh-CN') // "2013/1/1 上午12:00:00"

    d.toLocaleDateString('en-US') // "1/1/2013"
    d.toLocaleDateString('zh-CN') // "2013/1/1"

    d.toLocaleTimeString('en-US') // "12:00:00 AM"
    d.toLocaleTimeString('zh-CN') // "上午12:00:00"
    + +

    下面是options的例子。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    var d = new Date(2013, 0, 1);

    // 时间格式
    // 下面的设置是，星期和月份为完整文字，年份和日期为数字
    d.toLocaleDateString('en-US', {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric'
    })
    // "Tuesday, January 1, 2013"

    // 指定时区
    d.toLocaleTimeString('en-US', {
      timeZone: 'UTC',
      timeZoneName: 'short'
    })
    // "4:00:00 PM UTC"

    d.toLocaleTimeString('en-US', {
      timeZone: 'Asia/Shanghai',
      timeZoneName: 'long'
    })
    // "12:00:00 AM China Standard Time"

    // 小时周期为12还是24
    d.toLocaleTimeString('en-US', {
      hour12: false
    })
    // "00:00:00"

    d.toLocaleTimeString('en-US', {
      hour12: true
    })
    // "12:00:00 AM"
    + + + +

    5.3 get类 （获取年、月、日、时、分、秒等）

    Date对象提供了一系列get*方法，用来获取实例对象某个方面的值。

    +
      +
    • getTime()：返回实例距离1970年1月1日00:00:00的毫秒数，等同于valueOf方法。（时间戳）
      • +
    • getDate()：返回实例对象对应每个月的几号（从1开始）。（日）
      • +
    • getDay()：返回星期几，星期日为0，星期一为1，以此类推。（星期）
      • +
    • getFullYear()：返回四位的年份。（年）
      • +
    • getMonth()：返回月份（0表示1月，11表示12月）。（月）
      • +
    • getHours()：返回小时（0-23）。（时）
      • +
    • getMilliseconds()：返回毫秒（0-999）。（毫秒）
      • +
    • getMinutes()：返回分钟（0-59）。（分）
      • +
    • getSeconds()：返回秒（0-59）。（秒）
      • +
    • getTimezoneOffset()：返回当前时间与 UTC 的时区差异，以分钟表示，返回结果考虑到了夏令时因素。（与UTC差异）
      • +
    +

    所有这些get*方法返回的都是整数，不同方法返回值的范围不一样。

    +
      +
    • 分钟和秒：0 到 59
      • +
    • 小时：0 到 23
      • +
    • 星期：0（星期天）到 6（星期六）
      • +
    • 日期：1 到 31
      • +
    • 月份：0（一月）到 11（十二月）
      • +
    +
    1
    2
    3
    4
    5
    6
    var d = new Date('January 6, 2013');

    d.getDate() // 6
    d.getMonth() // 0
    d.getFullYear() // 2013
    d.getTimezoneOffset() // -480   UTC时间减去当前时间，单位是分钟
    + +

    上面代码中，最后一行返回-480，即 UTC 时间减去当前时间，单位是分钟。-480表示 UTC 比当前时间少480分钟，即当前时区比 UTC 早8个小时。

    +
    例子：计算本年度还剩下多少天
    1
    2
    3
    4
    5
    6
    function leftDays() {
      var today = new Date();
      var endYear = new Date(today.getFullYear(), 11, 31, 23, 59, 59, 999);
      var msPerDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
      return Math.round((endYear.getTime() - today.getTime()) / msPerDay);
    }
    + +

    上面这些get*方法返回的都是当前时区的时间，Date对象还提供了这些方法对应的 UTC 版本，用来返回 UTC 时间。

    +

    获取UTC时区相关方法：

    +
      +
    • getUTCDate()
      • +
    • getUTCFullYear()
      • +
    • getUTCMonth()
      • +
    • getUTCDay()
      • +
    • getUTCHours()
      • +
    • getUTCMinutes()
      • +
    • getUTCSeconds()
      • +
    • getUTCMilliseconds()
      • +
    +
    1
    2
    3
    4
    var d = new Date('January 6, 2013');

    d.getDate() // 6
    d.getUTCDate() // 5
    + +

    上面代码中，实例对象d表示当前时区（东八时区）的1月6日0点0分0秒，这个时间对于当前时区来说是1月6日，所以getDate方法返回6，对于 UTC 时区来说是1月5日，所以getUTCDate方法返回5。

    +

    5.4 set 类方法

    Date对象提供了一系列set*方法，用来设置实例对象的各个方面。

    +
      +
    • setDate(date)：设置实例对象对应的每个月的几号（1-31），返回改变后毫秒时间戳。
      • +
    • setFullYear(year [, month, date])：设置四位年份。
      • +
    • setHours(hour [, min, sec, ms])：设置小时（0-23）。
      • +
    • setMilliseconds()：设置毫秒（0-999）。
      • +
    • setMinutes(min [, sec, ms])：设置分钟（0-59）。
      • +
    • setMonth(month [, date])：设置月份（0-11）。
      • +
    • setSeconds(sec [, ms])：设置秒（0-59）。
      • +
    • setTime(milliseconds)：设置毫秒时间戳。
      • +
    +

    这些方法基本是跟get*方法一一对应的，但是没有setDay方法，因为星期几是计算出来的，而不是设置的。另外，需要注意的是，凡是涉及到设置月份，都是从0开始算的，即0是1月，11是12月。

    +
    1
    2
    3
    4
    5
    var d = new Date ('January 6, 2013');

    d // Sun Jan 06 2013 00:00:00 GMT+0800 (CST)
    d.setDate(9) // 1357660800000
    d // Wed Jan 09 2013 00:00:00 GMT+0800 (CST)
    + +

    set*方法的参数都会自动折算。以setDate为例，如果参数超过当月的最大天数，则向下一个月顺延，如果参数是负数，表示从上个月的最后一天开始减去的天数。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var d1 = new Date('January 6, 2013');

    d1.setDate(32) // 1359648000000
    d1 // Fri Feb 01 2013 00:00:00 GMT+0800 (CST)

    var d2 = new Date ('January 6, 2013');

    d.setDate(-1) // 1356796800000
    d // Sun Dec 30 2012 00:00:00 GMT+0800 (CST)
    + +

    **set类方法和get类方法，可以结合使用，得到相对时间。**

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var d = new Date();

    // 将日期向后推1000天
    d.setDate(d.getDate() + 1000);
    // 将时间设为6小时后
    d.setHours(d.getHours() + 6);
    // 将年份设为去年
    d.setFullYear(d.getFullYear() - 1);
    + +

    set*系列方法除了setTime()，都有对应的 UTC 版本，即设置 UTC 时区的时间。

    +
      +
    • setUTCDate()
      • +
    • setUTCFullYear()
      • +
    • setUTCHours()
      • +
    • setUTCMilliseconds()
      • +
    • setUTCMinutes()
      • +
    • setUTCMonth()
      • +
    • setUTCSeconds()
      • +
    +
    1
    2
    3
    4
    var d = new Date('January 6, 2013');
    d.getUTCHours() // 16
    d.setUTCHours(22) // 1357423200000
    d // Sun Jan 06 2013 06:00:00 GMT+0800 (CST)
    + +

    上面代码中，本地时区（东八时区）的1月6日0点0分，是 UTC 时区的前一天下午16点。设为 UTC 时区的22点以后，就变为本地时区的上午6点。

    +

    十、RegExp 对象

    RegExp对象提供正则表达式的功能。

    +

    1、概述

    正则表达式（regular expression）是一种表达文本模式（即字符串结构）的方法，有点像字符串的模板，常常用来按照“给定模式”匹配文本。比如，正则表达式给出一个 Email 地址的模式，然后用它来确定一个字符串是否为 Email 地址。JavaScript 的正则表达式体系是参照 Perl 5 建立的。

    +

    新建正则表达式有两种方法：

    +

    一种是使用字面量，以斜杠表示开始和结束。

    +
    1
    var regex = /xyz/; // 效率较高，且直观，推荐。
    + +

    另一种是使用RegExp构造函数。

    +
    1
    var regex = new RegExp('xyz');
    + +

    上面两种写法是等价的，都新建了一个内容为xyz的正则表达式对象。它们的主要区别是，第一种方法在引擎编译代码时，就会新建正则表达式，第二种方法在运行时新建正则表达式，所以前者的效率较高。而且，前者比较便利和直观，所以实际应用中，基本上都采用字面量定义正则表达式。

    +

    RegExp构造函数还可以接受第二个参数，表示修饰符（详细解释见下文）。

    +
    1
    2
    3
    var regex = new RegExp('xyz', 'i'); // i为修饰符
    // 等价于
    var regex = /xyz/i;
    + +

    上面代码中，正则表达式/xyz/有一个修饰符i。

    +

    2、实例属性

    正则对象的实例属性分成两类。

    +

    一类是修饰符相关，用于了解设置了什么修饰符。

    +
      +
    • RegExp.prototype.ignoreCase：返回一个布尔值，表示是否设置了i修饰符。
      • +
    • RegExp.prototype.global：返回一个布尔值，表示是否设置了g修饰符。
      • +
    • RegExp.prototype.multiline：返回一个布尔值，表示是否设置了m修饰符。
      • +
    • RegExp.prototype.flags：返回一个字符串，包含了已经设置的所有修饰符，按字母排序。
      • +
    +

    上面四个属性都是只读的。

    +
    1
    2
    3
    4
    5
    6
    var r = /abc/igm;

    r.ignoreCase // true 是否设置i修饰符
    r.global // true 是否设置g修饰符
    r.multiline // true 是否设置m修饰符
    r.flags // 'gim' 字符串，包含设置的所有修饰符，按字母排序
    + +

    另一类是与修饰符无关的属性，主要是下面两个。

    +
      +
    • RegExp.prototype.lastIndex：返回一个整数，表示下一次开始搜索的位置。该属性可读写，但是只在进行连续搜索时有意义，详细介绍请看后文。
      • +
    • RegExp.prototype.source：返回正则表达式的字符串形式（不包括反斜杠），该属性只读。
      • +
    +
    1
    2
    3
    4
    var r = /abc/igm;

    r.lastIndex // 0
    r.source // "abc" 正则表达式的字符串形式
    + + + +

    3、实例方法

    3.1 RegExp.prototype.test() 当前模式是否匹配参数字符串，返回布尔值

    正则实例对象的test方法返回一个布尔值，表示当前模式是否能匹配参数字符串。

    +
    1
    /cat/.test('cats and dogs') // true 验证字符串是否包含cat
    + +

    上面代码验证参数字符串之中是否包含cat，结果返回true。

    +

    如果正则表达式带有g修饰符，则每一次test方法都从上一次结束的位置开始向后匹配。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var r = /x/g; // 带有g全局匹配修饰符
    var s = '_x_x';

    r.lastIndex // 0  下一次开始搜索的位置
    r.test(s) // true 内部原理：从0位置开始匹配，匹配到'x'在1位置，返回true，并把lastIndex属性设置为2，

    r.lastIndex // 2 下一次开始搜索的位置
    r.test(s) // true  内部原理：从2位置开始匹配，匹配到'x'在3位置，返回true，并把lastIndex属性设置为4

    r.lastIndex // 4 下一次开始搜索的位置
    r.test(s) // false 内部原理：从4位置开始匹配，匹配不到’x‘,返回false
    + +

    上面代码的正则表达式使用了g修饰符，表示是全局搜索，会有多个结果。接着，三次使用test方法，每一次开始搜索的位置都是上一次匹配的后一个位置。

    +

    带有g修饰符时，可以通过正则对象的lastIndex属性指定开始搜索的位置。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    var r = /x/g;
    var s = '_x_x';

    r.lastIndex = 4; // lastIndex属性可读写，改写后，test方法将从该位置开始匹配
    r.test(s) // false

    r.lastIndex // 0  重置为0
    r.test(s) // true
    + +

    上面代码指定从字符串的第五个位置开始搜索，这个位置为空，所以返回false。同时，lastIndex属性重置为0，所以第二次执行r.test(s)会返回true。

    +

    注意，带有g修饰符时，正则表达式内部会记住上一次的lastIndex属性，这时不应该更换所要匹配的字符串，否则会有一些难以察觉的错误。

    +
    1
    2
    3
    var r = /bb/g;
    r.test('bb') // true  由于带有g修饰符，匹配后会把lastIndex属性修改为了2
    r.test('-bb-') // false 从2位置开始匹配'bb',并没有匹配到
    + +

    上面代码中，由于正则表达式r是从上一次的lastIndex位置开始匹配，导致第二次执行test方法时出现预期以外的结果。

    +

    lastIndex属性只对同一个正则表达式有效，所以下面这样写是错误的。

    +
    1
    2
    var count = 0;
    while (/a/g.test('babaa')) count++;
    + +

    上面代码会导致无限循环，因为while循环的每次匹配条件都是一个新的正则表达式，导致lastIndex属性总是等于0。

    +

    如果正则模式是一个空字符串，则匹配所有字符串。

    +
    1
    2
    new RegExp('').test('abc')
    // true
    + + + +

    3.2 RegExp.prototype.exec() 返回匹配结果，如匹配则返回一个数组，成员是匹配到的子字符串，否则返回null

    正则实例对象的exec方法，用来返回匹配结果。如果发现匹配，就返回一个数组，成员是匹配成功的子字符串，否则返回null。

    +
    1
    2
    3
    4
    5
    6
    var s = '_x_x';
    var r1 = /x/;
    var r2 = /y/;

    r1.exec(s) // ["x"] 返回一个成员
    r2.exec(s) // null
    + +

    上面代码中，正则对象r1匹配成功，返回一个数组，成员是匹配结果；正则对象r2匹配失败，返回null。

    +

    如果正则表示式包含圆括号（即含有“组匹配”），则返回的数组会包括多个成员。第一个成员是整个匹配成功的结果，后面的成员就是圆括号对应的匹配成功的组。也就是说，第二个成员对应第一个括号，第三个成员对应第二个括号，以此类推。整个数组的length属性等于组匹配的数量再加1。

    +
    1
    2
    3
    4
    var s = '_x_x';
    var r = /_(x)/; // 含有圆括号，组匹配

    r.exec(s) // ["_x", "x"]  返回多个成员，第一个成员是整个匹配的结果，第二个成员是圆括号匹配的结果
    + +

    上面代码的exec方法，返回一个数组。第一个成员是整个匹配的结果，第二个成员是圆括号匹配的结果。

    +

    exec方法的返回数组还包含以下两个属性：

    +
      +
    • input：整个原字符串。
      • +
    • index：整个模式匹配成功的开始位置（从0开始计数）。
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    var r = /a(b+)a/;
    var arr = r.exec('_abbba_aba_');

    arr // ["abbba", "bbb"] // 第一个成员是整个匹配的结果，第二个成员是圆括号匹配的结果

    arr.index // 1  表示是在1位置开始匹配成功的
    arr.input // "_abbba_aba_"
    + +

    上面代码中的index属性等于1，是因为从原字符串的第二个位置开始匹配成功。

    +

    如果正则表达式加上g修饰符，则可以使用多次exec方法，下一次搜索的位置从上一次匹配成功结束的位置开始。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    var reg = /a/g; // 带'g'修饰符
    var str = 'abc_abc_abc'

    var r1 = reg.exec(str);
    r1 // ["a"]
    r1.index // 0 在0位置匹配成功
    reg.lastIndex // 1  下一次匹配开始位置为1

    var r2 = reg.exec(str);
    r2 // ["a"]
    r2.index // 4 在4位置匹配成功
    reg.lastIndex // 5 下一次匹配开始位置为5

    var r3 = reg.exec(str);
    r3 // ["a"]
    r3.index // 8 在8位置匹配成功
    reg.lastIndex // 9 下一次匹配开始位置为9

    var r4 = reg.exec(str);
    r4 // null 没有匹配到返回null
    reg.lastIndex // 0 下一次匹配位置为0
    + +

    上面代码连续用了四次exec方法，前三次都是从上一次匹配结束的位置向后匹配。当第三次匹配结束以后，整个字符串已经到达尾部，匹配结果返回null，正则实例对象的lastIndex属性也重置为0，意味着第四次匹配将从头开始。

    +

    利用g修饰符允许多次匹配的特点，可以用一个循环完成全部匹配。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var reg = /a/g;
    var str = 'abc_abc_abc'

    while(true) {
      var match = reg.exec(str);
      if (!match) break;
      console.log('#' + match.index + ':' + match[0]);
    }
    // #0:a
    // #4:a
    // #8:a
    + +

    上面代码中，只要exec方法不返回null，就会一直循环下去，每次输出匹配的位置和匹配的文本。

    +

    正则实例对象的lastIndex属性不仅可读，还可写。设置了g修饰符的时候，只要手动设置了lastIndex的值，就会从指定位置开始匹配。

    +

    4、字符串的实例方法

    字符串的实例方法之中，有4种与正则表达式有关。

    +
      +
    • String.prototype.match()：返回一个数组，成员是所有匹配的子字符串。
      • +
    • String.prototype.search()：按照给定的正则表达式进行搜索，返回一个整数，表示匹配开始的位置。
      • +
    • String.prototype.replace()：按照给定的正则表达式进行替换，返回替换后的字符串。
      • +
    • String.prototype.split()：按照给定规则进行字符串分割，返回一个数组，包含分割后的各个成员。
      • +
    +

    4.1 String.prototype.match() 匹配，返回匹配结果数组或null

    字符串实例对象的match方法对字符串进行正则匹配，返回匹配结果。

    +
    1
    2
    3
    4
    5
    6
    var s = '_x_x';
    var r1 = /x/;
    var r2 = /y/;

    s.match(r1) // ["x"] // 未带g修饰符，匹配到一个即返回结果
    s.match(r2) // null
    + +

    从上面代码可以看到，字符串的match方法与正则对象的exec方法非常类似：匹配成功返回一个数组，匹配失败返回null。

    +

    如果正则表达式带有g修饰符，则该方法与正则对象的exec方法行为不同，会一次性返回所有匹配成功的结果。

    +
    1
    2
    3
    4
    5
    var s = 'abba';
    var r = /a/g;

    s.match(r) // ["a", "a"]  带g修饰符，会返回全部结果到数组成员
    r.exec(s) // ["a"] 正则实例的exec方法只返回一个
    + +

    设置正则表达式的lastIndex属性，对match方法无效，匹配总是从字符串的第一个字符开始。

    +
    1
    2
    3
    4
    var r = /a|b/g;
    r.lastIndex = 7;
    'xaxb'.match(r) // ['a', 'b']
    r.lastIndex // 0
    + +

    上面代码表示，设置正则对象的lastIndex属性是无效的。

    +

    4.2 String.prototype.search() 返回第一个满足匹配条件的位置，不满足则返-1

    字符串对象的search方法，返回第一个满足条件的匹配结果在整个字符串中的位置。如果没有任何匹配，则返回-1。

    +
    1
    2
    '_x_x'.search(/x/)
    // 1
    + +

    上面代码中，第一个匹配结果出现在字符串的1号位置。

    +

    4.3 String.prototype.replace() 替换匹配的值，参数一是子串或正则，参数二是替换内容

    字符串对象的replace方法可以替换匹配的值。它接受两个参数，第一个是正则表达式，表示搜索模式，第二个是替换的内容。

    +
    1
    str.replace(search, replacement)
    + +

    正则表达式如果不加g修饰符，就替换第一个匹配成功的值，否则替换所有匹配成功的值。

    +
    1
    2
    3
    'aaa'.replace('a', 'b') // "baa"
    'aaa'.replace(/a/, 'b') // "baa" 不带g修饰符，只匹配并替换第一个
    'aaa'.replace(/a/g, 'b') // "bbb" 带g修饰符，匹配全局，并替换全部匹配到的值
    + +

    上面代码中，最后一个正则表达式使用了g修饰符，导致所有的b都被替换掉了。

    +

    replace方法的一个应用，就是消除字符串首尾两端的空格。

    +
    1
    2
    3
    4
    var str = '  #id div.class  ';

    str.replace(/^\s+|\s+$/g, '')
    // "#id div.class"
    + +

    replace方法的第二个参数可以使用美元符号$，用来指代所替换的内容。

    +
      +
    • $&：匹配的子字符串。
      • +
    • $`：匹配结果前面的文本。
      • +
    • $'：匹配结果后面的文本。
      • +
    • $n：匹配成功的第n组内容，n是从1开始的自然数。
      • +
    • $$：指代美元符号$。
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    'hello world'.replace(/(\w+)\s(\w+)/, '$2 $1')
    // "world hello"
    /*说明：
    $n 用于组内容，$2为匹配到的第二组，即world； $1为匹配到的第一组，即hello
    */

    'abc'.replace('b', '[$`-$&-$\'-$$]')
    // "a[a-b-c-$]c"
    /*说明：
    $`为匹配结果 b 前面的文本，即 a
    $&为匹配的子字符串，即 b
    $’为匹配结果 b 后面的文本，即 c
    $$代表$符号本身
    */
    + +

    上面代码中，第一个例子是将匹配的组互换位置，第二个例子是改写匹配的值。

    +

    replace方法的第二个参数还可以是一个函数，将每一个匹配内容替换为函数返回值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    '3 and 5'.replace(/[0-9]+/g, function (match) {
      return 2 * match; // match参数是匹配到的内容
    })
    // "6 and 10"

    var a = 'The quick brown fox jumped over the lazy dog.';
    var pattern = /quick|brown|lazy/ig;

    a.replace(pattern, function replacer(match) {
      return match.toUpperCase();
    });
    // The QUICK BROWN fox jumped over the LAZY dog.
    + +

    作为replace方法第二个参数的替换函数，可以接受多个参数。其中，第一个参数是捕捉到的内容，第二个参数是捕捉到的组匹配（有多少个组匹配，就有多少个对应的参数）。此外，最后还可以添加两个参数，倒数第二个参数是捕捉到的内容在整个字符串中的位置（比如从第五个位置开始），最后一个参数是原字符串。下面是一个网页模板替换的例子。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    var prices = {
      'p1': '$1.99',
      'p2': '$9.99',
      'p3': '$5.00'
    };

    var template = '<span id="p1"></span>'
      + '<span id="p2"></span>'
      + '<span id="p3"></span>';

    template.replace(
      /(<span id=")(.*?)(">)(<\/span>)/g,
      function(match, $1, $2, $3, $4, index, str){
        return $1 + $2 + $3 + prices[$2] + $4;
      }
    );
    // "<span id="p1">$1.99</span><span id="p2">$9.99</span><span id="p3">$5.00</span>"

    // 说明：
    // match 整个匹配到的内容：<span id="p*"></span>

    // 以下参数分别是匹配到的组内容，有多少组就对应多少个参数
    // $1 <span id="
    // $2  p1~p3
    // $3  ">
    // $4  </span>

    // 后面还可以接受两个参数：
    // 倒数第二个是：捕捉到的内容(即match的内容)在整个字符串中的位置
    // 最后一个是：原字符串

    + +

    上面代码的捕捉模式中，有四个括号，所以会产生四个组匹配，在匹配函数中用$1到$4表示。匹配函数的作用是将价格插入模板中。

    +

    4.4 String.prototype.split() 按给定规则分割字符串，返回数组

    字符串对象的split方法按照正则规则分割字符串，返回一个由分割后的各个部分组成的数组。

    +
    1
    str.split(separator, [limit])
    + +

    该方法接受两个参数，第一个参数是正则表达式，表示分隔规则，第二个参数是返回数组的最大成员数（数组长度）。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 非正则分隔
    'a,  b,c, d'.split(',')
    // [ 'a', '  b', 'c', ' d' ]

    // 正则分隔，去除多余的空格
    'a,  b,c, d'.split(/, */)
    // [ 'a', 'b', 'c', 'd' ]

    // 指定返回数组的最大成员（数组长度）
    'a,  b,c, d'.split(/, */, 2)
    [ 'a', 'b' ]
    + +

    上面代码使用正则表达式，去除了子字符串的逗号后面的空格。

    +
    1
    2
    3
    4
    5
    6
    7
    // 例一
    'aaa*a*'.split(/a*/)
    // [ '', '*', '*' ]  分隔符，即被过滤的符号，

    // 例二
    'aaa**a*'.split(/a*/)
    // ["", "*", "*", "*"]
    + +

    上面代码的分割规则是0次或多次的a，由于正则默认是贪婪匹配，所以例一的第一个分隔符是aaa，第二个分割符是a，将字符串分成三个部分，包含开始处的空字符串。例二的第一个分隔符是aaa，第二个分隔符是0个a（即空字符），第三个分隔符是a，所以将字符串分成四个部分。

    +

    如果正则表达式带有括号，则括号匹配的部分也会作为数组成员返回。

    +
    1
    2
    'aaa*a*'.split(/(a*)/)
    // [ '', 'aaa', '*', 'a', '*' ]
    + +

    上面代码的正则表达式使用了括号，第一个组匹配是aaa，第二个组匹配是a，它们都作为数组成员返回。

    +

    5、匹配规则

    搭配菜鸟教程一起学习更容易理解：https://www.runoob.com/regexp/regexp-tutorial.html

    +

    正则表达式在线测试与常用正则表达式：http://c.runoob.com/front-end/854

    +

    正则表达式的规则很复杂，下面一一介绍这些规则。

    +

    5.1 字面量字符和元字符

    **大部分字符在正则表达式中，就是字面的含义，比如/a/匹配a，/b/匹配b**。如果在正则表达式之中，某个字符只表示它字面的含义（就像前面的a和b），那么它们就叫做“字面量字符”（literal characters）。

    +
    1
    /dog/.test('old dog') // true
    + +

    上面代码中正则表达式的dog，就是字面量字符，所以/dog/匹配old dog，因为它就表示d、o、g三个字母连在一起。

    +

    除了字面量字符以外，还有一部分字符有特殊含义，不代表字面的意思。它们叫做“元字符”（metacharacters），主要有以下几个。

    +

    （1）点字符（.) 类似通配

    点字符（.）匹配除回车（\r）、换行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）以外的任何单个字符。注意，对于码点大于0xFFFF字符，点字符不能正确匹配，会认为这是两个字符。

    +
    1
    2
    3
    4
    5
    6
    7
    /c.t/        //匹配c和t之间包含任意一个字符的情况,注意：一个.只匹配一个字符

    'cet c2t c-t c.t coot c我t'.match(/c.t/g)
    // ["cet", "c2t", "c-t", "c.t", "c我t"]

    'cet c2t c-t c.t coot c我t'.match(/c..t/g)
    //["coot"]
    + +

    上面代码中，c.t匹配c和t之间包含任意一个字符的情况，只要这三个字符在同一行，比如cat、c2t、c-t等等，但是不匹配coot。

    +

    （2）位置字符(^) ($) 开始位置和结束位置

    位置字符用来提示字符所处的位置，主要有两个字符。

    +
      +
    • ^ 表示字符串的开始位置
      • +
    • $ 表示字符串的结束位置
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // test必须出现在开始位置
    /^test/.test('test123') // true

    // test必须出现在结束位置
    /test$/.test('new test') // true

    // 从开始位置到结束位置只有test
    /^test$/.test('test') // true
    /^test$/.test('test test') // false
    + +

    （3）选择符（|） 表示’’或关系’’

    竖线符号（|）在正则表达式中表示“或关系”（OR），即cat|dog表示匹配cat或dog。

    +
    1
    /11|22/.test('911') // true
    + +

    上面代码中，正则表达式指定必须匹配11或22。

    +

    多个选择符可以联合使用。

    +
    1
    2
    // 匹配fred、barney、betty之中的一个
    /fred|barney|betty/
    + +

    选择符会包括它前后的多个字符，比如/ab|cd/指的是匹配ab或者cd，而不是指匹配b或者c。如果想修改这个行为，可以使用圆括号。

    +
    1
    /a( |\t)b/.test('a\tb') // true
    + +

    上面代码指的是，a和b之间有一个空格或者一个制表符。

    +

    其他的元字符还包括\、\*、+、?、()、[]、{}等，将在下文解释。

    +

    5.2 转义符（\ 反斜杠）

    正则表达式中那些有特殊含义的元字符，如果要匹配它们本身，就需要在它们前面要加上反斜杠。比如要匹配+，就要写成\+。

    +
    1
    2
    3
    4
    5
    /1+1/.test('1+1')
    // false

    /1\+1/.test('1+1')
    // true
    + +

    上面代码中，第一个正则表达式之所以不匹配，因为加号是元字符，不代表自身。第二个正则表达式使用反斜杠对加号转义，就能匹配成功。

    +

    正则表达式中，需要反斜杠转义的，一共有12个字符：^、.、[、$、(、)、|、*、+、?、{和\。需要特别注意的是，如果使用RegExp方法生成正则对象，转义需要使用两个斜杠，因为字符串内部会先转义一次。

    +
    1
    2
    3
    4
    5
    (new RegExp('1\+1')).test('1+1')
    // false

    (new RegExp('1\\+1')).test('1+1')
    // true
    + +

    上面代码中，RegExp作为构造函数，参数是一个字符串。但是，在字符串内部，反斜杠也是转义字符，所以它会先被反斜杠转义一次，然后再被正则表达式转义一次，因此需要两个反斜杠转义。

    +

    5.3 特殊字符

    正则表达式对一些不能打印的特殊字符，提供了表达方法。

    +
      +

    • \cX 表示Ctrl-[X]，其中的X是A-Z之中任一个英文字母，用来匹配控制字符。

      +
      • +

    • [\b] 匹配退格键(U+0008)，不要与\b混淆。

      +
      • +

    • \n 匹配换行键。

      +
      • +

    • \r 匹配回车键。

      +
      • +

    • \t 匹配制表符 tab（U+0009）。

      +
      • +

    • \v 匹配垂直制表符（U+000B）。

      +
      • +

    • \f 匹配换页符（U+000C）。

      +
      • +

    • \0 匹配null字符（U+0000）。

      +
      • +

    • \xhh 匹配一个以两位十六进制数（\x00-\xFF）表示的字符。

      +
      • +

    • \uhhhh 匹配一个以四位十六进制数（\u0000-\uFFFF）表示的 Unicode 字符。

      +
      • +
    +

    5.4 字符类

    字符类（class）表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内，比如[xyz] 表示x、y、z之中任选一个匹配。

    +
    1
    2
    /[abc]/.test('hello world') // false
    /[abc]/.test('apple') // true  a、b、c其中任意一个
    + +

    上面代码中，字符串hello world不包含a、b、c这三个字母中的任一个，所以返回false；字符串apple包含字母a，所以返回true。

    +

    有两个字符在字符类中有特殊含义。

    +
    （1）脱字符（^ 排除）

    如果方括号内的第一个字符是[^]，则表示除了字符类之中的字符，其他字符都可以匹配。比如，[^xyz]表示除了x、y、z之外都可以匹配。

    +
    1
    2
    /[^abc]/.test('bbc news') // true  字符串中包含了a、b、c以为的字符
    /[^abc]/.test('bbc') // false  字符串中没有除了a、b、c以外的字符
    + +

    上面代码中，字符串bbc news包含a、b、c以外的其他字符，所以返回true；字符串bbc不包含a、b、c以外的其他字符，所以返回false。

    +

    如果方括号内没有其他字符，即只有[^]，就表示匹配一切字符，其中包括换行符。相比之下，点号作为元字符（.）是不包括换行符的。

    +
    1
    2
    3
    4
    var s = 'Please yes\nmake my day!';

    s.match(/yes.*day/) // null
    s.match(/yes[^]*day/) // [ 'yes\nmake my day']
    + +

    上面代码中，字符串s含有一个换行符，点号不包括换行符，所以第一个正则表达式匹配失败；第二个正则表达式[^]包含一切字符，所以匹配成功。

    +
    +

    注意，脱字符只有在字符类的第一个位置才有特殊含义，否则就是字面含义。

    +
    +
    （2）连字符（- 字符连续范围）

    某些情况下，对于连续序列的字符，连字符（-）用来提供简写形式，表示字符的连续范围。比如，[abc]可以写成[a-c]，[0123456789]可以写成[0-9]，同理[A-Z]表示26个大写字母。

    +
    1
    2
    /a-z/.test('b') // false
    /[a-z]/.test('b') // true
    + +

    上面代码中，当连字号（dash）不出现在方括号之中，就不具备简写的作用，只代表字面的含义，所以不匹配字符b。只有当连字号用在方括号之中，才表示连续的字符序列。

    +

    以下都是合法的字符类简写形式。

    +
    1
    2
    3
    4
    [0-9.,]
    [0-9a-fA-F]
    [a-zA-Z0-9-]
    [1-31] // 注意：不代表1到31，只代表1到3
    + +

    上面代码中最后一个字符类[1-31]，不代表1到31，只代表1到3。

    +

    连字符还可以用来指定 Unicode 字符的范围。

    +
    1
    2
    3
    var str = "\u0130\u0131\u0132";
    /[\u0128-\uFFFF]/.test(str)
    // true
    + +

    上面代码中，\u0128-\uFFFF表示匹配码点在0128到FFFF之间的所有字符。

    +

    另外，不要过分使用连字符，设定一个很大的范围，否则很可能选中意料之外的字符。最典型的例子就是[A-z]，表面上它是选中从大写的A到小写的z之间52个字母，但是由于在 ASCII 编码之中，大写字母与小写字母之间还有其他字符，结果就会出现意料之外的结果。

    +
    1
    /[A-z]/.test('\\') // true
    + +

    上面代码中，由于反斜杠（’\‘）的ASCII码在大写字母与小写字母之间，结果会被选中。

    +

    5.5 预定义模式 (常见模式简写\d\D\w\W\s\S\b\B)

    预定义模式指的是某些常见模式的简写方式。

    +
      +
    • \d 匹配0-9之间的任一数字，相当于[0-9]。**(数字)**
      • +
    • \D 匹配所有0-9以外的字符，相当于[^0-9]。**(非数字)**
      • +
    • \w 匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]。**(字母、数字、下划线)**
      • +
    • \W 除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]。**(非：字母、数字、下划线)**
      • +
    • \s 匹配空格（包括换行符、制表符、空格符等），相等于[ \t\r\n\v\f]。**(空格)**
      • +
    • \S 匹配非空格的字符，相当于[^ \t\r\n\v\f]。**(非空格)**
      • +
    • \b 匹配词的边界。**(单词边界)**
      • +
    • \B 匹配非词边界，即在词的内部。**(非单词边界)**
      • +
    +

    下面是一些例子。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // \s 的例子
    /\s\w*/.exec('hello world') // [" world"]

    // \b 的例子
    /\bworld/.test('hello world') // true
    /\bworld/.test('hello-world') // true
    /\bworld/.test('helloworld') // false

    // \B 的例子
    /\Bworld/.test('hello-world') // false
    /\Bworld/.test('helloworld') // true
    + +

    上面代码中，\s表示空格，所以匹配结果会包括空格。\b表示词的边界，所以world的词首必须独立（词尾是否独立未指定），才会匹配。同理，\B表示非词的边界，只有world的词首不独立，才会匹配。

    +

    通常，正则表达式遇到换行符（\n）就会停止匹配。

    +
    1
    2
    3
    4
    var html = "<b>Hello</b>\n<i>world!</i>";

    /.*/.exec(html)[0]
    // "<b>Hello</b>"
    + +

    上面代码中，字符串html包含一个换行符，结果点字符（.）不匹配换行符，导致匹配结果可能不符合原意。这时使用\s字符类，就能包括换行符。

    +
    1
    2
    3
    4
    var html = "<b>Hello</b>\n<i>world!</i>";

    /[\S\s]*/.exec(html)[0]
    // "<b>Hello</b>\n<i>world!</i>"
    + +

    上面代码中，[\S\s]指代一切字符。

    +

    5.6 重复类 （ {n} {n,} {n,m} ）

    模式的精确匹配次数，使用大括号（{}）表示。{n}表示恰好重复n次，{n,}表示至少重复n次，{n,m}表示重复不少于n次，不多于m次。

    +
    1
    2
    /lo{2}k/.test('look') // true  2个o
    /lo{2,5}k/.test('looook') // true   2到5个o
    + +

    上面代码中，第一个模式指定o连续出现2次，第二个模式指定o连续出现2次到5次之间。

    +

    5.7 量词符（?）（*）（+）

    量词符用来设定某个模式出现的次数。

    +
      +
    • ? 问号表示某个模式出现0次或1次，等同于{0, 1}。
      • +
    • * 星号表示某个模式出现0次或多次，等同于{0,}。
      • +
    • + 加号表示某个模式出现1次或多次，等同于{1,}。
      • +
    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // t 出现0次或1次
    /t?est/.test('test') // true
    /t?est/.test('est') // true

    // t 出现1次或多次
    /t+est/.test('test') // true
    /t+est/.test('ttest') // true
    /t+est/.test('est') // false

    // t 出现0次或多次
    /t*est/.test('test') // true
    /t*est/.test('ttest') // true
    /t*est/.test('tttest') // true
    /t*est/.test('est') // true
    + + + +

    5.8 贪婪模式（对量词符可使用非贪婪模式）

    上一小节的三个量词符，默认情况下都是最大可能匹配，即匹配直到下一个字符不满足匹配规则为止。这被称为贪婪模式。

    +
    1
    2
    var s = 'aaa';
    s.match(/a+/) // ["aaa"]
    + +

    上面代码中，模式是/a+/，表示匹配1个a或多个a，那么到底会匹配几个a呢？因为默认是贪婪模式，会一直匹配到字符a不出现为止，所以匹配结果是3个a。

    +

    如果想将贪婪模式改为非贪婪模式，可以在量词符后面加一个问号。

    +
    1
    2
    var s = 'aaa';
    s.match(/a+?/) // ["a"]
    + +

    上面代码中，模式结尾添加了一个问号/a+?/，这时就改为非贪婪模式，一旦条件满足，就不再往下匹配。

    +

    除了非贪婪模式的加号，还有非贪婪模式的星号（*）和非贪婪模式的问号（?）。

    +
      +
    • +?：表示某个模式出现1次或多次，匹配时采用非贪婪模式。
      • +
    • *?：表示某个模式出现0次或多次，匹配时采用非贪婪模式。
      • +
    • ??：表格某个模式出现0次或1次，匹配时采用非贪婪模式。
      • +
    +
    1
    2
    3
    4
    5
    'abb'.match(/ab*b/) // ["abb"]
    'abb'.match(/ab*?b/) // ["ab"]

    'abb'.match(/ab?b/) // ["abb"]
    'abb'.match(/ab??b/) // ["ab"]
    + + + +

    5.9 修饰符

    修饰符（modifier）表示模式的附加规则，放在正则模式的最尾部。

    +

    修饰符可以单个使用，也可以多个一起使用。

    +
    1
    2
    3
    4
    5
    // 单个修饰符
    var regex = /test/i;

    // 多个修饰符
    var regex = /test/ig;
    + +

    （1）g 修饰符 （全局匹配）

    默认情况下，第一次匹配成功后，正则对象就停止向下匹配了。g修饰符表示全局匹配（global），加上它以后，正则对象将匹配全部符合条件的结果，主要用于搜索和替换。

    +
    1
    2
    3
    4
    5
    6
    var regex = /b/;
    var str = 'abba';

    regex.test(str); // true
    regex.test(str); // true
    regex.test(str); // true
    + +

    上面代码中，正则模式不含g修饰符，每次都是从字符串头部开始匹配。所以，连续做了三次匹配，都返回true。

    +
    1
    2
    3
    4
    5
    6
    var regex = /b/g;
    var str = 'abba';

    regex.test(str); // true
    regex.test(str); // true
    regex.test(str); // false
    + +

    上面代码中，正则模式含有g修饰符，每次都是从上一次匹配成功处，开始向后匹配。因为字符串abba只有两个b，所以前两次匹配结果为true，第三次匹配结果为false。

    +

    （2）i 修饰符 （不区分大小写）

    默认情况下，正则对象区分字母的大小写，加上i修饰符以后表示忽略大小写（ignoreCase）。

    +
    1
    2
    /abc/.test('ABC') // false
    /abc/i.test('ABC') // true
    + +

    上面代码表示，加了i修饰符以后，不考虑大小写，所以模式abc匹配字符串ABC。

    +

    （3）m 修饰符（让^和$识别换行符）

    m修饰符表示多行模式（multiline），会修改^和$的行为。默认情况下（即不加m修饰符时），^和$匹配字符串的开始处和结尾处，加上m修饰符以后，^和$还会匹配行首和行尾，即^和$会识别换行符（\n）。

    +
    1
    2
    /world$/.test('hello world\n') // false
    /world$/m.test('hello world\n') // true
    + +

    上面的代码中，字符串结尾处有一个换行符。如果不加m修饰符，匹配不成功，因为字符串的结尾不是world；加上以后，$可以匹配行尾。

    +
    1
    /^b/m.test('a\nb') // true
    + +

    上面代码要求匹配行首的b，如果不加m修饰符，就相当于b只能处在字符串的开始处。加上m修饰符以后，换行符\n也会被认为是一行的开始。

    +

    5.10 组匹配

    （1）概述 （圆括号分组）

    正则表达式的括号表示分组匹配，括号中的模式可以用来匹配分组的内容。

    +
    1
    2
    /fred+/.test('fredd') // true +加号表示重复字母d
    /(fred)+/.test('fredfred') // true  +加号表示重复单词fred
    + +

    上面代码中，第一个模式没有括号，结果+只表示重复字母d，第二个模式有括号，结果+就表示匹配fred这个词。

    +

    下面是另外一个分组捕获的例子。

    +
    1
    2
    3
    var m = 'abcabc'.match(/(.)b(.)/);
    m
    // ['abc', 'a', 'c']
    + +

    上面代码中，正则表达式/(.)b(.)/一共使用两个括号，第一个括号捕获a，第二个括号捕获c。

    +

    注意，使用组匹配时，不宜同时使用g修饰符，否则match方法不会捕获分组的内容。

    +
    1
    2
    var m = 'abcabc'.match(/(.)b(.)/g);
    m // ['abc', 'abc']
    + +

    上面代码使用带g修饰符的正则表达式，结果match方法只捕获了匹配整个表达式的部分。这时必须使用正则表达式的exec方法，配合循环，才能读到每一轮匹配的组捕获。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var str = 'abcabc';
    var reg = /(.)b(.)/g;
    while (true) {
      var result = reg.exec(str);
      if (!result) break;
      console.log(result);
    }
    // ["abc", "a", "c"]
    // ["abc", "a", "c"]
    + +

    正则表达式内部，还可以用\n引用括号匹配的内容，n是从1开始的自然数，表示对应顺序的括号。

    +
    1
    2
    /(.)b(.)\1b\2/.test("abcabc")
    // true
    + +

    上面的代码中，\1表示第一个括号匹配的内容（即a），\2表示第二个括号匹配的内容（即c）。

    +

    下面是另外一个例子。

    +
    1
    /y(..)(.)\2\1/.test('yabccab') // true
    + +

    括号还可以嵌套。

    +
    1
    /y((..)\2)\1/.test('yabababab') // true
    + +

    上面代码中，\1指向外层括号，\2指向内层括号。

    +

    组匹配非常有用，下面是一个匹配网页标签的例子。

    +
    1
    2
    3
    4
    var tagName = /<([^>]+)>[^<]*<\/\1>/;

    tagName.exec("<b>bold</b>")[1]
    // 'b'
    + +

    上面代码中，圆括号匹配尖括号之中的标签，而\1就表示对应的闭合标签。

    +

    上面代码略加修改，就能捕获带有属性的标签。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var html = '<b class="hello">Hello</b><i>world</i>';
    var tag = /<(\w+)([^>]*)>(.*?)<\/\1>/g;

    var match = tag.exec(html);

    match[1] // "b"
    match[2] // " class="hello""
    match[3] // "Hello"

    match = tag.exec(html);

    match[1] // "i"
    match[2] // ""
    match[3] // "world"
    + +

    （2）非捕获组

    (?:x)称为非捕获组（Non-capturing group），表示不返回该组匹配的内容，即匹配的结果中不计入这个括号。

    +

    非捕获组的作用请考虑这样一个场景，假定需要匹配foo或者foofoo，正则表达式就应该写成/(foo){1, 2}/，但是这样会占用一个组匹配。这时，就可以使用非捕获组，将正则表达式改为/(?:foo){1, 2}/，它的作用与前一个正则是一样的，但是不会单独输出括号内部的内容。

    +

    请看下面的例子。

    +
    1
    2
    var m = 'abc'.match(/(?:.)b(.)/);
    m // ["abc", "c"]
    + +

    上面代码中的模式，一共使用了两个括号。其中第一个括号是非捕获组，所以最后返回的结果中没有第一个括号，只有第二个括号匹配的内容。

    +

    下面是用来分解网址的正则表达式。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 正常匹配
    var url = /(http|ftp):\/\/([^/\r\n]+)(\/[^\r\n]*)?/;

    url.exec('http://google.com/');
    // ["http://google.com/", "http", "google.com", "/"]

    // 非捕获组匹配
    var url = /(?:http|ftp):\/\/([^/\r\n]+)(\/[^\r\n]*)?/;

    url.exec('http://google.com/');
    // ["http://google.com/", "google.com", "/"]
    + +

    上面的代码中，前一个正则表达式是正常匹配，第一个括号返回网络协议；后一个正则表达式是非捕获匹配，返回结果中不包括网络协议。

    +

    （3）先行断言

    x(?=y)称为先行断言（Positive look-ahead），x只有在y前面才匹配，y不会被计入返回结果。比如，要匹配后面跟着百分号的数字，可以写成/\d+(?=%)/。

    +

    “先行断言”中，括号里的部分是不会返回的。

    +
    1
    2
    var m = 'abc'.match(/b(?=c)/);
    m // ["b"]
    + +

    上面的代码使用了先行断言，b在c前面所以被匹配，但是括号对应的c不会被返回。

    +

    （4）先行否定断言

    x(?!y)称为先行否定断言（Negative look-ahead），**x只有不在y前面才匹配，y不会被计入返回结果**。比如，要匹配后面跟的不是百分号的数字，就要写成/\d+(?!%)/。

    +
    1
    2
    /\d+(?!\.)/.exec('3.14')
    // ["14"]
    + +

    上面代码中，正则表达式指定，只有不在小数点前面的数字才会被匹配，因此返回的结果就是14。

    +

    “先行否定断言”中，括号里的部分是不会返回的。

    +
    1
    2
    var m = 'abd'.match(/b(?!c)/);
    m // ['b']
    + +

    上面的代码使用了先行否定断言，b不在c前面所以被匹配，而且括号对应的d不会被返回。

    +

    十一、JSON对象

    1、JSON 格式

    JSON 格式（JavaScript Object Notation 的缩写）是一种用于数据交换的文本格式，2001年由 Douglas Crockford 提出，目的是取代繁琐笨重的 XML 格式。

    +

    相比 XML 格式，JSON 格式有两个显著的优点：书写简单，一目了然；符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。所以，JSON 迅速被接受，已经成为各大网站交换数据的标准格式，并被写入标准。

    +

    每个 JSON 对象就是一个值，可能是一个数组或对象，也可能是一个原始类型的值。总之，只能是一个值，不能是两个或更多的值。

    +

    JSON 对值的类型和格式有严格的规定。

    +
    +
      +
    1. 复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象。
      2. +
    2. 原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined）。
      3. +
    3. 字符串必须使用双引号表示，不能使用单引号。
      4. +
    4. 对象的键名必须放在双引号里面。
      5. +
    5. 数组或对象最后一个成员的后面，不能加逗号。
      6. +
    +
    +

    以下都是合法的 JSON。

    +
    1
    2
    3
    4
    5
    6
    7
    ["one", "two", "three"]

    { "one": 1, "two": 2, "three": 3 }

    {"names": ["张三", "李四"] }

    [ { "name": "张三"}, {"name": "李四"} ]
    + +

    以下都是不合法的 JSON。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    { name: "张三", 'age': 32 }  // 属性名必须使用双引号

    [32, 64, 128, 0xFFF] // 不能使用十六进制值

    { "name": "张三", "age": undefined } // 不能使用 undefined

    { "name": "张三",
      "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
      "getName": function () {
          return this.name;
      }
    } // 属性值不能使用函数和日期对象
    + +

    注意，null、空数组和空对象都是合法的 JSON 值。

    +

    2、JSON 对象

    JSON对象是 JavaScript 的原生对象，用来处理 JSON 格式数据。它有两个静态方法：JSON.stringify()和JSON.parse()。

    +

    3、JSON.stringify() 转为JSON字符串

    3.1 基本用法

    JSON.stringify方法用于将一个值转为 JSON 字符串。该字符串符合 JSON 格式，并且可以被JSON.parse方法还原。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 单个字符串、数值、布尔值、null、空数组、空对象，都是合法json格式。
    JSON.stringify('abc') // ""abc"" 注意：字符串会转json字符串会有两对双引号
    JSON.stringify(1) // "1"
    JSON.stringify(false) // "false"
    JSON.stringify(null) // "null"
    JSON.stringify([]) // "[]"
    JSON.stringify({}) // "{}"

    JSON.stringify([1, "false", false])
    // '[1,"false",false]'

    JSON.stringify({ name: "张三" })
    // '{"name":"张三"}'
    + +

    上面代码将各种类型的值，转成 JSON 字符串。

    +

    注意，对于原始类型的字符串，转换结果会带双引号。

    +
    1
    2
    JSON.stringify('foo') === "foo" // false
    JSON.stringify('foo') === "\"foo\"" // true
    + +

    上面代码中，字符串foo，被转成了"\"foo\""。这是因为将来还原的时候，内层双引号可以让 JavaScript 引擎知道，这是一个字符串，而不是其他类型的值。

    +
    1
    2
    JSON.stringify(false) // "false"
    JSON.stringify('false') // "\"false\""
    + +

    上面代码中，如果不是内层的双引号，将来还原的时候，引擎就无法知道原始值是布尔值还是字符串。

    +

    如果对象的属性是undefined、函数或 XML 对象，该属性会被JSON.stringify过滤。

    +
    1
    2
    3
    4
    5
    6
    var obj = {
      a: undefined,
      b: function () {}
    };

    JSON.stringify(obj) // "{}" 对象属性是undefined、函数或 XML 对象会被过滤掉
    + +

    上面代码中，对象obj的a属性是undefined，而b属性是一个函数，结果都被JSON.stringify过滤。

    +

    如果数组的成员是undefined、函数或 XML 对象，则这些值被转成null。

    +
    1
    2
    var arr = [undefined, function () {}];
    JSON.stringify(arr) // "[null,null]" 数组成员是undefined、函数或 XML 对象会被转成null
    + +

    上面代码中，数组arr的成员是undefined和函数，它们都被转成了null。

    +

    正则对象会被转成空对象。

    +
    1
    JSON.stringify(/foo/) // "{}"
    + +

    JSON.stringify方法会忽略对象的不可遍历的属性。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var obj = {};
    Object.defineProperties(obj, {
      'foo': {
        value: 1,
        enumerable: true
      },
      'bar': {
        value: 2,
        enumerable: false
      }
    });

    JSON.stringify(obj); // "{"foo":1}"
    + +

    上面代码中，bar是obj对象的不可遍历属性，JSON.stringify方法会忽略这个属性。

    +

    3.2 第二个参数 （一个数组，对象属性白名单；或一个函数，改写返回值）

    JSON.stringify方法还可以接受一个数组，作为第二个参数，指定需要转成字符串的属性。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var obj = {
      'prop1': 'value1',
      'prop2': 'value2',
      'prop3': 'value3'
    };

    var selectedProperties = ['prop1', 'prop2']; // 指定prop1、prop2属性转成字符串

    JSON.stringify(obj, selectedProperties)
    // "{"prop1":"value1","prop2":"value2"}"
    + +

    上面代码中，JSON.stringify方法的第二个参数指定，只转prop1和prop2两个属性。

    +

    这个类似白名单的数组，只对对象的属性有效，对数组无效。

    +
    1
    2
    3
    4
    5
    JSON.stringify(['a', 'b'], ['0'])
    // "["a","b"]"

    JSON.stringify({0: 'a', 1: 'b'}, ['0'])
    // "{"0":"a"}"
    + +

    上面代码中，第二个参数指定 JSON 格式只转0号属性，实际上对数组是无效的，只对对象有效。

    +

    第二个参数还可以是一个函数，用来更改JSON.stringify的返回值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function f(key, value) { // 接收两个参数：键名、键值
      if (typeof value === "number") {
        value = 2 * value;
      }
      return value;
    }

    JSON.stringify({ a: 1, b: 2 }, f)
    // '{"a": 2,"b": 4}'
    + +

    上面代码中的f函数，接受两个参数，分别是被转换的对象的键名和键值。如果键值是数值，就将它乘以2，否则就原样返回。

    +

    注意，这个处理函数是递归处理所有的键。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var o = {a: {b: 1}};

    function f(key, value) { // 每一次处理的对象，都是前一次返回的值
      console.log("["+ key +"]:" + value);
      return value;
    }

    JSON.stringify(o, f)
    // []:[object Object]  第一次键名 空，键值是o整个对象
    // [a]:[object Object] 第二次键名 a，键值是{b:1}
    // [b]:1               第三次键名 b，键值是 1
    // '{"a":{"b":1}}'
    + +

    上面代码中，对象o一共会被f函数处理三次，最后那行是JSON.stringify的输出。第一次键名为空，键值是整个对象o；第二次键名为a，键值是{b: 1}；第三次键名为b，键值为1。

    +

    递归处理中，每一次处理的对象，都是前一次返回的值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var o = {a: 1};

    function f(key, value) {
      if (typeof value === 'object') {
        return {b: 2};
      }
      return value * 2;
    }

    JSON.stringify(o, f)
    // "{"b": 4}"
    + +

    上面代码中，f函数修改了对象o，接着JSON.stringify方法就递归处理修改后的对象o。

    +

    如果处理函数返回undefined或没有返回值，则该属性会被忽略。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function f(key, value) {
      if (typeof(value) === "string") {
        return undefined;
      }
      return value;
    }

    JSON.stringify({ a: "abc", b: 123 }, f)
    // '{"b": 123}'
    + +

    上面代码中，a属性经过处理后，返回undefined，于是该属性被忽略了。

    +

    3.3 第三个参数 （增加返回JSON字符串的可读性；json格式）

    JSON.stringify还可以接受第三个参数，用于增加返回的 JSON 字符串的可读性。如果是数字，表示每个属性前面添加的空格（最多不超过10个）；如果是字符串（不超过10个字符），则该字符串会添加在每行前面。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    JSON.stringify({ p1: 1, p2: 2 }, null, 2);
    /*
    "{
      "p1": 1,
      "p2": 2
    }"
    */
    // 参数三是数值在使用JSON.parse()解析时正常



    JSON.stringify({ p1:1, p2:2 }, null, '|-');
    /*
    "{
    |-"p1": 1,
    |-"p2": 2
    }"
    */
    // 参数三是字符串在使用JSON.parse()解析时报错
    + + + +

    3.4 参数对象的 toJSON 方法（对象自定义toJSON方法，转字符串只取该方法返回值）

    如果参数对象有自定义的toJSON方法，那么JSON.stringify会使用这个方法的返回值作为参数，而忽略原对象的其他属性。

    +

    下面是一个普通的对象。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var user = {
      firstName: '三',
      lastName: '张',

      get fullName(){
        return this.lastName + this.firstName;
      }
    };

    JSON.stringify(user)
    // "{"firstName":"三","lastName":"张","fullName":"张三"}"
    + +

    现在，为这个对象加上toJSON方法。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var user = {
      firstName: '三',
      lastName: '张',

      get fullName(){
        return this.lastName + this.firstName;
      },

      toJSON: function () { // 只使用toJSON的返回值作为参数，忽略user对象的其他参数
        return {
          name: this.lastName + this.firstName
        };
      }
    };

    JSON.stringify(user)
    // "{"name":"张三"}"
    + +

    上面代码中，JSON.stringify发现参数对象有toJSON方法，就直接使用这个方法的返回值作为参数，而忽略原对象的其他参数。

    +

    Date对象就有一个自己的toJSON方法。

    +
    1
    2
    3
    var date = new Date('2015-01-01');
    date.toJSON() // "2015-01-01T00:00:00.000Z"
    JSON.stringify(date) // ""2015-01-01T00:00:00.000Z""
    + +

    上面代码中，JSON.stringify发现处理的是Date对象实例，就会调用这个实例对象的toJSON方法，将该方法的返回值作为参数。

    +

    toJSON方法的一个应用是，将正则对象自动转为字符串。因为JSON.stringify默认不能转换正则对象，但是设置了toJSON方法以后，就可以转换正则对象了。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var obj = {
      reg: /foo/
    };

    // 不设置 toJSON 方法时
    JSON.stringify(obj) // "{"reg":{}}"

    // 设置 toJSON 方法时
    RegExp.prototype.toJSON = RegExp.prototype.toString;
    JSON.stringify(/foo/) // ""/foo/""
    + +

    上面代码在正则对象的原型上面部署了toJSON()方法，将其指向toString()方法，因此转换成 JSON 格式时，正则对象就先调用toJSON()方法转为字符串，然后再被JSON.stringify()方法处理。

    +

    4、JSON.parse()

    JSON.parse方法用于将 JSON 字符串转换成对应的JSON值。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    JSON.parse('{}') // {}
    JSON.parse('true') // true
    JSON.parse('"foo"') // "foo"
    JSON.parse('[1, 5, "false"]') // [1, 5, "false"]
    JSON.parse('null') // null

    var o = JSON.parse('{"name": "张三"}');
    o.name // 张三
    + +

    如果传入的字符串不是有效的 JSON 格式，JSON.parse方法将报错。

    +
    1
    2
    JSON.parse("'String'") // illegal single quotes
    // SyntaxError: Unexpected token ILLEGAL
    + +

    上面代码中，双引号字符串中是一个单引号字符串，因为单引号字符串不符合 JSON 格式，所以报错。

    +

    为了处理解析错误，可以将JSON.parse方法放在try...catch代码块中。

    +
    1
    2
    3
    4
    5
    try {
      JSON.parse("'String'");
    } catch(e) {
      console.log('parsing error');
    }
    + +

    JSON.parse方法可以接受一个处理函数，作为第二个参数，用法与JSON.stringify方法类似。

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function f(key, value) {// 参数：键名、键值
      if (key === 'a') {
        return value + 10;
      }
      return value;
    }

    JSON.parse('{"a": 1, "b": 2}', f)
    // {a: 11, b: 2}
    + +

    上面代码中，JSON.parse的第二个参数是一个函数，如果键名是a，该函数会将键值加上10。

    +

    文档

    学习文档：https://wangdoc.com/javascript/

    +
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/d42987132638/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    JavaScript
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    目录
    1. 1. 内置对象篇
      1. 1.1. 一、Object对象
      2. 1.2. 1、概述
      3. 1.3. 2、Object() 当作工具方法（不通过new创建）
      4. 1.4. 3、Object构造函数（通过new创建）
      5. 1.5. 4、Object 的静态方法
        1. 1.5.1. Object.keys()
        2. 1.5.2. Object.getOwnPropertyNames()
        3. 1.5.3. Object的其他静态方法
          1. 1.5.3.1. （1）对象属性模型的相关方法
          2. 1.5.3.2. （2）控制对象状态的方法
          3. 1.5.3.3. （3）原型链相关方法
      6. 1.6. 5、Object 的实例方法
        1. 1.6.1. Object.prototype.valueOf()
        2. 1.6.2. Object.prototype.toString()
          1. 1.6.2.1. toString() 的应用：判断数据类型
        3. 1.6.3. Object.prototype.toLocaleString()
        4. 1.6.4. Object.prototype.hasOwnProperty()
      7. 1.7. 二、属性描述对象
      8. 1.8. 1、概述
      9. 1.9. 2、Object.getOwnPropertyDescriptor()
      10. 1.10. 3、Object.getOwnPropertyNames()
      11. 1.11. 4、Object.defineProperty()，Object.defineProperties()
      12. 1.12. 5、Object.prototype.propertyIsEnumerable()
      13. 1.13. 6、元属性
        1. 1.13.1. value目标属性的值
        2. 1.13.2. writable可写性
        3. 1.13.3. enumerable可遍历性
        4. 1.13.4. configurable可配置性
      14. 1.14. 7、存取器（get和set）
      15. 1.15. 8、对象的拷贝
      16. 1.16. 9、控制对象读写状态
        1. 1.16.1. Object.preventExtensions() 防止新增
        2. 1.16.2. Object.isExtensible() 是可新增的？
        3. 1.16.3. Object.seal() 密封
        4. 1.16.4. Object.isSealed() 是密封的？
        5. 1.16.5. Object.freeze() 冻结
        6. 1.16.6. Object.isFrozen() 是冻结的？
        7. 1.16.7. 局限性
      17. 1.17. 三、Array对象
      18. 1.18. 1、Array构造函数
      19. 1.19. 2、静态方法
        1. 1.19.1. Array.isArray()
      20. 1.20. 3、实例方法
        1. 1.20.1. valueOf() 原数组，toString() 转字符串
        2. 1.20.2. push() 末尾添加，pop() 删除末尾
        3. 1.20.3. unshift() 首位添加, shift() 删除首位
        4. 1.20.4. join() 连接每个成员-转字符串
        5. 1.20.5. concat() 合并数组
        6. 1.20.6. reverse() 反转
        7. 1.20.7. slice() 部分-提取部分成员
          1. 1.20.7.1. 应用-类数组转数组
        8. 1.20.8. splice() 从第几个开始，删除几个，并添加成员，返回被删除成员。
          1. 1.20.8.1. 应用-拆分数组
        9. 1.20.9. sort() 排序
          1. 1.20.9.1. 应用-自定义排序
        10. 1.20.10. map() 映射 每个成员 并返回
        11. 1.20.11. forEach() 循环每个成员
        12. 1.20.12. filter() 过滤
        13. 1.20.13. some()某个，every()每个
        14. 1.20.14. reduce() 累计器，reduceRight() 反向累计器
          1. 1.20.14.1. 应用-找出字符最长的数组成员
          2. 1.20.14.2. 应用-按属性对object分类
        15. 1.20.15. indexOf() 搜索成员第一个出现的位置，lastIndexOf() 搜索成员最后出现的位置
        16. 1.20.16. 链式使用
      21. 1.21. 四、包装对象
      22. 1.22. 1、定义
      23. 1.23. 2、实例方法
        1. 1.23.1. 2.1 valueOf()
        2. 1.23.2. 2.2 toString()
      24. 1.24. 3、原始类型与实例对象的自动转换
      25. 1.25. 4、自定义方法
      26. 1.26. 五、Boolean对象
      27. 1.27. 1、概述
      28. 1.28. 2、Boolean 函数的类型转换作用
      29. 1.29. 六、Number对象
      30. 1.30. 1、概述
      31. 1.31. 2、静态属性
      32. 1.32. 3、实例方法
        1. 1.32.1. 3.1 Number.prototype.toString() 可转成多种进制字符串
        2. 1.32.2. 3.2 Number.prototype.toFixed() 转成保留指定小数位数的字符串
        3. 1.32.3. 3.3 Number.prototype.toExponential() 转成科学计数法形式字符串
        4. 1.32.4. 3.4 Number.prototype.toPrecision()转为指定位数的有效数字
        5. 1.32.5. 4.5 Number.prototype.toLocaleString()
          1. 1.32.5.1. 应用-添加千位分隔符
      33. 1.33. 4、自定义方法
      34. 1.34. 七、String对象
      35. 1.35. 1、概述
      36. 1.36. 2、静态方法
        1. 1.36.1. String.fromCharCode()
      37. 1.37. 3、实例属性
        1. 1.37.1. String.prototype.length
      38. 1.38. 4、实例方法
        1. 1.38.1. 4.1 String.prototype.charAt() 返回指定位置的字符
        2. 1.38.2. 4.2 String.prototype.charCodeAt()返回字符串指定位置的 Unicode 码点（十进制表示）
        3. 1.38.3. 4.3 String.prototype.concat() 合并字符串，返回新字符串，不改变原字符串
        4. 1.38.4. 4.4 String.prototype.slice() 取出部分子字符串，不改变原字符串
          1. 1.38.4.0.1. 负数表示倒数
      39. 1.38.5. 4.5 String.prototype.substring() 和slice类似
        1. 1.38.5.1. 小总结：substring() 和 slice() 的区别，有两个。
      40. 1.38.6. 4.6 String.prototype.substr() 和 slice、substring类似，区别是参数二表示长度
      41. 1.38.7. 4.7 String.prototype.indexOf() 搜索子串第一个出现的位置，String.prototype.lastIndexOf() 搜索子串最后出现的位置
      42. 1.38.8. 4.8 String.prototype.trim() ‘’修剪’‘两端空格，不改变原字符串
      43. 1.38.9. 4.9 String.prototype.toLowerCase() 全转小写，String.prototype.toUpperCase() 全转大写，都不改变原字符串
      44. 1.38.10. 4.10 String.prototype.match() 匹配子串，返回数组（数组带index、input属性）
      45. 1.38.11. 4.11 String.prototype.search() 搜索子串第一次出现的位置，没有则返-1，String.prototype.replace() 替换子串，参数二替换参数一，不改变原字符串
      46. 1.38.12. 4.12 String.prototype.split() 按给定规则分割字符串，返回数组
      47. 1.38.13. 4.13 String.prototype.localeCompare() 比较两个字符串，返回整数。
    2. 1.39. 八、Math对象
    3. 1.40. 1、静态属性
    4. 1.41. 2、静态方法
      1. 1.41.1. 2.1 Math.abs() 绝对值
      2. 1.41.2. 2.2 Math.max() 最大值，Math.min()最 小值
      3. 1.41.3. 2.3 Math.floor() 向下取整，Math.ceil() 向上取整
      4. 1.41.4. 2.4 Math.round() 四舍五入
      5. 1.41.5. 2.5 Math.pow() 指数运算 （次方运算）
      6. 1.41.6. 2.6 Math.sqrt() 平方根
      7. 1.41.7. 2.7 Math.log() 自然对数
      8. 1.41.8. 2.8 Math.exp() e的指数
      9. 1.41.9. 2.9 Math.random() 0到1的随机数（可能等于0，但一定小于1）
      10. 1.41.10. 2.10 三角函数方法
    5. 1.42. 九、Date对象
    6. 1.43. 1、普通函数的用法
    7. 1.44. 2、构造函数的用法
    8. 1.45. 3、日期的运算
    9. 1.46. 4、静态方法
      1. 1.46.1. 4.1 Date.now() 当前时间戳
      2. 1.46.2. 4.2 Date.parse() 解析日期字符串，返回该时间点的时间戳
      3. 1.46.3. 4.3 Date.UTC() 以年、月、日等变量作为参数，返回该时间点的时间戳
    10. 1.47. 5、实例方法
      1. 1.47.1. 5.1 Date.prototype.valueOf() 返回时间戳，等同于getTime()。（减法运算默认调用）
      2. 1.47.2. 5.2 to 类方法（返回字符串相关）
        1. 1.47.2.1. （1）Date.prototype.toString() 返回一个完整的日期字符串（直接读取实例默认调用此方法）
        2. 1.47.2.2. （2）Date.prototype.toUTCString() 返回对应的UTC时间（世界标准时），比北京时间晚8小时
        3. 1.47.2.3. （3）Date.prototype.toISOString() 返回对应时间的 ISO8601 写法（UTC时间）
        4. 1.47.2.4. （4）Date.prototype.toJSON() 返回符合JSON格式字符串，与toISOString方法的返回结果完全相同。
        5. 1.47.2.5. （5）Date.prototype.toDateString() 返回日期字符串（不含时分秒）
        6. 1.47.2.6. （6）Date.prototype.toTimeString() 返回时间字符串（不含年月日）
        7. 1.47.2.7. （7）本地时间
      3. 1.47.3. 5.3 get类 （获取年、月、日、时、分、秒等）
        1. 1.47.3.0.0.1. 例子：计算本年度还剩下多少天
  • 1.47.4. 5.4 set 类方法
  • 1.48. 十、RegExp 对象
  • 1.49. 1、概述
  • 1.50. 2、实例属性
  • 1.51. 3、实例方法
    1. 1.51.1. 3.1 RegExp.prototype.test() 当前模式是否匹配参数字符串，返回布尔值
    2. 1.51.2. 3.2 RegExp.prototype.exec() 返回匹配结果，如匹配则返回一个数组，成员是匹配到的子字符串，否则返回null
  • 1.52. 4、字符串的实例方法
    1. 1.52.1. 4.1 String.prototype.match() 匹配，返回匹配结果数组或null
    2. 1.52.2. 4.2 String.prototype.search() 返回第一个满足匹配条件的位置，不满足则返-1
    3. 1.52.3. 4.3 String.prototype.replace() 替换匹配的值，参数一是子串或正则，参数二是替换内容
    4. 1.52.4. 4.4 String.prototype.split() 按给定规则分割字符串，返回数组
  • 1.53. 5、匹配规则
    1. 1.53.1. 5.1 字面量字符和元字符
      1. 1.53.1.1. （1）点字符（.) 类似通配
      2. 1.53.1.2. （2）位置字符(^) ($) 开始位置和结束位置
      3. 1.53.1.3. （3）选择符（|） 表示’’或关系’’
    2. 1.53.2. 5.2 转义符（\ 反斜杠）
    3. 1.53.3. 5.3 特殊字符
    4. 1.53.4. 5.4 字符类
      1. 1.53.4.0.1. （1）脱字符（^ 排除）
      2. 1.53.4.0.2. （2）连字符（- 字符连续范围）
  • 1.53.5. 5.5 预定义模式 (常见模式简写\d\D\w\W\s\S\b\B)
  • 1.53.6. 5.6 重复类 （ {n} {n,} {n,m} ）
  • 1.53.7. 5.7 量词符（?）（*）（+）
  • 1.53.8. 5.8 贪婪模式（对量词符可使用非贪婪模式）
  • 1.53.9. 5.9 修饰符
    1. 1.53.9.1. （1）g 修饰符 （全局匹配）
    2. 1.53.9.2. （2）i 修饰符 （不区分大小写）
    3. 1.53.9.3. （3）m 修饰符（让^和$识别换行符）
  • 1.53.10. 5.10 组匹配
    1. 1.53.10.1. （1）概述 （圆括号分组）
    2. 1.53.10.2. （2）非捕获组
    3. 1.53.10.3. （3）先行断言
    4. 1.53.10.4. （4）先行否定断言
  • 1.54. 十一、JSON对象
  • 1.55. 1、JSON 格式
  • 1.56. 2、JSON 对象
  • 1.57. 3、JSON.stringify() 转为JSON字符串
    1. 1.57.1. 3.1 基本用法
    2. 1.57.2. 3.2 第二个参数 （一个数组，对象属性白名单；或一个函数，改写返回值）
    3. 1.57.3. 3.3 第三个参数 （增加返回JSON字符串的可读性；json格式）
    4. 1.57.4. 3.4 参数对象的 toJSON 方法（对象自定义toJSON方法，转字符串只取该方法返回值）
  • 1.58. 4、JSON.parse()
  • 1.59. 文档
    • 最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    \ No newline at end of file diff --git a/post/d6c2d8fc1a5a/index.html b/post/d6c2d8fc1a5a/index.html new file mode 100644 index 00000000..41c4d00a --- /dev/null +++ b/post/d6c2d8fc1a5a/index.html @@ -0,0 +1,843 @@ +阮一峰ES6入门学习笔记 | YT 前端日记 + + + + + + + + + + + + +

    阮一峰ES6入门学习笔记

    发表于|更新于|前端
    |字数总计:8.7k|阅读时长:35分钟|阅读量:|评论数:

    阮一峰ES6入门学习笔记

    let和const

      +

    • let只会在命令所在代码块内生效

      +
      • +

    • 在for循环中使用let，会在设置循环变量的地方建立一个父作用域（即for代码块内依旧可以声明同名变量

      +
      • +

    • 相比较var，let不能在声明之前使用

      +
      • +

    • 只要块级作用域中存在let，那么外部的同名变量就被屏蔽，这时候如果在声明前使用，会进入『暂时性死区』，将该变量看做不存在

      +
      • +

    • 如果存在暂时性死区，那么无论是调用该变量还是使用typeof都会抛出ReferenceError

      +
      • +

    • let不允许同一变量的重复声明

      +
      • +

    • 外层块级作用域的变量可以在内层块级作用域被访问

      +
      • +

    • 块级作用域可以替代匿名立即执行函数表达式（匿名IIFE）实现不污染外部变量的效果

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      // IIFE 写法
      (function () {
        var tmp = ...;
        ...
      }());

      // 块级作用域写法
      {
        let tmp = ...;
        ...
      }
      +
      • +

    • 函数可以在块级作用域内声明，但只能在作用域内被调用（ES6），ES5之前的版本会污染外部同名函数

      +
      • +

    • 块级作用域必须包含括号

      +
      1
      2
      3
      4
      5
      6
      7
      // 第一种写法，报错
      if (true) let x = 1;

      // 第二种写法，不报错
      if (true) {
        let x = 1;
      }
      +
      • +

    • const的作用域与let基本一致

      +
      • +

    • const只能保证变量所指向的内存地址不被改变，因此如果const指向了一个对象，那么对象中的内容依旧可以修改，但对象本身不能被覆盖/删除。

      +
      +

      如果真的需要冻结对象，应该使用Object.freeze方法

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      const foo = Object.freeze({});

      // 常规模式时，下面一行不起作用；
      // 严格模式时，该行会报错
      foo.prop = 123;

      // 彻底冻结一个对象及其所有属性
      var constantize = (obj) => {
        Object.freeze(obj);
        Object.keys(obj).forEach( (key, i) => {
          if ( typeof obj[key] === 'object' ) {
            constantize( obj[key] );
          }
        });
      };
      +
      +
      • +

    • const和let不能被delete删除，因为两者均属于不可设置属性

      +
      • +

    • 顶层对象在浏览器和Node中分别指window和global，在ES5中顶层对象的属性和全局变量是等价的

      +
      • +

    • ES2020引入了globalThis作为顶层对象，这样就可以在任何环境下拿到全局this

      +
      • +
    +

    变量的解构赋值

      +

    • ES6允许对变量进行解构赋值，只要左右两边模式相同就可以一一对应，如果解构失败，失败的值等于undefined：

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      let [foo, [[bar], baz]] = [1, [[2], 3]];
      foo // 1
      bar // 2
      baz // 3

      let [ , , third] = ["foo", "bar", "baz"];
      third // "baz"

      let [x, , y] = [1, 2, 3];
      x // 1
      y // 3

      let [head, ...tail] = [1, 2, 3, 4];
      head // 1
      tail // [2, 3, 4]

      let [x, y, ...z] = ['a'];
      x // "a"
      y // undefined
      z // []
      +
      • +

    • 只要数据结构拥有Iterator接口，就都可以使用数组形式的解构赋值

      +
      • +

    • 解构赋值允许指定默认值，但默认值只有当对应位置为undefined（严格等于）才能生效

      +
      1
      2
      3
      4
      5
      let [foo = true] = [];
      foo // true

      let [x, y = 'b'] = ['a']; // x='a', y='b'
      let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
      +
      • +

    • 解构赋值的默认值是惰性求值的，只有在用到的时候才会被求值

      +
      • +

    • 解构赋值的默认值可以引用解构赋值的其他变量（但必须是已经声明的变量）

      +
      1
      2
      3
      4
      let [x = 1, y = x] = [];     // x=1; y=1
      let [x = 1, y = x] = [2];    // x=2; y=2
      let [x = 1, y = x] = [1, 2]; // x=1; y=2
      let [x = y, y = 1] = [];     // ReferenceError: y is not defined
      +
      • +

    • 解构赋值也可以用于对象，但是变量必须与属性同名才能取到相应的值，否则为undefined

      +
      • +

    • 对象解构可以方便的提取现有对象的方法：

      +
      1
      2
      3
      4
      5
      6
      // 例一
      let { log, sin, cos } = Math;

      // 例二
      const { log } = console;
      log('hello') // hello
      +
      • +

    • 如果变量名和属性名不一致，需要指定属性名

      +
      1
      2
      3
      4
      5
      6
      7
      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'
      +
      • +

    • 解构也可以用于嵌套的对象

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      let obj = {
        p: [
          'Hello',
          { y: 'World' }
        ]
      };

      // 这里的p是模式名，不是变量，不会被赋值
      let { p: [x, { y }] } = obj;
      // 如果要赋值，需要额外加一个p
      let { p, p: [x, { y }] } = obj;
      x // "Hello"
      y // "World"
      +
      • +

    • 对象的解构赋值可以取到继承的属性

      +
      1
      2
      3
      4
      5
      6
      const obj1 = {};
      const obj2 = { foo: 'bar' };
      Object.setPrototypeOf(obj1, obj2);

      const { foo } = obj1;
      foo // "bar"
      +
      • +

    • 对象的解构也可以指定默认值

      +
      • +

    • 字符串也可以被解构赋值（因为字符串属于可迭代对象）

      +
      • +

    • 只要等号右边的值不是对象/数组，就会先将其转换为对象，因此undefined和null是不能被解构赋值的

      +
      • +

    • 函数参数也可以被解构赋值

      +
      1
      2
      3
      4
      5
      function add([x, y]){
        return x + y;
      }

      add([1, 2]); // 3
      +
      • +

    • 函数参数也可以使用默认值

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      // 情况1（为第一个参数中的x/y指定默认值）
      function move({x = 0, y = 0} = {}) {
        return [x, y];
      }

      move({x: 3, y: 8}); // [3, 8]
      move({x: 3}); // [3, 0]
      move({}); // [0, 0]
      move(); // [0, 0]

      // 情况2（为move的参数指定默认值，只要参数为undefined，就会触发默认值）
      function move({x, y} = { x: 0, y: 0 }) {
        return [x, y];
      }

      move({x: 3, y: 8}); // [3, 8]
      move({x: 3}); // [3, undefined]
      move({}); // [undefined, undefined]
      move(); // [0, 0]
      +
      • +

    • 用途

      +
        +
      • 交换变量的值（无需新增变量）
        • +
      • 从函数返回多个值
        • +
      • 为函数调用增加参数名称
        • +
      • 提取JSON中的数据
        • +
      • 作为函数参数的默认值
        • +
      • 遍历Map结构
        • +
      • 导入模块中的指定方法（最常用）
        • +
      +
      • +
    +

    字符串的扩展

      +

    • 字符串拥有遍历器接口，可以被循环遍历（支持大于0xFFFF的码点比如Emoji）

      +
      • +

    • 模板字符串

      +
        +

      • 使用反引号代替单双引号，可以嵌入模板字符串（可以当做普通字符串、也可以当做多行字符串、还可以插入变量）

        +
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        // 普通字符串
        `In JavaScript '\n' is a line-feed.`

        // 多行字符串
        `In JavaScript this is
         not legal.`

        console.log(`string text line 1
        string text line 2`);

        // 字符串中嵌入变量
        let name = "Bob", time = "today";
        `Hello ${name}, how are you ${time}?`
        +
        • +

      • 如果需要过滤换行符号，可以加一个trim()

        +
        1
        2
        3
        4
        5
        6
        $('#list').html(`
        <ul>
          <li>first</li>
          <li>second</li>
        </ul>
        `.trim());
        +
        • +

      • 嵌入变量需要把变量名加入${}里面，括号里面可以放入任意的JavaScript表达式，甚至可以调用函数，但不能调用没声明的变量

        +
        • +

      • 模板字符串可以嵌套使用

        +
        1
        2
        3
        4
        5
        6
        7
        8
        const tmpl = addrs => `
          <table>
          ${addrs.map(addr => `
            <tr><td>${addr.first}</td></tr>
            <tr><td>${addr.last}</td></tr>
          `).join('')}
          </table>
        `;
        +
        • +

      • 模板字符串可以作为函数被调用

        +
        1
        2
        let func = (name) => `Hello ${name}!`;
        func('Jack') // "Hello Jack!"
        • +
      +
      • +
    +

    字符串的新增方法

      +

    • includes()：是否包含参数字符串

      +
      • +

    • startsWith()：是否在原字符串的头部

      +
      • +

    • endsWith()：是否在原字符串的尾部

      +
      +

      这三个方法都支持使用第二个参数表示开始搜索的位置，其中endsWith是针对前n个字符，而其他两个方法针对从n到结束

      +
      +
      1
      2
      3
      4
      5
      let s = 'Hello world!';

      s.startsWith('world', 6) // true
      s.endsWith('Hello', 5) // true
      s.includes('Hello', 6) // false
      +
      • +

    • repeat()表示将原字符串重复n次

      +
      • +

    • padStart()和padEnd()表示在头部或尾部使用指定字符串补全

      +
      1
      2
      3
      4
      5
      'x'.padStart(5, 'ab') // 'ababx'
      'x'.padStart(4, 'ab') // 'abax'

      'x'.padEnd(5, 'ab') // 'xabab'
      'x'.padEnd(4, 'ab') // 'xaba'
      + +
      +

      最常见的用途是为指定的数值补全指定位数，或是提示字符串格式

      +
      1
      2
      3
      4
      5
      6
      '1'.padStart(10, '0') // "0000000001"
      '12'.padStart(10, '0') // "0000000012"
      '123456'.padStart(10, '0') // "0000123456"

      '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
      '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
      +
      +
      • +

    • ES2019新增了trimStart()和trimEnd()两个方法，和trim()一致，消除头部和尾部的空格，不会修改原始字符串

      +
      • +
    +

    正则的扩展

      +

    • 正则表达式的初始化

      +
      1
      2
      3
      4
      var regex = new RegExp('xyz', 'i');
      var regex = /xyz/i;
      var regex = new RegExp(/xyz/i);
      new RegExp(/abc/ig, 'i') // ES6引入，ig被覆盖为i
      +
      • +

    • 字符串的正则方法

      +
        +
      • match()
        • +
      • replace()
        • +
      • search()
        • +
      • split()
        • +
      +
      • +

    • 正则表达式的u修饰符（ES6引入），用于扩展到所有Unicode字符

      +
        +
      • 包含双Unicode码字符（如Emoji）
        • +
      • 包含\u{0xFFFF}以上的Unicode码
        • +
      • 包含同字但不同Unicode码的情况（如K可以使用\u{004B}或\u{212A}表示）
        • +
      +
      1
      2
      3
      4
      /^.$/u.test("😂")
      true
      /^.$/.test("😂")
      false
      +
      • +

    • 正则表达式的y修饰符（ES6引入），要求这一次匹配必须从上一次匹配的头部开始（粘连/sticky）

      +
      • +

    • ES6引入了正则表达式的flags属性，可以返回当前所设置的所有修饰符

      +
      • +

    • ES2018引入了s修饰符，使得点号可以匹配任意单个字符，可以使用dotAll属性进行访问

      +
      1
      2
      3
      4
      5
      6
      7
      const re = /foo.bar/s;
      // 另一种写法
      // const re = new RegExp('foo.bar', 's');

      re.test('foo\nbar') // true
      re.dotAll // true
      re.flags // 's'
      +
      • +

    • 先行断言和后行断言

      +
      1
      2
      3
      4
      5
      6
      7
      // 先行断言
      /\d+(?=%)/.exec('100% of US presidents have been male')  // ["100"]
      /\d+(?!%)/.exec('that’s all 44 of them')                 // ["44"]

      // 后行断言
      /(?<=\$)\d+/.exec('Benjamin Franklin is on the $100 bill')  // ["100"]
      /(?<!\$)\d+/.exec('it’s is worth about €90')                // ["90"]
      +
      • +

    • Unicode属性类（匹配某一类的所有Unicode字符）

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      const regexGreekSymbol = /\p{Script=Greek}/u;
      regexGreekSymbol.test('π') // true

      const regex = /^\p{Decimal_Number}+$/u;
      regex.test('𝟏𝟐𝟑𝟜𝟝𝟞𝟩𝟪𝟫𝟬𝟭𝟮𝟯𝟺𝟻𝟼') // true

      const regex = /^\p{Number}+$/u;
      regex.test('²³¹¼½¾') // true
      regex.test('㉛㉜㉝') // true
      regex.test('ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫ') // true

      // 匹配所有空格
      \p{White_Space}

      // 匹配各种文字的所有字母，等同于 Unicode 版的 \w
      [\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]

      // 匹配各种文字的所有非字母的字符，等同于 Unicode 版的 \W
      [^\p{Alphabetic}\p{Mark}\p{Decimal_Number}\p{Connector_Punctuation}\p{Join_Control}]

      // 匹配 Emoji
      /\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?|\p{Emoji_Presentation}|\p{Emoji}\uFE0F/gu

      // 匹配所有的箭头字符
      const regexArrows = /^\p{Block=Arrows}+$/u;
      regexArrows.test('←↑→↓↔↕↖↗↘↙⇏⇐⇑⇒⇓⇔⇕⇖⇗⇘⇙⇧⇩') // true
      +
      • +

    • 组匹配和具名组匹配

      +
        +

      • 使用括号注明捕获组

        +
        1
        2
        3
        4
        5
        6
        const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;

        const matchObj = RE_DATE.exec('1999-12-31');
        const year = matchObj[1]; // 1999
        const month = matchObj[2]; // 12
        const day = matchObj[3]; // 31
        +
        • +

      • ES2018引入具名组匹配，允许给匹配组命名

        +
        1
        2
        3
        4
        5
        6
        const RE_DATE = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;

        const matchObj = RE_DATE.exec('1999-12-31');
        const year = matchObj.groups.year; // 1999
        const month = matchObj.groups.month; // 12
        const day = matchObj.groups.day; // 31
        +
        • +

      • 可以将具名组匹配和解构赋值相结合

        +
        1
        2
        3
        let {groups: {one, two}} = /^(?<one>.*):(?<two>.*)$/u.exec('foo:bar');
        one  // foo
        two  // bar
        +
        • +

      • 还可以与字符串替换结合

        +
        1
        2
        '2015-01-02'.replace(re, '$<day>/$<month>/$<year>')
        // '02/01/2015'
        • +
      +
      • +

    • 可以引用前面的某个普通组/具名组

      +
      1
      2
      3
      4
      5
      6
      7
      8
      const RE_TWICE = /^(?<word>[a-z]+)!\k<word>$/;
      RE_TWICE.test('abc!abc') // true
      RE_TWICE.test('abc!ab') // false

      // 数字引用也是有效的
      const RE_TWICE = /^(?<word>[a-z]+)!\k<word>!\1$/;
      RE_TWICE.test('abc!abc!abc') // true
      RE_TWICE.test('abc!abc!ab') // false
      +
      • +

    • 可以通过exec()返回后的indices属性拿到每个匹配的开始和结束位置

      +
      1
      2
      3
      4
      5
      const text = 'zabbcdef';
      const re = /ab+(cd)/;
      const result = re.exec(text);

      result.indices // [ [ 1, 6 ], [ 4, 6 ] ]
      +
      • +

    • 还可以通过indices属性的groups属性拿到一个包含具名组信息和开始/结束位置的对象

      +
      1
      2
      3
      4
      5
      const text = 'zabbcdef';
      const re = /ab+(?<Z>cd)/;
      const result = re.exec(text);

      result.indices.groups // { Z: [ 4, 6 ] }
      +
      • +

    • ES2020引入了String.prototype.matchAll()方法，可以一次性取出所有匹配，但会一个遍历器

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      const string = 'test1test2test3';

      // g 修饰符加不加都可以
      const regex = /t(e)(st(\d?))/g;

      for (const match of string.matchAll(regex)) {
        console.log(match);
      }
      // ["test1", "e", "st1", "1", index: 0, input: "test1test2test3"]
      // ["test2", "e", "st2", "2", index: 5, input: "test1test2test3"]
      // ["test3", "e", "st3", "3", index: 10, input: "test1test2test3"]
      +
      • +

    • 遍历器转为数组的方式

      +
      1
      2
      [...string.matchAll(regex)]
      Array.from(string.matchAll(regex))
      • +
    +

    数值的扩展

      +

    • ES6规范了二进制/八进制分别用0b和0o表示

      +
      • +

    • 使用Number()构造函数将不同进制的数字规范为十进制

      +
      • +

    • ES6在Number对象上新增了Number.isFinite()和Number.isNaN()两个方法，相比较全局的同名方法，Number的这两个方法

      +
      • +

    • ES6将parseInt()和parseFloat()移植到了Number对象中，使得语言逐步模块化

      +
      1
      2
      Number.parseInt === parseInt // true
      Number.parseFloat === parseFloat // true
      +
      • +

    • Number.isInteger()可以用来判断一个数值是否为整数，但是对于20.0也会返回True（因为JavaScript内对浮点数和整数的存储方法相同）

      +
      +

      因为JavaScript内部使用64位双精度存储数字，因此该方法可能会存在误判：

      +
      1
      2
      Number.parseInt === parseInt // true
      Number.parseFloat === parseFloat // true
      +
      +
      • +

    • Number.EPSILON表示最小精度的数字，用于为浮点数计算设置一个误差范围

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      0.1 + 0.2
      // 0.30000000000000004

      0.1 + 0.2 - 0.3
      // 5.551115123125783e-17

      5.551115123125783e-17.toFixed(20)
      // '0.00000000000000005551'

      0.1 + 0.2 === 0.3 // false

      function withinErrorMargin (left, right) {
        return Math.abs(left - right) < Number.EPSILON * Math.pow(2, 2);
      }

      0.1 + 0.2 === 0.3 // false
      withinErrorMargin(0.1 + 0.2, 0.3) // true

      1.1 + 1.3 === 2.4 // false
      withinErrorMargin(1.1 + 1.3, 2.4) // true
      +
      • +

    • Number.isSafeInteger()属性用于判断是否存在溢出情况

      +
      • +

    • Math.trunc()方法用于去除小数部分，返回整数部分，是Math.ceil()和Math.floor()的结合

      +
      +
      1
      2
      3
      Math.trunc = Math.trunc || function(x) {
        return x < 0 ? Math.ceil(x) : Math.floor(x);
      };
      +
      +
      • +

    • Math.sign()可以用于判断一个数到底是正数、负数还是0

      +
      • +

    • Math.cbrt()可以用于计算一个数的立方根

      +
      • +

    • Math.clz32()可以用于计算一个32位无符号整数内存在多少个前导0

      +
      +
      1
      2
      3
      4
      5
      Math.clz32(0) // 32
      Math.clz32(1) // 31
      Math.clz32(1000) // 22
      Math.clz32(0b01000000000000000000000000000000) // 1
      Math.clz32(0b00100000000000000000000000000000) // 2
      +
      +
      • +

    • Math.log10()可以返回10为底的x的对数

      +
      • +

    • Math.log2()可以返回以2为底的x的对数

      +
      • +

    • ES2016引入了指数运算符（**），但是和其他语言不一样，它是右结合的

      +
      +
      1
      2
      3
      4
      5
      6
      // 相当于 2 ** (3 ** 2)
      2 ** 3 ** 2
      // 512

      a **= 2;
      // 相当于a = a * a
      +
      +
      • +

    • ES2020引入了一个新的数据类型BigInt来解决这个问题，可以存储任何位数的整数，在声明字面量时添加后缀n来声明，也可以通过BitInt()构造方法将其他类型的值转换为BitInt

      +
      • +
    +

    函数的扩展

      +

    • ES6之后函数参数可以引入默认值：

      +
      1
      2
      3
      4
      5
      6
      7
      function log(x, y = 'World') {
        console.log(x, y);
      }

      log('Hello') // Hello World
      log('Hello', 'China') // Hello China
      log('Hello', '') // Hello
      +
      • +

    • 使用参数默认值时，函数不能有同名参数

      +
      • +

    • 可以与解构赋值的默认值结合使用

      +
      1
      2
      3
      4
      5
      function foo({x, y = 5} = {}) {
        console.log(x, y);
      }

      foo() // undefined 5
      +
      • +

    • 区分默认值两种写法：

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      // 写法一
      function m1({x = 0, y = 0} = {}) {
        return [x, y];
      }

      // 写法二
      function m2({x, y} = { x: 0, y: 0 }) {
        return [x, y];
      }

      // 函数没有参数的情况
      m1() // [0, 0]
      m2() // [0, 0]

      // x 和 y 都有值的情况
      m1({x: 3, y: 8}) // [3, 8]
      m2({x: 3, y: 8}) // [3, 8]

      // x 有值，y 无值的情况
      m1({x: 3}) // [3, 0]
      m2({x: 3}) // [3, undefined]

      // x 和 y 都无值的情况
      m1({}) // [0, 0];
      m2({}) // [undefined, undefined]

      m1({z: 3}) // [0, 0]
      m2({z: 3}) // [undefined, undefined]
      +
      • +

    • 只有尾部的参数才能有默认值

      +
      • +

    • 函数的length参数指定的是期望传入的参数个数，不计包含默认值的参数（因为不期望能传入）

      +
      • +

    • ES6引入rest参数替代之前的arguments变量实现可变参数

      +
      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      function add(...values) {
        let sum = 0;

        for (var val of values) {
          sum += val;
        }

        return sum;
      }

      add(2, 5, 3) // 10

      // arguments变量的写法
      function sortNumbers() {
        // 使用Array.prototype.slice.call将参数转换为数组
        return Array.prototype.slice.call(arguments).sort();
      }

      // rest参数的写法
      const sortNumbers = (...numbers) => numbers.sort();
      +
      +
      • +

    • 函数的name属性可以返回函数名

      +
      • +

    • 箭头函数的四个注意点：

      +
        +
      • this指向定义时所在的对象，而不是使用时所在的对象
        • +
      • 不可以当做构造函数使用（不能使用new命令）
        • +
      • 没有arguments对象，但是可以使用rest参数实现可变参数
        • +
      • 没有yield命令，不能当做Generator函数
        • +
      +
      • +

    • 不适合使用箭头函数的地方

      +
        +
      • 定义对象的方法，这里的this会指向全局对象，因为对象不属于作用域
        • +
      • this的值动态变化（例如响应事件时，因为事件的this一般是触发事件的对象，不是某个固定的对象）
        • +
      +
      • +

    • 尾调用优化（目前只有Safari支持，可以节省内存，直达内层函数的调用帧，但是要求严格模式开启）

      +
      • +

    • 尾递归优化（存储递归的结果，不会发生栈溢出，所有满足ES6规范的客户端都要支持）

      +
      • +

    • 递归函数的改写

      +
        +
      • 对于需要状态参数的递归函数，可以用另一个caller将其包裹，保持API的友好
        • +
      +
      • +

    • ES2019要求函数的toString()方法必须返回函数本身的所有代码（包括注释、空格）

      +
      • +

    • ES2019允许catch语句省略参数

      +
      1
      2
      3
      4
      5
      try {
        
      } catch { // 如果用不上err不用再写
        
      }
      • +
    +

    关于this/apply/call/bind

    this

      +

    • 默认指向最后调用它的那个对象

      +
      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      var name = "windowsName";

      function fn() {
        var name = 'Cherry';
        innerFunction();
        function innerFunction() {
          console.log(this.name);      // windowsName
        }
      }

      fn()
      // 这时候fn()的this是window
      +
      +
      • +

    • 箭头函数中永远指向定义时候的this，不受调用干扰

      +
      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      var name = "windowsName";

      var fn = {
        name: 'Cherry',
        // innerFunction的this为fn
        innerFunction: function() {
          // 此处继承innerFunction的this
          setTimeout(() => {
            console.log(this.name)
          })
        }
      }

      fn.innerFunction()
      + +

      箭头函数本身没有this，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined

      +
      +
      • +

    • 使用that = this来指定this

      +
      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      var name = "windowsName";

      var a = {

        name : "Cherry",

        func1: function () {
          console.log(this.name)     
        },

        func2: function () {
          var that = this;
          setTimeout( function() {
          	// 指定后that就变成了a而不是window
            that.func1()
          },100);
        }

      };

      a.func2()       // Cherry
      +
      • +
    +

    apply/call/bind

      +

    • 使用这三个函数也可以来改变this的指向

      +
      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      func2: function () {
        setTimeout(  function () {
          this.func1()
        }.apply(a),100);
      }

      func2: function () {
        setTimeout(  function () {
          this.func1()
        }.call(a),100);
      }

      func2: function () {
        setTimeout(  function () {
          this.func1()
        }.bind(a)(),100);
      }
      +
      +
      • +

    • apply调用一个函数，传入this值和数组包裹的参数列表

      +
      • +

    • call调用一个函数，传入this值和单独的若干个参数

      +
      • +

    • bind创建一个新的函数，传入this和预置参数，被调用的时候可以传入新的参数，附加在预置参数之后

      +
      • +
    +

    数组的扩展

      +

    • 扩展运算符，可以理解为rest参数的逆运算，将一个数组转换为逗号分割的参数序列

      +
      1
      console.log(...[1, 2, 3]) // 1, 2, 3
      +
      • +

    • 扩展运算符可以代替apply方法：

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      // ES5 的写法
      function f(x, y, z) {
        // ...
      }
      var args = [0, 1, 2];
      f.apply(null, args);

      // ES6的写法
      function f(x, y, z) {
        // ...
      }
      let args = [0, 1, 2];
      f(...args);

      ---

      // ES5 的写法
      Math.max.apply(null, [14, 3, 77])

      // ES6 的写法
      Math.max(...[14, 3, 77])

      // 等同于
      Math.max(14, 3, 77);

      ---
        
      // ES5的 写法
      var arr1 = [0, 1, 2];
      var arr2 = [3, 4, 5];
      Array.prototype.push.apply(arr1, arr2);

      // ES6 的写法
      let arr1 = [0, 1, 2];
      let arr2 = [3, 4, 5];
      arr1.push(...arr2);
      +
      • +

    • 扩展运算符还可以用来复制数组（深拷贝）

      +
      1
      2
      3
      4
      5
      const a1 = [1, 2];
      // 写法一
      const a2 = [...a1];
      // 写法二
      const [...a2] = a1;
      +
      • +

    • 扩展运算符还可以合并数组（深拷贝）

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      const arr1 = ['a', 'b'];
      const arr2 = ['c'];
      const arr3 = ['d', 'e'];

      // ES5 的合并数组
      arr1.concat(arr2, arr3);
      // [ 'a', 'b', 'c', 'd', 'e' ]

      // ES6 的合并数组
      [...arr1, ...arr2, ...arr3]
      // [ 'a', 'b', 'c', 'd', 'e' ]
      +
      • +

    • 扩展运算符还可以生成数组

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      const [first, ...rest] = [1, 2, 3, 4, 5];
      first // 1
      rest  // [2, 3, 4, 5]

      const [first, ...rest] = [];
      first // undefined
      rest  // []

      const [first, ...rest] = ["foo"];
      first  // "foo"
      rest   // []
      +
      • +

    • 扩展运算符可以打散所有可迭代对象，比如ES6的字符串（可以实现按Unicode字符打散）

      +
      1
      [..."😂😂"] // (2) ["😂", "😂"]
      +
      • +

    • Array.from()方法可以将可遍历对象转换为真正的数组，效果和扩展运算符类似，但是Array.from()方法只要求有length属性，扩展运算符要求满足Symbol.iterator接口

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      let arrayLike = {
          '0': 'a',
          '1': 'b',
          '2': 'c',
          length: 3
      };

      // ES5的写法
      var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

      // ES6的写法
      let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
      +
      • +

    • Array.of()用于将一堆值转换为一个数组，为了弥补Array()函数构造函数的不足

      +
      1
      2
      3
      4
      5
      6
      7
      Array.of(3, 11, 8) // [3,11,8]
      Array.of(3) // [3]
      Array.of(3).length // 1

      Array() // []
      Array(3) // [, , ,]
      Array(3, 11, 8) // [3, 11, 8]
      +
      • +

    • Array.copyWithin()方法可以原地覆盖成员，三个参数分别为替换开始位置，读取开始位置（可以为负数），结束读取位置（可以为负数）

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      // 将3号位复制到0号位
      [1, 2, 3, 4, 5].copyWithin(0, 3, 4)
      // [4, 2, 3, 4, 5]

      // -2相当于3号位，-1相当于4号位
      [1, 2, 3, 4, 5].copyWithin(0, -2, -1)
      // [4, 2, 3, 4, 5]

      // 将3号位复制到0号位
      [].copyWithin.call({length: 5, 3: 1}, 0, 3)
      // {0: 1, 3: 1, length: 5}

      // 将2号位到数组结束，复制到0号位
      let i32a = new Int32Array([1, 2, 3, 4, 5]);
      i32a.copyWithin(0, 2);
      // Int32Array [3, 4, 5, 4, 5]

      // 对于没有部署 TypedArray 的 copyWithin 方法的平台
      // 需要采用下面的写法
      [].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
      // Int32Array [4, 2, 3, 4, 5]
      +
      • +

    • find()和findIndex()，接收回调函数，直到找到一个返回值为True的成员/成员位置，如果没有则返回undefined

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      // 回调函数可以有三个参数，分别为当前值，当前位置，原完整数组
      // 两个方法都可以接受第二个参数，用于绑定回调函数的this对象
      [1, 5, 10, 15].findIndex(function(value, index, arr) {
        return value > 9;
      }) // 2

      function f(v){
        return v > this.age;
      }
      let person = {name: 'John', age: 20};
      [10, 12, 26, 15].find(f, person);    // 26
      + +
      +

      这两个方法可以识别NaN，但indexOf()方法不行

      +
      +
      • +

    • fill()方法可以填充数组，有三个参数分别为填充的值、填充的起始位置、填充的结束位置，但是如果填充的类型是对象，那么所有对象都指向同一内存地址

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      let arr = new Array(3).fill({name: "Mike"});
      arr[0].name = "Ben";
      arr
      // [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]

      let arr = new Array(3).fill([]);
      arr[0].push(5);
      arr
      // [[5], [5], [5]]
      +
      • +

    • 数组实例的keys() values() entries()分别生成三个迭代器对象，用于迭代键、值、键值对，如果不使用for of循环，可以手动调用遍历器对象的next()方法进行遍历

      +
      • +

    • ES2016引入了includes()方法，相比较indexOf()方法更直观，第一个参数是搜索值，第二个参数是搜索的起始位置，使用的是严格相等运算符进行判断，不会出现[NaN].indexOf(NaN)返回-1的情况

      +
      +

      注意和Map&&Set的has方法区分开来

      +
      +
      • +
    +

    展平数组的若干方法

      +

    • 常规递归方法

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      function flattenMd(arr){
          var result=[]
          function flatten(arr){
              for (var i = 0; i < arr.length; i++) {
                  if (Array.isArray(arr[i])) {
                      flatten(arr[i]);
                  }else{
                      result.push(arr[i]);
                  }        
              }
          }
          flatten(arr);
          return result;
      }
      var arr=[1, [2, 3, [4, 5], 6], 7, 8]
      console.log(flattenMd(arr));[ 1, 2, 3, 4, 5, 6, 7, 8 ];
      +
      • +

    • 数组concat+递归

      +
      1
      2
      3
      4
      flatten = function (arr) {
          return arr.reduce((plane, toBeFlatten) => (plane.concat(Array.isArray(toBeFlatten) ? flatten(toBeFlatten) : toBeFlatten)), []);
      }

      +
      • +

    • 利用ES6的展开符号递归

      +
      1
      2
      3
      4
      function deepFlatten(arr) {
          flatten = (arr)=> [].concat(...arr);
          return flatten(arr.map(x=>Array.isArray(x)? deepFlatten(x): x));
      }
      +
      • +

    • 数组的join和split（只适用于数字数组）

      +
      1
      2
      3
      4
      5
      function flattenMd(arr) {
         return arr.join().split(',');   
      }
      var arr=['1', [null, 3, [4, 5], {K:1}], undefined, 8]
      console.log(flattenMd(arr));//[ '1', '', '3', '4', '5', '[object Object]', '', '8' ]
      +
      • +

    • ES6的Array.prototype.flat()方法

      +
      1
      2
      3
      4
      5
      6
      7
      8
      [1, 2, [3, [4, 5]]].flat()
      // [1, 2, 3, [4, 5]]

      [1, 2, [3, [4, 5]]].flat(2)
      // [1, 2, 3, 4, 5]

      [1, [2, [3]]].flat(Infinity)
      // [1, 2, 3]
      +
      • +

    • ES6的Array.prototype.flatMap()方法（结合了flat()和map()，但是只能展开一层数组，而且返回的还是一个嵌套数组）

      +
      1
      2
      3
      // 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
      [1, 2, 3, 4].flatMap(x => [[x * 2]])
      // [[2], [4], [6], [8]]
      • +
    +

    对象的扩展

      +

    • 属性可以简写（使用大括号包围）

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      function f(x, y) {
        return {x, y};
      }

      // 等同于

      function f(x, y) {
        return {x: x, y: y};
      }

      f(1, 2) // Object {x: 1, y: 2}
      +
      • +

    • 方法也可以简写（在Vue.js里面有用到）

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      const o = {
        method() {
          return "Hello!";
        }
      };

      // 等同于

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

    • JS模块也使用到了简写

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      let ms = {};

      function getItem (key) {
        return key in ms ? ms[key] : null;
      }

      function setItem (key, value) {
        ms[key] = value;
      }

      function clear () {
        ms = {};
      }

      module.exports = { getItem, setItem, clear };
      // 等同于
      module.exports = {
        getItem: getItem,
        setItem: setItem,
        clear: clear
      };
      +
      • +

    • 但是构造函数不能简写

      +
      • +

    • JavaScript定义对象的属性有两种方法，但是如果用大括号定义对象只能用方法1

      +
      1
      2
      3
      4
      5
      // 方法一
      obj.foo = true;

      // 方法二
      obj['a' + 'bc'] = 123;
      +
      • +

    • 方法也可以拥有name属性，返回方法的名字，但是匿名函数返回anonymous，bind方法创造的函数，名字前会加一个bound

      +
      • +

    • ES6引入了super关键字，指向原型对象，但是只能用在方法里

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      // 报错
      const obj = {
        foo: super.foo
      }

      // 报错
      const obj = {
        foo: () => super.foo
      }

      // 报错
      const obj = {
        foo: function () {
          return super.foo
        }
      }
      +
      • +

    • super关键字等同于Object.getPrototypeOf(this).foo（属性）或Object.getPrototypeOf(this).foo.call(this)（方法）

      +
      • +

    • ES2020引入链式判断运算符（和Swift类似），如果条件都不满足，返回undefined

      +
      1
      2
      const firstName = message?.body?.user?.firstName || 'default';
      const fooValue = myForm.querySelector('input[name=foo]')?.value
      +
      • +

    • 链式判断运算符可以用于调用一个可能不存在的对象，利用它如果不为真就不会求值的特性

      +
      • +

    • ES2020引入了一个新的Null判断运算符??，对比||，只有左侧的值为null和undefined才能返回右侧的值，而不像||对false和0也生效

      +
      • +
    +

    对象的各种方法

      +
    • 初始化方法
        +
      • Object.assign()合并两个对象，返回目标对象，同名对象后来者后覆盖，可以用于深拷贝
        • +
      • Object.create()创建一个新对象，可以用于继承
        • +
      +
      • +
    • 配置属性
        +
      • Object.defineProperty()给对象添加一个属性，并指定该属性的配置
        • +
      • Object.defineProperties()给对象添加多个属性，并分别指定它们的配置
        • +
      +
      • +
    • 获取属性
        +
      • Object.getOwnPropertyDescriptor(obj, prop)可以获取到方法中某个属性的描述对象
        • +
      • Object.getOwnPropertyNames(obj)可以获取到对象自身所有属性（不含Symbol，但是包含不可枚举属性）的键名
        • +
      • Object.getOwnPropertySymbols(obj)可以获取到自身所有Symbol属性的键名
        • +
      • for...in循环遍历对象自身的可枚举属性（不含Symbol属性）
        • +
      • Object.entries()返回对象自身可枚举属性的键值对数组（二维数组），和for...in返回内容相同
        • +
      • Object.keys()获取对象自身所有属性（不含Symbol和不可枚举属性）
        • +
      • Reflect.ownKeys(obj)获取所有键名（包含Symbol和不可枚举属性）
        • +
      • Object.prototype.toString()返回对象的字符串表示
        • +
      +
      • +
    • 配置状态
        +
      • Object.preventExtensions()阻止对象的任何扩展
        • +
      • Object.freeze()阻止对象被修改
        • +
      • Object.seal()阻止其他代码删除对象的属性（使用delete关键字）
        • +
      • Object.setPrototypeOf()设置对象的原型
        • +
      +
      • +
    • 获取状态
        +
      • Object.prototype.hasOwnProperty()某个对象是否有非继承的指定属性
        • +
      • Object.prototype.isPrototypeOf()指定对象是否在本对象的原型链中
        • +
      • Object.is()判断两个值是否相同（内存/字面量相同）
        • +
      +
      • +
    +

    Set和Map数据结构

      +

    • Set结构有以下属性和方法

      +
        +
      • Set.prototype.size返回Set实例的成员总数
        • +
      • Set.prototype.add(value)添加某个值，返回Set本身
        • +
      • Set.prototype.delete(value)删除一个值，返回bool（删除是否成功）
        • +
      • Set.prototype.has(value)返回一个布尔值，表示该值是否为Set的成员
        • +
      • Set.prototype.clear()清除所有成员，没有返回值
        • +
      • 四个遍历方法：
          +
        • Set.prototype.keys()返回键名遍历器
          • +
        • Set.prototype.values()返回键值的遍历器
          • +
        • Set.prototype.entries()返回键值对的遍历器
          • +
        • Set.prototype.forEach()使用回调函数遍历成员
          • +
        +
        • +
      +
      • +

    • Map相对于Object，键可以为任何类型，提供了值-值的对应，属性/方法和Set基本一致

      +
      • +
    +

    Promise

      +
    • 本质上是一个容器，存储着未来才会结束的事件
        +
      • 对象状态不受外界影响，只有自身能定义自身的状态，外部无法改变
        • +
      • 一旦状态改变，就不会再改变
        • +
      +
      • +
    • Promise新建之后会立即执行，因此一般会使用一个函数将其包裹起来，不会直接new Promise赋值给一个变量
      • +
    • Promise一般会在resolve()或者reject()之后继续执行下面的代码，将其放在本轮事件循环的结尾，留到最后执行，因此为了避免出现问题，一般会使用return resolve()的方式
      • +
    • Promise的then会接收来自前者的返回值，因此可以附加多个then实现链式操作
      • +
    • catch其实是then(undefined, function)的别名，用于专门捕获错误
      • +
    • finally可以用于处理善后，无论触发then还是catch都会被调用
      • +
    • Promise.all()用于将多个Promise实例包装成一个新的Promise实例，必须所有实例变为fulfilled或者是其中任意一个变为rejected才会调用Promise.all方法后面的回调函数
      • +
    • Promise.race()和all()类似，但是只要有一个实例率先改变状态，就会调用后面的回调函数，可以用于超时的实现（其中一个实例会在超时后reject）
      • +
    • Promise.allSettled()需要等所有参数实例返回结果（无论是rejected还是resolved，才会调用后面的回调函数（ES2020引入）
      • +
    • Promise.resolve() 、Promise.reject()可以将现有对象转换为Promise对象
      • +
    +

    Iterator&for…of

      +

    • Iterator本质就是不断调用对象的next()方法

      +
      • +

    • 一个数据结构只要有Symbol.iterator属性（本质上是一个遍历器生成函数），就可以被认为是可遍历的，在TypeScript中可以看得更直观

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      interface Iterable {
        [Symbol.iterator]() : Iterator,
      }

      interface Iterator {
        next(value?: any) : IterationResult,
      }

      interface IterationResult {
        value: any,
        done: boolean,
      }
      +
      • +

    • 原生具有Iterator接口的数据结构有

      +
        +
      • Array
        • +
      • Map
        • +
      • Set
        • +
      • String
        • +
      • TypedArray
        • +
      • 函数的arguments对象
        • +
      • NodeList对象
        • +
      +
      • +

    • 遍历器对象还可以有return()方法，来保证迭代提前退出（break或者出错）的时候资源被释放

      +
      • +
    +

    Generator

      +
    • 在函数名前带星号注明生成器，遇到yield就返回其后的值，直到遇到return
      • +
    • 可以为一个生成器赋值Symbol.iterator属性使其具有Iterator接口
      • +
    • next()方法如果带一个参数，这个参数就会被当做上一个yield的返回值
      • +
    • yield*可以在一个函数内执行另一个生成器，混合两者结果输出
      • +
    • Generator可以实现异步/协程
      • +
    +

    async函数

      +
    • async函数相比较Generator，自带执行器，会自动调用next方法
      • +
    • 函数前加async声明该函数是async函数，函数中使用await跳出函数，返回Promise对象
      • +
    • async的错误处理机制
        +
      • 包含多个await的函数中，只要有一个出现错误，整个Promise对象就会被reject，因此最好把await命令放在try...catch中
        • +
      +
      • +
    +

    Class

      +
    • Class的出现是为了简化原型链，将原型链包装成语法糖
      • +
    • Class中所有方法都是不可枚举的（ES5的原型因为是Object，可以被枚举）
      • +
    • Class构造器和原型一样，是constructor()，但Class不能被直接调用，必须使用new
      • +
    • 静态方法需要在前面显式加入static，此时this指向类而不是实例。静态属性同理
      • +
    • 继承方法使用extends，访问父类使用super
      • +
    • 实例属性可以放在class顶层，和其他语言类似
      • +
    • 私有方法/属性在名称前加井号
      • +
    • Class的继承必须显式调用父类构造器，而且要在调用父类构造器之后才能修改自身属性
      • +
    +

    Module

      +

    • CommonJS使用require()语法，运行时加载所需的方法，再使用大括号进行解构

      +
      • +

    • ES6模块使用import语法，直接导入此前已经export过的对象/方法

      +
      • +

    • ES6模块默认启动严格模式

      +
      • +

    • 模块使用export输出，必须输出接口（因为import时会对接口进行解构）

      +
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      // 可以输出变量
      var firstName = 'Michael';
      var lastName = 'Jackson';
      var year = 1958;

      export { firstName, lastName, year };

      // 可以输出函数
      export function multiply(x, y) {
        return x * y;
      };

      // 可以对输出的内容重命名
      export {
        v1 as streamV1,
        v2 as streamV2,
        v2 as streamLatestVersion
      };
      +
      • +

    • 模块不能在块级作用域中被导出，否则会违背ES6模块设计（静态优化）

      +
      • +

    • 模块输入需要使用对象解构语法或者星号（星号不能导出默认方法），可以用as为模块重命名

      +
      • +

    • export default可以避免使用库的时候不知道导出的对象叫什么名字，这样import时可以指定任意名字

      +
      • +

    • 可以从其他模块export它们的接口：export { foo as myFoo } from 'my_module';，对于功能复杂的模块，可以专门设置一个文件负责导出所有子模块

      +
      • +

    • import不能按需加载，但是import()可以，其本质是一个Promise对象

      +
      • +

    • Module的加载

      +
        +
      • <script>可以带一个async或者defer属性，前者在JS加载完之后立刻执行（不管是否渲染完毕）阻塞页面渲染，后者等待页面渲染完毕再执行
        • +
      • 浏览器加载ES6模块需要在<script>里带一个type="module"属性，此时加载默认为defer模式，不会阻塞浏览器
        • +
      +
      • +
    +

    ArrayBuffer

      +
    • ArrayBuffer最初设计目的是为了提升性能，允许开发者以数组下标的方式直接访问内存
      • +
    • ArrayBuffer包含三部分：
        +
      • ArrayBuffer对象，提供了一批通用接口用于操作内存
        • +
      • TypedArray视图，包含常用数据结构
        • +
      • DataView视图，用于自定义各种复合类型，类似于结构体
        • +
      +
      • +
    • ArrayBuffer对象构造函数接受整数，代表字节数：const buf = new ArrayBuffer(32);构造32字节内存区域，每个字节的值都为0
      • +
    • 使用ArrayBuffer需要先分配内存，再将内存赋予指定视图，然后才能操作视图
      • +
    +
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/d6c2d8fc1a5a/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    ES6
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    \ No newline at end of file diff --git a/post/dd786a289f64/index.html b/post/dd786a289f64/index.html index 0d346e50..c683947f 100644 --- a/post/dd786a289f64/index.html +++ b/post/dd786a289f64/index.html @@ -7,7 +7,7 @@ - + @@ -57,7 +57,7 @@ isHome: false, isHighlightShrink: false, isToc: true, - postUpdate: '2023-11-01 08:31:47' + postUpdate: '2023-11-03 06:20:13' }

    20道大厂面试题

    发表于|更新于|前端
    |字数总计:9.6k|阅读时长:36分钟|阅读量:|评论数:

    1. new的实现原理是什么？

    new 的实现原理:

    + })(window)

    20道大厂面试题

    发表于|更新于|前端
    |字数总计:9.6k|阅读时长:36分钟|阅读量:|评论数:
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/dd786a289f64/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    JavaScript面试
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    从零开始配置webpack

    发表于|更新于|前端
    |字数总计:2.4k|阅读时长:11分钟|阅读量:|评论数:

    从零开始配置webpack(基于webpack 4 和 babel 7版本)

    webpack 核心概念:

    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    js window 页面事件

    发表于|更新于|前端
    |字数总计:167|阅读时长:1分钟|阅读量:|评论数:

    js window 页面事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    window.addEventListener("load", function (e) {
      console.log("load");
    });
    window.addEventListener("resize", function () {
      console.log("resize", document.body.offsetWidth);
      // console.log("clientWidth", document.body.clientWidth);
    });
    window.addEventListener("scroll", function (e) {
      console.log("scroll");
    });
    window.addEventListener("pageshow", function (e) {
      console.log("pageshow");
    });
    window.addEventListener("pagehide", function (e) {
      // 页面隐藏的时候执行事件
      console.log("pagehide");
    });
    window.addEventListener("visibilitychange", function (e) {
      console.log("visibilitychange");
    });
    window.addEventListener("unload", function (e) {
      // 当用户离开页面时触发了事件
      console.log("onunload");
    });

    window.onbeforeunload = function () {
      // 页面跳转之前执行了事件
      console.log("onbeforeunload");
      localStorage.setItem("onbeforeunload", "1");
    };
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/e4bbf6d75a10/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    window
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么

    js window 页面事件

    发表于|更新于|前端
    |字数总计:167|阅读时长:1分钟|阅读量:|评论数:

    js window 页面事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    window.addEventListener("load", function (e) {
      console.log("load");
    });
    window.addEventListener("resize", function () {
      console.log("resize", document.body.offsetWidth);
      // console.log("clientWidth", document.body.clientWidth);
    });
    window.addEventListener("scroll", function (e) {
      console.log("scroll");
    });
    window.addEventListener("pageshow", function (e) {
      console.log("pageshow");
    });
    window.addEventListener("pagehide", function (e) {
      // 页面隐藏的时候执行事件
      console.log("pagehide");
    });
    window.addEventListener("visibilitychange", function (e) {
      console.log("visibilitychange");
    });
    window.addEventListener("unload", function (e) {
      // 当用户离开页面时触发了事件
      console.log("onunload");
    });

    window.onbeforeunload = function () {
      // 页面跳转之前执行了事件
      console.log("onbeforeunload");
      localStorage.setItem("onbeforeunload", "1");
    };
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/e4bbf6d75a10/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    window
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    我的GitHub首页

    发表于|更新于
    |字数总计:310|阅读时长:1分钟|阅读量:|评论数:

    github

    +

    JavaScript Learning...

    + +

    阮一峰老师的 ES6 入门教程

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    ES6 入门教程==>学习总结
    ES6 简介参考链接最新提案
    let 和 const 简介变量的解构赋值字符串的扩展
    字符串的新增方法正则的扩展数值的扩展
    函数的扩展数组的扩展对象的扩展
    对象的新增方法SymbolSet 和 Map 数据结构
    ProxyReflectPromise 对象
    async 函数Generator 函数的语法Generator 函数的异步应用
    Iterator 和 for…of 循环Class 的基本语法Class 的继承
    Module 的语法Module 的加载实现编程风格
    读懂 ECMAScript 规格异步遍历器ArrayBuffer
    装饰器函数式编程Mixin
    + + +

    面试系列

    +

    Vue系列

    React系列

    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/e88a99933fe6/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    \ No newline at end of file diff --git a/post/e983b3ec89b6/index.html b/post/e983b3ec89b6/index.html index 737ad425..b56cdf87 100644 --- a/post/e983b3ec89b6/index.html +++ b/post/e983b3ec89b6/index.html @@ -7,7 +7,7 @@ - + @@ -56,7 +56,7 @@ isHome: false, isHighlightShrink: false, isToc: true, - postUpdate: '2023-11-01 08:31:47' + postUpdate: '2023-11-03 06:20:13' }

    什么是全局数据共享

    发表于|更新于|小程序
    |字数总计:3.1k|阅读时长:11分钟|阅读量:|评论数:

    wx 小程序中的全局数据共享方案 MonX

    什么是全局数据共享
    全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。
    开发中常用的全局数据共享方案有： Vuex 、 Redux 、 MobX 等。 2. 小程序中的全局数据共享方案
    在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其
    中：
    mobx-miniprogram 用来创建 Store 实例对象
    mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

    + })(window)

    什么是全局数据共享

    发表于|更新于|小程序
    |字数总计:3.1k|阅读时长:11分钟|阅读量:|评论数:

    wx 小程序中的全局数据共享方案 MonX

    什么是全局数据共享
    全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。
    开发中常用的全局数据共享方案有： Vuex 、 Redux 、 MobX 等。 2. 小程序中的全局数据共享方案
    在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。其
    中：
    mobx-miniprogram 用来创建 Store 实例对象
    mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

    在项目中运行如下的命令，安装 MobX 相关的包：

    1
    npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
    @@ -232,7 +232,7 @@ 

    1
    2
    3
    Page({
      mixins: [require("../../myMixin.js")],
    });
    -

    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/e983b3ec89b6/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    小程序
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    手摸手教你撸一个脚手架

    发表于|更新于|前端
    |字数总计:2.1k|阅读时长:10分钟|阅读量:|评论数:

    脚手架

    vue-cli, create-react-app、react-native-cli 等都是非常优秀的脚手架，通过脚手架，我们可以快速初始化一个项目，无需自己从零开始一步步配置，有效提升开发体验。尽管这些脚手架非常优秀，但是未必是符合我们的实际应用的，我们可以定制一个属于自己的脚手架(或公司通用脚手架)，来提升自己的开发效率。

    + })(window)

    手摸手教你撸一个脚手架

    发表于|更新于|前端
    |字数总计:2.1k|阅读时长:10分钟|阅读量:|评论数:

    脚手架

    vue-cli, create-react-app、react-native-cli 等都是非常优秀的脚手架，通过脚手架，我们可以快速初始化一个项目，无需自己从零开始一步步配置，有效提升开发体验。尽管这些脚手架非常优秀，但是未必是符合我们的实际应用的，我们可以定制一个属于自己的脚手架(或公司通用脚手架)，来提升自己的开发效率。

    脚手架的作用

    @@ -244,7 +244,7 @@

    发布

    npm publish 将本脚手架发布至npm上。其它用户可以通过 npm install eos-cli -g 全局安装。
    即可使用 eos 命令。

    项目地址

    本项目完整代码请戳: https://github.com/ytking/eos-cli

    -
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/ed0f5522714b/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    JavaScriptcli
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    相关推荐
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    Markdown使用教程

    发表于|更新于|技术
    |字数总计:3.4k|阅读时长:12分钟|阅读量:|评论数:

    Markdown使用教程

    一、Markdown

    简介

    logo

    + })(window)

    Markdown使用教程

    发表于|更新于|技术
    |字数总计:3.4k|阅读时长:12分钟|阅读量:|评论数:

    Markdown使用教程

    一、Markdown

    简介

    logo

    Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。

    @@ -636,7 +636,7 @@

    甘特图

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ​```mermaid
    gantt
    title 甘特图
    dateFormat  YYYY-MM-DD
    section 项目A
    任务1           :a1, 2018-06-06, 30d
    任务2     :after a1  , 20d
    section 项目B
    任务3      :2018-06-12  , 12d
    任务4      : 24d
    ​```

    ​ 回到顶部

    -
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/f60c57e73b04/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    使用Intersection Observer API 检测元素是否出现在可视窗口

    发表于|更新于|前端
    |字数总计:1.8k|阅读时长:7分钟|阅读量:|评论数:

    使用Intersection Observer API 检测元素是否出现在可视窗口

    API解读：

    Intersection Observer API提供了一种异步检测目标元素与祖先元素或视口(可统称为根元素)相交情况变化的方法。

    + })(window)

    使用Intersection Observer API 检测元素是否出现在可视窗口

    发表于|更新于|前端
    |字数总计:1.8k|阅读时长:7分钟|阅读量:|评论数:

    使用Intersection Observer API 检测元素是否出现在可视窗口

    API解读：

    Intersection Observer API提供了一种异步检测目标元素与祖先元素或视口(可统称为根元素)相交情况变化的方法。

    注意点：因为该 API 是异步的，它不会随着目标元素的滚动同步触发，而IntersectionObserver API是通过requestIdleCallback()实现，即只有浏览器空闲下来，才会执行观察器。

    Intersection observer 的重要概念

    Intersection observer API 有以下五个重要的概念：

    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/fc343de6adc7/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    前端常用的轮子

    发表于|更新于|前端
    |字数总计:164|阅读时长:1分钟|阅读量:|评论数:

    React UI 组件库

    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    JS 前端常用工具方法

    发表于|更新于|前端
    |字数总计:3.5k|阅读时长:19分钟|阅读量:|评论数:

    JS 前端常用工具方法

    ::: tip 提示
    很实用的工具方法哦，建议收藏！:stuck_out_tongue_winking_eye:
    :::

    + })(window)

    JS 前端常用工具方法

    发表于|更新于|前端
    |字数总计:3.5k|阅读时长:19分钟|阅读量:|评论数:

    JS 前端常用工具方法

    ::: tip 提示
    很实用的工具方法哦，建议收藏！:stuck_out_tongue_winking_eye:
    :::

    邮箱验证

    1
    2
    3
    4
    5
    export const isEmail = (s) => {
      return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(
        s
      );
    };
    @@ -275,7 +275,7 @@

    检验车牌号

    1
    2
    3
    4
    5
    6
    7
    8
    9
    isCarNum(val) {
                  var patrn = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})$/;
                  var patrn2 = /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))$/;
                  if (!patrn.test(val) && !patrn2.test(val)) {
                    return false;
                  } else {
                    return true;
                  }
                },
    -
    文章作者: Yang Tao
    文章链接: https://whyta.cn/post/ff1721fc7097/
    版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 YT 前端日记！
    utils
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    评论
    GitalkValine
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令

    CSS

    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    CSS

    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    ES6

    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    ES6

    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    Express

    标签 - Express
    2023
    NodeJS框架Express与Koa对比
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    Express

    标签 - Express
    2023
    NodeJS框架Express与Koa对比
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    Java

    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    Java

    标签 - Java
    2023
    Spring-SpringMVC-Mybatis整合
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    JavaScript

    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    JavaScript

    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    JavaScript

    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    JavaScript

    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    Koa

    标签 - Koa
    2023
    NodeJS框架Express与Koa对比
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    Koa

    标签 - Koa
    2023
    NodeJS框架Express与Koa对比
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    Linux

    标签 - Linux
    2023
    一份前端够用的 Linux 命令
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    Linux

    标签 - Linux
    2023
    一份前端够用的 Linux 命令
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    NodeJS

    标签 - NodeJS
    2023
    NodeJS框架Express与Koa对比
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    NodeJS

    标签 - NodeJS
    2023
    NodeJS框架Express与Koa对比
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    Tomcat

    标签 - Tomcat
    2023
    谈谈Tomcat请求处理流程
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    - - 分类 - -
    -
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :
    \ No newline at end of file diff --git a/tags/cli/index.html b/tags/cli/index.html index b224693b..4e4f7a36 100644 --- a/tags/cli/index.html +++ b/tags/cli/index.html @@ -54,7 +54,7 @@ isHome: false, isHighlightShrink: false, isToc: false, - postUpdate: '2023-11-01 08:31:59' + postUpdate: '2023-11-03 06:20:29' }

    cli

    标签 - cli
    2023
    手摸手教你撸一个脚手架
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    cli

    标签 - cli
    2023
    手摸手教你撸一个脚手架
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    标签

    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    标签

    JavaScript面试小程序CSSES6utilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcli
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    test

    标签 - test
    2023
    Hello World
    test
    test
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    test

    标签 - test
    2022
    Hello World
    test
    test
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    utils

    标签 - utils
    2023
    JS 前端常用工具方法
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    utils

    标签 - utils
    2023
    JS 前端常用工具方法
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    vue

    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    vue

    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    webpack

    标签 - webpack
    2023
    从零开始配置webpack
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    webpack

    标签 - webpack
    2023
    从零开始配置webpack
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    window

    标签 - window
    2023
    js window 页面事件
    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    window

    标签 - window
    2023
    js window 页面事件
    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    小程序

    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    小程序

    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :

    面试

    avatar
    Yang Tao
    share & study
    文章
    44
    标签
    17
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    Hello World
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    Set、Map、WeakSet、WeakMap是什么
    + })(window)

    面试

    avatar
    Yang Tao
    share & study
    文章
    49
    标签
    16
    分类
    7
    Follow Me
    公告
    =>一个优秀的CV大师的个人网站，主要内容是Web前端技术。如果喜欢，欢迎Star!
    最新文章
    我的GitHub首页
    常用meta整理
    使用Gitalk实现静态博客无后台评论系统
    Markdown使用教程
    npm常用命令
    分类
    标签
    JavaScript面试小程序ES6CSSutilsNodeJSExpressKoaJavavuetestLinuxwindowwebpackcliTomcat
    归档
    网站资讯
    文章数目 :
    44
    本站总字数 :
    104.8k
    本站访客数 :
    本站总访问量 :
    最后更新时间 :