最新最全的JavaScript入门视频，包含小程序和uniapp相关的JavaScript知识学习

写在前面

我们学习JavaScript不仅可以用于web网站开发，也可以用于小程序，uniapp项目的开发，所以我们学习JavaScript很重要。

准备工作

我们这里学习JavaScript用的是小程序开发者工具或者uniapp开发者工具，所以需要你先装好这两个中的一个。

当然了，如果学习js的同时还想学习下小程序石头哥建议使用小程序开发者工具
如果你只是学习uniapp不想学习小程序，直接去下载uniapp开发者工具即可

• 小程序入门和开发者工具的下载
• uniapp入门和开发者工具的下载

根据自己需要去下载对应的开发者工具，如果上面两个点不进去，可以去石头哥的个人博客找小程序入门或者uniapp入门对应的文章即可

一，函数和事件的学习

1-1，注释的学习

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

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

1-1-1，小程序里的注释

wxml里的注释如下

wxss里的注释

js里的注释

1-1-2，uniapp里的注释

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

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

可以看到我们常用的三种注释如下，正好和我们前面学的三剑客对应起来。

• 布局的注释是：<!-- -->
• js逻辑代码的注释是： //
• css样式的注释是：/* */
  
  我们这里没有必要记每种注释的写法，只需要记住快捷键，可以快速生成注释即可。这就是快捷键的好处。

1-2，日志打印的学习

1-2-1,小程序里的日志打印

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

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

1-2-2，uniapp里的日志打印

1-3，函数的学习

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

函数的定义小程序和uniapp里是一样的
函数的两种使用方式如下图：

我们的函数一般是写在js逻辑区域的methods里，比如我们定义一个getname函数，有下面两种写法。

石头哥这里推荐第一种方式定义函数，这也更简单

1-4，点击事件的学习

1-4-1，小程序里的点击事件

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

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

1-4-2，uniapp里的点击事件

接下来我们学习事件，我们常用的事件如下，这里我们先重点讲解下@click点击事件和
@input获取输入值的事件

我们如果想给一个组件定义点击事件，就要用到uni的事件处理，由于uni是基于vue语法的额，所以我们给uni里的组件定义点击事件，就要用到vue的语法。
我们给一个组件绑定点击事件的语法如下：

我们可以使用 v-on 指令来监听点击事件，从而执行 JavaScript 代码。
v-on 指令可以缩写为 @ 符号。

语法格式：

v-on:click="methodName"
或
@click="methodName"

methodName就是函数名，如下所示

可以看出我们使用v-on和@都可以定义点击事件，我这里推荐大家用@简写的方式

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

1-5-1，小程序里获取用户输入

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

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

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

1-5-2，uniapp里获取用户输入

在uniapp里获取input输入框里用户输入的内容有两种方式

• @input结合函数
• v-model数据绑定获取输入内容(推荐)

我们获取用户输入会用到@input事件，其实我们在学习input组件时，官方有给出这个属性的。

看官方的文档，可以知道@input主要是为了获取用户的输入内容。
@input的定义如下图，其中的getname就是我们定义的函数，用来接收用户输入的。

在布局里定义好bindinput事件以后，在js页面再定义一个和事件名一样的函数即可。

然后就可以监听用户输入了

视频里会作详细讲解。如果你有买老师的课程，或者购买老师的年卡，可以获取对应的学习视频。

二，变量的学习

2-1，什么是变量

用大白话讲：变量就是一个装东西的盒子
再通俗些讲：变量就是用于存放数据的容器，我们通过变量名获取对应的数据。

如上图所示，我们的盒子(变量)可以装名字，布尔类型的true，还可以用来装数字。
变量的本质：就是在程序的内存中申请一块用来存放数据的空间。

2-2，变量的组成

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

var x = 7;
var y = 8;
var z = x + y; 

从上例中，您可知道x,y,z是三个不同的变量名：
x 存储值 7
y 存储值 8
z 存储值 15

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

2-3，变量的使用

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

• 1，声明变量

来看下具体代码

//声明变量
var age 

这段代码的意思是声明一个叫age的变量
var是一个JavaScript关键字，用来声明变量，使用该关键字声明变量以后，计算机会自动为变量分配一个内存空间，用来存储数据。
age就是我们的变量名，我们要通过变量名来访问到计算机内存里分配的空间。

• 2，赋值

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

//给age赋值
age=10

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

2-4，变量的初始化

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

var age=10 

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

2-5，变量的重新赋值

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

var age=10
age=18

如上面的代码，我们的变量age先被赋值10，后又被赋值18，那么最后我们的age就是18
这就好比，酒店的房间，808屋一开始住的是石头哥，后面石头哥走了，刘德华住进去了，那这个时候你再去808找人，找到的就是刘德华了。

2-6.变量的命名规范

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

2-7,变量的小案例

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

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

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

局部变量：变量在函数内声明，只能在函数内部访问。
全局变量：变量在函数外定义，整个代码都可以调用的变量。

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

三，数据类型

3-1，认识数据类型

上一节变量的学习，我们知道变量是用来装数据的盒子，可是数据有很多，有各种各样的类型。不同类型的数据占用的计算器内存也不一样。就好比胖子睡大床，瘦子睡小床就行。
在计算机中不同的数据占用的存储空间是不同的，为了便于区分，充分利用存储空间，于是就定义了不同的数据类型。
简单来说，数据类型就是数据的类别型号，比如“张三”是个人名，18是个数字

3-2，常见的数据类型

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

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

简单数据类型

3-3，数字型Number

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

var age=21	//整数
var PI=3.1415	//小数

3-4，字符串String

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

var name="编程小石头"	//字符串
var age1="18"		//字符串
var age2=18		//数字型

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

字符串长度

字符串是由若干字符组成的，这些字符的数量就是字符串的长度，通过字符串的length属性可以获取整个字符串的长度。
还是拿羊肉串来类比，比如你一个羊肉串上串了5块羊肉，那么这个羊肉串的长度就是5。
使用的语法如下

    var name="编程小石头"
    console.log(name.length)	//这里的输出结果是5

字符串的拼接

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

    var name="编程小石头"
    var weixin=2501902696
    var test=name+weixin
    console.log(test) //输出结果："编程小石头2501902696"
    console.log(12+12)//输出结果：24
    console.log("12"+12)//输出结果：1212

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

3-5，布尔型Boolean

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

var flag=true

3-6,Undefined和Null

一个声明后没有赋值的变量会有一个默认值 undefined
一个声明变量，并且赋值null，就代表这个变量是空值(学习object对象时，我们会继续研究null)
null 和 undefined 的值相等，但类型不同，下面的8-7会有代码演示

3-7，typeof 操作符

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

typeof "John"                // 返回 string 
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean

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

    var aaa=undefined
    var bbb=null
    console.log(aaa==bbb)//输出结果：true
    console.log(typeof aaa)//输出结果：undefined
    console.log(typeof bbb)//输出结果：object

注意：这里的 == 用来判断值是否相等，后面会讲。
上面的代码可以看出：null 和 undefined 的值相等，但类型不同

3-8， 数据类型的转换

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

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

转换为字符串

转换为数字型（重点）

转为数字的几个特殊情况

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

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

我们这里以小程序为例来写个小案例，其实uniapp里原理也是一样的。大家可以去石头哥uniapp的笔记里看下：https://blog.csdn.net/qiushi_1990/article/details/127675537

4-1,数据绑定

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

<!--wxml-->
<view> {
  {message}} </view>

// js里如下
Page({
  data: {
    message: '我是动态绑定的数据'
  }
})

4-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)]
  下面就带带大家敲出属于自己的计算器小程序代码。

4-3，先看index.wxml

<!--index.wxml  -->
<input placeholder="请输入数字a" bindinput="inputa" />
<text>+</text>
<input placeholder="请输入数字b" bindinput="inputb" />
<button bindtap='sum'>计算</button>
<text>结果为：{
  {result}}</text>

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

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

就是我们输入数字a的输入框，这里input就是我们认识的第一个小程序组件。
input的官方简介如下：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
placeholder：设置默认显示文字（当我们输入文字时，默认的就没有了）
bindinput=“inputa”：定义一个inputa方法来获取input的输入内容。在index.js中会用到

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

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

这里是个按钮就是我们的计算按钮
bindtap=‘sum’：定义个叫sum的方法，用来计算结果在index.js中会用到

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

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

4-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
    })
  }
})

 

  
 

index.js的代码不多，大家可以先照着敲一下。学小程序前期不需要你理解，但是一定要多敲多练。
这里的逻辑用文字写出来，估计大家新入门时还是不太好理解，我会录视频来给大家讲解。

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

五，运算符

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

5-1，算数运算符

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

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

• |乘法|x=5*2| 10
  / |除法| x=5/2 |2.5
  %|取模（余数）| x=5%2| 1

5-2，表达式和返回值

表达式：是由数字，运算符，变量等以能求得结果的有意义的操作组成的式子。
表达式最终都会有一个结果返回给我们，这个返回结果我们称之为返回值

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

5-3，比较运算符

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

|大于号|1>2|false
=|大于等于号(大于或等于)|1>=2|false
<=|小于等于号(小于或等于)|1<=2|true
|判等号(判断是否相等)|11|true
=|绝对等于（值和类型均相等）|1=‘1’|false
!=|不等于|1!=1|false

5-4，赋值运算符

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

=的小结

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

5-5，逻辑运算符

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

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

比如你要充话费

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

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

递增和递减运算符概述：如果需要反复的给数字变量加或减去1，可以使用递增(++) 和递减(–)运算符来完成。
在js里递增(++) 和递减(–)既可以放在变量前面，也可以放在变量后面，放在前面时称为前置递增或递减运算符，放在后面时称为后置递增或递减运算符。
注意：递增或者递减只能操作变量，不能直接操作数字。

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

注意：前置递增或递减时，是先自加或自减，然后返回值
我们之前想要一个变量加1写法如下

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

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

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

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

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

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

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

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

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的结果是几

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

• 前置和后置的主要目的是为了简化代码编写
• 单独使用递增或递减时，前置和后置效果一样
• 与其他运算连用时，执行结果会不同
  后置：先返回原值，后自加（先人后己）
  前置：先自加，后返回值(先己后人)
  可以总结为：前置自私，后置无私
• 开发时，大多使用后置递增/减。例如 num++或num- -

六，条件语句和循环语句

6-1，流程控制

在学习条件语句河循环语句之前，我们要先知道什么是流程控制，
**流程控制：**流程控制就是来控制我们的代码按照什么顺序来执行的语句。
流程控制主要有三种结构

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

6-2，分支结构

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

• if语句
• switch语句

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

举个最简单的例子：你满18岁就可以去网吧，不满18岁就不允许进网吧。这里的判断条件就是你的年纪。
我们这里常用的就是if条件语句，所以接下来我们会重点讲解下if条件语句。

6-3，if条件语句

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

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

6-3-1，if 语句

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

• 语法

if (条件) {
    如果条件为 true 时执行的代码
} 

• 实例

if (age< 18) {
   console.log("未成年")
}

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

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

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

if (条件) {
    条件为 true 时执行的代码块
} else { 
    条件为 false 时执行的代码块
}

• 实例

if (age < 18) {
     console.log("未成年")
 } else {
    console.log("成年")
 } 

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

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

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

语法
if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

• 实例

if (age < 18) {
     console.log("未成年")
 } else if(age<60) {
    console.log("成年")
 } else {
    console.log("老年")
 } 

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

6-4 wxml条件渲染

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

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

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

<view wx:if="{
  {length > 5}}"> 1 </view>
<view wx:elif="{
  {length > 2}}"> 2 </view>
<view wx:else> 3 </view>

可以看出wxml里的条件渲染和我们上面讲的if条件语句类似，只是写法上稍微有些区别。
wxml里的条件渲染主要用来做页面展示和隐藏使用的。

6-5，for循环语句

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
比如我们想输出5编编程小石头

• 一般写法：
  console.log(“编程小石头”)
  console.log(“编程小石头”)
  console.log(“编程小石头”)
  console.log(“编程小石头”)
  console.log(“编程小石头”)
• 使用for循环

for (var i=0;i<5;i++){ 
  console.log("编程小石头")
}

for 循环的语法：

for (初始化变量; 条件表达式; 操作表达式){
    被执行的代码块
}

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

实例

for (var i=0;i<5;i++){ 
  console.log("编程小石头")
}

上面实例中
语句1：var i=0 是在开始执行前初始化变量i
语句2:i<5 是用来判断i是否小于5，如果小于5就继续执行循环
语句3：i++ 是在每次循环执行一遍后对i进行加1的操作

6-6，wxml列表渲染

在wxml里我们使用wx:for来显示列表数据。
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{
  {array}}">
  {
  {index}}: {
  {item.name}}
</view>

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

Page({
  data: {
    array: [{
      name: '编程小石头',
    }, {
      name: '邱石'
    }]
  }
})

6-7,continue和break的学习

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

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

七，数组的学习

7-1，数组的概念

数组就是一组数据的集合，可以把更多的数据存储在单个变量下。
数组里面可以存储各种类型的数据。
如： var names=[‘编程小石头’,16,true]

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

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

var names=new Array(); 
names[0]="编程小石头";       
names[1]="刘德华";
names[2]="周杰伦";

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

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

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

7-3，获取数组元素

我们获取数组元素是通过数组下标来获取的，下标也叫做索引，数组的下标是从0开始的。如下图
数组可以通过下标来访问，设置，修改对应的元素值。我们可以通过
数组名[下标] 的方式来获取数据中的元素。
如 names[0]就可以获取names数组里的第一个元素‘编程小石头’

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

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

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

7-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

7-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]

7-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]

八，对象的学习

8-1，什么是对象

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

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

例如：
石头哥具备姓名，年龄，身高，体重等属性
石头哥具备写代码，唱歌，骑车，跑步，吃饭等行为。

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

8-2，为什么需要对象

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

• 比如保存石头哥的完整信息。
  如果我们用数组来表示就是
  var shitouge=[‘编程小石头’,‘男’,‘128’,‘180’]
  这样我虽然把石头哥的完整信息保存到了数组里，也可以大致猜出来哪些数据代表什么意思，但是后面的128和180是什么意思呢？？？

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

{
姓名:'编程小石头',
性别:'男'
体重:128
身高:180
}

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

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

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

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

语法如下
var 对象名={
属性名：属性值，
属性名：属性值，
方法名：function(){}
}

示例如下：

var Person = {
 name:'编程小石头',
 age:18,
 code:function(){console.log('石头哥会写代码')}
}

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

语法：
var obj = new Object();
obj.name=‘编程小石头’
obj.age=18
我们这里就是先用 new Object()创建一个空对象，然后通过.属性名给这个空对象添加属性和方法

8-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('唱歌')//周杰伦具备唱歌的技能

构造函数和对象

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

8-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)

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

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

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

属性和变量:

• 相同点：
  都是用来存储数据的。
• 不同点：
  变量单独声明并赋值，使用的时候直接使用变量名就可以；
  属性在对象里面的，不需要声明，使用的时候要用：对象.属性名。

var dog = {
    //属性
    name:'可可'，
    age：'12'
} 
//变量
var num = 12;

//调用变量：(直接使用变量名进行调用)
console.log(num); 
//调用属性：(对象名.属性名)
console.log(dog.name);

函数和方法：

• 相同点：
  都是实现某种功能。
• 不同点：
  函数是单独声明并且调用的，调用方法：函数名()
  方法存在于对象里面。调用方法：对象名.方法()

var dog = {
    name:'可可'，
    age：'12'，
    //方法
    skill：function(){
        console.log('汪汪汪');
    }
}
 
//函数
function skillDemo(){
    console.log("睡觉");
}

//调用函数：(直接使用:函数名(),进行调用)
skillDemo();
//调用方法：(--对象名.方法名()--)
console.log(dog.skill());

 

  
 

8-4，对象的使用

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

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

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

如我们对象如下

var obj = {
 name:'编程小石头',
 age:18,
 code:function(){console.log('石头哥会写代码')}
}

调用name属性就是 obj.name
这里obj就是我们的对象，name就是我们的对象的属性，obj.name里的.就相当于 的 翻译过来就是obj的name
另外一种调用属性的方式就是 obj[‘name’]

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

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

var obj = {
 name:'编程小石头',
 age:18,
 code:function(){console.log('石头哥会写代码')}
}

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

九，内置对象的学习

9-1，什么是内置对象

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

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

9-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文档。因为这个文档比较全，可以快速检索

9-3，Math对象的学习

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

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

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

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

9-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

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

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

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

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

9-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

• 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

• 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

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

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

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

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

//这个随机数可能是整数，也可能是小数
Math.random() * (max - min) + min

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

// 这个随机数是min和max之间的随机整数
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  //不含最大值，含最小值
  return Math.floor(Math.random() * (max - min)) + min; 
}

• 得到两数之间的随机整数，包括两个数在内（大于等于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; 
}

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

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

创建一个新Date对象的唯一方法是通过new 操作符，
例如：let now = new Date()

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

9-4-1，创建Date对象

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

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

• new Date()创建Date对象

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

这样直接创建的返回的是当前的时间如上面的注释所示，我当前是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 (中国标准时间)

这里有一点需要注意：JavaScript 从 0 到 11 计算月份。一月是 0。十二月是11。
4个数字指定年、月、日和小时：

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

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

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

• 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 (中国标准时间)

• 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 (中国标准时间)

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 (中国标准时间)

可以看出当前时间距离1970 年 1 月 1 日之间的毫秒值是1608553621233
那么我们直接new Date(1608553621233)获取的日期如下

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

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

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

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

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

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

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

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

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

数组对象的作用是：使用单独的变量名来存储一系列的值。
如我之前学习数组时，数组的一种创建方式

var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

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

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

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

    var arr = new Array()
    console.log(arr instanceof Array) //true
    console.log(Array.isArray(arr))//true

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

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

• push方法添加
  在数组的末尾添加一个或者多个元素
• unshift方法添加
  在数组的开头添加一个或者多个元素
• pop方法删除
  删除数组尾部的元素，一次只能删除一个
• shift方法删除
  删除数组最前面（头部）的元素

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

给你一组数据 [20,59,40,80,99,98] 筛选出所有小于60的数组，可以理解为找到所有不及格的学生的成绩，你会怎么做呢？ 可以结合我们上面学过的知识，自己思考下。我会在视频里带着你写一遍。看视频之前，建议你自己先思考下。

9-5-4，reverse方法翻转数组

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

    var arr = [1, 2, 3, 4, 5]
    console.log(arr.reverse())//[5, 4, 3, 2, 1]

9-5-5，sort方法对数组进行排序

用sort方法进行排序，默认是升序排列的，如下

   var arr = [1, 3, 2, 5, 4]
   console.log(arr.sort())//[1, 2, 3, 4, 5]

但是直接用sort方法会有问题

    var arr = [11, 3, 22, 55, 44]
    console.log(arr.sort())//[11, 22, 3, 44, 55]

为什么会出现3在11和22后面的问题呢，因为我们sort默认排序顺序是在将元素转换为字符串，然后对字符串进行比较，再排序的，所以我们要想用sort来排序，就要用到另外一个写法了

    var arr = [11, 3, 22, 55, 44]
    //按照升序排序
    arr.sort(function (a, b) {
      return a - b
    })
    //按照降序排序
    arr.sort(function (a, b) {
      return b - a
    })

上面的 写法是固定的，大家只需要记住就行了。 a-b时是升序，b-a时是降序

function (a, b) {
      return a - b 
}

9-5-6，数组的索引方法

• indexOf()方法
  返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
• lastIndexOf() 方法
  返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1

9-5-7，课程作业，对数组进行去重

给出一个数组 [1,3,5,2,4,5,6,4],现要求把数组里重复的元素给删除掉，我会在视频里带着大家写一遍，在看视频之前，建议大家先自己仔细思考下，最好自己先实现一下。

9-5-7，把数组转换为字符串

我们把数组转换为字符串有下面两种方法

• toString()
  将数组通过逗号连接成一个字符串。
• join(分隔符)
  将数组通过分隔符连接成一个字符串。join里分隔符如果不写的话，默认用逗号来连接数组元素组成一个字符串

    var arr = [1, 3, 2, 5, 4]
    console.log(arr.toString())//1,3,2,5,4
    console.log(arr.join('-'))//1-3-2-5-4

这里希望大家重点掌握，因为我们实际开发中，会把数组转换为字符串传给后台开发人员。

9-5-8，数组的其他常用方法

• concat() 方法
  用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组
• slice() 方法
  截取数组的一部分返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变
• splice() 方法
  通过删除或替换现有元素或者原地添加新的元素来修改或者删除数组
  splice(从第几个开始，删除几个)

    var arr = [1, 2, 3, 4, 5]
    arr.splice(0, 2)// 从索引为0的地方开始，删除2个元素。
    console.log(arr) //[3, 4, 5]

• splice(从第几个开始，替换几个，要替换的值)

    var arr = ['a', 'b', 'c', 'd', 'e']
    arr.splice(0, 2,'A','B')// 从索引为0的地方开始，替换2个元素，替换为 A和B
    console.log(arr) //["A", "B", "c", "d", "e"]

到这里我们JavaScript的知识点就差不多学完了，不论是在小程序里还是uniapp里，js部分的代码基本上都是一样的。所以，大家学好js，就可以走遍天下都不怕了。

转载：https://blog.csdn.net/qiushi_1990/article/details/128035694