目录
对象
在JavaScript中,对象是一组无序的相关属性和方法的集合,万物皆对象,如字符串、数值、数组、函数等
- 属性:事物的特征,在对象中用属性来表示
- 方法:事物的行为,在对象中用方法来表示
自定义对象:自己创建的对象
对象字面量
{属性名:属性值,属性名:属性值,,,,}
var commodity = {
id: 1,
title: "商品一",
price: 4999.0,
launchTime: 2022 / 10 / 01,
count: 500,
}
内置构造函数
// 内置构造函数
var emp = new Object()
emp.eid=1,
emp.ename='李四',
emp['salary']=50000.00
console.log(emp);
访问属性
console.log(commodity.count) //推荐
console.log(commodity['count']) //特殊属性
遍历属性
格式
for(var i in person){
获取属性值:person[i]
}
// 遍历属性
for (var i in person) {
console.log(i,person[i])
}
检测属性
格式:
- 方案一 对象.属性名!==undefined true->存在 false->不存在
- 方案二(推荐)对象.hasOwnProperty(‘属性名’) true->存在 false->不存在
- 方案三 console.log('属性名' in 对象);
模板字符串——``
允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。反引号之间的内容就是模板字符串
对象中方法
var person = {
name: "Jary",
// 获取
getName: function (name) {
console.log(this.name)
},
// 设置
setName: function (name) {
this.name = name
console.log(this.name)
},
}
person.getName()
person.setName('salary')
数据存储
- 原始类型,将数据存储在栈内存
- 引用类型 ,将数据存储在堆内存,如果把对象赋值给变量,
- 引用类型数据销毁,对象不被任何地址所引用就会自动销毁,设置为null。
内置对象:JS提供的,可直接使用
数组对象
使用单独的变量名来存储一系列的值,一个容器储存多个元素
修改 || 删除元素
var car = ["car1", "car2", "car3", "car4", "car5", "car6"]
// car[5]='car001'
// 推荐:修改数组下标为5的值
car.splice(5, 1, "car002")
car.splice(5, 1) //delete
car.push("car7")
添加元素
var phone = []
// phone[phone.length] = "华为"
// phone[phone.length] = "华为"
// 推荐
phone.push("三星", "华为", "外星人", "戴尔")
清空数组
// phone.length = 0
// 推荐
phone.splice(0, phone.length)
内置构造函数
var arr = new Array("01", "02", "03")
var arr2 = new Array()
arr2.push('a','b','c','d','e')
数组与对象
- 都是用于存储值,对象存在属性,数组存在元素
- 数组是有序数组,可以进行排序
遍历数组
// 遍历对象
for (var i in arr) {
console.log(arr[i])
}
// 遍历数组(推荐)
for (var i = 0; i < arr.length; i++) {
temp = arr[i]
console.log(temp)
}
获取输入值渲染数据
HTML
<input type="text" name="" id="text" placeholder="请输入姓名" />
<button id="btn">添加</button>
<ul id="list">
<li></li>
</ul>
JS
/* 1、创建空数组
2、点击事件获取输入值,并将该值添加至数组开头
3、遍历数组,模板字符串拼接,渲染数据,清空输入框值 */
var arr = []
btn.onclick = function () {
arr.unshift(text.value)
var str = ""
for (var i = 0; i < arr.length; i++) {
str += `<li>${arr[i]}</li>`
list.innerHTML = str
}
text.value = ""
}
宿主对象:执行js语言时提供的对象,如果在浏览器执行js,那么宿主对象就是浏览器对象。