2-1. for in

  1.         var arr = ['html', 'css', 'js'];
  2.         for (var key in arr) {
  3.             // console.log(key);
  4.             console.log(arr[key]);
  5.         }
  6.         console.log('--------------------------------------------');
  7.         var obj = {
  8.             name: 'lis',
  9.             age: 18
  10.         }
  11.         for (var k in obj) {
  12.             // console.log(k);
  13.             console.log(obj[k]);
  14.         }

image.png

2-2. for of

  1.         var arr = [3, 5, 7];
  2.         for (var value of arr) {
  3.             // console.log(arr.indexOf(value));
  4.             console.log(value);
  5.         }

image.png

2-3. forEach( )

遍历数组中的每一项，没有返回值，对原数组没有影响

  1.         var arr = ['html','css','js'];
  2.         arr.forEach(function(item){
  3.             console.log(item);
  4.         })
  5.         console.log('------------------------------');
  6.         var test = [2,3,4];
  7.         var newTest = [];
  8.         test.forEach(function(e){
  9.             newTest.push(e*2);
  10.         })
  11.         console.log(newTest);
  12.         console.log('------------------------------');
  13.         var names = [
  14.             {name:'张三'},
  15.             {name:'李四'}
  16.         ]
  17.         names.forEach(function(e){
  18.             e.like = true;
  19.         })
  20.         console.log(names);

image.png

2-4. map( )

可以改变数组的每一项，变成一个新数组

  1. var arr = [2,3,4,5]
  2. var res = arr.map((item=>{
  3.   return item*2
  4. }))
  5. console.log(arr);  // [2,3,4,5]
  6. console.log(res);  // [4,6,8,10]
  • 注意点：
    1. 1.数组的每一项是基础(简单)类型，执行map不会改变数组原来的结构
    2. 2.数组的每一项为复杂类型，会改变原来的数据结构
    ```css var arr =[1,2,3] var res = arr.map(item =>{ return item*3 }) console.log(res); console.log(arr); // 没有改变数组原来的结构

var obj =[ {name:”liu”,age:10}, {name:”zhang”,age:11} ] var result = obj.map(item =>{ return item.age = 0; }) console.log(result); console.log(obj); // 改变了数组原来的结构

  1. <a name="YLJPp"></a>
  2. # 2-5. some( )
  3. 只要数组中有一项满足条件，就输出true
  4. ```css
  5. var arr = [1,2,3,4,5]
  6. var res = arr.some(item =>{
  7.   return item>3
  8. })
  9. console.log(res); // true

2-6. every( )

数组中的每一项满足条件，才输出true

  1. var arr = [1,2,3,4,5]
  2. var str = arr.every(item => item >2)
  3. console.log(str);  //false

2-7. filter( ）筛选，过滤

注：此方法也不会改变原始数组，会返回一个筛选成功匹配的元素组成的新数组。

  1. // 查找符合条件的元素，主要用于筛选
  2. var arr =[1,2,3,4,5]
  3. var res = arr.filter(item =>item>2)
  4. console.log(res);    //3,4,5

2-8. find( )

  1. // 找到一个就返回匹配的元素，没找到就返回 undefined
  2. var arr = [1, 2, 3, 4, 5, 6]
  3. var newArr = arr.find(val => {
  4.     return val > 2
  5. })
  6. console.log(newArr) // 3

2-9. findIndex( )

  1. // 找到符合条件的就返回  返回对应的下标，没找到就返回-1
  2. var arr = [1,2,3,2]
  3. var index = arr.findIndex(item=>{
  4.   return item == 2;
  5. })
  6. console.log(index);  // 1

案例

  1. 历史搜索
  3. <body>
  4.     <h5>历史搜索</h5>
  5.   <input type="text" name="" id="inp">
  6.   <div class="box">
  8.   </div>
  10.   <script>
  11.     var arr=[];
  15. $("#inp").keyup(function(e){
  16.      if(e.keyCode==13){
  17.         //  console.log(Boolean($(this).val()));
  18.          var value=$(this).val();
  20.          var temp=`
  21.                   <button>
  22.                     ${value}
  23.                  </button>
  24.                 `
  25.          if(value && !arr.includes(value)){
  26.          arr.unshift(value);
  27.          //渲染数据到页面
  28.          console.log(arr);
  30.                 $(".box").prepend(temp);
  31.                 $(this).val("");
  34.          }else{
  35.              //4.当输入的值数组中存在的时候，让其至于数组的首位
  36.              console.log(value);
  37.            var index=arr.indexOf(value);
  39.            var res=  arr.splice(index,1);
  40.            arr.unshift(res);
  41.            console.log(arr);
  43.            //ui联动
  44.            $(".box button").eq(index).remove();
  45.            $(".box").prepend(temp);
  46.          }
  48.      }
  50. })