当前位置：首页 > news >正文

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

news 2025/8/6 0:59:28

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
隐式转化

普通对象(增删改查)

声明定义对象
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标签。