JavaScript基础

最新推荐文章于 2024-09-27 15:27:45 发布
最新推荐文章于 2024-09-27 15:27:45 发布
阅读量168 收藏
点赞数 1
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48899258/article/details/130484230
版权

文章目录

JavaScript 基础

1. 输入和输出

  1. prompt()输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。
  2. alert()在浏览器中以弹窗形式输出用户在其括号里输入的内容
  3. document.wirte()在浏览器窗口打印用户在括号里输入的内容
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>输入和输出语句</title>
</head>

<body>
    <script>
        // 1.文档输出内容
        document.write('我是div标签')
        document.write('<h1>我是标题</h1>')

        // 2.控制台输出内容 给 程序员
        console.log('看看对不对');

        // 3.输入语句
        let age = +prompt('请输入你的年龄')

        alert(`你的年龄是${age}`)
    </script>
</body>

</html>

2. 数据类型

基本数据类型

数值类型（number）：我们数学中学习到的数字，可以是整数、小数、正数、负数

字符串类型（string）: 通过单引号（ ''） 、双引号（ ""）或反引号包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。

布尔类型（boolean）: 表示肯定或否定时在计算机中对应的是布尔类型数据，它有两个固定的值 true 和 false，表示肯定的数据用 true，表示否 定的数据用 false。

undefined：未定义是比较特殊的类型，只有一个值 undefined，只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋 值为 undefined。

引用数据类型

函数 function

数组 array

对象 object

检测数据类型

​ 可以通过typeof关键字检测数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型检测</title>
</head>
<body>
    <script>
        let num = 10
        console.log(typeof num)     //数值型    number
        let str = 'pink'
        console.log(typeof str)     //字符串型    string
        let str1 = '10'
        console.log(typeof str1)    //字符串型    string
        let flag = false
        console.log(typeof flag)    //布尔型    boolean
        let un 
        console.log(typeof un)      //underfined
    </script>
</body>
</html>

3. 数据类型转换

隐式转换
  1. 某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
  2. 规则
    • +号两边只要有一个是字符串，都会把另外一个转成字符串
    • 除了+以外的算术运算符 比如- * /等都会把数据转成数字类型
    • +号作为正号解析可以转换成数字型
    • 任何数据和字符串相加结果都是字符串
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // let num1 = prompt('请输入第一个数：')
        // console.log(typeof num1)    //得到的是string

        console.log(1 + 1)      //数字型
        console.log('pink' + 1) //字符串型
        console.log(2 + 2)      //数字型
        console.log(2 + '2')    //字符串型
        console.log(2 - 2)  //数字型
        console.log(2 - '2')    //数字型

        console.log(+12)
        console.log(+'12')
    </script>
</body>

</html>
显式转换
  1. 编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。
  2. 为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

转成数字类型

  • Number(数据)
    1. 如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
    2. NaN 也是number类型的数据，代表非数字
  • parseInt(数据)：只保留整数
  • parseFloat(数据)：可以保留小数
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        let str = '123'
        console.log(Number(str))
        // console.log(Number(pink))

        // let num = Number(prompt('输入年薪'))
        // console.log(num);

        // let num = prompt('输入年薪：')
        // console.log(Number(num));

        // let num = +prompt('输入年薪：')
        // console.log(num);

        console.log(parseInt('123px')) //123
        console.log(parseInt('123.34px')) //123
        console.log(parseInt('123.94px')) //123
        console.log(parseInt('ab123.94px')) //NaN


        console.log(parseFloat('123px')) //123
        console.log(parseFloat('123.34px')) //123.34
        console.log(parseFloat('123.94px')) //123.94
        console.log(parseFloat('ab123.94px')) //NaN
    </script>
</body>

</html>

4. 运算符

算术运算符

  1. 数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

  2. 算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等

运算符作用
+求和
-求差
*求积
/求商
%取模（取余数），开发中经常用于作为某个数字是否被整除
// 算术运算符
console.log(1 + 2 * 3 / 2) //  4 
let num = 10
console.log(num + 10)  // 20
console.log(num + num)  // 20

// 1. 取模(取余数)  使用场景：  用来判断某个数是否能够被整除
console.log(4 % 2) //  0  
console.log(6 % 3) //  0
console.log(5 % 3) //  2
console.log(3 % 5) //  3

// 2. 注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number)
console.log('pink老师' - 2)
console.log('pink老师' * 2)
console.log('pink老师' + 2)   // pink老师2
赋值运算符

对变量进行赋值的运算符

运算符作用
=右边赋值给左边
+=先加后赋值
-+先减后赋值
*=先乘后赋值
/=先除后赋值
%=先取模后赋值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>赋值运算符</title>
</head>

<body>
    <script>
        let num = 1

        // 赋值运算符 =
        // num = num + 1

        num += 1    //等价于 num = num + 1
        console.log(num)
    </script>
</body>

</html>
自增/自减运算符
符号作用说明
++自增变量自身的值加1，例如: x++
–自减变量自身的值减1，例如: x–
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自增运算符</title>
</head>
<body>
    <script>
        // let num = 10
        // num = num + 1
        // num += 1
        // console.log(num)

        // 1.前置自增
        // let i = 1
        // ++i
        // console.log(i)

        // let i = 1
        // console.log(++i + 1)

        // 2.后置内增
        // let i = 1
        // i++
        // console.log(i)

        // let i = 1
        // console.log(i++ + 1)
        // console.log(i)

        let i = 1
        console.log(i++ + ++i + i)

    </script>
</body>
</html>
比较运算符

使用场景：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）

运算符作用
>左边是否大于右边
<左边是否小于右边
>=左边是否大于或等于右边
<=左边是否小于或等于右边
===左右两边是否类型和值都相等（重点）
==左右两边值是否相等
!=左右值不相等
!==左右两边是否不全等
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较运算符</title>
</head>
<body>
    <script>
        console.log(3 > 5)
        console.log(4 >= 5)
        console.log(2 == 2)
        // 比较运算符有隐式转换  把'2'转换为2   双等号只判断值
        console.log(2 == '2')

        // === 全等  判断 值 和 数据类型都一样才行
        // 判断相等最好用  ===
        // console.log(undefined === null)

        console.log(2 === '2')
        console.log(NaN == NaN) //NaN 不等于任何人，包括它自己
        console.log(2 !== '2')   //true 
        console.log(2 != '2')   //false
        console.log('-----------------');
        console.log('a' < 'b') //true
        console.log('-----------------');
        console.log('aa' < 'ab') //true
        console.log('-----------------');
        console.log('aa' < 'aac') //true
    </script>
</body>
</html>
逻辑运算符

使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值

符号名称日常读法特点口诀
&&逻辑与并且符号两边有一个假的结果为假一假则假
||逻辑或或者符号两边有一个真的结果为真一真则真
!逻辑非取反true变false false变true真变假，假变真
ABA && BA || B!A
falsefalsefalsefalsetrue
falsetruefalsetruetrue
truefalsefalsetruefalse
truetruetruetruefalse
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算符</title>
</head>
<body>
    <script>
        // 逻辑与 && 一假则假
        console.log(true && true)
        console.log(false && true)
        console.log(3 < 5 && 3 > 2)
        console.log(3 < 5 && 3 < 2)
        console.log('-------------------------')
        
        // 逻辑或 || 一真则真
        console.log(true || true)
        console.log(false || true)
        console.log(false || false)
        console.log('-------------------------')
        
        //逻辑非 ! 取反
        console.log(!true)
        console.log(!false)
        console.log('-------------------------')

        let num = 6
        console.log(num > 5  && num < 10)
    </script>
</body>
</html>
运算符优先级
优先级运算符顺序
1小括号（）
2一元运算符++ – ！
3算数运算符先* / 后 + -
4关系运算符> >= < <=
5相等运算符== != !== ===
6逻辑运算符先&& 后 ||
7赋值运算符=
8逗号运算符,

5. 分支语句

分支语句可以根据条件判定真假，来选择性的执行想要的代码

分支语句包含：

  1. if分支语句（重点）
  2. 三元运算符
  3. switch语句
if 分支语句

语法：

if(条件表达式) {
  // 满足条件要执行的语句
}

小括号内的条件结果是布尔值，为 true 时，进入大括号里执行代码；为false，则不执行大括号里面代码

小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean()

如果大括号只有一个语句，大括号可以省略，但是，俺们不提倡这么做~

<script>
    // 单分支语句
    // if (false) {
    //   console.log('执行语句')
    // }
    // if (3 > 5) {
    //   console.log('执行语句')
    // }
    // if (2 === '2') {
    //   console.log('执行语句')
    // }
    //  1. 除了0 所有的数字都为真
    //   if (0) {
    //     console.log('执行语句')
    //   }
    // 2.除了 '' 所有的字符串都为真 true
    // if ('pink老师') {
    //   console.log('执行语句')
    // }
    // if ('') {
    //   console.log('执行语句')
    // }
    // // if ('') console.log('执行语句')

    // 1. 用户输入
    let score = +prompt('请输入成绩')
    // 2. 进行判断输出
    if (score >= 700) {
      alert('恭喜考入黑马程序员')
    }
    console.log('-----------------')

  </script>
if双分支语句

如果有两个条件的时候，可以使用 if else 双分支语句

if (条件表达式){
  // 满足条件要执行的语句
} else {
  // 不满足条件要执行的语句
}

 <script>
    // 1. 用户输入
    let uname = prompt('请输入用户名:')
    let pwd = prompt('请输入密码:')
    // 2. 判断输出
    if (uname === 'pink' && pwd === '123456') {
      alert('恭喜登录成功')
    } else {
      alert('用户名或者密码错误')
    }
  </script>
if 多分支语句

使用场景： 适合于有多个条件的时候

 <script>
    // 1. 用户输入
    let score = +prompt('请输入成绩：')
    // 2. 判断输出
    if (score >= 90) {
      alert('成绩优秀，宝贝，你是我的骄傲')
    } else if (score >= 70) {
      alert('成绩良好，宝贝，你要加油哦~~')
    } else if (score >= 60) {
      alert('成绩及格，宝贝，你很危险~')
    } else {
      alert('成绩不及格，宝贝，我不想和你说话，我只想用鞭子和你说话~')
    }
  </script>
三元运算符
  • 使用场景： 一些简单的双分支，可以使用 三元运算符（三元表达式），写起来比 if else双分支 更简单
// 三元运算符（三元表达式）
// 1. 语法格式
// 条件 ? 表达式1 : 表达式2 

// 2. 执行过程 
// 2.1 如果条件为真，则执行表达式1
// 2.2 如果条件为假，则执行表达式2

// 3. 验证
// 5 > 3 ? '真的' : '假的'
console.log(5 < 3 ? '真的' : '假的')

// let age = 18 
// age = age + 1
//  age++

// 1. 用户输入 
let num = prompt('请您输入一个数字:')
// 2. 判断输出- 小于10才补0
// num = num < 10 ? 0 + num : num
num = num >= 10 ? num : 0 + num
alert(num)
switch语句（了解）

使用场景： 适合于有多个条件的时候，也属于分支语句，大部分情况下和 if多分支语句 功能相同

  1. switch case语句一般用于等值判断, if适合于区间判断
  2. switch case一般需要配合break关键字使用 没有break会造成case穿透
  3. if 多分支语句开发要比switch更重要，使用也更多
// switch分支语句
// 1. 语法
// switch (表达式) {
//   case 值1:
//     代码1
//     break

//   case 值2:
//     代码2
//     break
//   ...
//   default:
//     代码n
// }

<script>
  switch (2) {
    case 1:
    console.log('您选择的是1')
    break  // 退出switch
    case 2:
    console.log('您选择的是2')
    break  // 退出switch
    case 3:
    console.log('您选择的是3')
    break  // 退出switch
    default:
    console.log('没有符合条件的')
  }
</script>

6. 循环语句

  • 使用场景：重复执行 指定的一段代码，比如我们想要输出10次 ‘我学的很棒’
  • 循环语句三要素：
    • 初始值 （经常用变量）
    • 终止条件
    • 变量的变化量
  • 循环语句分为：
    • while循环语句
    • for循环语句
while循环语句
  • while循环 就是在满足条件期间，重复执行某些代码。
  • 跟if语句很像，都要满足小括号里的条件为 true才会进入 循环体 执行代码
  • while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
while (条件表达式) {
   // 循环体    
}

// 需求: 利用循环重复打印3次 '月薪过万不是梦，毕业时候见英雄'
let i = 1
while (i <= 3) {
  document.write('月薪过万不是梦，毕业时候见英雄~<br>')
  i++   // 这里千万不要忘了变量自增否则造成死循环
}
退出循环
  • continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
  • break 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        let i = 1
        while (i <= 5) {
            if (i === 3){
                // break     // 退出循环
                i++
                continue    // 退出本次循环，继续下次循环
            }
            document.write(`我已经吃了${i}个包子<br>`)
            i++
        }
    </script>
</body>
</html>
for循环语句
  • for 是 JavaScript 提供的另一种循环控制的话句，它和 while 只是语法上存在差异。
  • 当如果明确了循环的次数的时候推荐使用for循环,当不明确循环的次数的时候推荐使用while循环
  • 变化量和死循环，for 循环和 while 一样，如果不合理设置增量和终止条件，便会产生死循环。
<script>
  // 1. 语法格式
  // for(起始值; 终止条件; 变化量) {
  //   // 要重复执行的代码
  // }

  // 2. 示例：在网页中输入标题标签
  // 起始值为 1
  // 变化量 i++
  // 终止条件 i <= 6
  for(let i = 1; i <= 6; i++) {
    document.write(`<h${i}>循环控制，即重复执行<h${i}>`)
  }
</script>
  • 跳出和终止循环
<script>
    // 1. continue 
    for (let i = 1; i <= 5; i++) {
        if (i === 3) {
            continue  // 结束本次循环，继续下一次循环
        }
        console.log(i)
    }
    // 2. break
    for (let i = 1; i <= 5; i++) {
        if (i === 3) {
            break  // 退出结束整个循环
        }
        console.log(i)
    }
</script>
for循环嵌套
for(外部声明循环次数的变量; 外部终止条件; 外部变化量) {
    
	for(内部声明循环次数的变量; 内部终止条件; 内部变化量) {
        
		循环体
	}
}

7. 数组

  • 数组(Array)：是一种可以按顺序保存数据的数据类型。
  • 数组是按顺序保存，所以每个数据都有自己的编号
  • 计算机中的编号从0开始，所以数组的编号从0开始
  • 在数组中，数据的编号也叫索引或下标
  • 数组可以存储任意类型的数据
数组的基本使用
  • 声明数组
    • let 数组名 = [数据1,数据2，数据3，… 数据n]
    • let 数组名 = new Array(数据1,数据2，数据3，… 数据n)
  • 使用数组
    • 数组名[下标]
  • 遍历数组：用循环把数组中每个元素都访问到,一般会用for循环遍历
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的基本使用</title>
</head>
<body>
    <script>
        // 1.字面量声明数组
        let arr = [1, 2, 'pink', false]
        // 2.使用new Array 构造函数声明    了解
        let arr1 = new Array(1, 2, 3, 4)
        console.log(arr)
        console.log(arr1)
        // 3.使用数组
        console.log(arr[0])
    </script>
</body>
</html>
操作数组

  • 数组本质是数据集合, 操作数组无非就是 增 删 改 查 。

  • 新增数组元素

    • 数组.push(新增的内容) 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (重点)。
    • 数组.unshift(新增的内容) 方法将一个或多个元素添加到数组的 开头，并返回该数组的新长度。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组新增元素</title>
</head>
<body>
    <script>
        
        let arr = ['pink', 'hotpink']

        // 末尾增加 push
        console.log(arr.push('deeppink'))   //3
        arr.push('deeppink', 'lightpink')
        console.log(arr)

        //开头追加
        arr.unshift('red')
        console.log(arr)
        
    </script>
</body>
</html>

  • 修改数组元素

    • 数组名[下标] = 新值
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改数组元素</title>
</head>
<body>
    <script>
        let arr = []
        console.log(arr)
        
        console.log(arr[0]) //underfined
        
        arr[0] = 1
        arr[1] = 6
        console.log(arr)

        let arr1 = ['pink', 'red', 'green']
        // 修改
        // arr1[0] = 'hotpink'
        // console.log(arr1)

        //给所有的数组元素后加上‘老师’
        for(let i = 0; i < arr1.length; i++){
            arr1[i] = arr1[i] + '老师'
        }
        console.log(arr1)
    </script>
</body>
</html>

  • 删除数组元素

    • 数组.pop() 方法从数组中删除最后一个元素，并返回该元素的值
    • 数组. shift() 方法从数组中删除第一个元素，并返回该元素的值
    • 数组. splice(起始位置,删除的个数) 方法删除指定元素，起始位置填写数组的索引号。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除数组元素</title>
</head>
<body>
    <script>
        let arr = ['red', 'green', 'blue']

        // 1.pop() 删除最后一个元素
        /* console.log(arr.pop())
        arr.pop()
        console.log(arr) */


        // 2.shift()  删除第一个元素
        /* arr.shift()
        console.log(arr) */

        // 3.splice()  删除指定元素 splice(起始位置-索引号,删除的个数)
        arr.splice(1, 1)    //从索引号为1的位置开始删，只删除一个元素
        // arr.splice(1)    //从索引号为1的位置开始删，一直删到最后

        console.log(arr)
    </script>
</body>
</html>
数组排序
  • 数组. sort()方法可以排序
<script>
   // arr.sort()
   // console.log(arr)

   // arr.sort()  对数组arr[]进行排序
   // sort 升序排列
   arr.sort(function (a, b) {
      return a - b
   })

   // sort  降序排列
   /* arr.sort(function (a, b) {
      return b - a
   }) */
   console.log(arr)
</script>
数组方法
  • 数组map方法：map 可以遍历数组处理数据，并且返回新的数组
  • 数组join()方法 ： 把数组转换为字符串
  • 数组forEach()方法：就是遍历数组 加强版的for循环 适合于遍历数组对象
  • 筛选数组 filter() 方法：筛选数组符合条件的元素，并返回筛选之后元素的新数组
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>数组方法</title>
</head>

<body>
    <script>
        const arr = ['red','blue','pink']
        // console.log(arr)

        // 1.数组map方法
        const newArr = arr.map(function(ele,index){
            console.log(ele)    // 当前数组元素
            console.log(index)  // 数组索引号
            return ele + '颜色'
        })

        console.log(newArr)

        // 2.数组join方法   把数组转换为字符串
        // 小括号为空则用逗号分开
        console.log(newArr.join())      // red颜色,blue颜色,pink颜色
        // 小括号是空字符，元素之间没有分隔符
        console.log(newArr.join(''))    // red颜色blue颜色pink颜色

        console.log(newArr.join('|'));  // red颜色|blue颜色|pink颜色
        
        
        // 3.forEach 就是遍历 加强版的for循环 适合于遍历数组对象
        const arr = ['red', 'greed', 'pink']
        arr.forEach(function(item,index){
            console.log(item)   // 数组元素 red,green,pink
            console.log(index)  // 索引号
        })
        
        // 4.fileter筛选数组
        const arr = [10, 20, 30]
        // const newArr = arr.filter(function (item, index) {
        //     console.log(item)   // 数组元素
        //     console.log(index)  //数组索引号
        //     return item >= 20
        // })
        
        const newArr = arr.filter(item => item >= 20)
        console.log(newArr)

    </script>
</body>

</html>

8. 函数

  • function，是被设计为执行特定任务的代码块
  • 函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。
函数使用

  • 函数声明

    function 函数名() {
	函数体
}

  • 函数调用：函数名()

    • 函数调用，调用函数时函数体内的代码会执行
    • 声明（定义）的函数必须调用才会真正被执行
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>函数的使用</title>
</head>

<body>
    <script>
        //1.函数的声明
        /* function 函数名() {
            函数体
        } */

        function sayHello() {
            document.write('Hello,JavaScript!')
        }

        // 2.函数的调用    函数不调用自己不会执行
        // 函数名()

        sayHello() 

    </script>
</body>

</html>
函数传参
  • 形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
  • 实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
  • 形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
  • 开发中尽量保持形参和实参个数一致
  • 我们曾经使用过的 alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数参数</title>
</head>
<body>
    <script>
        // 函数传参
        // 1.声明
        /* function 函数名(参数列表) {
            函数体
        } */
        // 2.调用
        // 函数名(传递的参数列表)

        // 声明里的参数是形参，形式上的参数
        // 调用里的参数是实参，实际上的参数 
        
        function getSum2(start,end) {
            let sum = 0
            for (let i = start; i <= end; i++){
                sum += i
            }   
            document.write(`${start}~${end}之间所有数的和为：${sum}<br/>`)
        }
        getSum2(1,50)
        getSum2(99,100)    
    </script>
    
</body>
</html>
函数返回值
  • 要想获得函数内部逻辑的执行结果，需要通过 return 这个关键字，将内部执行结果传递到函数外部，这个被传递到外部的结果就是返回值。
  • 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
  • return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写
  • return 函数可以没有 return，这种情况函数默认返回值为 undefined
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>函数返回值</title>
</head>
<body>

  <script>
    // 定义求和函数
    function count(a, b) {
      let s = a + b
      // s 即为 a + b 的结果
      // 通过 return 将 s 传递到外部
      return s
    }

    // 调用函数，如果一个函数有返回值
    // 那么可将这个返回值赋值给外部的任意变量
    let total = count(5, 12)
  </script>
</body>
</html>
作用域
  • 通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域
  • 变量访问原则：在能够访问到的情况下 先 局部， 局部没有在找全局
  • 全局作用域：
    • 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件
    • 处于全局作用域内的变量，称为全局变量
  • 局部作用域
    • 作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。
    • 处于局部作用域内的变量称为局部变量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域</title>
</head>
<body>
    <script>
        // 1.全局作用域：在<script>标签内部或者js文件里的区域称为全局作用域
            // 全局作用域对应全局变量
        // 2.局部作用域：在函数或者循环体里的区域
            // 局部作用域对应局部变量
        
        // 全局变量
        let num = 10    
        console.log(num)

        function fn() {
            console.log(num)
        }
        fn()

        // 局部变量
        function fun() {
            let str = 'white'
        }
        console.log(str)  //报错，调用不了函数内部的局部变量
    </script>
</body>
</html>
匿名函数

  • 匿名函数：没有名字的函数, 无法直接使用。与之相对应的是具名函数。

  • 匿名函数的使用：

    • 函数表达式：将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>函数表达式</title>
</head>

<body>
    <script>
        // 函数表达式
        let fn = function (a, b) {
            // console.log('我是函数输出的语句')
            console.log(a + b)
        }
        // fn()
        fn(1, 2)

        // 函数表达式与具名函数的区别
        /* 
        1.具名函数的调用可以在任意位置
        2.函数表达式只能先声明表达式在调用 
        */
    </script>
</body>

</html>
    • 立即执行函数：无需调用，立即执行，其实本质已经调用了
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>立即执行函数</title>
</head>

<body>
    <script>
        // 第一种写法
        (function () { })();
        // 第二种写法
        (function () { }());

        // 立即执行函数
        (function () {
            console.log(11)
        })();

        //两个立即执行函数之间必须要有';'号隔开
        (function () { console.log(66) })();
        (function () { console.log(22) })();

        //前面括号里放形参，后面括号放实参
        (function (x, y) { console.log(x + y) })(7, 8);
        (function (x, y) { console.log(x + y) }(1, 2));
    </script>
</body>

</html>

9. 对象

  • 对象：JavaScript里的一种数据类型
  • 对象数据类型可以被理解成是一种数据集合。
  • 对象由属性和方法两部分构成。
对象的声明
  • 声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>对象的声明</title>
</head>
<body>

  <script>
    // 声明字符串类型变量
    let str = 'hello world!'
    
    // 声明数值类型变量
    let num = 199

    // 声明对象类型变量，使用一对花括号
    // user 便是一个对象了，目前它是一个空对象
    let user = {}
  </script>
</body>
</html>
对象的属性
  • 数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
    • 属性都是成 对出现的，包括属性名和值，它们之间使用英文 : 分隔
    • 多个属性之间使用英文 , 分隔
    • 属性就是依附在对象上的变量
    • 属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 对象语法</title>
</head>
<body>

  <script>
    // 通过对象描述一个人的数据信息
    // person 是一个对象，它包含了一个属性 name
    // 属性都是成对出现的，属性名 和 值，它们之间使用英文 : 分隔
    let person = {
      name: '小明', // 描述人的姓名
      age: 18, // 描述人的年龄
      stature: 185, // 描述人的身高
      gender: '男', // 描述人的性别
    }
  </script>
</body>
</html>
对象的方法

  • 数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

    1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
    2. 多个属性之间使用英文 , 分隔
    3. 方法是依附在对象中的函数
    4. 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>对象的方法</title>
</head>

<body>
    <script>
        // 对象的方法本质上是函数
        let obj = {
            uname: '刘德华',
            // 方法
            song: function (x, y) {
                console.log('冰雨')
                console.log(x + y)
            },
            dance: function() {
                console.log('跳舞')
            }
        }

        // 方法调用     对象名.方法名
        obj.song(1, 2)
        obj.dance()
        
    </script>
</body>

</html>
对象的使用
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象的使用</title>
</head>

<body>
    <script>
        // 1.声明对象
        let goods = {
            'goods-name': 'Redmi K50 至尊版',
            num: '100613485',
            weight: '0.65kg',
            address: '中国大陆'
        }
        // console.log(goods)

        // 2.查找对象里面的属性     查    对象名.属性
        console.log(goods.address)
        // 2.1 对象名.属性名    goods.age
        // 2.2 对象名['属性名']     goods['age']
        console.log(goods['goods-name']);

        //3.改变对象里的属性    改      对象名.属性 = 新值
        console.log(goods.weight)
        goods.weight = '1kg'
        console.log(goods.weight)

        //4.增加对象里的属性    增      对象名.新属性 = 新值
        goods.height = '15cm'
        console.log(goods)

        //5.删除对象里的属性    删(了解)    delete  对象名.属性
        delete goods.height
        console.log(goods)


        // (1)商品名称改为:小米10 PLUS
        goods.name = '小米10 PLUS'
        // (2)新增一个属性颜色color为'粉色'
        goods.color = '粉色'
        // (3)依次页面打印输出所有属性值
        document.write(`商品名称:${goods.name}<br/>`)
        document.write(`商品编号:${goods.num}<br/>`)
        document.write(`商品毛重:${goods.weight}<br/>`)
        document.write(`商品产地:${goods.address}<br/>`)
        document.write(`商品颜色:${goods.color}<br/>`)

        document.write('---------------------------------<br/>')
        document.write(`商品名称:${goods['goods-name']}<br/>`)
        document.write(`商品编号:${goods['num']}<br/>`)
        document.write(`商品毛重:${goods['weight']}<br/>`)
        document.write(`商品产地:${goods['address']}<br/>`)
        document.write(`商品颜色:${goods['color']}<br/>`)
        console.log(goods)
    </script>
</body>

</html>
对象的遍历
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象的遍历</title>
</head>

<body>
    <script>
        // 1.for in 遍历数组  不推荐for-in遍历数组
        /* 
        let arr = ['pink', 'green', 'hotpink', 'red']
        for (let k in arr) {
            console.log(k)  //数组的下标  索引号  但是是字符串
            console.log(arr[k])
        }
        */
    
        // 遍历对象 for-in
        // let obj = {
        //     uname: 'pink老师',
        //     age: '18',
        //     gender: '男'
        // }

        // for (let k in obj) {
        //     console.log(k)  //输出属性名  'uname' 'age'
        //     // console.log(obj.uname)
        //     console.log(obj[k])     //输出属性值 obj[k]

        // }


        let test = {
            uname: '虹猫',
            age: '22',
            gender: '男'

        }

        for (let k in test){
            console.log(k);
            console.log(test[k]);
        }
      
    </script>
</body>

</html>
内置对象

  • 我们曾经使用过的 console.log，console其实就是 JavaScript 中内置的对象，该对象中存在一个方法叫 log，然后调用 log 这个方法，即 console.log()。

  • 除了 console 对象外，JavaScript 还有其它的内置的对象

Math

Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数学内置对象Math</title>
</head>
<body>
    <script>
        //属性
        // 圆周率
        console.log(Math.PI)
        // 方法
        // ceil     向上取整
        console.log(Math.ceil(1.1))
        console.log(Math.ceil(1.5))
        console.log(Math.ceil(1.9))
        // floor    向下取整
        console.log(Math.floor(1.1))
        console.log(Math.floor(2.5))
        console.log(Math.floor(3.6))
        // round    四舍五入
        console.log(Math.round(1.1))
        console.log(Math.round(-1.5))
        console.log(Math.round(-1.6))
    </script>
</body>
</html>
清风伴荼
关注
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
热门推荐
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript基础（详细总结）
程序员阿龙的博客
08-18 2万+
JavaScript基础入门详细总结
JavaScript 基础概念
weixin_52682120的博客
04-20 3139
1 JavaScript 概念 1.1 什么是JavaScript（简称“JS”）？ 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。 【脚本语言、基于对象、动态交互、跨平台性】 1.2 语言组成 ①ECMAScript，描述了该语言的语法和基本对象。 ②文档对象模型（DOM），描述处理网页内容的方法和接口。 ③浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。 1. 3 JavaScript的标准是? JavaScript已经被Netscape公司提交给ECMA制定为标准，称之为E
JavaScript基础语法
m0_67683346的博客
11-02 6028
javascript中的一些基础语法
JavaScript基础入门
dangfulin的博客
08-21 5727
一，什么是JavaScript 1，与Java无关！与Java无关！与Java无关！ JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。 JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。 JavaScript的引入，符合”渐进增
javascript百炼成仙 第一章 掌握JavaScript基础 1.2直接量
java小白翻身
10-06 7万+
叶小凡的住处被安排在青山院西北角的一个房间里，虽不宽敞，倒也干净。叶小凡两眼露出振奋的眼神，随便吃了点乡亲们准备的干粮后，就立刻开始打坐修行。编程之修，重在积累，而非资质。资质虽然一样重要，可是后天的努力一样必不可少。这些道理，叶小凡还未上山之前，就已经熟知！因此，即便是资质平凡，只要肯下苦功，一样可以修得正果！叶小凡虽然甲等资质，可依然不骄不躁，开始从“JavaScript基础修炼要诀”第一页开始看起。 修炼要诀第一章，直接量。 编程世界，所谓直接量，就是明面上可以见到的数据值。常见的直接量有数字，小数，
Javascript 基础知识学习
岳来的博客
11-23 7322
javascript 基础学习
JavaScript基础知识点
qq_40046544的博客
08-06 2025
JavaScript是一门完备的动态编程语言。当应用于HTML文档时，可为网站提供动态交互特性。由布莱登布兰登·艾克发明。字面量是用于表达源代码中的一个固定值的表示法字面量有数字字面量、字符串字面量、数组字面量、对象字面量等变量是计算机中用来存储数据的容器，简单理解是一个盒子。未定义是比较特殊的类型，只有一个值undefined只声明变量未赋值的情况下，变量的默认值为undefined简介：数组是一种可以按顺序保存数据的数据类型元素：数组中保存的每一个数据都叫做数组元素下标：数组中数据的编号。...
javascript基础
08-09
javascript基础，适合零基础或初学者简单简洁 ，易于理解
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4425
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
vue上传预览CAD文件
只会写bug
09-24 554
如果选择的是 Three.js，那么可以创建一个场景来加载和显示模型。如果是用特定的 CAD 查看器库，则按照其文档进行集成即可。根据具体需求和技术能力，可以选择最适合的解决方案来实现 CAD 文件的上传和预览功能。
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 215
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
vue单点登录异步执行请求https://xxx.com获取并处理数据
最新发布
m0_65360496的博客
09-27 103
vue单点登录异步执行请求https://xxx.com获取并处理数据
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 360
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
方法论大师 JavaScript 版本
PlayerYK的专栏
09-25 194
无论什么行业、什么问题，都会有一群人擅长通过简单的拼凑和归纳，炮制出一套“高深”的方法论。这些方法论通常看似逻辑严密、层层递进，实则全是空洞的概念堆砌，毫无实质作用。最搞笑的是，他们居然能为任何事物总结出一个“公式”，让人乍一看觉得有理，仔细思考后发现不过是披着华丽外衣的废话。是不是开始觉得这些“方法论大师”其实并没有提供真正有价值的建议？如果你也曾被这些空洞的概念忽悠过，那么来吧，我为你提供一个...
JavaScript基础入门教程
"这是一份JavaScript基础教程，适合初学者，提供初级知识，不涉及动态网页相关高级技术，如动态定位、动画等。教程结构设计为参考教程风格，分为5章，涵盖基础知识和进阶对象知识，以及框架和Cookie的使用。教程要求...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值