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

js高级第二天

一、创建对象的三种方式

<script>// 1. 利用字面量创建对象(常用的一种方式)const o = {name: '佩奇'}console.log(o)// 2. 利用 new Object 创建对象 (了解)// const oo = new Object({ name: '佩奇' })const oo = new Object()oo.name = '佩奇'console.log(oo)// 3. 利用构造函数创建对象// 构造函数:是一种特殊的函数,用来创建对象(并完成初始化对象)// 1. 构造函数的2个约定 首字母要大写, 利用new关键字来调用函数// function Pig() {// }// console.log(new Pig)// console.log(Pig())function Pig(name, age, gender) {// this.name 属性   // name 是形参也就是属性值this.name = namethis.age = agethis.gender = gender// return 123}const peiqi = new Pig('佩奇', 6, '女')console.log(peiqi)const qiaozhi = new Pig('乔治', 3, '男')console.log(qiaozhi)// 2. 构造函数创建对象说明// 2.1 new 关键字 实例化对象// 2.2 如果构造函数没有参数,则可以省略小括号// 2.3 构造函数里面无需写 return// 2.4 new Object()  new Date() 也是在实例化对象</script>

二、实例成员&静态成员

  • 实例成员:通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员(实例属性和实例方法)
  <script>// 实例成员和静态成员// 1. 实例成员:实例对象上的属性和方法属于实例成员function Pig(name) {this.name = name}const peiqi = new Pig('佩奇')const qiaozhi = new Pig('乔治')peiqi.name = '小猪佩奇'  // 实例属性peiqi.sayHi = () => {  // 实例方法console.log('hi~~')}console.log(peiqi)console.log(qiaozhi)console.log(peiqi === qiaozhi)</script>
  • 静态成员:构造函数的属性和方法被称为静态成员(静态属性和静态方法)
<script>// 2. 静态成员 : 构造函数上的属性和方法称为静态成员function Pig(name) {this.name = name}Pig.eyes = 2  // 静态属性Pig.sayHi = function () {  // 静态方法console.log(this)}Pig.sayHi()console.log(Pig.eyes)  // 2
</script>

三、内置构造函数

  • Object
<script>// Object 三种静态方法const o = { name: '佩奇', age: 6, gender: '女' }// 1. Object.keys()  得到对象所有属性(重点) 返回的是数组const key = Object.keys(o)console.log(key)// 2. Object.values()  得到对象所有属性值(重点)返回的是数组const value = Object.values(o)console.log(value)// 3. Object.assign(目标对象, 源对象)  对象的拷贝   assign 赋值的意思const oo = {}Object.assign(oo, o)oo.name = '小猪佩奇'console.log(oo)console.log(o)// 3.1 注意 拷贝对象之后是两个不同的对象,不会相互影响</script>
  • Array
<script>// 数组reduce方法// arr.reduce(function(上一次值, 当前值){}, 初始值)// const arr = [1, 5, 8]// 1. 没有初始值 // const total = arr.reduce(function (prev, current) {//   return prev + current// })// console.log(total)// 上一次值    当前值    返回值  (第一次循环)//   1         5         6// 上一次值    当前值    返回值  (第二次循环)//   6         8        14const arr = [1, 5, 8]// 2. 有初始值const total = arr.reduce(function (prev, current) {return prev + current}, 10)console.log(total)// 上一次值    当前值    返回值  (第一次循环)//   10         1         11// 上一次值    当前值    返回值  (第二次循环)//   11         5         16// 上一次值    当前值    返回值  (第三次循环)//   16         8         24//1. 推荐使用字面量方式声明数组,而不是 `Array` 构造函数//2. 实例方法 `forEach` 用于遍历数组,替代 `for` 循环 (重点)//3. 实例方法 `filter` 过滤数组单元值,生成新数组(重点)//4. 实例方法 `map` 迭代原数组,生成新数组(重点)//5. 实例方法 `join` 数组元素拼接为字符串,返回字符串(重点)//6. 实例方法  `find`  查找元素, 返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined(重点)//7. 实例方法`every` 检测数组所有元素是否都符合指定条件,如果**所有元素**都通过检测返回 true,否则返回 false(重点)//8. 实例方法`some` 检测数组中的元素是否满足指定条件   **如果数组中有**元素满足条件返回 true,否则返回 false//9. 实例方法 `concat`  合并两个数组,返回生成新数组//10. 实例方法 `sort` 对原数组单元值排序//11. 实例方法 `splice` 删除或替换原数组单元//12. 实例方法 `reverse` 反转数组//13. 实例方法 `findIndex`  查找元素的索引值</script>
  • String
<script>// 字符串方法split const str = '传智播客'// 1. split('分隔符')  把字符串转换为数组console.log(str.split(''))const str1 = '小米,华为,苹果'console.log(str1.split(','))// 2. join('分隔符')可以把数组转换为字符串// 3. 把传智播客这字符串做一个翻转 变成 客播智传// 把字符串转换为数组, 数组里面reverse翻转,再把数组转换为字符串console.log(str.split('').reverse())console.log(str.split('').reverse().join(''))//1. 实例属性 `length` 用来获取字符串的度长(重点)//2. 实例方法 `split('分隔符')` 用来将字符串拆分成数组(重点)//3. 实例方法 `substring(需要截取的第一个字符的索引[,结束的索引号])` 用于字符串截取(重点)//4. 实例方法 `startsWith(检测字符串[, 检测位置索引号])` 检测是否以某字符开头(重点)//5. 实例方法 `includes(搜索的字符串[, 检测位置索引号])` 判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false(重点)//6. 实例方法 `toUpperCase` 用于将字母转换成大写//7. 实例方法 `toLowerCase` 用于将就转换成小写//8. 实例方法 `indexOf`  检测是否包含某字符//9. 实例方法 `endsWith` 检测是否以某字符结尾//10. 实例方法 `replace` 用于替换字符串,支持正则匹配//11. 实例方法 `match` 用于查找字符串,支持正则匹配</script>
  • Number
  <script>// 数字 toFixed 方法const num = 12.345console.log(num.toFixed(2))  // 12.35console.log(num.toFixed(1))  // 12.3const num1 = 12console.log(num1.toFixed(2))  // 12.00</script>
http://www.vanclimg.com/news/1907.html

相关文章:

  • 双向循环链表完整实现与详解
  • CSS 线性渐变
  • VMware ESXi 8.0U3g 发布 - 领先的裸机 Hypervisor
  • 装机软件记录
  • day3_javascript1
  • day4_javascript2
  • 电化学
  • 亚马逊AutoML论文获最佳论文奖
  • 前端加密实现
  • SQL注入漏洞
  • MX galaxy Day16
  • 30天总结-第二十八天
  • 金华の第二场模拟赛
  • [Unity] 项目的一些系统架构思想
  • 多github账号的仓库配置
  • Project 2024 专业增强版安装激活步骤(附安装包)2025最新详细教程
  • MX galaxy Day15
  • Plant Com | 将基因编辑与组学、人工智能和先进农业技术相结合以提高作物产量
  • PhenoAssistant:一个用于自动植物表型分析的人工智能系统
  • 在Docker中,可以在一个容器中同时运行多个应用进程吗?
  • Computomics:利用先进的机器学习实现预测性植物育种
  • 在运维工作中,Docker 与 Kvm 有何区别?
  • 利用分子与数量遗传学最大化作物改良的遗传增益
  • 在运维工作中,详细说一下 Docker 有什么作用?
  • 7.29总结
  • busybox的编译简介
  • 基因组辅助作物改良
  • 洛谷题解:P1514 [NOIP 2010 提高组] 引水入城
  • 如何利用机器学习构建种质资源/品种分子鉴定系统?
  • 科学通报 | 万向元:生物育种技术助力作物杂种优势利用