javascript -- 对象知识以及练习题

布兰妮甜

已于 2024-08-22 15:48:35 修改

阅读量628

点赞数 23

文章标签： javascript 前端

于 2024-08-19 18:29:28 首次发布

本文链接：https://blog.csdn.net/chaosweet/article/details/141331623

版权

云天收夏色，木叶动秋声

文章目录

基础

作用：解决数据在保存的时候一一对应(一个萝卜一个坑)，是键值对集合
定义
- 通过字面量：var 对象名称 = {}
- 通过构造函数：var 自定义对象名称 = new object()
  - object()是js中内置的一个构造函数，把用来创建对象的函数称为构造函数
  - new是一个关键字，new关键字就是调用构造函数创建对象的
- 通过工厂方式：创建多个对象
- 通过自定义构造函数
```
function People(name, age) {
  this.username = name
  this.age = age
}
var zs = new People('张三', 20)
var ls = new People('李四', 22)
console.log(zs, ls)
```

赋值/取值

直接创建对象并赋值：var 对象名称 = {自定义的键: 值}

var obj = {
  name: '张三丰',
  age: 86,
  isTv: true,
  regTime: new Date(),
  say() {
    console.log('说话')
  }
}
console.log(obj.name)
console.log(obj.age)
console.log(obj.isTv)
console.log(obj.regTime)
obj.say()

通过对象名.的方式

var obj = {}
obj.name: '张三丰'
obj.age: 86
obj.isTv: true
obj.regTime: new Date(),
obj.say = function() {
  console.log('说话')
}
console.log(obj.name)
console.log(obj.age)
console.log(obj.isTv)
console.log(obj.regTime)
obj.say()

通过对象[]的方式

var obj = {}
obj['name'] = '张三丰'
obj['age'] = 86
obj['isTv'] = true
obj['regTime'] = new Date()
obj['say'] = function() {
  console.log('说话')
}
console.log(obj['name'])
console.log(obj['age'])
console.log(obj['isTv'])
console.log(obj['regTime'])
obj['say']()

总结
- 不管哪种方式创建的对象，都可以通过对象.的方式或者对象[]的方式来进行赋值或取值
- 字面量创建对象的方式是内置构造函数创建对象的一种简写形式
- 字面量创建对象的方式和内置构造函数创建对象都是用来创建一个对象的

this关键字

this的指向

普通函数

function fn () {
  console.log(this) // window
}
fn()

定时器函数

setTimeout(function () {
   console.log(this) // window
}, 0)

构造函数

function Hero () {
  console.log(this) // Hero 
}
new Hero()

对象方法

var obj = {
  name: '张三',
  age: 24,
  fn() {
    console.log(`${this.name}今年${this.age}岁了`) // 张三今年24岁了
  }
}
obj.fn()

事件绑定

<input type="button" value="点击" id="btn">
      
<script>
  var btn = document.getElementById('btn')
  btn.onclick = function () {
    console.log(this) // <input type="button" value="点击" id="btn"> dom节点
  }
</script>

总结
- 构造函数中的this关键字指向构造函数的调用者
- 对象中的this关键字指向对象当前自己
- 普通函数中的this关键字指向window
- 不管是构造函数还是普通函数，this关键字都指向函数的调用者

调用方式	this指向
普通函数	window
构造函数	实例对象
对象方法调用	指向调用者
事件绑定	指向绑定事件对象
定时器函数	window
立即执行函数	window

改变this指向的方法

call方法

var obj = {
  name: '张三',
  age: 24,
  sing() {
    console.log(this) // { name: '李四' }
  }
}
var newObj = { name: '李四' }
obj.sing.call(newObj)

apply方法

function fn (a, b) {
  console.log(this, a, b) // { name: '张三' } 66 88
}
var obj = { name: '张三' }
fn.apply(obj, [66, 88])
var arr = [1, 6, 2, 7, 8, 10]
console.log(Math.max.apply(null, arr))

bind方法

<button id="btn">点击</button>
<script>
var btn = document.getElementById('btn')
btn.onclick = function () {
	this.disabled = true
	setTimeout(function () {
		this.disabled = false
	}.bind(this), 5000)
}
</script>

call、apply、bind总结

相同点：都可以改变this的指向
区别
- call和apply会调用函数，并且改变函数内部this的指向
- call和apply传递的参数不一样，call传递参数a，b形式，apply须传递数组形式[a，b]
- bind不会调用函数，可以改变函数内部this的指向
主要应用场景
- call经常用做继承
- apply主要跟数组有关系，比如使用Math.max()求数组的最大值
- bind不调用函数，但是还想改变this的指向 (例如改变定时器内部的this指向)

扩展

new关键字的执行过程
- 程序先执行 new People()，在内存中创建一个空对象
- 将调用函数时候的实参赋值给形参
- 将形参的值赋值给空对象中的this关键字
- 将this关键字指向外部的调用者

instanceof关键字

用来判断对象是不是通过某个构造函数创建的

总结

如果对象是通过某个构造函数创建的，则返回true
如果对象不是通过某个构造函数创建的，则返回false

function People(username) {
	this.username = username
}
var zs = new People('张三')
function People1(username) {
	this.username = username
}
var zs = new People('张三')
console.log(zs instanceof People1)

遍历对象
- 语法：for(对象中的属性 in 对象){对象[对象中的属性]}
```
var a = ['A', 'B', 'C']
for (var i in a) {
  console.log(a[i])
}
```
- for in 对数组的循环得到的是字符串而不是数字
  - in后面写的是一个保存属性的一个变量
  - key是一个变量，该变量中放的是每一个属性
```
for (key in obj) {
	// 获取对象的值
	console.log(obj[key])
}
```

内置对象

Math.PI：获取圆周率
Math.pow(x, y) x的y次幂：求一个数的幂数(几次方)
Math.max()：获取一组数中的最大值
Math.abs()：求一个数的绝对值
Math.round()：求一个数字的四舍五入

内置对象字符串

charAt(索引值)：获取指定位置处的字符 (字符串中的索引位置从0开始)

var str = 'abcdefg'
console.log(str.charAt(1)) // b 从str字符串中,获取索引是1位置处的字符

slice (startIndex ,end)、substring (startIndex ,end)、substr (startIndex ,length)：截取字符串

startIndex：从字符串中哪个位置开始截取字符串
end：可以设置也可以不设置 (截取的字符串到哪结束)
- 如果设置了end,那么代表在该位置处结束，但是不包括该位置的值
- 如果没有设置end，那么默认表示截取到末尾

var arr = [1, 3, 4, 'A', 'B']
console.log(arr.slice(0, 3)) // [1, 3, 4] 包括索引开始 不包括索引结束
console.log(arr.slice(3)) // ["A", "B"] 从索引3开始到结束
console.log(arr.slice()) // [1, 3, 4, "A", "B"] 复制数组
var res = 'higklmn'
console.log(res.substring(0, 4)) // higk
var str = 'qwerty'
console.log(str.substr(1)) // werty 从位置1开始截取

concat()：拼接字符串 (返回一个新的字符串)

var str = 'say,'
var res = 'hello'
console.log(str.concat(res))

replace()：替换 (返回的结果也是字符串)

var str = 'hello'
console.log(str.replace('h', 'H'))

trim()：将字符串的首位空白去掉

split()：分割字符串

// 要求从以下字符串中将用户名zs 和 密码 123 输出到控制台中
var str = 'https://www.test.com/login?uname=zs&&pwd=123'
// 先将字符串以 ? 分割
var arr1 = str.split('?')
console.log(arr1) // ['https://www.test.com/login', 'uname=zs&&pwd=123']
// 再将另外一部分以 && 分割
var arr2 = arr1[1].split('&&')
console.log(arr2) // ['uname=zs', 'pwd=123']
// 将uname=zs和 pwd=123分别以 '='分割
var arr3 = arr2[0].split('=')
console.log(arr3[1]) // zs
var arr4 = arr2[1].split('=')
console.log(arr4[0]) // 123

indexOf(字符)：用来获取字符串中对应的索引位置，从左向右找，如果找到那么就直接返回其对应的索引位置，如果没有找到，则返回-1

lastIndexOf(字符)：用来获取字符串中对应的索引位置，从后向前找，如果找到那么就直接返回其对应的索引位置，如果没有找到，则返回-1

var str = 'gfgsffb'
console.log(str.indexOf('s')) // 3
console.log(str.indexOf('a')) // -1
console.log(str.lastIndexOf('b')) // 6
console.log(str.laseIndexOf('c')) // -1

toUppercase()：把一个字符串全部变为大写
toLowerCase()：把一个字符串全部变为小写

练习题

统计学生信息案例

var stuNum = parseInt(prompt('请输入要统计的学生人数'))
// 定一个空数组 用来保存学生对象
var newStuNum = []
for (var i = 1; i <= stuNum; i++) {
  // 创建几个学生对象
  var stu = {
     name: prompt('请输入第' + i + '个学生的姓名'),
     gender: prompt('请输入第' + i + '个学生的性别'),
     score: prompt('请输入第' + i + '个学生的成绩'),
   }
  // 将每一个学生对象添加到一个数组中
  newStuNum[newStuNum.length] = stu
}
for (var i = 0; i < newStuNum.length; i++) {
  // 将每一个对象的值输出
  console.log('学生姓名:' + newStuNum[i].name + ' ' + '性别是:' + newStuNum[i].gender + ' ' + '成绩是:' + newStuNum[i].score)
}