一、创建对象的三种方式
<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>