对象
- 对象(object):js里的一种数据类型
- 可以理解为是一种无序的数据集合
对象声明语法
let 对象名称 = {属性:方法}
对象有属性和方法组成
- 属性:信息或叫特征(名词)。 比如 手机尺寸、颜色、重量等…
- 方法:功能或叫行为(动词)。 比如 手机打电话、发短信、玩游戏…
属性
数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。
let person = {
uname:'andy',
age:18,
sex:'男'
}
对象中属性访问
声明对象,并添加了若干属性后,可以使用 . 或 [] 获得对象中属性对应的值,我称之为属性访问。例如person.uname
简单理解就是获得对象里面的属性值。
let person = {
uname:'andy',
age:18,
sex:'男'
}
let str = 'uname'
console.log(person.uname) //点形式 对象.属性 ,属性不要写引号,如果没有这个属性则返回undefined
console.log(person.age)
console.log(person.sex)
//或者
console.log(person['uname']) // 对象['属性']:功能类似于 对象.属性
console.log(person['age'])
console.log(person['sex'])
console.log(person[str]) //对象[变量]:变量不要加引号,如果添加了引号就是一个属性名称的字符串
//只有[]方式 才有可能解析变量
补充:
let goods = {
name : '小米',
num: '001',
weight:'160g',
address:'津安创意园',
brand:{
name:'小米',
country:'中国'
}
}
// console.log(goods.brand.country);
console.log(goods['brand']['country']);
两种方式的区别:
- 点后面的属性名一定不要加引号
- []里面的属性名加引号,除非他是一个变量
- 后期不同使用场景会用到不同的写法
对象中的方法
let person = {
name: 'andy',
sayHi:function(){
document.write('hi~')
}
}
- 方法是由方法名和函数两部分构成,他们之间使用:分隔
- 多个属性之间用英文,分隔
- 方法时依附在对象中的函数
- 方法名可以使用""或'',一般情况下省略,除非名称遇到特殊符号如空格,中横线等
对象中的方法访问
声明对象,并添加了若干方法后,可以使用 . 调用对象中函数,我称之为方法调用。
let person = {
name: 'andy',
sayHi:function(){
document.write('hi~')
}
}
// 对象名.方法名()
person.sayHi()
person['sayHi']()
注意:千万别忘了给方法名后面加小括号
对象方法可以传递参数,跟函数使用方法基本一致
对象的操作
掌握对象的操作:增加 删除 修改 获取(查询)
获取(查询): 对象.属性 、 对象['属性名称'] 、对象[变量] 、 对象.方法()
增加属性
let person = {
name: 'andy',
age:18
}
//添加变量的几种方式
person.hobby = '足球' //如果没有这个属性就是添加,有这个属性就是修改
person['sex'] = '男'
person.sayHi = function(){
document.write('你好')
}
let p = 'address'
person[p] = '广州' // 为person里添加 address: '广州'
let fn = 'sayHi'
person[fn] = function(){
document.write('你好~')
}
console.log(person)
修改属性
//如果属性值不存在就是增加,存在就是修改
let person = {
name: 'andy',
age:18
}
person.name = '李雨锋'
person.name = function(){
//代码块
}
删除属性
let person = {
name: 'andy',
age:18
}
//删除对象中的指定属性
//delete 对象.属性名称
delete person.age
console.log(person)
delete person.ageaaa //如果要删除的属性不存在,业不会操作
对象的遍历
遍历对象
let stu = {
name:'李雨锋',
age:20,
sex:'男',
address:'广州黑马程序员'
}
//使用for ...in 遍历对象
//in是关键字,不能少
//对象:是你想遍历的对象
//键;每次遍历时获取到的对象的键(属性名称)
//for(let 键 in 对象){}
for(let key in stu){
console.log(key,stu[key])
}
内置对象
js内部提供的对象,包含各种属性和方法给开发者调用
内置对象math
方法有:
- random :生成0-1之前的随机数(包括0不包括1)
- ceil: 向上取证
- max:找最大值
- min:找最小数
- pow:幂运算
- abs:绝对值
拓展-基本数据类型和引用数据类型
简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型
-
值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值的本身,因此叫做值类型
- string ,number,boolean,undefined,null
-
引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址(引用) ,因此叫做引用数据类型
-
通过new关键字创建的对象(系统对象,自定义对象),如obj,arr,date等
补充复习
-
const,let和var
1 他们是什么?
let与const是ES6新增的两个关键字,他们的作用和var的作用一样,是用来声明变量的
var a = 1;
let b = 2;
const c = "i love heima";
2 let与const的区别
使用let声明的变量,后续可以重新为其赋值;使用const声明的变量,要求在声明的同时就进行初始化,但是后续无法再为这个变量进行重新赋值。
let a = 10;
a = 20;
let b;
b = "jack";
const c = 10;
c = 20; //错误,c是const声明的,变量不能再重新赋值
const d; //错误,使用const声明的变量,必须在声明的同时就初始化.
特别注意,const变量指向1个对象的时候,这个变量的值不能变,但是这个变量指向的对象可以修改.
const person = {
name: "jack",
age: 19,
gender: "male"
};
person.name = "rose"; //可以,并没有修改person变量的值,修改的是person指向的对象的属性的值.
person = {
name: "rose",
age: 18,
gender: "female"
}; //错误,person变量是被const修饰的,不能再为其赋值.
3 与var的区别
使用let和const声明的变量不存在变量提升,有自己的作用域 - 其所在的大括弧中。
let a = 1;
{
let b = 2;
console.log(c);//报错,提示变量c未定义
const c = 3;
//变量b、c只能在声明b、c变量中的大括弧中访问。
//并且也不存在变量提升
console.log(a); //可以访问
console.log(b);//可以访问
console.log(c); //可以访问
}
console.log(a); //可以访问
console.log(b);//不可以访问
console.log(c); //不可以访问`
4 使用建议
- 能使用const就不要使用let
- 能使用let就不要使用var
其实大多数情况下,我们在模块中声明的变量后续都不会再重新赋值,所以这种情况,建议使用const;如果变量的值后续需要更改,可以使用let;
常见和字符串和数组的方法
常用字符串方法
- toLowerCase(): 把字符串转为小写,返回新的字符串
- toUpperCase(): 把字符串转为大写,返回新的字符串
- indexOf(): 返回某个指定的子字符串在字符串中第一次出现的索引位置,如果没有查找到则返回-1
- substring(): 提取字符串中介于两个指定下标之间的字符,包含起始下标位置的字符,但是不包含终止下标位置的字符
- substr(): 返回从指定下标开始指定长度的的子字符串
- split(): 把字符串分割成字符串数组
常用数组方法
- Array.push(),向数组的末尾添加一个或多个元素,并返回新的数组长度
- Array.unshift(),向数组的开头添加一个或多个元素,并返回新的数组长度
- Array.shift(),删除数组的第一项,并返回第一个元素的值。若该数组为空,则返回undefined
- Array.join(),将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号
- Array.splice(index,howmany,arr1,arr2...) ,删除元素并添加元素,从index位置开始删除howmany个元素,并将arr1、arr2...数据从index位置依次插入。howmany为0时,则不删除元素
遍历方法
- Array.forEach(function),用于调用数组的每个元素,并将元素传递给回调函数。原数组不变
- Array.map(function),原数组的每一项执行函数后,返回一个新的数组。原数组不变
- Array.filter(function),过滤数组中,符合条件的元素并返回一个新的数组