1.push()和pop()

数组尾部操作方法

push():方法可向数组的末尾添加一个或多个元素,并返回新的长度。

pop():方法用于删除并返回数组的最后一个元素。

代码演示:

<script>
  let arr = [1, 2, 3, 4];
  //push
  let newArr1 = arr.push(5, 'last');
  console.log(arr); //[1,2,3,4,5,'last'];
  console.log(newArr1); // 6
  //pop
  let newArr2 = arr.pop();
  console.log(arr); //[1,2,3,4,"5"];
  console.log(newArr2); // last	
</script>

2.shift() 和 unshift()

数组头部操作方法

shift():方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

unshift():方法可向数组的开头添加一个或更多元素,并返回新的长度。

代码演示:

<script>
  let arr = [1, 2, 3, 4];
  //shift
  let newArr1 = arr.shift();
  console.log(arr); // [2, 3, 4]
  console.log(newArr1); // 1
  //unshift
  let newArr2 = arr.unshift("first");
  console.log(arr); // ["first", 2, 3, 4]
  console.log(newArr2); // 4
</script>

3.splice(index , howmany , item1,.....,itemX)

功能比较多,该方法会改变原始数组

splice() 方法可以用来新增,删除,更改数组,返回被删除的项目

index:必需。整数,规定添加/删除项目的索引值,使用负数可从数组结尾处规定位置。

howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, ..., itemX:可选。向数组添加的新项目。

代码演示:

<script>
  let arr = ["张三", "李四", "王五", "赵六", "周七"];

  /**************删除"李四"****************/
  let newArr1 = arr.splice(1, 1); // 下标从1开始,删除1个(李四)
  console.log(newArr1);  // ["李四"] 
  console.log(arr);  // ["张三", "王五", "赵六", "周七"] (原数组改变)

  //删除多个
  let newArr2 = arr.splice(1, 2);
  console.log(newArr2);  //  ["王五", "赵六"] 
  console.log(arr);  // ["张三", "周七"]

  /**************添加"新一"****************/
  let newArr3 = arr.splice(1, 0, "新一");
  console.log(newArr3);  // [] (没有删除元素,所以返回的是空数组)
  console.log(arr);  // ["张三", "新一", "周七"]

  //添加多个
  let newArr4 = arr.splice(3, 0, "新二", "新三", "新四");
  console.log(newArr4);  // []
  console.log(arr);  // ["张三", "新一", "周七", "新二", "新三", "新四"]

  /**************"新五"替换"张三"****************/
  let arrReplace5 = arr.splice(0, 1, "新五");
  console.log(arrReplace5);  // ["张三"]
  console.log(arr);  // ["新五", "新一", "周七", "新二", "新三", "新四"]

  //替换多个
  let arrReplace6 = arr.splice(2, 3, "替换");
  console.log(arrReplace6);  // ["周七", "新二", "新三"]
  console.log(arr);  // ["新五", "新一", "替换", "新四"]
</script>

仔细观看代码,寻找其中规律

 

4.join() 

数组转字符串,方法只接收一个参数:即默认为逗号分隔符()。

一个数组使用次方法,不会改变原来的数组

<script>
  let arr = [1, 2, 3, 4];
  console.log(arr.join()); //1,2,3,4
  console.log(arr.join(":")); //1:2:3:4
  console.log(arr); //[1,2,3,4],原数组不变
</script>

5.sort()

对数组的元素进行排序。默认是按照字符编码的顺序进行排序,并改变原数组。

代码演示:

<script>
  let arr= [5, 20, 40, 100];
  console.log(arr.sort()); // [100, 20, 40, 5]
  console.log(arr); // [5, 20, 40, 100] (原数组改变)	
</script>

如果想要按照数组的大小升序或者降序排列,需要在sort()中传入一个函数,函数格式如下:

<script>
    let arr = [5, 20, 40, 100];
    arr.sort(function (a, b) {
      return a - b   // a- b 从小到大排列,b - a 则从大到小排列
    })
    console.log(arr); // [5,20,40,100] (原数组改变)
  </script>

6.reverse()

reverse() 用于颠倒数组中元素的顺序 (原数组会改变)

代码如下:

<script>
    let arr = [1, 2, 3, 4];
    arr.reverse()
    console.log(arr); // [4,3,2,1] (原数组改变)
</script>

7.concat()

concat() 方法用于连接两个或多个数组

代码如下:

<script>
    let arr1 = [1, 2, 3, 4];
    let arr2 = [5, 6, 7, 8]
    let newArr = arr1.concat(arr2)
    console.log(newArr); // [1,2,3,4,5,6,7,8]
  </script>

 

8.slice(start , end)

start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

end:可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

返回值:返回一个新的数组,包含从 start 到 end (不包括该元素)的 arr 中的元素。

<script>
    let arr = [1, 4, 6, 8, 12];
    let arrCopy1 = arr.slice(1);
    let arrCopy2 = arr.slice(0, 4);
    let arrCopy3 = arr.slice(1, -2);
    let arrCopy4 = arr.slice(-5, 4);
    let arrCopy5 = arr.slice(-4, -1)
    console.log(arrCopy1);  // [4, 6, 8, 12]
    console.log(arrCopy2);  // [1, 4, 6, 8] 
    console.log(arrCopy3);  // [4, 6] 
    console.log(arrCopy4);  // [1, 4, 6, 8]
    console.log(arrCopy5);  // [4, 6, 8]
    console.log(arr);  // [1, 4, 6, 8, 12] (原数组未改变) 
  </script>

 

9.indexOf()和 lastIndexOf() 

两个方法都返回要查找的项在数组中首次出现的位置,在没找到的情况下返回-1

① arr.indexOf(item,start) (从数组的开头(位置 0)开始向后查找)

item: 必须。查找的元素。

start:可选的整数参数。规定在数组中开始检索的位置。如省略该参数,则将从array[0]开始检索。

② lastIndexOf(item,start) (从数组的末尾开始向前查找)

item: 必须。查找的元素。

start:可选的整数参数。规定在数组中开始检索的位置。如省略该参数,则将从 array[array.length-1]开始检索。
 

<script>
    let arr = [1, 2, 3, 4, 5, 3, 8, 2];
    console.log(arr.indexOf(2));        // 1
    console.log(arr.lastIndexOf(2));    // 7
    console.log(arr.indexOf(2, 5));      // 7
    console.log(arr.lastIndexOf(2, 3));  // 1
    console.log(arr.indexOf(7));        // -1		
  </script>