自定义对象和数组

106 阅读1分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第17天,点击查看活动详情

一。js自定义对象

①。对象是带有属性和方法的特殊数据类型

②。对象名.属性名称

③。对象名.方法名称(参数表)

      let car = {
        // car是对象
        color: '珍珠白',
        // color是属性名
        price: '50w',
         // price是属性名
        name: '宝马320',
         // name是属性名
        drive: function (str) {
        //    drive也是属性名 属性值是一个匿名方法
            document.write('我换了发动机' + str)
        }
    }

    document.write('汽车颜色:' + car.color + '<br>')
    document.write('汽车价格:' + car.price + '<br>')
    document.write('汽车名字:' + car.name + '<br>')
    car.drive('哈哈')

QQ截图20220422160516.png

   <button onclick="fn()">点我添加</button>

<script>
    let car = {
        color: '水晶蓝',
        name: '宝马',
        jiage: '50w',
        drive: function (str) {
            console.log('我换了发动机' + str)
        }
    }
    car.drive('哈哈')
    function fn() {
        car.lunzi = 4;
        document.write(car.lunzi+'个轮子')
    }
    </script>

22.png

1。delete删除对象的属性

    <button onclick="fa()">点我删除</button>


<script>
    let car = {
        color: '水晶蓝',
        name: '宝马',
        jiage: '50w',
        drive: function (str) {
            console.log('我换了发动机' + str)
        }
    }
    car.drive('哈哈')

    function fa() {
        delete car.color;
        console.log(car)
    }
</script>

1.png

二。数组

  1. 数组 , 具有相同数据类型的一个或多个值的集合

    使用字面量的方式来创建一个数组 var arr = ["前端","JS","HTML"]; document.write(arr)

1.png

2.Array

利用构造函数Array的方式来创建一个数组

3 表示有3个空数组

             <script>
    var abc = new Array(3);
    /* 通过索引 给数组赋值 索引是从0开始 0表示第一个 */
    abc[0] = '前端'
    abc[1] = 'JS'
    abc[2] = 'HTML'
    console.log(abc)
</script>

11.png

3.push

arr的最后的位置 添加

  <script>
    let arr=['大乔','曹操','小乔']
    arr.push('周瑜')
    document.write(arr)
</script>

111.png push方法执行完之后会返回一个数组的长度

12.png

4.join

  <script>
    let arr=['飞机','坦克','导弹']
     let str = arr.join();
    console.log(str);

</script>

5.png

使用join方法可以把数组转成字符串

 <script>
    let arr=['飞机','坦克','导弹']
     let str = arr.join();
    console.log(str);

</script>

4.png

join()里面也可以加空格或其它特殊符号

   <script>
    let arr = ['飞机', '坦克', '导弹']
    let str = arr.join('**')
    console.log(str);

</script>

6.png

5.reverse

reverse会把数组成员顺序做一个反转(颠倒顺序)

 <script>
    let arr = ['飞机', '坦克', '导弹']
    console.log(arr.reverse())

</script>

7.png

6.sort

对数组排序 会改变原数组 会返回排序后的数组

   <button onclick="fn()">点我从小到大</button>
<button onclick="fa()">点我从大到小</button>
<script>
    function fn() {
        let arr = [1, 3, 2, 4, 6, 5]
        arr.sort();
        // 顺序从小到大,123456
        console.log(arr)
    }
    function fa() {
        let arr = [1, 3, 2, 4, 6, 5]

        console.log(arr.sort().reverse())
        // 顺序从小到大,654321,
        // sort排序,reverse,颠倒数组
    }
</script>

   

9.png 练习一。

8.png

多位数的排序

 <script>
     let arr = [22,121,33,32,41,40];
    
    /* 多位数的 从小到大的排序 */
    /* arr.sort(function(a,b){
        return a-b;
    }) */
    /* 多位数的 从大到小的排序 */
    arr.sort(function(a,b){
        return b-a;
    })
    document.write(arr)
</script>

1.png

练习一。

     <button onclick="fn()">点我试试</button>
<script>
    function fn() {
        let arr = ['吕布', '小乔', '曹操']
        arr.push('大乔')
        // 在数组最后添加大乔
        for (var i in arr) {
            if (arr[i] == '吕布') {
                arr[i] += '爱貂蝉'
            }
            if (arr[i] == '小乔') {
                arr[i] += '爱周瑜'
            }
            if (arr[i] == '曹操') {
                arr[i] += '爱小乔和大乔'
            }
            if (arr[i] == '大乔') {
                arr[i] += '爱孙策'
            }
        }console.log(arr)
    }
  </script>

3.png