JavaScript原生对象

94 阅读2分钟

基本概念

背景

如何描述学生或商品等复合型数据。每个学生有自己的姓名、年龄、性别等数据,如果用一维数组下标的方式来访问学生的具体数据,如student[0]表示姓名。sutdent[1]表示年龄。使用很不方便。所以用原生对象来进行描述这种复合型数据。

概念

是JavaScript专属的一种用于表示复合型数据的数据结构。它是以属性的方式来表示复合数据中的某个数据,可以实现容易理解,数据统一管理等。

原生对象的基本使用

定义原生对象

//定义一个空的原生对象
var 对象变量名 = {};

//定义一个带有默认数据的原生对象
var 对象变量名 = {
    属性名1:性指1,
    属性名2:性指2
    属性名n:性指n
    };
例子
var student = {};
//描述学生starnight 22 女
var student = {
    name:"starnight",
    age:22,
    sex:'女'
    };

获取或设置对象中的属性

获取
对象名.属性名
设置
对象名.属性名 = 新数据

例子
var student = {
    name:"starnight",
    age:22,
    sex:"女"
    };
//输出学生姓名
console.log(student.name); //starnight
//设置年龄为18
student.age = 18;
console.log(student.age); //输出 18

对象数组

定义和使用

定义:一个数组里的每个数据都是一个原生对象
var arr = [1,2,n];

使用:通过下标来使用

        var good1 = {
        name:'卫龙',
        price:12,
        stock:1000,
        bought:20
       }
       var good2 = {
        name:'秋裤',
        price:300,
        stock:100,
        bought:1
       }
       var good3 = {
        name:'特斯拉',
        price:120000,
        stock:100,
        bought:30
       }
       //定义数组
       var arr = [good1,good2,good3];
       使用数组的第一个对象的name属性
       console.log(arr[0].name); //输出卫龙
       //将数组中第一个商品的名称改为ad奶
       arr[0].name = "ad奶";

练习

<script>
        /*1.卫龙:价格:12 库存:1000 销量:20
        2.秋裤:价格:300 库存:100 销量:1
        3.特斯拉:价格:120000 库存:100 销量:30
        */
       //1.用原生对象来描述,同时输出该三个对象
       //2.设置每个商品的价格在原来基础之上打9折
       //3.如何利用销量对商品进行排序
       var good1 = {
        name:'卫龙',
        price:12,
        stock:1000,
        bought:20
       }
       good1.price *= 0.9;
       var good2 = {
        name:'秋裤',
        price:300,
        stock:100,
        bought:1
       }
       good2.price *= 0.9;
       var good3 = {
        name:'特斯拉',
        price:120000,
        stock:100,
        bought:30
       }
       good3.price *= 0.9;
       var goods = [good1,good2,good3];
       goods.sort(function(good1,good2){
        //销量比较
        return good2.bought - good1.bought
       });
       console.log(goods);

    </script>