JavaScript中Array数组常见方法和迭代器

目录

1、将数组转换为字符串

2、新增数组元素

3、删除数组元素

4.查询数组元素&&修改数组元素

补充

5、拼接数组

6、还是它（使用 splice() 来删除元素）

7、合并（连接）数组

8、数组排序

数字排序

 Array.forEach()

Array.map()

Array.every()

Array.some()

Array.find()

Array.filter()

 Array.includes()

---

1、将数组转换为字符串

toString()：可以把数组转换为逗号分隔的字符串

const arr = [1, 2, 3]
console.log(arr.toString())//1,2,3

join() 方法也可以把数组元素转换为字符串，类似 toString()，但是join可以自定义分隔符，敲好用

const arr = [1, 2, 3]
console.log(arr.join(''))//字符串型123
console.log(arr.join('-'))//字符串型1-2-3

2、新增数组元素

push() 方法（在数组结尾处）向数组添加一个新的元素,要添加的数组元素放在小括号里面，方法名前面记得跟数组名

    const arr = [1, 2, 3]
    arr.push(4)
    console.log(arr) //[1, 2, 3, 4]

unshift() 方法（在开头）向数组添加新元素，返回值是新数组的长度，

    const arr = [1, 2, 3]
    arr.unshift(0)
    console.log(arr) //[0, 1, 2, 3]

3、删除数组元素

pop() 方法从数组中删除最后一个元素 返回值是被删除的数组元素

//懒得敲了，跟下面差不多，不跟参数

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引 返回被“位移出”的字符串

    const arr = [1, 2, 3]
    arr.shift()
    console.log(arr) //[2, 3]

    //别问为什么上个不敲这个敲，问就是unshift那里CV的

4.查询数组元素&&修改数组元素

数组索引号从0开始，通过数组索引号查询数组元素

    const arr = [1, 2, 3]
    
    console.log(arr[0])// 1

    // 修改: 通过数组索引号访问重新赋值
    arr[0] = '酸菜'
    console.log(arr)// ['酸菜', 2, 3]

补充

length 属性向数组追加新元素的简易方法

    const arr = [1, 2, 3]
    arr[arr.length] = 4
    console.log(arr) // [1, 2, 3, 4]

5、拼接数组

splice() 方法可用于向数组添加新项

    const arr = [1, 2, 3]
    arr.splice(3, 0, "酸菜", "牛肉面")
    console.log(arr)//[1, 2, 3, '酸菜', '牛肉面']

第一个参数（3）定义添加新元素的起始位置位置（和之前的数组元素拼接）。

第二个参数（0）定义删除多少元素。

其余参数（“酸菜”，“牛肉面”）定义要添加的新元素。

6、还是它（使用 splice() 来删除元素）

    const arr = [1, 2, 3]
    arr.splice(0,1)// arr.splice(索引号,删除的个数)
    console.log(arr)//[2, 3]

splice() 方法返回的是一个包含已删除项的数组

7、合并（连接）数组

concat() 方法可以通过合并（连接）现有数组来创建一个新数组，不会更改原数组，也可以将值（合并后的新数组）作为参数

var arr1 = ["鸭血", "粉丝"];
var arr2 = ["土豆", "豆腐", "腐竹"];
var arr3 = ["火锅", "奶茶"];
var newArr = arr1.concat(arr2, arr3)   // 将arr1、arr2 与 arr3 连接在一起
//['鸭血', '粉丝', '土豆', '豆腐', '腐竹', '火锅', '奶茶']

8、数组排序

sort() 方法以字母顺序对数组进行排序，基本用不到

数字排序

数字按照字符串来排序，不能直接用，会有不正确的结果

通过一个比值函数来修正问题：

const arr = [1, 4, 7, 3]

arr.sort(function(a, b){return a - b}) //升序
console.log(arr)// [1, 3, 4, 7]

arr.sort(function(a, b){return b - a}) // 降序
console.log(arr)//[7, 4, 3, 1] 

 Array.forEach()

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数

没有返回值，本质上等同于 for 循环，还有第二个参数是索引号，可以省略。对每一项执行函数

 用于遍历数组元素，打印输出

     let str = ''
        //遍历数组，打印输出
         arr.forEach(item => {
          //解构对象
          const {name, price, picture} = item
         return str += `
          <div class="item">
            <img src="${picture}" alt="">
            <p class="name">${name}</p>
            <p class="price">${price}</p>
          </div>
          `
        })
        document.querySelector('.list').innerHTML = str

Array.map()

map() 方法通过对每个数组元素执行函数来创建新数组，（空数组会跳过），返回的是个新数组，不会修改原数组

const arr = [1, 2, 3, 4];
let str = ''
str = arr.map((item, index) => str += item )
console.log(str)// ['1', '12', '123', '1234']

Array.every()

every() 方法检测所有数组元素是否满足条件
如果数组中的所有元素都符合条件 返回true
只要有一个不符合就返回false

const arr = [1,3,5,7,9]
function fn (value, index) {
    if (value > 3) {
        return true
    } else {
      return false
    }
}
if (arr.every(fn)) {
    console.log("全部大于3")
} else{
  console.log("有不大于3的")
}

Array.some()

some() 方法检查数组元素是否有满足条件的

const arr = [1,3,5,7,9]
function fn (value, index) {
    if (value > 3) {
        return true
    } else {
      return false
    }
}
if (arr.some(fn)) {
    console.log("有大于3")
} else{
  console.log("没有大于3的")
}

Array.find()

find() 方法返回通过满足条件的第一个数组元素，没有满足条件的返回undefined

const arr = [1,3,5,7,9]
console.log(arr.find(item => item % 3 === 0)) // 3

Array.filter()

通过自定义条件来过滤数组，将满足条件的元素返回一个新数组

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let filterResult = numbers.filter((item, index, array) => item > 2);
console.log(filterResult); // 3,4,5,4,3

 Array.includes()

includes()方法通过自定义条件来过滤数组，将满足条件的元素返回一个新数组

let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.includes(4) // true