一、类型转换的复习

  1. 隐士数据类型转；

    1. 两边都是数字类型，加运算，两边只要有一个字符串，另外会转为字符串，字符串的拼接
      • / % 把两边的数据转换为数字类型

  2. 显示数据类型转换

    1. Number()其他类型转数字类型
    2. 其他类型转布尔类型 0 ，NaN, undefined, null, “”会转换为false, 其他会转换为true
  1. <script>
  2.         // 1.隐士数据类型转；
  3.         console.log(3 + 5);
  4.         /* 两边都是数字类型，加运算，两边只要有一个字符串，另外会转为字符串，
  5.         字符串的拼接 */
  6.         console.log('3' + 5);
  7.         console.log(false + 5);
  8.         // - * / %  把两边的数据转换为数字类型
  9.         console.log('6' - '3')
  10.         console.log('6' * '3')
  11.         console.log('6' / '3')
  12.         console.log('13' % '2')
  13.         console.log('土豆' % 13);
  14.         // 2.显示数据类型转换
  15.         // Number()其他类型转数字类型
  16.         console.log(Number('12'))
  17.         console.log(Number('玉兰花'))
  18.         let abc
  19.         console.log(Number(abc))
  20.         console.log(Number(true))
  21.         console.log(Number(false))
  22.         // 其他类型转布尔类型 0 ，NaN, undefined, null, ""会转换为false, 其他会转换为true
  23.         let a = ""
  24.         console.los(Boolean());
  25.     </script>

1、加号（正号）

+(正好)数据可以将其他类型转换为数字类型

  1.  <script>
  2.         // +(正好)数据，可以将其他类型转换为数字类型
  3.         let num1 = +"5"
  4.         console.log(num1, typeof num1);
  5.         let num2 = +prompt('请输入年龄')
  6.         console.log(num2, typeof num2)
  7.     </script>

错误示范：

  1.   <script>
  2.     console.log(age);
  3.   //Identifier 'age' has already been declared  变量重复声明
  4.     let age = 10
  5.     let age = 20
  6.     missing ) after argument list少)
  7.     document.write("嘻嘻:
  8. </script>

函数的介绍和基本使用

  • 掌握函数的基本使用，让代码复用
  • 掌握内置函数，实现一些计算效果

1.1、函数的作用

  1. 函数: function，是被设计为执行特定任务的代码块

  2. 说明:

    • 函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。
      1. <script>
      2. // 交换两个变量的值
      3. function fn() {
      4.  let x = 5, y = 10, z;
      5.  z = x;
      6.  x = y;
      7.  y = z;
      8.  console.log(x, y);
      9. }
      10. // 调用函数
      11. fn();
      12. // 打招呼
      13. function sayHi() {
      14.  console.log('嗨~');
      15. }
      16. sayHi()
      17. </script>

1.2、函数的基本语法

  • 函数名命名规范

    • 和变量命名基本一致
    • 尽量小驼峰式命名法

    • 前缀应该为动词

      • 命名建议:常用动词约定 | 动词 | 含义 | | :—-: | :—-: | | can | 判断是否可执行某个动作 | | | | | | | | | | | | | | | |
  1. //任意三个数字
  2.         getRes(10,2,3)
  3.         getRes(6,2,5)
  4.         // 声明函数
  5.         function sayHi() {
  6.             //函数体
  7.             document.write('你好吗，我还好')
  8.         }
  9.         sayHi() *
  10.         //函数的调用  函数名（）
  11.         // 函数不调用，不执行，调用了才执行，次数没有限制

二、有参数的函数

2.1

  1. //函数声明的时候，（）里边的是形象
  2. function getRes(x, y) {
  3.             document.write(x + y)
  4.         }
  5.  //函数调用的时候（）里边的是实参
  6.         getRes(3, 4)
  7.   sayHi()

2.3、形参和实参

  1. function getSum(num1,num2) {
  2.     document. wnite( num1 + num2)
  3. }
  4. getSum(10，20)
  5. 实参
  • 形参:声明函数时写在函数名右边小括号里的叫形参(形式上的参数)

案例-有参数的函数课堂练习-计算公里

  1.     <script>
  2.         // 让用户输入开车时速，以及开了多少小时的车，计算出这辆车跑了多少公里要求: 计算部分封装成函数
  3.         let speed = prompt('请输入您的速度')
  4.         let hour = prompt('请输入您开车时常')
  5.         /*  1.需不需要参数
  6.          2.功能 */
  7.         function getRes(speed, hour) {
  8.             document.write(`您走了${speed * hour}公里`)
  9.         }
  10.         //实数可以任意类型的数据
  11.         getRes(speed, hour)
  12.     </script>

2.4、形参和实参个数不相等的问题

  1. 实参多，形参少，多余的实参传不进去
  2. 实参少, 形参多, 多余的形参因为没有实参传入给他, 多余的形参是undefined
  1.  function getSum(x, y, z) {
  2.             document.write(x + y + z)
  3.         }
  4.         getSum(3, 5)

三、有返回值的函数

  • 提问:是什么是函数?

    • 函数是被设计为3.29-day10-js函数 对象 - 图1执行特定任务的代码块

  • 提问:执行完特定任务之后，然后呢?把任务的结果给我们

    • 缺点:把计算后的结果处理方式写死了
    • 内部处理了解决:把处理结果返回给调用者

    • 有返回值函数的概念:

      • 当调用某个函数，这个函数会返回一个结果出来
      • 这就是有返回值的函数

3.1、用return返回数据

  • 当函数需要返回数据出去时，用return关键字

return数据 return 20

  1. //函数的预算结果,如果想在函数外边使用,函数就现需要返回值
  2. function getSum(x，y) {
  3.     return x +y
  4. }
  5. //返回值的作用, 是将函数运行的结果赋值黑函数调用 
  6. // getSum(3, 5) = s + y
  7. let num = getSum(10，30)
  8. document.write(num)

3.2、ruturn注意的细节部

  • 函数没有return, 或者return, 但是后边没有数据, 返回值是undefine
  • 函数体内，return 下一行的代码不执行，return有终止函数执行的作用
  • return需要的返回的值, 不要换行
  1.  <script>
  2.         function getSum(x, y) {
  3.             /* 1.函数没有return, 或者return, 但是后边没有数据, 返回值是undefined
  4.             2.函数体内，return 下一行的代码不执行，return有终止函数执行的作用
  5.             3.return需要的返回的值, 不要换行 */
  6.             return
  7.         }
  8.         let sum = getSum(4, 6)
  9.         console.log(sum)
  10.     </script>

3.3、有返回值的函数小结

目标:掌握有返回值的函数，把函数处理结果给调用者

  1. 为什么要让函数有返回值

    • 函数执行后得到结果，结果是调用者想要拿到的(一句话，函数内部不需要输出结果，而是返回结果)
    • 对执行结果的扩展性更高,可以让其他的程序使用这个结果

  2. 函数返回值使用哪个关键字?

    • 语法: return数据
    • return后面不接数据或者函数内不写return，函数的返回值是undefined
    • return能立即结束当前函数，所以return后面的数据不要换行写

四、parseint类型

4.1、内置函数之数字提取-parseInt /~parseFloat

  1. parseInt()

    1. 是一个返回值为number类型的函数
    2. 作用:从字符串中提取出整数

    3. 细节:

      • 1.字符串内容从左到右依次分析是否数字，直到遇到非数字停止
      • 2.如果字符串不是以数字开头,得到NaN

  2. parseFloat()

    1. 作用:从字符串中提取数字(包括小数)

    2. 细节:

      1. 字符串内容从左到右依次分析是否数字，直到遇到第二个小数点或者非数字停止
      2. 如果字符串不是以数字开头,得到NaN
  1. //代码：parseInt()
  2. <script>
  3.         let num1 = 12.23
  4.         let num2 = 23.98
  5.         let str1 = '123abc'
  6.         let str2 = '12312啊哈哈哈'
  7.         let str3 = '啊哈哈哈'
  8.         //可以将其他类型转换为数字类型
  9.         //1. 字符串从左到右,依次提取,遇到非数字停止
  10.         // 2.如果字符串是非数字,得到NaN
  11.         console.log(typeof parseInt(num1)); //number
  12.         console.log(parseInt(num2));   //23.98
  13.         console.log(parseInt(str1));     //123
  14.         console.log(parseInt(str2));   //12312
  15.         console.log(parseInt(str3));  //NaN
  16.         console.log(parseInt(true))  //nan
  17.     </script>
  18. -------------------------------------------------------
  19. //代码：parseFloat()         
  20.    let num1 = 12.23
  21.         let num2 = 23.98
  22.         let str1 = '123abc'
  23.         let str2 = '12312啊哈哈哈'
  24.         let str3 = '啊哈哈哈'
  25.         //1. 字符串从左到右,依次提取,遇到非数字停止或者在第二个小数点停止
  26.         // 2.如果字符串是非数字,得到NaN
  27.         console.log(typeof parseFloat(num1)); //number
  28.         console.log(parseFloat(num2));   //23.98
  29.         console.log(parseFloat(str1));     //123
  30.         console.log(parseFloat(str2));   //12312
  31.         console.log(parseFloat(str3));  //NaN
  32.         console.log(parseFloat(true))  //nan
  33.         console.log(parseFloat(false))  //nan

五、内置函数案例

目标:通过案例巩固内置函数调用

  1. 计算公式:计算时分秒

    • 小时:h = parseInt(总秒数/ 60 / 60 % 24)
    • 分钟:m = parseInt(总秒数/ 60 % 60 )
    • 秒数:s = parseInt(总秒数% 60)
  1.  <script>
  2.         //用户输入总秒数,转换成里边几小时几分几秒
  3.         let total = prompt('请输入总数')
  4.         function getTime(t) {
  5.             //剩余多少小时 36661秒
  6.             hours = parseInt(t / 60 / 60 % 24)
  7.             //分数秒 
  8.             min = parseInt(t / 60 % 60)
  9.             //秒数
  10.             sec = t % 60
  11.             return (`${hours}:${min}:${sec}`)
  12.         }
  13.         let time = getTime(total)
  14.         document.write(time)
  15.     </script>

二、js对象

一．对象的介绍和语法

  • 用户信息
  • 产品信息
  • 订单信息

1.1、对象是什么

  • 对象（object） : JavaScript里的一种数据类型
  • 可以理解为是一种数据集合

  • 用来描述某个事物，例如描述一个人

    1. 人有姓名、年龄、性别等信息、还有吃饭睡觉打代码等功能
    2. 如果用多个变量保存则比较散，用对象比较统一

1.3、属性和访问

1.对象有属性和方法组成

  • 属性:信息或叫特征（名词)。比如手机尺寸、颜色、重量等…

  • 方法:功能或叫行为（动词）。比如手机打电话、发短信、玩游戏…

  • 你还能举例吗?

    1. let对象名 ={
    2.   属性名:属性值,
    3.   方法名:函数
    4. }

2.属性

    1. 数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。
      1. let person = {
      2. uname: 'andy' ,
      3. age: 18,
      4. sex:'男'
      5. }

  1. 属性都是成对出现的，包括属性名和值，它们之间使用英文:分隔

  2. 多个属性之间使用英文，分隔

  3. 属性就是依附在对象上的变量（外面是变量，对象内是属性）

  4. 属性名可以使用””或”‘，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

3.属性和访问

声明对象，并添加了若干属性后，可以使用﹒或[获得对象中属性对应的值，我称之为属性访问。

  1. 注意:使用﹒和[]结果是一样的

  2. 写法由区别：

    • 点后面的属性名一定不要加引号

    • 里面的属性名一定加引号

    • 后期不同使用场景会用到不同的写法

  1. <script>
  2.         let goods = {
  3.             name: '小米10青春版',
  4.             num: 100012816024,
  5.             weight: '0.55kg',
  6.             address: '中国大陆'
  7.         }
  8.         //属性的访问
  9.         //写法1:对象名.属性名
  10.         //写法2:对象名['']
  11.         console.log(goods.name)
  12.         console.log(goods['num'])
  13.     </script>

案例：

  1.   <script>
  2.         let wanghao = {
  3.             name: '王浩',
  4.             age: 18,
  6.         }
  7.         //追加属性,在括号的外白给对象添加属性
  8.         //1.对象名.属性=值
  9.         //2.对象名['属性']=值
  10.         wanghao.sex = '男'
  11.         wanghao['love'] = '女'
  12.         console.log(wanghao)
  13.     </script>

4.方法和访问

  1. 对象中的方法

    • 数据行为性的信息称为方法，如跑步、唱歌等，一般是女词性的,其本质是函数。
      1. sayHi : function() {
      2. name: "andy' ,
      3. sayHi : function() {
      4. document.wnite( 'hi~~')
      5. }
      6. }

  1. 方法是由方法名和函数两部分构成，它们之间使用:分隔

  2. 多个属性之间使用英文，分隔

  3. 方法是依附在对象中的函数

  4. 方法名可以使用””或’’，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
    案例：

  1.  <script>
  2.         let wanghao = {
  3.             name: '王浩',
  4.             age: 18,
  5.             //给对象添加方法  方法名:函数
  6.             play: function () {
  7.                 console.log('踢足球');
  8.             },
  9.             eat: function (food) {
  10.                 console.log(`吃${food}`);
  11.             }
  12.         }
  13.         //调用对象的方法  对象名.方法名()
  14.         wanghao.play()
  15.         wanghao.eat('棉花糖')
  16.     </script>

三、内置对象

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

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

1.2、内置对象Math

  • Math对象是JavaScript提供的一个“数学高手”对象
  • 提供了一系列做数学运算的方法

  • 方法由：

    • random:生成0-1之间的随机数（包含0不包括1)
    • ceil:向上取整
    • floor:向下取整
    • max:找最大数
    • min:找最小数
    • pow:幂运算
    • abs:绝对值
  1. <script>
  2.         // console.log(Math.PI)
  3.         //生成[0,1),0-1的随机数，包含0，不包含1
  4.         let a = Math.random()
  5.         console.log(a)
  6.         //向上取整，整数加1，小数舍去  Math.ceil(数据)
  7.         let b = Math.ceil(3.12)
  8.         console.log(b)
  9.         //向下取证 整数减1，小数舍去  Math.floor(数据)
  10.         let c = Math.floor(3.24)
  11.         console.log(c)
  12.         //返回一组数的最大数
  13.         let d = Math.max(12, 3, -4)
  14.         console.log(d)
  15.         //返回一组数的最小数
  16.         let e = Math.min(12, 3, -4)
  17.         console.log(e)
  18.         //幂运算
  19.         let f = Math.pow(2, 3)
  20.         console.log(f)
  21.         //绝对值  负数会变成正数
  22.         let g = Math.abs(-13.2231)
  23.         console.log(g)
  24.     </script>