js基础总结03 --操作数组

修改于 2019-11-10

1 length:长度

<script>
 var arr = [1,2,3,4,5,6,7,8];
    console.log(arr.length);//arr.length = 8;
    arr.length = 5;//给定数组长度;
    console.log(arr);//arr = [1,2,3,4,5];
    delete arr[2];//删除arr[2],数组长度不变;
    console.log(arr);//arr = [1, 2, empty, 4, 5];
    console.log(typeof(arr[2]));//undefined;
    console.log(arr.length);
</script>

2 pop,push:方法，把数组相当于一个栈

push(x):向数组尾部压入x，并返回新数组的长度

pop():从尾部弹出一个元素，并返回弹出的元素

  <script>
    var arr = [1,2,3,4,5];
    var number = arr.push(7);//arr.push(9) 相当于 arr[arr.length] = 7;
    console.log(arr);//arr = [1,2,3,4,5,7]
    console.log(number);//6
    var num = arr.pop();
    console.log(arr);// arr = [1,2,3,4,5]
    console.log(num);//7
  </script>

3 unshift 和 shift 方法，把数组相当于一个队列

unshift(x):向数组头部插入x,并返回数组长度

shift():从头部弹出一个元素，并返回弹出的元素

  <script>
    var arr = [1,2,3,4,5];
    var number = arr.unshift(9);
    console.log(arr);// arr = [9,1,2,3,4,5];
    console.log(number);// 6
    var num = arr.shift();
    console.log(arr);// arr = [1,2,3,4,5];
    console.log(num);//9
  </script>

4 slice 和 splice 方法

slice(x,y):返回数组[x,y),索引位置的片段，左从0开始，右从-1开始，不影响原数组

splice(x,y,[.....]):x:删除的起始位置，y删除的个数（没有y的话，删除起始点开始所有），[...]为要插入数组的所有参数;splice方法改变原数组

 <script>
    var arr = [1,2,3,4,5];
    console.log(arr.slice(1,3));//[2, 3]
    console.log(arr);// [1,2,3,4,5]
    console.log(arr.slice(1));//[2, 3, 4, 5]
    console.log(arr.length);//5
    console.log(arr.slice(0,-1));//[1, 2, 3, 4]
    var arr1 = [1,2,3,4,5,6];
    console.log(arr1.splice(1,2));//[2, 3]
    console.log(arr1);//[1, 4, 5, 6]
    console.log(arr1.splice(0));//[1, 4, 5, 6]
    console.log(arr1);//[]
    arr1 = [1,6]
    console.log(arr1.splice(0,1,1,2,3,'4','5'));//[1]
    console.log(arr1);//[1, 2, 3, "4", "5", 6]
  </script>

5 join 方法，把数组变为一个字符串（用指定分割符划分）//相反于string.split()方法，它把字符串变为数组

join("x"):将一个数组用x分割符生成一个字符串，join()默认分割符为","，不改变原数组；

<script>
    var arr = [1,2,3,4,5];
    console.log(arr.join());//1,2,3,4,5
    console.log(typeof(arr.join()));//string
    console.log(arr.join("-"));//1-2-3-4-5
    console.log(arr.join(""));//12345
    console.log(arr);//[1,2,3,4,5]
</script>

6 sort 和 reverse 方法

reverse():在原数组操作，并把元素颠倒，改变原数组

sort(x):不传x：对原数组按字母表顺序排列，undefined排在最后；传x:x一般为一个比较函数，用比较函数的返回值来判定排序，改变原数组

<script>
    var arr = [1,3,2,4,5];
    console.log(arr.reverse());//[5, 4, 2, 3, 1]
    console.log(arr);//改变原数组,arr = [5, 4, 2, 3, 1]
    var arr1 = [4,3,2,undefined,1];
    console.log(arr1.sort());//[1, 2, 3, 4, undefined]
    console.log(arr1);//arr = [1, 2, 3, 4, undefined]
    var arr2 = [11,13,12];
    function flag(a,b){return a-b};//function(a,b);a为i+1,b为i;当要比较的时候，从中间开始比较
    console.log(arr2.sort(flag));//逆序排列，arr2 = [13, 12, 11];
</script>

 7 concat 方法

arr.concat(x): 将数组arr中的元素和参数x进行连接并返回连接后的数组，不会影响原先的arr数组

  <script>
    var arr = [1,2,3,4,5];
    console.log(arr.concat(1,'2',3,[4,5],[6,[7,8]]));//[1,2,3,4,5,1,'2',3,4,5,6,[7,8]]
    console.log(arr);//[1,2,3,4,5]
  </script>

8 Array.from()方法

将类数组和可遍历的对象变成真正的数组

  <script>
    var oLi = document.querySelectorAll('li');
    console.log(typeof(oLi));//object
    console.log(Array.from(oLi));//Array(3) [ li, li, li ]
  </script>

9 ...rest参数的逆运算，将数组变成参数列

console.log(...[1,2,3,4]); //1 2 3 4

10 find()和findIndex()

查找值或位置，参数为一个判断函数

  <script>
    var arr =new Array(1,2,3,4,5,6);
    console.log(arr.find((i) => { return i==2}))//2
    console.log(arr.findIndex((i) => { return i==2}))//1
  </script>

11 entries() , keys() ,values()对数组返回名字相对应的可遍历对象

  <script>
    var arr =new Array(1,2,3,4,5,6); 
    console.log([...arr.entries()]);//键值对Array(6) [ (2) […], (2) […], (2) […], (2) […], (2) […], (2) […] ]
    console.log([...arr.keys()]);//键 Array(6) [ 0, 1, 2, 3, 4, 5 ]
    console.log([...arr.values()]);//值 Array(6) [ 1, 2, 3, 4, 5, 6 ]
 </script>

12 for in 和 for of

  <script>
    var arr =new Array(1,2,3,4,5,6); 
    for(i in arr){//遍历键
      console.log(i);
    }//0,1,2,3,4,5
    for(i of arr){//遍历值
      console.log(i);
    }//1,2,3,4,5,6
  </script>

13 forEach(function(item,index,array)) 遍历处理函数

  <script>
    var arr =new Array(1,2,3,4,5,6); 
    arr.forEach((i) => {console.log(i)});//1,2,3,4,5,6
  </script>