引用类型之Object和Array学习

心已赠人 2022-07-12 05:39 184阅读 0赞

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>引用类型</title>  
</head>  
<body>  
<script>  
/\*\*  
\* @ object类型  
\* 创建object 实例的两种方式  
\*/  
   
// 1.使用new操作符后跟object构造函数  
var person = new Object();  
person.name = 'kangkang';  
person.age = '23';  
  
// 2.使用对象字面量表示法 (目的在于简化创建包含大量属性的对象的过程)  
var animal = \{  
name = 'monkey',  
age = '22';  
\}  
  
/\*\*  
\* @ Array 类型  
\* 创建 数组的基本方式有两种  
\*/  
  
// 1.使用Array构造函数  (注: new关键字可以省略)  
var colors = new Array();  
var colors = new Array(20);  
var colors = new Array('green',true,1);  
   
//省略new 关键字  
var arry = Array();  
var arry = Array(20);  
var arry = Array('green',false,2);  
  
//2.使用数组字面量表示法  
var colors = \[\];  
var colors = \['red','green',false,1\];  
  
/\*\*  
\* js 中 Array的特点  
\* 1. ECMAScript 数组中的每一项可以保存任何类型的数据 如对象  字符串 数字等  
\* 2. ECMAscript 数组的length 属性不是只读的，因此通过设置这个属性，可以从数组的末尾移除项或者添加新项  
\*  如 var colors = \['red','green',false,1\]; 把 colors.length设置为3 ,则  数组colors\[4\]被移除了，colors\[4\]为undefined  
\*/  
  
//可以利用 length属性 在数组末尾添加新项 (数组的最后一项索引始终是 length-1)  
var colors = \['red','green','bleen'\];  
colors\[99\]='pink';  // colors数组的位置99 插入一个值，结果数组colors的长度由原来的3 变为100，而位置 3 到98实际上是不存在的，所以访问他们将返回undefined  
  
/\*\*  
\*typeof 与instanceof的区别  
\*   
\* 1:typeof方法返回一个字符串，来表示数据的类型,一般为 ‘string’，‘number’，‘bollean’，‘object’，‘function’，‘undefined’。  
\*  因此我们可以用typeof 与undefined比较判断某个变量是否存在。  
\* 2： instanceof 判断某个变量是不是某个对象的实例，返回值为 true或false  
\*   
\*/  
  
/\*\*  
\* 检测数组:判断某个对象是不是数组  
\*   
\* 方法1: constructor 属性: 这个属性是我们使用js系统或者自己创建对象的时候，会默认的加上。  
\* var arr = \[1,2,3\];  
\* arr.prototype.constructor = Array  ; 这一句代码是系统默认加上的。  
\* 所以我们可以来判断  
\*   var colors = \['green','pink'\];  
\* colors.prototype.constructor === Array;   // true  
\*   
\* 方法2: instanceof   
\* instanceof 检测对象的原型链是否指向够着函数的prototype对象，所以我们可以用它来判断  
\* var arr = \[1,2,3\];   
\* alert(arr instanceof Array);   // true  
\*   
\* indtance 操作符得问题在于 ，他假设只有一个执行环境。如果网页中存在多个框架，那么就存在这两个以上不同的全局执行环境，从而存在两个不同的Array构造函数  
\* 如果从一个框架向另外一个框架传入一个数组，那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同构造函数，为了解决这个问题ECMAScript创建新增了  
\* Array.isArray()方法。  
\*   
\* 方法3: Array.isArray(value);  试用的浏览器: IE9+,FireFox4+,chrome  
\*       value 为数组中的某一项值  
\*    
\*   
\* 终极解决方案：  
\* var arr = \[1,2,3\];   
\*   封装一个函数  
\* function isArrayFn(obj)\{  
\*       浏览器支持则使用isArray()方法  
\* if (typeof Array.isArray === "function") \{  
\* return Array.isArray(obj);   
\* 否则使用toString方法  
\* \}else\{                       
\* return Object.prototype.toString.call(obj) === "\[object Array\]";   
\* \}   
\* \}   
\* alert(isArrayFn(arr));// true  
\* \*/  
  
/\*\*  
\* 转换方法:  
\* toString(),toLocalString(),valueOf(): 所有对象都支持这3个方法，  
\* toString()方法返回对象的字符串表示，toLocalString()返回对象的本地字符串表示，valueOf()返回数对象的原始值。  
\*   
\* 例子：  
\* var array = new Array("niu","li","na");  
\* alert(array);  
\* console.log(array.valueOf());  
\* console.log(array.toString());  
\* console.log(array.toLocaleString());  
　　 \* 结果：  
  
由于alert()要接受字符串，所以他会在后台调用toString()方法，返回的结果与array.toString()方法结果一样。  
  
\* valueOf：返回数组本身  
    \*  
\* toString()：把数组转换为字符串，并返回结果，每一项以逗号分割。  
    \*  
\* toLocalString()：把数组转换为本地数组，并返回结果。  
\*   
\* 使用join()方法：使用不同的分隔符来创建字符串  
\*    jion()方法重现了toString()方法，再不加参数或者参数为undefined的，则使用逗号作为分隔符。  
\*   
\* var color = \['red','blue'\];  
\*    color.join();  
\* color.join(undefined);  
\* color.join(',');  
\*    结果: 这三个返回的结果相同,以逗号分割的字符串。  
\*   
\* \*\*/  
  
/\*\*  
\* s数组操作方法  
\*/  
  
//1.栈方法 (LIFO：last in first out): push(),pop()  （数组的后端添加，后端删除）  
 push() 方法 可以接受任意量参数,把他们逐个添加到数组末尾,并返回修改后数组的长度.  
 pop()  方法从数组的末尾移除最后一项,减少数组的length值,然后给返回移除项.  
   
 var color=\['yelloe'\];  
 color.push('red,pink');  
 alert(color);   //3  
   
 var arr=\[1,2,3\];  
 arr.pop(); //3  
   
//2.队列方法 (FIFO: first in first out)  
shift()方法:移除数组的第一项,并返回该项,同时数组的长度将减一.因此可以利用push方法和shift方法的结合实现,像使用队列一样使用数组.(数组后端添加,前端删除)  
unshift()方法:在数组的前端添加任意个项并返回新数组的长度.因此可以利用unshift方法和pop方法从相反的方向模拟队列(数组的前端添加项,后端删除项)  
  
//3.重排序方法: 数组中已经存在两个重排序的方法，reverse()和sort()  
  reverse():翻转数组的顺序  
  var array = \[1,2,3,4\];   
  array.reverse();  
  console.log(array); //5 , 4 ,3 ,2,1  
    
  sort():默认情况下,按升序排列数组项.sort()方法会调用每个数组项的toString()转型方法.然后比较得到的字符串.以确定如何排序.即使每一项都是数值,sort()方法比较的也是字符串.  
    
  例子:  
  var values=\[0,1,5,10,15\];  
  values.sort();  
  alert(values);   // 0,1,10,15,5  
    
  var a= '32';   var  b = '123';  
  alert(b > a);  // false;  
    
function compare (value1,value2)\{  
if(value1 < value2) \{  
return 1;  
\}else if(value1 > value2) \{  
return -1;  
\}else\{  
return 0;  
\}  
\}  
  
values.sort(compare);  
  
//4.操作方法 concat(),slice() 这两个方法不会影响到原数组  splice()  
concat(): 方法连接数组. 参数为一个到多个数组  或非数组的值.如果参数为数组,则将数组中的每一项添加到结果数组中,如果传递的值非数组,这些值会简单的添加到结果数组末尾.  
slice():获取原数组的子集. 接受一个或两个参数  
var  arr = \[1,2,3,4,5\];  
arr.slice(1); //\[2,3,4,5\]  
arr.slice(1,3);//\[3,4\]  
// 如果slice方法的参数为负数，则用数组的长度加上该数负数来判断位置，如果结束位置小于起始位置，则返回空数组。  
  
splice() 方法 (会改变原数组)  
1.删除 splice(0,2)删除数组的前两项     
2.插入 splice(2,0,'red','green') 只需传入3个参数     起始位置   0(删除项) 和要插入的项.如果要插入多项,则可以传入任意多个项.  
3.替换 splice(2,1,'pink','brown')  只需传入3个参数,起始位置,要删除的项数,要插入的任意数量项  
  
//5.位置方法  
indeOf(),lastIndexOf(),查找特定项在数组中的位置,第一个参数为要查找的项,第二个参数为查找的起始位置(可省)  
indexOf():从前查找  
lastIndexOf():从后查找  
  
//6.迭代方法  
ECMAScript5为数组定义了5个迭代方法  
1.every();    //对数组中的每一项运行给定的函数，如果该函数对每一项都返回true，则返回true。  
2.filter();  //对数组中的每一项运行给定函数，返回该函数会返回true的的项组成的数组。  
3.forEach(); //对数组中的每一项运行给定函数，没有返回值  
4.map();    //对数组中的每一项运行给定函数，返回每次调用的结果组成的数组。  
5.some();   //对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。  
  
var  numbers= \[1,2,3,4,5,6\];  
var everyResult= numbers.every(function(item,index,array)\{  
return (item > 2);  
\});  
var someResult=numbers.some(function()\{  
return (item > 2);  
\});  
  
alert(everyResult); // false  
alert(someResult)   // true  
  
var  filterResult= numbers.filterResult(function(item,index,array)\{  
alert(item > 2);  
\});  
  
alert(filterResult);  //\[3,4,5,6\]  
  
var mapResult= number.map(function(item,index,array)\{  
return (item\*2);  
\});  
  
alert(mapResult); //\[2,4,6,8,10,12\]  
  
// forEach本质上与for循环迭代数组一样  
numbers.forEach(function(item,index,array)\{  
//执行某些操作  
\});  
  
//7.归并方法   
ECMAScript提供了两个归并数组的方法,reduce()和reduceRight();这两个方法会迭代数组的所有项,然后构建一个最终的返回值.redue()方法从数组的第一项开始逐个遍历,而reduceRight()方法  
从数组的最后一项开始,向前遍历每一项.这两个方法都接受两个参数.给reduce()和reduceRight()的函数接收4 个参数：前一个值、当前值、项的索引和数组对象\{  
1.一个在每一项上调用的函数  
2.一个作为归并基础的初始值(可选)  
\}  
  
var values =\[1,2,3,4,5\];  
var some= valudes.reduce(function( prev,cur,index,array)\{  
return prev+cur;  
\});  
alert(some); //15  
</script>  
</body>  
</html>