JavaScript 进阶 (二)
目录
深入对象
创建对象三种方式
构造函数
实例成员&静态成员
内置构造函数
Object
Array
String
Number
深入对象
创建对象三种方式
构造函数
是一种特殊的函数,主要用来初始化对象
// 创建一个猪 构造函数 function Pig(uname, age) {this.uname = unamethis.age = age}const p = new Pig('张三', 6)console.log(p)
总结:
- 使用
new
关键字调用函数的行为被称为实例化 - 实例化构造函数时没有参数时可以省略
()
- 构造函数的返回值即为新创建的对象
- 构造函数内部的
return
返回的值无效!
- 创建新空对象
- 构造函数this指向新对象
- 执行构造函数代码,修改this,添加新的属性
- 返回新对象
实例成员&静态成员
总结:
- 构造函数内部
this
实际上就是实例对象,为其动态添加的属性和方法即为实例成员 - 为构造函数传入参数,动态创建结构相同但值不同的对象
注:构造函数创建的实例对象彼此独立互不影响。
总结:
- 静态成员指的是添加到构造函数本身的属性和方法
- 一般公共特征的属性或方法静态成员设置为静态成员
- 静态成员方法中的
this
指向构造函数本身
内置构造函数
Object
Object 是内置的构造函数,用于创建普通对象。
const o = { uname: '张三', age: 18 }// 1.获得所有的属性名console.log(Object.keys(o)) //返回数组['uname', 'age']// 2. 获得所有的属性值console.log(Object.values(o)) // 3. 对象的拷贝// const oo = {}// Object.assign(oo, o)Object.assign(o, { gender: '女' })console.log(o)
总结:
- 推荐使用字面量方式声明对象,而不是
Object
构造函数 Object.assign
静态方法创建新的对象Object.keys
静态方法获取对象中所有属性Object.values
表态方法获取对象中所有属性值
Array
Array
是内置的构造函数,用于创建数组
作用:reduce 返回函数累计处理的结果,经常用于求和等
arr.reduce(function(累计值, 当前元素){}, 起始值)起始值可以省略,如果写就作为第一次累计的起始值const re = arr.reduce((prev, item) => prev + item)1. 如果有起始值,则以起始值为准开始累计, 累计值 = 起始值
2. 如果没有起始值, 则累计值以数组的第一个数组元素作为起始值开始累计
3. 后面每次遍历就会用后面的数组元素 累计到 累计值 里面 (类似求和里面的 sum )
// Array.from(lis) 把伪数组转换为真数组const lis = document.querySelectorAll('ul li')// console.log(lis)// lis.pop() 报错const liss = Array.from(lis)liss.pop()console.log(liss)
总结:
推荐使用字面量方式声明数组,而不是
Array
构造函数实例方法
forEach
用于遍历数组,替代for
循环 (重点)实例方法
filter
过滤数组单元值,生成新数组(重点)实例方法
map
迭代原数组,生成新数组(重点)实例方法
join
数组元素拼接为字符串,返回字符串(重点)实例方法
find
查找元素, 返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined(重点) 与filter的区别是一个返回 是数组 一个是对象实例方法
every
检测数组所有元素是否都符合指定条件,如果所有元素都通过检测返回 true,否则返回 false(重点)实例方法
some
检测数组中的元素是否满足指定条件 如果数组中有元素满足条件返回 true,否则返回 false实例方法
concat
合并两个数组,返回生成新数组实例方法
sort
对原数组单元值排序实例方法
splice
删除或替换原数组单元实例方法
reverse
反转数组实例方法
findIndex
查找元素的索引值
String
String
是内置的构造函数,用于创建字符串。
//1. split 把字符串 转换为 数组 和 join() 相反// const str = 'pink,red'// const arr = str.split(',')// console.log(arr)// 2. 字符串的截取 substring(开始的索引号[, 结束的索引号])// 2.1 如果省略 结束的索引号,默认取到最后// 2.2 结束的索引号不包含想要截取的部分// 3. startsWith(检测字符串[, 检测位置索引号]) 检测是否以某字符开头(重点)// 4. 实例方法 includes(搜索的字符串[, 检测位置索引号]) 判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false(重点)
总结:
- 实例属性
length
用来获取字符串的度长(重点) - 实例方法
split('分隔符')
用来将字符串拆分成数组(重点) 、join() 相反 - 实例方法
substring(需要截取的第一个字符的索引[,结束的索引号])
用于字符串截取(重点) - 实例方法
startsWith(检测字符串[, 检测位置索引号])
检测是否以某字符开头(重点) - 实例方法
includes(搜索的字符串[, 检测位置索引号])
判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false(重点) - 实例方法
toUpperCase
用于将字母转换成大写 - 实例方法
toLowerCase
用于将就转换成小写 - 实例方法
indexOf
检测是否包含某字符 - 实例方法
endsWith
检测是否以某字符结尾 - 实例方法
replace
用于替换字符串,支持正则匹配 - 实例方法
match
用于查找字符串,支持正则匹配
注:String 也可以当做普通函数使用,这时它的作用是强制转换成字符串数据类型。
Number
<script>// toFixed 方法可以让数字指定保留的小数位数const num = 10.923// console.log(num.toFixed())console.log(num.toFixed(1))const num1 = 10console.log(num1.toFixed(2))</script>
购物车渲染综合案例
document.querySelector('.list').innerHTML = goodsList.map(item =>{const {picture,name,count,price,spec,gift} = itemconst text = Object.values(spec).join('/')const subTotal = ((price * 100 * count) / 100).toFixed(2)//判断是是否有const str = gift ? gift.split(',').map(item => `<span class="tag">【赠品】${item}</span>`).join('') : ''return `<div class="item"><img src="${picture}" alt=""><p class="name">${name} ${str}</p><p class="spec">${text}</p><p class="price">${price.toFixed(2)}</p><p class="count">x${count}</p><p class="sub-total">${subTotal}</p></div>`}).join('')const total = goodsList.reduce((prev,item) => prev + (item.price * 100 * item.count) / 100 ,0)document.querySelector('.amount').innerHTML = total.toFixed(2)
JavaScript 进阶 (二)相关推荐
- JavaScript进阶(二)
JavaScript进阶(二) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1Kt411w ...
- JavaScript进阶(四)
JavaScript进阶(四) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1Kt411w ...
- JavaScript进阶(三)
JavaScript进阶(三) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1Kt411w ...
- JavaScript进阶(一)
JavaScript进阶(一) 2019版黑马程序员javaScript进阶面向对象ES6 122集教程,哔哩哔哩链接:https://www.bilibili.com/video/BV1Kt411w ...
- JavaScript入门(二)
JavaScript入门(二) 哔哩哔哩链接:https://www.bilibili.com/video/BV1YW411T7GX?spm_id_from=333.999.0.0 七.代码讲解部分 ...
- JavaScript进阶必会的手写功能(二)
JavaScript进阶必会的手写功能(一) 6. 手写浅拷贝 6.1 JavaScript数据类型分类 1. 简单数据类型: Number. String.Boolean.null.undefine ...
- javascript进阶教程第一章案例实战
javascript进阶教程第一章案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过练习积累JS的使用技巧 二.实例 练习1:删除确认提示框 实例描述: 防止用户小心单击了"删除& ...
- javascript进阶教程第二章对象案例实战
javascript进阶教程第二章对象案例实战 一.学习任务 通过几个案例练习回顾学过的知识 通过案例练习补充几个之前没有见到或者虽然讲过单是讲的不仔细的知识点. 二.具体实例 温馨提示 面向对象的知 ...
- JavaScript进阶3-学习笔记
文章目录 JavaScript进阶3-学习笔记 闭包 JavaScript进阶3-学习笔记 //组件封装 什么是封装? 将冗余的代码精简化 例如:写代码:a页面有一个函数,b页面也需要这个函数,很多人 ...
- javascript进阶课程--第三章--匿名函数和闭包
javascript进阶课程--第三章--匿名函数和闭包 一.总结 二.学习要点 掌握匿名函数和闭包的应用 三.匿名函数和闭包 匿名函数 没有函数名字的函数 单独的匿名函数是无法运行和调用的 可以把匿 ...
最新文章
- React 组件学习
- AutoCAD .NET API二次开发学习指南
- 真格量化——做空波动率策略
- storm1.x介绍
- Croc Champ 2013 - Round 1 E. Copying Data(线段树)
- 进程分配之交叉分配法
- windows 启动c\windows\systen32\spool\DRIVERS\W32x86\3\ssnetmon. dll 时出现问题 找不到指定模块
- B站上优质python教程推荐
- 关于IE读取缓存页面不刷新解决方法
- 用计算机证明有限,四色定理-四色定理已利用计算机证明,但能否给出简洁的证明方法吗 爱问知识人...
- java this逃逸_java this引用逃逸详解
- STM32-面试题及答案
- REST ful风格总结(在逍遥子的基础上~只供自己简单总结,详情请看原文)
- mos管的rc吸收电路计算_RC吸收电路
- 数美科技荣获《银行家》“十佳智能风控管理创新奖”
- Linux下网络相关结构体 struct addrinfo
- mysql5.7性能提升一百倍调优
- 中国联通今年5G投资350亿元!附2019业绩PPT全文
- CentOS7搭建FastDFS V5.11分布式文件系统
- 用手机怎么查看网页的源代码0
热门文章
- 我当DeFi农民的一个月:浅谈Balancer流动性挖矿的风险与潜在收益
- 赌比亚迪,怼特斯拉,巴菲特为什么?
- python模拟拖拽文件_python 基于selenium实现鼠标拖拽功能
- 漏洞复现 - - - 未授权访问漏洞Redis
- 【笔记】IDEA运行主方法时报Command iline is too long Shorten command line....
- 小型商业用房火灾预防的措施
- Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
- 如何在Word中插入手写签名
- 数据库方言Dialect
- 【2022 CCF BDCI文心大模型】还在愁没有背景图?来定制你的专属