JS基础
将之前的一些博客整合在了一起
JS编程基础
- 编程 ：就是计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程
- 计算机程序： 就是计算机所执行的一系列的指令的集合，而程序全部都是我们用所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出指令
- 注意： 上面所定义的计算机指的是任何能够执行代码的设备
计算机的组成
-
硬件
输入设备 键盘鼠标
输出设备 显示器打印机
cpu 负责处理数据和运算
硬盘 负责存储数据，硬盘永久存储数据
内存 内存暂时存储数据 -
软件
系统软件 windows，Linux，masos 应用软件 浏览器，qq
数据存储
- 计算机内部使用二进制0和1来表示数据
- 所有数据包括文件图片最终都是以二进制数据存放在硬盘中，平时我们说的安装软件就是把程序文件复制到硬盘中
- 硬盘内存保存的都是二进制数据
- 数据的存储单位 bit<Byte<KB<MB<GB<TB<…
位(bit) 1bit可以保存一个0或者1
字节(Byte) 1Byte=8bit
千字节(KB) 1KB=1024Byte
兆字节(MB) 1M=1024KB
吉字节(GB) 以此类推
太字节(TB) 以此类推
- 程序的运行
硬盘------>-内存条------------>cpu
1.打开某个程序时，先从硬盘中把程序的代码加载到内存中
2.cpu执行内存中的代码
注意：之所以要内存的一个重要原因，是因为cpu运行太快了，如果只从硬盘读数据，会浪费cpu性能，所以才使用存取速度更快的内存来保存运行时的数据（内存是电，硬盘是机械）
初识javascript
- javascript是运行在客户端的脚本语言
- 脚本语言：不需要编译，运行过程中由JS解释器（JS引擎）逐行来进行解释执行
HTML/CSS/JS的关系
HTML/CSS是标记语言——描述类语言
- HTML决定网页的结构，相当于身体
- CSS决定呈现给用户的模样，相当于衣服
JS脚本语言——编程类语言
- 实现业务逻辑和页面控制，决定功能，相当于人的动作
浏览器执行JS
浏览器分成两部分：渲染引擎和JS引擎
- 渲染引擎：用来解析HTML和CSS，俗称内核
- JS引擎：也称为JS解释器。用来读取网页中的javascript代码，对其处理后运行。比如chrome的v8
注意：浏览器本身并不会执行JS代码，而是通过内置的javascript引擎来执行js代码。js引擎执行代码时逐行解释每一句源码（转换为机械语言），然后由计算机去执行。
js的组成
ECMAScript（javascript的语法）：由ECMA国际进行标准化的一门编程语言。规定了js的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套js语法工业标准
DOM——文档对象模型：是w3c组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作
BOM——浏览器对象模型：提供了独立于内容的，可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口
js的书写位置
js的书写格式与css差不多，值得注意的是引用外部js文件在script中间不可以写代码
JS变量
变量：是用来存放数据的容器，我们通过变量名获取数据。
本质：变量是程序在内存中申请的一块用来存放数据的空间
//变量在使用时分为两步：1.声明变量 2.赋值
//1.声明变量
var age;
//age是定义的变量名，我们通过变量名来访问内存中分配的空间
//2.赋值
age = 10;
//用来把右边的值赋给左边的变量空间中
//变量值是程序员保存到变量空间的值
//3.变量的初始话
var age = 18;
//声明一个变量并赋值，我们称为变量的初始化
//一个变量被重新赋值后，原有的值会被覆盖，变量值以最后赋的值为准
变量命名规范
- 由字母，下划线，数字，美元符号组成
- 不能以数字开头
- 严格区分大小写
- 不能是关键字，保留字
- 变量名必须有意义
- 遵守驼峰命名法
JS数据类型
为什么需要数据类型：因为在计算机中，不同的数据占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了数据类型
变量是用来存储值的所在处，他们有名字和数据类型。变量的数据类型定义了如何将这些值的位储存到计算机的内存中，javascript是一种弱型或者说动态语言，这意味着不用提前声明变量类型，在程序运行过程中，类型会被自动确定。
在代码运行时，变量的数据类型由js引擎根据 = 右边变量值的数据类型来判断，运行完毕后，变量就确定了数据类型
js拥有动态类型，同时也意味着相同的变量可用作不同的数据类型
var x = 6;
var x = 'beibei';
数据类型的分类
- 简单数据类型（Number，String，Boolean，undefind，Null）
- 复杂数据类型（object）
| 简单数据类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字型 | 0 |
| Boolean | 布尔型，true，false，等价1和0 | false |
| String | 字符串，如"张三" | “” |
| undefined | let a;声明不赋值，此时a = undefined | undefined |
| Null | let a = null;声明a为空值 | null |
数字型 Number
最大值和最小值
alert(Number.MAX_VALUE);//最大值
alert(Number.MIN_VALUE);//最小值
//三个特殊值
alert(Infinity);//代表无穷大
alert(-Infinity);//代表无穷小
alert(NaN);//not a number 代表一个非数值
//isNaN()用来判断非数字 并且返回一个值
//如果不是数字返回true，是数字返回false
字符串类型 String
可以是引号中的任意文本，语法为双引号" "和单引号’ ’
js可以用单引号嵌套双引号，或者用双引号嵌套单引号
-
字符串转义字符
- \n 换行符
- \ 斜杠
- ’ 单引号
- ‘’ 双引号
- \t tab缩进
- \b 空格
-
字符串长度
由若干字符组成，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度
var str = 'my name is beibei'
console.log(str.length);
- 字符串拼接
多个字符串可以使用+进行拼接，其拼接方式为字符串+任意类型=拼接后的新字符串
拼接前会把字符串相加的任何类型转成字符串，再拼接成一个新字符串
+号总结口诀：数值相加，字符相连
布尔型 Boolean
两个值 true和false
true参加加法运算当作1
false参加加法运算当作0
undefind和Null
一个声明后没有赋值的变量会有一个默认值 undefind
//例如
var a;
console.log(a);// undefind
console.log('你好'+a);// 你好undefind
console.log(11+a);// NaN
console.log(true+a);// NaN
//一个变量给Null值，里面的值为空
var b = null;
conslog.log('你好'+b); // 你好null
console.log(11+b); // 11
console.log(true + b) // 1
字面量
是在源码中一个固定值的表示法，通俗来说就是字面量如何表达这个值
数字字面量：8，9，10
字符串字面量：‘beibei’,‘前端’
布尔字面量：true,false
获取变量的数据类型
//typeof 可用来获取检测变量的数据类型
var num = 10;
console.log(typeof num);
数据类型转换
使用表单，prompt获取过来的数据默认是字符串类型的，此时就不能进行加法等运算，需要转换变量的数据类型
- 转换成字符串
//toString()
var num = 123;
console.log(num.toString());
// String()强制类型转换
console.log(String(num));
//加号拼接字符串 也称隐式转换
console.log(num+'beibei');
- 转成数字型
var num = '23';
var num1 = '78.21'
//parseInt()
console.log(parseInt(num));
//parseFloat()
console.log(parseFloat(num1))
//Number强制转换
console.log(Number(num));
//js隐式转换(- * /)
console.log('12'-1);
- 转换成布尔型
//Boolean()函数
console.log(Boolean('true'));
代表空，否定的值会被转换成false，如：""，0，NaN，null，undefind
其余的值都会转换成true
解释型语言和编译型语言
- 概述
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序，程序语言翻译成机器语言的工具，被称为翻译器
JS——>翻译器——>机器语言(二进制)
翻译器翻译的方式有两种：一个是编译，另外一个是解释。两者之间的区别在于翻译的时间点不同
- 编译器是在代码执行之前进行编译，生成中间代码文件
- 解释器实在运行时进行及时解释，并立即执行
JS运算符
- 也称为操作符，是用于实现赋值，比较和执行算数运算等功能的符号
- 常用运算符：
1，算数运算符
2，递增递减运算符
3，比较运算符
4，逻辑运算符
5，赋值运算符
算数运算符
// + 加
// - 减
// * 乘
// / 除
// % 取余 判断一个数是否能被整除
- 表达式和返回值
表达式：是由数字，运算符，变量等以能求得数值的有意义的排列方法所得的组合
表达式最终都会返回一个结果，我们称之为返回值
递增和递减运算符 ++ - -
必须和变量配合使用
- 前置++，- - ，和后置++，- -单独使用，效果一样
- 后置++，- - ，口诀：先返回原值，再加1
比较运算符
两个数据进行比较所使用的运算符，比较运算后，会返回一个布尔值作为比较运算的结果
// > 大于号
// < 小于号
// >= 大于等于号
// <= 小于等于号
// == 判等号(会转型)
// != 不等号
// === !== 全等要求值和数据类型都一致
逻辑运算符
- 概念：是用来进行布尔值运算的运算符，其返回值也是布尔值
// && 与 两侧都为true，结果才为true，一侧为false，结果为false
// || 或 两侧都为false，结果才为false，一侧为true，结果为true
// ！ 非 也叫取反符，取一个布尔值相反的值
- 短路运算（逻辑中断）
原理：当有多个表达式（值）时，左边的表达式（值）可以确定结果时，就不在继续运算右边表达式的值
赋值运算符
// = 直接赋值
// += -= 加减一个数再赋值
// *=，/=，%= 乘除取余再赋值
运算符的优先级
// 1 小括号 ()
// 2 一元运算符 ++,--,!
// 3 算数运算符 先*,/,%,后加减
// 4 关系运算符 >,>=,<,<=
// 5 相等运算符 ==,!=,===,!==
// 6 逻辑运算符 先&&后||
// 7 赋值运算符 =
// 8 逗号运算符 ,
流程控制
- 简单理解：流程控制就是来控制我们的代码按照什么结构顺序执行
- 三种结构：顺序结构，分支结构，循环结构
顺序结构流程控制
程序按照代码的先后顺序，依次执行
分支流程控制 if语句
由上到下执行代码过程中，根据不同的条件，执行不同路径的代码，从而获得不同结果
js提供两种分支结构语句：1.if语句 2.switch语句
- if语句语法结构
//单分支
if(条件表达式){
//条件成立执行的代码
}
//双分支
if(条件表达式){
//如果条件成立执行的代码
}else{
//否则执行的代码
}
//多分枝
if(条件表达式1){
//语句1
}else if (条件表达式2){
//语句2
}else if (条件表达式3){
//语句3
}else if (条件表达式4){
//语句4
}
...
}else{
//上述条件都不成立，执行此行代码
}
- 三元表达式
语法结构：条件表达式 ？ 表达式1 ： 表达式2
如果条件表达式为真，则返回表达式1的值，如果为假，则返回表达式2的值 - 分支流程控制switch
switch也是多分支语句，它基于不同的条件执行不同的代码，当要针对变量设置一系列的特定值的选项时，就可以使用switch
switch (表达式) {
case value1:
//表达式等于value1时执行的代码
break;
case value2:
//表达式等于value2时执行的代码
break;
case value3:
//表达式等于value3时执行的代码
break;
default:
//表达式不等于任何一个value时执行的代码
}
// 注意：表达式经常写成变量，表达式的值和value匹配时是全等
//必须须值和数据类型一样才行
// 当case没有break，则不会退出switch，是继续执行下一个case
- switc和if else if 的区别
1，一般情况下，两个语句可以相互转换
2，switch通常处理case为确定值的情况，而if更加灵活，常用于范围判断（大于，等于某个范围）
3，switch进行条件判断后，直接执行到程序的条件语句效率高。而if有几种条件，就要判断多少次
4，分支少，if执行效率比switc高
5，分支多，switch语句执行效率比较高，而且结构更清晰
循环结构
三种类型循环
1.for循环
2.while循环
3.do while循环
-
for循环
在循环中，一组被重复执行的代码被称为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句语法结构
for(初始化变量;条件表达式;操作表达式){
//循环体
}
// 初始化变量就是用var声明的一个普通变量，通常做为计数器
// 条件表达式，用来决定每一次循环是否继续执行，就是终止的条件
// 操作表达式是每次循环最后执行的代码，用于计数器变量更新
//执行过程
for(var i = 1; i <= 100; i++){
console.log('贝贝')
}
// 1.var i = 1; **注意在for循环里面只执行一次**
// 2.然后判断 i是否小于等于100 i <= 100;
// 3.结果为true 执行循环体，结果为false结束循环
// 4.最后执行 i++
// 5.然后继续判断i是否小于等于100，直到结果为false，才终止循环
- while循环
while语句可以在条件表达式为真的前提下，循环执行指定的一段代码，知道表达式不为真
语法结构
while(条件表达式){
//循环体代码
}
// 执行思路
// 1.先执行条件表达式，结果为true执行循环体，结果为false，退出循环
// 2.执行循环体代码
// 3.循环体执行完毕后，程序会继续判断执行表达式，如条件仍然为true，继续执行
// 循环体，知道循环条件为false，整个过程才结束
- do while循环
该循环先执行一次代码块，然后对条件进行判断，如果条件为真，就重复执行循环体，否则退出循环
语法结构
do{
//循环体
}while(条件表达式)
**注意**
跟while不同的地方在于，do while先执行一次循环体，再判断条件
- continue关键字
用于立即跳出本次循环，继续下一次循环
（本次循环体中continue后面的代码会少执行一次） - break关键字
用于立即跳出本次循环，循环结束
循环小结
三个循环很多情况下都可以相互替代使用
用来计数，跟数字相关的，更喜欢用for
while和do while可以做更复杂的判断条件，比for灵活
练习
for (var i = 1; i <= 100; i++) {
if (i == 1) {
console.log('一岁了');
} else if (i == 100) {
console.log('100岁了');
} else {
console.log('这个人' + i + '岁了');
}
}
//1+到100的累加和
var result = 0;
for (var i = 1; i <= 100; i++) {
result = result + i;
console.log(result);
}
//求1~100之间所有数的平均值
var sum = 0;
var pinjun = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
pinjun = sum / 100;
console.log(pinjun);
//求1~100所有偶数和奇数的和
var oushu = 0;
var jishu = 0;
for (var j = 1; j <= 100; j++) {
if (j % 2 == 0) {
oushu = oushu + j;
} else {
jishu = jishu + j;
}
}
console.log(oushu);
console.log(jishu);
//求1~100之间所有能被3整除的数
for (var k = 1; k <= 100; k++) {
if (k % 3 == 0) {
console.log(k);
}
}
//要求用户输入班级人数，之后依次输入每个学生的成绩
//最后打印出班级总的成绩以及平均成绩
var renshu = parseInt(prompt('请输入班级总人数'));
var sum = 0;
var pinjun = 0;
for (var i = 1; i <= renshu; i++) {
var j = parseInt(prompt('请输入第' + i + '个人的成绩'));
sum = sum + j;
}
pinjun = sum / renshu;
alert('班级总成绩' + sum);
alert('班级成绩的平均值' + pinjun);
//一行打印五个星星
var num = prompt('请输入星星的个数：');
var str = '';
for (var i = 1; i <= num; i++) {
str = str + '*';
}
console.log(str);
//打印五行五列星星★
var str = '';
for (var i = 1; i <= 5; i++) {
for (var j = 1; j <= 5; j++) {
str = str + '★';
}
str += '\n';
}
console.log(str);
//打印n行n列的星星
var hangshu = prompt('请输入行数：');
var lieshu = prompt('请输入列数：');
var str = '';
for (var i = 1; i <= hangshu; i++) {
for (var j = 1; j <= lieshu; j++) {
str += '★';
}
str += '\n';
}
console.log(str);
//打印倒三角形
var str = '';
for (var i = 1; i <= 10; i++) {
for (var j = i; j <= 10; j++) {
str += '★';
}
str += '\n';
}
console.log(str);
//打印正三角形
var str = '';
for (var i = 1; i <= 10; i++) {
for (var j = 1; j <= i; j++) {
str += '★';
}
str += '\n';
}
console.log(str);
//打印九九乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
str += j + 'x' + i + '=' + i * j + '\t';
}
str += '\n';
}
console.log(str);
//while 循环
//打印人的一生，从一到100岁
var i = 1;
while (i <= 100) {
console.log(i);
i++;
}
//计算1到100所有整数的和
var i = 1;
var sum = 0;
while (i <= 100) {
sum = sum + i;
i++;
}
console.log(sum);
//弹出一个提示框，你爱我吗，如果输入我爱你就结束，否则一直询问
var ai = prompt('你爱我吗？');
while (ai !== '我爱你') {
ai = prompt('你爱我吗');
}
alert('我也爱你啊');
//do while 循环
//打印人的一生1~100岁
var i = 1;
do {
console.log(i);
i++
} while (i <= 100)
//计算1~100的整数和
var i = 1;
var sum = 0;
do {
sum += i;
i++;
} while (i <= 100)
console.log(sum);
//弹出一个提示框，你爱我吗，如果输入我爱你就结束，否则一直询问
do {
var ai = prompt('你爱我吗？');
} while (ai != '我爱你')
//continue关键字
//只要遇见continue就退出本次循环，直接跳到i++
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue;
}
console.log('我正在执行第' + i + '次循环');
}
//求1~100之间，除了能被7整除之外的整数和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
continue;
}
sum += i;
}
console.log(sum);
//break关键字
//break 退出整个循环
for (var i = 1; i <= 5; i++) {
if (i == 3) {
break;
}
console.log('这是我执行的第' + i + '次循环');
}
// 练习
// 求1~100之间所有数的总和与平均值
var sum = 0;
var pinjun = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
console.log(sum / 100);
//求1~100之间所有偶数的和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
sum += i;
}
}
console.log(sum);
//求100以内7的倍数的总和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
sum += i;
}
}
console.log(sum);
//使用for循环打印矩形，要求每次只能输出一个❤
var str = ''
for (var i = 1; i <= 4; i++) {
for (var j = 1; j <= 5; j++) {
str = str + '❤';
}
str += '\n';
}
console.log(str);
//使用for打印三角形
var str = '';
for (var i = 1; i <= 5; i++) {
for (var j = 1; j <= i; j++) {
str += '❤';
}
str += '\n';
}
console.log(str);
//使用for循环打印99乘法表
var str = '';
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
str += j + 'x' + i + '=' + i * j + '\t';
}
str += '\n';
}
console.log(str);
//接收用户输入的用户名和密码，若用户名为admin，密码为123456
//则提示用户登录成功，否则让用户一直输入
var name1 = prompt('请输入用户名：');
var passd = prompt('请输入密码：');
while (name1 !== 'admin' && passd !== '12346') {
name1 = prompt('请输入用户名：');
passd = prompt('请输入密码：');
}
alert('登录成功');
//求1~100的累加值，但要求跳过个位为3的数
var sum = 0;
for (var i = 1; i <= 20; i++) {
if (i == 3 || ((i % 10) == 3)) {
continue;
}
sum += i;
}
console.log(sum);
数组
数组是一组数据的集合，其中每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式
- 利用new创建数组
var 数组名 = new Array(); //创建了一个空数组
- 利用字面量创建数组
var 数组名 = [] //数组的字面量是[]，声明数组并赋值称为数组的初始化
- 索引（下标）：用来访问数组的序号（从0开始）
- 遍历数组：就是把数组中的元素从头到尾访问一遍，使用"数组名.length"可以访问数组元素的数量（数组长度）
- 数组新增元素
可以通过修改length长度以及索引号添加数组元素
不要给数组名赋值，否则会覆盖掉原来的数据
练习
var arr = [1, 'si', 'beibei', 4, 6]
console.log(arr[2]);
var arr = ['星期1', '星期2', '星期3', '星期4', '星期5', '星期6', '星期日'];
for (var i = 0; i < 7; i++) {
console.log(i);
}
//求数组[2，6，1，7，4]里面所有元素的和及平均值
var arr = [2, 6, 1, 7, 4];
var sum = 0
var pinjun = 0;
for (var i = 0; i < arr.length; i++) {
sum = sum + arr[i];
}
pinjun = sum / arr.length;
console.log(sum, pinjun);
//求数组[2,6,1,77,52,25,7]的最大值
var arr = [2, 6, 1, 77, 52, 25, 7];
var max = arr[0];
for (var i = 0; i < arr.length; i++) {
if (max < arr[i]) max = arr[i];
}
console.log(max);
//新建数组，里面存放1~10
var arr = [];
for (var i = 0; i < 10; i++) {
arr[i] = i + 1;
}
console.log(arr);
// 把数组[2,0,6,1,77,0,52,0,25,7]中大于等于10的元素选出来放进新数组
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr1 = [];
//刚开始arr1.length就是0
for (var i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
arr1[arr1.length] = arr[i];
}
}
console.log(arr1);
//删除指定数组元素
//将数组[2,0,6,1,77,0,52,0,25,7]中的0去掉组成新数组
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var arr1 = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 0) {
arr1[arr1.length] = arr[i];
}
}
console.log(arr1);
//翻转数组
//将数组['red','green','blue','pink','purple']内容反过来存放
var arr = ['red', 'green', 'blue', 'pink', 'purple'];
var arr1 = [];
for (var i = arr.length - 1; i >= 0; i--) {
arr1[arr1.length] = arr[i];
}
console.log(arr1);
//冒泡排序
var arr = [5, 4, 3, 2, 1];
var temp;
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]) {
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
函数
概念：js里面，可能会定义非常多相同的代码，或功能相似的代码，这些代码可能需要大量重复使用，这时就可以使用js的函数
函数：就是封装了一段可以被重复执行的代码块
- 函数的使用：声明函数和调用函数
//1.声明函数
function 函数名 (){
//函数体
}
//2.调用函数
函数名();
function 声明函数的关键字
函数是做某件事情，函数名一般是动词
函数不调用，自己不执行
函数的封装：就是把一个或多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
简单理解：封装类似于将电脑配件整合装到机箱中
- 函数的参数
在声明函数时，可以在函数名后面的小括号添加一些参数，这些参数叫做形参，而在调用该函数时，同样也需要传递相同的参数，这些参数被称为实参
形参：形式上的参数，函数定义的时候传递的参数，当前并不知道是什么
实参：实际上的参数，函数调用时传递的参数，实参时传给形参的
参数的作用：在函数内部某些值不固定，我们可以通过参数在调用函数时传递不同的参数
- 函数形参和实参个数不匹配的情况
实参个数=形参个数 //输出正确结果
实参多于形参 //只取到形参个数
实参少于形参 //多的形参定义为undefind，结果为NaN
注意：在js中，形参默认值是undefind
函数可以调用另外一个函数
- 函数的另外一种声明方式
函数表达式（匿名函数）
var 变量名 = function(){}
var fun = function (){
console.log('我是匿名函数')
}
fun();
**注意**
fun是变量名，不是函数名
声明方式和变量差不多，变量里存的是值，函数表达式存的是函数
函数表达式也可以进行传递参数
return语句
1.函数只是实现某种功能，最终的结果需返回给函数的调用者，通过reurn
2.只要函数遇到return，就把后面的结果返回给函数调用者
3.函数名 () = return后面的结果
- return终止函数
return语句之后的代码不执行
return只能返回一个值，如果用逗号隔开多个值，以最后一个为准
函数没有return返回udefind - arguments的使用
当我们不确定有多少参数来传递时，可以用arguments来获取，在js中，arguments实际上它是当前函数的一个内置对象，所有函数都内置了这个对象，对象中存储了传递的所有实参
(1).arguments的展示形式是一个伪数组，所以可以遍历
伪数组具有以下特点
1.具有length属性
2.按索引方式存储数据
3.不具有数组的push，pop等方法
练习
//计算1~100的累加和
function getsum(num1, num2) {
var sum = 0;
for (var i = num1; i <= num2; i++) {
sum += i;
}
console.log(sum);
}
getsum(1, 99);
// 求任意两数的和
function getsum(num1, num2) {
return num1 + num2;
}
console.log(getsum(1, 5));
//求两个数的最大值
function getmax(num1, num2) {
if (num1 > num2) {
return num1;
} else {
return num2;
}
//return num1 > num2 ? num1 : num2;
}
console.log(getmax(78, 798));
//求数组中的最大值
function getmax(num) {
var max = num[0];
for (var i = 1; i < num.length; i++) {
if (num[i] > max) {
max = num[i]
}
}
return max;
}
var re = getmax([4, 8, 78, 9, 6]);
console.log(re);
//用户输入任意两个数字的任意运算，并且弹出结果
function yunsuan() {
var num1 = parseInt(prompt('请输入第一个数'));
var num2 = parseInt(prompt('请输入第二个数'));
var sum;
parseInt(num2);
var suanfa = prompt('您想进行何种运算？\n1.加法\n2.减法\n3.除法\n4.乘法')
if (suanfa == 1) {
sum = num1 + num2;
} else if (suanfa == 2) {
sum = num1 - num2;
} else if (suanfa == 3) {
sum = num1 / num2;
} else if (suanfa == 4) {
sum = num1 * num2;
}
return sum;
}
alert('运算结果为' + yunsuan());
//用户输入任意两个数的最大值
function max() {
var num1 = parseInt(prompt('请输入第一个数'));
var num2 = parseInt(prompt('请输入第二个数'));
var max;
if (num1 > num2) {
max = num1;
} else {
max = num2;
}
return max;
}
alert('最大值为' + max());
//用户输入任意三个数的最大值
function maxnum() {
var num1 = parseInt(prompt('请输入第一个数'));
var num2 = parseInt(prompt('请输入第二个数'));
var num3 = parseInt(prompt('请输入第二个数'));
var max;
if (num1 > num2 && num1 > num3) {
max = num1;
} else if (num2 > num1 && num2 > num3) {
max = num2;
} else if (num3 > num1 && num3 > num2) {
max = num3;
}
return max;
}
alert('最大值为' + maxnum());
//判断一个数是否为质数或者质数(只能被1和自身整除的数)
function zhishu() {
var num = parseInt(prompt('请输入一个正整数'));
var panduan = false;
var content = 0;
for (var i = 1; i <= num; i++) {
if (num % i == 0) {
content++;
}
}
if (content == 2) {
panduan = true;
}
return panduan;
}
alert(zhishu());
//arguments的使用
//求任意个数的最大值
function maxnum() {
var maxnum = arguments[0]
for (var i = 0; i < arguments.length; i++) {
if (maxnum < arguments[i]) {
maxnum = arguments[i]
}
}
return maxnum;
}
var re = maxnum(45, 781, 451, 64, 264);
console.log(re);
//翻转数组
var arr = [1, 2, 3, 4, 5, 6];
var arr1 = [];
function fanzhuan() {
for (var i = arr.length - 1; i >= 0; i--) {
arr1[arr1.length] = arr[i];
}
return arr1;
}
var re = fanzhuan(arr);
console.log(re);
//冒泡排序
function maopao(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
var re = maopao(t = [5, 4, 3, 2, 1]);
console.log(re);
//判断闰年
function eryue() {
var year = prompt('请输入年份：');
if (panduan(year)) {
alert('是闰年有29天');
} else {
alert('不是闰年有28天')
}
}
eryue();
function panduan(num) {
var flag = false;
if (num % 4 == 0 && num % 100 != 0 || num % 400 == 0) {
flag = true
}
return flag;
}
作用域和预解析
作用域
通常来说，一段程序代码中用到的名字并不是总是有效和可用的，而限定这个名字的可用性范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突
js作用域：就是代码变量名字在某个范围内起作用和效果
es6之前：全局作用域和局部作用域
- 全局作用域：整个script标签，或者是一个单独的js文件
- 局部作用域：（函数作用域）在函数内部就是局部作用域，这个代码的名字只在函数内部起效果和作用
根据作用域的不同，我们变量分为全局变量和局部变量
注意：如果在函数内部没有声明赋值的变量也属于全局变量
函数的形参也可以看作局部变量
从执行效率来说
1.全局变量只有在浏览器关闭时才会销毁，比较占内存资源
2.局部变量当我们程序执行完毕就会销毁，比较节约内存
- 作用域链(就近原则)
- 只要是代码就至少有一个作用域
- 写在函数内部的叫局部作用域
- 如果函数中还有函数，那么这个作用域中就又可以诞生一个作用域
- 根据内部函数可以访问外部函数变量这种机制，用链式查找决定哪些数据能被内部函数访问，就叫做作用域链
预解析
js代码由浏览器的js解析器执行，其运行时分为两步：预解析和代码执行
预解析：js引擎会把里面所有的var 和function提升到当前作用域的最前面
代码执行：从上往下
预解析分为变量预解析(变量提升)和函数预解析(函数提升)
变量提升：把所有变量声明提升到当前作用域的最前面，但是不赋值
函数提升：把所有函数声明提升到当前作用域最前面，不调用函数
对象
对象
对象是一个具体的事物
js中对象是一组无序的相关属性和方法的集合
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）
三种方式创建对象（object）
1.利用字面量创建对象
2.利用new Object创建对象
3.利用构造函数创建对象
利用字面量创建对象
对象字面量：就是{}里面包含了这个具体事物的属性和方法
var obj = {} //创建了一个空对象
var obj = {
uname:'贝贝',
age:18,
sex:''男,
say: function (){
console.log('我是贝贝');
}
}
// **注意**
// 多个属性和方法之间用逗号隔开
// 方法后面跟的是一个匿名函数
// 里面的属性或方法采取键值对的形式：键 属性名 ：值 属性值
// **使用对象**
// 1. 调用对象的属性 对象名.属性名
// console.log(obj.uname)
// 2. 调用对象属性的另一种方法 对象名['属性名']
// console.log(obj['age']);
// 3. 调用对象的方法 对象名.方法名()
// obj.say();
利用new Object创建对象
var obj = new Object(); //创建了一个空对象
obj.name = '贝贝';
obj.age = 18;
obj.sex = '男';
obj.say = function(){
console.log('我是贝贝');
}
// **注意**
// 1. 利用等号赋值的方法添加对象的属性和方法
// 2. 每个属性和方法用分号隔开
// 3. 调用方法和字面量创建对象一致
利用构造函数创建对象
为什么需要构造函数?
因为前面两种创建对象的方式一次只能创建一个对象
构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new一起使用。我们可以把对象中的一些公共的属性和方法抽取出来，然后封装到这个函数里
语法格式
function 构造函数名(){
this.属性 = 值
this.方法 = function(){
}
}
new 构造函数名();
function Star() {
//必须添加this
this.name = name;
this.ages = ages;
this.sex = sex;
this.say = function(h){
console.log(h);
}
}
//不需要return就能返回结果
var beibei = new Star('贝贝',18,'男');
//调用函数返回一个对象
//调用构造函数必须使用new
console.log(beibei.name);
console.log(beibei['ages']);
console.log(beibei.sex);
beibei.say('我是贝贝');
1.构造函数：泛指的某一大类 明星
2.对象：特指的一个具体事物 周柏豪
- new关键字执行过程
- new构造函数可以在内存中创建一个空对象
- this就会指向刚才创建的空对象
- 执行构造函数里面的代码，给这个空对象添加属性和方法
- 返回这个新对象（所以构造函数不需要return）
遍历对象
for in 语句：用来对数组或者对象属性进行循环操作
语法
for(变量 in 对象){}
for(k in obj){
console.log(k); // k变量输出得到属性名
console.log(obj[k]); //obj[k]得到属性值
}
练习
var keke = {
name: '可可',
type: '阿拉斯加犬',
ages: 5,
color: '中红色',
bark: function () {
console.log('汪汪汪');
},
showFilm: function () {
console.log('演电影');
}
}
console.log(keke.ages);
console.log(keke['color']);
keke.bark();
var mingren = new Object();
mingren.name = '鸣人';
mingren.sex = '男';
mingren.age = 19;
mingren.skill = function () {
console.log('影分身术');
}
console.log(mingren.name);
console.log(mingren['age']);
mingren.skill();
function Hero(name, type, blood) {
this.name = name;
this.type = type;
this.blood = blood;
this.attack = function (attack) {
console.log(attack);
}
}
var lianpo = new Hero('廉颇', '力量型', 500);
console.log(lianpo.name);
console.log(lianpo.type);
console.log(lianpo.blood);
lianpo.attack('近战');
var houyi = new Hero('后羿', '射手型', 100);
console.log(houyi['name']);
console.log(houyi['type']);
console.log(houyi['blood']);
houyi.attack('远程');
var diannao = {
color: 'red',
zhong: '25斤',
pingpai: 'daier',
xinghao: '3000',
kandianying: function () {
console.log('看电影');
console.log('敲代码');
console.log('听音乐')
console.log('打游戏')
}
}
for (k in diannao) {
console.log(diannao[k]);
}
var anniu = new Object();
anniu.kuan = 20;
anniu.gao = 22;
anniu.bg = 'red';
anniu.dianji = function () {
console.log('hi');
}
for (k in anniu) {
console.log(anniu[k]);
}
var che = {
zhongliang: '12',
color: 'red',
paizi: 'bentian',
xingwei: function () {
console.log('载人')
console.log('拉货')
console.log('耕田')
}
}
for (k in che) {
console.log(che[k]);
}
//翻转任意数组的函数
var arr = ['red', 'blue', 'yellow', 'green', 'pink']
var newArr = [];
function fanzhuan(arr) {
for (var j = arr.length - 1; j >= 0; j--) {
newArr[newArr.length] = arr[j];
}
return newArr;
}
var re = fanzhuan(arr);
console.log(re);
//排序
var arr = [4, 5, 7, 45, 21, 3, 14, 12, 124];
function paixu(arr) {
var fangfa = prompt('1.从小到大\n2.从大到小');
if (fangfa == 1) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
} else if (fangfa == 2) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] < arr[j + 1]) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
}
var re = paixu(arr);
console.log(re);
//简易计算器
function suanfa() {
var xuanxiang = 1;
var resual = 0;
while (xuanxiang >= 1 && xuanxiang <= 5) {
var xuanxiang = prompt('欢迎使用简易计算器：\n1.加法运算\n2.减法运算\n3.乘法运算\n4.除法运算\n5.退出\n请输入您的选项');
if (xuanxiang == 1) {
var num1 = parseInt(prompt('请输入第一个数'));
var num2 = parseInt(prompt('请输入第二个数'));
resual = num1 + num2;
alert(resual);
continue;
} else if (xuanxiang == 2) {
var num1 = prompt('请输入第一个数');
var num2 = prompt('请输入第二个数');
resual = num1 - num2;
alert(resual);
continue;
} else if (xuanxiang == 3) {
var num1 = prompt('请输入第一个数');
var num2 = prompt('请输入第二个数');
resual = num1 * num2;
alert(resual);
continue;
} else if (xuanxiang == 4) {
var num1 = prompt('请输入第一个数');
var num2 = prompt('请输入第二个数');
resual = num1 / num2;
alert(resual);
continue;
} else if (xuanxiang == 5) {
alert('正在退出');
break;
} else if (xuanxiang > 5) {
alert('输入有误，请重新输入');
suanfa();
}
}
}
suanfa();
700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
