基础[前端基础]"/>
Javascript基础[前端基础]
js介绍
文章目录
- js介绍
- 什么是js
- 作用
- js组成
- js书写位置
- 内联js
- 内部js
- 外部js 【常用】
- js的注释
- 单行注释
- 块注释,多行注释
- js的结束符
- 输入和输出语法
- 字面量(literal)
- 变量
- 变量是什么
- 变量的基本使用
- 变量的本质
- 变量命名规则与规范
- 变量扩展
- 数据类型
- 数据类型
- 数字类型(number)
- 字符串类型(string)
- 字符串拼接
- 模板字符串
- 布尔类型(Boolean)
- 未定义类型(undefined)
- 空类型(null)
- 检测数据类型
- 控制台输出语句和监测数据类型
- 类型转换
- 为什么要类型转换
- 隐式转换
- 显示转换
- 转换为数字型
- 转换成字符型
- 运算符
- 算数运算符(数学运算符)
- 赋值运算符(对变量进行赋值的运算符)
- 一元运算符(只需要一个表达式就可以运算的运算符)
- 比较运算符
- 比较运算符的介绍
- 比较运算符的使用
- 比较运算符的细节
- 逻辑运算符
- 运算符优先级
- 语句
- 表达式和语句
- 分支语句
- 循环语句
- 断点调试
- while循环
- 循环的退出
- 循环/遍历 - for
- for循环的基本使用
- 退出循环
- 循环嵌套
- 数组
- 数组是什么
- 数组的基本使用
- 操作数组
- 数组案例
- 函数
- 为什么需要函数
- 函数使用
- 函数传参
什么是js
运行在浏览器,客户端的编程语言,实现人机交互
例如:
通过js代码,可以实现人机按钮交互
<script>let btns = document.querySelectorAll('button')for(let i = 0;i<btns.length;i++){btns[i].addEventListener('click',function(){document.querySelector('.pink').className=''this.className='pink'})}</script>
点击第二个按钮时候
以此类推,可以进行多次点击,在进行一系列处理就形成了网页上的模块
作用
- 网页特效(监听用户的行为,让网页做出反馈)
- 表单验证(表单数据的合法性判断)
- 数据交互(获取后台数据)
- 服务端编程(node.js)
js组成
ECMScript(js语言基础:规定了js语法规范)和Web APIs(DOM(页面文档对象,操作文档) 和 BOM(浏览器对象模型,操作浏览器))
权威网站:MDN
js书写位置
内联js
代码写在标签内部
语法:vue框架会使用这种模式
<button onclick="alert('1000$')">dian ji wo
</button>
内部js
直接写在html文件里面,用script标签包住
规范:标签写在上面
拓展:alert(‘你好,js’)数字不用加引号 页面弹出警告对话框
js放在下面的原因:从上往下依次读取代码,加载的顺序
<script>alert('Hello,JavaScript')
</script>
外部js 【常用】
代码写在以.js结尾文件里面
语法:通过script标签,引入html页面中
注意:
- script标签之间无需写代码,否则会被忽略
- 外部js会使代码更加有序,更加易于应用,且没有脚本的混合,html也会更加易读
<script src="./my.js">
</script>
js的注释
单行注释
符号://
作用://右边代码忽略
快捷键:ctrl+/
块注释,多行注释
符号:/* */
作用:在/和/之间所有东西都会被忽略
快捷键:shift + alt + a
js的结束符
- 结束符
代表语句结束
英文分号;
可写可不写(不写的越来越多)
换行符(回车)会被识别成结束符,所以一个完整的语句,不要手动换行
输入和输出语法
人和计算机打交道的规定
- 输入语法:
document.write('我愿意')
document.write('`<h1>`我愿意`</h1>`')
<!-- 文档 写 -->alert('qxj nb')
<!-- 警示 -->console.log('我是来测试的')
<!-- 控制台输出语法 程序员看的-->
- 输入语法
prompt('您今年多大了?')
字面量(literal)
-
1000 数字字面量
-
‘qxj’ 字符串字面量
-
[ ]
数组字面量 -
{ }对象字面量
变量
变量是什么
储存计算机数据的容器,让计算机变得有记忆
注意:变量不是数据的本身,他仅仅是一个用于储存数值的容器。可以理解为一个个用来装东西的纸箱子
变量的基本使用
- 声明变量(变量不能加引号)
语法: let 变量名/标识符
let age
- 变量赋值
变量名之后跟上“=”,然后是数值
age = 18
- 更新变量
变量赋值后,可以通过简单的给他一个不同的值来更新他
age = 18
age = 19
注意:let不允许多次声明
- 变量的初始化
声明变量时候直接赋值
let age = 18
- 声明多个变量
变量赋值后,还可以通过简单的给他一个不同的值来更新它
let age = 18,uname = ‘qxj’
变量的本质
内存:计算机中储存数据的地方,相当于一个空间
变量:程序在内存中申请的一块用来存放数据的小空间
变量命名规则与规范
-
规则
不能用关键字
关键字:特殊含义的字符,javascript内置的一些英语词汇(let,var,if,for)
只能用下划线_,字母,数字,$组成,数字不能开头
字母严格区分大小写,如Age和age是不同的变量 -
规范
起名要有意义,要遵守小驼峰命名法:
第一个单词首字母小写,后面每个单词的首字母大写
例如:userName
let,var区别:
let为了解决var的一些问题
var声明:
- 可以先使用再声明(不合理)
- var声明过的变量可以重复声明(不合理)
- 变量提升,全局变量,没有块级作用域
结论:声明变量统一使用let
变量扩展
数组(array)按顺序保存多个数据
let arr = [ ]
变量 数组字面量
- 语法声明
let 数组名 = [数据1,数据2,数据3,……,数据n]
例如:
let arr = [‘马超’,‘黄忠’,‘关羽’,‘张飞’,‘赵云’]
数组按顺序保存,每个数据都有自己的编号
计算机中的编号从0开始,0,1,2,3,……,n
数组中,数据的编号也叫索引或者下标
-
取值:
数组名[索引/下标] -
术语:
元素:数组保存的数据都叫数组元素
下标:数组中数据的编号
长度:数组中数据的个数,通过数组的length属性获得
数据类型
数据类型
数据分类原因:
- 更加充分利用和高效的利用内存
- 更加方便程序员的使用数据
js数据类型:
- 基本数据类型
number 数字型
string 字符串型
boolean 布尔型
undefined 未定义型
null 空类型 - 引用数据类型
object 对象
function 函数
array 数组
数字类型(number)
js正数,负数,小数等统称为数字类型
注意:
js是弱数据类型,变量到底属于哪一种类型,只有赋值后,我们才能确认
java是强数据类型,例如: int a = 3 必须是整数
<script>let age = 20let num = 3.141592654let num1 = -12
</script>
字符串类型(string)
通过单引号(‘’),双引号(“”),或者反引号(`)包裹的数据都叫字符串,单引号和双引号没有什么区别
推荐使用单引号
<script>let str1 = '123'let num = 123console.log(num)console.log(str1)let str2 = `qxj`console.log(str2)console.log("我是'qxj'")console.log('我是"qxj"')console.log('我是\'qxj\'')//了解 </script>
注意:
- 必须成对使用
- 可以相互嵌套,但是不能嵌套自己(口诀:外双内单,或者外单内双)
- 必要时可以使用转义符,输出单引号或者双引号
字符串拼接
document.write('我叫'+'qxj')
//我叫qxjlet uname = 'qxj'
let song = 'nb'
document.write(uname + song)
//qxjnb
<script>console.log('Hello '+'World')console.log('I am '+ 19 +' years old')let age = 18console.log('I am '+ age +' years old')
</script>
模板字符串
- 作用
拼接字符串和变量
没有之前,拼接变量比较麻烦
<script>
let age = 18,name = qxj
document.write('大家好,我叫'+name+',今年'+age+'岁')
</script>
- 符号
`` (反引号)
内容拼接变量时候,用${}包住变量, 可以换行
<script>
let age = 18,name = qxj
document.write(`大家好,我叫${name},今年${age - 16}岁了`)
</script>
布尔类型(Boolean)
表示肯定或者否定时候在计算机中对应的是布尔类型数据
它有两个固定的值true(真)和false(假)
console.log(true)//结果:true
console.log(false)//结果:false
未定义类型(undefined)
只有一个值undefined
只声明变量不赋值的情况下,变量的默认值为undefined,一般很少直接给某个变量赋值为undefined
let age
console.log(age)//结果:undefined
使用场景:
开发中,等待传送数据
如果不知道数据是否传过来,此时可以检测变量是不是undefined,判断用户是否有数据传递来
空类型(null)
null和undefined区别:
- undefined表示没有赋值
- null表示赋值了,但是内容为空
使用场景:
官方解释:把null作为未创建的对象
let obj = null
console.log(obj)//结果:null
检测数据类型
控制台输出语句和监测数据类型
- 控制台输出语句:
可以看出数字型和布尔类型为蓝色,字符串和undefined为灰色 - typeof关键字检测数据类型
console.log(typeof 123)//结果为number
console.log(typeof '123')//结果为string
console.log(typeof true)//结果为boolean
console.log(typeof undefined)//结果为undefined
console.log(typeof null)//结果为object
类型转换
为什么要类型转换
js为弱数据类型:js也不知道变量属于那种数据类型,只有赋值才能清楚。
表单,prompt获取过来的数据都是默认字符串类型,不能直接进行加法运算。
console.log('100000'+'20000')//结果为10000020000
把一种数据类型的变量转换成我们需要的数据类型
隐式转换
系统内部自动将数据类型进行转换,这种称为隐式转换
规则:
+
号两边只要一个是字符串,都会把另外一个转成字符串
除了+以外的算术运算符,比如:- * / 等都会把数据转成数字类型
缺点:
转换类型不明确,靠经验才能总结
小技巧:+号作为正号解析可以转换成number类型
10+ +'10'//结果:20
显示转换
避免隐式转换的问题,通常根据逻辑需要对数据进行显示转换
概念:自己写代码告诉系统该转成什么类型
转换为数字型
-
Number(数据)
转成数字类型
只能放数字类型的字符,如果字符串内容有非数字,转换失败时候结果为NaN(Not a Number)即不是一个数字。
NaN也是number类型数据,代表非数字 -
parseInt(数据)
只保留整数,没有四舍五入 -
parseFloat(数据)
可以保留小数,经常用于过滤单位
例如:
console.log(parseInt('100.999'))//100
console.log(parseInt('100.111'))//100
console.log(Number('100px'))//NaN
console.log(parseFloat('100.999'))//100.999
console.log(parseFloat('100px'))//100
console.log(parseFloat('px100px'))//NaN
转换成字符型
String(数据)
变量名.toString(进制)
括号里面如果是2 就转换成二进制
运算符
算数运算符(数学运算符)
+:加,求和
-:减,求差
*:乘,求积
/:除,求商
%:取模,取余(开发中经常作为某个数字是否被整除)
console.log(4/2)//2
console.log(4%2)//0
console.log(2%4)//2
console.log(5%8)//5
console.log(2%5+4*2)//10
优先级:(优先级越高越先被执行,优先级相同从左向右执行)
乘,除,取余优先级相同
加,减优先级相同
乘除取余 优先级大于 加减
()可以提升优先级
总结:先乘除后加减,有括号先算括号里面的
let r = prompt('请输入圆的半径')
let result = 3.14*r*r
document.write(`计算后圆的半径是:${result}`)
赋值运算符(对变量进行赋值的运算符)
=:将等号右边的值赋予给左边,要求左边必须是一个容器
+=:num=num+1等于num+=1
-=
*=
/=
%=
一元运算符(只需要一个表达式就可以运算的运算符)
自增:++
前置自增:++num
先自加再使用(++在前,先加)
let i=1
console.log(++i + 2)//4
console.log(i)//2
后置自增:num++
先使用再自加(++在后,后加)
let i=1
console.log(i++ + 2)//3
console.log(i)//2
注意:
- 前置自增和后置自增独立使用时候没有区别
- 开发时一般都是独立使用
- i++后置自增使用较多
自减:–
使用场景:计数使用
let i = 1
console.log(i++ + ++i + i)//7
//1+(2+1)+3=7
let num = 10
++num//num+=1
num++
console.log(num)//12
比较运算符
比较运算符的介绍
作用:比较两个数据大小,是否相等
实际应用:优惠券使用
结果:true或者false
比较运算符的使用
比较运算符:
-
:左边是否大于右边
- < :右边是否大于左边
-
= :左边是否大于等于右边
- <= :右边是否大于等于左边
- == :左右值是否相等,!=:左右两边值不相等
- === :左右两边是否类型和值都相等
- !== :左右两边是否不全等
console.log(5 == 5)//true
console.log( 5 == '5')//true
//== 只要值一样就是true 不管数据类型
console.log(5 >= 5)//true
console.log(5 <= 3)//false
//开发中常用=== 要求值和数据类型都一样
console.log(5 === 5)//true
console.log(5 === '5')//false
比较运算符的细节
字符串比较是比较字符对应的ASCII码
- 从左往右依次比较
- 第一位一样比较第二位,以此类推
NaN不等于任何值,包括它本身
不要比较小数,小数有精度问题
不同类型之间比较会发生隐式转换
- 最终把数据隐式转换为number类型在比较
- 开发中 如果进行准确的比较我们更加喜欢或者!
console.log('pink' > 'red')//false
console.log('pink' > 'pin')//true
console.log(1 === NaN)//false
console.log(NaN === NaN)//false
//不要比较小数,小数有精度问题
console.log(0.1 + 0.2 === 0.3)//false
console.log(0.1 + 0.2)//0.30000000000000004
//不同类型之间比较会发生隐式转换
console.log(3 > '2')//true
逻辑运算符
逻辑运算符用来解决多重条件判断
&&:逻辑与 并且 符号两边都为true结果才为true 一假则假
||: 逻辑或 或者 符号两边有一个true就为true 一真则真
!:逻辑非 取反 true变false false变true 真变假,假变真
console.log(true && true)//true
console.log(true && false)//falseconsole.log(true || false)//true
console.log(false || false)//falseconsole.log(!true)//false
console.log(!false)//true
逻辑运算符里的短路
短路:只存在于&&和||中,当满足一定条件会让右边代码不执行
&&;左边为false就短路
||:左边为true就短路
原因;左边能得到整个式子的结果,因此没有必要再判断右边
运算结果:无论是&&还是||,运算结果都是最后被执行的表达式值,一般用在变量赋值
console.log(false && 20)//false
console.log(5<3 && 20)//false
console.log(undefined && 20)//undefined
console.log(null && 20)//null
console.log(0 && 20)//0
console.log(10 && 20)//20console.log(false && 20)//20
console.log(5<3 && 20)//20
console.log(undefined && 20)//20
console.log(null && 20)//20
console.log(0 && 20)//20
console.log(10 && 20)//10
有5个值是当false来看
- false
- 数字0
- ''空字符串
- undefined
- null
运算符优先级
- 小括号 ()
- 一元运算符 ++ – !
- 算术运算符 先*%后±
- 关系运算符 > >= < <=
- 相等运算符 == != === !==
- 逻辑运算符 先&&后||
- 赋值运算符 =
- 逗号运算符 ,
语句
表达式和语句
表达式:表达式是一组代码的集合,JavaScript解释器会将其计算出一个结果
语句:用来自行以使某件事发生
分支语句
三大流程控制语句
- 顺序结构
- 分支结构
- 循环结构
分支语句
- if语句(if里面小括号都会转换为布尔型)
//假:false 0 ‘’ undefined null NaN
if(条件){
满足条件的代码
}
双分支if语法:
if(条件){
满足条件要执行的代码
}else{
不满足条件执行的代码
}
例1:按照工龄发工资
let age = prompt ('qing shu ru gong ling')
let money = 1000000
if (age >= 2) {alert(`您实际工资为:${money + 2000000}`)
} else {alert(`您实际工资为${money + 1000000}`)
}
例2:计算闰年
let years = prompt ('请输入年份:')
if (years % 400 === 0 || years % 4 === 0 && years % 100 !== 0 ) {alert(`${years}是闰年`)
} else {alert(`${years}不是闰年,是平年`)
}
多分支if语法:(从上往下依次判断)
if (条件1) {
代码1
} else if (条件2) {
代码2
} else if (条件3) {
代码3
} else {
代码n
}
例1:根据输入不同时间,输出不同问候语
//1.用户输入时间 等我们学习api会自动获取时间
let time = prompt('请输入时间:')
if (time < 12) {document.write('上午好!')
} else if (time < 18) {document.write('下午好!')
} else if (time <= 20) {document.write('晚上好!')
}else {document.write('好好好,该休息了!')
}
- 三元运算符
条件?满足条件执行的代码:不满足条件执行的代码
例:
console.log(true ? 1 : 2)//1
console.log(false ? 1 : 2)//2
例,判断两个数的最大值:
let num1 = +prompt ('请输入一个数字:')
let num2 = +prompt('请输入一个数字:')
let re = num1 > num2 ? num1 : num2
console.log(`两个数最大的是${re}`)
例,数字补0案例(用户输入1个数,如果数字小于10,则前面进行补0,比如):
//用户输入一个数子
//<10 补0
let t = num >= 10 ? num : '0' + num
document.write(t)
- switch语句
必须全等===
必须要break
switch('pink')
{case 1 :alert(1)breakcase 2 :alert(2)case 3:alert(3)default:alert('米有数据!!!')}
例子,简单计算器:
let num1 = +prompt('qingshurudi 1 geshuzi:')
let num2 = +prompt('qingshurudi 2 geshuzi:')
let sp = prompt('请输入 + - * / 运算符:')switch (sp){case '+' :alert (`加法,结果是${num1 + num2}`)breakcase '-' :alert (`减法,结果是${num1 - num2}`)breakcase '*' :alert (`乘法,结果是${num1 * num2}`)breakcase '/' :alert (`除法, 结果是${num1 / num2}`)breakdefault:alert(`结果错误,请重新输入`)
}
循环语句
断点调试
浏览器f12 --> 第三个sources --> 选择代码文件 --> 打断点 --> 刷新
while循环
小心死循环
- 变量起始值
- 终止条件
- 变量变化量
let i = 1
while (i<=3){document.write('1<br>')//<br>换行i++
}
//1
//1
//1
例子,计算1~100相加:
let j=1
let sum = 0
while (j<= 100)
{sum = sum + j //sum + = jj++
}
document.write(sum)
console.log(sum)
例子,计算1~100之间的所有偶数:
let i=1
while(i<=100){if( i % 2 === 0)//i是偶数时{sum + = i}if( i % 2 !== 0)//i是奇数时{sum + = i}i++}
循环的退出
continue和break
continue:结束本次循环,不会执行后面的语句,继续下次循环
break:结束所有循环,退出循环
例子,爱不爱你:
while(true){let atr = prompt('you can love me?')if(str === 'love'){alert('I love you too!')break;}
}
例子,ATM取款机:
let money = 100
while(true)
{let str = prompt(`请选择您的操作1. 存钱2. 取钱3. 查看余额4. 退出`)if(str === '4'){break}switch (str){case'1':let cun = +prompt('请输入您存款的金额:')//+是把字符型转换成数字型money += cunbreakcase'2':let qu = +prompt('请输入您取款的金额:')money -= qubreakcase'3':alert(`您卡上的余额是${money}元:`)break}}
//并发环境下存在数据不一致或错误的风险。为了保证共享资源的安全并避免数据竞争,修改后代码:
function createATM(initialAmount) {let money = initialAmount;const accessLock = new Mutex();function deposit(amount) {return new Promise((resolve, reject) => {// 先读取当前金额accessLock.lock().then(() => {const currentAmount = money;// 修改金额,更新到共享变量中money = currentAmount + amount;accessLock.unlock();resolve(`成功存入 ${amount} 元。`);});});}function withdraw(amount) {return new Promise((resolve, reject) => {// 先读取当前金额accessLock.lock().then(() => {const currentAmount = money;if (currentAmount < amount) {accessLock.unlock();reject(`余额不足,无法取出 ${amount} 元。`);} else {// 修改金额,更新到共享变量中money = currentAmount - amount;accessLock.unlock();resolve(`成功取出 ${amount} 元。`);}});});}function checkBalance() {return new Promise((resolve, reject) => {accessLock.lock().then(() => {const currentAmount = money;accessLock.unlock();resolve(`您卡上的余额是 ${currentAmount} 元。`);});});}return {deposit,withdraw,checkBalance,};
}// 使用示例:
const atm = createATM(100);async function run() {while (true) {const choice = prompt(`请选择您的操作\n1. 存钱\n2. 取钱\n3. 查看余额\n4. 退出`);switch (choice) {case "1":const depositAmount = +prompt("请输入您存款的金额:");console.log(await atm.deposit(depositAmount));break;case "2":const withdrawAmount = +prompt("请输入您取款的金额:");console.log(await atm.withdraw(withdrawAmount));break;case "3":console.log(await atm.checkBalance());break;case "4":return;default:alert("无效的选项,请重新输入。");break;}}
}run();
循环/遍历 - for
for循环的基本使用
同c语言
for(起始条件;退出条件;变化量)
for(let i = 1;i <=10 ;i++)
{console.log('i got smoke<br>')document.write('好好学习,天天向上 <br>')
}
例子:
//for循环输出1~100岁
for (let i = 1; i<=100;i++)
{document.write('I am ${i} years old <br>')
}
//求1~100之间所有的偶数之和
let sum =0
for(let a = 1 ; a <= 100; i++ )
{
if(i % 2 === 0)
{sum=sum+i//sum += i}
}
document.write(sum)
//页面打印五个小星星
for(let b = 1 ; b <= 5 ; b++ )
{document.write('⭐🌟✨')
}
循环数组/遍历数组
let arr = ['马超','赵云','关羽','张飞','黄忠']
console.log(arr)//['马超','赵云','关羽','张飞','黄忠']
document.write(arr)//马超,赵云,关羽,张飞,黄忠
document.write(arr[0])//马超
document.write(arr[1])//赵云
document.write(arr[2])//关羽
document.write(arr[3])//张飞
document.write(arr[4])//黄忠
document.write(arr.length)//arr.length 数组的长度:5
for(let i = 0;i <= 4 ; i++)
{document.write(`名字是:${arr[i]}<br>`)
}
for(let i = 0;i <= arr.length - 1 ; i++)//arr.length-1 === 4
{document.write(`名字是:${arr[i]}<br>`)
}
for(let i = 0;i < arr.length ; i++)//arr.length === 5
{document.write(`名字是:${arr[i]}<br>`)
}
退出循环
continue:退出本次循环,继续下次循环
例子:
for(let i = 1; i <= 5 ; i++)
{if(i===2){continue }document.write(i) //1345
}
break:退出循环,不再循环
例子:
for(let i = 1; i <= 5 ; i++)
{if(i===2){break }document.write(i) //1
}
循环嵌套
例子,外面循环执行一次,内部循环执行一次:
for(let i = 1;i < 6;i++)//5行
{for(let j = 1;j < 6; j++)//5个{document.write('⭐')}document.write('<br>')//五个星星打印完毕,换行
}
例子,记单词:
for(let i = 1; i <= 3; i++)
{document.write(`第${i}天<br>`)for(let j = 1; j <=5 ; j++){document.write(`记住第${j}个单词<br>`)}}
例子,打印星星:
for(let i = 1;i < 6;i++)//行
{for(let j = 1; j <= i; j++)//列{document.write('⭐')}document.write('<br>')
}
for(i = i-2;i > 0; i--)
{for(j = i ; j > 0 ; j--){document.write('⭐')}document.write('<br>')
}
例子,打印99乘法表:
div{display: inline-block;height: 25px;line-height: 25px;margin: 5px;background-color: pink;padding: 0 10px;border: 1px solid hotpink;color: deeppink;border-radius: 5px;box-shadow: 2px 2px 2px rgb(0, 0, 0,.2);
}
for(let i = 1 ; i < 10 ; i++ )//行
{for(let j = 1; j <= i; j++)//列{document.write(`<div> ${j} x ${i} = ${i*j} </div>`)}document.write('<br>')
}
数组
数组是什么
数组 Array 是一种按照顺序保存数据的数据类型
数组的基本使用
let 数组名 = [数据1 , 数据2 ,数据3 ,······ ,数据n]
顺序储存
从0开始
数据的编号叫索引/下标
数组可以存储任意数据类型
元素
下标
长度
遍历数组:用循环把数组中每个元素都访问,一般用for循环遍历
例子,数组求和,数组求平均值:
let arr = [2,6,1,7,4]
let sum = 0
let average = 0
for(let i = 0 ;i < arr.length ; i++)
{console.log(arr[i])//2 6 1 7 4sum += arr[i]
}
average = sum / arr.length
document.write(` 总分是:${sum} 平均分是:${average}`)
例子,求数组最大值和最小值
let arr = [2,6,1,77,52,25,7]
let max = arr[0] , min = arr[0]
for (let i = 1 ;i < arr.length ; i++)
{if(max<arr[i])max = arr[i]if(min>arr[i])min = arr[i]
}
document.write(`最大值是:${max}最小值是:${min}`)
操作数组
增删改查
-
查:查询数组数据或者访问数组数据
数组[下标] -
改:重新赋值
数组[下标]=新值
let arr = ['pink','hotpink','deeppink' ]
console.log(arr)//['pink','hotpink','deeppink' ]
arr[0] = 'lightpink'
console.log(arr)//['lightpink','hotpink','deeppink' ]
- 增:数组添加新的数据
- arr.push(新增的内容) :将一个或者多个元素添加到数组的末尾,并且返回该数组的新长度
arr.push(元素1,元素2,··· ,元素n)
let arr = ['pink','hotpink','deeppink' ]
arr.push('blue')
console.log(arr.push('blue'))//返回该数组的新长度:4
console.log(arr)//['pink','hotpink','deeppink','blue']
- arr.unshift(新增的内容):将一个或者多个元素添加到数组的开头,并且返回该数组的新长度
arr.unshift(元素1,元素2,··· ,元素n)
let arr = ['pink','hotpink','deeppink' ]
arr.unshift('blue')
console.log(arr.unshift('blue'))//返回该数组的新长度:4
console.log(arr)//['blue','pink','hotpink','deeppink']
例子。数组筛选:
let arr = [2,0,6,1,77,0,52,0,25,7]
let newArr = []
for(let i = 0; i < arr.length ; i++)
{if(arr[i] >= 10){newArr.push(arr[i])}
}
document.write(arr)
document.write('<br>')
document.write(newArr)
例子,去除数组中0:
let arr = [2,0,6,1,77,0,52,0,25,7]
let newArr = []
for(let i = 0; i < arr.length ; i++)
{if(arr[i] !== 0){newArr.push(arr[i])}
}
document.write(arr)
document.write('<br>')
document.write(newArr)
let arr = [2,0,6,1,77,0,52,0,25,7]
let newArr = []
for(let i = 0; i < arr.length ; i++)
{if(arr[i] === 0){continue}elsenewArr.push(arr[i])
}
document.write(arr)
document.write('<br>')
document.write(newArr)
- 删:
- arr.pop():删除数组的尾部最后一个元素,并且返回该元素的值
arr.pop()
let arr = ['red','blue','green']
arr.pop()
arr.pop()
console.log(arr)//['red']
- arr.shift():删除数组的开头第一个元素,并且返回该元素的值
let arr = ['red','blue','green']
arr.shift()
console.log(arr.shift())//red
console.log(arr)//['blue','green']
- arr.splice(操作的下标,删除的个数):删除指定元素
arr.splice(start,deleteCount)
start:指定修改的开始位置(从0开始计数)
deleteCount:表示要移除 的数组元素的个数 可选的,如果省略则默认从指定的起始位置删除到最后
let arr = ['red','green','blue']
arr.splice(1,1)
console.log(arr)//
冒泡排序
let arr = [5,4,3,2,1]
console.log(arr)
for (let i = 0 ; i < arr.length ; i++)
{for (let j = 0 ; j < arr.length - i - 1 ; j-- ){if(arr[j] > arr[j+1]){let temp = arr[j]arr[j] = arr[j+1]arr[j+1] = temp}}
}
console.log(arr)
数组案例
例子,根据四个季度的数据输入生成数据生成柱状图:
//1. 利用循环弹出四次输入框,会得到四个数据 放到数组里面
let arr = []
for( let i = 1 ; i <= 4 ;i++)
{arr.push(+prompt(`请输入第 ${i} 季度的数据`))//arr[i] = +prompt(`请输入第 ${i} 季度的数据`)
}
//循环渲染柱子
document.write(`<div class="box">`)for( let j = 0;j < arr.length ; j++ )
{document.write(`<div style="height: ${arr[i]}px;"><span>${arr[i]}</span><h4>第${i+1}季度</h4> </div>`)
}
document.write(`</div> `)
例子,求数组里面大于5的数的和[4,9,5,20,3,11]
例子,计算[2,6,18,15,40]中能被3整除的偶数的个数
函数
- 代码复用
- 封装函数
为什么需要函数
function,执行特定任务的代码块
函数可以把具有相同或者相似的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便使用。
函数使用
函数的上声名语法:
function 函数名(){
函数体
}
例子,函数的使用:
function sayHi(){document.write(`hello~~~`)
}
siHai()
siHai()
函数名命名规范:
和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词
命名建议:常用动词约定
can:判断是否可执行某个动作
has:判断是否含义某个值
is:判断是否为某个值
get:获取某个值
set:设置某个值
load:加载某些数据
例子,函数求两数之和:
function getSum()
{let num1 = 10let num2 = 20document.write(num1 + num2)
}
getSum()
例子,函数求1~100之间累加求和:
function getSum100(){let sum = 0for( let i = 1 ; i <= 100; i++){sum += i}document.write(`The result is ${sum}`)
}
getSum100()
函数传参
函数功能性局限性非常大 --> 函数传参 --> 提高了函数的灵活性
function 函数名(参数列表){
函数体
}
参数列表:
传入数据列表
声明函数需要传入几个数据
多个数据用逗号隔开
调用语法:
函数名(传递的参数列表)
例子,带有参数的函数求和:
//函数声明
function getSum(num1,num2){//形参document.write(num1 + num2)
}
//函数调用
getSum(1 , 2)//实参。3
getSum(13453145 , 546384)//实参。13,999,529
例子,带有参数的函数求和:
function getSum(start , end){//形参let sum = 0for( let i = start ; i <= end; i++){sum += i}document.write(`The result is ${sum}`)
}
getSum(2,10)//实参。54
getSum(20,100)//实参。4860
形参:声明函数时候写在函数名右边小括号里叫形参
实参:调用函数时写在函数名右边小括号里叫实参
//如果变量没有赋值,默认为 undefined
function getSum(x , y){
document.write(undefined + 10)//NaN
document.write(undefined + true)//NaN
document.write(undefined + undefined)//NaN
document.write(undefined + null)//NaN
document.write(undefined + 'pink')//undefinedpink
//如果调用时候,我们没有传递实参,则默认为 0
x = x || 0 //逻辑中断 undefined = false,继续执行,遇到0 ,则结果为0
y = y || 0
document.write( x + y )
}
getSum()
更多推荐
Javascript基础[前端基础]
发布评论