阅读JavaScript文档-一些常用方法

---

一、Array

1.splice

    array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
1

• 参数说明
  • start：操作起始下标
  • deleteCount：从start开始要删除的个数，不指定时删除后面的所有元素
  • item1,item2,item3…：要添加的元素(从start处添加，start后面原来的元素向后移)
• 返回值
  • 返回值是删除的元素组成的数组
  • 原数组被改变，原数组变成了删除、添加以后的数组
• 代码示例

  • start为非负数

        let arr=['a','b','c','d','e','n','e','l','s','o','n']
        let newarr=arr.splice(5,6,'f','g','h')
    1
    2

    

  • start为负数，表示倒数第几个元素开始操作

        let arr=['a','b','c','d','e','n','e','l','s','o','n']
        let newarr=arr.splice(-4,3)
    1
    2

    

2.Slice

    Slice(begin,end)
1

• 参数说明
  • begin：操作起始下标
  • end：结束位置下标(返回元素不包括end位置元素)
• 返回值
  • 返回一个新对象，内容是从begin开始，到end(这里的操作元素不包括end)，该方法不影响原数组
• 代码示例

      const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
      console.log(animals.slice(1,3))
      console.log(animals.slice(1,-3))
  1
  2
  3

  

3.Shift

    shift() 方法经常用于while loop的环境中，该方法删除数组的第一个元素，并返回该元素
    该方法修改原数组元素和长度
1
2

• 代码示例

      var firstElem=animals.shift()
      console.log("firstElem:",firstElem)
      console.log("After shift:",animals)
  1
  2
  3

  

4.unshift

    在数组开头添加元素，返回值是添加完成后数组的长度
    该方法修改原数组元素和长度
1
2

• 代码示例

      const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
      let newlength=animals.unshift("tiger")
      console.log("new animals:",animals)
      console.log("newlength:",newlength)
  1
  2
  3
  4

  

5.some

    arr.some(callback(element,index,array))
    该方法测试数组中是不是至少有1个元素通过了被提供的函数测试
1
2

• 参数说明
  • callback：参数是一个函数callback，callback接收三个参数：element是正在处理的元素，index是正在处理元素的下标，array是被测试数组。
• 返回值
  • 返回值是Boolean类型
• 代码示例

      function isInAnimals(animal,animals){
          let inFlag=animals.some((element)=>{
              if(element==animal){
                  return true
              }else{
                  return false
              }
          })
          return inFlag
      }
  
      const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
      isInAnimals('apple',animals)
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

  

6.reduce

    arr.reduce(reducer,initialValue)
    对数组中的每个元素执行一个提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
1
2

• 参数说明
  • reducer函数
    接收四个参数：
    • Accumulator (acc) (累计器)：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值。
    • Current Value (cur) (当前值)：当前正在处理的元素，如果提供了initialValue则当前值从数组元素下标为0处开始，如果没有提供initialValue则当前值从数组下标为1处开始。
    • Current Index (idx) (当前索引)：[可选，与当前值对应]
    • Source Array (src) (源数组)：[可选，当前操作的数组arr]
  • initialValue
    作为reducer第一个参数的值，如果没有初始值则把数组的第一个元素设为initialValue
• 代码示例

  • 设置了initialValue

        const numArr = [1,2,3,4,5]
        const accFunc1 = (preValue,curValue)=> {
            console.log("preValue:",preValue)
            console.log("curValue:",curValue)
            return preValue+curValue
        }
    
        let reduceResult = numArr.reduce(accFunc1,22)
        console.log("reduceResult:",reduceResult)
    1
    2
    3
    4
    5
    6
    7
    8
    9

    

  • 没有设置initialValue

        let reduceResult0 = numArr.reduce(accFunc1)
        console.log("reduceResult0:",reduceResult0)
    1
    2

    

7.concat

    连接两个数组并返回新数组
1

• 参数说明
  该函数参数可以是值或数组，一个或多个valueN
  concat将对象引用复制到新数组中。
  原始数组和新数组都引用相同的对象。 也就是说，如果引用的对象被修改，则更改对于新数组和原始数组都是可见的，也包括作为参数的数组元素。
• 返回值
  concat方法不会改变this或任何作为参数提供的数组，而是返回一个浅拷贝，它包含与原始数组相结合的相同元素的副本。
• 代码示例

      let arr1=[1,2,3]
      let arr2=['a','b','c']
      let arr3=['d','e','f']
      let newarr=arr1.concat(arr2,arr3,arr1)
  1
  2
  3
  4

  

8.join(separator)

    用分隔符separator将数组元素连接成字符串
1

• 代码示例

      let char=['a','b','c']
      let str=char.join()
      let str1=char.join(",")
      let str2=char.join("-")
      let str3=char.join(" ")
      let str4=char.join("")
  1
  2
  3
  4
  5
  6

  

二、addEventListener()与removeEventListener()

给某些事件增加监听，执行指定的函数
1

1.参数

第三个参数是一个对象，可以对一些选项进行指定，以实现某些功能(下面的例子里传入了个空对象)

2.代码示例

• vue

    <div style="border:1px solid red;" ref="mydiv">
            测试一下对象eventobj
            <br>
            <button @click="addListener">测试给对象添加Listenerbutton>
            <button @click="removeListener">测试给对象移除Listenerbutton>
        div>
1
2
3
4
5
6

• javascript

    addListener(){
        let divobj=this.$refs.mydiv
        divobj.addEventListener('click',this.clickListener,{})
    },
    clickListener(){
        console.log("鼠标点击了一下mydiv区域")
    },
    removeListener(){
        let divobj=this.$refs.mydiv
        divobj.removeEventListener('click',this.clickListener,{})
        console.log("将mydiv上添加的监听事件移除了")
    }
1
2
3
4
5
6
7
8
9
10
11
12

3.效果

• 界面
  

• 点击添加Listener
  

• 多次点击mydiv区域
  

• 点击移除Listener，点击mydiv区域没有输出了，监听函数移除
  

三、getBoundingClientRect()

此函数返回的是元素位于视图中的相对位置，其基准为视图的左上角(0,0)处
返回值是一个 DOMRect 对象，该对象的属性值会随着该元素在界面中的移动动态变化
1
2

如果要获得该元素位于界面的绝对位置，则可以通过 window.scrollX 和 window.scrollY），将x+window.scrollX，y+window.scrollY这样就可以获取与当前的滚动位置无关的值。

参考

1. 索引集合类 (Indexed collections)
2. EventTarget.addEventListener()