标签:sea 需求 asc 长度 res bre 其他 命名规范 扩展
变量
什么是变量
白话: 变量就是一个装东西的盒子
通俗: 变量是用于存放数据的容器。我们通过变量名获取数据,甚至数据可以修改。
变量在内存中的存储
本质: 变量是程序在内存中申请的一块用来存放数据的空间
类似我们酒店的房间,一个房间就可以看做是一个变量
变量的使用:
变量的在使用时分为两步: 1.声明变量 2. 赋值
1.声明变量
var age; //声明一个名称为age的变量
var是一个JS关键字,用来声明变量。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管
age是程序员定义的变量名,我们要通过 变量名来访问内存中分配的空间
2.赋值
age = 10;//给age这个变量赋值为10
= 用来把右边的值赋给左边的变量空间中,此处代表赋值的意思
变量值是程序员保存到变量空间里的值
3.变量的初始化
var age = 18; //声明变量同时赋值为18
声明一个变量并赋值,我们称之为变量的初始化
变量语法扩展
1.更新变量
一个变量被重新赋值后,它原来的值就会被覆盖,变量值将以最后一次赋的值为准
var age = 18;
age =81; // 最后的结果就是81 因为18被覆盖掉了
2.同时声明多个变量
同时声明多个变量时,只需要写一个var,多个变量名之间使用英文逗号隔开
var age=10, gz=2000,name="xiaoxin";
3.声明变量的特殊情况
情况 | 说明 | 结果 |
---|---|---|
var age; console.log(age); | 只声明,不赋值 | undefined |
console.log(age) | 不声明,不负责,直接使用 | 报错 |
age = 10; console.log(age); | 不声明 只赋值 | 10 |
变量命名规范
由字母(A-Za-z)、数字 (0-9)、下划线(_)、美元符号($)组成,如:useAge,num01, _name
严格区分大小写, var app; 和var App; 是两个变量
不能以数字开头。 18age是错误的
不能是关键字、保留字。 列如: var、for、while
变量名必须有意义, MMD BBD nl->age
遵守驼峰命名法。首字母小写,后面单词的首字母需要的大写。myFirstName
数据类型
2.1为什么需要数据类型
在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型
2.2变量的数据类型
变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。Js是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定
js的变量数据类型是只有程序在运行过程中,根据等号右边的值来确定的
Js拥有动态类型,同时也意味着相同的变量可用作不同的类型
var x = 6; //x为数字
var x = "Bill"; //x为字符串
2.3数据类型的分类
JS把数据类型分为两类“
简单数据类型(Number,String,Boolean,Undefined,Null)
简单数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包含整数型和浮点型值,如21、0.21 | 0 |
Boolean | 布尔值类型,如true、false等价于1和0 | false |
String | 字符串类型 如"张三"注意咱们js里面,字符串都带引号 | "" |
Undefined | var a;声明了变量a但是没有给值,此时a=undefined | undefined |
Null | var a =null;声明了变量a为空值 | null |
数字型Number:
数字型进制
最常见的进制有二进制、八进制、十进制、十六进制
我们程序里面数字前面加0 表示八进制 010 八进制转换为十进制为8
数字的前面加0x 表示十六进制
数字型范围
JS中数值的最大值和最小值
Number.MAX_VALUE Number.MIN_VALUE
数字型三个特殊值
Infinity 代表无穷大 大于任何数值
-Infinity 代表无穷小 小于任何数值
NaN ,not a number 代表一个非数值
数字型里面的方法
isNaN() 这个方法用来判断非数字, 并且返回一个值,如果是数字返回的是false, 如果不是数字返回的是true
字符串型string
字符串引号嵌套
Js可以用单引号嵌套双引号,或者用双引号嵌套单引号(外双内单,外单内双)
var strMsg = ‘我是 "高帅富"程序员‘
字符串转义符
转义符都是\开头的,但是要写到引号里面.常用的转义符及其说明如下
转义符 | 解释说明 |
---|---|
\n | 换行符,n是newline的意思 |
\ \ | 斜杠\ |
\ ‘ | ‘ 单引号 |
\ * | " 双引号 |
\t | tab 缩进 |
\b | 空格,b是blank的意思 |
字符串长度
字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度
字符串拼接
多个字符串之间可以使用+进行拼接,其拼接方式为字符串+任何类型= 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串 比如
alert(‘hello‘ + ‘world‘) ;//hello world
我们经常会将字符串和变量来拼接,因为变量可以很方便地修改里面的值, 变量是不能添加引号的,因为加引号的变量会变成字符串
var age = 18;
console.log("邵祎"+age+"岁")
布尔型Boolean
布尔类型有两个值: true和false 其中true表示真(对),而false表示假(错)
布尔型和数字型相加的时候,true的值为1,false的值为0
console.log(true+1);//2
Undefined和Null
一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时,注意结果)
var variable;
console.log(variable); //undefined
console.log(‘你好‘+variable); //你好undefined
console.log(11+variable); //NaN
一个声明变量给null值,里面存的值为空(学习对象时,我们继续研究null)
var variable=null;
console.log(‘你好‘+variable); //你好null
console.log(11+variable); //11
复杂数据类型(object)
获取检测变量的数据类型
typeof可用来获取检测变量的数据类型
var num = 12
console.log(typeof(num)); // Number
2.4数据类型转换
4.1什么是数据类型转换
使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算,而需要转换变量的数据类型。通俗来说,就是把一种数据类型的变量转换成另外一种数据类型
我们通常会实现3种方式的转换:
转换为字符串类型
转换为数字型
转换为布尔型
4.2转换为字符串
方式 | 说明 | 案例 |
---|---|---|
toString() | 转成字符串 | var num=1; alert(num.toString()); |
String()强制转换 | 转成字符串 | var num = 1; alert(String(num)); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1; alert(num+‘我是字符串‘); |
toString()和String()使用方式不一样
三种转换方式,我们更喜欢用第三种加号拼接字符串转换方法,这一种方式也称之为隐式转换
4.3转换为数字型(重点)
方式 | 说明 | 案例 |
---|---|---|
parselnt(string)函数 | 将srting类型转换成整数数值型 | parseInt("78") |
parseFloat(string)函数 | 将string类型转换成浮点数值型 | parseFloat("78.21") |
Number()强制转换函数 | 将string类型转换为数值型 | Number("12") |
js隐式转换(- * /) | 利用算术运算隐式转换为数值型 | ‘12‘ - 0 |
注意: parseInt 和parseFloat单词的大小写,这2个重点
console.log(parseInt(‘120px‘)); //120 会去掉这个px单位
隐式转换是我们在进行算数运算的时候,JS自动转换了数据类型
4.4转换为布尔型
方式 | 说明 | 案例 |
---|---|---|
Boolean()函数 | 其他类型转换成布尔值 | Boolean(‘true‘) |
代表空、否定的值会被转换为false, 如‘‘、0、NaN、null、undefined
其余值都会被转换为true
console.log(Boolean(‘‘)); //false
console.log(Boolean(12)); //true
扩展阅读
标识符、关键字、保留字
标识符: 就是指开发人员为变量、属性、函数、参数取的名字
标识符不能是关键字或保留字
关键字: 是指JS本身已经使用了的字,不能再用它们充当变量名、方法名
保留字:实际上就是预留的"关键字",意思是现在虽然还不是关键字,但是未来可能会成为关键字,同样不能使用它们当变量名或方法名
JS运算符
3.1运算符简介
运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号
Js中常用的运算符有:
算术运算符、递增和递减运算符、比较运算符、逻辑运算符、赋值运算符
3.2 算术运算符
算术运算符概述:
概念:算术运算使用的符号,用于执行两个变量或值的算术运算
运算符 | 描述 | 实例 |
---|---|---|
+ | 加 | 10+20=30 |
- | 减 | 10-20=-10 |
* | 乘 | 10*20=200 |
/ | 除 | 10/20=0.5 |
% | 取余数(取模) | 返回除法的余数9%2=1 |
浮点数的精度问题
浮点数值的最高精度是17位小数,但在进行算术技术时其精度远远不如整数
var result = 0.1+0.2;// 结果不是0.3 而是: 0.3000000000000004
所以不要直接判断两个浮点数是否相等!
算术运算符是有优先级的,先乘除,后加减,有小括号先算小括号里面的
表达式和返回值
表达式: 是由数值、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解:是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果,返回给我们,我们称为返回值
3.3递增和递减运算符
递增和递减运算符概述
如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(--)运算符来完成
在Js中,递增(++)和递减(--)既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减)运算符。
注意: 递增和递减运算符必须和变量配合使用
递增运算符
前置递增运算符
++num 前置递增,就是自加1,类似于num = num+1,但是++num写起来更简单
先自加1,后返回值
后置递增运算符
num++ 后置递增,就是自加1,类似于num = num+1,但是num++写起来更简单
先返回原值,后自加1
递增运算符小结
前置递增和后置递增运算符可以简化代码的编写,让变量的值+1,比以前写法更简单
单独使用时,运行结果相同
与其他代码联用时,执行结果会不同
后置: 先原值运算,后自加(先人后己)
前置:先自加, 后运算(先己后人)
开发时,大多使用后置递增/减,并且代码独占一行,列如: num++ 或者num--
比较运算符
比较运算符概述
概念: 比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果
运算符名称 | 说明 | 案例 | 结果 |
---|---|---|---|
< | 小于号 | 1<2 | true |
> | 大于号 | 1>2 | false |
>= | 大于等于号(大于或者等于) | 2>=2 | true |
<= | 小于等于号(小于或者等于) | 3<=2 | false |
== | 判 等号(会转型) | 37==37 | true |
!= | 不等号 | 37!=37 | false |
=== !== | 全等 要求值和 数据类型都一致 | 37===‘37‘ | false |
= 小结
符号 | 作用 | 用法 |
---|---|---|
= | 赋值 | 把右边给左边 |
== | 判断 | 判断两边值是否相等(注意此时有隐式转换) |
=== | 全等 | 判断两边的值和数据类型是否完全相同 |
逻辑运算符
逻辑运算符概述
概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值,后面开发中经常用于多个条件的判断
逻辑运算符 | 说明 | 案例 |
---|---|---|
&& | "逻辑与",简称"与" and | true&&false |
|| | “逻辑或” 简称 "或" or | true||false |
! | “逻辑非” 简称 "非" not | !true |
逻辑与&& and 两侧都为true 结果才是true, 只要有一侧为false,结果就是false
2>1 && 3>1; 返回true 2>1&&3<1; 返回false
逻辑或|| or 两侧都为false 结果才是假 只要有一侧为true 结果就是true
2>3|| 1<2; 返回true
逻辑非 ! not 也叫作取反符,用来取一个布尔值相反的值,如true的相反值是false
!true 返回 false
短路运算(逻辑中断) 很重要
短路运算的原理: 当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值
逻辑与短路运算
语法: 表达式1&&表达式2
如果第一个表达式的值为真,则返回表达式2
如果第一个表达式的值为假,则返回表达式1
console.log(123&&456) 返回456 console.log(0&&456) 返回0
逻辑或短路运算
语法: 表达式1||表达式2
如果表达式1 结果为真 , 则返回的是表达式1
如果表达式 结果为假, 则返回表达式2
console.log(123||456); //返回123 console.log(0||456) 返回456
赋值运算符
概念: 用来把数据赋值给变量的运算符
赋值运算符 | 说明 | 案例 |
---|---|---|
= | 直接赋值 | var usrName = 我是值; |
+= 、-= | 加、减一个数 后再赋值 | var age=10; age+=5; //15 |
*=、/=、%= | 乘、除、取模 后在赋值 | var age = 2; age*=5;//10 |
运算法优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ -- ! |
3 | 算数运算符 | 先* / % 后+ - |
4 | 关系运算符 | > >+ < <+ |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先&& 后|| |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高
JS 流程控制--分支
流程控制:
在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能
简单理解: 流程控制就是来窘状我们的代码按照什么结构顺序来执行
流程控制主要有三种结构:
分别是 顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序
顺序流程控制
顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的
分支流程控制
分支结构:
由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果
js提供了两种分支结构语句 if语句 和swith语句
if语句
语法结构
if(条件表达式){
//执行语句
}
执行思路: 如果if里面的条件表达式结果为真,true则执行大括号里面的执行语句 ,如果if条件表达式结果为假 则不执行大括号里面的语句,则执行if语句后面的代码
if else 语句(双分支语句)
语法结构
//条件成立 执行if里面代码 否则执行else里面的代码
if (条件表达式){
// 【如果】条件成立执行的代码
}else{
//[否则] 执行的代码
}
if里面的语句 和else里面的语句 最终只能有一个语句执行 2选1
else后面直接跟大括号
if else if 语句(多分支语句)
多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1的过程
语法结构
if(条件表达式1){
//语句1;
}else if(条件表达式2){
// 语句2;
}else if(条件表达式3){
//语句3;
}else{
//最后的语句;
}
执行思路:
如果条件表达式1 满足就执行语句1 执行完毕后 退出整个if 分支语句
如果条件表达式1 不满足,则判断条件表达式2 满足的话,执行语句2 以此类推
如果上面的所有条件表达式都不成立,则执行else里面的语句
注意点
多分支语句还是多选1, 最后只能有一个语句执行
else if里面的条件理论上是可以任意多个的
else if 中间有个空格的
三元表达式
三元表达式也能做一些简单的条件选择。有三元运算符组成的式子称为三元表达式
语法结构
条件表达式 ? 表达式1:表达式2
执行思路:如果条件表达式结果为真,则返回表达式1的值,如果条件表达式结果为假,则返回表达式2的值
分支流程控制 switch语法
语法结构:
switch语句也是多分支语句,它用于基于不同的条件来执行不同的代码,当要针对变量设置一系列的特定值的选项时,就可以使用switch
switch(表达式){
case value1: 执行语句1; break;
case value2: 执行语句2;break;
....
default: 执行最后的语句;
}
执行思路: 利用我们的表达式的值 和case 后面的选项中相匹配,如果匹配上,就执行该case里面的语句,如果都没有匹配上,那么执行default里面的语句
switch注意事项
1.我们开发里面,表达式我们经常写成变量
2.我们num的值 和case 里面的值相匹配的时候是全等 必须是值和数据类型一致才可以 num===1
3.break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
switch语句和 if esle if 语句的区别
一般情况下,它们两个语句可以相互替换
switch...case...语句通常出来case为比较确定值的情况,而if...else...语句更加灵活,常用于 范围判断(大于、等于某个范围)
switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而if...else语句有几种条件,就得判断多少次
当分支比较少时,if...esle语句的执行效率比switch语句高
当分支比较多时,switch语句的执行效率比较高,而且结构更清晰
JS流程控制--循环
循环的目的: 在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句
在JS中,主要有三种类型的循环语句: for循环,while循环,dowhile循环
for循环
在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件。由循环体及循环的终止条件组成的语句,被称之为循环语句
语法结构:
for循环主要用于把某些代码循环若干次,通常跟计数有关系,其语法结构如下
for (初始化变量; 条件表达式; 操作表达式){
//循环体
}
初始化变量 就是用var声明的一个普通变量,通常用于作为计数器使用
条件表达式, 就是用来决定每一次循环是否继续执行,就是终止的条件
操作表达式 是每次循环最后执行的代码,经常用于我们计数器变量进行更新(递增或者递减)
for循环的执行过程
1.首先执行里面的计数器变量 var i= 1 但是这句话在for 里面只执行一次
2.去i<=100 来判断是否满足条件, 如果满足条件, 就去执行循环体,不满足条件退出循环
3.最后去执行 i++ i++是单独写的代码 递增。 第一轮循环结束
4.接着去执行 i<=100 如果满足条件,就去执行循环体,不满足条件退出循环 第二轮
双重for循环概述
很多情况下,单层for循环并不能满足我们的需求,比如我们要打印一个5行5列的图形,打印一个倒直角三角形等,此时就可以通过循环嵌套来实现
循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构,列如再for循环中,可以再嵌套一个for循环,这样的for循环我们称之为双重for循环
语法结构
for(外层的初始化变量;外层的条件表达式;外层的操作表达式)
{
for(里层的初始化变量;里层的条件表达式;里层的操作表达式)
{
//执行语句;
}
}
2.我们可以把里面的循环看做是外层循环的语句
3.外层循环执行一次,里面的循环执行全部
for小结
for循环可以重复执行某些相同代码
for循环可以重复执行些不同的代码,因为我们有计数器
for循环可以重复执行某些操作,比如算术运算符加法操作
随着需求的增加,双重for循环可以做更多、更好看的效果
双重for循环,外层循环一次,内层for循环全部执行
for循环是循环条件和数字直接相关的循环
分析比写代码更重要
while循环
while语句可以再条件表达式为真的前提下,循环执行指定的一段代码,直到表达式不为真时结束循环
while语句的语法结构如下:
while(条件表达式){
//循环体代码
}
执行思路:
1.先执行条件表达式,如果结果为true,则执行循环体代码,如果为false,则退出循环,执行后面代码
2.执行循环体代码
3.循环体代码执行完毕后,程序会继续判断执行条件表达式,如条件仍未true,则会继续执行循环体,直到循环条件为false时,整个循环过程才会结束
4.里面应该也有计数器 初始化变量
5.里面应该也有操作表达式 完成计数器的更新 防止死循环
do while 循环
do...while语句其实是while语句的一个变体。该循环会先执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环
语句结构
do{
//循环体
} while(条件表达式)
执行思路: 跟while不同的地方在于, do while 先执行一次循环体,在判断条件。如果条件表达式结果为真,则继续执行循环体,否则退出循环
注意: 我们会发现do..while循环语句至少会执行一次循环体代码
循环小结
JS中循环有for、while、do while
三个循环很多情况下都可以相互替代使用
如果是用来计数,跟数字相关的,三者使用基本相同,但是我们更喜欢用for
while 和 do...while 可以做更复杂的判断条件,比for循环灵活一些
while 和 do...while执行顺序不一样,while 先判断后执行,do..while先执行一次,在判断
while 和 do...while执行次数不一样, do...while至少会执行一次循环体,而while可能一次也不执行
实际工作中,我们更常用for循环语句,它写法更简洁直观。重点学习
continue 和 break 关键字
continue关键字
用于立即跳出本次循环,继续下一次循环(本次循环体中continue之后的代码就会少执行一次)
break关键字
用于立即跳出整个循环(循环结束)
JS数组
数组的概念:数组是指一组数据的集合,其中的每个数据被称为元素,在数组中中可以存放任意类型的元素,数组是一种将一组数据存储在单个变量名下的优雅方式
var arr = [1,2,3,4,5]
创建数组
JS中创建数组有两种方式:
利用new创建数组
var 数组名 = new Array()
var arr = new Array() //创建一个新的空数组
利用数组字面量创建数组
1.使用数组字面量方式创建空的数组
var 数组名 = [];
2.使用数组字面量方式创建带初始值的数组
var 数组名 = [‘小白‘,‘小黑‘,‘大黄‘,‘瑞琪‘]
数组里面的数据一定要用逗号分隔 数组里面的数据我们称为数据元素
数组中可以存放任意类型的数据,列如字符串、数字、布尔值等
获取数组中的元素
数组的索引
索引(下标): 用来访问数组元素的序号(数组下标从0开始)
数组可以通过索引来访问、设置、修改对应的数组元素,我们可以通过"数组名[索引]"的形式来获取数组中的元素
这里 的访问就是得到的意思
var arrStus = [1,2,3]
//获取数组中的第2个元素
alert(arrStus[1])
遍历数组
遍历:就是把 数组中的每个元素从头到尾都访问一次 通过循环的方式遍历数组
因为我们的数组索引号从0开始,所有循环中的i必须从0开始 i<数组元素个数
数组的长度
使用"数组名.length" 可以访问数组元素的数量(数组长度)
var arr = [1,2,3,4] arr.length
数组的长度是元素个数 不要跟索引号混淆
arr.length 动态检测数组元素的个数
数组中新增元素
可以通过修改length长度以及索引号增加数组元素
可以通过length长度来实现数组扩容的目的
var arr = [‘red‘,‘green‘,‘blue‘,‘pink‘]
arr.length = 7
console.log(arr[4]) //undefined
其中索引号 是4,5,6的 空间没有给值,就是声明变量未给值,默认值就是undefined
通过修改数组索引新增数组元素
可以通过修改数组 索引的方式追加数组元素
var arr = [‘red‘,‘green‘,‘blue‘,‘pink‘]
arr[4] = ‘gray‘
不要直接给数组名的赋值,否则会覆盖掉以前的数组
冒泡排序:
是一种算法,把一系列的数据按照一定的顺序进行排列显示(从小到大或从大到小)
JS函数
函数的概念
在JS里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。虽然for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用JS中的函数
函数:就是封装了一段可以被重复执行调用的代码块 目的:就是让大量代码重复使用
函数的使用
函数在使用时分为两步:声明函数和调用函数
声明函数:
function 函数名(){
//函数体
}
注意:
function 声明函数的关键字 全部小写
函数是做某件事情, 函数名一般是动词
函数不调用自己不执行
调用函数:
函数名();
注意:
调用函数的时候千万不要忘记加小括号
注意:声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码
函数的封装:
函数的封装是把一个或多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口
简单理解:封装类似于将电脑配件整合组装到机箱中(类似快速打包)
函数的参数
形参和实参
function 函数名(形参1,形参2....){ //在声明函数的小括号里面是形参(形式上的参数)
}
函数名(实参1,实参2....) //在函数调用的小括号里面是实参(实际的参数)
形参和实参的执行过程
function cook(aru){//形参是接收实参的 aru = ‘酸辣土豆丝‘ 形参类似于一个变量
console.log(aru)
}
cook(‘酸辣土豆丝‘)
参数的作用:在函数内部 某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去
注意点:
1.多个参数之间用逗号隔开
2.形参可以看做是不用声明的变量
函数形参和实参不匹配问题:
function getSum(num1,num2){
console.log(num1+num2)
}
1.如果实参的个数和形参的个数一致,则正常输出结果
getSum(1,2) 返回3
2.如果实参的个数多于形参的个数 只取到形参的个数
getSum(1,2,3) 返回3
3.如果实参的个数小于形参的个数 多于的形参定义为undefined 最终的结果就是NaN
形参可以看做是不用声明的变量 num2是一个变量但是没有接受值,结果就是undefined
getSum(1); //NaN
建议 我们尽量让实参和形参的个数相匹配
小结:
函数可以带参数也可以不带参数
声明函数的时候,函数名括号里面的是形参,形参的默认值为undefined
调用函数的时候,函数名括号里面的实参
多个参数中间用逗号分隔
形参的个数可以和实参个数不匹配,但结果不可预计,我们尽量要匹配
函数的返回值
return语句
有时候,我们会希望函数将值返回给调用者,此时我们用return语句就能实现
函数的返回值格式
function 函数名(){
return 需要返回的结果;
}
函数名();
注意:
1.我们函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名() 通过return实现的
2.只要函数遇到return 就把后面的结果 返回给函数的调用者
函数名() = return后面的结果
3.在我们的实际开发里面,我们经常用一个变量来接受函数的返回结果,使用更简单
return终止函数
return语句之后的代码不被执行
return 只能返回一个值。如果用逗号隔开多个值,以最后一个为准
如果有return 则返回的是 return后面的值,如果函数没有return 将返回undefined
break、continue、return的区别
break: 结束当前的循环体(如for、while)
continue:跳出本次循环,继续执行下次循环(如 for、while)
return:不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码
arguments的使用
当我们不确定有多少个参数传递的时候,可以用arguments来获取,在JS中,arguments实际上它是当前函数的一个内置对象。所有函数都内置了arguments对象,arguments对象中存储了传递的所有实参
//只有函数才有arguments对象 而且是每个函数都内置好了这个arguments
function fn(){
console.log(arguments[2]) //返回3
我们可以按照数组的方式遍历arguments
}
fu(1,2,3)
伪数组 并不是真正意义上的数组
1.具有数组的length属性
2.按照索引的方式进行存储的
3.它没有真正数组的一些方法 pop()等
函数可以调用另外一个函数
因为每个函数都是独立的代码块,用于完成特殊任务,因此经常会用到函数相互调用的情况
+ function fn1(){ + console.log(111); + fn2(); + console.log(‘fn1‘) + } + function fn2(){ + console.log(222); + console.log(‘fn2‘) + } + fn1()
函数的两种声明方式
1.利用函数关键字自定义函数(命名函数 )
function fn(){
}
fu();
2.函数表达式(匿名函数)
var 变量名 = function(){} ? + 声明函数 + var fun = function(){} + 调用函数 + fun()
fun是变量名 不是函数名
函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数
函数表达式也可以进行传递参数
JS作用域
作用域概述
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突
简单来说:JS作用域:就是代码名字(变量) 在某个范围内起作用和效果
JS的作用域(es6)之前: 全局作用域 局部作用域
+ 全局作用域:整个script标签 或者是一个单独的js文件 + var num = 10 + 局部作用域(函数作用域):在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用 + function fn(){ + var num = 20 两个num作用域不同,不会有影响的 + }
变量在作用域:
根据作用域的不同,我们变量分为全局变量和局部变量
1.全局变量:在全局作用下的变量 在全局下都可以使用
var num = 10; num就是一个全局变量
注意:如果在函数内部 没有声明直接赋值的变量也是全局变量 num2 = 10
2.局部变量 在局部作用域下的变量 后者在函数内部的变量就是局部变量
注意:函数的形参也可以看做是局部变量
function fun(){
var num1 = 10; //num1就是局部变量,只能在函数内部使用
}
3.从执行效率来看全局变量和局部变量
1.全局变量只有浏览器关闭的时候才会销毁,比较占内存资源
2.局部变量 当我们程序执行完毕就会销毁 比较节约内存资源
JS没有块级作用域 js也是在es6的时候新增的块级作用域
块级作用域{} if{} for{}
作用域链
只要是代码,就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域
根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作 作用域链 就近原则
+ var num = 10; + function fn(){ //外部函数 + var num = 20 + function fun(){//内部函数 + console.log(num); 输出20 + } + fun(); + } + fn();
JS预解析
JS代码是由浏览器中的JS解析器来执行的。JS解析器在运行JS代码的时候分为两步:预解析和代码执行
预解析:
js引擎会把js 里面所有的var 还有function 提升到当前作用域的最前面
代码执行:
按照代码书写的顺序从上往下执行
预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
+ console.log(num) ;//返回undefined + var num = 10; + //相当于执行了以下代码 + var num; + console.log(num); + num = 10;
函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数
+ fn(); + function fn(){ + console.log(111) + }
JS对象
什么是对象?
现实生活中:万物皆对象,对象是一个具体的事物,看得见摸得着的实物。列如:一本书、一辆汽车、一个人可以是‘对象’,一个数据库、一张网页、一个与远程服务器的连接也可以是‘对象’
在JS中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,列如字符串、数组、数组、函数等
对象是由属性和方法组成的
属性: 事物的特征, 在对象中用属性来表示(常用名词)
方法: 事物的行为,在对象中用方法来表示(常用动词)
为什么需要对象
保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。如果要保存一个人的完整信息呢?
列如 将 小鑫的个人的信息保存在数组中的方式为:
var arr = [‘小鑫‘,‘女‘,90,160]
JS中的对象表达结构更清晰,更强大。小鑫的个人信息在对象中的表达结构为
+ person.name = ‘小鑫‘
+ person.sex = ‘男‘
+ person.age = 128;
+ person.height = 154;
创建对象的三种方式
利用字面量创建对象
对象字面量:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法
+ var obj = {}; //创建了一个空的对象 + var obj = { + uname: ‘小鑫‘, + age : 18, + sex : ‘女‘, + sayHi : function(){ + console.log(‘hi‘) + } + } + 1.里面的属性或者方法我们采取键值对的形式 键属性名:值 属性值 + 2.多个属性或者方法中间用逗号隔开的 + 3.方法冒号后面跟的是一个匿名函数
使用对象
+ 1.调用对象的属性,我们采取 "对象名.属性名" + console.log(obj.uname) + 2.调用属性还有一种方法 对象名[‘属性名‘] + console.log(obj[‘age‘]) + 3.调用对象的方法 对象名.方法名() + obj.sayHi()
变量、属性、函数、方法的区别
变量和属性的相同点,他们都是用来存储数据的
变量 单独声明并赋值 使用的时候直接写变量名 单独存在
属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性
函数和方法的相同点: 都是实现某种功能 做某件事
函数是单独声明 并且调用的 函数名() 单独存在的
方法 在对象里面 调用的时候 对象.方法名() 方法用来描述该对象的行为和功能
利用new Object创建
跟我们前面学的 new Array() 原理一致
var obj = new Object();//创建了一个空的对象 ? + obj.uname = ‘小鑫‘; + obj.age = 18; + obj.sex = ‘男‘; + obj.sayHi = function(){ + console.log("小鑫喜欢邵祎"); + } + 1.我们是利用等号=赋值的方法 添加对象的属性和方法 + 2.每个属性和方法之间用 分号结束
调用对象 和上面的一样
利用构成函数创建对象
什么需要使用构造函数
就是因为我们前面两种创建对象的方法一次只能创建一个对象
一次创建一个对象,里面很多的属性和方法是大量相同的,因此我们可以利用函数的方法,重复这些相同的代码,我们就把 这个函数称为构造函数
因为这个函数不一样,里面封装的不是普通代码,而是对象
构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
构造函数:
是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面
构造函数的语法格式:
+ function 构造函数名(){ + this.属性 = 值; + this.方法 = function(){} + } + new 构造函数名()
举例说明
+ function Stat(uname,age,sex){ + this.name = uname + this.age = age + this.sex = sex + this.sing = function(){} + } + var ldh = new Stat(‘刘德华‘,18,‘男‘); //调用函数返回的是一个对象 + console.log(ldh.name); //接着就可以使用访问对象的方式输出结果
注意:
1.构造函数名字首字母要大写
2.我们构造函数不需要return 就可以返回结果
3.我们调用构造函数 必须使用new
4.我们只要new Star() 调用函数就创建了一个对象
5.我们的属性和方法前面必须添加this
构造函数和对象
构造函数,如Stars() 抽象了对象的公共部分,封装到了函数里面,它泛指某一大类(class)
创建对象,如 new Starts() 特指某一个,通过new关键字创建对象的过程我们也称为对象实列化
new关键字
new关键字执行过程
1.new 构造函数可以在内存中创建了一个空的对象
2.this 就会指向刚才创建的空对象
3.开始执行构造函数里面的代码,给这个空对象添加属性和方法
4.返回这个对象
遍历对象属性
for...in语句用于对数组或者对象的属性进行循环操作 基本格式为
+ for (变量 in 对象){ + } + var obj = { + name: ‘小鑫‘, + age : 18, + sex : ‘男‘ + } + for (var k in obj){ + console.log(k); //k变量输出 得到的是 属性名 + • console.log(obj[k]); // obj[k]得到的是里面的属性值 + }
小结:
1.对象可以让代码结构更清晰
2.对象复杂数据类型object
3.本质:对象就是一组无序的相关属性和方法的集合
4.构造函数泛指某一大类,比如苹果、不管是红苹果还是绿苹果,都统称为苹果
5.对象实例特指一个事物,比如这个苹果,正在给你们讲课的pink老师等
for....in语句用于对 对象的属性进行循环操作
JS内置对象
什么是内置对象
JS中的对象分为3种:自定义对象,内置对象、浏览器对象
前面两种对象是JS基础内容,属于ECMAScript; 第三个浏览器对象属于我们JS独有的
内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)
内置对象最大的优点就是帮助我们快速开发
JS提供了多个内置对象:Math、Date、Array、String等
Math对象
Math数学对象,不是一个构造函数,所以我们不需要new来调用,而是直接使用里面的属性和方法即可
Math概述:Math对象不是构造函数,它具有数字常数和函数的属性和方法。跟数学相关的运算(求绝对值,取整、最大值等) 可以使用Math中的成员
+ Math.PI //圆周率 + Math.floor() //向下取整 往最小了取值 + Math.ceil() //向上取整 往最大了取值 + Math.round() //四舍五入版 就近取整 注意-3.5 结果是-3 + Math.abs() //绝对值 + Math.abs(‘-1‘) //隐式转换 会把字符串型-1 转换为数字型 + Math.max() / Math.min() //求最大值和最小值
随机数方法random()
Math.random()返回一个随机的小数 范围在[0,1)
这个方法里面不跟参数
我们想要得到两个数之间的随机整数 并且 包含这2个整数
+ 封装一个函数 + fucntion getRandom(min,max){ + return Math.floor(Math.random()*(max-min+1))+min + }
日期对象Date()
Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象
1.使用Date
var date = new Date(); 返回当前的时间
2.参数常用的写法 数字型 2019,10,01 或者是字符串型 ‘2019-10-1 8:8:8‘
var date1 = new Date(2019,10,1); 返回的是11月 不是10月
var date2 = new Date( ‘2019-10-1 8:8:8‘);
日期格式化
获取日期指定的部分
方法名 | 说明 | 代码 |
---|---|---|
getFullYear() | 获取当年 | dObj.getFullYear() |
getMonth() | 获取当月(0-11) 需要加1 获取正确月份 | dObj.getMonth() |
getDate() | 获取当天日期 | dObj.getDate() |
getDay() | 获取星期几(周日0到周六 6) | dObj.getDay() |
getHours() | 获取当前小时 | dObj.getHours() |
getMinutes() | 获取当前分钟 | dObj.getMinutes() |
getSeconds() | 获取当前秒钟 | dObj.getSeconds() |
获取当前的年
+ var date = new Date(); + date.getFullYear();
获得Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1日过了多少毫秒数
+ 1.通过valueOf() getTime() + var date = new Date(); + console.log(date.valueOf()) //就是 我们现在时间 距离1970.1.1 总的毫秒数 + console.log(date.getTime()) + 2.简单的写法(最常用的写法) + var date1 = +new Date(); // +new Date() 返回的就是总的毫秒数 + 3.H5 新增的 获得总的毫秒数 + console.log(Date.now())
数组对象
创建数组的两种方式
+ 1.利用数组字面量创建 + var arr = [1,2,3]; + console.log(arr[0]) + 2.利用new Array() + var arr1 = new Array(); //创建了一个空的数组 + var arr1 = new Array(2);//这个2表示 数组的长度为2 里面有2个空的数组元素 + var arr1 = new Array(2,3);//等价于[2,3] 这样写表示 里面有2个数组元素 是2和3
检测是否为数组
+ 1.instanceof 运算符 它可以用来检测是否为数组 + var arr = [] + console.log(arr instanceof Array) //检测arr是否为数组 返回True + 2.Array.isArray(参数) 检测参数是否为数组 H5新增的方法,ie9以上版本支持 + var arr = [] + console.log(Array.isArray(arr)) 返回True
添加删除数组元素的方法
方法名 | 说明 | 返回值 |
---|---|---|
push(参数1...) | 末尾添加一个或多个元素,注意修改原数组 | 并返回新的长度 |
pop() | 删除数组最后一个元素,把数组长度减1 无参数、修改原数组 | 返回它删除的元素的值 |
unshift(参数1...) | 向数组的开头添加一个或更多元素, 注意修改原数组 | 并返回新的长度 |
shift() | 删除数组的第一个元素,数组长度减 1 无参数、修改原数组 | 并返回第一个元素的值 |
+ push() 的用法 ? + var arr = [1,2,3] + arr.push(4) 返回[1,2,3,4] + 1.push是可以给数组追加新的元素 + 2.push()参数直接写数组元素就可以了 + 3.push完毕之后,返回的结果是 新数组的长度 + 4.原数组也会发生变化 ? + unshift()用法 ? + var arr = [1,2,3] + arr.unshift(4) 返回[4,1,2,3]
数组排序
方法名 | 说明 | 是否修改原数组 |
---|---|---|
reverse() | 颠倒数组中元素的顺序,无参数 | 该方法会改变原来的数组,返回新数组 |
sort() | 对数组的元素进行排序 | 该方法会改变原来的数组,返回新数组 |
+ reverse()的用法 ? + var arr = [‘pink‘,‘red‘,‘blue‘] + arr.reverse() + console.log(arr) ? + sort()的用法 ? + var arr1 = [3,4,7,1] + arr1.sort(function(a,b){ + return a - b; 升序的顺序排列 + return b- a; 降序的顺序排列 + })
数组索引方法
方法名 | 说明 | 返回值 |
---|---|---|
indexOf() | 数组中查找给定元素的第一个索引 | 如果存在返回索引号 如果不存在,则返回-1 |
lastIndexOf() | 在数组中的最后一个的索引 | 如果存在返回索引号 如果不存在,则返回-1 |
indexOf(数组元素) 返回该数组元素的索引号 它只返回第一个满足条件的索引号
var arr = [‘pink‘,‘red‘,‘blue‘] console.log(arr.indexOf(‘blue‘)) 返回2
数组转换为字符串
方法名 | 说明 | 返回值 |
---|---|---|
toString() | 把数组转换成字符串,逗号分隔每一项 | 返回一个字符串 |
join(‘分隔符‘) | 方法用于把数组中的所有元素转换为一个字符串 | 返回一个字符串 |
用法
+ var arr = [1,2,3]; + console.log(arr.toString()) 返回1,2,3 + console.log(arr.join(‘-‘)) 返回1-2-3
数组其他方法
方法名 | 说明 | 返回值 |
---|---|---|
concat() | 连接两个或多个数组 不影响原数组 | 返回一个新的数组 |
slice() | 数组截取 slice(begin,end) | 返回被截取项目的新数组 |
splice() | 数组删除splice(第几个开始,要删除几个) | 返回被删除项目的新数组 注意,这个会影响原数组 |
+ concat() 用法 ? + var arr = [1,2,3,4,5,6,7] + var arr1 = [8,9,10] + console.log(arr.concat(arr1)) #[1,2,3,4,5,6,7,8,9,10] ? + slice()用法 ? + var arr = [1,2,3,4,5,6,7] + console.log(arr.slice(2,4)) 返回2,3 ? + splice()用法 ? + var arr = [1,2,3,4,5,6,7] + console.log(arr.splice(2,4)) 返回3,4,5,6
字符串对象
基本包装类型
就是把简单数据类型 包装成为了 复杂数据类型 这样基本数据类型就有了属性和方法
执行过程如下
1.把简单数据类型包装为复杂数据类型
var temp = new String(‘andy‘)
2.把临时变量的值 给str
str = temp
3.销毁这个临时变量
temp = null;
字符串的不可变性
指的是里面的值不可变,虽然看上去可以改变内容,但其实地址变了,内存中新开辟了一个内存空间
var str = ‘abc‘;
str = ‘hello‘
//当重新给str赋值的时候,常量 ‘abc‘不会被修改,依然在内存中
//重新给字符串赋值,会重新在内存中开辟空间,这个特点就是字符串的不可变
//由于字符串的不可变,在大量拼接字符串的时候会有效率问题
根据字符串返回位置
字符串的所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串
方法名 | 说明 |
---|---|
indexOf(‘要查找的字符‘,开始的位置’) | 返回指定内容在元字符串中的位置,如果找不到就返回-1,开始的位置是index索引号 |
lastIndexOf() | 从后往前找,只找第一个匹配的 |
var str = ‘改革春风吹满地,春风来了‘
str.indexOf(‘春‘) 返回2
str.indexOf(’春‘,3) 返回8
根据位置返回字符(重点)
方法名 | 说明 | 使用 |
---|---|---|
charAt(index) | 返回指定位置的字符(index字符串的索引号) | str.charAt(0) |
charCodeAt(index) | 获取指定位置处字符的ASCII码(index索引号) | str.charCodeAt(0) |
str[index] | 获取指定位置处字符 | HTML5,IE8+支持 和charAt()等效 |
+ charAt(index)的用法 ? + var str = ‘andy‘ + str.charAt(3) 返回y + 遍历所有的字符 + for (var i = 0;i<str.length;i++) + { + str.charAt(i) + } ? + charCodeAt(index)的用法 目的: 判断用户按下了那个键 ? + var str = ‘andy‘ + str.charCodeAt(0) 返回97 ? + str[index]的用 ? + var str = ‘andy‘ + str[0] 返回a
字符串操作方法(重点)
方法名 | 说明 |
---|---|
concat(str1,str2,str3....) | concat()方法用于连接两个或多个字符串,拼接字符串,等效于+, +更常用 |
substr(start,length) | 截取字符串 从start位置开始(索引号),length取的个数 重点记住这个 |
slice(start,end) | 从start位置开始,截取到end位置, end取不到(他们俩都是索引号) |
substring(start,end) | 从start位置开始,截取到end位置,end取不到 基本和slice相同,但是不接受负值 |
substr()的用法
var str1 = ‘改革春风吹满地‘
str1.substr(2,2) 返回春风 第一个2是索引号的2 从第几个开始,第二个是取几个字符
其他方法
+ 1.替换字符 replace(‘被替换的字符‘,‘替换为的字符‘) 它只会替换第一个字符 + var str = ‘andy‘ + str.replace(‘a‘,‘b‘) 返回bndy + 2.字符串转换为数组 split(‘分隔符‘) + var str2 = ‘red,pink,blue‘ + str2.split(‘,‘) 返回[‘red‘,‘pink‘,‘blue‘] + var str2 = ‘red&pink&blue‘ + str2.split(‘&‘) 返回[‘red‘,‘pink‘,‘blue‘] + 3.str.toUpperCase() //转换大写 + 4.str.toLowerCase() //转换小写
JS简单类型与复杂类型
简单类型与复杂类型
简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型
值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型 string、number、boolean、undefined、null
简单数据类型 null 返回的是一个空的对象 object
var timer = null
typeof time; 返回null
引用类型:复杂数组类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型 通过new关键字创建的对象(系统对象,自定义对象),如Object,Array,Date等
堆和栈空间分配区别:
1.栈(操作系统):由操作系统自动分配释放存放函数的参数值,局部变量的值等。其 操作方式类似于数据结构的栈;简单数据类型存放到栈里面
2.堆(操作系统):存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收 复杂数据类型存放到堆里面
简单类型的内存分配
值类型(简单数据类型): string、number、boolean、undefined、null
值类型变量的数据直接存放在变量(栈空间)中 存放的是值
复杂数据类型内存分配
引用类型(复杂数据类型):通过new关键字创建的对象(系统对象,自定义对象),如Object,Array,Date等
首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据
简单类型传参
函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量
+ function fn(a){ + a++; + console.log(a); //输出11 + } + var x = 10; + fn(x) + console.log(x) //输出10
复杂类型传参
函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保持的堆地址复制给了形参,形参和实参其实保持的是同一个堆地址,所以操作的是同一个对象
+ function Person(name){ + this.name = name + } + function f1(x){ x = p + console.log(x.name) 返回xiaoxin + x.name = ‘xiaoxinxin‘ + console.log(x.name) 返回xiaoxinxin + } + var p = new Person(‘xiaoxin‘) + console.log(p.name) //返回xiaoxin + f1(p) + console.log(p.name) 返回xiaoxinxin}
+ var num = 10;
+ function fn(){ //外部函数
+ var num = 20
+ function fun(){//内部函数
+ console.log(num); 输出20
+ }
+ fun();
+ }
+ fn();
标签:sea 需求 asc 长度 res bre 其他 命名规范 扩展
原文地址:https://www.cnblogs.com/fengzi759/p/12074655.html