数组的方法2

 目录

13.Array.from() 补充内容

14.reverse()

15.substr(起始下标,长度)

16.toLocaleLowerCase()

17.toLocaleUpperCase

18.以下七种方法都常用来迭代数组的方法(都不改变原数组)

18-1.some()

18-2.every()

18-3.forEach()

18-4.filter()

18-5.map()

18-6.findIndex

18-7.reduce

---

13.Array.from() 补充内容

即上文讲解 Array.from 的作用就是将伪数组 转为 真数组,补充一点:伪数组的本质是对象

<script>
    let obj = {
      0 : 20,
      1 : 10,
      2 : 30,
      3 : 8,
      length : 4
    }
    //let arr = Array.from(obj)
    //console.log(arr);
    console.log(obj);
  </script>
复制代码

  <script>
    let obj = {
      0 : 20,
      1 : 10,
      2 : 30,
      3 : 8,
      length : 4
    }
    let arr = Array.from(obj)
    console.log(arr);
    //console.log(obj);
  </script>
复制代码

14.reverse()

翻转数组: 将数组元素方向反转

<script>
    let arr = [1,2,3,4,5]
    arr.reverse()
    console.log(arr); // 5,4,3,2,1
  </script>
复制代码

15.substr(起始下标,长度)

从起始下标截取指定长度的字符

<script>
   let str = '最帅的人非我莫属,嘿嘿'
   console.log(str.length);  // 11
   console.log(str.substr(0,8)); //最帅的人非我莫属
  </script>
复制代码

16.toLocaleLowerCase()

转换为小写

 console.log('npmNPMwzdWZD'.toLocaleLowerCase()); //npmnpmwzdwzd
 //转换为小写
   console.log('npmNPMwzdWZD'.toLocaleUpperCase()); // NPMNPMWZDWZD
   // 转换为大写
复制代码

17.toLocaleUpperCase

转换为大写

18.以下七种方法都常用来迭代数组的方法(都不改变原数组)

数组迭代就是对数组的每一项都进行相应的操作

五种数组迭代方法都有三个参数 item:当前元素(必填) index:当前元素的索引值 array:当前数组

渲染数据      map
遍历数组      forEach
筛选数组      filter

forEach 跟 map 的 区别
forEach没有返回值 map有返回值,返回的是一个映射后的新数组

18-1.some()

判断数组中是否有满足条件的元素(逻辑或||,有任意一个满足即可)

常用非空判断,判断表单数组中,value值是否为空

  <script>
    // 判断数组中有没有奇数  some 返回值只有 true/false
    **let arr = [2,4,8]**
    // 标准写法 
    // let res = arr.some((item,index,array) => {
    //   if ( item % 2 == 1) {
    //     return true 
    //   } else {
    //     return  false 
    //   }
    // })
    // 简写 
    //== 1 可以省略,默认为true  取反相当于 ==0
    let res = arr.some(item => !(item % 2))
    console.log(res);  //true  偶数
    let res1 = arr.some(item => item %2)
    console.log(res1); //false  奇数
  </script>
复制代码

18-2.every()

判断数组中是否 所有元素 都满足条件(逻辑非&&,全部满足) 常用于开关思想:购物车是否全选

 <script>
    // 判断数组中有没有奇数  every 返回值只有 true/false
    let arr = [2,3,8]
    // 标准写法 item:当前元素 index:当前元素的索引值,数组本身
    // let res = arr.every((item,index,array) => {
    //   if ( item % 2 == 1) {
    //     return true 
    //   } else {
    //     return  false 
    //   }
    // })
    // 简写 == 1 可以省略,默认为true  取反相当于 ==0
    let res = arr.every(item => !(item % 2)) //看偶数
    console.log(res);  //false 
    let res1 = arr.every(item => item %2) // 看奇数
    console.log(res1); //false
  </script>
复制代码

18-3.forEach()

遍历数组 没有返回值

 <script>
    //   没有返回值
    let arr = [2,3,8]
    const str = []
    arr.forEach((item,index) => {
     if (item%2 === 0) {
       str.push(item)
     }
    });  
    console.log(str); // [2,8]
复制代码

forEach 跟 for 循环类似 

18-4.filter()

根据条件,筛选数组

常用于商品价格筛选

<script>
    // 筛选数组中的偶数  返回筛选后的新数组
    let arr = [2,3,8]
    // 基本写法
    // let str = arr.filter((item,index) =>{
    //   if (item % 2 == 0) {
    //     return true
    //   } else {
    //     return false        
    //   }
    // })
    //简写
    const str = arr.filter(item => !(item %2) );  // [2,8]
    console.log(str);
  </script>
复制代码

也可以称之为 过滤 

18-5.map()

按照某种规则,对数组每一个元素进行处理 返回值:映射后的新数组 (1)数组中所有的元素 *0.8

 <script>
    //   返回映射后的新数组
    let arr = [2,5,8]
    // 基本写法
    // let str = arr.map((item,index) =>{
    //   console.log(item,index)
    // return item * 0.8
    // })
    //简写
    const str = arr.map(item => item *.8 );  // [2,8]
    console.log(str);  // [1.6, 4, 6.4]
  </script>
复制代码

这个是基本写法得到的结果

(2)将数组中的js对象 映射成html字符串

  <script>
    /*
      const goodsList = [{}]
     (1) 把对象数组 映射成 html字符串数组 
      let arr = goodsList.map(item=> {
       console.log(item)  
      return `
      <div class="item">
      <img src=" ${item.picture}" alt="">
      </div>
      `
    }) 
    console.log(arr)

    (2)使用arr.join('') 把数组每个元素拼接成一个html字符串
    let htmlStr = arr.join('')
    (3) 渲染html字符串
    document.querySelector('.list').innerHTML = htmlStr
    */
   //简写语法  常用简写
      document.querySelector('.list').innerHTML = goodsList.map(item=>`
      <div class="item">
      <img src=" ${item.picture}" alt="">
      </div>
      `).join('')
  </script>
复制代码

(3)将数组中

let str = []
	res.data.map(item => {
		str.push({
				organId: item.organId,
				'inviteeOrganType': 'SHOP'
		})
	})

18-6.findIndex

找元素下标 返回值:没有就返回 -1 有的话,返回下标

(1)如果数组中是值类型(数字类型,字符串类型,布尔类型,未定义类型,null),找元素下标就用 arr.indexOf()

(2)如果数组中是引用类型(object,function,array),找元素下标就用: arr.findIndex()

        let arr = [ 
            { name:'张三',age:20}, 
            { name:'李四',age:30}, 
            { name:'王五',age:40}, 
        ]
 
        let index = arr.findIndex( item=>item.name == '李四' )
        console.log( index )       // 1

18-7.reduce

为每一个元素执行一次回调,返回最后一次回调的结果 常应用于:求数组累加和

 <script>
      let arr = [10, 20, 30, 8];
      let res = arr.reduce((sum, item, index) => {
        console.log(sum, item, index);
        return sum + item;
      }, 0);
      console.log(res); // 68
      // sum : 0 10 30 60
      // item : 10 20 30 8
      // index : 0 1 2 3
      /*
       第一个参数:回调函数   (sum,item,index)=>{}
          sum : 上一次回调return 返回值
          item: 当前元素
          index: 当前下标
        第二个参数 : sum初始值。  一般给0, 如果不给,遇到空数组reduce就会报错
        reduce自身返回值： 最后一次sum的结果
         */
    </script>

切记:它只有两个参数, 第一个是回调函数;第二个参数是: sum 初始值