day-9.6 JS自带的API（数组相关）
数组和字符串的区别：
数组可以通过下标，对指定下标数据进行重新赋值，字符串不可以；
数组可以通过修改length修改数组的数据，字符串不可以；
数组是引用数据类型：
1 var a = [1,2,3,4,5]; 2 a.test = "test"; 3 console.log(a.test); //test; 4 a = [] ;//这不是清空数组，而是改变引用，将原来引用到[1,2,3,4,5]的指针修改成引用到 [] ； 5 console.log(a.test); //undefined; 6 a.length = 0 ;//这个才是清空；
API1：push、pop
push、pop修改原数组的值；
push:从数组的后面添加一个值；一次可以塞多个值，逗号隔开就可以了；
1 var a = [1,3,"ab",4,6]; 2 a.push(8); 3 console.log(a);//输出结果中会看到6后面多了一个8 ；
pop:从数组后面删除一个值；删除一次只能删除一个；pop是有返回值的，会返回被删除的数据；
1 var a = [1,3,"hehe"]; 2 a.pop(); 3 console.log(a);//输出结果没有hehe
API2：数组.unshift();数组.shift() ;跟push和pop一样，是从前面增加和删除数据；shift()返回被删除的数据；
1 var a = [1,3,"hehe"]; 2 a.unshift(44); 3 console.log(a);//输出 44,1,3，"hehe"的数组, 4 a.shift(); 5 console.log(a);//输出1,3，"hehe"的数组，44被删除；
API3：数组.splice() ，数组增删改操作；删除制定制定下标的数据；第一个参数，从第几位开始，第二个参数：删除几个，第三个参数，用什么来代替；修改原值；
splice(start,0,data) ；便是从第几位开始，插入数据；
splice(start,个数,"")；data为空时，代表删除数组中指定位置后面指定个数的数据；
需要注意的是，参数start 为所在下标数据的前面
比如 [0,2,3,4,5];如果要在3后面加一个数据，start应该是3而不是2；
1 var arr = [1,2,"haha",4]; 2 arr.splice(1,2,333); //从下标1开始，删除2个，替换成333，原来4个数据的，2个换1个，只剩3个数据； 3 console.log(arr);//输出[1,333,4]的数组
API4：数组.indexOf()；不修改原数组，返回指定数据（参数）所在数组的位置；
1 var oB = {"hobby":"knockCode"}; 2 var arr = [1,2,3,4,oB,5,3]; 3 var index = arr.indexOf (oB) ;//直接用{"hobby":"knockCode"}朝赵的话会返回-1（查找不到），因为对象数据类型，直接用数据是无法比对的，只能用变量里存的引用连接去比对，所以这里需要为变量名；
就算是全是引用数据类型的常量对象直接对比，返回的值也是-1
1 <script> 2 var oB = {"hobby":"knockCode"}, 3 arr = [1,2,3,4,{"hobby":"knockCode"},5,3], 4 index = arr.indexOf ({"hobby":"knockCode"}) ; 5 console.log(index); // 输出-1 6 </script>
API4：数组.sort()；冒泡排序；排序一般对应都是数字类型的数组，字符类型的数字排序是根据字符对应的UTF-8数字序号去排序的，没有意义；
sort();排序函数的原理是：比如，从小到大排序，他会先最[0]、[1]这2个数据的对比，通过相减得到的差，重新排序，然后接着判断[1],[2] ，同样的判断做完后，接着往下判断[2][3]，
当return >0 调换位置， = 0 不调换位置 ，<0时 不调换位置；依次递增相减判断，最终完成冒泡排序；
1 var arr = [3,4,5,6,9,7,8]; 2 arr.sort(function(a,b){ 3 return a - b ; //从小大大，如果return b - a （即从大到小）; 4 }) 5 console.log(arr) ; //输出3,4,5,6,7,8,9
API4：数组.reserve()；反转数组；通过该方法去将数组反转； 修改arr的值；同时返回修改后的数组；
1 var arr = [3,4,5,6,9,1,2]; 2 arr.reverse ; 3 console.log(arr) ;//数组被反转；
API5，数组.concat();数组拼接；
1 var arr1 = [1,2,3], 2 arr2 = [4,5,6], 3 arr3 = [7,8]; 4 var n = arr1.contat(arr2,arr3); //arr1,arr2,arr3,按顺序拼接，谁在前面谁放前面，不改变原数组的值； 5 console.log(n); //输出1,2,3,4,5,6,7,8
ES6的数组拼接新写法
1 var arr1 = [1,2,3], 2 arr2 = [4,5], 3 n = [...arr1,...arr2]; //ES6的新写法 4 console.log(n); //输出1,2,3,4,5的新数组；
API6，数组.slice(start,end);数组切割；从第几位开始，到第几位结束；
1 var arr = [1,2,3]; 2 var n = arr.slice(1,3); 3 console.log(n);//输出2,3
数组和伪数组的区别；
伪数组只是有某些数组的特性，而不是真正的数组，
1 var oDiv = document.getElementsByTagName("div"), 2 arr = [3,4,5,6,9,1,2]; 3 console.dir(oDiv); //输出伪数组，数据类型：__proto__:HTMLCollection 4 console.dir(arr);//输出数组，数据类型：__proto__:Array
上述的API继承自Array这个大类，而伪数组不属于这个类，强行调用当成API去执行的话，会类似于执行一个值为undefined的属性，则会报错；
有时候某些需求需要对伪数组进行数组API的操作，要实现这些需求，就要把伪数组转换成数组；
实现的基本方法：
1 <body> 2 <div id="wrap"> 3 <div class="box"></div> 4 <div class="box"></div> 5 <div class="box"></div> 6 <div class="box"></div> 7 </div> 8 <script> 9 var aDiv = document.getElementsByTagName("div"), 10 nArr = []; 11 for(var i = 0;i<oDiv.length;i++){ 12 //nArr[i]= aDiv[i]; 这个也可以 13 nArr.push(aDiv[i]); 14 } 15 console.log(aDiv); //输出伪数组； 16 console.log(nArr);//输出数组； 17 </script> 18 <body>
骚操作：
1 var nArr= [].slice.call[aDiv,0]; //直接这一句代码就可以完成转换，由于aDiv不是数组，没有slice方法，所以在利用一个空数组去调用slice方法，
再通过call将执行指向oDiv，绕了一个湾，让oDiv可以执行slice方法，第二个参数是开始的下标；通过切割实现伪数组到数组的转换； 2 console.log(nArr);
再nArr下面如果有代码导致整个document增加一个div的时候，aDiv数据总量会增加，而nArr不会再增加。
这也是我们需要做转换的原因，某些实现需求受限于元素获取函数生成的伪数组是动态获取，当div总数增加时，伪数组总数也增加，影响效果，所以这个时候就需要转换成数组；
API7：Array.isArray(数组);判断是不是数组；
1 var nArr = [1,2,3,4]; 2 console.log(Array.isArray (nArr)); //输出ture;
浙公网安备 33010602011771号