首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS对象和数组

JS对象和数组

作者头像
用户3159471
发布2018-09-13 10:39:03
7.2K0
发布2018-09-13 10:39:03
举报
文章被收录于专栏:web前端-web前端-

一  JS对象

     在JS中一切事物都是对象,字符串,数值,数组,函数

     对象中包含属性和方法

对象的属性既可以存放基本数据类型也可以存放其他对象的引用值或者函数的引用值,如果存储的是函数的的引用值则该属性称为方法

  对象的创建方法:

   1 使用new关键字来创建

    var people=new Object();
    people.name="小明";
    people.age=12;
    people.eat=function(){
        alert(this.name+"年龄"+this.age+"喜欢吃冰激凌")
    }
    people.eat()

结果:

    

   2  使用键值对的形式

    var people={
        name:"小明",
        age:20,
        eat:function(){
            alert(this.name+"年龄"+this.age+"喜欢吃西瓜")
        }
    }
    people.eat()
结果:

  3 第三种创建方式

var people={};
            people.name='宋江';
            people.age=40;
            people.eat=function(){
                alert(this.name+"年龄"+this.age+"喜欢吃饺子")
            }
//结果:宋江喜欢吃饺子

补充

  • 可以用点符号访问对象属性值也可以通过数组的方式,即用["属性名称"];
  • 可以使用delete运算符删除对象的属性

二   数组

数组的创建方法

  • new关键字创建空数组
  • new关键字创建包含元素的数组
  • new关键字创建指定元素个数的数组
  • 也可以使用[]直接创建数组
  • 可以使用length属性获取数组的长度;并且可以给一个数组赋值。
        var arr1=new Array();
        var arr2=new Array('苹果','葡萄','香蕉','桔子');
        var arr3=new Array(4);
        alert(arr1); //结果:空
        alert(arr2); //结果为苹果,葡萄,香蕉,桔子
        alert(arr3)  //结果为,,,,

        var arr4=[];
        var arr5=["水果","主食"];
        alert(arr4);  //结果:空
        alert(arr5);  //结果 水果,主食
        alert(arr5.length)  //结果  2

数组元素的基本操作

  1. 读取数据:可以使用索引查询获取数组元素和添加数组元素
  2. 添加数据:使用push方法将新元素添加到数组尾部.
  3. 删除数据:可以使用delete运算符删除指定的元素。
  4. 删除末尾元素(更新数据)pop()方法:该方法会返回删除的元素。
  5. 删除顶端的元素 shift方法:
  6. 在数组顶端添加元素 unshift方法:返回值为新数组的长度,但不建议使用,IE会出错。
        var arr1=new Array();
        var arr2=new Array('苹果','葡萄','香蕉','桔子');
        alert(arr2[1])//  结果:葡萄
        arr2.push("西瓜");//在队尾添加
        alert(arr2);//结果:苹果,葡萄,香蕉,桔子,西瓜
        delete arr2[2];//删除指定元素
        alert(arr2)//结果:苹果,葡萄,桔子,西瓜
        arr2.pop()//删除队尾元素
        alert(arr2)//苹果,葡萄,桔子
//unshift 在顶端添加元素
//shift   在顶端删除元素(很简单,记住就行,不一一举例)
  1. 字符转换:toString方法将数组表示为字符串,该方法从Object继承而来。
  2. join方法输出数组元素。(输出结果会转换成字符串)
        var arr2=new Array('苹果','葡萄','香蕉','桔子');
        var str=arr2.toString();
        alert(typeof(str))
//结果

  1. 数组逆序reverse:颠倒数组元素的顺序;返回值为逆序后的新数组。
  2. 数组排序 sort:
    • 语法 数组名.sort(sortfunction)
    • sortfunction若省略,默认为从按照ASII字符顺序进行升序排列
    • sortfunction必须返回:正值、零、负值三者之一。正值表示第一个值大于第二个值,负值反之,零则相等。
  3. 扩充数组 concat:将多个数组的元素合并为一个新的数组。
     arrayObject.concat(arrayX,arrayX,......,arrayX)
       arrayX为必选参数
//reverse代码 
   <script>
        var fruit=new Array('苹果','葡萄','香蕉','桔子','桃子','石榴');
        document.write(fruit+'</br>')
        fruit.reverse()
        document.write(fruit+'</br>')
    </script>

//sort代码
        var fruit=[7,10,32,6,9,4]
        document.write(fruit+'</br>')
        fruit.sort(sortFun)
        document.write(fruit+'</br>')
        function sortFun(ar1,ar2){
            if(ar1>ar2){
                return -1;//返回-1表示逆序,如果返回1,表示正序
            }else if(ar1<ar2){
                return 1;
            }else{
                return 0;
            }
        }


//concat代码

        var fruit1=new Array('5个苹果','3斤葡萄','4个香蕉');
        var fruit2=new Array('6个桔子','2个桃子','1个石榴');
        document.write('合并前的两个数组:'+'</br>')
        document.write(fruit1+'</br>')
        document.write(fruit2+'</br>')
        //var fruit=fruit1.concat(fruit2)
        var fruit=fruit1.concat('1个石榴')
        document.write('合并后的新数组:'+'</br>')
        document.write(fruit+'</br>')
  1. splice方法:删除、替换、插入元素
    • 会更改原数组
    • 第一参数为起始位置索引
    • 第二参数为切取元素个数
    • 第三个参数为插入元素,可选项
    • 若传入参数个数等于第二个参数,则为替换,如传入参数小于索引个数则为删除
    • 若传入参数个数大于第二个参数,则删除再插入
var arr=new Array('元素0','元素1','元素2','元素3','元素4','元素5');
        document.write(arr+'</br>')
        var arr1=arr.splice(1,2,'元素A','元素B')
        document.write(arr+'</br>')
        document.write(typeof arr1+'</br>')
  1. 切取数组的一段元素 slice:
    1. 切取部分作为新数组返回,不会对原数组改变。
    2. 第一参数为起始位置索引
    3. 第二参数为结束位置索引,不包括第二个参数 ,注意区分splice
    4. 若省略第二个参数则直接切取到结尾
    <script>
        var arr=new Array('元素0','元素1','元素2','元素3','元素4','元素5','元素6');
        document.write(arr+'</br>')
        var arr1=arr.slice(1,4)
        document.write(arr+'</br>')
        document.write(arr1+'</br>')
    </script>

附一个圣诞树代码

    <script>
        //     *
        //    ***
        //   *****
        //  *******
        // *********
     //   ***********
        var h=30;
        for(var i=1;i<=h-1;i++){
            for(var j=h;j>=i;j--){
                document.write("&nbsp;")
            }
            for(var n=1;n<=2*i-1;n++){
                    document.write("<span style='color: green'>*</span>")
            }
            document.write('<br>')
        }
        var h=30;
        for(var i=1;i<=h-1;i++){
            for(var j=h;j>=i;j--){
                document.write("&nbsp;")
            }
            for(var n=1;n<=2*i-1;n++){
                    document.write("<span style='color: green'>*</span>")
            }
            document.write('<br>')
        }
            var h=30;
        for(var i=1;i<=h-1;i++){
            for(var j=15;j>=0;j--){
                document.write("&nbsp;")
            }
            for(var n=1;n<=h;n++){
                    document.write("<span style='color: green'>*</span>")
            }
            document.write('<br>')
        }
    </script>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-08-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 数组元素的基本操作
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档