31
社区成员
发帖
与我相关
我的任务
分享JS知识点总结（变量-函数）
JavaScript介绍
JS是什么？
1.是编程语言，运行在客户端（浏览器）的==编程语言==
2.作用：
- 网页特效
- 表单验证
- 数据交互
- 服务端编程node.js
3.组成：
- ECMAScript+Web APIs（DOM操作文档+BOM操作浏览器）
JS的书写位置
1.内部
<body>
<script>
alter('hi,js')
</script>
</body>
- 在
</body>的上方写，即html的底部
2.外部
<body>
<script src="./js/my.js"></script>
</body>
- 适合代码多
- 通过src引入外部文件
- 外部js中不要写代码，会被忽略
3.内联
<body>
<button onclick="alter('123321')">click me</button>
</body>
- vue框架内使用
JS结束符;要么都写，要么都不写
JS语法
1.输出语法：
document.write('content')
- 作用：向body内输出内容
- 注意：如果输出的内容是标签，也会被解析成网页元素
alter('hi,js') - 页面弹出警告对话框
console.log('console print') - 控制台输出语法，程序员调试使用
2.输入语法：
prompt('please input:')
prompt & alert 会优先执行
字面量
1.定义：字面量是计算机中描述事/物
2.例子：
- 1000元工资中“1000”是数字字面量
- ’小明‘是字符串字面量
- 对象字面量....
变量是什么？
- 变量是一个储存数据的容器
变量的基本使用
1.声明变量：
想使用变量，先创建变量
- 语法：
let 变量名
2.赋值：
- 语法：
变量名=字面量
3.更新变量：
- 语法：
let 变量名=字面值 变量名=新字面值
4.声明多个变量：
- 语法：
let age=18,name='alis' console.log(age,uname)
建议一行一行写
变量的本质
- 变量是程序在内存中申请的一块用来存放数据的小空间
变量的命名规则与规范
1.规则：
- 不能用关键字
- 只能用==下划线==，字母，数字，$组成，且==数字不能开头==
- 字母严格区分大小写
2.规范：
- 起名要有意义
- 小驼峰命名法
var&let:
var 是 ES5 的变量声明方式，具有函数作用域，==可以重复声明==，并且存在==变量提升==；
let 是 ES6 新增的声明方式，具有==块级作用域==，不能重复声明，并且不存在变量提升，开发中推荐使用 let 或 const。
数组Array
- 作用：将一组数据存储起来
- 语法：
//声明数组 let arr=['A','B','C','D'] //使用数组 console.log(arr[0])
常量的基本使用
概念：const声明的变量
使用场景：某个变量永远不会改变，用const声明而不是let
数据类型
目的：数据分类可以帮助我们使用数据；有利于充分利用内存
| 引用数据类型 | 基本数据类型 | 解析 | tips |
|---|---|---|---|
| object对象 | number数字型 | 包括整数和小数，负数； | NAN代表一个计算错误。是一个不正确的或者未定义的数学操作所得到的结果；（NAN是粘性的，任何对NAN的操作都会返回NAN） |
| string字符串型 | 使用引号（单，双，反）包裹的数据 | 引号包引号的情况下，只能外双内单或者外单内双；“+”可以拼接字符串 | |
| boolean布尔型 | 有两个固定值：true和false（布尔型自变量） | ||
| ==undefined==未定义型 | 未被定义的就是undefined：声明了但是没有给值。 | ps：如果检测变量是undefined就说明值没有传递过来 | |
| ==null==空型 | “无”，“空”，“值未知”的特殊值 | 如果一个变量里面确定存放的是对象，如果还没有准备好对象，可以放个null |
null和undefined的区别：
1.undefined 表示没有赋值
2.null表示赋值了但是内容为空
模板字符串
let age=18
document.write(`我今年${age}岁了`)
JS是一种弱数据类型的语言；只有赋值了才知道是什么数据类型
检测数据类型
- 控制台输出语句：
let age=18 let name="chen" let flag=false let buy console.log(age) console.log(name) console.log(flag) console.log(buy)
控制台语句经常用于测试结果来使用
数字型和布尔型的颜色是蓝色，字符串和undefined颜色为灰色
- typeof关键字检测数据类型
let age=18 let name="chen" let flag=false let buy console.log(typeof age) console.log(typeof name) console.log(typeof flag) console.log(typeof buy)
支持两种语法：(1) typeof(x) (2)typeof x
类型转换的作用
JS是弱数据类型，JS也不知道变量到底属于那种数据类型，只有赋值了才清楚。
使用表单，prompt获取的数据默认是字符串类型的，此时就不能直接简单的进行加法运算
隐式转换
某些运算符被1执行时，系统内部==自动==将数据类型进行转换，这种转换称为隐式转换
- 规则：
- +号两边只要有一个是字符串，就会把另外一个转换成字符串
- 除了+以外的算术运算符，比如- * / 都会把数据转换成数字类型
- 缺点：转换不明显
- tips：
- +号作为正号解析可以转换成数字型
- 任何数据和字符串相加结果都是字符串
console.log(11 + 11) console.log('11' + 11) console.log(11 - 11) console.log('11' - 11) console.log(1 * 1) console.log('1' * 1) console.log(typeof '123') console.log(typeof +'123') console.log(+'11' + 11)显式转换
隐式转换不严谨，故产生显式转换概念
自己写代码告诉系统转换成什么类型转换成数字型
- Number（数据）
- 转成数字类型
- 如果字符串里有非数字，转换失败时结果是NaN（Not a Number）即不是一个数字
- NaN也是number类型的数字，代表非数字
- parseInt（数据）
- 只保留整数
- parseFloat（数据）
- 可以保留小数
赋值运算符
是对变量赋值的运算符
- 可以保留小数
- += ： a+=b即a=a+b
- -= ： a-=b即a=a-b
- /= ： a /=b即a=a /b
- %= ： a%=b即a=a%b
一元运算符
能够使用一个运算符做自增运算
- 自增
- 前置自增 ++a 先加一，再使用
- 后置自增 a++ 先使用，再加一
- 自减 a--
- 前置自减 --a 先减一，再使用
- 后置自减 a-- 先使用，再减一
let i=1 console.log(i++ + ++i + i)比较运算符
- <
=
- <=
- == 左右两边的值是否相等
- === 左右两边是否类型和值都相等
- ！=
NaN不等于任何值，包括它自己
== 会发生隐式转换;=== 不会发生隐式转换console.log(5 == '5'); // true 5（number） '5'（string） ↓ 隐式转换 5 == 5 ↓ true逻辑运算符
- 逻辑与&& 一假则假
- 逻辑或|| 一真则真
- 逻辑非！ 真变假，假变真
运算符优先级运算符
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | （） |
| 2 | 一元运算符 | ++ -- ！ |
| 3 | 算数运算符 | 先* / % 后+- |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先&& 再|| |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
表达式和语句
[[输出语句中的易错点]]
- 表达式：是一个可以被求值的代码
x=7 3+4 num++ - 语句：是一段可以执行的代码,不一定有值
prompt,if,else
分支语句
程序三大流程控制的语句之一（顺序，分支，循环） 是选择性执行代码； - ==if分支语句==
<script> let year = +prompt('请输入年份') if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) { alert('闰年') } else { alert('平年') } </script>注意 year需要前置+转换成数字型
//多分支 if(条件1){ 代码1 } else if(条件2){ 代码2 } else if(条件3){ 代码3 } else{ 代码n } - ==三元运算符==
是比if双分支更简单的写法，可以使用三元表达式
？和：配合使用
一般用来取值条件?满足条件执行的代码：不满足条件执行的代码 3>5?alert('真的'):alert('假的') //两个数取最值 let num1 = +prompt('input one number:') let num2 = +prompt('input one number:') console.log(num1 > num2 ? num1 : num2) //or num1>num2?alert(`最大值是：${num1}`):alert(`最大值是：${num2}`) //数字补0 let num1 = +prompt('输入一个数：') // num1 < 10 ? alert(`0${num1}`) : alert(`${num1}`) num1=num1 < 10 ? 0 + num1 : num1 alert(num1) - ==switch语句==
switch case语句一般用于等值判断，不适合区间判断
switch case语句一般需要配合break关键字使用，没有break会造成case穿透
当分支比较少时，用if...else语句执行效率更高
当分支比较多时，用switch语句执行效率高，而且结果更清晰
释义：找到小括号里数据全等的case值，并执行里面对应的代码
若是没有全等=== 的则执行default里面的代码
switch(数据){
case 值1：
代码1
break//退出switch
case 值2：
代码2
break
case 值3：
代码3
break
default：
代码n
break
}
注意 case后面有空格
循环
while
重复执行一些操作
- while基本语法
while(循环条件){ 重复执行的代码(循环体) }和if语句很像，都要满足小括号里面的条件为true时才会进入循环体执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，知道括号内条件不满足，即跳出
while（1）——来构造“无限”循环，需要使用break来
退出循环 - 循环三要素：
- 变量起始值
- 终止条件
- 变量变化量（自增或自减）
```js
let i=1
while(i<=3){
document.write('我会循环三次
')
i++
}
//页面输入1~100
let i = 1
while (i <= 100) {
document.write(i + <br>)
i++
}
//计算从1加到100的1总和并输出
//计算1~100之间所有偶数的和
let i = 1
let sum = 0
while (i <= 100) {
if (i % 2 === 0) {
sum = sum +1
}
i++
}
document.write(sum)
### 退出循环
- break：退出循环
- contiune：结束本次循环，继续下次循环
```js
//模拟存取钱
let money = 2000 //注意在循环外
while (true) {
let re = +prompt(`
请选择您的操作
1.存钱
2.取钱
3.查看余额
4.退出
`)
if (re === 4) break
switch (re) {
case 1:
let cun = +prompt('请输入存款金额')
money = money + cun
break
}
switch (re) {
case 2:
let qu = +prompt('请输入取款金额')
money = money - qu
break
}
switch (re) {
case 3:
alert(`当前银行卡余额是：${money}`)
break
}
}
for
for循环的基本使用
- for循环语法
```js
for(变量起始值；终止条件；变量变化量1){
//循环体
}
//页面中打印5个小星星
for (let i = 1; i <= 5; i++) {
document.write('*')
}
//循环数组
let arr = ['马超', '赵云', '张飞', '关羽', '黄忠']
for (let i = 0; i <= arr.length - 1; i++) {
document.write(arr[i])
}
- 退出循环for（ ； ；）也可以狗砸
- continue：退出本次循环，一般用于排除或者跳过某一个选项，可以使用contiune（直奔i++）
- break退出整个for循环，一般用于结果已经得到，后续的循环不需要的时候可以使用 （退出整体）
### for循环嵌套
- 从外向里循环
```js
//外层循环控制行，内层控制列
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= 5; j++) {
document.write(`*`)
}
document.write('<br>')
}
//打印倒三角
for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= i; j++) {
document.write(`*`)
}
document.write('<br>')
}
//打印乘法表
span {
border: 1px solid black;
display: inline-block;
text-align: center;
}
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= i; j++) {
document.write(`<span>${j}*${i}= ${+ i * j} </span>`)
//注意：span不是块级元素
}
document.write('<br>')
}
for和while的区别
明确循环次数的时候用for，不确定时用while
数组
数组是什么?
[[数组]] 一种可以顺序保存数据的数据类型
数组的基本操作
1.声明语法
//1.字面量声明数组
let 数组名=[数据1，数据2，...,数据n]
//2.使用new Arrayy 构造函数声明 了解
let arr=new Array(数据1，数据2，...,数据n)
2.取值语法
let names=['1','2','3']
names[0] //1
3.一些术语
- 元素：数组中保存的每个数据都叫数组元素
- 下标：数组中数据的编号
- 长度：数组中数据的个数，通过数组的length属性获得
4.遍历数组
目的：能够遍历输出数组里面的元素
- 用循环把数组中每个元素都访问到，一般会用for循环遍历
- 语法：
for(let i=0;i<数组名.length;i++){ 数组名[i] } //eg: for(let i=0;i<数组名.length;i++){ document.write(数组名[i])d }
//数组求和与平均值
let arr = [2, 6, 1, 7, 4]
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum = sum + arr[i]
}
let ave = sum / arr.length
document.write(`${sum}\n${ave}`)
//求数组的最值
let arr = [2, 6, 1, 77, 52, 25, 7]
//let max = 0
let max=arr[0]
for (let i = 1; i < arr.length; i++) {
max = arr[i] > max ? arr[i] : max
}
document.write(max)
let arr = [2, 6, 1, 77, 52, 25, 7]
let min = arr[0]
for (let i = 1; i < arr.length; i++) {
min = arr[i] < min ? arr[i] : min
}
document.write(min)
操作数组
增
数组.push //将一个或多个元素添加到数组尾部，并返回新长度
arr.push(e1,e2,e3...)
eg:
let arr = ['pink', 'hotpink']
// 新增push 推
console.log(arr.push('deeppink')) //返回的是新数组的长度
console.log(arr)
删
//前提：
let arr=['pink','red','blue','white']
- 数组.pop()方法从数组中删除最后一个元素，并返回该元素的值
arr.pop() //删的white arr.pop() //删的blue - shift()删除第一个元素
arr.shift() //删除pink - splice()删除指定元素
arr.splice(1,1) //splice（起始位置-索引号，删除几个）；从索引号为1开始删，删除一个改
let arr=['pink','red','white'] //单个修改 arr[0]='hotpink' //整体修改 for(let i=0;i<arr.length;i++){ arr[i]=arr[i]+'teacher' }查
数组案例
数组筛选
let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] >= 10) {
newArr.push(arr[i])
}
}
for (let j = 0; j < newArr.length; j++) {
document.write(newArr[j])
document.write('<br>')
}
数组去0
let arr = [2, 0, 6, 1, 77, 9, 54, 3, 78, 7]
let newArr = []
for (let i = 0; i < arr.length; i++) {
if (arr[i] !== 0) {
newArr.push(arr[i])
}
}
for (let j = 0; j < newArr.length; j++) {
document.write(newArr[j])
document.write('<br>')
}
渲染柱形图
<script>
let arr = []
for (let i = 0; i < 4; i++) {
arr[i] = prompt(`请输入${i + 1}季度的数据：`)
}
//盒子
document.write(`<div class="box">`
)
//盒子中间
for (let i = 0; i < 4; i++) {
document.write(`
<div style="height:123px;">
<span>${arr[i]}</span>
<h4>一季度</h4>
</div>
`)
}
</script>
冒泡排序
let arr=[5,4,3,2,1]
for(let i=0;i<arr.length;i/+++){
for(let j=0;j<arr.length;j++){
//开始交换，但是第一个数大于第二个数才交换
if(arr[j]>arr[j+1]){
//交换2个变量
let temp=arr[j]
arr[j]=arr[j+1]
arr[j+1]=temp
}
数组排序
- 数组sort（）方法可以排序
- 语法：
```js
let arr=[4,2,5,1,3]
//升序
arr.sort(function(a,b){
return a-b
})
//降序
arr.sort(function(a,b){
return b-a
})
# 一、`' '`、`" "` 和 `` ` ` `` 的区别
在 JavaScript 中，单引号、双引号和反引号都可以表示字符串。
### 1. `' '` 和 `" "`
用于表示普通字符串。
```js
document.write('你好')
document.write("你好")
两者效果基本相同。
2. 变量不需要加引号
如果要输出变量本身：
let name = '张三'
document.write(name)
输出：
张三
⚠️ 如果写成：
document.write('name')
输出的是：
name
因为 'name' 是字符串，而不是变量。
记忆：
name // 变量
'name' // 字符串
3. 反引号 ` ` —— 模板字符串
当需要在字符串中插入变量时，可以使用反引号。
let name = '张三'
let age = 18
document.write(`我叫${name}，今年${age}岁`)
输出：
我叫张三，今年18岁
变量需要放在：
${变量名}
二、什么时候使用哪一种？
| 情况 | 写法 |
|---|---|
| 输出固定文字 | '你好' |
| 输出变量 | name |
| 输出文字 + 变量 | `你好，${name}` |
| ==输出固定 HTML== | '<br>' |
| 多行模板字符串 | 使用反引号 |
示例
let price = 20
let num = 3
document.write('商品信息')
document.write(`价格：${price}`)
document.write(`数量：${num}`)
三、JavaScript 中的换行
要注意：
JavaScript 字符串中的换行和网页 HTML 中的换行不是完全一回事。
1. document.write() 中网页换行使用 <br>
document.write('第一行<br>第二行')
显示：
第一行
第二行
也可以分开写：
document.write('第一行')
document.write('<br>')
document.write('第二行')
注意
<br> 是 HTML 标签，所以需要写成字符串：
document.write('<br>')
不能写：
document.write(<br>)
2. \n 表示换行符
在 JavaScript 字符串中：
\n
表示换行。
例如：
let str = '第一行\n第二行'
prompt() 中使用 \n
特别适合在弹窗中换行：
let re = +prompt(
'请选择您的操作：\n1. 存钱\n2. 取钱\n3. 查看余额\n4. 退出'
)
显示：
请选择您的操作：
1. 存钱
2. 取钱
3. 查看余额
4. 退出
document.write() 中不要把 \n 当成 HTML 换行
例如：
document.write('第一行\n第二行')
在 HTML 页面中通常不会按照预期显示成两行。
网页中需要换行时，优先使用：
document.write('第一行<br>第二行')
3. document.write() 输出变量 + 换行
网页中换行用 <br>：
let a = 10
let b = 20
document.write(a)
document.write('<br>')
document.write(b)
显示：
10
20
也可以直接写：
document.write(`${a}<br>${b}`)
4. console.log() 输出变量 + 换行
如果是在控制台输出，推荐使用 \n：
let a = 10
let b = 20
console.log(`${a}\n${b}`)
结果：
10
20
四、空格
1. 普通空格
直接输入空格：
document.write('你好 世界')
2. HTML 中多个连续空格
HTML 默认会折叠连续空格。
例如：
document.write('你好 世界')
页面中通常不会保留这 5 个空格。
如果希望保留多个空格，可以使用：
例如：
document.write('你好 世界')
3. document.write() 输出变量 + 空格
直接在字符串里加空格：
let a = 10
let b = 20
document.write(`${a} ${b}`)
显示：
10 20
如果想要多个空格，可以用：
document.write(`${a} ${b}`)
4. console.log() 输出变量 + 空格
console.log(`${a} ${b}`)
或者更简单：
console.log(a, b)
console.log() 的逗号会自动在变量之间留空格：
let a = 10
let b = 20
console.log(a, b)
输出：
10 20
五、速记表
| 需求 | 写法 |
|---|---|
| 固定文字 | '你好' |
| 变量 | name |
| 文字 + 变量 | `你好${name}` |
| 网页换行 | <br> |
| JS 字符串换行 | \n |
| HTML 空格 | |
总结
固定文字加引号，变量不加引号，文字+变量用反引号；网页换行用
<br>，字符串换行用\n。
为什么用函数
代码复用，封装包裹代码逻辑，直接调用函数名
函数使用
//定义
function 函数名(){
函数体
}
//调用
函数名()
- 函数命名：
- 和变量命名基本一致
- 小驼峰
- 前缀应该为动词
函数传参
```js
//求从一个数开始到一个数结束之间的所有数字和
function getSum(start,end){
let sum=0
for(let i=start;i<=end;i++){
sum+=i
}
console.log(sum)
}
getSum(1,50)
- start,end就是==形参==
> 声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
- 1，50是==实参==
> 调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
## 参数默认值：
形参：可以看作变量，但是如果一个变量不给值，默认是什么？（NaN）
```js
function getAdd(num1, num2) {
document.write(num1 + num2)
}
getAdd() //结果是NaN
let num1=prompt('请输入起始值：')
let num2=prompt('请输入结束值：')
getAdd(num1,num2)
用户不输入实参，可以给出形参默认值，可以默认为0，使得程序更严谨
function getAdd(num1=0,num2= 0) {
document.write(num1 + num2)
}
getAdd() //结果是0
//这个默认值只有在缺少实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参，否则会默认为undefined
//eg:
function getArrSum(arr = []) {
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
console.log(sum)
}
getArrSum([1, 2, 3, 4, 5])
函数返回值
返回值函数概念：
- 当调用某个函数时，这个函数会返回一个结果出来
- 这就是有返回值的函数
```js1.很多函数都需要返回值
2.当函数需要返回数据时，使用return
3.函数可以没有return，此时默认返回值是undefined
function get(x, y) {
return
x + y
}
let sum = get(1, 2)
console.log(sum) //undefined
function get(x, y) {
return x + y
}
let sum = get(1, 2)
console.log(sum) //返回值返回给了函数调用者
求最大值函数
```js
function getMax(num1 = 0, num2 = 0) {
let max = num1 > num2 ? num1 : num2
return max
}
console.log(getMax(67, 345))
求数组最大值
function getMaxArr(arr = []) {
let max = arr[0]
for (let i = 0; i < arr.length; i++) {
max = arr[i] > max ? arr[i] : max
}
return max
}
console.log(getMaxArr([3, 6, 3, 8, 5, 89, 235, 654, 76, 35]))
作用域
匿名函数
...全文
请发表友善的回复…
发表回复
