js基础第四天

154 阅读7分钟

对象

  • 对象(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 他们是什么?

letconst是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的区别

使用letconst声明的变量不存在变量提升,有自己的作用域 - 其所在的大括弧中。

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),过滤数组中,符合条件的元素并返回一个新的数组