ES6中Array的常用对象方法

目录

一，常用方法

Array.from()将伪数组或者可以遍历的对象转成真正的数组

Array.of(),负责把一堆文本转成数组

 array.findindex()找到符合条件的第一个元素的索引

array.includes()：找出某个数组是否包含给定的值。

in 判断元素是否是数组(对象)的属性

arr.some 找满足条件的元素 找到则返回true 找不到则返回false

split把字符串 按照“分隔符”转为数组

join把数组按照‘分隔符’连接成一个字符串

二，重点需要掌握的方法（实际项目开发经常使用）

1,array.map的用法，对旧数组进行加工处理，返回新的数组，关键词（格式化），加工处理后不会影响原来的数组

2,Array.filter()  对原来数组进行过滤筛选，返回符合条件的数组，判断条件

3,array.reduce() 缩减  累加器

4，array.fill（） 填充

三，数组的遍历，新方法

1,for of 遍历数组的值（遍历可迭代具备迭代器的接口）

2,for in遍历索引（遍历可枚举类型）

3.遍历对象（重点）

 4，foEach，遍历

四，练习题，针对训练新方法，新遍历

 五，作者语录

永远不要只看见前方路途遥远，而忘了从前的自己坚持了多久才走到了这里。

---

一，常用方法

• Array.from()将伪数组或者可以遍历的对象转成真正的数组

   举例说明

            let str = "1234";
			 const arr = Array.from(str);
			 console.log(arr);

将字符串转换成数组了，注意的是Array.from是固定写法，A不可小写

• Array.of(),负责把一堆文本转成数组

• 举例说明

•  let a=2;
      let b=3;
      let c=4;
      console.log(Array.of(a,b,c));//打印出来为[2,3,4]

  注意，这里我把Array.of()，Array.from()放在一块说明，是将两种方法进行对比，前者是将一堆文本转数组，后者是伪数组或者可遍历对象才可以转，是有区别的！

• array.find返回数组符合条件第一个元素的值，这里的array是一个变量，可变的，不是固定写法

•        const arr = [1,2,3,4];
  			let num = arr.find(item=>item==3);
  			console.log(num);

  打印出来结果为3，括号里面为箭头回调函数，判断条件，返回符合条件的第一个元素

• 找数组包对象
  	 const arr = [
  		 	{realname:"张三1",age:18},
  			{realname:"张三2",age:17},
  			{realname:"张三3",age:19},
  			{realname:"张三4",age:17},
  			                           ];
  		 console.log(arr.find(item=>item.age==17));

  

•  array.findindex()找到符合条件的第一个元素的索引

举例说明

3:array.findindex找到符合条件的第一个元素的索引
			// const arr = [1,2,3,4];
			// console.log(arr.findIndex(item=>item==4));
			
			// const arrobj = [
			// 		{realname:"张三1",age:18},
			// 		{realname:"张三2",age:19},
			// 		{realname:"张三3",age:15},
			// 		{realname:"张三4",age:14},
			// ]
			// console.log(arrobj.findIndex(item=>item.age==19));
			

• array.includes()：找出某个数组是否包含给定的值。

举例说明，返回flase，没有10这个元素

const arr = [1,2,3,4];
			 console.log(arr.includes(10));//有就返回true 没有就返回false
			

• in 判断元素是否是数组(对象)的属性

举例说明，一定注意判断的是不是属性，4是下标，arr里没有下标为4的元素，返回flase，对象也是一样，判断属性名，而不是属性值

let arr = ["a","b","c",4];
			 let Person = {realname:"张三",age:19};
			 console.log(4 in arr);//false
			 console.log("realname" in Person);//true

• arr.some 找满足条件的元素 找到则返回true 找不到则返回false

举例说明，flag返回true，返回的是布尔值，而不是元素

             let arr = [1,2,3,4];
			 let flag = arr.some(item=>item>2);
			 console.log(flag);

• split把字符串 按照“分隔符”转为数组

举例说明

             let str='1-2-3';
     let arr=str.split('-');
     console.log(arr);//[1,2,3]

• join把数组按照‘分隔符’连接成一个字符串

• 举例

      let arr=[1,2,3];
      let str=arr.join(',')
      console.log(str);//1,2,3

  二，重点需要掌握的方法（实际项目开发经常使用）

• 1,array.map的用法，对旧数组进行加工处理，返回新的数组，关键词（格式化），加工处理后不会影响原来的数组

举例

         const arr=[1,2,3,4];，//不会对原来数组产生影响
        //格式化
         const Newarr=arr.map((item)=>{
             return item+2;
         })
         console.log(Newarr);//[3,4,5,6]

• 2,Array.filter()  对原来数组进行过滤筛选，返回符合条件的数组，判断条件

        const arr=[22,44,55,66,65];
        const Newarr=arr.filter((item)=>{
              return item>=50;
        })
        console.log(Newarr);//返回[55,66,65]

• 3,array.reduce() 缩减  累加器

举例，注意total为初始值，也是返回值，item为当前值

        const arr=[1,2,3,4,5];
         const num=arr.reduce((total,item)=>{
              return total+item
         })
         console.log(num);//15

         const arr=[1,2,3,4,5];
         const max=arr.reduce((total,item)=>{
             return total

• 4，array.fill（） 填充

• 举例 注意‘x’表示填充的内容，1，表示从什么位置开始的下标，3表示从什么位置下标结束，但不包括当前结束位置

         let arr=[1,2,3,4,5,6,7,8];
          arr.fill('x',1,3)
          //'x'表示要填充的内容，1，表示从什么位置开始（下标缩影值）
          // 3,表示结束的位置索引，但不包括。
          // console.log(arr);// [1, 'x', 'x', 4, 5, 6, 7, 8]

  三，数组的遍历，新方法

• 1,for of 遍历数组的值（遍历可迭代具备迭代器的接口）

举例，v为变量

const arr=['a','b','c','d']
         for(let v of arr){
             console.log(v)
         }//abcd

• 2,for in遍历索引（遍历可枚举类型）

举例，变量k，遍历的是数组的索引

const arr = ['a', 'b', 'c', 'd']
         for (let k in arr) {
            console.log(k)
         }//0,1,2,3数组缩影

        const Person = {
             realname: "张三", age: 19,
            realname: "李四", age: 29,
        }
        for (let k in Person) {
            console.log(k);
            console.log(Person[k]);
        }
          // 无法遍历对象，只能获取最后的数据
        const Person={realname:"张三",age:19,
                      realname:"张三",age:19}

3.遍历对象（重点）

 3,遍历对象
//         const Person = {
//             realname: "张三", age: 19,
//             realname: "李四", age: 20,
//         }
//         const keys=Object.keys(Person);获得所有的对象的keys
//         for(let k of keys){
// console.log(`k:${k},v:${Person[k]}`);person[k]是找到属性里面的属性值
//         }
//         console.log(keys);

•  4，foEach，遍历

• 举例

  let arr=[1,2,3,4,5]
  arr.forEach((item,index) => {
     console.log( `v:${item},k:${index}`);
     //打印出来item代表当前值，index代表当前值得索引号
  });

  四，练习题，针对训练新方法，新遍历

• 题目：数组，格式化对象，{name:'张三',birthday:'2020-10-09'} 格式化为

          //{name:'张三',birthday:'2020-10-09',age:20}

    
全部信息
    


    
    
年龄小于20岁的有如下:
    


    
    

• 
• 完全利用数组对象的格式化加工处理   Persons.map
• 题目：

  输出一组人员信息，输出到页面信息如下，（（姓名，分数，是否及格60分）;

•    输出结果

   const Persons = [
              { realname: '张三', score: 50 },
              { realname: '李四', score: 60 },
              { realname: '王五', score: 78},
              { realname: '小七', score:  90},
              { realname: '小九', score:  55},
          ];
     
          let str='';
      
           for(let v of Persons){
            let result= v.score>=60? "及格":'不及格'//
  str +=`
  姓名:${v.realname}成绩:${v.score}${result}`
           }
           let pass=document.querySelector('.pass')
           pass.innerHTML=str
      
  

  

   五，作者语录

• 永远不要只看见前方路途遥远，而忘了从前的自己坚持了多久才走到了这里。