空白诗007

这个屌丝很懒，什么也没留下！

热门标签

最新最全的微信小程序入门学习教程，微信小程序零基础入门到精通_微信小程序学习

作者：空白诗007 | 2024-07-13 05:35:40

踩

微信小程序学习

笔记我也有整理一套电子书，大家也可以私聊石头哥获取电子书版的配套笔记。电子书笔记方便后期查询知识点。

4，问题解答(●’◡’●)

另外石头哥提供配套解答服务。当然了，知识付费时代石头哥解答是要米的，毕竟石头哥精力有限，石头哥也是要吃面包的。石头哥有推出包月，包年解答服务。你在学习过程中有任何问题，或者工作中遇到任何编程问题，都可以来找石头哥

石头哥目前可以解答如下问题

小程序方面的问题
云开发方面的问题
Java，springboot，Javaweb方面的问题
毕设方面的问题
安卓app开发方面的问题
html+css+JavaScript方面的问题
前端开发的问题
后端开发的问题
面试找工作方面的问题

从今天开始就来带领大家学习微信小程序了，只要你跟着我一步步来，相信你也可以上线一款属于自己的微信小程序。

一，认识小程序

=====================================================================

微信⼩程序，简称⼩程序，英⽂名 Mini Program Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤

1-1，微信小程序的优势

1.微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；
2.推⼴app或公众号的成本太⾼。
3.开发适配成本低。
4.容易⼩规模试错，然后快速迭代。
5.跨平台。

通过小程序和app的使用步骤，更容易看出来

可以看出小程序和app使用相比：免安装，免注册，免卸载。正如张小龙所说“随用随走”

1-2，小程序发展前景

通过腾讯2020年财报可以看出，2019年上线小程序已经超过100万个，小程序日活也已经突破4亿

2019年小程序带动就业536万个，所以我们不管是学习小程序开发，还是学习小程序运营，都有很广的就业前景。

1-3，小程序发展历史

2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信小程序」。
2016年9月21日，微信小程序正式开启内测。在微信生态下，触手可及、用完即走的微信小程序引起广泛关注。腾讯云正式上线微信小程序解决方案，提供微信小程序在云端服务器的技术方案。
2017年1月9日0点，万众瞩目的微信第一批微信小程序正式低调上线，用户可以体验到各种各样微信小程序提供的服务。
2017年12月28日，微信更新的 6.6.1 版本开放了小游戏，微信启动页面还重点推荐了小游戏「跳一跳」，你可以通过「微信小程序」找到已经玩过的小游戏。
2018年1月18日，微信提供了电子化的侵权投诉渠道，用户或者企业可以在微信公众平台以及微信客户端入口进行投诉。
2018年1月25日，微信团队在“微信公众平台”发布公告称，“从移动应用分享至微信的小程序页面，用户访问时支持打开来源应用。同时，为提升用户使用体验，开发者可以设置小程序菜单的颜色风格，并根据业务需求，对小程序菜单外的标题栏区域进行自定义。
2018年3月，微信正式宣布微信小程序广告组件启动内测，内容还包括第三方可以快速创建并认证小程序、新增小程序插件管理接口和更新基础能力，开发者可以通过微信小程序来赚取广告收入。除了公众号文中、朋友圈广告以及公众号底部的广告位都支持微信小程序落地页投放广告，微信小程序广告位也可以直达小程序。
2018年7月13日，微信小程序任务栏功能升级，新增“我的微信小程序”板块；而微信小程序原有的“星标”功能升级，可以将喜欢的小程序直接添加到“我的微信小程序”。
2018年8月10日，微信宣布，微信小程序后台数据分析及插件功能升级，开发者可查看已添加「我的微信小程序」的用户数。此外，2018年8月1日至12月31日期间，微信小程序（含小游戏）流量主的广告收入分成比例优化上调，单日广告流水10-100万区间的部分，开发者可获得的分成由原来流水的30%上调到50%，优质微信小程序流量主可获得更高收益。
2018年9月28日，微信“功能直达”正式开放，商家与用户的距离可以更“近”一步：用户微信搜一搜功能词，搜索页面将呈现相关服务的微信小程序，点击搜索结果，可直达微信小程序相关服务页面。
2019年8月9日，微信向开发者发布新能力公测与更新公告，微信 PC 版新版本中，支持打开聊天中分享的微信小程序。安装最新PC端测试版微信后，点击聊天中的微信小程序，便会弹出微信小程序浮窗。而在微信小程序右上角的操作选项中，可以进行“最小化”操作，让微信小程序像其他PC软件一样最小化，排列于Windows系统的任务栏中。

1-4，为什么学习小程序

我们上面了解完小程序的优势和历史以后，就知道我们为什么要学习小程序了

依赖微信生态
就业面广
上手快
学习完微信小程序以后，再去学习百度小程序，抖音小程序，支付宝小程序就很方便了。因为这些小程序api都很相似。
相对于Java，php，python而言，小程序更适合作为编程的入门语言
相对于传统前端开发，我们在学习小程序的同时就可以学习css，JavaScript的知识

1-5，微信小程序对创业者的优势

App开发的推广成本过高
移动互联网格局已定，用户需求被各路巨头把持，我们要想在移动互联网有一番作为，微信是不可避免的靠山
小程序能以最小的成本，最快的速度验证你的商业模式。

二，开发者工具

=====================================================================

工欲善其事必先利其器，所以我们在开发小程序之前必须准备好一款适合自己的开发者工具，这里我给大家推荐官方开发者工具。原因有以下几点

官方的所有更新，都会第一时间在官方开发者工具同步
有任何问题，可以直接反馈给官方
官方开发者工具更新迭代最及时
我们用官方开发者工具，使用一些官方功能最稳定。

下面就来教大家如何下载官方开发工具

2-1 官方开发者工具下载地址

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

建议大家下载最新的稳定版本

然后点击自己电脑对应系统的版本下载即可。至于安装很方便，只需要双击安装包，不停的点下一步即可，安装完成以后的官方开发者工具长这样。

2-2，认识微信开发者工具

我们安装好开发者工具以后，只需要双击打开即可。

通常我们第一次打开，会出现上图所示的，只需要用微信扫描即可登录开发者工具。扫码登录以后会出现下面这样的界面。

三，创建属于自己的第一个小程序

=============================================================================

上面第二步已经安装好开发者工具了，接下来就来教大家如何创建一个最简单的小程序

3-1，在桌面上创建一个空白文件

名字可以随便取，我这里习惯取小石头

3-2，点击 + 号，创建小程序。

3-3，小程序项目配置

这里需要注意下，小程序官方最新的开发者工具有了变化，所以你创建项目时如果不长下面这样。可以跳过这个图片，看下面新版的

新版的如下，多了一个模板选择，这里注意：要选择不使用模板。

配置好以后，点新建，即可创建属于自己的第一个小程序，然后创建会有一个过程，耐心等待即可。

3-4，熟悉开发者工具

3-5，开发者工具个性化的配置

主要给大家讲一些个性化的配置

我们可以配置主题颜色，模拟器位置，这些完全可以根据个人喜好进行设置。

3-6，小程序结构目录

下图是程序目录，每一个我都给大家标注出来了，大家前期不用死记硬背，后面开发学习过程中，用的多了，自然就记住目录下每个文件的作用了。

四，小程序开发三剑客

========================================================================

4-1小程序三剑客: wxml+wxss+js

1， wxml主要用来布局组件的（相当于大楼结构）

如：楼有几层，每层有多少房间，有什么设备

2， wxss主要决定显示样式（决定大楼的样式）

如：颜色，大小，宽高等

3， js主要用来处理逻辑（决定大楼具备哪些功能）

如：大楼具有电梯功能，空调制冷，灯光，供水，供电，主要是为了大厦的运行。

下面画个图，来说明三者的关系。

4-2，小程序文件和传统web对比

| 结构 | 小程序 | 传统web |

| — | — | — |

| 结构布局 | Wxml | Html |

| 样式 | Wxss | Css |

| 逻辑 | JavaScript | JavaScript |

| 配置 | Json | 无 |

五，小程序常见组件的学习

==========================================================================

5-1，认识view组件

view组件：相当于一个盒子，可以用来装一些别的组件

https://developers.weixin.qq.com/miniprogram/dev/component/view.html

如果大家有html的web基础，就可以把我们小程序里的view理解为html里的div标签。如果你没学过也无所谓，直接跟着我学习view即可。

5-2，认识text组件

text组件：主要用来显示文字的

https://developers.weixin.qq.com/miniprogram/dev/component/text.html

5-3，认识input组件

input组件主要用来获取用户输入的信息的，一般在用户填写信息，提交数据，登录注册时会用到。

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

5-4，认识button组件

button 组件：是按钮组件，自带默认的按钮效果，我们后面会经常用到

https://developers.weixin.qq.com/miniprogram/dev/component/button.html

六，函数和事件的学习

========================================================================

6-1，注释的学习

我们在学习后面课程之前，先来学习下注释。注释是在代码里给予提示使用的，主要是让别人更快的熟悉你的代码，也方便后期自己看自己的代码，快速回忆起来使用的。

— 注释有快捷键的 —

window电脑：Ctrl+/
mac电脑：command+/

wxml里的注释如下

wxss里的注释

js里的注释

6-2，日志打印的学习

我们在学习点击事件之前，需要先学习日志(log)的打印，因为我们开发过程中会经常用到日志打印。日志打印的语法如下


console.log("我的打印出来的日志内容")



1
2
3
4
5

6-3，函数的学习

函数的两种使用方式如下图：

6-4，点击事件的学习

我们如果想给一个组件定义点击事件，就要用到bindtap，我们给一个组件绑定点击事件的语法如下。

我们给一个组件定义点击事件，主要是给组件定义一个 bindtap=“事件名”，然后再js页面里定义和事件名一样的函数即可。视频里会作详细讲解

6-5，获取用户输入信息

我们获取用户输入会用到bindinput事件，其实我们在学习input组件时，官方有给出这个属性的。https://developers.weixin.qq.com/miniprogram/dev/component/input.html

看官方的文档，可以知道bindinput主要是为了获取用户的输入内容。

bindinput的定义如下图。

在wxml里定义好bindinput事件以后，在js页面再定义一个和事件名一样的函数即可。视频里会作详细讲解。如果你有买老师的课程，或者购买老师的年卡，可以获取对应的学习视频。

七，变量的学习

=====================================================================

7-1，什么是变量

用大白话讲：变量就是一个装东西的盒子

再通俗些讲：变量就是用于存放数据的容器，我们通过变量名获取对应的数据。

如上图所示，我们的盒子(变量)可以装名字，布尔类型的true，还可以用来装数字。

变量的本质：就是在程序的内存中申请一块用来存放数据的空间。

7-2，变量的组成

变量由变量名和存储的值组成，语法如下


var x = 7;

var y = 8;

var z = x + y; 



从上例中，您可知道x,y,z是三个不同的变量名：

x 存储值 7

y 存储值 8

z 存储值 15



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

变量有点类似我们的酒店房间。一个房间就可以看作是一个变量。例如我们的808号房间是情侣间。那么808这个房号就相当于我们的变量名，情侣间就是这个变量存储的值。

7-3，变量的使用

变量在使用时分两个步骤：

1，声明变量

来看下具体代码


//声明变量

var age 



1
2
3
4
5
6
7

这段代码的意思是声明一个叫age的变量

var是一个JavaScript关键字，用来声明变量，使用该关键字声明变量以后，计算机会自动为变量分配一个内存空间，用来存储数据。

age就是我们的变量名，我们要通过变量名来访问到计算机内存里分配的空间。

2，赋值

还是拿我们的酒店房间来举例，声明变量就相当于在前台办理入住，确定要住那个房间，也就是确定房间号(变量名)，然后确定房间号对应的房型，比如单人间，双人间，情侣间。而确定房型就相当于是给变量赋值。


//给age赋值

age=10



1
2
3
4
5
6
7

这段代码的意思，就是给age变量赋值为10

上面的 = 用来把右边的值赋给左边的变量名，也就是把我们的变量名age指向数值10，就可以用age来操作我们的数值了。赋值的目的就是为了后面使用数值。

7-4，变量的初始化

我们上面变量的使用可以直接写到一行


var age=10 



1
2
3
4
5

声明变量同时给变量赋值，我们称之为变量的初始化。

7-5，变量的重新赋值

一个变量可以被重新赋值，新的赋值会覆盖掉前面的赋值，变量值将以最后一次赋的值为准。


var age=10

age=18



1
2
3
4
5
6
7

如上面的代码，我们的变量age先被赋值10，后又被赋值18，那么最后我们的age就是18

这就好比，酒店的房间，808屋一开始住的是石头哥，后面石头哥走了，刘德华住进去了，那这个时候你再去808找人，找到的就是刘德华了。

7-6.变量的命名规范

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称对大小写敏感（y 和 Y 是不同的变量）
不能是关键字，保留字（比如 JavaScript 的关键词）
遵守驼峰命名法，首字母小写，后面的单词的首字母大写。如userName

7-7,变量的小案例

还记得我们的6-5这节学习了如何获取用户输入的信息吗？我们是不是可以用变量来存储我们获取到的用户输入信息呢。

讲解视频里会做详细讲解：《零基础入门小程序开发》

7-8，全局变量和局部变量

局部变量：变量在函数内声明，只能在函数内部访问。

全局变量：变量在函数外定义，整个代码都可以调用的变量。

如上图所示的局部变量和全局变量的定义。

八，数据类型

====================================================================

8-1，认识数据类型

上一节变量的学习，我们知道变量是用来装数据的盒子，可是数据有很多，有各种各样的类型。不同类型的数据占用的计算器内存也不一样。就好比胖子睡大床，瘦子睡小床就行。

在计算机中不同的数据占用的存储空间是不同的，为了便于区分，充分利用存储空间，于是就定义了不同的数据类型。

简单来说，数据类型就是数据的类别型号，比如“张三”是个人名，18是个数字

8-2，常见的数据类型

我们的数据类型可以分成下面两大类

简单数据类型(Number String Boolean Undefined Null)
复杂数据类型(Object)

简单数据类型

| 简单数据类型 | 描述 | 默认值 |

| — | — | — |

| Number | 数字型，包含整数和小数，如 18，18.8 | 0 |

| String | 字符串型，如“小石头”。注意js里字符串都要带引号 | “” |

| Boolean | 布尔值类型，就true和false两个值，代表正确和错误 | false |

| Undefined | Undefined 这个值表示变量不含有值,如var a;声明了变量a，但是没有赋值，就是undefined | undefined |

| Null | 空值，如var a=null,声明了变量a为空值 | null |

8-3，数字型Number

js数字类型的数据，既可以是整数，也可以是小数(浮点数)


var age=21	//整数

var PI=3.1415	//小数



1
2
3
4
5
6
7

8-4，字符串String

用引号或者双引号包起来的都是字符串类型，如 “编程小石头”，‘石头哥’都是字符串。字符串和羊肉串有点像，羊肉串是用竹签把羊肉一串串的串起来。字符串就是把字符串起来。


var name="编程小石头"	//字符串

var age1="18"		//字符串

var age2=18		//数字型



1
2
3
4
5
6
7
8
9

上面代码的age1和age2是有区别的，age1的18被双引号包裹着，所以是字符串，age2就是一个数字18，所以是数字型。这也进一步说明了，只要是被单引号或者双引号包裹着的都是字符串类型。

字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度，通过字符串的length属性可以获取整个字符串的长度。

还是拿羊肉串来类比，比如你一个羊肉串上串了5块羊肉，那么这个羊肉串的长度就是5。

使用的语法如下


    var name="编程小石头"

    console.log(name.length)	//这里的输出结果是5



1
2
3
4
5
6
7

字符串的拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串+字符串=拼接之后的新字符串。

语法如下：


    var name="编程小石头"

    var weixin=2501902696

    var test=name+weixin

    console.log(test) //输出结果："编程小石头2501902696"

    console.log(12+12)//输出结果：24

    console.log("12"+12)//输出结果：1212



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上面的12+12=24，“12”+12=“1212” 这就告诉我们字符串加任何类型的数据，拼接后的结果都是字符串。

8-5，布尔型Boolean

布尔类型有两个值：true和false，其中true表示真，false表示假。


var flag=true



1
2
3
4
5

8-6,Undefined和Null

一个声明后没有赋值的变量会有一个默认值 undefined

一个声明变量，并且赋值null，就代表这个变量是空值(学习object对象时，我们会继续研究null)

null 和 undefined 的值相等，但类型不同，下面的8-7会有代码演示

8-7，typeof 操作符

typeof 操作符用来检测变量的数据类型


typeof "John"                // 返回 string 

typeof 3.14                  // 返回 number

typeof false                 // 返回 boolean



1
2
3
4
5
6
7
8
9

打印null和undefined的数据类型如下


    var aaa=undefined

    var bbb=null

    console.log(aaa==bbb)//输出结果：true

    console.log(typeof aaa)//输出结果：undefined

    console.log(typeof bbb)//输出结果：object



1
2
3
4
5
6
7
8
9
10
11
12
13

注意：这里的 == 用来判断值是否相等，后面会讲。

上面的代码可以看出：null 和 undefined 的值相等，但类型不同

8-8，数据类型的转换

就是把一种数据类型的变量转换成另外一种数据类型，比如把字符串的 “18”转换为数字类型的18

常用的数据类型转换

把其他类型转为字符串型
把其他类型转为数字型

转换为字符串

| 方式 | 说明 | 案例 |

| — | — | — |

| toString() | 转为字符串 | var num=1 num.toString() |

| String() | 转为字符串 | var num=1 String(num) |

| 用加号拼接字符串 | 转为字符串 | var num=1 “”+num |

转换为数字型（重点）

| 方式 | 说明 | 案例 |

| — | — | — |

| Number() | 将字符串转换为数字 | Number(“3.14”) // 返回 3.14 |

| parseFloat() | 解析一个字符串并返回一个浮点数 | parseFloat(“3.12”) //返回3.12 |

| parseInt() | 解析一个字符串并返回一个整数 | parseInt(“3.12”) //返回3 |

转为数字的几个特殊情况


console.log(Number(""))//空字符串转换为 0

console.log(Number(true))//true转换为1

console.log(Number(false))//false转换为0

console.log(Number("编程小石头"))//其他的字符串会转换为 NaN (不是个数字)



1
2
3
4
5
6
7
8
9
10
11

九,综合小案例~开发简单的计算器

==============================================================================

9-1,数据绑定

在学习这个综合案例之前，我们需要先学习下小程序的动态数据绑定。数据绑定的语法如下


<!--wxml-->

<view> {{message}} </view>



// js里如下

Page({

  data: {

    message: '我是动态绑定的数据'

  }

})



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

9-2，效果图预览

上一节和大家讲解了小程序的一些常用组件，这节就带大家写出自己的第一个简单计算器。做一个综合性的练习。由于是入门，这里先教大家简单的加法运算。效果图如下

实现起来特别简单，代码也特别少，就下面三个

index.wxml：上图的布局视图页
index.js：实现加法逻辑的页面
app.json：一些全局的配置。基本是都是默认的这里不用管

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n1U75mfw-1597396869759)(https://upload-images.jianshu.io/upload_images/6273713-2b8639cf9f1fc8ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

下面就带带大家敲出属于自己的计算器小程序代码。

9-3，先看index.wxml


<!--index.wxml  -->

<input placeholder="请输入数字a" bindinput="inputa" />

<text>+</text>

<input placeholder="请输入数字b" bindinput="inputb" />

<button bindtap='sum'>计算</button>

<text>结果为：{{result}}</text>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

代码虽然少，但是作为刚入门的你，看起来可能很茫然，下面详细给大家讲下。


<input placeholder="请输入数字a" bindinput="inputa" /> 

<input placeholder="请输入数字b" bindinput="inputb" />



1
2
3
4
5
6
7

就是我们输入数字a的输入框，这里input就是我们认识的第一个小程序组件。

input的官方简介如下：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

placeholder：设置默认显示文字（当我们输入文字时，默认的就没有了）

bindinput=“inputa”：定义一个inputa方法来获取input的输入内容。在index.js中会用到

这里的组件是用来显示文本的这里我们只是为了显示一个 + 号


<button bindtap='sum'>计算</button>



1
2
3
4
5

这里是个按钮就是我们的计算按钮

bindtap=‘sum’：定义个叫sum的方法，用来计算结果在index.js中会用到

结果为：{{result}}

{{result}} 这种写法，是小程序用来绑定数据用的，这里用来显示我们的计算结果用的，

上面代码和对应的显示如下：

9-4，再来看index.js，我们加法的逻辑实现

可以看到我们在index.wxml里定义的bindinput=“inputa”，bindtap='sum’在下面有用到


Page({

  /**

     * 页面的初始数据

     * 初始化两个输入值

     */

  data: {

    input1: 0,

    input2: 0

  },

  //获取用户输入的值a

  inputa: function (e) {

    this.setData({

      input1: e.detail.value

    })

  },

  //获取用户输入的值b

  inputb: function (e) {

    this.setData({

      input2: e.detail.value

    })

  },

  // 拿到两个输入值以后求和

  sum: function (e) {

    var a = parseInt(this.data.input1);

    var b = parseInt(this.data.input2);

    // 求和

    var sumResult = a + b

    this.setData({

      // 把结果赋值到sum标签上

      result: sumResult

    })

  }

})



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

index.js的代码不多，大家可以先照着敲一下。学小程序前期不需要你理解，但是一定要多敲多练。

这里的逻辑用文字写出来，估计大家新入门时还是不太好理解，我会录视频来给大家讲解。

9-5，作业，自己写一个减法计算器

十，运算符

===================================================================

运算符也被称为操作符，是用于实现赋值，比较和运算等功能的符号。

10-1，算数运算符

| 运算符 | 描述 | 例子 | x 运算结果 |

| — | — | — | — |

| + | 加法 | x=5+2 | 7 |

| - | 减法 | x=5-2 | 3 |

| * | 乘法 | x=5*2 | 10 |

| / | 除法 | x=5/2 | 2.5 |

| % | 取模（余数） | x=5%2 | 1 |

10-2，表达式和返回值

表达式：是由数字，运算符，变量等以能求得结果的有意义的操作组成的式子。

表达式最终都会有一个结果返回给我们，这个返回结果我们称之为返回值

如 let x=1+1

这里的1+1就是由数字和加号组成的表达式，然会返回结果2赋值给x，那么x的值就是2。通俗的讲就是先把右边的表达式计算完毕然后把值返回给左边的x。

10-3，比较运算符

比较运算符是两个数据进行比较时所使用的运算符，比较运算以后会返回一个布尔值的结果，就是返回对或者错(true或false)

| 运算符 | 描述 | 案例 | 结果 |

| — | — | — | — |

| < | 小于号 | 1<2 | true |

| > | 大于号 | 1>2 | false |

| >= | 大于等于号(大于或等于) | 1>=2 | false |

| <= | 小于等于号(小于或等于) | 1<=2 | true |

| == | 判等号(判断是否相等) | 1==1 | true |

| === | 绝对等于（值和类型均相等） | 1===‘1’ | false |

| != | 不等于 | 1!=1 | false |

10-4，赋值运算符

赋值运算符向 JavaScript 变量赋值。

| 运算符 | 例子 | 等同于 |

| — | — | — |

| = | x = y | x = y |

| += | x += y | x = x + y |

| -= | x -= y | x = x - y |

| *= | x *= y | x = x * y |

| /= | x /= y | x = x / y |

| %= | x %= y | x = x % y |

=的小结

=：赋值，把右边赋值给左边如a=b
==:判断，判断两边的值是否相等如 a ==b
=== :全等，判断两边的值和数据类型是否完全相等如 a === b

10-5，逻辑运算符

用于多个条件的判断,其返回值是布尔值。

&& 逻辑与，两个条件都要满足,两侧都是true结果才为true
|| 逻辑或,两个条件只需要满足一个即可，有一侧是真结果就真
! 逻辑非 not，逻辑取反，如true的相反值是false

比如你要充话费

&& 你想用微信充：必须你有微信并且使用微信支付才可以充
|| 你去营业厅充：微信或者支付宝支付都可以
! 如果只有支付宝和微信两种方式：你不想用微信那就只能用支付宝了

10-6，递增和递减运算符

递增和递减运算符概述：如果需要反复的给数字变量加或减去1，可以使用递增(++) 和递减(–)运算符来完成。

在js里递增(++) 和递减(–)既可以放在变量前面，也可以放在变量后面，放在前面时称为前置递增或递减运算符，放在后面时称为后置递增或递减运算符。

注意：递增或者递减只能操作变量，不能直接操作数字。

10-6-1，前置递增递减运算符

注意：前置递增或递减时，是先自加或自减，然后返回值

我们之前想要一个变量加1写法如下


var num=1

num=num+1 //这里就是给num加1



1
2
3
4
5
6
7

我们有没有方便的写法呢，上面的num=num+1，可以直接写成 ++num，这样是不是更简洁。

10-6-2，后置递增递减运算符

注意：后置递增或递减时，先返回值，然后自加或自减

10-6-3，前置和后置的区别

前置和后置如果单独使用，效果是一样的
前置是先自加或自减，然后返回值；后置先返回值，然后自加或自减


var num=10

console.log(++num  +10)//结果是21

console.log(num++  +10)//结果是20



1
2
3
4
5
6
7
8
9

我们通过下面几个小例子来强化理解下


var a=10

++a

console.log(b)//这里b的结果是几



var c=10

c++

var d=c++ +2

console.log(d)//这里d的结果是几



var e=10

var f=e++ + ++e

console.log(f)//这里f的结果是几



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

10-6-4,前置和后置递增递减的小结

前置和后置的主要目的是为了简化代码编写
单独使用递增或递减时，前置和后置效果一样
与其他运算连用时，执行结果会不同

后置：先返回原值，后自加（先人后己）

前置：先自加，后返回值(先己后人)

可以总结为：前置自私，后置无私
开发时，大多使用后置递增/减。例如 num++或num- -

十一，条件语句和循环语句

==========================================================================

11-1，流程控制

在学习条件语句河循环语句之前，我们要先知道什么是流程控制，

**流程控制：**流程控制就是来控制我们的代码按照什么顺序来执行的语句。

流程控制主要有三种结构

顺序结构
分支结构
循环结构

顺序结构是程序中最简单，最基础的流程控制，就是代码按照先后顺序依次执行。我们重点是讲解分支结构和循环结构。

11-2，分支结构

我们上面讲的分支结构，就是代码在从上到下的执行过程中，根据不同的条件，执行不同的代码，从而得到不同的结果。分支结构常用的语句就是条件语句.

我们常用的分支结构的语句:

if语句
switch语句

条件语句: 用于基于不同条件执行不同的动作,通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在这里插入图片描述

举个最简单的例子：你满18岁就可以去网吧，不满18岁就不允许进网吧。这里的判断条件就是你的年纪。

我们这里常用的就是if条件语句，所以接下来我们会重点讲解下if条件语句。

11-3，if条件语句

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行

11-3-1，if 语句

使用 if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块。

语法


if (条件) {

    如果条件为 true 时执行的代码

} 



1
2
3
4
5
6
7
8
9

实例


if (age< 18) {

   console.log("未成年")

}



1
2
3
4
5
6
7
8
9

如果年龄小于18岁，就输出未成年

11-3-2，if else 双分支语句

使用 else 语句来规定假如条件为 false 时的代码块。


if (条件) {

    条件为 true 时执行的代码块

} else { 

    条件为 false 时执行的代码块

}



1
2
3
4
5
6
7
8
9
10
11
12
13

实例


if (age < 18) {

     console.log("未成年")

 } else {

    console.log("成年")

 } 



1
2
3
4
5
6
7
8
9
10
11
12
13

如果年龄小于18岁，就输出未成年，否则就输出成年

11-3-3，if else if 多分支语句

使用 else if 来规定当首个条件为 false 时的新条件。


语法

if (条件 1) {

    条件 1 为 true 时执行的代码块

} else if (条件 2) {

    条件 1 为 false 而条件 2 为 true 时执行的代码块

 } else {

    条件 1 和条件 2 同时为 false 时执行的代码块

}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

实例


if (age < 18) {

     console.log("未成年")

 } else if(age<60) {

    console.log("成年")

 } else {

    console.log("老年")

 } 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果年龄小于18岁，就输出未成年，年龄大于18岁小于60岁就输出成年，年龄大于60岁就输出老年。

11-4 wxml条件渲染

在wxml中，使用 wx:if=“” 来判断是否需要渲染该代码块：


<view wx:if="{{condition}}"> 我是可以显示的</view>



1
2
3
4
5

也可以用 wx:elif 和 wx:else 来添加一个 else 块：


<view wx:if="{{length > 5}}"> 1 </view>

<view wx:elif="{{length > 2}}"> 2 </view>

<view wx:else> 3 </view>



1
2
3
4
5
6
7
8
9

可以看出wxml里的条件渲染和我们上面讲的if条件语句类似，只是写法上稍微有些区别。

wxml里的条件渲染主要用来做页面展示和隐藏使用的。

11-5，for循环语句

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。

比如我们想输出5编编程小石头

一般写法：

console.log(“编程小石头”)

console.log(“编程小石头”)

console.log(“编程小石头”)

console.log(“编程小石头”)

console.log(“编程小石头”)
使用for循环


for (var i=0;i<5;i++){ 

  console.log("编程小石头")

}



1
2
3
4
5
6
7
8
9

for 循环的语法：


for (初始化变量; 条件表达式; 操作表达式){

    被执行的代码块

}



1
2
3
4
5
6
7
8
9

初始化变量：开始前第一个执行，通常用于初始化计数器变量，只执行一次。
条件表达式：就是用来决定每一次循环是否可以继续执行，定义运行循环的终止条件
操作表达式：在大括号里的代码块已被执行之后执行，通常用于对我们的计数器变量进行递增或者递减操作。

实例


for (var i=0;i<5;i++){ 

  console.log("编程小石头")

}



1
2
3
4
5
6
7
8
9

上面实例中

语句1：var i=0 是在开始执行前初始化变量i

语句2:i<5 是用来判断i是否小于5，如果小于5就继续执行循环

语句3：i++ 是在每次循环执行一遍后对i进行加1的操作

11-6，wxml列表渲染

在wxml里我们使用wx:for来显示列表数据。

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item


<view wx:for="{{array}}">

  {{index}}: {{item.name}}

</view>



1
2
3
4
5
6
7
8
9

在js里定义的列表数据如下


Page({

  data: {

    array: [{

      name: '编程小石头',

    }, {

      name: '邱石'

    }]

  }

})



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

11-7,continue和break的学习

continue和break都是用来终止循环的，区别在于

continue：是终止循环中的某一次，继续执行后面的循环
beak: 直接终止整个循环执行，整个循环不在执行

十二，数组的学习

======================================================================

12-1，数组的概念

数组就是一组数据的集合，可以把更多的数据存储在单个变量下。

数组里面可以存储各种类型的数据。

如： var names=[‘编程小石头’,16,true]

12-2，创建数组的两种方式

1，使用new创建数组(不常用)


var names=new Array(); 

names[0]="编程小石头";       

names[1]="刘德华";

names[2]="周杰伦";



1
2
3
4
5
6
7
8
9
10
11

2，利用数组字面量创建数组(常用)


var names=['编程小石头','刘德华','周杰伦']



1
2
3
4
5

明显看到第二种创建数组的方式比第一种更简洁，所以以后我们创建数组就用第二种方式

12-3，获取数组元素

我们获取数组元素是通过数组下标来获取的，下标也叫做索引，数组的下标是从0开始的。如下图

数组可以通过下标来访问，设置，修改对应的元素值。我们可以通过

数组名[下标] 的方式来获取数据中的元素。

如 names[0]就可以获取names数组里的第一个元素‘编程小石头’

12-4，计算数组的和以及平均值

前面我们已经学完如何遍历数组了，如果我这里让大家去求下数组里所有元素的和以及平均值，大家知道如何去求吗。

作业

已知数组 [1,2,3,4,5,6] 如果通过代码计算这个数组的和以及平均值。

12-5，求数组中的最大值

var nums=[1,2,3,4] 这个数组我们很明显就可以看出来4是数组里的最大值，但是如果我们数组里的元素有很多，这个时候你就未必能很快的找出来最大值了，所以我们要想求数组里的最大值，要让代码去实现，而不是你肉眼去看。

思路

其实我们找数组中的最大值，有点类似于武术比赛打擂台

我们首先拿第一个和第二个比，胜出者在待定席位，然后第三个来挑战胜出者，这样又会产生新的胜出者，然后后面的元素都来逐个挑战胜出者，直到最后一个胜出者，就是我们要找的最大值。而这样一v一的对决，正好可以借助我们的循环来实现。


    var nums = [1, 2, 3, 4, 5]

    var max = nums[0]

    for (var i = 1; i < nums.length; i++) {

      if (max < nums[i]) {

        max = nums[i]

      }

    }

    console.log('最大值', max)  //可以得出最大值是5



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

12-5，给数组添加新元素

push() 方法可向数组的末尾添加一个或多个元素，所以我们一般给数组追加元素的时候，直接使用push方法就可以了。


    var nums = [1, 2, 3, 4, 5]

    nums.push(6)

    nums.push(7, 8)

    console.log(nums) //追加新元素后的数组  [1, 2, 3, 4, 5, 6, 7, 8]



1
2
3
4
5
6
7
8
9
10
11

12-6,删除数组中的指定元素

如我们想把数组中的指定元素删除掉，可以用一个新的数组来接受符合要求的元素，不符合要求的元素不接收，这样就可以实现删除数组元素的效果


	// 把元素5删除

    var nums = [1, 2, 3, 4, 5]

    //1,定义一个新数组

    var newNums = []

    //2，遍历旧数组

    for (var i = 0; i < nums.length; i++) {

      //3,把符合要求的元素添加到新的数组里

      if (nums[i] !== 5) {

        newNums.push(nums[i])

      }

    }

    console.log(newNums) //删除成功 [1, 2, 3, 4]



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

十三，对象的学习

======================================================================

13-1，什么是对象

对象只是一种特殊的数据。对象是一组无序的相关属性和方法组成。这里重点要记住属性和方法这两个新概念

属性：事物的特征，对象里的属性就是用来表现该对象具备哪些特征
方法：事物的行为，对象里方法就是用来表示该对象具备哪些行为。

例如：

石头哥具备姓名，年龄，身高，体重等属性

石头哥具备写代码，唱歌，骑车，跑步，吃饭等行为。

手机具备下面的属性和方法

13-2，为什么需要对象

我们在保存一个数据时，可以用变量，保存多个数据时可以用数组。但是我如果想保存一个完整的立体的信息时呢。

比如保存石头哥的完整信息。

如果我们用数组来表示就是

var shitouge=[‘编程小石头’,‘男’,‘128’,‘180’]

这样我虽然把石头哥的完整信息保存到了数组里，也可以大致猜出来哪些数据代表什么意思，但是后面的128和180是什么意思呢？？？

但是我们如果用对象来保存这些信息呢


{

姓名:'编程小石头',

性别:'男'

体重:128

身高:180

}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这样我们是不是就可以立体的知道每个数据代表什么意思了呢。这也是我们使用对象的原因。上面的{}里包裹的就是我们对象的一些属性。只不过我们的属性名不提倡用汉字，应该用英文或者拼音，我这里方便大家理解才这样写的。

13-3，创建对象的三种方式

利用字面量创建对象
利用new Object创建对象
利用构造函数创建对象

13-3-1，利用字面量创建对象

语法如下

var 对象名={

属性名：属性值，

方法名：function(){}

}

示例如下：


var Person = {

 name:'编程小石头',

 age:18,

 code:function(){console.log('石头哥会写代码')}

}



1
2
3
4
5
6
7
8
9
10
11
12
13

13-3-2，利用new Object创建对象

语法：

var obj = new Object();

obj.name=‘编程小石头’

obj.age=18

我们这里就是先用 new Object()创建一个空对象，然后通过.属性名给这个空对象添加属性和方法

13-3-3，利用构造函数创建对象

构造函数是一种特殊的函数，主要用来初始化对象，它总是和new运算符一起使用，我们可以把对象里的一些公共属性和方法抽取出来，然后封装到这个函数里，方便批量创建对象。

使用构造函数创建对象时要注意下面几点

1，构造函数名字的首字母习惯大写
2，构造函数里不需要return就可以返回结果
3，调用构造函数创建对象时，必须用new
4，我们的属性和方法前面必须添加this

完整实例如下：


	function Person(name, age) {//创建构造函数Person

      this.name = name;

      this.age = age;

      this.action = function (jineng) {

        console.log(name + "具备" + jineng + '的技能')

      }

    }

    //创建对象1

    var obj1 = new Person('编程小石头', 18)

    console.log(obj1.name)//编程小石头

    obj1.action('写代码')//编程小石头具备写代码的技能

     //创建对象2

    var obj2 = new Person('周杰伦', 41)

    console.log(obj2.name)//周杰伦

    obj2.action('唱歌')//周杰伦具备唱歌的技能



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

构造函数和对象

我们这里的构造函数就好比汽车的设计图纸，汽车具备哪些属性，拥有哪些方法，已经提前在图纸上设计好了，我们只需要根据图纸new出来一个对象，比如可以new出来一个宝马车，也可以new出来一辆兰博基尼。

13-3-4，new关键字执行过程

如上面我们通过构造函数new一个对象


	function Person(name, age) {//创建构造函数Person

      this.name = name;

      this.age = age;

      this.action = function (jineng) {

        console.log(name + "具备" + jineng + '的技能')

      }

    }

    //创建对象1

    var obj1 = new Person('编程小石头', 18)



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

这里在new一个对象出来时会执行下面四件事

1，在电脑内存中创建一个空对象
2，让this指向这个新的对象
3，执行构造函数里的代码，给这个新对象添加属性和方法
4，返回这个新对象如上面的obj1就是我们创建的新对象

13-3-5，变量，属性，函数，方法总结

属性和变量:

相同点：

都是用来存储数据的。
不同点：

变量单独声明并赋值，使用的时候直接使用变量名就可以；

属性在对象里面的，不需要声明，使用的时候要用：对象.属性名。


var dog = {

    //属性

    name:'可可'，

    age：'12'

} 

//变量

var num = 12;



//调用变量：(直接使用变量名进行调用)

console.log(num); 

//调用属性：(对象名.属性名)

console.log(dog.name);



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

函数和方法：

相同点：

都是实现某种功能。
不同点：

函数是单独声明并且调用的，调用方法：函数名()

方法存在于对象里面。调用方法：对象名.方法()


var dog = {

    name:'可可'，

    age：'12'，

    //方法

    skill：function(){

        console.log('汪汪汪');

    }

}

 

//函数

function skillDemo(){

    console.log("睡觉");

}



//调用函数：(直接使用:函数名(),进行调用)

skillDemo();

//调用方法：(--对象名.方法名()--)

console.log(dog.skill());



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

13-4，对象的使用

13-4-1，访问对象的属性

对象属性的调用语法有两种

对象名.属性名
对象名[‘属性名’]

如我们对象如下


var obj = {

 name:'编程小石头',

 age:18,

 code:function(){console.log('石头哥会写代码')}

}



1
2
3
4
5
6
7
8
9
10
11
12
13

调用name属性就是 obj.name

这里obj就是我们的对象，name就是我们的对象的属性，obj.name里的.就相当于的翻译过来就是obj的name

另外一种调用属性的方式就是 obj[‘name’]

13-4-2，访问对象的方法

对象中方法的调用就一种方式：对象名.方法名() 这里的这对小括号是必不可少的。

如我们对象如下


var obj = {

 name:'编程小石头',

 age:18,

 code:function(){console.log('石头哥会写代码')}

}



1
2
3
4
5
6
7
8
9
10
11
12
13

obj.code() 就是直接调用obj里的code方法

十四，内置对象的学习

========================================================================

14-1，什么是内置对象

内置对象就是指Javascript自带的一些对象，供开发者使用，这些对象提供了一些常用的的功能。开发者可以很方便的使用这些内置对象，而不用关心这些内置对象的实现原理。

就好比我们使用手机内置的发短信，打电话功能，我们用的时候可以很方便的快速使用，而不用关心打电话的实现原理。这就是我们使用内置对象的原因，主要就是为了快速方便的使用内置对象的

常见的内置对象有Math、Array、Date等

14-2，查阅文档的学习

因为内置对象的方法太多了，我们不可能把所有的方法都记下来，所以我门就需要时不时的查阅文档，就好比我们查字典一样。

常用的学习文档有下面几个

MDN

官方地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
W3cschool

https://www.w3school.com.cn/js/index.asp
菜鸟教程

https://www.runoob.com/js/js-tutorial.html

这里建议大家使用MDN文档。因为这个文档比较全，可以快速检索

14-3，Math对象的学习

与其他内置对象不同的是，Math 不是一个构造器对象。Math 的所有属性与方法都是静态的。引用圆周率的写法是 Math.PI，调用正余弦函数的写法是 Math.sin(x)，x 是要传入的参数。也就是说我们的Math可以直接通过Math. 来调用他的属性和方法

由于Math对象的方法比较多，我这里只把开发过程中常用的一些方法做下讲解

14-3-1，Math常用的属性

Math.PI

圆周率，一个圆的周长和直径之比，约等于 3.14159

14-3-2，Math常用的方法

Math.abs(x) 返回一个数的绝对值


Math.abs('-1');     // 1

Math.abs(-2);       // 2

Math.abs(null);     // 0

Math.abs("string"); // NaN

Math.abs();         // NaN



1
2
3
4
5
6
7
8
9
10
11
12
13

Math.max() 返回多个数值的最大值


    console.log(Math.max(1, 2, 3)) //3



1
2
3
4
5

Math.min() 返回多个数值的最小值


  console.log(Math.min(1, 2, 3)) //1



1
2
3
4
5

14-3-3，Math中取整数的三个方法

Math.ceil(x) 向上取整，往大了取


	console.log(Math.ceil(1.2))//2

    console.log(Math.ceil(1.5))//2

    console.log(Math.ceil(1.7))//2

    console.log(Math.ceil(1.9))//2



1
2
3
4
5
6
7
8
9
10
11

Math.floor(x) 向下取整，往小了取


    console.log(Math.floor(1.2))//1

    console.log(Math.floor(1.5))//1

    console.log(Math.floor(1.7))//1

    console.log(Math.floor(1.9))//1



1
2
3
4
5
6
7
8
9
10
11

Math.round(x) 四舍五入取整


    console.log(Math.round(1.2))//1

    console.log(Math.round(1.5))//2

    console.log(Math.round(1.7))//2

    console.log(Math.round(1.9))//2



1
2
3
4
5
6
7
8
9
10
11

14-3-4，随机数的学习

Math.random() 得到一个大于等于0，小于1之间的随机数

使用。

使用场景：一般我们做抽奖时会用到随机数

获取两数之间的随机数（大于等于min小于max）


//这个随机数可能是整数，也可能是小数

Math.random() * (max - min) + min



1
2
3
4
5
6
7

得到两数之间的随机整数（大于等于min，小于max）


// 这个随机数是min和max之间的随机整数

function getRandomInt(min, max) {

  min = Math.ceil(min);

  max = Math.floor(max);

  //不含最大值，含最小值

  return Math.floor(Math.random() * (max - min)) + min; 

}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

得到两数之间的随机整数，包括两个数在内（大于等于min，小于等于max）


// 这个随机数是min和max之间的随机整数

function getRandomIntInclusive(min, max) {

  min = Math.ceil(min);

  max = Math.floor(max);

  //含最大值，含最小值 

  return Math.floor(Math.random() * (max - min + 1)) + min; 

}



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

14-4，Date日期对象的学习

我们的Date对象是一个构造函数对象，必须使用new 对象，来创建我们要使用的对象以后才可以使用。

创建一个新Date对象的唯一方法是通过new 操作符，

例如：let now = new Date()

使用场景 比如我们的秒杀倒计时，显示的日期都需要借助Date日期对象

14-4-1，创建Date对象

有 4 种方法创建新的日期对象：


new Date()

new Date(year, month, day, hours, minutes, seconds, milliseconds)

new Date(dateString)

new Date(milliseconds)



1
2
3
4
5
6
7
8
9
10
11

new Date()创建Date对象


    var d = new Date()

    console.log(d)//Mon Dec 21 2020 20:02:54 GMT+0800 (中国标准时间)



1
2
3
4
5
6
7

这样直接创建的返回的是当前的时间如上面的注释所示，我当前是2020年12月21日20时02分54，你打印的应该是你当前自己的时间。

new Date(year, month, …)

new Date(year, month, …) 用指定日期和时间创建新的日期对象。

7个数字分别指定年、月、日、小时、分钟、秒和毫秒（按此顺序）：


var d = new Date(2018, 11, 24, 10, 33, 30, 0);

console.log(d) //Mon Dec 24 2018 10:33:30 GMT+0800 (中国标准时间)



1
2
3
4
5
6
7

这里有一点需要注意：JavaScript 从 0 到 11 计算月份。一月是 0。十二月是11。

4个数字指定年、月、日和小时：


var d = new Date(2018, 11, 24, 10);



1
2
3
4
5

3 个数字指定年、月和日：


var d = new Date(2018, 11, 24);



1
2
3
4
5

new Date(dateString)

new Date(dateString) 从日期字符串创建一个新的日期对象

我们可以通过年-月-日或者年/月/日获取Date对象


//如我们用两种方式来创建2020年12月21日

    var d1 = new Date(2020,11,21);//月份是从0开始的 11代表12月

    console.log(d1) //Mon Dec 21 2020 00:00:00 GMT+0800 (中国标准时间)

    var d2 = new Date('2020-12-21');

    console.log(d2) //Mon Dec 21 2020 08:00:00 GMT+0800 (中国标准时间)

     var d3 = new Date('2020/12/21');

    console.log(d3) //Mon Dec 21 2020 08:00:00 GMT+0800 (中国标准时间)



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

new Date(milliseconds)

new Date(milliseconds) 创建一个零时加毫秒的新日期对象

JavaScript 将日期存储为自 1970 年 1 月 1 日 00:00:00 UTC（协调世界时）以来的毫秒数。

零时间是 1970 年 1 月 1 日 00:00:00 UTC。

现在的时间是：1970 年 1 月 1 日之后的 1608553621233毫秒

如下


    var d1 = new Date(0);

    console.log(d1) //Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)



1
2
3
4
5
6
7

r如果我们想获取当前时间距离1970 年 1 月 1 日之间的毫秒值可以


    var d1 = new Date();

    console.log(d1.getTime()) //1608553621233

    var d2 = new Date();

    console.log(d2) //Mon Dec 21 2020 20:27:01 GMT+0800 (中国标准时间)



1
2
3
4
5
6
7
8
9
10
11

可以看出当前时间距离1970 年 1 月 1 日之间的毫秒值是1608553621233

那么我们直接new Date(1608553621233)获取的日期如下


    var d1 = new Date(1608553621233);

    console.log(d1) //Mon Dec 21 2020 20:27:01 GMT+0800 (中国标准时间)



1
2
3
4
5
6
7

所以当前的日期和通过new Date(当前日期距离1970年1月1日的毫秒值)都可以获取当前时间。两者可以相互转换。

14-4-2,日期获取方法

获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法

| 方法 | 描述 |

| — | — |

| getDate() | 以数值返回天（1-31） |

| getDay() | 以数值获取周名（0-6） |

| getFullYear() | 获取四位的年（yyyy） |

| getHours() | 获取小时（0-23） |

| getMilliseconds() | 获取毫秒（0-999） |

| getMinutes() | 获取分（0-59） |

| getMonth() | 获取月（0-11） |

| getSeconds() | 获取秒（0-59） |

| getTime() | 获取时间（从 1970 年 1 月 1 日至今） |

14-4-3，日期设置方法

设置方法用于设置日期的某个部分

| 方法 | 描述 |

| — | — |

| setDate() | 以数值（1-31）设置日 |

| setFullYear() | 设置年（可选月和日） |

| setHours() | 设置小时（0-23） |

| setMilliseconds() | 设置毫秒（0-999） |

| setMinutes() | 设置分（0-59） |

| setMonth() | 设置月（0-11） |

| setSeconds() | 设置秒（0-59） |

| setTime() | 设置时间（从 1970 年 1 月 1 日至今的毫秒数） |

14-4-4，倒计时（综合案例）

我们这里带大家实现一个倒计时的案例，比如我们知道一个活动结束的时间，然后去计算活动还有多久结束。我会在视频里带着大家写一个综合的案例。大家跟着视频课来学习这个综合案例即可。

14-5,Array数组对象的学习

数组对象的作用是：使用单独的变量名来存储一系列的值。

如我之前学习数组时，数组的一种创建方式


var mycars = new Array();

mycars[0] = "Saab";

mycars[1] = "Volvo";

mycars[2] = "BMW";



1
2
3
4
5
6
7
8
9
10
11

14-5-1,判断是不是数组

判断一个对象是不是数组有两种方式

1，通过instanceof Array
2，通过Array.isArray(）方法


    var arr = new Array()

    console.log(arr instanceof Array) //true

    console.log(Array.isArray(arr))//true



1
2
3
4
5
6
7
8
9

14-5-2，添加和删除数组元素

其实我们在讲解数组的那一节有教大家如何添加和删除数组，今天再来带大家系统的来学习下数组的添加和删除

push方法添加

在数组的末尾添加一个或者多个元素
unshift方法添加

在数组的开头添加一个或者多个元素
pop方法删除

删除数组尾部的元素，一次只能删除一个
shift方法删除

删除数组最前面（头部）的元素

14-5-3，配套练习（筛选数组）

最后

光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的增加文章的篇幅，减少文章的可读性

Java面试宝典2021版

最常见Java面试题解析（2021最新版）

2021企业Java面试题精选

new Date(2020,11,21);//月份是从0开始的 11代表12月

console.log(d1) //Mon Dec 21 2020 00:00:00 GMT+0800 (中国标准时间)

var d2 = new Date('2020-12-21');

console.log(d2) //Mon Dec 21 2020 08:00:00 GMT+0800 (中国标准时间)

 var d3 = new Date('2020/12/21');

console.log(d3) //Mon Dec 21 2020 08:00:00 GMT+0800 (中国标准时间)
1
2
3
4
5
6
7
8
9




*   new Date(milliseconds)  

    new Date(milliseconds) 创建一个零时加毫秒的新日期对象  

    JavaScript 将日期存储为自 1970 年 1 月 1 日 00:00:00 UTC（协调世界时）以来的毫秒数。  

    零时间是 1970 年 1 月 1 日 00:00:00 UTC。  

    现在的时间是：1970 年 1 月 1 日之后的 1608553621233毫秒  

    如下



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var d1 = new Date(0);

console.log(d1) //Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间)
1
2
3




r如果我们想获取当前时间距离1970 年 1 月 1 日之间的毫秒值可以



1
2
3
4
5
6
7

var d1 = new Date();

console.log(d1.getTime()) //1608553621233

var d2 = new Date();

console.log(d2) //Mon Dec 21 2020 20:27:01 GMT+0800 (中国标准时间)
1
2
3
4
5
6
7




可以看出当前时间距离1970 年 1 月 1 日之间的毫秒值是1608553621233  

那么我们直接new Date(1608553621233)获取的日期如下



1
2
3
4
5
6
7
8
9

var d1 = new Date(1608553621233);

console.log(d1) //Mon Dec 21 2020 20:27:01 GMT+0800 (中国标准时间)
1
2
3




所以当前的日期和通过new Date(当前日期距离1970年1月1日的毫秒值)都可以获取当前时间。两者可以相互转换。



### []( )14-4-2,日期获取方法



获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法



| 方法 | 描述 |

| --- | --- |

| getDate() | 以数值返回天（1-31） |

| getDay() | 以数值获取周名（0-6） |

| getFullYear() | 获取四位的年（yyyy） |

| getHours() | 获取小时（0-23） |

| getMilliseconds() | 获取毫秒（0-999） |

| getMinutes() | 获取分（0-59） |

| getMonth() | 获取月（0-11） |

| getSeconds() | 获取秒（0-59） |

| getTime() | 获取时间（从 1970 年 1 月 1 日至今） |



### []( )14-4-3，日期设置方法



设置方法用于设置日期的某个部分



| 方法 | 描述 |

| --- | --- |

| setDate() | 以数值（1-31）设置日 |

| setFullYear() | 设置年（可选月和日） |

| setHours() | 设置小时（0-23） |

| setMilliseconds() | 设置毫秒（0-999） |

| setMinutes() | 设置分（0-59） |

| setMonth() | 设置月（0-11） |

| setSeconds() | 设置秒（0-59） |

| setTime() | 设置时间（从 1970 年 1 月 1 日至今的毫秒数） |



### []( )14-4-4，倒计时（综合案例）



我们这里带大家实现一个倒计时的案例，比如我们知道一个活动结束的时间，然后去计算活动还有多久结束。我会在视频里带着大家写一个综合的案例。大家跟着视频课来学习这个综合案例即可。



[]( )14-5,Array数组对象的学习

-------------------------------------------------------------------------------



数组对象的作用是：使用单独的变量名来存储一系列的值。  

如我之前学习数组时，数组的一种创建方式



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
79
80
81
82
83
84
85
86
87
88
89

var mycars = new Array();

mycars[0] = “Saab”;

mycars[1] = “Volvo”;

mycars[2] = “BMW”;




### []( )14-5-1,判断是不是数组



判断一个对象是不是数组有两种方式



*   1，通过instanceof Array

*   2，通过Array.isArray(）方法



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var arr = new Array()

console.log(arr instanceof Array) //true

console.log(Array.isArray(arr))//true
1
2
3
4
5




### []( )14-5-2，添加和删除数组元素



其实我们在讲解数组的那一节有教大家如何添加和删除数组，今天再来带大家系统的来学习下数组的添加和删除



*   push方法添加  

    在数组的末尾添加一个或者多个元素

*   unshift方法添加  

    在数组的开头添加一个或者多个元素

*   pop方法删除  

    删除数组尾部的元素，一次只能删除一个

*   shift方法删除  

    删除数组最前面（头部）的元素



### []( )14-5-3，配套练习（筛选数组）





### 最后

光给面试题不给答案不是我的风格。这里面的面试题也只是凤毛麟角，还有答案的话会极大的**增加文章的篇幅**，减少文章的可读性

# Java面试宝典2021版

[外链图片转存中...(img-f1YG1TgG-1714727514908)]

[外链图片转存中...(img-qNJOJrvx-1714727514908)]

# 最常见Java面试题解析（2021最新版）

[外链图片转存中...(img-bzWUCF9x-1714727514908)]

[外链图片转存中...(img-CH3itDyo-1714727514909)]

# 2021企业Java面试题精选

[外链图片转存中...(img-AJf2riFX-1714727514909)]

[外链图片转存中...(img-cQ9WIclM-1714727514909)]

> **本文已被[CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】](https://bbs.csdn.net/topics/618154847)收录**
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/817823