博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS对象和数组
阅读量:6976 次
发布时间:2019-06-27

本文共 3296 字,大约阅读时间需要 10 分钟。

一  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)) //结果

   <script>

    var fruit=new Array('苹果','葡萄','香蕉','桔子','桃子','石榴');
    fruit.join('-')
    document.write(fruit.join('+++')+'</br>')
  </script>

 
  1. 数组逆序reverse:颠倒数组元素的顺序;返回值为逆序后的新数组。
  2. 数组排序 sort:
    • 语法 数组名.sort(sortfunction)
    • sortfunction若省略,默认为从按照ASII字符顺序进行升序排列
    • sortfunction必须返回:正值、零、负值三者之一。正值表示第一个值大于第二个值,负值反之,零则相等。
  3. 扩充数组 concat:将多个数组的元素合并为一个新的数组。
arrayObject.concat(arrayX,arrayX,......,arrayX)        arrayX为必选参数
//reverse代码    //sort代码        var fruit=[7,10,32,6,9,4]        document.write(fruit+'
') fruit.sort(sortFun) document.write(fruit+'
') function sortFun(ar1,ar2){ if(ar1>ar2){ return -1;//返回-1表示逆序,如果返回1,表示正序 }else if(ar1
') document.write(fruit1+'
') document.write(fruit2+'
') //var fruit=fruit1.concat(fruit2) var fruit=fruit1.concat('1个石榴') document.write('合并后的新数组:'+'
') document.write(fruit+'
')

 

 
  1. splice方法:删除、替换、插入元素
  • 会更改原数组
  • 第一参数为起始位置索引
  • 第二参数为切取元素个数
  • 第三个参数为插入元素,可选项
  • 若传入参数个数等于第二个参数,则为替换,如传入参数小于索引个数则为删除
  • 若传入参数个数大于第二个参数,则删除再插入
var arr=new Array('元素0','元素1','元素2','元素3','元素4','元素5');        document.write(arr+'
') var arr1=arr.splice(1,2,'元素A','元素B') document.write(arr+'
') document.write(typeof arr1+'
')

 

  1. 切取数组的一段元素 slice:
  1. 切取部分作为新数组返回,不会对原数组改变。
  2. 第一参数为起始位置索引
  3. 第二参数为结束位置索引,不包括第二个参数 ,注意区分splice
  4. 若省略第二个参数则直接切取到结尾

 

附一个圣诞树代码

 

转载于:https://www.cnblogs.com/qianqian-it/p/9533664.html

你可能感兴趣的文章
CentOS7安装配置redis-3.0.0
查看>>
SQL server 专业词汇
查看>>
Selenium2+python自动化25-js处理日历控件(修改readonly属性)
查看>>
ArcGIS制图之Sub Points点抽稀
查看>>
[高中作文赏析]假如真的有时光隧道
查看>>
selenium+python自动化81-html报告优化(饼图+失败重跑+兼容python2&3)
查看>>
thinkphp pathinfo nginx 无法加载模块:Index
查看>>
如何用 Graylog 管理日志?- 每天5分钟玩转 Docker 容器技术(93)
查看>>
单例模式
查看>>
iOS多线程编程之NSOperation和NSOperationQueue的使用
查看>>
SAP QM 'QM System' 有什么控制作用?
查看>>
Health Check in eShop -- 解析微软微服务架构Demo(五)
查看>>
项目沟通管理计划
查看>>
[20160608]自治事务引起死锁.txt
查看>>
AliGenie AR Fuels the Ali New Retail Strategy - Interactive Marketing Activities
查看>>
一个最简单的通过WireShark破解SSL加密网络数据包的方法
查看>>
教你用TensorFlow和自编码器模型生成手写数字(附代码)
查看>>
荣之联“云桥OneBridge”让IT运维事半功倍
查看>>
中国人工智能学会通讯——人工智能在各医学亚专科的发展现状及趋势 1.3 人工智能在各医学亚专科的发展态势...
查看>>
新技术、新思维开创公共安全管理新模式
查看>>