JS基础-数组

一、数组的创建

1. Array构造函数创建数组，关键词new

var arr=new Array();//arr=[] var arr=new Array(10);
//数组长度为10 var arr=new Array（10，20，30，40）；
//arr=[10,20,30,40]

2. 字面量创建

var arr=[10,20, ,40] // []里面是存入的数据

3. Object.creat()创建

var arr=Object.creat(new Array())
 //arr=[] var arr=Object.creat(new Array(10,20,30)) //arr=[10,20,30]

二、读

格式: 数组[索引]，索引从0开始计算

length是数组对象的只读属性，表示对象的长度

var arr=['a','b','c','d']; 
console.log(arr[2]); 
// console.log(arr.length); //4

三、遍历数组元素： for

var arr=[1,2,3,4];
for (var i=0;i<arr.length;i++){ 
    console.log(`arr[${i}]=${arr[i]}`) 
}
 //arr[0]=1 //arr[1]=2 //arr[2]=3 //arr[3]=4

四、 数组的长度可变性

var arr=[1,2];//长度为2的数组arr arr[4]=0; 
for (var i=0;i<arr.length;i++){
 console.log(`arr[${i}]=${arr[i]}`) 
} 
console.log(arr.length) 
//5 
//arr[0]=1 
//arr[1]=2 
//arr[2]=undefined
//arr[3]=undefined 
//arr[4]=0 
//直接添加arr[4]，那么长度会变为5，但是arr[2],arr[3]都是未定义的
//arr[3]=undefined

五、在数组末尾添加数据的技巧方法

var arr=[1,2];
//长度为2的数组arr arr[arr.length]=3; 
//arr[2]=3 就是在下标为3的地方添加一个元素 arr[arr.length]=4; 
//arr[3]=4 在下标为3的地方添加一个元素 console.log(arr);
//[1, 2, 3, 4]
//利用索引和长度差1的特性

六、数组方法：

1、普通的数组方法

var arr=[1,2,3,4]
//1、:push(添加的元素):在数组的最后面添加一个元素 返回新数组的长度 arr.push(5);
console.log(arr)//[1, 2, 3, 4, 5]
//2、unshift(添加的元素); 在数组的最前面添加一个元素 返回新数组的长度
arr.unshift(0);
console.log(arr)；//[0, 1, 2, 3, 4, 5] 
//3、pop（）；删除数组最后一个元素 返回删除的元素 
arr.pop();
console.log(arr);//[0, 1, 2, 3, 4] 
//4、shift（）；删除数组第一个元素 返回删除的元素 
arr.shift();
console.log(arr);//[1, 2, 3, 4] 
//5、slice(起始下标，结束下标(不包含)) 截取数组的一部分并返回一个新数组 
var arr=[1,2,3,4,5,6];
console.log(arr.slice(1,3))// [2, 3]
//6、splice（起始下标(包含此下标的位置)，删除长度）删除中间指定的数据，删除之后数组 
//长度会发生改变，如果使用delete删除数组的某一项内容，数组长度不会变。 
arr.splice(0,2);
console.log(arr);//[3, 4] 
//7、替换数据：splice（起始下标(包含此下标的位置)，删除长度，替换的新数据） 
arr.splice(0,1,4);
console.log(arr);//[4, 4]
//8、插入数据：splice(起始下标(包含此下标的位置)，删除长度(设为0)，插入的新数据) 
arr.splice(0,0,2);console.log(arr);//[2, 4, 4] 
//9、reverse() ：翻转数组 
arr.reverse();
console.log(arr);//[4,4,2]
//10、join（指定字符）:在数组每一项中间添加指定字符将数组串联起来，返回的是字符串 arr.join('');
console.log(arr);//244 
//11、concat() :合并数组 
var arr1='hello';
var arr2='world'; 
console.log(arr1.concat(arr2));//helloworld
//12*、sort（）；从小到大的排列字符串数组 
arr=['world','he','hello','你好','我不好','你好吗']; 
console.log(arr.sort()) 
// ["he", "hello", "world", "你好", "你好吗", "我不好"]
//比较字符串时，用第一个字母比较，如果第一个字母相同，则用第二个字母比较
//如果需要比较数字数组的大小，则需要使用回调函数自定义排序规则 
var nums =[3,100,1,2,4,200]; 
nums.sort(function(a,b){ return a-b;//升序 }); 
console.log(nums)//[1,2,3,4,100,200]

2、参数为函数的数组方法

1）、数组排序方法sort()详解：

arr.sort([compareFunction])

针对数组内的元素如果为字符串，则排序是正常的，如果数组元素是数字，排序则不是我们想要的结果；

如果想要对数字数组进行排序，则需要添加一个比较函数来自定义排序的方式：

compareFunction 函数中接受两个参数,并有返回值

sort内部的原理参照冒泡排序，比较函数接收的两个参数，相比较，根据返回值来决定是否交换两个参数的位置。

var nums =[3,100,1,2,4,200]; 
//升序 
nums.sort(function(a,b){ return a-b; }); 
console.log(nums)//[1,2,3,4,100,200]
//降序
nums.sort(function(a,b){ return b-a; });
console.log(nums) //[200,100,4,3,2,1]

如果要针对对象内部的属性进行排序，我们需要改进这个compareFunction 函数，方便更灵活的针对某个属性进行排序：

var stu=[ {name:'张三',age:20,score:50},
 {name:'张四',age:30,score:20}, 
{name:'李四',age:15,score:45} ] //定义比较函数 
function compare(temp){
   return function(a,b){ 
    // 升序 
    if(a[temp]>b[temp]){ 
    // 如果是单纯排列数字，可以return a[temp]-b[temp] return 1; 
     }
     if(a[temp]<b[temp]){
         return -1;
     } //相等的时候返回0 return 0;
  }
} 
stu.sort(compare('score'));
//按照分数进行升序排列 stu.sort(compare('age'));
//按照年龄升序排列 console.log(stu)

2）迭代器方法

这些方法的参数都是函数，除了自身的附带作用，在传入的函数中可以进行相关的逻辑处理。

1、不生成新数组 的迭代器方法（运行之后不会产生一个新数组）

(1) forEach(不带返回值自定义函数) ：对数组中的每一项运行这个没有返回值的自定义函数，使用效果与for循环类似。

var arr=[3,4,7,9]; 
//给forEach方法传递一个匿名函数，这个函数可以拥有三个形参 
//第一个形参 value：接收数组的每一项元素 //第二个形参 key ：接收数组的下标 
//第三个形参 array： 接收这整个数组arr
 arr.forEach(function (value,key,array){
 console.log(value); 
// 3 4 7 9 console.log(key); 
// 0 1 2 3 console.log(array) //[3, 4, 7, 9] 
//我们可以对内部的数据进行处理之后输出显示 console.log(value*value) // 9 16 49 81
})

(2) reduce()将数组元素计算为一个值

语法：arr.reduce(function(init,当前元素，当前元素下标，本数组),初始值)

init为初始值，由后面传入，如果传入了初始值，那么当前元素为数组第一项，如果没有给定初始值，则默认把数组第一项作为初始值，当前元素为第二项。第二项为数组的每一个元素；

第一项除了表示初始值之外，前一次函数执行的返回值会传递给第一项。

reduce()的返回值为一个值

arr=[2,6,4,7,9,9,3,2,1];
let result=arr.reduce(function(a,b,index,arr){ 
//a:初始值 以及前一次函数的返回值 
//b:当前元素，给定初始值的情况：b为第一项，没给定初始值的情况：b为第二项 
//index：当前元素的下标 
//arr：本数组 return a+b;
//将两个数的结果返回给下一次的a 实现累加 
},0) 
console.log(result) //43

(3) every(返回值为布尔值的自定义函数)：对数组中的每一项运行带返回值为布尔值的自定义函数；every()方法执行完成之后会有一个返回值，如果自定义函数对数组的每一项运行之后都返回true，则最终结果返回true，但凡有一项为false，最终结果都是false。 类似于逻辑关系“ 与 ”

var arr=[3,5,7,8,9]; 
//判断arr数组中的元素是否都是奇数
 var result=arr.every(function (item,index,array){ 
//第一个形参 item ：接收数组的每一项元素
//第二个形参 index ：接收数组的下标 
//第三个形参 array： 接收这整个数组arr 
if(item%2==1){ 
    console.log(item+'是奇数') 
    return true; 
  }else{ 
    console.log(item+'不是奇数') 
    return false; 
  }
 }) 
//运行结果 //3是奇数 //5是奇数 //7是奇数 //8不是奇数 
/*false 我们可以看到，在every方法的内部，自定义函数对数组的每一项都进行处理 如果处理结果为true，则继续处理下一项，当出现false之后，直接结束， 不会再处理后面的项，并且直接返回false */
console.log(result) 
//false console.log(item+'是奇数')

（4）some(返回值为布尔值的自定义函数)：对数组的每一项都执行传入的这个返回值为布尔值的自定义参数，some（）方法和every方法类似，在执行结束之后会有一个返回值，这个返回值取决于自定义函数对数组每一项运行之后的返回值，如果每一项都返回false，则最终为false，但凡有一项为true，结果都为true ，跟逻辑关系 “ 或 ” 类似。

var arr=[3,5,7,8,10]; 
//判断arr数组中的元素是否包含偶数 var result=arr.some(function (item,index,array){ //第一个形参 item ：接收数组的每一项元素 
//第二个形参 index ：接收数组的下标 
//第三个形参 array： 接收这整个数组arr 
if(item%2==1){ 
console.log(item+'是奇数')
 return false; 
} 
if(item%2==0){
 console.log(item+'是偶数') 
return true; } 
}) 
//运行结果 //3是奇数 //5是奇数 //7是奇数 
/*8是偶数 我们可以看到，在some方法的内部，自定义函数对数组的每一项都进行处理 如果返回结果为false，会继续执行下一项，当出现返回true时，直接结束 不再判断后面的元素，最终结果为true */
console.log(result) //true

2、生成新数组的迭代器方法（运行之后会产生一个新的数组）

（1）map(返回值的自定义函数) ：对数组的每一项都执行这个自定义函数，map方法执行完之后，会把自定义函数处理之后的返回值，放入新数组中。

var arr=[1,2,3,4,5,6,7]; 
//把这个数组的奇数全部乘以2 
var result=arr.map(function (item,index,array){ 
//第一个形参 item ：接收数组的每一项元素 
//第二个形参 index ：接收数组的下标 
//第三个形参 array： 接收这整个数组arr 
   if(item%2==1){
     return item*2; 
   }else if(item%2==0){
     return item; 
   }
})
 console.log(result) 
//运行结果 
/*[2, 2, 6, 4, 10, 6, 14] 可以看到result是map方法执行之后产生的新数组 
result数组的元素是自定义函数对元素组的每一项处理之后的返回值*/

（2）filter(返回值为布尔值的自定义函数）：对数组的每一项都执行这个返回值为布尔值的自定义函数，与every 和some 方法不同的是，他不会因为返回值而停止执行，而是对数组的每一个元素都执行，执行时，如果自定义函数处理结果为true，则把这个元素放入新数组中，如果处理结果为false，则不放入。

var arr=['hello',2,'小明',4,'world','study',7];
 //把这个数组的字符串全部过滤出来
 var result=arr.filter(function (item,index,array){ 
//第一个形参 item ：接收数组的每一项元素 
//第二个形参 index ：接收数组的下标 
//第三个形参 array： 接收这整个数组arr 
    if(typeof item=='string'){
     return true; 
    }else{
    return false; 
    } 
})
 console.log(result)
//运行结果
/*["hello", "小明", "world", "study"] 可以看到，
filter函数将自定义函数处理之后返回结果为true的元素 全部放入了新的数组中*/

3、判断是否为数组的方法

var num=1; 
console.log(typeof num);
//number 
var str=''; 
console.log(typeof str) //string var arr=[]; 
console.log(typeof arr) //object var obj={};
console.log(typeof(obj)) //object 
/*因为数组是引用类型变量，是特殊的对象，所以我们对一个数组使用typeof 来判断类型的时候，我们会得到object，那么怎么判断arr究竟是一个数组还是一个对象呢？ 
我们可以使用数组自带的方法： Array.isArray(需要判断的数组) */
console.log(Array.isArray(arr)); //true arr是一个数组 console.log(Array.isArray(obj)); //false obj不是一个数组

四、类数组

利用对象的键为number类型时的访问特性，创建一个类似于数组的访问方式的对象。

var obj={ 1:'朱', 2:18 }
//我们知道如果对象的键是数字时,我们将不能使用对象.变量的方式访问 
// console.log(obj.1) //会报错
console.log(obj['1']) //朱 
console.log(obj[1]) //朱

可以看出，当对象的键位number类型的时候，我们可以使用obj[ num] 来访问值。所以我们可以这样去定义一个对象（类数组）。这样就可以像访问数组一样去访问对象的元素。

 var obj = {
      0: 'apple',
      1: 'orange',
      2: 'pear',
      3: 'banner',
     //定义一个获得这个类数组的长度的函数
     get length() {
         var i = 0;
         for (var key in this) {
            i++;
         }
         return i - 1;
         // return Object.keys(this).length-1
         //Object.keys(this)将this这个对象的键全部提取出来放入一个数组中
         // Object.keys(this).length 等于5  会把这个getter函数也算进去
      }
  }
console.log(obj[1],obj[2])  //orange pear
console.log(obj.length) //4
var arr = ['apple', 'orange', 'pear', 'banner'];
console.log(arr[1],arr[2])  //orange pear
console.log(arr.length) //4