常用ES6ES5的数组操作（循环遍历 查找 求和...）笔记

1、.forEach（）没有返回值，本质上等同于 for 循环，对每一项执行 function 函数

list.forEach((item,index) => {
   console.log(item);
    //处理数据
});

2、map（）不会改变原始数组,返回新数组（定义变量接受）

let urls = list.map(x => x.pics_big)

3、filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，不会改变原始数组。

 let selectItmes = this.list.filter((item) => item.checked);

4、find（）方法返回通过测试（函数内判断）的数组的第一个元素的值，当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数，

• 如果没有符合条件的元素返回 undefined
• find() 对于空数组，函数是不会执行的
•  find() 并没有改变数组的原始值

addToCart(state, goods) {
   // 根据提交的商品的Id，查询购物车中是否存在这件商品
   // 如果不存在，则 findResult 为 undefined；否则，为查找到的商品信息对象
   const findResult = state.cart.find(x => x.goods_id === goods.goods_id)

   if (!findResult) {
      // 如果购物车中没有这件商品，则直接 push
      state.cart.push(goods)
   } else {
      // 如果购物车中有这件商品，则只更新数量即可
      findResult.goods_count++
   }

   // 通过 commit 方法，调用 m_cart 命名空间下的 saveToStorage 方法
   this.commit('m_cart/saveToStorage')
}

5、findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置

• 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数
• 如果没有符合条件的元素返回 -1
• 对于空数组，函数是不会执行的，并没有改变数组的原始值

let list= [1,2,3]
list.findIndex(x=> x === 2);
//索引值1

6、some（）方法用于检测数组中的元素是否满足指定条件（函数提供）。

• 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
• 如果没有满足条件的元素，则返回false。
•  some() 不会对空数组进行检测。
•  some() 不会改变原始数组。

let arr = [1,2,3];
let tt = arr.some(i=>i>1)
// true

7、every（）方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。方法使用指定函数检测数组中的所有元素

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测
• 如果所有元素都满足条件，则返回 true。
• every() 不会对空数组进行检测。 every() 不会改变原始数组。

let arr = [1,2,3];
let tt = arr.every(i=>i>1)
// 检测数组中元素是否都大于1
// false

8、reduce（）方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值，reduce() 对于空数组是不会执行回调函数的。

// 勾选的商品的总数量
checkedCount(state) {
  // 先使用 filter 方法，从购物车中过滤器已勾选的商品
  // 再使用 reduce 方法，将已勾选的商品总数量进行累加
  // reduce() 的返回值就是已勾选的商品的总数量
  return state.cart.filter(x => x.goods_state).reduce((total, item) => total += item.goods_count, 0)
}

9、reduceRight()方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加

let arr = [1,2,3];
let ad = arr.reduceRight((i,j)=>i+j)
//3+2 2+1 
// 6

10、keys、values、entries方法

ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。

它们都返回一个遍历器对象，可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历

let fruits = ["Banana", "Orange", "Apple", "Mango"];
for (let [index, elem] of fruits.entries()) {
    console.log(index, elem);
}
0 "Banana"
1 "Orange"
2 "Apple"
3 "Mango"

for (let index of fruits.keys()) {
    console.log(index);
}
0
1
2
3

for (let elem of fruits.values()) {
    console.log(elem);
}
Banana
Orange
Apple
Mango

for in() - 跟map方法类似，遍历对象或者数组 但值得注意的是 for in 循环返回的值都是数据结构的键值名。遍历对象返回的对象的 key 值，遍历数组返回的数组的下标 (key)

// 对象
  const obj = {a: 123, b: 12, c: 2 };
  for (let a in obj) {
      console.log(a)
  }
  // a
     b
     c   
  //数组
  const arr = [3,4,4,5];
  for(let a in arr) {
      console.log(a)
  }
  // 0
     1
     2
     3

 

11、from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。如果对象是数组返回 true，否则返回 false。

// 保存搜索关键词为历史记录
saveSearchHistory() {
  const set = new Set(this.historyList)
  set.delete(this.kw)
  set.add(this.kw)
  this.historyList = Array.from(set)
  // 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
  uni.setStorageSync('kw', JSON.stringify(this.historyList))
}

12、includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

let site = ['runoob', 'google', 'taobao'];
 
site.includes('runoob'); 
// true 
 
site.includes('baidu'); 
// false

13、concat() 方法用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回一个新数组

let arr1 = [1, 2];
let arr2 = [3, 4, 5];
let arr3 = arr1.concat(arr2);//[1,2,3,4,5]
//ES6
let arr3=[...arr1,...arr2];//[1,2,3,4,5]

14、indexOf() 方法可返回数组中某个指定的元素位置。

let fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
let index = fruits.indexOf("Apple",4);//6

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。

如果要检索的元素没有出现，则该方法返回 -1。

该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。

如果在数组中没找到指定元素则返回 -1。

let fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
let index = fruits.lastIndexOf("Apple");//6

15、基础操作

join() 方法用于把数组中的所有元素转换一个字符串,改变原数组
pop() 方法用于删除数组的最后一个元素并返回删除的元素，改变原数组

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

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

slice() 方法可从已有的数组中返回选定的元素。slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。slice() 方法不会改变原始数组

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。向数组起始位置添加一个或者多个元素。该方法将改变数组的数目。

let fruits = ["Banana", "Orange", "Apple", "Mango"];
let energy = fruits.join(" and ");
//Banana and Orange and Apple and Mango

const sites = ['Google', 'Runoob', 'Taobao', 'Zhihu', 'Baidu'];
 
console.log(sites.pop());
// 输出结果为: "Baidu"
 
console.log(sites);
// 输出结果为: ['Google', 'Runoob', 'Taobao', 'Zhihu']
 
sites.pop();
 
console.log(sites);
//  输出结果为: ["Google", "Runoob", "Taobao"]

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi","Lemon","Pineapple")
console.log(fruits)
//Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
console.log(fruits)
//Orange,Apple,Mango

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
console.log(fruits)
//Lemon,Pineapple,Banana,Orange,Apple,Mango

delete - 删除一个数组成员，会形成空位，并不会影响length属性（改变原数组），同样适应于对象

//数组
  const arr = [0,1,2]
  delete arr[1]
  console.log(arr) // [0,empty,2]
  
  //对象
  const obj = {name: '谢大脚', age: '18', sex: '女'}
  delete obj.sex
  console.log(obj) // {name: '谢大脚', age: '18'}

 

16、排序

sort() 方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。默认排序顺序为按字母升序。注意：当数字是按字母顺序排列时"40"将排在"5"前面。使用数字排序，你必须通过一个函数作为参数来调用。函数指定数字是按照升序还是降序排列。这些说起来可能很难理解，你可以通过本页底部实例进一步了解它。注意： 这种方法会改变原始数组！。

let fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
//Apple,Banana,Mango,Orange

reverse() 方法用于颠倒数组中元素的顺序。

- 关键词**前后顺序**的问题（可以调用数组的 `reverse() 方法`对数组进行反转）
- 关键词**重复**的问题（可以使用 [Set 对象]进行**去重操作**）
1. data 中的 `historyList` 不做任何修改，依然使用 push 进行**末尾追加**

2. 定义一个计算属性 `historys`，将 `historyList` 数组 `reverse` 反转之后，就是此计算属性的值：
computed: {
  historys() {
    // 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序
    // 而是应该新建一个内存无关的数组，再进行 reverse 反转
    return [...this.historyList].reverse()
  }
}

17、new Set()  -  数组去重

const arr = [3,4,4,5,4,6,5,7]
  console.log(new Set(arr)); // {3,4,5,6,7}
  const a = Array.from(new Set(arr)) // [3, 4, 5, 6, 7]
  //或者
  const a = [...new Set(arr)] //推荐

18、flatten() - 简写为 flat（），接收一个数组，无论这个数组里嵌套了多少个数组，flatten 最后都会把其变成一个一维数组 (扁平化)

const arr = [[1,2,3],[4,5,[6,7]]];
const a = arr.flatten(3);
console.log(a); // [1, 2, 3, 4, 5, 6, 7]

19、Array.isArray() - 用来判断是不是数据是不是一个数组，返回值为 true 或 false

const arr = [3,4,4,5,4,6,5,7];
console.log(Array.isArray(arr)) // true