原生JS--数组的基础方法

数组的基础方法

添加删除

1. push()

向数组中尾部增加元素，增加的元素为数组参数，返回增加元素后的数组的长度，原数组发生改变

2. pop()

从数组的尾部删除一个元素，返回删除的元素，不接收参数，原数组发生改变

3. unshift()

向数组中头部增加元素，增加的元素为数组参数，返回增加元素后的数组的长度，原数组发生改变

4. shift()

从数组的头部删除一个元素，返回删除的元素，不接收参数，原数组发生改变

截取类的方法

1. slice()

当参数为1个时，返回从该参数表示的索引位开始截取，直至数组结束 。有两个参数时，第一个表示起始位，第2个表示结束位，但是不包含第二个参数对应那个元素//原数组不改变

2. splice()

第1个参数表示 截取的起始位 ，第2参数表示截取的长度，3个及以上表示从截取的位置开始添加的数组元素//原数组发生改变

排序

1. reverse()

翻转	//原数组发生改变 

2. sort()

排序 数字排序比大小方式和字符串差不多，字母按首字母顺序	//原数组发生改变 

3. join()

将数组转换成字符串,以参数进行拼接    //原数组不改变    

4. concat()

数组的合并  //原数组不改变 

ES5新增数组方法

1. indexOf(item)

返回item在数组arr中的索引值,无就返回-1

2. forEach(callback)

遍历数组中的每个元素，可得到每一项的值和索引值
返回值：undefined.

3. map(callback)

和forEach类似，可有运算之后的返回数组

4. filter(callback(element[, index[, array]])[, thisArg])

过滤出满足条件的数组元素，返回数组

参数：

callback
用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
element
数组中当前正在处理的元素。
index可选
正在处理的元素在数组中的索引。
array可选
调用了 filter 的数组本身。
thisArg可选
执行 callback 时，用于 this 的值。

返回值：

一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

5. some()

返回布尔值，只要有一个满足，就返回true

6. every()

返回布尔值，所有的都满足，才返回true

7. reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

对数组中的所有元素调用指定的回调函数。该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。

参数：

callback
执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：
accumulator
累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。
currentValue
数组中正在处理的元素。
index 可选
数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。
array可选
调用reduce()的数组
initialValue可选
作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

返回值：

函数累计处理的结果

8. findIndex(callback[, thisArg])

方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

9. find(callback[, thisArg])

方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

ES6数组扩展

1. Array.from()

将伪数组对象或可遍历对象转换为真数组

2. Array.of()

将一系列值转换成数组

常用的数组方法 forEach循环 map循环 filter过滤 find查找

1、forEach()----遍历数组全部元素，利用回调函数对数组进行操作

    forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。适用于循环次数未知，或者计算循环次数比较麻烦情况下使用效率更高，但是更为复杂的一些循环还是需要用到for循环效率更高。类似于军人接受检阅，但是检阅结束并不会返回任何东西，也不会改变原数组

注意: forEach() 对于空数组是不会执行回调函数的。

let arr = [1,2,3,4,5]

arr[].forEach(function(value,index,array){

　　//do something

})

a参数：value数组中的当前项, index当前项的索引, array原始数组；

b数组中有几项，那么传递进去的匿名回调函数就需要执行几次；

c理论上这个方法是没有返回值的，仅仅是遍历数组中的每一项，不对原来数组进行修改；但是可以自己通过数组的索引来修改原来的数组；

arr.forEach(item => {

console.log(item)

})// 1 2 3 4 5

2、map()----更新数组 创建新数组 不改变原数组

有返回值，可以return 出来。比如说去超市买东西，你拿了一个物品清单，然后服务员帮你拿好东西，返回给你一个物品的新数组，但是对清单原数组不发生改变

arr[].map(function(value,index,array){

　　//do something

　　return XXX

})

参数：value数组中的当前项,index当前项的索引,array原始数组；

let goodsList = ['水蜜桃','酸奶','辣条']

let goods = goodsList.map(item => {

    // do something

    console.log(item) // 水蜜桃 酸奶 辣条

})

3、filter()----filter为“过滤”。数组filter后，返回过滤后的新数组

理解：让男生排队身高高于180的就归入到新数组中，最后返回一个里面装着所有180+的男生的数组，不改变原数组(根据某个条件查询数据时可以用，比如说后台管理系统的表格查询)

案例1假定有一个对象数组A,获取数组中指定类型的对象放到B数组中
var products = [
    {name:"cucumber",type:"vegetable"},
    {name:"banana",type:"fruit"},
    {name:"celery",type:"vegetable"},
    {name:"orange",type:"fruit"}
  ]; 
  var filtered = products.filter((product)=>{
    return product.type === "vegetable";
  })
  console.log(filtered) 
   //[{name:"cucumber",type:"vegetable"},        
  {name:"celery",type:"vegetable"}]

4. find()----在数组中找到符合要求的对象

和filter的区别就是找到符合要求的对象就停止寻找了，返回的是一个对象，而filter返回的是所有符合要求的对象组成的新数组

案例1假定有一个对象数组(A),找到符合条件的对象

var users = [
    {name:"Jill",id:1},
    {name:"Alex",id:2},
    {name:"Bill",id:3},
    {name:"Alex",id:4}
   ];
   user = users.find(function(user){
    return user.name === "Alex";
  })
 console.log(user); //{name: "Alex", id: 2}

5.reduce()----常用于叠加，可以代替forEach等

案例计算数组中所有值的总和

var numbers = [1,2,3,4,5];
   var sumValue = numbers.reduce(function(sum,number2){  //第一个参数为叠加总值，需要初始化，第二个参数是当前项
    return sum + number2;
  },0);    //sum的初始化
  console.log(sumValue);   //15

引申： findIndex和find的区分

findIndex(callback[, thisArg])
方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

find(callback[, thisArg])
方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。