js介绍
什么是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 = 20
let num = 3.141592654
let num1 = -12
</script>
字符串类型（string）
通过单引号（‘’），双引号（“”），或者反引号（`）包裹的数据都叫字符串，单引号和双引号没有什么区别
推荐使用单引号
<script>
let str1 = '123'
let num = 123
console.log(num)
console.log(str1)
let str2 = `qxj`
console.log(str2)
console.log("我是'qxj'")
console.log('我是"qxj"')
console.log('我是\'qxj\'')//了解
</script>
注意：
- 必须成对使用
- 可以相互嵌套，但是不能嵌套自己（口诀：外双内单，或者外单内双）
- 必要时可以使用转义符,输出单引号或者双引号
字符串拼接
document.write('我叫'+'qxj')
//我叫qxj
let uname = 'qxj'
let song = 'nb'
document.write(uname + song)
//qxjnb
<script>
console.log('Hello '+'World')
console.log('I am '+ 19 +' years old')
let age = 18
console.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)//false
console.log(true || false)//true
console.log(false || false)//false
console.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)//20
console.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)
break
case 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}`)
break
case '-' :
alert (`减法，结果是${num1 - num2}`)
break
case '*' :
alert (`乘法，结果是${num1 * num2}`)
break
case '/' :
alert (`除法， 结果是${num1 / num2}`)
break
default:
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 + = j
j++
}
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 += cun
break
case'2':
let qu = +prompt('请输入您取款的金额：')
money -= qu
break
case'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 4
sum += 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
}
else
newArr.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 = 10
let num2 = 20
document.write(num1 + num2)
}
getSum()
例子，函数求1~100之间累加求和：
function getSum100(){
let sum = 0
for( 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 = 0
for( 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()
167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
