JavaScript学习笔记
看视频学习JavaScript其相关笔记记录，欢迎指正！
一、JavaScript初识导读
1.初识Javascript
1.1 JavaScript历史
布兰登.艾奇在1995年利用10天完成Javascript设计，最初叫LiveScript，后来与Sun公司合作，改名叫Javascript。
1.2 JavaScript是什么
-
JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言(Script是脚本的意思)
-
脚本语言：不需要编译，运行过程由 js 解释器( js 引擎)逐行来进行解释并执行
<script> alert("我是编程语言") </script> -
现在也可以基于Node.js 技术进行服务器端编程
1.3 JavaScript的作用
- 表单动态校验(密码强度检测)(JS产生最初目的)
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
1.4 HTML/CSS/JS的关系
HTML / CSS标记语言——描述类语言
- HTML决定网页结构和内容(决定看到什么)，框架
- CSS决定网页呈现给用户的模样
JS 脚本语言——编程类语言
- 实现业务逻辑和页面控制(决定功能)，相当于人的各种动作
浏览器执行 JS 简介
浏览器分为两部分 渲染引擎、JS 引擎
- 渲染引擎：用来解析 HTML 与 CSS ，俗称内核，比如 chrome 浏览器的blink
- JS 引擎： 也称为 JS 解释器，用来读取网页中的 JavaScript 代码，对其处理后运行，比如chrome浏览器的V8
浏览器本身并不会执行 JS 代码，而是通过内置 JavaScript 引擎(解释器)来执行 JS 代码。
JS 引擎执行代码时逐行解释每一句源码(转换为机器语言)，然后由计算机去执行，所以Javascript语言归为脚本语言，会逐行解释执行。
1.5 JS的组成
1. ECMAScript
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript ，但实际上两者是ECMAScript语言的实现和扩展
2.DOM——文档对象模型
文档对象模型(Document Object Model,DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口，通过DOM提供的接口可以对页面上各种元素进行操作(大小、位置、颜色等)
3.BOM——浏览器对象模型
浏览器对象模型(Browser Object Model,BOM)，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
1.6 JS 初体验
JS 有3种书写位置：行内、内嵌、外部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style></style>
<!-- 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>
1.行内式 JS
- 可将单行或少量 JS 代码写在HTML标签的事件属性(以 on 开头的属性)中，如：onclick
- 注意单双引号的使用： 在HTML中推荐使用双引号，在JS中推荐使用单引号
- 可读性差，在html中编写 JS 大量代码，不方便阅读
- 引号容易错，引号多层嵌套时，容易弄混
- 在特殊情况下可使用
2.内嵌 JS
- 可以将多行 JS 代码写到 < script > 标签中
- 内嵌 JS 是常用的方式
3.外部 JS 文件
- 利于 HTML 页面代码结构化，把大段 JS 代码独立到HTML页面之外，既美观，又方便文件级别的复用
- 引用外部 JS 文件的 script 标签中间不可以写代码
- 适用于 JS 代码量比较大的情况
2. JavaScript注释
-
单行注释
-
多行注释
// 1. 单行注释 ctrl+/ /* 2. 多行注释 2. 多行注释 ctrl+ shift +/ */
3. JavaScript输入输出语句
<script>
//弹出输入框
prompt('请输入您的年龄');
//弹出警示框
alert("沙漠骆驼");
//控制台输出控制 给程序员测试用的
console.log('程序员能看到的');
</script>
二、变量
1.变量概述
1.1 什么是变量
变量就是一个装东西的盒子
用于存放数据的容器。通过变量名获取数据，数据可以修改
1.2 变量在内存中的存储
变量是程序在内存中申请的一块用来存放数据的空间
2.变量的使用
变量在使用时分为两步：
-
声明变量
-
赋值
<script> //声明变量 var age;//var 是 JS 关键字，用来声明变量。使用该关键字声明变量后，计算机会自动为变量分配内存空间 age=10; //输出结果 console.log(age); </script> -
变量的初始化（声明变量并赋值)
var age = 18;//声明的同时进行赋值
变量的使用案例：
输入用户姓名并弹出
<script>
var name = prompt('请输入姓名');
alert(name);
</script>
3. 变量语法扩展
1.更新变量
一个变量被重新赋值后，原有的值就会被覆盖，以最后一次赋值为准
<script>
var age = 10;
age = 13;
</script>
2.同时声明多个变量
<script>
var age = 10,
name = 'zs',
sex = 1;
</script>
3.声明变量的特殊情况
4. 变量命名规范
三、数据类型
1.数据类型简介
1.1 为什么需要数据类型
在计算机中，不同数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
1.2 变量的数据类型
变量是用来存储值的，它们有名字和数据。
变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
JavaScript是一种弱类型或动态语言。意味着不用提前声明变量的类型，在程序运行中，类型会被自动确定。
<script>
var age;//这里的 age不确定属于哪种数据类型
var age=10;//这里才确定 age 属于数字型
// JS 的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定数据类型
</script>
在代码运行时，变量的数据类型是由JS引擎根据等号右边变量值的数据类型来判断，运行完毕之后，变量就确定了数据类型。
JavaScript拥有动态类型，同时意味着相同的变量可用作不同的类型。
<script>
var x=6;//数字型
var x='Bill';//字符串型
</script>
1.3 数据类型的分类
JS 把数据类型分为两类：
- 简单数据类型（Number，String，Boolean，Undefined，Null）
- 复杂数据类型（Object）
2. 简单数据类型
2.1 简单数据类型(基本数据类型)
2.2 数字型Number
<script>
var age=21;//整型
var Age=21.3747;//浮点型
</script>
2.2.1数字型进制（二进制、八进制、十进制、十六进制）
<script>
//八进制数字序列范围:0~7
var num1 = 07;//对应十进制的7
var num2 = 012;//对应十进制的10
//十六进制
var num3 = 0x9;//对应十进制的9
var num4 = 0xa;//对应十进制的10
</script>
在JS中，八进制前面加0，十六进制前面加0x
2.2.2 数字型范围
JavaScript中数值的最大值和最小值
<script>
alert(Number.MAX_VALUE);//1.7976931348623157e+308
alert(Number.MIN_VALUE);//5e-324
</script>
2.2.3 数字型三个特殊值
<script>
alert(Infinity);//Infinity 代表无穷大，大于任何值
alert(-Infinity);//-Infinity 代表无穷小，小于任何值
alert(NaN);//NaN ,Not a number，代表一个非数值
</script>
2.2.4 isNaN()
用来判断非数字，并且返回一个值，如果是数字，返回False，否则返回true
<script>
var usrAge=21;
var isOk=isNaN(usrAge);
console.log(isOk); //false ,21不是一个非数字
var usrName="andy";
console.log(isNaN(usrName));// true，"andy"是一个非数字
</script>
2.3 字符串型String
字符串型可以是引号中的任意文本，语法为双引号”“和单引号’‘
由于HTML标签里面的属性使用的是双引号，JS推荐使用单引号
2.3.1 字符串引号嵌套
JS 可以使用单引号嵌套双引号，或者双引号嵌套单引号。
2.3.2 字符串转义符
转义符都是以 \ 开头的
2.3.3 字符串长度
通过字符串的length属性可以获取整个字符串的长度
<script>
var str='hello world';
alert(str.length);
</script>
2.2.4 字符串拼接
- 多个字符串直接可以使用 + 进行拼接，拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
- 拼接前会把字符串相加的任何类型转换成字符串，再拼接成新的字符串
<script>
console.log('hello'+'world');//'helloworld'
console.log('hello'+ 112);//'hello112'
console.log('112'+ 112);//'112112'
console.log('hello'+true);//'hellotrue'
console.log(12+ 12);//24
</script>
数值相加，字符相连
2.3.5 字符串拼接加强
<script>
var age=12;
alert('我今年'+age+'岁啦！');
</script>
2.4 布尔型Boolean
布尔类型包含 true / false 两个值。
布尔型与数字型相加的时候，true为1，false为0
<script>
console.log(true+1);//2
console.log(false+1);//1
</script>
2.5 Undefined 和Null
一个声明后没有被赋值的变量会有一个默认值undefined
3.获取变量数据类型
3.1 获取检测变量的数据类型
typeof 可用来获取检测变量的数据类型
<script>
var num = 10;
alert(typeof num);//number类型
</script>
3.2 字面量
字面量是在源代码中一个固定值的表示法，就是字面量表示如何表达这个值。
- 数字字面量：8，9，10
- 字符串字面量：‘hello world’
- 布尔字面量：true，false
4.数据类型转换
4.1 什么是数据类型转换
把一种数据类型的变量转换成另外一种数据类型
通常会实现3种方式的转换
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型
4.2 转换为字符串类型
- toString()与String()使用方式不一样
- 拼接字符串转换方式，称之为隐式转换
<script>
//利用 toString()
var num=10;
var str=num.toString();
alert(typeof str);
//利用String()
alert(typeof String(num));
//利用字符串拼接
var str=num+''
alert(typeof str);
</script>
4.3 转换为数字型(重点)
- 隐式转换是在进行算术运算时，JS 自动转换了数据类型
<script>
//parseInt(变量) 可以将字符型转换为 number型，得到整数
var age=prompt('请输入您的年龄');//此时是字符型
alert(parseInt(age));//转换为数字型
alert(parseInt('3.15'));//向下取整 3
alert(parseInt('120px'));//120,将单位去掉
alert(parseInt('rem120px'));//NaN
//parseFloat(变量) 把 字符型转换为number型，得到浮点数
alert(parseFloat('3.14'));//3.14
alert(parseFloat('120px'));//120,将单位去掉
alert(parseFloat('rem120px'));//NaN
//Number(变量)
var str = '123';
alert(Number(str));
//算术运算 - * / 隐式转换
alert('12'-0);//12
alert('123'-'120');//3
</script>
案例1：计算年龄
要求在页面中弹出一个输入框，输入出生年份后，计算出年龄。
<script>
var year = prompt('请输入出生年份');
var age = 2022-year;
alert('您今年已经'+age+'岁了');
</script>
案例2：简单加法器
计算两个数的值，用户输入第一个值后，继续弹出第二个输入框并输入第二个值，最后通过弹出窗口显示两次输入值相加的结果。
<script>
var num1=prompt('请输入一个数');
var num2=prompt('请再输入一个数');
var count=(num1/1)+(num2/1);
alert(num1+'+'+num2+'='+count);
</script>
4.4 转换为布尔型
- 代表空、否定的值都会被转换为false，如：‘’，0，NaN，null，undefined
- 其余值都会被转换为true
<script>
alert(Boolean(''));//false
alert(Boolean(0));//false
alert(Boolean(NaN));//false
alert(Boolean(null));//false
alert(Boolean(undefined));//false
alert(Boolean('小白'));//true
alert(Boolean(12));//true
</script>
扩展阅读
- 能够直到解释型语言和编译语言的特点
- 能够知道标识符不能是关键字或保留字
- 能够独立完成课后作业
1.解释型语言和编译型语言
1.1概述
计算机不能直接理解除机器语言以外的语言，必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。
- 翻译器翻译的方式：编译和解释，两者直接的区别在于翻译的时间点不同
- 编译器在代码执行之前进行编译，生成中间代码文件
- 解释器在运行时进行及时解释，并立即执行(当编译器以解释方式运行时，也称之为解释器)
1.2 执行过程
2. 标识符、关键字、保留字
2.1 标识符
指开发人员为变量、属性、函数、参数取的名字
标识符不是关键字或保留字
2.2 关键字
指 JS 本身已经使用了的字，不能再用它们充当变量名、方法名
包括：break 、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with等
2.3 保留字
预留的“关键字”。未来可能会成为关键字。不能使用它们当变量名或方法名。
包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile等。
四、JavaScript运算符
1. 运算符
运算符(operator)也被称为操作符，用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有：
- 算术运算符
- 递增递减运算符
- 比较运算符
- 逻辑运算符
- 赋值运算符
2. 算术运算符
2.1 算术运算符
概念：算术运算使用的符号，用于执行两个变量或值的算术运算
2.2 浮点数的精度问题
浮点数值的最高精度是17位小数，但在进行算术计算时其精度远远不如整数。
所以：不要直接判断两个浮点数是否相等
2.3
怎么判断一个数能否被整除？余数是0就能被整除。
1+2*3的结果？7，算术运算符有优先级，先乘除，后加减，有小括号先算小括号里面的。
2.4 表达式和返回值
表达式：由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
即由数字、运算符、变量等组成的式子。
表达式最终的返回结果是返回值
3. 递增和递减运算符
3.1 递增和递减运算符概述
需要反复给数字变量添加或减去1，可以使用==递增(++)和递减(–)==运算符来完成
在JavaScript中，递增(++)和递减(–)既可以放在变量前面，也可以放在变量后面。
放在变量前面时，为前置递增（递减）运算符
放在变量后面时，为后置递增（递减）运算符
递增和递减运算符必须和变量配合使用。
3.2 递增运算符
3.2.1 前置递增运算符
++num前置递增，自加1，先自加1，后返回值
3.2.2 后置递增运算符
==num++==后置递增，自加1，先返回值，后自加1
前置递增与后置递增单独使用时，运行结果相同。
4. 比较运算符
4.1 比较运算符概述
概念：比较运算符(关系运算符)是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值(true / false)作为比较运算的结果。
<script>
// == 会转型，会将字符串型是数据转换为数字型
alert(18==10);//false
alert(18==18);//true
alert(18=='18');//true,==会转型
//=== 要求两侧的值 与 数据类型 完全一致
alert(18===18);//true
alert(18==='18');//false
</script>
4.2 等号小结
5.逻辑运算符
5.1 逻辑运算符概述
概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。
<script>
alert(3>5&&3>2);//false
alert(3<5&&3>2);//true
</script>
5.2 短路运算（逻辑中断）
短路运算原理：当有多个表达式(值)时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。
5.2.1 逻辑与
语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1
假 1 真 2
5.2.2 逻辑或
语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2
5.2.3 逻辑中断（短路操作）
<script>
//逻辑中断会影响程序的运行结果
var num = 0;
console.log(123||num++);//123 中断了num++
console.log(num);//0
</script>
6. 赋值运算符
概念：用来把数据赋值给变量的运算符
<script>
var num = 10;
num += 2;// 相当于 num = num + 2
</script>
7. 运算符优先级
- 一元运算符里的逻辑非优先级很高
- 逻辑与比逻辑或优先级高
五、JavaScript流程控制-分支
1. 流程控制
在一个程序执行的过程中，各条代码是执行顺序对程序的结果是有直接影响的。可通过控制代码的执行顺序来实现要完成的功能。
流程控制就是来控制代码按照什么顺序结构来执行。
流程控制主要有三种结构：顺序结构、分支结构和循环结构。分别代表三种代码执行的顺序。
2. 顺序流程控制
程序按照代码的先后顺序，依次执行。
3. 分支流程控制 if 语句
3.1 分支结构
由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码，从而得到不同的结果。
JS 提供了两种分支结构语句：
- if 语句
- switch语句
3.2 if 语句
语法结构：
<script>
if(条件表达式){
//条件成立执行的代码语句;
}
</script>
3.3 if else 语句(双分支语句)
语法结构：
<script>
if(条件表达式){
//[如果]执行的代码;
}else{
//[否则]执行的代码;
}
</script>
3.4 if else if 语句(多分支语句)
语法规范：
<script>
if(){
}else if{
}else if{
}else if{
}else{
}
</script>
4. 三元表达式
由三元运算符组成的式子称为三元表达式。
语法结构：
条件表达式 ？ 表达式1 ： 表达式2;
如果条件表达式结果为真，则返回表达式1的值，如果条件表达式结果为假，则返回表达式2的值。
<script>
var num=3;
var result = num > 5 ? 'Yes' : 'No';
alert(result);
console.log(result);
</script>
5. 分支流程控制 switch 语句
5.1 switch 语句也是多分支语句，用于基于不同的条件来执行不同的代码。
当要针对变量设置一系列的特定值的选项时，就可以使用 switch
<script>
switch(表达式){
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:
执行最后的语句;
}
</script>
利用表达式的值和case后面的选项值相匹配，如果匹配上，就执行该case里面的语句，如果没有匹配上，就执行default里面的语句
switch 注意事项
- 表达式经常写成变量
- 表达式的值与case的值相匹配必须是全等，必须是值和数据类型一致才可以
- break 如果当前的case里面没有break，则不会退出switch，而是继续执行下一个case，直到break
<script>
var fruit = prompt('请输入您要查询价格的水果');
switch (fruit) {
case '苹果':
alert('苹果的价格是3.5/斤');
break;
case '榴莲':
alert('榴莲28.9/斤');
break;
default:
alert('没有这个水果');
}
</script>
switch语句和 if else if 语句的区别
- 一般情况下可以相互替换
- switch…case语句通常处理 case 比较确定值的情况，而 if…else…语句更加灵活，常用于范围判断
- switch 语句进行条件判断后直接执行到程序的条件语句，效率更高，而if … else语句由几种条件，就判断多少次
- 当分支比较少时，if … else 语句的执行效率比switch语句高
- 当分支比较多时，switch 语句的执行效率比较高，而且结构更清晰
六、JavaScript流程控制-循环
1. 循环
在 JS 中，主要有3种类型的循环语句
- for 循环
- while 循环
- do … while 循环
2. for 循环
for循环主要用于把某些代码循环若干次，通常跟计数有关系。
语法结构：
for(初始化变量;条件表达式;操作表达式){
//循环体;
}
<script>
for(var i=1;i<100;i++){
}
</script>
断点调试：
断点调试可以帮我们观察程序的运行过程
浏览器中按F12（或者右键，点检查）–>sources–>找到需要调试的文件–>在程序的某一行设置断点
watch:监视，通过watch可以减少变量变化的值
点击这个位置，可以让程序一行一行的执行，这个时候可以观察watch中变量的值的变化。
for 循环重复相同的代码
for 循环可以重复执行不同的代码
因为有计数器变量i的存在， i每次循环值都会改变
for循环因为有计数器的存在，还可以重复的执行某些相同操作
案例1：求1-100之间所有整数的累加和
<script>
var sum=0;
for(var i=1;i<=100;i++){
sum +=i;
}
alert(sum);
</script>
双重for循环，外层循环一次，内层 for 循环全部执行
for 循环是循环条件和数字直接相关的循环
3. while循环
语法结构：
while(条件表达式){
//循环体
}
当条件表达式结构为true时，则执行循环体，否则退出循环
<script>
var num=1;
while(num<=100){
num++;
}
</script>
4. do while循环
语法结构：
do{
//循环体
}while(条件表达式)
与while 不同的地方在于 do while 先执行一次循环体，再判断条件，如果条件表达式结果为真，则继续执行循环体，否则退出循环。即do while循环语句至少执行一次循环体代码。
<script>
var i=1;
do{
i++
}while(i<=10)
</script>
循环小结
- JS 中的三个循环 for 、while、 do while在很多情况下可以相互替代使用
- 如果是用来计数，跟数字相关的，三者使用基本相同，for更方便
- while和do while可以做更复杂的判断条件，比for循环灵活一些
- while和do while执行顺序不一样，while 先判断后执行，do while 先执行一次，再判断执行
- while和do while执行次数不一样，do while至少会执行一次循环体，而while可能一次也不执行
- 实际工作中，更常使用for循环语句，更简洁
5. continue / break
5.1 continue 关键字
continue 关键字用于立即跳出本次循环，继续下一循环(本次循环体中continue之后的代码就会少执行一次)。
<script>
for(var i=1;i<=5;i++){
if(i==3){
continue;//遇到continue 就退出本次循环，直接到下一次循环
}
console.log('现在执行第'+i+'次');
}
</script>
<script>
//求 1~100之间，除了能被 7 整除之外的整数
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
continue;
}
sum += i;
}
console.log(sum);
</script>
5.2 break关键字
break关键字用于立即跳出整个循环(循环结束)
<script>
//break
for(var i =1;i<=5;i++){
if(i==3){
break;
}
console.log('现在执行第' + i + '次');
}
< /script>
七、JavaScript 命名规范以及语法格式
1. 标识符命名规范
- 变量、函数的命名必须要有意义
- 变量的名称一般用名词
- 函数的名称一般用动词
2. 操作符规范
<script>
//操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break;
}
console.log('现在执行第' + i + '次');
}
</script>
3. 单行注释规范
<script>
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break; //单行注释前面注意有个空格
}
console.log('现在执行第' + i + '次');
}
</script>
八、数组
1. 数组的概念
数组是指一组数据的集合，其中的每个数据被称为元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的方式。
<script>
var arr=[1,2,3,4,5];
</script>
2. 创建数组
JS 中创建数组有两种方式：
- 利用 new 数组
- 利用数组字面变量创建数组
利用new创建数组
<script>
var 数组名 = new Array();
var arr = new Array();//创建一个新的空数组
</script>
利用数组字面量创建数组
<script>
//使用数组字面量方式创建空的数组
var 数组名 = [];
//使用数组字面量方式创建带初始值的数组
var arr = ['小白','小黑','大黄','瑞奇'];
</script>
数组元素的类型
数组中可以存放任意类型的数据，例如字符串、数字、布尔值等。
3. 获取数组中的元素
3.1 数组的索引
索引(下标)：用来访问数组元素的序号(数组下标从0开始)。
数组可以通过索引来访问、设置、修改对应的数组元素。
通过==数组[索引]==的形式来获取数组中的元素。
<script>
//定义数组
var arrStus=[1,2,3];
//获取数组中的第2个元素
alert(arrStus[1]);
</script>
4. 遍历数组
将数组中的元素从头到尾访问一次
<script>
var arr = ['小白','小黑','大黄','瑞奇'];
for(var i=0;i<arr.length;i++){
alert(arr[i]);
}
</script>
数组的长度
使用==“数组名.length”==可以访问数组元素的数列(数组长度)。
案例：求数组[2，6，1，7，4]里面所有的元素的和以及平均值
<script>
var arr = [2, 6, 1, 7, 4];
var sum = 0;
var avg = 0;
for (var i = 0; i < arr.length; i++) {
sum += arr[i];
}
avg = sum / arr.length;
alert('和为' + sum + '平均值为' + avg);
</script>
案例：求数组[2,6,1,77,52,25,7]中的最大值。
<script>
var arr = [2, 6, 1, 77, 52, 25, 7];
var max = 0;
for (var i = 0; i < arr.length; i++) {
if (max < arr[i]) {
max = arr[i];
}
}
alert('最大值为' + max);
</script>
案例：数组转换为分割字符串
要求：将数组[‘red’,‘green’,‘blue’,‘pink’]转换为字符串，并用 | 或其他符号分割
输出：‘red|green|blue|pink’
<script>
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
for (var i = 0; i < arr.length; i++) {
str += arr[i] + '|';
}
alert(str);
</script>
5. 数组中新增元素
通过修改length长度以及索引号增加数组元素
通过修改 length 长度新增数组元素
- 通过修改 length 长度来实现数组扩容的目的
- length 属性是可读写的
<script>
var arr = ['red', 'green', 'blue']; // length = 2
arr.lenght = 5;
alert(arr[3]);// undefined
alert(arr[4]);// undefined
</script>
通过修改数组索引新增数组元素
- 通过修改数组索引的方式追加数组元素
- 不能直接给数组名赋值，否则会覆盖掉以前的数据
<script>
var arr = ['red', 'green', 'blue', 'pink']; // length = 3
arr[3] = 'pink';// ['red', 'green', 'blue', 'pink'];
</script>
也可以通过索引替换元素
案例：数组新增元素
新建一个数组，里面存放10个整数(1~10)
<script>
var arr = new Array();
for (var i = 0; i < 10; i++) {
arr[i] = i + 1;
}
alert(arr);
</script>
案例：筛选数组
要求：将数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来，放入新数组
方法一：
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr1 = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
arr1[j] = arr[i];
j++;
}
}
alert(arr1);
</script>
方法二：
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr1 = [];
//刚开始 arr1.length 就是 0
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] > 10) {
//新数组索引号 从 0 开始 依次递增
arr1[arr1.length] = arr[i];
j++;
}
}
alert(arr1);
</script>
6. 数组案例
案例1：将数组[2,0,6,1,77,0,52,0,25,7]中的 0 去掉后，形成一个不包含 0 的新数组
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr1 = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 0) {
arr1[arr1.length] = arr[i];
j++;
}
}
alert(arr1);
</script>
案例2：翻转数组
要求：将数组[‘red’, ‘green’, ‘blue’, ‘pink’,‘purple’]的内容反过来存放
输出：[‘purple’, ‘pink’,‘blue’, ‘green’,‘red’ ]
<script>
var str = ['red', 'green', 'blue', 'pink', 'purple'];
var newStr = [];
for (var i = str.length-1; i >= 0; i--) {
newStr[newStr.length] = str[i];
}
alert(newStr);
</script>
案例3：冒泡排序
冒泡排序 重复地走访过要排序的数列，一次比较两个元素，如果它们的顺序错误，就把它们交换过来。
走访数列的工作就是重复地进行，直到没有再需要交换，也就是说，该数列排序已经完成。
从大到小排序
<script>
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr.length-i;j++){
if(arr[j]<arr[j+1]){
arr[j]=arr[j]+arr[j+1];
arr[j+1]=arr[j]-arr[j+1];
arr[j]=arr[j]-arr[j+1];
}
}
}
alert(arr);//77,52,25,7,6,2,1,0,0,0
</script>
九、函数
1. 函数的概念
函数：封装了一段可能被重复调用执行的代码块。通过此代码块可实现大量代码的重复使用。
<script>
//求10~50的整数的累加和
function getSum(num1,num2){
var sum=0;
for(var i=num1;i<=num2;i++){
sum+=i;
}
alert(sum)
}
</script>
2. 函数的使用
函数在使用时分为两步：声明函数 调用函数。
//声明函数
function 函数名(){
//函数体;
}
- function 声明函数的关键字 全部小写
- 函数是做某件事情，函数名一般是动词
- 函数不调用 自己不执行
//调用函数
函数名();
- 调用函数的时候不要忘记加小括号
声明函数本身不会执行代码，只有调用函数时才会执行函数体代码
函数的封装
函数的封装是把一个或多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
3. 函数的参数
函数可以重复相同的代码
可以利用函数的参数实现重复不同的代码
3.1 形参和实参
在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参，而在调用函数时，同样也需要传递相应的参数，这些参数被称为实参。
function 函数名(形参1,形参2,...){
}
函数名(实参1,实参2,...);
参数的作用：在函数内部某些值不能固定，可以通过参数在调用函数时传递不同的值进去。
3.2 函数形参和实参个数不匹配问题
如果实参的个数和形参的个数一致，则正常输出结果
如果实参的个数多于形参的个数，会取到形参的个数
如果实参的个数小于形参的个数，多余的形参定义为undefined 最终结果是 NaN
3.3 小结
- 函数可以带参数也可以不带参数
- 声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
- 调用函数的时候，函数名括号里面的是实参
- 多个参数中间用逗号隔开
- 形参的个数可以和实参个数不匹配，但结果不可预计，要尽量匹配
4. 函数的返回值
函数是做某件事或者实现某种功能
4.1 return语句
function 函数名(){
return 需要返回的结果;
}
函数名();
- 函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名( ) 通过return 实现的
- 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名( ) = return后面是结果
<script>
//利用函数 求两个数的最大值
function getMax(num1,num2){
return num1>num2?num1:num2;
}
getMax(1,5);//5
//利用函数求数组中最大值
function getMax(arr){
var max=0;
for(var i=0;i<arr.length;i++){
if(max<arr[i]){
max=arr[i];
}
}
return max;
}
var arr=[2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var max = getMax(arr);
alert(max);
</script>
4.2 return终止代码
return只能返回一个值，如果用逗号隔开多个值，以最后一个为准。
4.3 函数没有 return ，返回 undefined
函数如果有return 则返回的是 return 后面的值，如果函数没有 return 则返回undefined
4.4 break / continue / return区别
- break ：结束当前的循环体
- continue：跳出本次循环，继续执行下次循环
- return：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码
5. arguments的使用
当我们不确定有多少个参数传递的时候，可以用arguments来获取。
在JavaScript中，arguments实际上是当前函数的一个内置对象 。所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有实参。
<script>
function fn(){
alert(arguments);
}
fn(1,2,3);
</script>
console.log的结果如下：
arguments展示形式是一个伪数组，因此可以进行遍历。
伪数组具有以下特点：
- 具有 length 属性
- 按索引方式存储数据
- 不具有数组的push，pop等方法
只有函数才有arguments对象，而且每个函数都内置号了这个arguments
案例：利用函数求任意个数的最大值
<script>
function getMax() {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i];
}
}
return max;
}
console.log(getMax(1, 3, 5, 2, 7)); //7
console.log(getMax(2, 0, 6, 1, 77, 0, 52, 0, 25, 7)); //77
</script>
6. 函数案例
案例1：利用函数封装方式，翻转任意一个数组
<script>
function reverse(arr) {
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
}
alert(reverse([1, 3, 5, 2, 7]));
</script>
案例2：利用函数封装方式，对数组排序——冒泡排序
<script>
function bubbleSort(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length - i; j++) {
if (arr[j] > arr[j + 1]) {
arr[j] = arr[j] + arr[j + 1];
arr[j + 1] = arr[j] - arr[j + 1];
arr[j] = arr[j] - arr[j + 1];
}
}
}
return arr;
}
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr = bubbleSort(arr);
alert(arr);//[0,0,0,1,2,6,7,25,52,77]
</script>
案例3：判断闰年
<script>
function isLeapYear(num) {
if (num % 4 == 0 && num % 100 !== 0 || num % 400 == 0) {
return 1;
} else {
return 0;
}
}
var year = prompt('请输入想要判断的年份');
var num=isLeapYear(year);
if(num==1){
alert('是闰年');
}else{
alert('是平年');
}
</script>
函数可以调用另外一个函数
由于每个函数都是独立的代码块，用于完成指定任务，因此经常会用到函数相互调用的情况。
<script>
function fn1() {
alert('这里执行fn1函数');
fn2();
}
function fn2() {
alert('这里执行fn2函数');
}
fn1();
</script>
7. 函数的两种声明方式
函数有两种声明方式
-
利用函数关键字自定义函数（命名函数）
<script> function fn(){ alert('1'); } fn(); </script> -
函数表达式（匿名函数）
<script> // var 变量名 = function(){} var fn2 = function(str){ alert('2'); alert(str);//hello } fn2('hello'); </script>注意：
- fn2是变量名，不是函数名
- 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数
- 函数表达式也可以进行传递参数
十、作用域
1. 作用域
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
- JavaScript作用域：就是代码名字（变量）在某个范围内起作用和有效果。
- JS 的作用域(es6之前)：全局作用域 局部作用域
- 全局作用域：整个script标签 或者一个单独的js文件
- 局部作用域（函数作用域）：在函数内部就是局部作用域，变量名只在函数内部起作用
块级作用域
在es6的时候新增的块级作用域
块级作用域：
if{
}
for(){
}
2. 变量的作用域
在JavaScript中，根据作用域的不同，变量可用分为两种：全局变量，局部变量
- 全局变量(在函数外部定义的变量)：在全局作用域下的变量
- 全部变量在代码的任何位置都可以使用
- 在全局作用域下var声明的变量是全局变量
- 在特殊情况下，在函数内不使用var声明的变量也是全局变量(不建议使用)
- 局部变量：在局部作用域下的变量
- 局部变量只能在该函数内部使用
- 在函数内部var声明的变量是局部变量
- 函数的形参师姐上就是局部变量
从执行效率来看，全局变量和局部变量：
- 全局变量只有浏览器关闭的时候才会销毁，比较占用内存资源
- 局部变量 当程序执行完毕就会销毁，比较节约内存资源
3. 作用域链
只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中又有一个作用域
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称为作用域链
案例：结果是几？
<script>
function f1() {
var num = 123;
function f2() {
console.log(num);//站在目标出发，一层一层往外查找
}
f2();
}
var num = 456;
f1();//console.log(num)的结果是123 因为就近原则，选取了f1中的局部变量num
</script>
十一、JavaScript预解析
1. 预解析
JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行。
预解析 js 引擎会把 js 里面所有的 var 还有 function提升到当前我作用域的最前面
代码执行 按照代码书写顺序从上往下执行
2. 变量预解析和函数预解析
预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
-
变量提升：把所有的变量声明提升到当前的作用域的最前面 不提升赋值操作
<script> console.log(num);//undefined var num=10;//提升了变量名 //相当于执行了 var num; console.log(num); num=10; fn(); var fn=function(){ console.log(22); } //相当于执行了 /* var fn; fn(); fn=function(){ console.log(22); }*/ </script> -
函数提升：把所有的函数声明提升到当前的作用域的最前面 不调用函数
<script> function fn(){ console.log(11 ); } fn(); //先执行 fn(); 然后执行函数体 //函数表达式，调用必须写在函数表达式后面 </script>
3. 预解析案例
案例1：结果是几？
<script>
var num = 10;
fn();
function fn(){
console.log(num);// undefined
var num = 20;
}
</script>
案例2：结果是几？
<script>
var num = 10;
function fn() {
console.log(num);// undefined
var num = 20;
console.log(num);// 20
}
fn();
</script>
十二、JavaScript对象
1. 对象
对象是一个具体的事物。
在JavaScript中，对象是一组无序的相关属性的方法和集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的
- 属性：事物的特征，在对象中用属性来表示（常用名词）
- 方法：事物的行为，在对象中用方法来表示（常用动词）
2. 创建对象的三种方式
在JavaScript中，采用三种方式创建对象(Object)：
- 利用字面量创建对象
- 利用 new Object 创建对象
- 利用 构造函数创建对象
2.1 利用字面量创建对象
对象字面量：就是花括号{ }里面包含了表达这个具体事物(对象)的属性和方法
<script>
var obj = {};//创建了一个空的对象
var obj1 = {
uname:'张三',
age:13,
sex:'男',
sayHai: function(){
console.log('hi~');
}
}
</script>
- 里面的属性或方法采取键值对的形式 键（属性名）：值（属性值）
- 多个属性或方法中间用逗号隔开
- 方法冒号后面跟的是一个匿名函数
使用对象：
-
调用对象的属性： 对象名.属性名
<script> console.log(obj1.uname); </script> -
调用对象的属性还有一种方法：对象[‘属性名’]
<script> console.log(obj1['age']); </script> -
调用对象的方法：对象名.方法名()
<script> obj1.sayHi(); </script>
变量、属性、函数、方法的区别
变量：单独声明并赋值，使用的时候直接写变量名 ，变量是单独存在的
属性：在对象里面的不需要声明的，使用的时候必须是 对象.属性
函数：是单独声明，并且调用的，函数名( ) 单独存在的
方法：在对象里面，调用的时候 对象.方法( )
2.2 利用 new Objcet创建对象
<script>
var obj = new Object();//创建了一个空的对象
obj.uname = '张三';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function(){
console.log('hi~');
}
</script>
- 利用 等号 = 赋值的方法 添加对象的属性和方法
- 每个属性和方法之间用 分号 ; 结束
2.3 利用构造函数创建对象
因为前面两种创建对象的方式一次只能创建一个对象
利用函数的方法，重复相同的代码，就把这个函数称为 构造函数，这个函数里面封装的不是代码，而是 对象
构造函数就是将对象里面的一些相同的属性和方法抽象出来，封装到函数里面
构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总预 new 运算符一起使用。我们可以将对象中一些公共的属性和方法抽取出来，封装到这个函数里面。
function 构造函数名(){
this.属性 = 值;
this.方法 = function(){}
}
<script>
function Star(uname,age,sex){
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(){
console.log();
}
}
var zhangsan = new Star('张三',15,'男');//调用函数返回的是一个对象
console.log(typeof zhangsan);//Object
console.log(zhangsan.name);//张三
console.log(zhangsan['sex']);//男
console.log(zhangsan.sing('hello'));
</script>
- 构造函数名字首字母大写
- 构造函数不需要 return 就可以返回结果
- 调用构造函数，必须使用 new
- 只要调用一次构造函数，就创建了一次对象
- 属性和方法面前必须要添加this
2.4 构造函数和对象
构造函数：抽象了对象的公共部分，封装到了函数里面，它泛指某一大类
创建对象：特指某一个，通过new 关键字创建对象的过程被称为对象实例化
3. new关键字
new 关键字执行过程：
- new 构造函数 可以在内存中创建一个空对象
- this 就会指向刚才创建的空对象
- 执行构造函数里面的代码 给这个空对象添加属性和方法
- 返回这个对象(构造函数里不需要return)
4. 遍历对象属性
for … in语句用于对数组或对象的属性进行循环操作
<script>
var obj = {
uname:'张三',
age:13,
sex:'男',
sayHai: function(){
console.log('hi~');
}
}
for(var k in obj){
console.log(k);//k 变量输出得到的是属性名
console.log(obj[k]);//输出得到的是属性值
}
</script>
小结
- 对象可以让代码结构更清晰
- 对象复杂数据类型Object
- 本质：对象就是一组无序的相关属性和方法的集合
- 构造函数泛指某一大类
- 对象实例特指某一个事物
- for … in语句用于对对象的属性进行循环操作
十三、JavaScript内置对象
1. 内置对象
- JavaScript中的对象分为 3 种：自定义对象、内置对象、浏览器对象
- 前两种对象是 JS 的基础内容，属于ECMAScript，第三个浏览器对象属于 JS 独有的
内置对象：指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或最基本而必要的功能（属性和方法）
内置对象最大的优点就是能帮助开发者快速开发
JavaScript提供了多个内置对象：Math、Date、Array、String等
2. 查文档
2.1 MDN
学习一个内置对象的使用，只要学会其常用成员的使用即可。可以通过查文档学习，可通过 MDN / W3C来查询
Mozilla开发者网络(MDN)提供了有关开放网络技术的信息。
MDN：https://developer.mozilla.org/zh-CN/
2.2 如何学习对象中的方法
- 查阅该方法的功能
- 查看里面的参数的意义和类型
- 查看返回值的意义和类型
- 通过 demo 进行测试
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
