读javascript高级程序设计07-引用类型、Object、Array

简介:

一、引用类型

ECMAScript是支持面向对象的,可以通过引用类型描述一类对象所具有的属性和方法。

创建对象实例的方法时是用new 操作符加构造函数:var p=new Person()。

二、Object类型

1.创建Object实例两种方式:

使用new操作符跟Object构造函数。

var o = new Object();
o.name = 'dami';
o.age = 25;

使用对象字面量表示法,推荐这种方式,代码量小而且看上去有封装的感觉。

var o = {
  name: 'dami',
  age: 25
}

如果对象字面量声明对象时,大括号中为空,那对象只包含默认的属性和方法。

var o={};等同于var o=new Object();

对象字面量还适用于向函数传递大量可选参数。

复制代码
function showResult(args){
  var result='the result:';
  if(typeof args.name=="string"){
  result+=" my name is "+args.name;
  }
  if(typeof args.age=="number"){
  result+=" my age is "+args.age;
  }
  console.log(result);
}
showResult({});//the result:
showResult({name:"Peter"});//the result: my name is Peter
showResult({name:"Kate",age:28});//the result: my name is Kate my age is 28
复制代码

对象字面量的属性名可以加引号,也可以不加引号。但是如果属性名是关键字或者包含特殊符号,则必须加引号。

复制代码
var o = {
  name: 'dami',
  age: 25,
  "data-id":35
}
复制代码

2.读取属性

  • 点表示法:o.name;
  • 方括号表示法:o["age"];

但是如果属性名是关键字或者包含特殊符号,则必须使用方括号表示法:o["data-id"];

二、Array类型

ECMAScript中的数组元素可以是多种数据类型,而且长度是可以动态调整的。

1.创建数组对象

①使用构造函数Array().

var array=new Array('a','b','c');//["a", "b", "c"];

注意当参数是一个值时,如果参数是数值类型,则创建相应长度的数组;如果参数是其他类型,则创建的数组长度是1。

var array=new Array(5);//[undefined, undefined, undefined, undefined, undefined]
var array=new Array('5');//["5"]

2.检测数组对象--Array.isArray()

var array=[1,3,5];
Array.isArray(array);//true

3.转换方法

  • toString():返回由数组中的每个元素用逗号分隔而成的字符串;
  • valueOf():返回的仍然是数组;
  • join():方法有一个参数,将该参数作为分隔符,返回包含所有数组元素的字符串。如果参数为空,则默认用逗号分隔。
复制代码
var array=[1,3,5];
array.toString();//"1,3,5"
array.valueOf();//[1, 3, 5]
array.join();//"1,3,5"
array.join('|');//"1|3|5
复制代码

4.栈和队列

栈是一种LIFO后进先出的数据结构,只在顶部做插入和删除操作。

  • push():将元素压入数组。可以接收多个参数,将他们逐个添加的数组末尾,并返回修改后的数组长度;
  • pop():将元素弹出。弹出数组的末尾项,减少数组长度length,并且返回移除项的值。
复制代码
var array=[1,3,5];
var count=array.push(8,9,10);
console.log(count);//6
var item=array.pop();
console.log(item);//10
console.log(array.length);//5
复制代码

队列是一种FIFO先进先出的数据结构,在列表末尾添加项,在列表开头移除项。

  • push():向末尾添加项,和栈相同;
  • shift():在列表开头移除项,减少数组length值,并返回移除项的值。
复制代码
var array=[1,3,5];
var count=array.push(8,9,10);
console.log(count);//6
var item=array.shift();
console.log(item);//10
console.log(array);// [3, 5, 8, 9, 10]
复制代码

5. 重排序:

  • reverse():反转数组元素的顺序。
  • sort():对数组元素进行排序。sort方法排序方式要注意,是先对数组元素调用toString()方法得到字符串,然后根据字符串进行排序。

sort()方法还可以接受一个函数名作为参数,以便指定排序的规则。

复制代码
var array=[1,5,9,3,10,7];
array.reverse();//[7, 10, 3, 9, 5, 1]
array.sort();//[1, 10, 3, 5, 7, 9]
function compare(a,b){
  if(a==b){
  return 0;
  }else if(a>b){
  return 1;
  }else{
  return -1;
  }
}
array.sort(compare);//[1, 3, 5, 7, 9, 10]
复制代码

6.操作方法

concat():连接数组元素。先创建数组的副本,然后将元素追加到数组结尾,最后返回新数组。

  • 如果参数为空,则直接复制数组;
  • 如果参数是一个元素,则直接将其追加到数组末尾;
  • 如果参数也是数组,则将该数组元素追加到副本末尾。
var array=[1,3,5];
array.concat();//[1, 3, 5]
array.concat(88);//[1, 3, 5, 88]
array.concat('a',[[4,99],'b']);//[1, 3, 5, "a", [4, 99], "b"]

slice():取得数组分片。

  • 当传入两个参数时,分别表示数组的开头和结尾位置的索引,但是返回的分组包含开始项但不包含结尾项。
  • 当传入一个参数时,该参数标识起始位置索引,返回的分组是从该开始位置一直到数组结尾。
  • 当传入参数为负数时,从数组结尾开始计数,最后一个元素为-1.
复制代码
var array=[1,2,3,4,5,6,7,8,9,10];
array.slice(2);//[3, 4, 5, 6, 7, 8, 9, 10]
array.slice(5,8);//[6, 7, 8]
array.slice();//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
array.slice(-3,-1);//[8, 9]
复制代码

splice():向数组中插入项。通过传入不同参数可以实现多个操作:

  • 删除:传入两个参数,第一个参数是要删除的起始位置,第二个参数是要删除的长度。
  • 插入:第一个参数是要插入的位置索引,第二个参数是0,从第三个参数起是要插入的元素项。
  • 替换:第一个参数是要替换的起始位置,第二个参数是要被替换的长度,第三个参数起是要替换的新的元素项。
复制代码
var array=[1,2,3,4,5,6,7,8,9,10];
//删除
var removed=array.splice(1,2);
removed;//[2,3]
array;//[1, 4, 5, 6, 7, 8, 9, 10]
//插入
array.splice(1,0,88,88,88);
array;//[1, 88, 88, 88, 4, 5, 6, 7, 8, 9, 10]
//替换
array.splice(1,3,2,3);
array;//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
复制代码

7.迭代方法

every(fn):对数组中的每个元素执行方法,如果每一项都返回true,则结果为true。

var array=[1,2,3,4,5,6,7,8,9,10];
var result=array.every(function(item,index,array){
return item>2;
});//false


some(fn):对数组中的每个元素执行方法,如果至少有一项返回true,则结果为true。

result=array.some(function(item,index,array){
return item>2;
});//true


filter(fn):对数组中的每个元素执行方法,返回该函数执行结果为true的元素组成的数组。

result=array.filter(function(item,index,array){
return item>2;
});//[3, 4, 5, 6, 7, 8, 9, 10]


map(fn):对数组中的每个元素执行方法,返回每一项的执行结果组成的数组。

result=array.map(function(item,index,array){

return item*2;
});//[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

说明:这些迭代方法都不会改变原数组中的元素。




    本文转自 陈敬(Cathy) 博客园博客,原文链接:http://www.cnblogs.com/janes/p/3868268.html,如需转载请自行联系原作者

相关文章
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
存储 JavaScript 前端开发
全网最全情景,深入浅出解析JavaScript数组去重:数值与引用类型的全面攻略
如果是基础类型数组,优先选择 Set。 对于引用类型数组,根据需求选择 Map 或 JSON.stringify()。 其余情况根据实际需求进行混合调用,就能更好的实现数组去重。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
供应链 JavaScript 前端开发
通过array.every()实现数据验证、权限检查和一致性检查;js数组元素检查的方法,every()的使用详解,array.some与array.every的区别(附实际应用代码)
array.every()可以用来数据验证、权限检查、一致性检查等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
存储 JavaScript 前端开发
js的基础类型和引用类型
【10月更文挑战第29天】理解 JavaScript 中的基础类型和引用类型的区别对于正确地编写代码和理解程序的行为非常重要。在实际开发中,需要根据具体的需求合理地选择和使用不同的数据类型,以避免出现一些意想不到的错误和问题。同时,在处理引用类型数据时,要特别注意对象的引用关系,避免因共享引用而导致的数据不一致等问题。
|
JavaScript 前端开发 开发者

热门文章

最新文章