Js05天---对象

对象是什么?

对象是Js里面的一种数据类型,是一种无序的数据集合。

对象的使用:

语法:
let 对象名 = {};

对象有属性和方法

属性:信息或特征(名词),比如手机尺寸、颜色、重量等
数据描述性的信息称为属性,如人的姓名、身高、年龄、性别等,一般是名词性的。
属性都是成 对出现的,包括属性名和值,它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量(外面是变量,对象内是属性)
属性名可以使用 "" 或 '',一般情况下省略,除非名称遇到特殊符号如空格、中横线等

方法:功能或者行为(动词),比如手机大段话、发短信、玩游戏
语法:
let 对象名 = {
属性名:属性值,
方法名:函数
}
对象的方法:
数据行为性的信息称为方法,如跑步、唱歌等,一般是动词性的,其本质是函数。

  1. 方法是由方法名和函数两部分构成,它们之间使用 : 分隔
  2. 多个属性之间使用英文 , 分隔
  3. 方法是依附在对象中的函数
  4. 方法名可以使用 "" 或 '',一般情况下省略,除非名称遇到特殊符号如空格、中横线等

对象方法的访问:
声明对象,并添加了若干方法后,可以使用 . 调用对象中函数,我称之为方法调用。
注意: 千万别忘了给方法名后面加小括号

    let person = {
      //属性:
      userName: "boy",
      age: 18,
      gender: 'man',
      //方法:
      jump: function () {
        console.log("jumpjump");
      }
    };
    console.log(person);
    //调用方法
    person.jump();

操作对象:增删查改

1.查询对象的属性
方式一:对象名.属性名
方式二:对象名[“属性名”]

2.修改对象的属性
方式一:对象名.属性名 = 新的属性值;
方式二:对象名[“属性名”] = 新的属性值;

3.新增对象的属性
方式一:对象名.新属性名 = 属性值;
方式二:对象名[“新属性名”] = 属性值;
注意:无论是属性或者是方法,同一对象中出现名称一样的,后面的会覆盖前面的。

4.删除对象的属性
delete 对象名.属性名
注意:删除一个未声明的属性也不会报错

遍历对象

for in 语法
for(let k in obj){
console.log(k);
console.log(obj[k]);
}

  <script>
    let goods = {
      name: "小米(MI)",
      numb: 100012816024,
      weight: '0.55kg',
      address: '中国',
      singsong: function () {
        console.log('sing a song');
      }
    }

    // 遍历对象
    // for in语法
    for (let key in goods) {
      console.log(key);
      console.log(goods[key]);
      //不能用goods.key,这个代表读取对象的key属性
    }

    // for in 可以用在数组上,但是不推荐

//注意: 对象确实是无序的,如果要按序遍历;对象不是首选方式;(数组才是按序的)
      
// 对象的遍历顺序扩展(了解):
// 一般无序之中其实有序(不同浏览器,可能有不同的实现;也就是说这个规律非标准)
// 一般: 先遍历属性名为数字的属性; 按从小到大的顺序输入; 然后按书写顺序,输出其他字符串型的属性;

  </script>

案例:

  <script>
    // 需求:请把下面数据中的对象打印出来:
    // 整体思路:
    //  目标:使用 document.write(整个table的html代码)
    // 1. 拼接 整个table的html代码
    // 2. 整个table的html代码拆分:
    //     2.1 : 前部分 (表头等 静态部分) tableStart
    //     2.2 : 中间部分  (需要遍历数组,以及遍历对象,拼接成的 4个tr字符串)
    //     2.3 : 后部分  (闭合标签 静态部分)tableEnd
    // 3. document.write(整个table的html代码)


    // 定义一个存储了若干学生信息的数组
    let students = [
      { name: '小明', age: 18, gender: '男', hometown: '河北省' },
      { name: '小红', age: 19, gender: '女', hometown: '河南省' },
      { name: '小刚', age: 17, gender: '男', hometown: '山西省' },
      { name: '小丽', age: 18, gender: '女', hometown: '山东省' }
    ]

    // table结构前部分
    let tableStart = `
              <table>
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>家乡</th>
                  </tr>
                </thead>
                <tbody class="tbody">`;

    //tableBody 部分 
    let tableBody = "";
    // for循环去遍历数组
    // 构建4个tr 字符串
    for (let i = 0; i < students.length; i++) {
      // 声明一个变量去装student[i]的数据
      let obj = students[i];
      tableBody += `
      <tr>
        <td>${i + 1}</td>
        <td>${obj.name}</td>
        <td>${obj.age}</td>
        <td>${obj.gender}</td>
        <td>${obj.hometown}</td>
        </td>
        </tr>
      `}

    // table结构后部分
    let tableEnd = `</tbody>
              </table>`;

    table = tableStart + tableBody + tableEnd;
    document.write(table);
  </script>

内置对象

内置对象是什么?JavaScript内部提供的对象,包含各种属性和方法给开发者调用
document.write()、console.log()也是属于内置对象。

内置对象Math:

Math对象是JavaScript提供的一个“数学高手”对象
提供了一系列做数学运算的方法:
random:生成0-1之间的随机数(包含0不包括1)

    // random方法:生成0-1的随机数,包含0,不包含1
    let num = Math.random();

ceil:向上取整

    // ceil 天花板,向上取整
    let num = Math.random();
    num = Math.ceil(num);

floor:向下取整

    // floor地板,向下取整
    let num = Math.random();
    num = Math.floor(num);

max:找最大数

console.log("max:", Math.max(11, 22, 55, 44, 33, 77));//77

min:找最小数

console.log("min:", Math.min(11, 22, 55, 44, 33, 77));//11
随机数进阶:

如何生成0-10的随机数呢?

        // 一.随机生成0-10(包含10)的整数
        // 分析:
        // 1.Math.random()随机生成0-1的随机小数(最大值无限接近1但不等于1)
        // 2.Math.random()*11生成0-11的随机小数(最大值无限接近11但不等于11)
        // 3.利用Math.floor向下取整去除随机小数得到0-10的整数
        // 4.声明一个num变量去装这个整数,并输出
        let num = Math.floor(Math.random() * 11);
        console.log(num);

如何生成5-10的随机数?

        // 二:随机生成5-10(包含10)的整数
        // 分析:
        // 1.Math.random()生成0-1的随机小数(最大值无限接近1但不等于1),乘以5就能生成0-5的随机小数(最大值无限接近5但不等于5)
        // 2.Math.random() * 5 再加1【Math.random() * (5 + 1)】得到最大值无限接近6但不等于6的随机小数,之后整个式子加 5 即可生成5-10(无限接近11)的整数。
        // 3.利用Math.floor向下取整得到5-10(无限接近11向下取整之后就能得10)的整数
        // 4.声明一个num1变量去装整数并输出
        let num1 = Math.floor(Math.random() * (5 + 1) + 5);
        console.log(num1);

如何生成M-N之间的随机数?

        // 三:随机生成M-N(包含N)整数
        // 分析:
        // 1.Math.random()生成0-1的随机小数(最大值无限接近1但不等于1),乘以N-M即可生成0~N-M的随机小数(最大值无限接近M但不等于M)
        // 2.Math.random()*N-M 再加1【Math.random() * (N-M + 1)】得到最大值无限接近(N-M+1)但不等于(N-M+1)的随机小数,之后整个式子加M 即可生成从M(无限接近M)开始到N结束的整数。
        // 3.利用Math.floor向下取整得到M~N(无限接近N+1,向下取整之后就能得N)的整数
        // 4.声明一个num2变量去装整数并输出
        let M = 10,
            N = 20;
        let num2 = Math.floor(Math.random() * (N - M + 1) + M);
        console.log('M-N(包含N)的随机整数', num2);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 228,835评论 6 534
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 98,676评论 3 419
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 176,730评论 0 380
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 63,118评论 1 314
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 71,873评论 6 410
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 55,266评论 1 324
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 43,330评论 3 443
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 42,482评论 0 289
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 49,036评论 1 335
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,846评论 3 356
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 43,025评论 1 371
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 38,575评论 5 362
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 44,279评论 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,684评论 0 26
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,953评论 1 289
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 51,751评论 3 394
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 48,016评论 2 375

推荐阅读更多精彩内容

  • 学习目标 初步了解面向对象的思想 理解类与对象的概念和关系 能够掌握类的定义格式 能够掌握创建对象格式 理解包的作...
    bjfStart阅读 424评论 0 0
  • 对象 1.对象是什么 对象(object):JavaScript里的一种数据类型 可以理解为是一种无序的数据集合 ...
    Web_小pang阅读 112评论 0 1
  • JavaScript 1 初识JavaScript 1.1 JavaScript 是什么 JavaScript 是...
    SY阅读 245评论 0 2
  • 面向对象的编程 var 一个对象 = new 一个对象(); 一个对象.对象方法1(); 一个对象.对象方法2()...
    我爱明天更美好阅读 134评论 0 0
  • 二、面向对象 1、面向对象思想: (1)概述:面向对象是相对于面向过程而言的,面向过程强调的是功能,面向对象强调的...
    佘大将军阅读 436评论 0 1