JavaScript零基础知识点
文章目录
- 1.初识JavaScript
-
- 1.1 JavaScript历史
- 1.2 JavaScript是什么
- 1.3 JavaScript的作用
- 1.4 HTML/CSS/JS的关系
- 1.4 浏览器执行JS简介
- 1.5 JS的组成
- 1.6 JS初体验
- 2.JavaScript注释
- 3.JavaScript输入输出语句
- 4.变量
-
- 4.1 变量概述
-
- 4.1.1 什么是变量
- 4.1.2 变量在内存中的存储
- 4.2 变量的使用
-
- 4.2.1 声明变量
- 4.2.2 赋值
- 4.2.3 变量的初始化
- 4.3 变量的语法扩展
-
- 4.3.1 更新变量
- 4.3.2 声明多个变量
- 4.3.3 声明变量特殊情况
- 4.4 变量命名规范
- 5.数据类型
-
- 5.1 数据类型简介
-
- 5.1.1 为什么需要数据类型
- 5.1.2 变量的数据类型
- 5.1.3 数据类型的分类
- 5.2 简单数据类型
-
- 5.2.1 数字型Number
- 5.2.2 字符串型
- 5.2.3 布尔型Boolean
- 5.2.4 undefined和Null
- 5.3 获取变量数据类型
-
- 5.3.1 获取检测变量的数据类型
- 5.3.2 字面量
- 5.4 数据类型转换
-
- 5.4.1 什么是数据类型转换
- 5.4.2 转换为字符串
- 5.4.3 转换为数字型(重点)
- 5.4.4 转换为布尔型
- 6.运算符
-
- 6.1 运算符
- 6.2 算术运算符
-
- 6.2.1 算术运算符概述
- 6.2.2浮点数的精度问题
- 6.2.3表达式和返回值
- 6.3 递增和递减运算符
-
- 6.3.1递增和递减运算符概述
- 6.4 比较运算符
-
- 6.4.1 比较运算符概述
- 6.5 逻辑运算符
-
- 6.5.1 短路运算(逻辑中断)
- 6.6 赋值运算符
- 6.7 运算符优先级
- 7.流程控制-分支
-
- 7.1 流程控制
- 7.2 顺序流程控制
- 7.3 分支流程控制if语句
- 7.4 三元表达式
- 7.5 分支流程控制switch语句
- 8.流程控制-循环
-
- 8.1 循环
- 8.2 for循环
- 8.3 双重for循环
- 8.4 while循环
- 8.5 do while循环
- 8.6 continue break
-
- 8.6.1 continue关键字
- 8.6.2 break关键字
- 9.数组
-
- 9.1 数组的概念
- 9.2 创建数组
- 9.3获取数组元素
- 9.4 遍历数组
- 9.5 数组中新增元素
- 10.函数
-
- 10.1 函数的概念
- 10.2 函数的使用
- 10.3 带参数的函数
- 10.4 函数的返回值
- 10.5 arguments的使用
- 10.6 函数的两种声明方式
- 10.7 作用域
- 10.8 预解析
- 11 对象
-
- 11.1 对象
- 11.2 创建对象的三种方式
- 11.3 for...in遍历对象属性
- 12. 内置对象
-
- 12.1 Math对象
- 12.2 Date()日期对象
- 12.3 数组对象
- 12.4 字符串对象
- 13.获取url中参数
1.初识JavaScript
1.1 JavaScript历史
- 布兰登艾奇(Brendan Eich，1961年)
- 神奇的大哥在1995年利用10天完成JavaScript设计
- 网景公司最初命名为LiveScript，后来在与Sun合作之后将其改名为JavaScript
1.2 JavaScript是什么
- JavaScript是世界上最流行的语言之一，是一种运行在客户端的
脚本语言 - 脚本语言：不需要编译，运行过程中由js解释器(js引擎)逐行来进行解释并执行
- 现在也可以基于Node.js技术进行服务器端编程
1.3 JavaScript的作用
- 表单动态校验(密码强度检测)（js产生的最初目的）
- 网页特效
- 服务器端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
1.4 HTML/CSS/JS的关系
HTML/CSS标记语言–描述类语言
- HTML决定网页结构和内容(决定看到什么)，相当于人的身体
- CSS决定网页呈现给用户的模样(决定好不好看)，相当于给人穿衣服化妆
JS脚本语言–编程类语言
- 实现业务逻辑和页面控制(决定功能)，相当于人的各种动作
1.4 浏览器执行JS简介
**浏览器分成两部分：渲染引擎和JS引擎
- 渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
- JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8
- 浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码，JS引擎执行代码时逐行解释每一句源码(转换为机器语言)，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行
1.5 JS的组成
- ECMAScript
ECMAScrip是由ECMA国际进行标准化的一门编程语言，这种语言在万维网上应用广泛，他往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展。ECMAScrip规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。 - DOM——文档对象模型
文档对象模型(Document ObjectModel，简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等) - BOM——浏览器对象模型
BOM(Browser ObjectModel，简称BOM)是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
1.6 JS初体验
JS有三种书写位置：行内、内嵌和外部
<!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">
<title>Document</title>
<!--2.内嵌式JS-->
<script>
// alert("沙漠骆驼")
</script>
<!--3.外部js，script双标签-->
<script src="my.js"></script>
</head>
<body>
<!--1.行内式的JS,直接写到元素的内部-->
<!-- <input type="button" value="唐伯虎" onclick="alert('秋香姐')"> -->
</body>
</html>
- 行内式JS
- 可以将单行少量JS代码写在HTML标签的事件属性中(以on开头的属性)，如onclick
- 注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
- 可读性差，在html中编写JS大量代码时，不方便阅读
- 引号易错，引号多层嵌套匹配时，非常容易弄混
- 特殊情况下使用
- 内嵌JS
<script>
alert("沙漠骆驼")
</script>
- 可以将多行JS代码写到script标签中
- 内嵌JS是学习时常用的方式
- 外部JS文件
<script src="my.js"></script>
- 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
- 引用外部JS文件的script标签中间不可以写代码
- 适合于代码量比较大的情况
2.JavaScript注释
- 单行注释：
//，快捷键：ctrl+/ - 多行注释：
/* */,默认快捷键：Shift+Alt+A；vScode可以修改快捷键
3.JavaScript输入输出语句
为了方便新的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：
| 方法 | 说明 | 归属 |
|---|---|---|
| alert(msg) | 浏览器弹出警示框 | 浏览器 |
| console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
| prompt(info) | 浏览器弹出输入框，用户可以输入 | 浏览器 |
4.变量
4.1 变量概述
4.1.1 什么是变量
- 白话：变量就是一个装东西的盒子
- 通俗：变量是用于存放数据的
容器，我们通过变量名获取数据，甚至数据可以修改
4.1.2 变量在内存中的存储
- 本质：变量是程序在内存中申请的一块用来存放数据的空间
4.2 变量的使用
变量在使用时分为两步：1.声明变量；2.赋值
4.2.1 声明变量
var age; //声明一个名称为age的变量
var是一个JS关键字，用来声明变量(variable变量的意思)，使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管- age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间
4.2.2 赋值
age = 10; //给age这个变量赋值为10
=用来把右边的值赋给左边的变量空间中，此处代表赋值的意思- 变量值是程序员保存到变量空间里的值
4.2.3 变量的初始化
var age = 18; //声明变量同时赋值为18
声明一个变量并赋值，称之为变量的初始化
4.3 变量的语法扩展
4.3.1 更新变量
- 一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准
var age = 18;
age = 81; //最后的结果就是81因为18被覆盖掉了
4.3.2 声明多个变量
var age = 18,
address = ‘火影村’,
gz = 2000;
4.3.3 声明变量特殊情况
| 情况 | 说明 | 结果 |
|---|---|---|
| var age;console.log(age); | 只声明，不赋值 | undefined |
| console.log(age) | 不声明不复制，直接使用 | 报错 |
| age = 10;console.log(age); | 不声明，只赋值 | 10 |
4.4 变量命名规范
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号($)组成，如：userAge、num01、name
严格区分大小写，var app;和var App;是两个变量不能以数字开头，18age是错误的不能是关键字、保留字，例如：var、for、while- 变量名必须有意义，MMD BBD nl -> age
- 遵守驼峰命名法。首字母小写，后面单词的首字母需大写，myFirstName
- 推荐翻译网站：有道、爱词霸
5.数据类型
5.1 数据类型简介
5.1.1 为什么需要数据类型
- 在计算机中，不同的数据所占的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型
- 简单来说，数据类型就是数据的类别型号，比如姓名“张三”，年龄18，这些数据的类型是不一样的
5.1.2 变量的数据类型
- 变量是用来存储值的所在处，他们有名字和数据类型，变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种
弱类型或者说动态语言
var age = 10; //这是一个数字型
var areYouOK = ‘是的’; //这是一个字符串
- 在代码运行时，变量的数据类型是由JS引擎
根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型 - JavaScript拥有动态类型，同时也意味着相同的变量可以用作不同的类型；
var x = 6; //x为数字型
var x = ‘Bill’; //x为字符串型
5.1.3 数据类型的分类
- 简单数据类型(Number,string,Boolean,Undefined,null)
- 简单数据类型是存放在栈里面，里面直接开辟一个内存空间存放的是值
- 复杂数据类型(object、Array、Date)
- 复杂数据类型，首先在栈里面存放地址，十六进制表示，然后这个地址指向堆里面的数据
5.2 简单数据类型
| 简单数据类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字型，包含整型值和浮动型值，如21，0.21 | 0 |
| Boolean | 布尔值类型，如true、false，等价于0和1 | false |
| String | 字符串类型，如“张三”，注意咱们js里面。字符串都带引号 | “” |
| Undefined | var a;声明了变量a但是没有给值，此时a=undefined | undefined |
| Null | var a = null;声明了变量a为空值 | null |
5.2.1 数字型Number
- 数字前面加
0表示八进制 - 数字前面加
0x表示十六进制
数字范围
- 最大值：
数字.MAX_VALUE - 最小值：
数字.MIN_VALUE
数字型三个特殊值
- Infinity，代表无穷大，大于任何数值
- -Infinity，代表无穷小，小于任何数值
- NaN，Not a number，代表一个非数值
isNaN()
- 用来判断一个变量是否为非数字类型，返回true或者false
- isNaN(x)：x是数字返回false，不是数字返回true
5.2.2 字符串型
- 字符串型可以是引号中的任意文本，其语法为
双引号和单引号 - 推荐使用单引号，因为HTML中的标签是双引号
- 字符串引号嵌套：JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(
外双内单，外单内双) - 字符串转义符
类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符
转义符都是\开头的，常用的转义符如下：
| 转义符 | 解释说明 |
|---|---|
| \n | 换行符，n是newline的意思 |
| \ | 斜杠\ |
| ’ | '单引号 |
| " | "双引号 |
| \b | 空格，b是blank的意思 |
| \t | tab缩进 |
- 字符串长度
字符串都是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度
var str = 'my name is Amy';
console.log(str.length); //14
- 字符串拼接
多个字符串之间可以使用+进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
console.log('沙漠'+'骆驼');//沙漠骆驼
console.log('Amy'+18); //Amy18
console.log('Amy'+true); //Amytrue
console.log(12+12); //24
console.log('12'+12); //1212
数值相加，字符相连
- 交互编程的三个基本要素
用户输入->程序内部处理->输出结果
弹出一个输入框(prompt),让用户输入
把用户输入的值用变量保存起来(程序内部处理)
使用alert语句弹出警示框(输出结果)
案例：显示年龄
<script>
// 弹出一个输入框(prompt),让用户输入
// 把用户输入的值用变量保存起来(程序内部处理)
// 使用alert语句弹出警示框(输出结果)
var age = prompt('请输入你的年龄：');
var str = '您今年已经' + age + '岁了';
alert(str);
</script>
5.2.3 布尔型Boolean
- 布尔类型有两个值：true和false，其中true表示真(对),false表示假(错)
var flag = true;
var flag1 = false;
console.log(flag+1); //2
console.log(flag1 + 1); //1
5.2.4 undefined和Null
- 一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时，注意结果）
//声明未赋值：undefined
var str;
console.log(str); //undefined
//undefined
var variable = undefined;
console.log(variable + 'Amy'); //undefinedAmy
console.log(variable + 1); //NaN，非数字
//null空值
var x = null;
console.log(x + 'Amy'); //nullAmy
console.log(x + 1); //1
- 一个声明变量给null值，里面存的值为空
5.3 获取变量数据类型
5.3.1 获取检测变量的数据类型
typeof可以用来检测变量的数据类型
<script>
var num = 10;
console.log(typeof num); //number
var str = 'Amy';
console.log(typeof str); //string
var flag = true;
console.log(typeof flag); //boolean
var vari = undefined;
console.log(typeof vari); //undefined
var timer = null;
console.log(typeof timer); //object
//prompt取过来的值是字符型的
var age = prompt('请输入您的年龄：');
console.log(age);
console.log(typeof age);
</script>
5.3.2 字面量
- 字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值
- 数字字面量：8，9，10
- 字符串字面量：‘黑马程序员’
- 布尔字面量：true，false
5.4 数据类型转换
5.4.1 什么是数据类型转换
- 使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另一种数据类型
- 通常会实现三种数据类型的转换：
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
5.4.2 转换为字符串
| 方式 | 说明 | 案例 |
|---|---|---|
| toString() | 转成字符串 | var num = 1;alert(num.toString()); |
| String()强制转换 | 转成字符串 | var num = 1;alert(String(num)); |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1;alert(num+“我是字符串”); |
5.4.3 转换为数字型(重点)
| 方式 | 说明 | 案例 |
|---|---|---|
| parseInt(string)函数 | 将string类型转换成整数数值型 | parseInt(‘78’) |
| parseFloat(string)函数 | 将string类型转换成浮点数值型 | parseInt(‘78.21’) |
| Number()强制转换函数 | 将string类型转换成数值型 | Number(“12”) |
| js隐式转换(- * /) | 利用算术运算隐式转换为数值型 | ‘12’ - 0 |
<script>
// var age = prompt("请输入年龄：");
//1.parseInt(变量) 可以把字符型转换为数字型，得到的是整数
// console.log(parseInt(age));
console.log(parseInt('3.14')); //3
console.log(parseInt('120px')); //120会去掉单位
console.log(parseInt('rem120px')); //NaN
//2.parseFloat(变量) 可以把字符型转换为数字型，得到的是小数，浮点数
console.log(parseFloat('3.14')); //3.14
console.log(parseFloat('120px')); //120会去掉单位
console.log(parseFloat('rem120px')); //NaN
//3.利用Number(变量)
var str = '123';
console.log(Number(str)); //123
console.log(Number('12')); //12
//4.利用算术运算 - * /隐式转换
console.log('12' - 0); //数字型12
console.log('123' - '120'); //数字型3
</script>
5.4.4 转换为布尔型
| 方式 | 说明 | 案例 |
|---|---|---|
| Boolean()函数 | 其他类型转成布尔值 | Boolean(‘true’); |
- 代表空、否定的值会被转为false，如’'、NaN、undefined
- 其余值都会被转成true
<script>
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(null); //false
console.log(undefined); //false
console.log('---------------------------------------');
console.log(Boolean('123')); //true
console.log(Boolean('你好吗'));//true
console.log(Boolean('我很好'));//true
</script>
6.运算符
6.1 运算符
- 运算符(operator)也被称作操作符，是用于实现赋值，比较和执行算术运算符等功能的符号
- JavaScript中常用的运算符有：
- 算术运算符
- 递增和递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
6.2 算术运算符
6.2.1 算术运算符概述
- 概念：算术运算符使用的符号用来执行两个变量或值的算术运算
| 运算符 | 描述 | 实例 |
|---|---|---|
| + | 加 | 10+10=20 |
| - | 减 | 10-20=-10 |
| * | 乘 | 10*20=200 |
| \ | 除 | 10/20=0.5 |
| % | 取余数 | 返回除法的余数9%2=1 |
6.2.2浮点数的精度问题
- 浮点数的最高精度是17位小数，但在进行算数计算时其精确度远远不如整数
var result = 0.1 + 0.2; //结果不是0.3，而是0.300000000000004
console.log(0.07 + 100); //结果不是7，而是：7.000000000000001
所以：不要直接判断两个浮点数是否相等
6.2.3表达式和返回值
- 表达式：是由数字、运算符、变量等组成的式子，我们称为表达式
- 返回值：最后得出的结果为返回值
6.3 递增和递减运算符
6.3.1递增和递减运算符概述
- 如果需要反复给数字变量添加或减去1，可以使用递增(++)和递减(–)运算符来完成
- 在JavaScript中，递增(++)和递减(–)既可以放在变量前面(前置递增/减)，也可以放在变量后面(后置递增/减)
- 递增和递减运算符必须和变量配合使用
- 前置递增：
++num，就是自加1，类似于num=num+1；先自加1，再返回值 - 后置递增：
num++，就是自加1，类似于num=num+1;先返回原值，后自加1
<script>
var a = 10;
++a; //11
var b = ++a + 2; //a = 12 ++a = 12
console.log(b); //14
var c = 10;
c++; //c++ = 11,c=11
var d = c++ + 2; //c++ = 11，c=12
console.log(d); //13
var e = 10;
var f = e++ + ++e; // 1.e++ = 10 e = 11 2.e=12 ++e=12
console.log(f); //22
</script>
小结：
- 前置递增和后置递增运算符可以简化代码的编写，让变量的值+1，比以前写法更简单
- 单独使用时，运行结果相同
- 与其他代码联用时，执行结果会不同
- 后置：先原值运算，后自加(先人后己)
- 前置：先自加，后运算(先己后人)
- 开发时，大多使用后置递增/减，并且代码独占一行，例如：num++;或者num–
6.4 比较运算符
6.4.1 比较运算符概述
- 概念：比较运算符(关系运算符)是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值作为比较运算的结果
| 运算符名称 | 说明 | 案例 | 结果 |
|---|---|---|---|
| < | 小于号 | 1<2 | true |
| > | 大于号 | 1>2 | false |
| >= | 大于等于 | 2>=2 | true |
| <= | 小于等于 | 3<=2 | false |
| == | 判等号(会转型) | 37==37 | true |
| != | 不等号 | 37!=37 | false |
| === !== | 全等 要求值和数据类型一致 | 37===‘37’ | false |
| 符号 | 作用 | 用法 |
|---|---|---|
| = | 赋值 | 把右边给左边 |
| == | 判断 | 判断两边值是否相等 |
| === | 全等 | 判断两边的值和数据类型是否完全相同 |
6.5 逻辑运算符
- 概念：逻辑运算符是用来进行布尔值运算符的运算符，其返回值也是布尔值，后面开发中经常用于多个条件的判断
| 逻辑运算符 | 说明 | 案例 |
|---|---|---|
| && | “逻辑与”，简称“与” and | true&&false |
| || | “逻辑或”，简称“或” or | true || false |
| ! | “逻辑非”，简称“非” not | true |
- 逻辑与(&&、and)：两者都为true，结果才为true
- 逻辑或(||、or)：两者都为false，结果才为false
- 逻辑非(!)：用来取一个布尔值相反的值，true的相反值是false
6.5.1 短路运算(逻辑中断)
-
短路运算的原理：当有多个表达式(值)时，左边的表达式可以确定结果时，就不再继续运算右边的表达式的值
-
逻辑与：
- 语法：表达式1 && 表达式2
- 如果第一个表达式的值为真，则返回表达式2
- 如果第一个表达式的值为假，则返回表达式1
-
逻辑或：
- 语法：表达式1 || 表达式2
- 如果第一个表达式的值为真，则返回表达式1
- 如果第一个表达式的值为假，则返回表达式2
//逻辑或短路运算：如果表达式1结果为真，则返回的是表达式1；如果表达式1结果为假，则返回的是表达式2
console.log(123 || 456); //123
console.log(0 || 456); //456
console.log(123 || 456 || 789); //123
6.6 赋值运算符
- 概念：用来把数据赋值给变量的运算符
| 赋值运算符 | 说明 | 案例 |
|---|---|---|
| = | 直接赋值 | var usrName=‘我是值’; |
| +=、-= | 加、减一个数后再赋值 | var age = 10;age += 5; // 15 |
| *=、/=、%= | 乘、除、取模后再赋值 | var age = 2;age *= 5;// 10 |
6.7 运算符优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ – ! |
| 3 | 算术运算符 | 先* / %，后+ - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&& 后|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
7.流程控制-分支
7.1 流程控制
- 在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的，很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能
- 流程控制有三种结构：顺序结构、分支结构和循环结构。这三种结构代表三种代码执行的顺序
7.2 顺序流程控制
- 顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行
7.3 分支流程控制if语句
-
由上到下执行代码的过程中，根据不同的条件，执行不同路径的代码(执行代码多选一的过程)，从而得到不同的结果
-
if语句：
- 语法结构：
//条件成立执行代码，否则什么也不做
if (条件表达式) {
//条件成立的执行的代码语句
}
- 语法结构：
-
语句可以理解为一个行为，循环语句和分支语句就是典型的语句，一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句
-
if else语句（双分支语句)：
if (条件表达式) {
//执行语句1
} else {
//执行语句2
} -
if else if语句（多分支语句）：
if(条件表达式1){
//语句1;
}else if(条件表达式2){
//语句2
}else if(条件表达式3){
//语句3
}else{
//语句4
}
7.4 三元表达式
- 由三元运算符组成的式子称为三元表达式
- 语法结构：
条件表达式 ? 表达式1 : 表达式2- 如果条件表达式为真，则返回表达式1的值；否则返回表达式2的值
var time = prompt('请输入一个0-59的数字');
var result = time < 10 ? '0' + time :time;
alert(result);
7.5 分支流程控制switch语句
-
switch语句也是多分支语句，他用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用switch。
-
语法结构：
switch(表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
…
default:
执行最后的语句;
} -
执行思路：利用表达式的值与case后面的值相匹配，匹配上了就执行case里面的语句；如果都没有匹配上，就执行default里面的语句
-
注意事项：
1.开发里表达式的值通常写变量
2.num的值和case里面的值匹配的时候是全等：必须是值和数据类型一样才行
3.如果case里面没有写break，就不会退出switch，是继续执行下一个case
- switch语句和if else if的区别
- 一般情况下，两者可以相互替换
- switch。。。case通常处理case为比较确定值的情况，而if。。。else。。。语句更加灵活，常用于范围判断
- switch语句进行条件判断后直接执行到程序的条件语句，效率较高，而if。。。else语句有几种条件，就得判断多少次
- 当分支比较少时，if。。。else语句的执行效率比switch高
8.流程控制-循环
8.1 循环
在js中，主要有三种类型的循环语句：
- for循环
- while循环
- do。。。while循环
8.2 for循环
在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件，由循环体及循环的终止条件组成的语句，被称之为循环语句
- 语法结构：
for (初始化变量;条件表达式;操作表达式) {
//循环体
}
- 初始化变量 就是用var声明的一个普通变量，通常用于作为计数器使用
- 条件表达式 就是用来决定每一次循环是否继续执行 就是种植的条件
- 操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新
- for循环执行过程：
for (var i=1; i <= 100; i++){
console.log(‘你好’);//循环体
}
//1.首先执行里面的计数器变量 var i=1.此句整个过程只执行一次
//2.去i<=100来判断是否满足条件，如果满足条件就去执行循环体 不满足条件退出循环
//3.最后去执行i++ i++是单独写的代码 递增 第一轮结束
//4.接着去执行i<=100 如果满足条件 就去执行循环体
断点调试
- 断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
断点调试可以帮我们观察程序的运行过程
- 浏览器中按F12–>sources–>找到需要调试的文件–>在程序的某一行设置断点
- watch：监视，通过watch可以监视变量值的变化，非常常用
- F11：程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化
- 代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力
案例：1-100的累加和
<!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">
<title>Document</title>
<script>
var sum = 0;
for(var i = 1 ; i <= 100 ; i++){
sum = sum + i;
}
console.log(sum);
</script>
</head>
<body>
</body>
</html>
<!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">
<title>Document</title>
<script>
//1.求1-100之间所有数的平均值
var sum = 0;
var average = 0;
for(var i = 1 ; i <= 100 ; i++){
sum += i;
}
average = sum / 100;
console.log(average);
//2.求1-100之间所有偶数和奇数的和
var even = 0;
var odd = 0;
for(var i =1; i <= 100; i++){
if(i % 2 == 0){
even = even + i;
}else{
odd = odd + i;
}
}
console.log('偶数和：'+even);
console.log('奇数和：'+odd);
//3.求1-100之间所有能被3整数的数字的和
var s = 0;
for(var i = 1; i <= 100 ; i++){
if(i % 3 == 0){
s = s + i;
}
}
console.log(s);
</script>
</head>
<body>
</body>
</html>
输入输出学生成绩案例
<!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">
<title>Document</title>
<script>
var num = prompt('请输入班级总人数：');
var sum = 0;//求和变量
var average = 0; //求平均值的变量
for(var i = 1; i <= num; i++){
var score = prompt('请输入第' + i + '个同学的成绩：');
sum = sum + parseFloat(score);//prompt取过来的数据是字符串的，需要转换成数字型
}
average = sum / num;
alert('班级总成绩是' + sum);
alert('班级平均成绩是' + average);
</script>
</head>
<body>
</body>
</html>
8.3 双重for循环
- 很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个5行5列的图形，打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。
- 循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以在嵌套一个for循环，这样的for循环语句我们称之为双重for循环。
- 语法结构：
for(外层的初始化变量;外层的条件表达式;外层的操作表达式) {
for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
//执行语句
}
}
外层循环执行一次，里层循环要执行全部
//外层循环执行一次，里层循环要执行全部
for (var i = 1; i <= 3; i++){
console.log('这是外层循环第' + i + '次');
for (var j = 1; j <= 3; j++){
console.log('这是里层循环第' + j + '次');
}
}
执行结果：
案例1：打印n行n列的星星
//打印n行n列的星星
var rows = prompt('请您输入行数：');
var cols = prompt('请您输入列数：');
var str = '';
for(var i = 1; i <= rows; i++){
for(var j = 1; j <= cols; j++){
str = str + '*';
}
str = str + '\n';
}
console.log(str);
案例2：打印倒直角三角形
<script>
var str = '';
for(var i = 1; i <= 10;i++){ //外层循环控制行数
for(var j = i; j <= 10; j++){ //里层循环打印的个数不一样
str = str + '*';
}
str = str + '\n';
}
console.log(str);
</script>
执行结果：
案例3：打印正直角三角形
<script>
var str = '';
for(var i = 1; i <= 10; i++){ //控制行数
for(var j = 1; j <= i; j++){ //控制列数
str = str + '*';
}
str = str +'\n';
}
console.log(str);
</script>
执行结果：
案例4：九九乘法表
<script>
var str = '';
for(var i = 1; i <= 9; i++){
for(var j = 1; j <= i; j++){
//1 X 2 = 2
str += j + 'x' + i + '=' + i*j + '\t';
}
str = str + '\n';
}
console.log(str);
</script>
执行结果：
8.4 while循环
//1.while循环语法结构
while(条件表达式){
//循环体
}
//2.执行思路 当条件表达式结果为true，则h执行循环体 ，否则退出循环
//3.里面也有计数器，初始化变量
//4.里面也有操作表达式，完成计数器的更新，防止死循环
8.5 do while循环
- do while其实是while语句的应该变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。
do {
//循环体
} while(条件表达式)
- 执行思路：跟while不同的是：do while先执行一次循环体，再执行判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环
8.6 continue break
8.6.1 continue关键字
- continue关键字用于立即跳出本次循环，继续下一次循环(本次循环中continue之后的代码就会少执行一次)
8.6.2 break关键字
- break关键字用于立即跳出整个循环(循环结束)
9.数组
9.1 数组的概念
- 数组就是一组数据的集合，其中每个数据被称为元素，在数组中可以存放任意类型的元素，数组(Array)是一种将一种数据存储在单个变量名下的优雅方式
9.2 创建数组
- 数组的创建方式：
- JS中创建数组有两种方式：利用new创建数组；利用数组字面量创建数组
- 利用new创建数组
var 数组名 = new Array();
var arr = new Array();//创建一个新的空数组
- 利用数组字面量创建数组：数组元素用逗号分隔
var arr = [];//创建了一个空数组
var arr1 = [1,2,‘Amy’];//数组的初始化
9.3获取数组元素
- 数组的索引
- 索引(下标)：用来访问数组元素的序号(
数组下标从0开始)
- 索引(下标)：用来访问数组元素的序号(
格式：数组名[索引]
9.4 遍历数组
- 遍历：就是数组中的每个元素从头到尾都访问一次
var arr = ['red','green','blue'];
for (var i = 0; i < 3; i++){
console.log(arr[i]);
}
//1.因为数组索引号从0开始，所以i必须从0开始 i<3
//2.输出的时候arr[i]，i当索引号来使用
- 数组的长度
使用
数组名.length可以访问数组元素的数量(数组长度)
数组的长度是元素个数，不要跟索引号混淆
arr.length动态检测数组元素个数
9.5 数组中新增元素
- 通过修改length长度新增数组元素
- 可以通过新增length长度来实现数组扩容的目的
- length长度是可读写的
var arr = ['red','green','blue','Amy'];
console.log(arr.length);
arr.length = 5; //把数组长度改为了5，空值为undefined
console.log(arr);
其中索引号是5的空间没有给值，就是声明变量未给值，默认值就是undefined
- 通过修改数组索引新增数组元素
var arr = [‘red’,‘green’,‘blue’,‘Amy’];
console.log(arr.length);
arr[4] = ‘pink’;//追加数组元素
arr[0] = ‘yellow’;//替换原来的数组元素
arr = ‘有点意思’;//不要随便给数组名赋值，不然数组元素都会消失
console.log(arr);
- 案例1：筛选数组，存到新数组里面去
//方法1：
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
var j = 0;
for(var i = 0; i < arr.length; i++){ //筛选出大于10的元素
if (arr[i] > 10){
//新数组应该从0开始存
newArr[j] = arr[i];
j++;
}
}
console.log(newArr);
//方法2：
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
//刚开始newArr.length的长度就是0
for(var i = 0; i < arr.length; i++){ //筛选出大于10的元素
if (arr[i] > 10){
//新数组索引号应该从0开始 依次递增
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
</script>
- 案例2：颠倒数组元素
<script>
//颠倒数组元素顺序
var arr = ['red','green','blue','white','black'];
var newArr = [];
for(var i = arr.length - 1; i >= 0; i--){
newArr[newArr.length] = arr[i];
}
console.log(newArr);
</script>
- 案例3：数组排序，冒泡排序
<script>
var arr = [5, 4, 3, 2, 1];
for(var i = 0; i < arr.length - 1; i++){ //外层循环管趟数
for(var j = 0; j <= arr.length - i - 1; j++){ //里层循环管每一趟交换次数
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
console.log(arr);
</script>
10.函数
10.1 函数的概念
- 在js里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用js中的函数。
- 函数：就是封装了一段可被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用
10.2 函数的使用
- 声明函数:
- 关键字：
function
- 关键字：
function 函数名(){
//函数体
}
- 调用函数：函数不调用，自己不会执行
//调用函数
函数名()；//调用的时候不要忘记添加小括号
- 函数的封装：是把一个或者多个功能通过函数的方式封装起来，对外只提供应该简单的函数接口。
10.3 带参数的函数
function 函数名(形参1,形参2…){ //在声明函数的小括号里面是
形参
}
函数名(实参1,实参2…); //在函数调用的小括号里面是
实参
- 形参是接受实参的，形参类似于一个变量
- 函数的参数可以有，也可以没有，个数不限
| 参数 | 说明 |
|---|---|
| 形参 | 形式上的参数，函数定义的时候传递的参数，当前并不知道是什么 |
| 实参 | 实际上的参数，函数调用的时候传递的参数，实参是传递给形参的 |
参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去
function getSum(num1,num2) {
console.log(num1 + num2);
}
getSum(1,3);
function getSums(start,end){
var sum = 0;
for (var i = start; i <= end; i++){
sum += i;
}
console.log(sum);
}
getSums(1,100);
//1.多个参数之间用逗号隔开
//2.形参可以看作是不同声明的变量
函数形参和实参个数不匹配问题
| 参数个数 | 说明 |
|---|---|
| 实参个数等于形参个数 | 输出正确结果 |
| 实参个数多余形参个数 | 只取到形参的个数 |
| 实参个数小于形参个数 | 多的形参定义为undefined，结果为NaN |
<script>
function getSum(num1,num2) {
console.log(num1+num2);
}
//1.如果实参和实参个数一致，则正常输出结果
getSum(1,2);
//2.如果实参个数多余形参个数，会取到形参的个数
getSum(1,2,3);
//3.如果实参个数小于实参个数 多余的形参定义为undefined 最终的结果就是NaN
//形参可以看作是不用声明的变量 num2是一个变量但是没有接受值，结果就是undefined
getSum(1);//NaN
</script>
10.4 函数的返回值
- return语句：有的时候我们希望将值返回给调用者
- 格式：
function 函数名() {
// return 需要返回的结果;
}
（1）我们函数只是实现某种功能，最终结果需要返回给函数的调用者函数名(），通过return实现的
（2）只要函数遇到return就把后面的结果返回给函数的调用者 函数名() = return 后面的结果
- 注意事项
- return终止函数：return后面的语句不会被执行，所以一般return后面没有语句
- return只能返回一个值
- 函数没有return，则返回undefined
- break，continue，return的区别：
break：结束当前的循环体(如for、while)
continue：跳出本次循环，继续执行下次循环(如for、while)
return：不仅可以退出循环，还能够返回return语句中的值，同时还可以结束当前的函数体内的代码
10.5 arguments的使用
- 当我们不确定有多少个参数传递的时候，可以用
arguments来获取，在JavaScript中，arguments实际上它是当前函数的一个内置对象所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。 - arguments展示形式是一个伪数组(并不是真正意义上的数组)，因此可以进行遍历，伪数组具有以下特点：
- 具有length属性
- 按索引方式存储数据
- 不具有数组的push，pop等方法
判断2月的天数案例
<script>
function backDay(year) {
var year = prompt('请输入年份：');
if(isRunYear(year)){
alert('闰年：二月29天');
}else{
alert('平年：二月28天');
}
}
backDay();
function isRunYear(year) {
var flag = false;
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
flag = true;
}
return flag;
}
</script>
10.6 函数的两种声明方式
- 关键字自定义函数(命名函数)：function 函数名() {}
- 函数表达式(匿名函数)：var 变量名 = function() {}
10.7 作用域
- 概述：通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域，作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突
- js的作用域(es6)之前：全局作用域 局部作用域
- 全局作用域：整个script标签或者是一个单独的js文件
- 局部作用域：在函数内部就是局部作用域，这个代码的名字只在函数内部起作用和效果
- 变量作用域：
- 全局变量：在全局作用域下的变量，在全局下都可以使用。只有在浏览器关闭时才会被销毁，因此比较占内存
- 局部变量：在局部作用域下的变量，在函数内部的变量就是局部变量。函数的形参也可以看作是局部变量。当其所在代码块被执行时会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间
- 作用域链
- 只要是代码，就至少有一个作用域
- 写在函数内部的局部作用域如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
- 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
10.8 预解析
- JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行
- 预解析：js引擎会把js里面所有的var还有function提升到当前作用域的最前面
- 代码执行：按照代码书写的顺序从上往下执行
- 预解析分为：变量预解析(变量提升)和函数预解析(函数提升)
- 变量提升：就是把所有的变量声明提升到当前的作用域最前面，不提升赋值操作
- 函数提升：就是把所有的函数声明提升到当前作用域的最前面，不调用函数
var a=b=c=9;//相当于var a=9;b=9;c=9;b和c直接赋值，没有var声明，当全局变量
11 对象
11.1 对象
- 什么是对象：现时生活中，万物皆对象，对象是一个具体的实物，例如一本书、一辆汽车、一个人可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。
- 在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
- 对象是由属性和方法组成的。
- 属性：事物的特征，在对象中用属性来表示(常用名词)
- 方法：事物的行为，在对象常用方法来表示(常用动词)
- 为什么需要对象：JS中的对象表达结构更清晰，更强大
11.2 创建对象的三种方式
在JavaScript中，可以使用三种方式创建对象(object)
- 利用字面量创建对象
- 利用new Object创建对象
- 利用构造函数创建对象
- 利用字面量创建对象
就是花括号{}里面包含了表达这个具体事务的属性和方法
//利用字面量创建对象
var obj = {
uname:‘张三丰’,
age:18,
sex:‘男’,
sayHi:function(){
console.log(‘hi~’);
}
}
1.里面的属性或者方法我们采取键值对的形式 键 属性名：值 属性值
2.多个属性或方法用逗号隔开
3.方法冒号后面跟的是一个匿名函数
使用对象：
1.调用对象的属性：对象名.属性名：obj.uname
2.另一种调用方法：对象名['属性名']
3.调用对象的方法：对象名.方法名
- 变量、属性、函数、方法的区别：
- 变量：单独声明并赋值，单独存在
- 属性：对象里面的变称为属性，用来描述该对象的特征，使用的时候必须是：对象.属性
- 函数：单独存在的，通过"函数名()"的方式就可以调用
- 方法：对象里面的函数称为方法，方法不需要声明，使用对象.方法名的方式就可以调用，方法用来描述该对象的行为和功能。
- 利用new Object()创建对象
//利用new Object创建对象
var obj = new Object();//创建了一个空对象
obj.uname = ‘张三丰’;
obj.age = 18;
obj.sex = ‘男’;
obj.sayHi = function(){
console.log(‘hi~’);
}
- 利用构造函数创建对象
- 构造函数：就是把我们的对象里面一些相同的属性和方法抽象出来封装到函数里面
构造函数语法格式：
function 构造函数名() {
this.属性 = 值;
this.方法 = function() {}
}
new 构造函数名
1.构造函数名字的首字母要大写
2.构造函数不需要return就可以返回结果
3.调用构造函数必须使用new，new一个构造函数，就创建了一个对象
function Star(uname,age,sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang){
console.log(sang);
}
}
var ldh = new Star('刘德华',18,'男'); //调用函数返回的是一个对象
// console.log(typeof ldh);
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');
var zxy = new Star('张学友',19,'男');
console.log(zxy.name);
console.log(zxy.sex);
11.3 for…in遍历对象属性
- 遍历格式：
for (var 变量名 in 对象名) {
console.log(k);//k 变量，输出得到的是属性名
console.log(obj[k]);//obj[k]输出的是属性值
12. 内置对象
- JavaScript中的对象分为三种：自定义对象、内置对象、浏览器对象
- 前面两种对象是JS基础内容，属于ECMAScript；第三个浏览器对象属于我们JS独有的，我们JSAPI讲解
- 内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能(属性和方法)
- JavaScript提供了多个内置对象：Math、Date、Array、String等
12.1 Math对象
- Math数学对象，不是一个构造函数，所以我们不需要new来调用，直接使用里面的属性和方法
- 方法：
console.log(Math.PI);//一个圆周率
console.log(Math.max(1,99)); //99
console.log(Math.min(2,-1)); //-1
console.log(Math.max(-1,0,‘Amy’));//NaN
console.log(Math.max()); //-Infinity
Math.floor(1.2);//向下取整，1
Math.ceil(1.2);//向上取整，2
Math.abs(-1));//取绝对值，1
四舍五入：
Math.round(1.1); //1
Math.round(1.5); //2
Math.round(-1.1); //-1
Math.round(-1.5); //-1
随机数random()方法
- Math对象随机数方法：random()返回一个随机的小数，0 <= x <1
- 这个方法里面不跟参数
- 想要得到两个数之间的随机数，且包括这两个数，公式如下：
- Math.floor(Math.random * (max - min + 1)) + min;
- 案例：猜数字游戏
<script>
function getRandom(min,max){
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1,10);
while(true) { //死循环
var num = prompt('你来猜？输入1~10之间的一个数字');
if(num > random){
alert('你猜大了');
}else if(num < random){
alert('你猜小了');
}else{
alert('猜对了！');
break;//退出整个循环，结束程序
}
}
</script>
12.2 Date()日期对象
- Date()日期对象，是一个构造函数，必须使用new，来调用创建我们的日期对象
var arr = new Array();//创建一个数组对象
var obj = new Object();//创建了一个对象实例
//1，使用Date
var date = new Date();
console.log(date);
//2.参数常用的写法；数字型 2019, 10, 01 或者字符串型'2019-10-1 8:8:8'
var date1 = new Date('2019-10-1 8:8:8');
console.log(date1);
console.log(date.getFullYear());
console.log(date.getMonth()+1);
console.log(date.getDay());
var year = date.getFullYear();
var month = date.getMonth()+1;
var dates = date.getDate();
console.log('今天是'+year+'年'+month+'月'+dates+'日');
//要求封装一个函数返回当前的时分秒：结构为：08：08：08
function getTime(){
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s ;
}
console.log(getTime());
- 获得Date总的毫秒数，不是当时时间的毫秒数，而是距离1970年1月1日总的毫秒数
//1.通过valueOf() getTime()
var date2 = new Date();
console.log(date2.valueOf());//距离1970年1月1日总的毫秒数
console.log(date2.getTime());
//2.简单的写法
var date3 = +new Date();
console.log(date3);
//3.H5新增的 获得总的毫秒数
console.log(Date.now());
- 案例：倒计时案例
- 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减
用时间戳来做，用户输入时间总的毫秒数减去现在时间毫秒数，得到的就是剩余时间的毫秒数
把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为天时分秒)
转换公式如下：
d = parseInt(总秒数/60/60/24);//计算天数
h = parseInt(总秒数/60/60%24);//计算小时
m = parserInt(总秒数/60/%60);//计算分数
s = parserInt(总秒数%60);//计算当前秒数
- 核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时，但是不能拿着时分秒相减
代码如下：
function countDown(time) {
var nowTime = +new Date();//返回的是当前时间总的毫秒数
var inputTime = +new Date(time);//返回的是用户输出时间总的毫秒数
var time = (inputTime - nowTime) / 1000;//剩余时间总的毫秒数
var d = parseInt(time / 60 / 60 / 24);//天
var h = parseInt(time / 60 / 60 % 24);//时
var m = parseInt(time / 60 % 60);//分
var s = parseInt(time % 60);//秒
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-7-22 17:30:00'));
12.3 数组对象
-
创建数组的两种方式：
- 利用数组字面量：var arr = [1,2,3];
- 利用new Array():var arr = new Array();//创建了一个空数组
- var arr = new Array(2);//表示数组的长度为2，里面有两个空的数组元素
- var arr = new Array(2,3);//表示里面有两个数组元素，是2和3
-
检测是否为数组：
-
instanceof，运算符，可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);//返回true，表示是数组
console.log(obj instanceof Array);//返回为false表示不是数组 -
Array.isArray(参数):（H5新增的）
console.log(Array.isArray(arr));
-
-
添加删除数组元素的方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| push(参数1…) | 末尾添加一个或多个元素，注意修改原数组 | 并返回新的长度 |
| pop() | 删除数组最后一个元素，把数组长度减1，无参数没，修改原数组 | 返回他删除的元素的值 |
| unshift(参数1…) | 向数组的开头添加一个或更多的元素，注意修改原数组 | 并返回新的长度 |
| shift() | 删除数组的第一个元素，数组长度减1无参数，修改原数组 | 并返回第一个元素的值 |
push 是可以给数组追加新的元素（在数组末尾添加一个或多个）
push()参数直接写数组元素就可以了
push完毕之后，返回的结果是新数组的长度
原数组也会发生变化
unshift是可以给数组前面添加新的元素
unshift()参数直接写数组元素就可以了
unshift完毕之后，返回的结果是新数组的长度
原数组也会发生变化
pop()可以删除数组的最后一个元素一次只能删除一个
pop()没有参数
pop完毕之后，返回的结果是删除的那个元素
原数组也会发生变化
shift()可以删除数组的第一个元素，一次只能删除一个
shift()没有参数
shift完毕之后，返回的结果是删除的那个元素
原数组也会发生变化
- 数组排序
| 方法名 | 说明 | 是否修改原数组 |
|---|---|---|
| reverse() | 颠倒数组中元素的顺序，无参数 | 该方法会改变原来的数组，返回新数组 |
| sort() | 对数组的元素进行排序 | 该方法会改变原来的数组，返回新数组 |
//数组排序
var arr1 = [1, 55, 45, 7];
arr1.sort(function(a,b){
//return a - b;//升序的顺序排列
return b - a;//降序的顺序排列
});
console.log(arr1);
- 数组索引方法
| 方法名 | 说明 | 返回值 |
|---|---|---|
| indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号，如果不存在则返回-1 |
| lastIndexOf() | 在数组中的最后一个的索引 | 如果存在返回索引号，如果不存在则返回-1 |
var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));//只返回第一个满足条件的索引号2
console.log(arr.indexOf('yellow'));//找不到返回-1
console.log(arr.lastIndexOf('blue'));//从最后开始查找，找到返回索引号4
console.log(arr.lastIndexOf('yellow'));//找不到返回-1
- 案例：数组去重
目标：把就数组里面不重复的元素取出来放到新数组中，重复的元素只保留一个，放到新数组中去重
核心算法：我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加
我们怎么知道该元素没有存在？利用新数组indexOf(数组元素)，如果返回是-1就说明新数组里面没有该元素
function unique(arr){
var newArr = [];
for(var i = 0; i < arr.length; i++){
if (newArr.indexOf(arr[i]) === -1){
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = unique(['c','a','f','g','e','c','e']);
console.log(demo);
- 数组转换为字符串
| 方法名 | 说明 | 返回值 |
|---|---|---|
| toString() | 把数组转换成字符串，逗号分隔每一项 | 返回每一个字符串 |
| join(‘分隔符’） | 方法用于把数组中的所有元素转换为一个字符串 | 返回一个字符串 |
//1.toString()将数组转换为字符串
var arr = [1,2,3];
console.log(arr.toString());//1,2,3
//2.join(分隔符)
var arr1 = ['green','blue','pink'];
console.log(arr1.join());//green,blue,pink
console.log(arr1.join('-'));//green-blue-pink
12.4 字符串对象
- 基本包装类型：
- 为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String、Number、Boolean
- 基本包装类型就是把简单数据类型包装成为基本数据类型，这样基本数据类型就有了属性和方法
下面代码有什么问题？
var str= ‘andy’;
console.log(str.length);
按道理来讲基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为js会把基本数据类型包装为复杂数据类型，其执行过程如下：
var temp = new String(‘andy’);//把简单数据类型包装为复杂数据类型
str = temp;//把临时变量的值给str
temp = null;//销毁这个临时变量
-
字符串的不可变
- 指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间
- 因为字符串的不可变，所以不要大量的拼接字符串。
-
根据字符返回位置
- 字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串
方法名 说明 indexOf(‘要查找的字符’，开始的位置) 返回指定内容在原字符串中的位置，如果找不到就返回-1，开始的位置是index索引号 lastIndexOf() 从后往前找，只招第一个匹配的
案例：查找字符串中‘abcoefoxyozzopp’中所有o出现的位置以及次数
核心算法：先查找第一个o出现的位置
然后只要indexOf返回的结果不是-1就继续往后查找
因为indexOf只能查找到第一个，所以后面的查找，利用第二个参数，当前索引+1，从而继续查找
var str = 'abcoefoxyozzopp';
var index = str.indexOf('o');
var num = 0;
while(index !== -1){
console.log(index);
num++;
index = str.indexOf('o',index + 1);
}
console.log('o出现的次数：' + num);
- 根据位置返回字符
var str = 'andy';
console.log(str.charAt(3));//y
for(var i = 0; i < str.length; i++){
console.log(str.charAt(i));
}
console.log(str.charCodeAt(0));//97
| 方法名 | 说明 | 使用 |
|---|---|---|
| charAt(index) | 返回指定位置的字符(index字符串的索引号) | str.charAt(0) |
| charCodeAt(index) | 获取指定位置处字符的ASCII码(index索引号) | str.charCodeAt(0) |
| str[index] | 获取指定位置处字符 | HTML5，IE8+支持和charAt()等效 |
案例：统计出现最多的字符和次数，abcoefoxyozzopp
核心算法：利用charAt()，遍历这个字符串
把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就+1
遍历对象，得到最大值和该字符
var str = 'abcoefoxyozzopp';
var o = {};
for(var i = 0;i < str.length; i++){
var chars = str.charAt(i);//chars是字符串的每一个字符
if(o[chars]){//得到的是属性值
o[chars]++;
}else{
o[chars] = 1;
}
}
console.log(o);
//遍历对象
var max = 0;
var ch = '';
for(var k in o){
//k得到的是属性名
//o[k]得到的是属性值
if(o[k] > max){
max = o[k];
ch = k;
}
}
console.log(max);
console.log('最多的字符是：'+ch);
- 字符串操作方法
| 方法名 | 说明 |
|---|---|
| concat(str1,str2,str3…) | concat()方法用于连接两个或多个字符串，拼接字符串，等效于+，+更常用 |
| substr(start,length) | 从start位置开始(索引号),，length取得个数，重点记住这个 |
| slice(start,end) | 从start的位置开始，截取到end的位置，end取不到(他们俩都是索引号) |
| substring(start,end) | 从start的位置开始，截取到end位置，end取不到买几本和slice相同，但是不接受负值 |
替换字符：replace(‘被替换的字符’,‘替换的字符’)，他只会替换第一个字符
字符串转换为数组：split(‘分隔符’)
toUpperCase():转换大写
toLowerCase():转换小写
13.获取url中参数
<script>
//获取url?之后的内容
var url = 'http://www.itheima.com.login?name=zs&page=18&a=1&b=2';
var index = url.indexOf('?') + 1; //找到？，从后面开始截取
console.log(url.substr(index));//name=zs&page=18&a=1&b=2
//获取url后面的参数
function getParams(url){
//获取？后面第一个字符的索引
var index = url.indexOf('?')+1;
//url中?后面的字符串
var params = url.substr(index);
//使用&切割字符串。返回一个数值
var arr = params.split('&');//返回了一个列表形式
var o = {};
//数组中每一项的样子 key=value
for(var i = 0; i < arr.length; i++){
var tmpArr = arr[i].split('=');
var key = tmpArr[0];
var value = tmpArr[1];
o[key] = value;
}
return o;
}
var obj = getParams(url);
console.log(obj);
</script>