企业官网建设流程全解析

厦门企业网站建设,wordpress+支付查看,做期货看啥子网站,永兴网站制作JavaScript高级-第二天 文章目录JavaScript高级-第二天解构赋值#xff08;重点#xff09;数组解构对象解构forEach遍历数组#xff08;重点#xff09;filter筛选数组#xff08;重点#xff09;解构赋值#xff08;重点#xff09; 知道解构的语法及分类#xff0c…JavaScript高级-第二天文章目录JavaScript高级-第二天解构赋值重点数组解构对象解构forEach遍历数组重点filter筛选数组重点解构赋值重点知道解构的语法及分类使用解构简洁语法快速为变量赋值。解构赋值是一种快速为变量赋值的简洁语法本质上仍然是为变量赋值分为数组解构、对象解构两大类型。数组解构数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法。基本语法赋值运算符 左侧的[]用于批量声明变量右侧数组的单元值将被赋值给左侧的变量变量的顺序对应数组单元值的位置依次进行赋值操作如下代码所示script// 普通的数组letarr[7,4,10]// 批量声明变量 avg min max// 同时将数组单元值 1 2 3 依次赋值给变量 avg min maxlet[a,b,c]arr// 数组解构// 相当于// const avg arr[0]// const min arr[1]// const max arr[2]console.log(avg)// 7console.log(min)// 4console.log(max)// 10/script数组解构的典型应用交互两个变量let a 1 let b 3; // 注意这里必须有; 否则会报错 // 这是因为没有;的话 计算机会把let b 3和[b, a] [a, b]连在一起 // ;的作用是隔开 [b, a] [a, b] console.log(a) // 3 console.log(b) // 1通过这样的语法可以很简洁地完成冒泡排序中的交换变量。补充JS中必须加分号还有一种情况立即执行函数。总结赋值运算符左侧的[]用于批量声明变量右侧数组的单元值将被赋值给左侧的变量变量的顺序对应数组单元值的位置依次进行赋值操作变量的数量大于单元值数量时多余的变量将被赋值为undefined// 变量多 单元值少 undefined const [a, b, c, d] [1, 2, 3] console.log(a) // 1 console.log(b) // 2 console.log(c) // 3 console.log(d) // undefined变量的数量小于单元值数量时可以通过... 数组获取所有剩余单元值但只能置于最末位// 变量少 单元值多 舍去多余单元值 const [a, b] [1, 2, 3] console.log(a) // 1 console.log(b) // 2 // 剩余参数可以解决这个问题 const [a, b, ...c] [1, 2, 3, 4] console.log(a) // 1 console.log(b) // 2 console.log(c) // [3, 4] 真数组为防止undefined的传递允许初始化变量的默认值且只有单元值为undefined时默认值才会生效// 防止 undefined 传递 const [a 0, b 0] [1, 2] const [a 0, b 0] [] console.log(a) // 1 console.log(b) // 2还可以按需导入忽略某些返回值// 5. 按需导入赋值 const [a, b, , d] [1, 2, 3, 4] // 忽略 3 console.log(a) // 1 console.log(b) // 2 console.log(d) // 4支持多维解构赋值比如const arr [1, 2, [3, 4]] // 多维数组 console.log(arr[0]) // 1 console.log(arr[1]) // 2 console.log(arr[2]) // [3,4] console.log(arr[2][0]) // 3这样的取值是不是很麻烦我们可以通过多维数组的解构来简化这种取值大家了解即可// 多维数组解构 const arr [1, 2, [3, 4]] const [a, b, c] [1, 2, [3, 4]] console.log(a) // 1 console.log(b) // 2 console.log(c) // [3,4] // 再对数组c进行解构 const [a, b, [c, d]] [1, 2, [3, 4]] console.log(a) // 1 console.log(b) // 2 console.log(c) // 3 console.log(d) // 4对比可以发现其实数组的解构和函数的形参实参很像大家可以对比理解。对象解构对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法基本语法赋值运算符 左侧的{}用于批量声明变量右侧对象的属性值将被赋值给左侧的变量对象属性的值将被赋值给与属性名相同的变量注意解构的变量名不要和外面的变量名冲突否则会报错对象中找不到与变量名一致的属性时变量值为undefined如下代码所示scriptconstobj{name:小明,age:18}// 批量声明与属性名相同的变量 name age// 同时将数组单元值 小明 18 依次赋值给变量 name ageconst{name,age}obj// 等价于 const name obj.nameconsole.log(name)// 小明console.log(age)// 18/script当我们想将一个对象进行解构的时候如果发现外面有变量和对象中的变量名重合了此时没办法进行解构怎么解决其实可以对解构后的变量名进行改名scriptconstname小红// 冲突constobj{name:小明,age:18}// 对象解构的变量名可以重新改名 旧变量名: 新变量名const{name:uname,age}obj// 新变量名console.log(uname)// 小明console.log(age)// 18/script同样的我们也可以解构数组对象// 解构数组对象 const pig [ { uname: 佩奇, age: 6 } ] const [{ uname, age }] pig console.log(uname) console.log(age)总结赋值运算符左侧的{}用于批量声明变量右侧对象的属性值将被赋值给左侧的变量对象属性的值将被赋值给与属性名相同的变量对象中找不到与变量名一致的属性时变量值为undefined允许初始化变量的默认值属性不存在或单元值为undefined时默认值才会生效对象解构也支持多级对象解构赋值// 对象中包含对象 const pig { name: 佩奇, family: { mother: 猪妈妈, father: 猪爸爸, sister: 乔治 }, age: 6 } // 多级对象解构 // 必须在{}前说明该对象的对象名 否则出现多个对象时会混在一起 const { name, family: { mother, father, sister } } pig console.log(name) // 佩奇 console.log(mother) // 猪妈妈 console.log(father) // 猪爸爸 console.log(sister) // 乔治 // 数组包对象再包对象 const person [ { name: 佩奇, family: { mother: 猪妈妈, father: 猪爸爸, sister: 乔治 }, age: 6 } ] // 同样要指明对象名 const [{ name, family: { mother, father, sister } }] person console.log(name) console.log(mother) console.log(father) console.log(sister)当然在开发中我们收到的数据通常像下面这样bodyscript// 这是后台传递过来的数据 会有很多乱七八糟的属性constmsg{code:200,msg:获取新闻列表成功,data:[{id:1,title:5G商用自己三大运用商收入下降,count:58},{id:2,title:国际媒体头条速览,count:56},{id:3,title:乌克兰和俄罗斯持续冲突,count:1669},]}// 需求1 请将以上msg对象 采用对象解构的方式 只选出data 方面后面使用渲染页面const{data}msg console.log(data)// [{..},{..},{..}]// 需求2 上面msg是后台传递过来的数据 我们需要把data选出当做参数传递给函数// 2. msg虽然有很多属性 但是我们利用解构只要data值// 3. 联想到 const { data } msgfunctionrender({data}){// 我们只要 data 数据// 内部处理console.log(data)}// 1. 直接把 msg 传递给函数render(msg)// 需求3 为了防止msg里面的data名字混淆 要求渲染函数里面的数据名改为 myData// 旧对象名: 新对象名functionrender({data:myData}){// 内部处理console.log(myData)}render(msg)/scriptforEach遍历数组重点forEach()方法用于调用数组的每个元素并将元素传递给回调函数。注意forEach 主要是遍历数组参数当前数组元素是必须要写的 索引号可选。语法被遍历的数组.forEach(function (当前数组元素item, 当前元素引号index) {})bodyscript// forEach 就是遍历 加强版的for循环 适合于遍历数组对象// 和 map 几乎是相似的 只是 map 返回数组 forEach没有返回值constarr[red,green,pink]arr.forEach(function(item,index){console.log(item)// 数组元素 red green pinkconsole.log(index)// 索引号 0 1 2})/script/bodyfilter筛选数组重点filter()方法创建一个新的数组新数组中的元素是通过检查指定数组中符合条件的所有元素。主要使用场景筛选数组符合条件的元素并返回筛选之后元素的新数组。语法被筛选的数组.filter(function (item, index) { return 筛选条件})返回值返回数组包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。参数必须写itemindex可选注意因为返回的是新数组所有不会影响原数组。bodyscriptconstarr[10,20,30]// filter基本语法constnewArrarr.filter(function(item,index){console.log(item)console.log(index)returnitem20// 这里只能写 })// 返回的符合条件的新数组// 也可以使用箭头函数实现 更加简洁constnewArrarr.filter(itemitem20)console.log(newArr)// [20, 30]/script/body