20230303----重返学习-函数概念-函数组成-函数调用-形参及匿名函数及自调用函数

day-019-nineteen-20230303-函数概念-函数组成-函数调用-形参及匿名函数及自调用函数

变量

• 变量声明
  • 变量 声明+定义(赋值=)
    • var num;num = 100; 声明与赋值分开
    • var num = 100; 声明时就赋值
  • 赋值=
  • 只能声明一次，可以赋值无数次
• 变量声明关键词
  1. var
  2. const
  3. let
  4. class
  5. function
  6. import

数据类型

• 数据类型
  • 原始值
    • number
    • string
    • boolean
    • null
    • undefined
    • symbol
    • bigint
  • 对象
    • object
      • Array
      • Function(函数)

数据类型转换

• Number()
• String()
  • {} => '[object Object]'
  • [] => ''
• Boolean()
  • null undefined NaN 0 ''
  • Boolean(false)//false
• 隐式转化

相关方法

• parseInt()
• parseFloat()
• isNaN()
• toFixed()
• BinInt()

普通对象(增删改查)

• 声明定义对象
var obj = {a:0}

• 查

  • obj.a
  • obj['a']
  • obj[a]//a是变量，报错a is not defined
    • obj[length]//length是变量，但去window上时找会找到

• 增与改

  • obj.b = 2;
  • obj['b'] = 2;
  • b='name';obj[b] = 2;

• 删
  delete obj.a
  obj.a = null

• 属性名只能是字符串或者symbol，如果不是，会转为字符串。

  var obj = {}
  var o = {}
  var obj[o]='object';//{'[object Object]':'object'}
  

• Symbol()属性值

//var obj[Symbol()]='唯一值'
var s = Symbol()
obj[s]='唯一值'
console.log(obj)

数组

var arr = [1,2,3]
//索引
//length
//元素

语句

• 条件
  • if(){}
  • if(){}else{}
  • if(){}else if(){}else{}
  • 只会进入判断一个花括号
  • 条件一定会转为布尔值
• switch(){case} 必须是===
• 循环语句
  • white
  • do while
  • for(var i=0;i<10;i++){}
    • for(var i=10-1;i>=0;i–){}
• 跳转语句
  • break
  • continue
  • return

或与非

• || 或者，只要满足一个条件就是true
• && 与，必须两个条件都是true，才最终是true
• ! 先将!后面的转为布尔值再取反
• + +xxx，将xxx转为number
• !! 转布尔值
• % 取余数

与=

{}{}//false
[][]//false

三元表达式

条件?xx:xxx;

案例

• 开关灯
  • 步骤
    1. 获取开关元素和被开关元素
    2. 在开关元素上绑定点击事件，事件里根据开关元素状态控制被开关元素的显隐
• 隔行变色
  • 标签是一个DOM对象，DOM对象可以添加属性名和属性值。
  • 步骤
    1. 获取被控制元素列表
    2. 在被控制元素列表循环绑定被控制元素的鼠标移入及移出事件，加背景颜色

函数

• 函数概念

  • 函数是具有某种特定功能的代码块。
  • 函数其实本质也是一种数据，属于对象数据类型。

• 函数的作用

  1. 解决代码的冗余问题，形成代码复用。
  2. 可以把整个代码项目，通过函数模块化。
  3. 封装代码，让函数内部的代码对外部不可见。

• 函数的组成

    // fn：函数名function fn(a, b) {//形参console.log(b);//undefinedconsole.log('fn1111');return;}console.log(fn);//输出的是整个函数体// 调用函数(执行)fn('div');//调用的时候小括号里面的东西叫做实参
  

  • 函数由如下部分组成：

    • 函数名，命名规则同变量名一致。
    • 函数体， 函数的内容，代码块。
    • 参数， 分为形参和实参。
    • 返回值， 函数调用表达式的结果

  • 函数声明

      // fn：函数名function fn(a, b) {//形参console.log(b);//undefinedconsole.log('fn1111');return;}console.log(fn);//输出的是整个函数
    

    • function后面的变量名就是函数名
    • 函数名后面的小括号里面的东西就叫做形参。
    • 形参小括号后面花括号里的所有代码就是函数体。
    • console.log(函数名)打印出来的是整个函数
      • 包含函数声明关键字及形参及函数体
      • console.log([函数名]);打印出来的和console.dir(函数名)差不多。也是把函数当成对象来看。
    • console.dir(函数名);打印出来的是函数对象
      • 这鼐函数对象里会把函数当成一个对象，对象上会有属于函数对象的属性值。
    • 声明函数时，里面的代码并不会执行，可以把它当成是一堆字符串，只是这些字符串是可执行的源代码。
    • 调用函数时，才会执行函数，相当于把函数体内的字符串当成源代码并执行了。这个时候函数才会有报错。
    • 函数执行后会有结果，结果取决于return。

• 函数调用

  • 与Symbol()、document.getElementById()类似。

  • 实参与形参

    • 调用时小括号里面的东西叫做实参，里面必须是某种数据类型或者是变量，而变量一般也是某种数据类型
    • 在声明函数时，小括号里的变量就是形参

  • 传参 就是把实参赋值给形参

    • 如果传了实参，但没有形参接收，将会直接被忽略。
    • 有形参但没有实参对应，相当于声明了变量没有去赋值，在执行函数时该形参的值是undefined
    • 参数个数问题
      • 实参数===形参数，从左往右一一对应
      • 实参数>形参数，多出来的实参被忽略，但还是会传到arguments和...剩余参数。
      • 实参数<形参数，
    • 接收参数的其它方法
      • arguments 在函数内，执行函数时，它是当前执行过程中所有的实参集合
        • 但凡前面有一个名词后接类似数组的东西，可以认为就是伪数组。
          • 如: arguments与document.getElementsByTagName(‘div’)
        • arguments只能在函数里面使用，函数外不行，会报错。
          • 因为arguments是函数内专有的。
        • arguments不是数组只是伪数组，但能用中括号语法访问到内部数据，也有length。
    • return的使用看具体情况

  • 函数体

    • return 直接跳出函数并且返回值

  • 看一个函数，先不用看函数体，在调用时再回去看函数。

  • 调用函数的过程

    • 如果没有调用，函数体内的代码一定不会执行。
    • 每调用一次就执行一次函数体内的代码。
      • 只要是函数名加一个括号，就会去执行函数。
      • 执行函数前，会把调用时实参赋值给形参，之后再去执行函数体内的代码。
      • 执行函数体内的代码如果出现错误时，就会终止函数并报错。
      • 执行结束之后，函数就会返回return返回出来的结果。
    • 调用函数的结果
      • 结果取决于return
        • 没有return，默认结果是undefined。
        • 写了return，没有内容，也是undefined。
        • 写了return，有内容，return什么结果就是什么。
        • 写了return，但没执行到return就结束了函数，返回的也是undefined。
          • 报错会终止函数，如果终止前没return出去，函数会报错，同时也不会return值出去。
    • 可以多次调用同一个函数。
      • Symbol()为什么每次能拿到一个唯一值。
        • 因为每次写了Symbol()，就会执行一次Symbol函数，而Symbol函数每次执行结束后会返回一个symbol类型的值。

• 定义函数的三种方式

  • function fn(){}
  • var fn = function(){}
  • new Function()

• 函数形参默认值

  • 在形参后面用等号可以赋一个默认值，如果实参没传对应的值，那么形参默认就是该值。

      function func(a=10) {console.log(a);//10}func()
    

  • 用es5来实现形参默认值

      function func(a) {if(a===undefined){a=10}console.log(a);//10}func()
    

      function func(a) {(a===undefined)?(a=10):null;console.log(a);//10}func()
    

• 匿名函数三种写法

  • function(){}
  • var a = function(){}
  • ()=>{}

• 箭头函数

  • 来源

    function res() { };
    var res = () => { }
    

  • 简写

    • 形参只有一个，把小括号省略

      var fn = (a) => { return a + 1 }
      var fn = a => { return a + 1 }
      

    • 函数体里面只有一条return语句，把大括号和return省略

      var fn = (a) => { return a + 1 }
      var fn = (a) => a + 1 
      

    • 形参只有一个，函数体里面只有一条return语句，把小括号和大括号和return省略

      var fn = (a) => { return a + 1 }
      var fn = a => a + 1 
      

• 自调用函数(IIFE)

  • (function (a) { })(10);
  • +function (a) { }(10);
  • ~function (a) { }(10);
  • !function (a) { }(10);
  • -function (a) { }(10)

选项卡

• css选择器选择范围缩小 把document替换成对应的父容器元素就可以了。

    <div class="wrap"><ul><li class="current">早餐</li><li>午餐</li><li>晚餐</li></ul><div class="current">早餐</div><div>午餐</div><div>晚餐</div></div><script>var wrap = document.getElementsByClassName('wrap')[0];// 获取文档中`第一个类名为'wrap'的元素`。// getElementsByTagName()方法的context上下文为wrap这个DOM元素对象。var divList = wrap.getElementsByTagName('div');// 获取wrap这个DOM元素对象子代的所有div标签。var liList = wrap.getElementsByTagName('li');// 获取wrap这个DOM元素对象子代的所有li标签。</script>
  

  var wrap = document.getElementsByTagName(div)[0];// 获取文档中的第一个div元素`。
  // getElementsByTagName()方法的context上下文为wrap这个DOM元素对象。
  var divList = wrap.getElementsByTagName('div');// 获取wrap这个DOM元素对象子代的所有div标签。
  

进阶参考