高端网站设计欣赏网站架设方式

高端网站设计欣赏,网站架设方式,中国制造网外贸网官网登录,南京美容网站建设JavaScript 高级 - 第2天 了解面向对象编程的基础概念及构造函数的作用#xff0c;体会 JavaScript 一切皆对象的语言特征#xff0c;掌握常见的对象属性和方法的使用。 了解面向对象编程中的一般概念能够基于构造函数创建对象理解 JavaScript 中一切皆对象的语言特征理解引用…JavaScript 高级 - 第2天了解面向对象编程的基础概念及构造函数的作用体会 JavaScript 一切皆对象的语言特征掌握常见的对象属性和方法的使用。了解面向对象编程中的一般概念能够基于构造函数创建对象理解 JavaScript 中一切皆对象的语言特征理解引用对象类型值存储的的特征掌握包装类型对象常见方法的使用文章目录JavaScript 高级 - 第2天深入对象创建对象的三种方式利用对象字面量创建对象利用new Object创建对象利用构造函数创建对象构造函数实例成员静态成员内置构造函数ObjectArrayArray.reduce() 累加器Array.find()Array.every()Array.from()StringString.split()String.substring()String.startWith()String.includes()Number深入对象了解面向对象的基础概念能够利用构造函数创建对象。创建对象的三种方式利用对象字面量创建对象我们最常用的就是这个方法const obj { name: 小明, age: 18 }利用new Object创建对象const obj new Object() // 创建一个空对象 // 追加属性 obj.name 小明 obj.age 18 // 或者也可以直接 const o new Object({ uname: 小明 })利用构造函数创建对象其实new Object也算是一种构造函数但这个标题中的构造函数更多指的是自定义的函数用于初始化对象。构造函数构造函数是一种特殊的函数主要用来初始化对象。构造函数是专门用于创建对象的函数如果一个函数使用new关键字调用那么这个函数就是构造函数。使用场景我们常用的利用字面量创建对象的方法一次仅允许我们创建一个对象当我们想要创建多个拥有相同属性的不同对象时手动创建会非常麻烦。比如我们创建了‘佩奇’这个对象如果我们要继续创建‘乔治’这一对象还需要重新写一遍。此时我们可以通过构造函数来快速创建多个类似的对象构造函数在技术上是常规函数但是有两个约定必须遵守函数命名以大写字母开头函数只能由new操作符来执行script// 创建一个构造函数functionPig(uname,age){this.unameuname// 左边的uname是属性 右边的uname是形参this.ageage}// 调用函数newPig(佩奇,6)// 创建对象constpnewPig(佩奇,6)constjnewPig(乔治,3)/script说明使用new关键字调用函数的行为被称为实例化实例化构造函数时没有参数时可以省略()构造函数内部无需写return但有默认的返回值即为新创建的对象构造函数内部的return返回的值无效所以不要写returnnew Object()和new Date()也是实例化构造函数注实践中为了从视觉上区分构造函数和普通函数习惯将构造函数的首字母大写。构造函数实例化执行过程其实是分了四步进行创建新的空对象构造函数this指向新对象执行构造函数代码修改this添加新的属性返回新对象我们还是举一个稍微好理解的例子// 构造一个创建对象的函数 function Goods(name, price, count) { this.name name this.price price this.count count } // 使用构造函数创建对象 const xiaomi new Goods(小米, 1999, 20)当代码执行new Goods(小米, 1999, 20)时会先创建一个空对象接着开始执行Goods函数其中this会指向刚刚新建的空对象当执行this.name name时相当于向这个新对象添加了name属性并将传递过来的实参小米赋值给这个新属性。同理函数继续给对象创建并赋值price、count属性。执行完函数后会将这个新对象返回给xiaomi这个变量。实例成员通过构造函数创建的对象称为实例对象实例对象中的属性和方法称为实例成员。通过以下例子来具体了解script// 构造函数functionPerson(){// 构造函数内部的 this 就是实例对象// 实例对象中动态添加属性this.name小明// 实例对象动态添加方法this.sayHi(){console.log(大家好~)}}// 实例化p1 是实例对象// p1 实际就是 构造函数内部的 thisconstp1newPerson()console.log(p1)console.log(p1.name)// 访问实例属性p1.sayHi()// 调用实例方法/script总结构造函数内部this实际上就是实例对象为其动态添加的属性和方法即为实例成员为构造函数传入参数动态创建结构相同但值不同的对象构造函数创建的实例对象彼此独立互不影响。静态成员在 JavaScript 中底层函数本质上也是对象类型因此允许直接为函数动态添加属性或方法构造函数的属性和方法被称为静态成员。script// 构造函数functionPerson(name,age){this.namenamethis.ageage}// 如果直接在构造函数上增加属性和方法 称为静态属性方法// 静态属性Person.eyes2Person.arms2// 静态方法Person.walkfunction(){console.log(^_^人都会走路...)// this 指向 Personconsole.log(this.eyes)}/script总结静态成员指的是添加到构造函数本身的属性和方法一般公共特征的属性或方法静态成员设置为静态成员静态成员方法中的this指向构造函数本身比如Date.now()、Math.PI、Math.random()静态成员只能构造函数来访问内置构造函数掌握各引用类型和包装类型对象属性和方法的使用。在 JavaScript 中最主要的数据类型有6种分别是字符串、数值、布尔、undefined、null 和 对象常见的对象类型数据包括数组和普通对象。其中字符串、数值、布尔、undefined、null 也被称为简单数据类型或基础数据类型对象也被称为引用数据类型。但是我们会发现有些特殊的情况const str pink console.log(str.length) // 字符串也有属性 const num 12 console.log(num.toFixed(2)) // 数字也有方法 toFixed 保留小数点 // 其实 const str pink 在JS中就是 const str new String(pink) // 只不过这些由 js 底层完成 把简单数据类型包装为引用数据类型其实 JavaScript 内置了一些构造函数绝大部的数据处理都是基于这些构造函数实现的甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数用于创建对应类型的数据。比如JavaScript 基础阶段学习的Date就是内置的构造函数。script// 实例化letdatenewDate();// date 即为实例对象console.log(date);/script在JavaScript中内置了一批构造函数主要有引用类型Object、Array、RegExp、Date等包装类型String、Number、Boolean等ObjectObject是内置的构造函数用于创建普通对象。当然我们更推荐使用字面量方式声明对象。我们现在可以学习常用三个静态方法只有Object可以调用script// 通过构造函数创建普通对象constusernewObject({name:小明,age:15})// 通过字面量创建对象letstudent{name:杜子腾,age:21}// 过去 我们想要获取对象的所有属性和值for(letkinuser){console.log(k)// 属性 name ageconsole.log(user[k])// 值 小明 15}// 现在 我们可以通过 Object.keys 和 Object.values 静态方法获取对象中的所有属性名键console.log(Object.keys(user))// 返回数组 [name, age]console.log(Object.values(user))// 返回数组 [小明, 15]// Object.assign 静态方法 常用于对象的拷贝或者说追加更合适constobj{gender:男}Object.assign(obj,user)console.log(o)// { gender: 男, name: 小明, age: 15 }/script总结推荐使用字面量方式声明对象而不是Object构造函数Object.assign静态方法经常用于给对象添加属性Object.keys静态方法获取对象中所有属性Object.values表态方法获取对象中所有属性值ArrayArray是内置的构造函数用于创建数组。但创建数组建议使用字面量创建。script// 构造函数创建数组letarrnewArray(5,7,8);// 字面量方式创建数组letlist[html,css,javascript]/script数组赋值后无论修改哪个变量另一个对象的数据值也会相当发生改变。数组常见的实例方法核心区分这几个方法可以用一个很形象的例子大家可以体会一下数组还有其他常见的方法同样的我们通过一个形象的例子来体会一下Array.reduce() 累加器作用reduce返回累计处理的结果经常用于求和。基本语法arr.reduce(function(上一次值, 当前值){}, 初始值)或arr.reduce(function(上一次值, 当前值){})没有初始值constarr[1,2,3]// 1. 没有初始值consttotalarr.reduce(function(prev,current){returnprevcurrent})console.log(total)// 6// 2. 有初始值 为 10consttarr.reduce(function(prev,current){returnprevcurrent},10)console.log(t)// 运算时加上初始值 为 16// 当然 这个方法中的函数也可以写成箭头函数constrearr.reduce((prev,current)prevcurrent)console.log(re)// 6reduce的执行过程如果没有初始值则第一次循环的上一次值以数组的第一个数组元素的值每一次循环把返回值作为下一次循环的上一次值如果有初始值则初始值作为第一次循环的上一次值我们以刚才的代码作为例子解释const arr [1, 2, 3] // 1. 没有初始值 const total arr.reduce(function (prev, current) { return prev current }) console.log(total) // 6 // 上一次值 当前值 返回值 // 1 2 3 第一次循环 // 3 3 6 第二次循环 // 2. 有初始值 为 10 const t arr.reduce(function (prev, current) { return prev current }, 10) console.log(t) // 运算时加上初始值 为 16 // 上一次值 当前值 返回值 // 10 1 11 第一次循环 // 11 2 13 第二次循环 // 13 3 16 第三次循环Array.find()find用于查找元素返回符合测试条件的第一个数组元素值如果没有符合条件的则返回undefined。如果需要在数组中找到对应元素的索引可使用findIndex()。语法arr.find(回调函数)其中回调函数callbackFn可以传入element数组中当前正在处理的元素、index正在处理的元素在数组中的索引等参数。scriptconstarr[red,blue,green]// 找到符合条件的第一个元素 如果没有返回 undefinedconstrearr.find(function(item){returnitemblue// 元素是否为 blue})console.log(re)// blueconstarr1[{name:小米,price:1999},{name:华为,price:3999},]// 找属性 name 为小米的第一个对象 并且返回这个对象constmiarr1.find(function(item){console.log(item.name)// 小米 华为returnitem.name小米// { name: 小米, price: 3999 }})// find 查找 常使用于查找获得的数据数组中第一个符合筛选条件的元素// 如果 使用箭头函数constmiarr1.find(itemitem.name小米)/scriptArray.every()every检测数组所有元素是否都符合指定条件返回的是布尔值。如果所有元素都通过检测返回 true否则返回 false。语法arr.every(callbackFn)语法和find类似可参考find。script// every 检测每一个元素是否都符合条件如果都符合返回 true 否则返回 falseconstarr1[10,20,30]constflagarr1.every(itemitem20)console.log(flag)// falseconstrarr1.every(itemitem10)console.log(r)// true/scriptArray.from()Array.from()静态方法可以将伪数组转换为真数组。我们在某些情况下获取到的数组是伪数组比如document.querySelectorAll()获取到的NodeList数组比如动态参数arguments等都是伪数组伪数组不能进行pop()等操作有时候会给我们带来一些麻烦。此时我们需要通过from()把伪数组转换为真数组:bodyulli1/lili2/lili3/li/ulscript// Array.from() 把伪数组转换为真数组constlisdocument.querySelectorAll(ul li)console.log(lis)// NodeList(3)// lis.pop() 报错 伪数组不能进行 pop 操作constlissArray.from(lis)liss.pop()// 删除最后一个元素console.log(liss)// [li, li]/script/body把伪数组转换为真数组不止这一个方法后续还会学习。总结推荐使用字面量方式声明数组而不是Array构造函数实例方法forEach用于遍历数组替代for循环 (重点)实例方法filter过滤数组单元值生成新数组(重点)实例方法map迭代原数组生成新数组(重点)实例方法join数组元素拼接为字符串返回字符串(重点见之前的笔记)实例方法find查找元素 返回符合测试条件的第一个数组元素值如果没有符合条件的则返回 undefined(重点)实例方法every检测数组所有元素是否都符合指定条件如果所有元素都通过检测返回 true否则返回 false(重点)实例方法some检测数组中的元素是否满足指定条件如果数组中有元素满足条件返回 true否则返回 false实例方法concat合并两个数组返回生成新数组实例方法sort对原数组单元值排序实例方法splice删除或替换原数组单元实例方法reverse反转数组实例方法findIndex查找元素的索引值String在 JavaScript 中的字符串、数值、布尔具有对象的使用特征如具有属性和方法如下代码举例script// 字符串类型conststrhello world!// 统计字符的长度字符数量console.log(str.length)// 数值类型constprice12.345// 保留两位小数price.toFixed(2)// 12.34/script之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的被称为包装类型。常见实例方法String.split()split()方法接受一个模式通过搜索模式将字符串分割成一个有序的子串列表将这些子串放入一个数组并返回该数组。简单来说就是把字符串转换为数组。语法str.split(分隔符)script// split 把字符串转换为数组 和 join 相反conststrpink,redconstarrstr.split(,)console.log(arr)// [pink, red]conststr12022-4-8constarr1str1.split(-)console.log(arr1)// [2022, 4, 8]/scriptsplit()和join()的功能正好相反。String.substring()substring()方法返回该字符串从起始索引到结束索引不包括的部分如果未提供结束索引则返回到字符串末尾的部分。简单来说就是获取字符串的一部分。语法str.substring(indexStart)或str.substring(indexStart, indexEnd)。其中indexStart为起始字符的索引从0开始indexEnd为结束字符的索引如果没有indexEnd则默认字符串最后一个字符为结束字符。注意截取到的字符串不包括结束字符。包头不包尾script// 字符串的截取 substring(开始的索引号[, 结束的索引号])// 如果省略结束的索引号 默认取到最后// 结束的索引号不包含想要截取的部分conststr今天又要做核酸了console.log(str.substring(4))// 做核酸了console.log(str.substring(5,7))// 核酸/scriptString.startWith()startsWith()方法用来判断当前字符串是否以另外一个给定的子字符串开头并根据判断结果返回true或false。简单来说jiushi语法str.startsWith(searchString)或str.startsWith(searchString, position)其中searchString是我们期望搜索到的那个字符串position是搜索的起始位置索引。script// startsWith 判断是不是以某个字符开头conststrpink老师上课中console.log(str.startsWith(pink))// trueconsole.log(str.startsWith(pink,2))// false/script和startsWith()方法对应的有endsWith()方法用于判断一个字符串是否以指定字符串结尾如果是则返回true否则返回false。两者的用法和语法很像可以自行参考学习。String.includes()includes()方法执行区分大小写的搜索以确定是否可以在一个字符串中找到另一个字符串并根据情况返回true或false。简单来说就是检测字符串中是否有我想要的某个字符串。注意严格区分大小写。语法str.includes(searchString)或str.includes(searchString, position)参数和startsWith()很像可以参考其中position是在字符串中开始搜索searchString的位置默认值为 0。script// includes 判断某个字符是不是包含在一个字符串里面conststr我是pink老师console.log(str.includes(pink))// trueconsole.log(str.includes(blue))// falseconsole.log(str.includes(PINK))// falseconsole.log(str.includes(pink,3))// false/script总结实例属性length用来获取字符串的度长(重点)实例方法split(分隔符)用来将字符串拆分成数组(重点)实例方法substring需要截取的第一个字符的索引[,结束的索引号]用于字符串截取(重点)实例方法startsWith(检测字符串[, 检测位置索引号])检测是否以某字符开头(重点)实例方法includes(搜索的字符串[, 检测位置索引号])判断一个字符串是否包含在另一个字符串中根据情况返回 true 或 false(重点)实例方法toUpperCase用于将字母转换成大写实例方法toLowerCase用于将就转换成小写实例方法indexOf检测是否包含某字符实例方法endsWith检测是否以某字符结尾实例方法replace用于替换字符串支持正则匹配实例方法match用于查找字符串支持正则匹配注String 也可以当做普通函数使用这时它的作用是强制转换成字符串数据类型。NumberNumber是内置的构造函数用于创建数值。script// 使用构造函数创建数值letxnewNumber(10)letynewNumber(5)// 字面量创建数值letz20/script常用方法Number.toFixed()设置保留小数位的长度()里写上想要精确的位数。如果()里什么都不写那么这个方法用于四舍五入。script// toFixed 方法可以让数字指定保留的小数位数constnum10.923console.log(num.toFixed())// 11console.log(num.toFixed(1))// 10.9constnum110console.log(num1.toFixed(2))// 10.00/script补充关于小数计算的精度问题我们在控制台中输入0.1 0.2结果会发现不是0.3而是0.30000000004这会影响到我们计算的精度。为了解决这个问题我们常在计算的时候先把所有小数或带有小数的数字转化为整数乘上10或10倍数再除以刚刚乘上的数。const sum (0.1 * 10 0.2 * 10) / 10 console.log(sum) // 0.3总结推荐使用字面量方式声明数值而不是Number构造函数实例方法toFixed用于设置保留小数位的长度