VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • js 数组

一、数组的声明:

复制代码
1 /* 声明数组 */
2 var arr1 = [];//数组字面量;
3 var arr2 = new Array();//通过系统内置的Array构造函数声明数组,一般不使用
4 var arr3 = Array();//可以创建数组,一般不使用
5 console.log(arr1.__proto__);
6 console.log(arr2.__proto__);
7 console.log(arr3.__proto__); //Array
8 //所有的对象都继承于 Array.prototype
复制代码

 对比与对象的声明:

复制代码
1 /* 对象 */
2 var obj1 = {};//字面量声明对象;
3 var obj2 = new Object();//
4 var obj3 = Object();//
5 console.log(obj1.__proto__);
6 console.log(obj2.__proto__);
7 console.log(obj3.__proto__);//Object
8 //所有的对象都继承于 Object.prototype
复制代码

对比 对象的访问

复制代码
 1 var array = [1,2,3,4,5];
 2 //index 数组元素的下标(索引值)
 3 var object = {
 4         0:1,
 5         1:2,
 6         2:3,
 7         3:4,
 8         4:5
 9         
10 }
11 console.log(array[2],object[2])
//查找 2 的下标;
var indexNum = array.indexOf(2);//>=0表示存在,=-1表示不存在,这里返回的是1

复制代码

这里 array[2] 和 object[2]的结果是一样的;这里可不可以说,数组也是一种对象呢?数组也继承了 Object.prototype;

回到顶部

二、数组的访问 增 改 查:

复制代码
 1  /* 数组访问 */
 2  //读:
 3  var arr = [1,2,3,4,5]
 4  console.log(arr[5]);//undefined ;这里的undefi 和 empty 的区别就是,empty是元素
 5 //相当于:
 6 var obj = {
 7          0:1,
 8          1:2,
 9          2:3,
10          3:4
11  }
12 console.log(obj[4])
13 
14 //写:
15 arr[4] = "a";
16 //
17  arr[0] = "b";
复制代码

数组的其他()方法;

1.在数组的前面添加数据 使用 unshift(在原数组上更改);

2.在数组的后面添加数据 使用 push(在原数组上更改);

复制代码
1 /* 方法 push unshift 
2 *    继承于 Array 原型上的 push unshift方法
3 */
4 var arr = [2,3,4]
5 console.log(arr.push(5,6));//5,返回值是 执行push后的新的数组的长度
6 console.log(arr)//2,3,4,5,6
7 console.log(arr.unshift(0,1));//在数组前面,添加 0,1, 结果为7
8 console.log(arr);//0,1,2,3,4,5,6
复制代码

数组的 除方法 (以下代码 是接着上面代码的,即第5行的 arr 是 上面 增方法的 变量):

1.删除数组首位数据 使用 shift(在原数组上更改);;

2.删除数组末尾数据  使用pop(在原数组上更改);;

复制代码
1 /* pop 和 shift 
2  * 
3  */
4  
5  arr.pop()// 返回数组的末位 值 
6  console.log(arr);//0,1,2,3,4,5
7  arr.shift()// 0 返回数组的首位 值 
8  console.log(arr);//1,2,3,4,5
复制代码

数组的 修改方法 :

splice(在原数组上更改); 和 sclice (在原数组上更改);容易混淆;大家可以把这两段代码放入浏览器 console 里面运行一下,看结果;

复制代码
 1 /**
 2  *splice
 3  * arr.splice(开始位置,剪切长度,剪切的最后一位添加数据)
 4  */
 5  
 6  var arr = ["a","b","c"];
 7  arr.splice(1,2);
 8  console.log(arr);//a
 9  
10  var arr = ["a","b","c"];
11  arr.splice(1,1,1,2,3);
12  console.log(arr);
13  arr.splice(-1,0,"d");
14  console.log(arr);
复制代码
复制代码
 1  /* slice:剪切获取值的区间为 [start,end)
 2  splice  arr.splice(开始位置,剪切长度,剪切的最后一位添加数据); 剪切掉的的区间为:[开始位置,剪切长度]
 3  
 4  */
 5  var arr = ["a","b",'c',"d","e","f"];
 6  var arr1 = arr.slice();//slice(a,b);区间为 [start,end)
 7  console.log(arr1);//复制原数组
 8  var arr2 = arr.slice(1);//["b",'c',"d","e","f"];下标为1到结尾;
 9  var arr3 = arr.slice(-3,5);
10  var arr4 = arr.slice(-3,-2);
11  var arr5 = arr.slice(1,5);
12  console.log(arr3);
13  console.log(arr4);
14  console.log(arr5);
复制代码

解析:上面的splice的代码段:第一console.log 的结果是 a;原因就是 :

["a","b","c"];
          
(start) 1  2  2(end)
如上示意,开始位置是a[1],长度是2,剪切是闭区间剪切 即剪掉 a[1],a[2];所以结果就是 ['a'];
 同理 var arr = ["a","b","c"]; arr.splice(1,1,1,2,3);这个的结果呢?
["a","b","c"]
    ↑^(insert)1,2,3
   (start)1(end)

如上示意,开始位置是 a[1], 剪切掉长度为 1为 ,剪切区间为闭区间,即剪掉的是 a[1] ; 在减掉的最后一位插入数据的数据 1,2,3;即 a[1] = 1;  a[2] = 2;  a[3] = 3;   所以最后的结果是

['a',1,2,3,"c"];

同理arr.splice(-1,0,"d");  console.log(arr);的结果呢?

这里需要搞清楚 起始位置是a[-1] ;-1,即倒着数,a[0]是首位, a[-1]即末位; 0,即剪切的长度为0,插入数据为 'd',即 在a[-1]的位置插入 ‘d’,结果为:['a',1,2,3,'d',"c"];

解析:下面的sclice的代码段:

 

sclice是对原数组的一个操作他返回的是截取数组的长度;这里解释一个 var arr3 = arr.slice(-3,5); console.log(arr3);截取的位置是 a[-3] 到 a[5]; 即a[-3] = d 到 a[5] = f,截取区间为闭区间,所以截取的结果是:
["d","e"];
数组查询:
1.查询数组元素在数组中的位置;
1 var arr = [1,2,3];
2 console.log(arr.indexOf(1));//0
3 console.log(arr.indexOf(2));//1
4 console.log(arr.indexOf(3));//2
5 console.log(arr.indexOf(4));//-1

	

2.查询特定的JSON数组

复制代码
 1 var arr = [
 2   {"name":"apple", "count": 2},
 3   {"name":"orange", "count": 5},
 4   {"name":"pear", "count": 3},
 5   {"name":"orange", "count": 16},
 6 ];
 7    
 8 var newArr = arr.filter(function(p){
 9   return p.name === "orange";
10 });
11  
12 console.log(newArr);
复制代码

结果:

0: {name: "orange", count: 5}

1: {name: "orange", count: 16}

length: 2

回到顶部

三、数组的排序

1.sort方法排序

复制代码
 1 /* sort
 2  sort 默认是按照 ASCII排序的;
 3  */
 4  var arr = [-1,-5,8,2];
 5  arr.sort();
 6  console.log(arr);//对应实际的ASCII排序,
 7  
 8  var arr = ["b","z","h","i","a"]
 9  arr.sort();
10  console.log(arr);
11  
12  var arr = [27,49,5,7];
13  arr.sort();
14  console.log(arr);//这里排序失效了,原因是 他还是按照ascii 排序了;
15  //自定义排序  1.参数 必须是两个;
16  //      2.必须有返回值  若负值,a 在前 ,正数,b在前,0 :保持不动
17  arr.sort(function(a,b){
18     return a-b;
19  })
20  console.log(arr);//正序排列
21  
22  //随机排序
23  var arr = [1,2,3,4,5,6] 
24  arr.sort(function(a,b){
25      var rand = Math.random();//产生 (0,1)开区间的数据
26      /* if(rand -0.5>0){
27          return 1;
28      }else{
29          return -1
30      } */
31      return rand-0.5;
32  })
33  console.log(arr);
34  
35  var arr = [
36      {son:"joy",age:18},
37      {son:"ben",age:13},
38      {son:"lucy",age:15},
39      {son:"jenny",age:20},
40      {son:"jone",age:12},
41      {son:"leo",age:1}
42      ]
43  arr.sort(function(a,b){
44      if(a.age>b.age){
45          return 1;
46      }else{
47          return -1
48      }
49  })
50  
51  console.log(arr);
52  
53  
54  var arr = ["12345","1","111"];
55  arr.sort(function(a,b){
56      if(a.length>b.length){
57          return 1
58      }else{
59          return -1;
60      }
61  })
62  console.log(arr);
复制代码

2.数组倒叙:reverse

1 var arr = [1,2,3,4]
2 console.log(arr.reverse())//[4, 3, 2, 1]
回到顶部

四 其他方法

1.合并两个数组 concat

1  /* concat 合并两个数组 */
2 var arr1 = ["a","b",'c'];
3 var arr2 = ["d","e","f"];
4 var arr3 = arr1.concat(arr2);
5 console.log(arr3);

2.joint ,split

复制代码
1  /* join() 参数就是函数的分隔符
2      split() 第一个参数, 分割的符号,第二个参数是 得到数组长度;
3  */
4  var arr = ["a","b",'c',"d","e","f"];
5  var str1 = arr.join();//数组变字符串,str1 = "a,b,c,d,e,f"
6  var str2 = arr.toString();//"str2 = a,b,c,d,e,f"
7  var str3 = arr.join("-");////数组变字符串 并且以 '-'连接 str3 = "a-b-c-d-e-f"
8  var arr1 = str3.split("-");//arr1 = ["a","b",'c',"d","e","f"];
9  console.log(str1,str2,str3,arr1);
复制代码
回到顶部

五、扩展方法

1.数组去重

复制代码
 1 //数组去重
 2  var arr = [0,0,2,1,"a","a","b","b"];
 3  Array.prototype.unique = function(){
 4      var temp = {};
 5      newArr = [];
 6      for(var i=0;i<this.length;i++){
 7          if(!temp.hasOwnProperty(this[i])){
 8              temp[this[i]] = this[i];
 9              newArr.push(this[i])
10          }
11      }
12      return newArr;
13  }
14  var obj = {
15          name :'123',
16          name:"123"
17  }
18  console.log(obj);//只打印出一个属性来
19  console.log(arr.unique());
20  
21  //字符串去重
22  var str = "11122222222222223333";
23  String.prototype.unique = function(){
24      var temp = {};
25      var newStr = "";
26      for(var i = 0;i<this.length;i++){
27          if(!temp.hasOwnProperty(this[i])){
28              temp[this[i]] = this[i];
29              newStr += this[i] 
30          }
31      }
32      return newStr;
33  }
34  console.log(str.unique());
复制代码

2.类数组

复制代码
 1 //类数组 原型对应是 Object,有下标值,有length属性,需要挂push,则挂,有splice
 2 function test(){
 3     //arguments.push(7);报错
 4     console.log(arguments)
 5 }
 6 test(1,2,3,4,5);
 7 var obj = {
 8         "0":1,
 9         "1":2,
10         "2":3,
11         "3":4,
12         "4":5,
13         "length":5,
14         "push":Array.prototype.push,
15         "splice":Array.prototype.splice//可以变成数组的样式
16 }
17 obj.push(7)
18 console.log(obj);
19 
20 
21 //push原理
22 Array.prototype.push=function(elem){
23     this[this.length] = elem;
24     this.length++;
25 }
26 //阿里面试题
27 var obj1 = {
28         "2":3,
29         "3":4,
30         "length":2,
31         "push":Array.prototype.push,
32         "splice":Array.prototype.splice//可以变成数组的样式
33 }
34 obj1.push(1);
35 obj1.push(2);
36 console.log(obj1)
37 
38 var person = {
39     "0":"张小一",
40     "1":"张小二",
41     "2":"张小三",
42     "name":"张三",
43     "age":5,
44     "weight":140,
45     "height":180,
46     "length":3,
47     "push":Array.prototype.push,
48     "splice":Array.prototype.splice//可以变成数组的样式
49 }
50 /* Object.prototype.push = Array.prototype.push;
51 Object.prototype.splice = Array.prototype.splice; */
52 console.log(person);
53 console.log(person.length)
复制代码
回到顶部

 六、数组对象的过滤

1.filter:返回符合条件的数据

  • 过滤符合条件的项,返回一个数组
1 let arr1 = [1,2,3,4]
2 let arr2 = arr1.filter(function(item){return item>1})
3 console.log(arr1, 'arr1') // [1,2,3,4] arr1
4 console.log(arr2, 'arr2') // [3] arr2

2.find:返回符合条件的一个值

  • 查找符合条件的项,只要符合就返回这个值 ,不会返回后面的值;array.find(function(currentValue, index, arr),thisValue)  
1 let arr1 = [1,2,3,4]
2 let arr2 = arr1.find(item=>item>1)
3 console.log(arr1, 'arr1') // [1,2,3,4] arr1
4 console.log(arr2, 'arr2') // 2arr2

 等同于

1 var arr1 = [1,2,3,4]
2  var arr2 = arr1.find(function(currentValue, index, arr){
3    return currentValue>1
4  })
5  console.log(arr1, 'arr1');// [1,2,3,4] arr1
6 console.log(arr2, 'arr2');//2arr2

 

3.some:返回布尔

  • 查找符合条件的项,只要符合一个,就返回true,不会往后查找
1 let arr1 = [1,2,3,4]
2 let arr2 = arr1.some(item=>item>1)
3 console.log(arr1, 'arr1') // [1,2,3,4] arr1
4 console.log(arr2, 'arr2') // true arr2

 

 

回到顶部

 其他:

1.字符串数组 转 int数组

['1','2','3'].map(Number) // [1,2,3]

 

 




 

我从来不相信什么懒洋洋的自由。我向往的自由是通过勤奋和努力实现的更广阔的人生。 我要做一个自由又自律的人,靠势必实现的决心认真地活着。

来源:https://www.cnblogs.com/lixiuming521125/p/11154743.html

相关教程