JavaScript入门到放弃 – 12Demo

发布于 / Skill / 3 条评论

forEach

forEach() 方法对数组的每个元素执行一次提供的函数

语法

array1.forEach(callbackfn[, thisArg])

  • array1 必选。一个数组对象。
  • callbackfn 必选。最多可以接受三个参数的函数。对于数组中的每个元素,forEach 都会调用 callbackfn 函数一次。
  • thisArg 可选。 callbackfn 函数中的 this 关键字可引用的对象。如果省略 thisArg,则 undefined 将用作 this 值。

回调函数

function callbackfn(value, index, array1)

Value 数组元素的值
index 数组元素的数字索引
array1 包含该元素的数组对象

forEach可以看做是for(let i = 0; i < len; i++),不支持 continue 和 break,只能通过 return 来控制循环,同时不能退出循环本身的

Demo

<script>
// demo about foreach
export default {
  data(){
    return{
      foreachList:[{
        id:'id1',
        name:'1',
        children:[{
          id:'id1-1',
          name:'1-1'
        }]
      },{
        id:'id2',
        name:'2'
      }]
    }
  },
  methods:{
    foreachDemo(){
      var foreachList = this.foreachList;
      foreachList.forEach(function(row,val,arr) {
        console.log(row.name) // 1 2
        console.log(val) // 0 1
        console.log(arr) // 打印整个数组
      })
    }
  }
}
</script>

push

将新元素追加到一个数组中,并返回新的数组长度 push方法按元素出现的顺序附加元素 加入到最末端

语法

arrayObj.push([item1 [item2 [. . . [itemN ]]]])

  • arrayObj 必需。一个 Array 对象
  • item, item2,. . ., itemN 可选。 Array 的新元素

Demo

<script>
// demo about push
export default {
  data(){
    return{
      pushArray:[{
        name:'1',
        id:'id1'
      },
      {
        name:'2',
        id:'id2'
      }]
    }
  },
  methods:{
    printArray(){
      console.log(this.pushArray)
    },
    push(){
      var arrayList = this.pushArray;
      arrayList.push({name:'3',id:'id3'})
      console.log(this.pushArray)
    }
  }
}
</script>

Split

split() 方法用于把一个字符串分割成字符串数组

语法

string.split(separator,limit)

  • separator 可选。字符串或正则表达式,从该参数指定的地方分割 string Object。
  • limit 可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。

Demo

<script>
// demo about split
export default {
  data(){
    return{
      name:'Sona,Erban,Chris'
    }
  },
  methods:{
    splitDemo(){
      var name = this.name
      var words = name.split(',')
      console.log(words) // ["Sona", "Erban", "Chris"]
    }
  }
}
</script>

shift

shift() 方法从数组中移除第一个元素并将返回该元素。

语法

arrayObj.shift()

  • 必需的 arrayObj 引用是 Array 对象。

Demo

<script>
// demo about shift
export default {
  data(){
    return{
      nameArray:['lucy','tom','john']
    }
  },
  methods:{
    shiftDemo(){
     var nameArray = this.nameArray;
     nameArray.shift()
     console.log(nameArray) //['tom','john']
    }
  }
}
</script>

concat

concat()组合两个或两个以上的数组

语法

array1.concat([item1[, item2[, . . . [, itemN]]]])

  • array1 必需。其他数组连接到的 Array 对象
  • item1,. . ., itemN 可选。要添加到 array1 的末尾的附加项

Demo

<script>
// demo about concat
export default {
  data(){
    return{
      demoArray1:['1','2','3'],
      demoArray2:['4','5','6']
    }
  },
  methods:{
    concatDemo(){
      var demoArray1 = this.demoArray1;
      var demoArray2 = this.demoArray2;
      var demoArray3 = demoArray1.concat(demoArray2)
      console.log("demoArray3",demoArray3) //['1','2','3','4','5','6']
      console.log("demoArray2",demoArray2) //['4','5','6']
      console.log("demoArray1",demoArray1) //['1','2','3']
    }
  }
}
</script>

slice

slice()返回一个数组中的一部分

语法

arrayObj.slice(start, [end])

  • arrayObj 必需。一个 Array 对象。
  • start 必需。 arrayObj 的指定部分的开头。
  • end 可选。 arrayObj 的指定部分的结尾。

Demo

<script>
// demo about slice
export default {
  data(){
    return{
      demoArray:['element','antd','iview']
    }
  },
  methods: {
    sliceDemo(){
      var demoArray = this.demoArray;
      var testArray = demoArray.slice(0,1);
      console.log(testArray)
    }
  }
}
</script>

splice

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

转载原创文章请注明,转载自: 针针小站 » JavaScript入门到放弃 – 12Demo

  1. avatar

    针不要轻易放弃

    1. avatar
      @Aiko 我要哭了!
      1. avatar
        @Hyejeong 哭个锤子