JS中的数组的使用

js中数组的使用

1.数组基础部分

2.数组的其他操作

 <script>
  // 1.every()方法 判断一组元素中是否都包含某一个字符，该函数返回true/false
         var names=["abc","cb","mba","dna"];
         var flag=names.every(function(t){ 
            return t.indexOf('a')!=-1;   
            //关于 indexOf()返回某个指定字符串值在字符串中首次出现的位置，如果索引的字符串值没有出现，则返回-1 
            //str.indexOf()中 str即 stringObject中字符串的位置是从0开始的
         })
         alert(flag)  //false
         // 该函数结果中若每一个元素都返回true，结果为true。若有一个1个false，则返回为false

 // 2.some()方法 是将数组中每一个元素传入到函数中，该函数返回true/false  
         var names=["abc","cb","mba","dna"];
         var flag=names.some(function(t){ 
            return t.indexOf('a')!=-1; 
         })
         alert(flag) // true 
         //和every不同，一旦有一次函数返回了true，则迭代结束，且结果为true。

 // 3.forEach的使用 仅仅是一种快速迭代数组的方式而已， 该方法不需要返回值
         var names=["abc","cb","mba","dna"];
         names.forEach(function(t){
             alert(t)  // 弹话框依次按照数组中的顺序弹出 “123”， “cb”，"mba","dna"。、
         }) 

 //4.filter()方法 是一种过滤函数 首先会遍历数组中的每一个元素传入到函数中，函数结果返回true，那么这个元素会被添加到最新的数组中，返回false，则忽略该元素。最终形成一个新的数组，该数组就是fiter()方法的返回值。                                                                                  
        var names=["abc","cb","mba","dna"];
        var NewNames=names.filter(function(t){ 
           return t.indexOf('a')!=-1; 
        })
        alert(NewNames); //返回abc，mba，dna， 
        
//5.map()方法 提供一种映射函数，首先会遍历数组中每一个元素传入到函数中，元素会经过函数中的指令进行各种变换，生成新的元素并将元素返回，
            //最终将返回的元素形成一个新的数组，该数组就是map()方法的返回值。
       var names=["abc","cb","mba","dna"];
        var NewNames=names.map(function(t){ 
           return t.indexOf('a')!=-1; 
        })
        alert(NewNames);  //返回true，false，true，true
       
//map()方法   
        var names=["abc","cb","mba","dna"];
        var NewNames=names.map(function(t){ 
           return t+"-abc";  //在names中的所有元素后面拼接-abc
        })
        alert(NewNames);  //返回abc-abc,cb-abc,mba-abc,dna-abc
    </script>

3.关于 foreach,each,map

• 参考掘金forEach
• 参考掘金each
• 参考掘金map

在 JavaScript 中 为什么你应当使用 map 和 filter 来替代 forEach？
参考掘金

处理一个包含所有人的数组，以找出每个年龄小于 15 岁的人。

当你需要将一个数组或一部分数组复制到一个新数组时，首选 map 和 filter，而不是 forEach.。

const kids = [];
people.forEach (person =>{    // forEach选择 person 对象中的其中几个字段作为 'kids' 对象，并将其复制到 kids 数组中。
    if (person.age < 15) {
      kids.push({ id: person.id, name: person.name });
     }
 });
 
 map：每项调用函数处理后的值存放到返回的新数组中。
 filter：每项调用函数处理后的值决定该项是否应该放在方法返回的新数组中 。
  
  const kids = people
 .filter(person => person.age < 15)
 .map(person => ({ id: person.id, name: person.name }));

4.reduce方法

 **arr.reduce(callback[, initialValue])**

 arr.reduce(function(prev,cur,index,arr){
 ...
 }, init); 

callback（一个在数组中每一项上调用的函数，接受四个函数：）

1. previousValue（上一次调用回调函数时的返回值，或者初始值）
2. currentValue（当前正在处理的数组元素）
3. currentIndex（当前正在处理的数组元素下标）
4. array（调用reduce()方法的数组）
   其实常用的参数只有两个：prev 和 cur。

initialValue（可选的初始值。作为第一次调用回调函数时传给previousValue的值）

<script>

 //关于reduce
        //1.求数组项之和
        var arr=[3,9,4,2,6,0,9];
        var sum=arr.reduce(function(prev,cur){
            return prev+cur;
        },0);    //初始值0，即prev值为数组第一项

        //2.求数组项的最大值
        var arr=[3,9,4,3,0,8,9];
        var max=arr.reduce(function(prev,cur){
             return Math.max(prev,cur); // prev的值为3，cur的值为第二项9
        })   

        //3.合并二维数组
        var red=[[0,1],[2,3],[4,5]].reduce(function(a,b){
            return a.concat(b);
        },[]);
        console.log(red)   // [0,1,2,3,4,5]

        //4.数组去重
        var arr=[3,9,4,3,6,0,9];
        var newArr=arr.reduce(function(prev,cur){
            prev.indexOf(cur)===-1&&prev.push(cur);
            return prev;
        },[]);

        //初始化一个空数组，将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中

        //将需要去重处理的数组中的第2项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中

        //……

        //将需要去重处理的数组中的第n项在初始化数组中查找，如果找不到，就将该项继续添加到初始化数组中将这个初始化数组返回

        // 数组去重（2）
         var arr = ["apple","orange","apple","orange","pear","orange"];
         function getWordCnt(){
          return arr.reduce(function(prev,next){
           prev[next] = (prev[next] + 1) || 1;
            return prev;
           },{});
           }
          console.log(getWordCnt());  //{apple: 2, orange: 3, pear: 1}
</script>