专栏首页web前端-JS对象和数组

JS对象和数组

一  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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Jquery的属性操作和DOM操作

           3 val()    :     获取或设置表单内容    (原生JS使用value)

    用户3159471
  • HTML基础知识

      属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

    用户3159471
  • css3动画效果

    transform:2D变形: 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法:translate()/rotate()/sca...

    用户3159471
  • Javascript设置广告和时间表和数组的学习

    1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title></title> 5 </hea...

    别先生
  • js中改变原数组的方法和不改变原有数组的方法

    concat() join() slice()数组元素截取(开始位置,结束为止)

    用户4344670
  • 关于HTML5的各种选择器

    用户1437675
  • 这些Web API真的有用吗?别问,问就是有用

    本文列举了一些列比较不常见的Web API,内容较多,所以有关兼容性的内容在本文不会出现,大家可以自己去查阅。以下案例能配动图的我尽量去配了,以免内容枯草乏味,...

    用户1462769
  • 你可能不知道的 21 个 Web API

    本文列举了一些列比较不常见的Web API,内容较多,所以有关兼容性的内容在本文不会出现,大家可以自己去查阅。以下案例能配动图的我尽量去配了,以免内容枯草乏味,...

    桃翁
  • 【机器学习】--贝叶斯网络

    当多个特征属性之间存在着某种相关关系的时候,使用朴素贝叶斯算法就没法解决这类问题,那么贝叶斯网络就是解决这类应用场景的一个非常好的算法。一般而言,贝叶斯网络的有...

    LhWorld哥陪你聊算法
  • LeetCode 1085. 最小元素各数位之和

    Michael阿明

扫码关注云+社区

领取腾讯云代金券