js操作Array的push、pop、shift、unshift

少了努力，只有杂草会生长。——戈登·比特纳·欣克利

• .push() 接受把一个或多个参数，并把它“推”入到数组的末尾。
• .pop()移除数组末尾的元素并返回这个元素。
• .shift()移出数组中的第一项，并返回该移出的元素。
• .unshift() 移入一个元素到数组的头部。
• .splice() 移除数组内随意位置任意数量的连续的元素，并返回被删除的这些元素的数组。
• . slice() 拷贝数组里的项目。
• ES6的...展开运算符复制数组。
• indexOf() 检查元素是否在数组中，相匹配则返回元素所在数组的index值，匹配不到则返回-1。
• concat() 意思是将元素连接到尾部。在一个数组调用concat 方法，另一个数组的元素会被添加到第一个数组的结尾，并返回拼接后的新数组，该方法不会改变原来的数组。（注：同样适用于字符串）

.push()

var array = [1,2,3];
array.push(4);
// 此时array的值为[1,2,3,4]
array.push(5,['cat','dog']);
// 此时array的值为[1,2,3,4,5,['cat','dog']]

. pop()

var array = [1,2,3];
var num =array.pop();
//此时array为[1,2],num为3

. shift()

var array = [1,2,3];
var num =array. shift();
//此时array为[2,3],num为1

. unshift()

var array = [2,3];
array. unshift(1);
//此时array为[1,2,3]

.splice()

它主要有3个参数，但目前我们先关注前2个参数来学习：

参数	描述
index	必需，移除元素的起始位置，表示你要从该位置移除元素
howmany	必需，移除元素的数量，如果为0，则不会移除元素
item1, ..., itemX	可选，向数组添加新的元素

返回值

参数	描述
Array	包含被删除项目的新数组，如果有的话。

tips:splice()是对数组进行直接修改！！！

实例：

let array = ["baby","boy","eat","apple","men","women"];
array.splice(2,2);//从数组第3个元素开始，删除2个元素
//现在array为["baby","boy","men","women"]

返回删除元素的新数组

let array = ["baby","boy","eat","apple","men","women"];
let newArray = array.splice(2,2);//从数组第3个元素开始，删除2个元素
//newArray为["eat","apple"]

splice()里的第3个参数

splice 的第3个参数，给数组添加一个或多个元素。

下面代码的含义是删掉数组中头两个，然后在index为0，添加'DarkSalmon','BlanchedAlmond'两个元素，并返回该数组：

function htmlColorNames(arr) {
  arr.splice(0,2,'DarkSalmon','BlanchedAlmond')
  return arr;
} 
console.log(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']));
//打印结果：DarkSalmon,BlanchedAlmond,LavenderBlush,PaleTurqoise,FireBrick

. slice()

.slice() 从数组里拷贝项目，并返回这些项目的一个新数组，它不会更改原来数组的项目，它有两个参数：

参数	描述
start	(必填)开始拷贝元素的位置（索引）
end	(可选)结束拷贝元素的位置（不包括本身），如果不指定该参数，那么就会拷贝从start到数组结尾的所有元素

let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];

let todaysWeather = weatherConditions.slice(1, 3);
// todaysWeather 等于 ['snow', 'sleet'];
// weatherConditions 仍然等于 ['rain', 'snow', 'sleet', 'hail', 'clear']

不填可选参数：

let forecast = ['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms'];
let todayForecast = forecast.slice(4);
//todayForecast 等于['cool', 'thunderstorms']

... 展开运算符复制数组

1. ES6中提供了更加强大又简单的展开运算符，它能让我们轻松的复制一个数组，它的语法是这样的：...

例子：

let thisArray = [true, true, undefined, false, null];
let thatArray = [...thisArray];
// thatArray 等于 [true, true, undefined, false, null]
// thisArray 保持不变

2. 扩展运算符还有更便利之处就是合并数组，在数组里插入某个数组里的元素，简单几句代码就能解决传统操作多个数组的繁琐场景。

let thisArray = ['sage', 'rosemary', 'parsley', 'thyme'];

let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];
// thatArray 现在等于 ['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']

indexOf()

indexOf() 接受一个你想检验的项目是否存在于数组中，如跟数组内众多项目中的一个相匹配则返回它所在的index，匹配不到则返回-1:

let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];

fruits.indexOf('dates') // 返回 -1
fruits.indexOf('oranges') // 返回 2
fruits.indexOf('pears') // 返回 1， 'pears' 元素在数组中的索引为 1

下面这个例子利用indexOf(),过滤去掉包含elem的数组，返回新的数组：

function filteredArray(arr, elem) {
  let newArr = [];
  for(let i = 0; i < arr.length; i++){
    if(arr[i].indexOf(elem) == -1){
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

console.log(filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18));
//打印[ [10, 8, 3], [14, 6, 23] ]

concat()

concat用来拼接两个数组，不会改变原始数组。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2);

// 返回新数组newArr 为 [1, 2, 3, 4, 5, 6]。
//arr1仍为[1, 2, 3]，arr2仍为[4, 5, 6]。