在项目中遇到的小知识点

一、在ios手机端，想要做成吸顶效果，但是使用position：sticky失效

解决办法 

加上position: -webkit-sticky即可兼容

二、es6中解构赋值的应用

// 1、对象的属性
const { a, b, c } = person 
// 相当于 
const a = person.a
const b = person.b
const c = person.c

// 2、数组的解构赋值
// 有匹配结果的，优先赋值匹配结果的值
var [a, b] = [1, 2] // a=1,b=2
var [a = 1, b = 2] = [5, 6] // a=5,b=6
var [a = 2, b = a] = [3, 4] // a=3,b=4
var [a = 2, b = 2] = [1] // a=1,b=1
var [a = 1, b = a] = [] // a=1, b=1
// 匹配结果是undefined时，默认值就是返回结果
var [a = 1] = [undefined] // a=1

三、Math常用的方法

1、向上取整   Math.ceil()

2、向下取整   Math.floor()

3、四舍五入   Math.round()

4、开平方      Math.sqrt()

5、获取最大值、最小值  Math.max()    Math.min()

6、0-1之间的随机数  Math.random()

   m-n 之间的随机数  Math.random()*(n-m)+m

四、数组常见的方法

1、在数组末尾添加新元素，并返回新数组，会改变原数组的大小

    let arr = [1,2,3]
    console.log(arr.push(4,5)) // [1,2,3,4,5]

2、删除并返回数组的最后一个元素，会改变原数组的大小

    let arr = [1,2,3]
    console.log(arr.pop()) // 3
    console.log(arr) // [1,2]

3、删除并返回数组的第一项，会改变原数组的大小

    let arr = [1,2,3]
    arr.shift() // 1
    console.log(arr) // [2,3]

 4、在数组的开头添加元素并返回新数组的长度，会改变原数组的大小

    let arr = [1,2,3]
    arr.unshift(0) // 4
    console.log(arr) // [0,1,2,3]

5、合并数组并返回一个新数组，不会改变原数组的大小

let arr = [1,2,3]
let arr1 = [4,5]
arr1.concat(arr) // [4,5,1,2,3]
console.log(arr) // [4,5]

6、数组转为字符串，默认连接字符是逗号","

let arr = [1,2,3]
arr.join() // 1,2,3
arr.join('') // 123

7、findIndex()    返回数组中满足要求的第一个元素的索引，不改变原数组的大小

 true返回该元素的索引值，false返回-1

var arr = [{id: 1},{id:2},{id:3},{id:4}]
arr.findIndex(i => i.id >= 3) // 2
// 返回arr中id大于等于3的对象的索引值

8、slice()  查找内容，不改变原数组

        array.slice(n, m)，从索引n开始查找到m（不含m）

        array.slice(n)    省略第二个参数，查找到末尾

        array.slice(0)    输出原数组，数组克隆

9、splice()  对数组进行增删改

  //增加

  let arr = [1,2,3]

  arr.splice(0,'a')

  console.log(arr) // [1,2,3,0,'a']


  //删除

  let arr = [11,22,33,44,55,66]

  console.log(arr.splice(3,2)) // [44,55]

  console.log(arr.splice(3));//[44,55,66]

  //修改

  let arr = [11,22,33]

  arr.splice(1,2,'a','b')

  console.log(arr) // [11,'a','b']

 

五、input框的事件

          <input type="text"
                 v-model="name"
                 placeholder="请输入关键词"
                 maxlength="10"
                 @input="inputName()"
                 @change='changeName()'
          >

input事件在输入的过程中就执行，change事件在失去焦点时才执行

可以根据输入框的不同使用场景来选择使用哪个方法