全网网站建设维护,合肥百度搜索排名优化,交互设计好的网站,王爷站住重生嫡女要强嫁免费阅读day-019-nineteen-20230303-函数概念-函数组成-函数调用-形参及匿名函数及自调用函数
变量
变量声明 变量 声明定义(赋值) var num;num 100; 声明与赋值分开var num 100; 声明时就赋值 赋值只能声明一次#xff0c;可以赋值无数次 变量声明关键词 varconstletclassfunctio…day-019-nineteen-20230303-函数概念-函数组成-函数调用-形参及匿名函数及自调用函数
变量
变量声明 变量 声明定义(赋值) var num;num 100; 声明与赋值分开var num 100; 声明时就赋值 赋值只能声明一次可以赋值无数次 变量声明关键词 varconstletclassfunctionimport
数据类型
数据类型 原始值 numberstringbooleannullundefinedsymbolbigint 对象 object ArrayFunction(函数)
数据类型转换
Number()String() {} [object Object][] Boolean() null undefined NaN 0 Boolean(false)//false 隐式转化
相关方法
parseInt()parseFloat()isNaN()toFixed()BinInt()
普通对象(增删改查) 声明定义对象 var obj {a:0} 查 obj.aobj[a]obj[a]//a是变量报错a is not defined obj[length]//length是变量但去window上时找会找到 增与改 obj.b 2;obj[b] 2;bname;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} 必须是循环语句 whitedo whilefor(var i0;i10;i){} for(var i10-1;i0;i–){} 跳转语句 breakcontinuereturn
或与非
|| 或者只要满足一个条件就是true 与必须两个条件都是true才最终是true! 先将!后面的转为布尔值再取反 xxx将xxx转为number!! 转布尔值% 取余数
与
{}{}//false [][]//false
三元表达式
条件?xx:xxx;
案例
开关灯 步骤 获取开关元素和被开关元素在开关元素上绑定点击事件事件里根据开关元素状态控制被开关元素的显隐 隔行变色 标签是一个DOM对象DOM对象可以添加属性名和属性值。步骤 获取被控制元素列表在被控制元素列表循环绑定被控制元素的鼠标移入及移出事件加背景颜色
函数 函数概念 函数是具有某种特定功能的代码块。函数其实本质也是一种数据属于对象数据类型。 函数的作用 解决代码的冗余问题形成代码复用。可以把整个代码项目通过函数模块化。封装代码让函数内部的代码对外部不可见。 函数的组成 // 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(a10) {console.log(a);//10}func()用es5来实现形参默认值 function func(a) {if(aundefined){a10}console.log(a);//10}func()function func(a) {(aundefined)?(a10):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 classwrapulli classcurrent早餐/lili午餐/lili晚餐/li/uldiv classcurrent早餐/divdiv午餐/divdiv晚餐/div/divscriptvar 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标签。/scriptvar wrap document.getElementsByTagName(div)[0];// 获取文档中的第一个div元素。
// getElementsByTagName()方法的context上下文为wrap这个DOM元素对象。
var divList wrap.getElementsByTagName(div);// 获取wrap这个DOM元素对象子代的所有div标签。进阶参考
