数组API方法

es5: join(), sort(), slice(), splice(), concat(), reverse(), push(),
pop(), shift(), unshift(), forEach(), map(), some(), every(), filter(), reduce(), indexOf(), lastIndexOf(), 
es6: Array.form(), Array.of(), copyWithin(), find()+findIndex(), fill(), entries()+keys()+values(), includes()

1.for of 直接遍历数组,for in 遍历数组的下标,遍历对象更简介

for(i in arr){
  console.log(arr[i])  //1,2,3,4,5
}

for(i of arr){
  console.log(i)  //1,2,3,4,5
}

2.forEach()循环

没有返回值,且对原数组没有影响,不支持return输出 只会跳出当前循环.

arr.forEach((val,index,arr)=>{
  console.log('val:',val, 'index:',index ,'arr:',arr)
  // val: 1 index: 0 arr:[1, 2, 3, 4, 5]
  // val: 2 index: 1 arr:[1, 2, 3, 4, 5]
  // val: 3 index: 2 arr:[1, 2, 3, 4, 5]
  // val: 4 index: 3 arr:[1, 2, 3, 4, 5]
  // val: 5 index: 4 arr:[1, 2, 3, 4, 5]
})
val arr数组内 每一项
index arr数组的下标
arr 代指数组所有内容

3.map循环

.有返回值,return什么就输出什么新数组,不改变原数组.

let mapArr = arr.map((item)=>{
  return item*2
})
console.log(mapArr)  //[2,4,6,8,10]
console.log(arr)  //[1,2,3,4,5]

4.filter()

有返回值,return 判断为true的元素组成的数组,若条件不满足返回空数组,不改变原数组.

 let filterArr = arr.filter(item=>{
  return item>3
})
console.log(filterArr)  //[4,5]
console.log(arr)  //[1,2,3,4,5]

5.find()

有返回值,return出的第一个判断为true的元素,则跳出循环,输出符合条件的元素.若条件不符合,输出undefined.不改变原数组.

let findArr = arr.find(item=>{
  return item>3
})
console.log(findArr)  //4

6.every()

数组中每一项符合条件返回true,否则返回false

let everyArr = arr.every(item=>{
return item>3
})
console.log(everyArr)  //false

7. some()

数组中的任一项符合条件,则返回true,否则返回false

let someArr = arr.some(item=>{
return item >3
})
console.log(someArr)  //true

8. reduce()

求和

let reduceArr = arr.reduce((sum,next,index)=>{
return sum += next
})
console.log(reduceArr)  //15

扁平化数组

var arr1 = [[1,2,3],[8,9,9],[4,5,6]]

let arr2 = arr1.reduce((sum,next,index)=>{
    return sum.concat(next)
})
console.log(arr2) //[1,2,3,8,9,9,4,5,6]

9.includes()

不用return，没有回调，输出true/false

console.log(arr.includes(3))  //true

10. keys() / values() / entries()

• keys()是对键名的遍历
• values()是对键值的遍历
• entries()是对键值对的遍历

11. 解构赋值 （浅拷贝，因为它不能对多维数组或对象达到深拷贝的作用）

数组的解构赋值

let a = [0,1,2,3]
let b = [...a]
b.push(4)
console.log(a) // [0,1,2,3]
console.log(b) // [0,1,2,3,4]

对象的解构赋值

用法：
let {name="swr",age} = {age:28}
console.log(name) // 'swr'
console.log(age) // 28

应用：
function ajax({method,url,type='params'}){
    console.log(method) // 'get'
    console.log(url) // '/'
    console.log(type) // 'params'
}

ajax({method:"get",url:"/"})

12.扩展运算符

12.1数组

扩展运算符用三个点号表示，把数组或类数组对象展开成一系列用逗号隔开的值
剩余运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr1,...arr2]
console.log(arr3) // [ 1, 2, 3, 4, 5, 6 ]

// 但是扩展运算符不能把伪数组转为数组（除了有迭代器iterator的伪数组，如arguments）
let likeArr = { "0":1,"1":2,"length":2 }
let arr = [...likeArr] // 报错 TypeError: likeArr is not iterable

// 但是可以用Array.from把伪数组转为数组
let likeArr = { "0":1,"1":2,"length":2 }
let arr = Array.from(likeArr)
console.log(arr) // [1,2]

12.2对象

通过扩展运算符和Object.assign对对象进行合并的行为，是属于浅拷贝

// 以往我们这样合并对象
let name = { name:"zf" }
let age = { age:18 }
let person = {}
Object.assign(person,name,age)
console.log(person) // { name: 'zf', age: 18 }

// 使用扩展运算符
let name = { name:"zf" }
let age = { age:18 }
let person = {...name,...age}
console.log(person) // { name: 'zf', age: 18 }

13. 数组去重的几种方法

13.1双for循环

兼容性好

var arr = [1,2,3,1,2,3,5,6,7];
  
  function unique(arr){
    if(!Array.isArray(arr)){
      console.log('type error')
      return
    }
    let res = [arr[0]];
    for(let i = 0;i<arr.length;i++){
      let flag = true;
      for(let j = 0;j<res.length;j++){
        if(arr[i] === arr[j]){
          flag = false;
          break;
        }
      }
      if(flag){
        res.push(arr[i])
      }
    }
    return res
  }
  console.log(unique(arr)) // [1, 2, 3, 5, 6, 7]

13.2 indexOf()简化内层循环

• NAN不能去重，因为indexOf()底层是‘===’，而NAN===NAN是不相等的

var arr = [1,2,3,1,2,3,5,6,7];
  
  function unique(arr){
    if(!Array.isArray(arr)){
      console.log('type error');
      return;
    }
    let res = [arr[0]];
    for(let i = 0;i<arr.length;i++){
      var current = arr[i];
      if(res.indexOf(current) === -1){
         # res中不存在则push
        res.push(current)
      }
    }
    return res;
  }

  console.log(unique(arr)) // [1, 2, 3, 5, 6, 7]

13.3排序后去重

sort方法排序后，相同的元素就排在一起，只需比较当前元素和上一个元素是否相等

var arr = [1,2,3,1,2,3,5,6,7];
  function unique(arr){
    if(!Array.isArray(arr)){
      console.log('type error')
      return
    }

    let res = []
    let sortArr = arr.sort()
    for(let i = 0;i<sortArr.length;i++){
      if(sortArr[i] !== sortArr[i+1] ){
        res.push(sortArr[i])
      }
    }
    return res
  }
  console.log(unique(arr)) // [1, 2, 3, 5, 6, 7]

13.4 es6新增filter()方法

可以简化外层循环

var arr = [1,2,3,1,2,3,5,'1',6,7];
  function unique(arr){
    if(!Array.isArray(arr)){
      console.log('type error')
      return
    }

    let res = arr.filter((item,index,arr)=>{
      return arr.indexOf(item) === index
    })
    return res
  }
  console.log(unique(arr)) // [1, 2, 3, 5, 6, 7]

13.5 ES6中的set()+扩展运算符/Array.from()

var arr = [1,2,3,1,2,3,5,6,7];
  function unique(arr){
    if(!Array.isArray(arr)){
      console.log('type error');
      return
    }
    return Array.from(new Set(arr))
    // 或者
    return [...new Set(arr)]
  }
  console.log(unique(arr))

把数组转换为字符串

toString()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 

Banana,Orange,Apple,Mango

join()

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 

Banana * Orange * Apple * Mango

Popping 和 Pushing

在处理数组时，删除元素和添加新元素是很简单的。

Popping 和 Pushing 指的是：

从数组弹出项目，或向数组推入项目。

Popping

pop() 方法从数组中删除最后一个元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

pop() 方法返回“被弹出”的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // x 的值是 "Mango"

Pushing

push() 方法（在数组结尾处）向数组添加一个新的元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

push() 方法返回新数组的长度：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

位移元素

位移与弹出等同，但处理首个元素而不是最后一个。

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 从 fruits 删除第一个元素 "Banana"

shift() 方法返回被“位移出”的字符串：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();             // 返回 "Banana"

记得点赞哦~jio咪   !!!!