国外 网站 欣赏,软件开发工作,wordpress 主题开发 兜,网站营销推广应该怎么做站在巨人的肩膀上 黑马程序员前端JavaScript入门到精通全套视频教程#xff0c;javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 #xff08;十三#xff09;构造函数数据常用函数
1. 深入对象
1.1 创建对象三种方式
利用对象字面量创建对象const o {…站在巨人的肩膀上 黑马程序员前端JavaScript入门到精通全套视频教程javascript核心进阶ES6语法、API、js高级等基础知识和实战教程 十三构造函数数据常用函数
1. 深入对象
1.1 创建对象三种方式
利用对象字面量创建对象const o {name: 佩奇
}利用 new Object 创建对象const o new Object({ name: 佩奇 })
console.log(o) // {name: 佩奇}利用构造函数创建对象
1.2 构造函数
构造函数是一种特殊的函数主要用来初始化对象使用场景常规的 {…} 语法允许创建一个对象。比如我们创建了佩奇的对象继续创建乔治的对象还需要重新写一遍此时可以通过构造函数来快速创建多个类似的对象。例子function Pig(name, age, gender) {this.name namethis.age agethis.gener gender
}
// 创建佩奇对象
const Peppa new Pig(佩奇, 6, 女)
// 创建乔治对象
const George new Pig(乔治, 3, 男)
console.log(Peppa) // {name: 乔治, age: 6, gener: 女}构造函数在技术上是常规函数。不过有两个约定 它们的命名以大写字母开头。它们只能由 “new” 操作符来执行。 构造函数语法大写字母开头的函数说明 使用 new 关键字调用函数的行为被称为实例化实例化构造函数时没有参数时可以省略 ()构造函数内部无需写return返回值即为新创建的对象构造函数内部的 return 返回的值无效所以不要写returnnew Object()、new Date() 也是实例化构造函数 实例化执行过程说明 创建新对象构造函数this指向新对象执行构造函数代码修改this添加新的属性返回新对象
1.3 实例成员静态成员
实例成员通过构造函数创建的对象称为实例对象实例对象中的属性和方法称为实例成员。实例成员说明 实例对象的属性和方法即为实例成员为构造函数传入参数动态创建结构相同但值不同的对象构造函数创建的实例对象彼此独立互不影响。 静态成员构造函数的属性和方法被称为静态成员静态成员说明 构造函数的属性和方法被称为静态成员一般公共特征的属性或方法设置为静态成员静态成员方法中的 this 指向构造函数本身
2. 内置构造函数
在 JavaScript 中最主要的数据类型有 6 种 基本数据类型字符串、数值、布尔、undefined、null引用类型: 对象 但是我们会发现有些特殊情况// 普通字符串
const str andy
console.log(str.length) // 4其实字符串、数值、布尔、等基本类型也都有专门的构造函数这些我们称为包装类型。JS中几乎所有的数据都可以基于构成函数创建。 引用类型 ObjectArrayRegExpDate 等 包装类型 StringNumberBoolean 等
2.1 Object Object 是内置的构造函数用于创建普通对象。 例子 // 通过构造函数创建普通对象
const user new Object({name: 小明, age: 15})推荐使用字面量方式声明对象而不是 Object 构造函数 有三个常用静态方法静态方法就是只有构造函数Object可以调用的: // 想要获取对象里面的属性和值的做法
const o { name: 佩奇, age: 6 }// 传统做法
for(let k in o) {console.log(k) // 属性 name ageconsole.log(o[k]) // 值 佩奇 6
}Object.keys 静态方法获取对象中所有属性键 const o { name: 佩奇, age: 6 }// 获取对象的所有键并且返回是一个数组
const arr Object.keys(0)
console.log(arr) // [name, age]注意返回的是一个数组 Object.values 静态方法获取对象中所有属性值 const o { name: 佩奇, age: 6 }// 获取对象的所有值并且返回是一个数组
const arr Object.values(0)
console.log(arr) // [佩奇, 6]注意返回的是一个数组 Object. assign 静态方法常用于对象拷贝 // 拷贝对象把 o 拷贝给 obj
const o { name: 佩奇, age: 6 }
const obj {}
Object.assign(obj, o)
console.log(obj) // { name: 佩奇, age: 6 }const o { name: 佩奇, age: 6 }
Object.assign(o, { gender: 女 })
console.log(o) // { name: 佩奇, age: 6, gender: 女 }经常使用的场景给对象添加属性。
2.2 Array
Array 是内置的构造函数用于创建数组const arr new Array(3. 5)
console.log(arr) // [3, 5]创建数组建议使用字面量创建不用 Array 构造函数创建
2.2.1 数组常见实例方法-核心方法
方法作用说明forEach遍历数组不返回用于不改变值经常用于查找打印输出值filter过滤数组筛选数组元素并生成新数组map迭代数组返回新数组新数组里面的元素是处理之后的值经常用于处理数据reduce累计器返回函数累计处理的结果经常用于求和等
reduce 返回函数累计处理的结果经常用于求和等
基本语法arr.reduce(function(){}, 起始值)参数起始值可以省略如果写就作为第一次累计的起始值语法arr.reduce(function(累计值, 当前元素 [,索引号][,源数组]){}, 起始值)累计值参数 如果有起始值则以起始值为准开始累计 累计值 起始值如果没有起始值 则累计值以数组的第一个数组元素作为起始值开始累计后面每次遍历就会用后面的数组元素 累计到 累计值 里面 类似求和里面的 sum 使用场景求和运算const arr [1, 5, 9]
const count arr.reduce((prev, item) prev item)
console.log(count)2.2.2 数组常见方法-其他方法
实例方法 join 数组元素拼接为字符串返回字符串(重点)实例方法 find 查找元素返回符合测试条件的第一个数组元素值如果没有符合条件的则返回 undefined(重点)实例方法 every 检测数组所有元素是否都符合指定条件如果所有元素都通过检测返回 true否则返回 false(重点)实例方法 some 检测数组中的元素是否满足指定条件如果数组中有元素满足条件返回 true否则返回 false实例方法 concat 合并两个数组返回生成新数组实例方法 sort 对原数组单元值排序实例方法 splice 删除或替换原数组单元实例方法 reverse 反转数组实例方法 findIndex 查找元素的索引值
2.2.3 数组常见方法-伪数组转换为真数组
静态方法 Array.from()
2.3 String
在 JavaScript 中的字符串、数值、布尔具有对象的使用特征如具有属性和方法例子// 字符串类型
const str hello world!
// 统计字符的长度字符数量
console.log(str.length)// 数值类型
const price 12.345
// 保留两位小数
price.toFixed(2) // 12.34之所以具有对象特征的原因是字符串、数值、布尔类型数据是 JavaScript 底层使用 Object 构造函数“包装”来的被称为包装类型。
2.3.1 常见实例方法
实例属性 length 用来获取字符串的长度(重点)实例方法 split(分隔符) 用来将字符串拆分成数组(重点)实例方法 substring需要截取的第一个字符的索引[,结束的索引号] 用于字符串截取(重点)实例方法 startsWith(检测字符串[, 检测位置索引号]) 检测是否以某字符开头(重点)实例方法 includes(搜索的字符串[, 检测位置索引号]) 判断一个字符串是否包含在另一个字符串中根据情况返回 true 或 false(重点)实例方法 toUpperCase 用于将字母转换成大写实例方法 toLowerCase 用于将字母转换成小写实例方法 indexOf 检测是否包含某字符实例方法 endsWith 检测是否以某字符结尾实例方法 replace 用于替换字符串支持正则匹配实例方法 match 用于查找字符串支持正则匹配
2.4 Number
Number 是内置的构造函数用于创建数值常用方法 toFixed() 设置保留小数位的长度 例子// 数值类型
const price 12.345
// 保留两位小数四舍五入
console.log(price.toFixed(2)) // 12.34
