js笔记(JavaScript常见方法记录)

一、数组遍历方法

1.for循环

for(var i = 0; i < arr.length; i++){

        arr 是要遍历的数组
        arr[i] 是遍历的数组的元素
        i 是数组的元素对应的下标(索引号)
}

2.for of 方法

for(var item of arr) {

        item 遍历的数组的元素
}

3.forEach 遍历

computed: {
        // 简写计算属性是只有获取没有设置，完整计算属性是有获取和设置的
        // 全选反选
        allcheck: {
          get() {
            // this.fruitList是data里面申明的数组，item是遍历值，使用计算属性get获取到值
        //every方法的返回值，return true : 全部元素都满足条件，return false : 有元素不满足条件
            return this.fruitList.every(item => item.isChecked === true)
          },
          set(value) {
        // 这里再使用计算属性设置，再次点击就让全选取消了
        // 使用计算属性computed中的get获取到数据后，再使用set设置数据，通过forEach遍历
        // 这里是遍历this.fruitList数组中所有对象的isChecked让他值等于获取到的这个value值
            return this.fruitList.forEach(item => item.isChecked = value)
          }
        },
      },

4.map 映射

arrObj.map(function(item,index,self){

        item 遍历出的每一个元素

        index 元素对应的下标

        self 数组本身

        有返回值  

        数组元素个数不变，但是按照一定的条件转换

})

5.filter 过滤（删除），find（添加，减少）

 methods: {
        // 删除
        clear(id) {
          // 根据某一项来删除指定的数据 ，遍历this.fruitList这个数组钟的id值
          // 如果这个id值不等于传过来的id值，则这个数组的对象就进行保留，这就是删除
          this.fruitList = this.fruitList.filter(item => item.id !== id)
        },

        // 添加
        add(id) {
          // 根据某一项来找到指定的数据，遍历this.fruitList这个数组钟的id值
          // 如果这个id值等于传过来的这个id，就让这个数组中的这个对象某个属性累加
          const fruit = this.fruitList.find(item => item.id == id)
          fruit.num++
        },

        // 删除
        del(id) {
          // 根据某一项来找到指定的数据
          const fruit = this.fruitList.find(item => item.id == id)
          fruit.num--
        },
      }

6.every  [使用计算属性时候，同时深入计算属性的完整版get,set]

computed: {
        // 简写计算属性是只有获取没有设置，完整计算属性是有获取和设置的
        // 全选反选
        allcheck: {
          get() {
            // this.fruitList是data里面申明的数组，item是遍历值，使用计算属性get获取到值
        //every方法的返回值，return true : 全部元素都满足条件，return false : 有元素不满足条件
            return this.fruitList.every(item => item.isChecked === true)
          },
          set(value) {
        // 这里再使用计算属性设置，再次点击就让全选取消了
        // 使用计算属性computed中的get获取到数据后，再使用set设置数据，通过forEach遍历
        // 这里是遍历this.fruitList数组中所有对象的isChecked让他值等于获取到的这个value值
            return this.fruitList.forEach(item => item.isChecked = value)
          }
        },
      },

7.some

arrObj.some(function(item,index,self){

        item 遍历出的每一个元素

        index 元素对应的下标

        self 数组本身

        有返回值 

        检测数组里的每一个值是否满足指定条件，如果有一个值满足，返回true，剩余的值不再进行检测

        如果所有的值都不满足，则返回false

});

8. reduce  [默认使用条件:当你有数据需要相加的时候]

  computed: {

        // 总数量
        allcount() {
         //这里的这个this.fruitList是在data里面申明的一个数组
         //reduce里面有初始数据就是sum，item就是数组遍历的值
          return this.fruitList.reduce((sum, item) => {
         //判断如果这个值的数据是不是选中的，如果是，就直接让初始值0+上这个数值
            if (item.isChecked) {
              return sum + item.num
            } else {
          //如果不是，直接返回初始值
              return sum
            }
          }, 0) //这个0是初始值
        },

      },

二、判读当前对象是否存在该属性

Object.hasOwnProperty("属性名");

三、字符串与数组的相互转换

Arrry.join(",");	// 数组转为字符串
String.split(",");	// 字符串转为数组

四、字符串与JSON的相互转换

JSON.parse(str);	// 字符串转为JSON
JSON.stringify(json);	// JSON转为字符串

五、阻止事件冒泡

event.stopPropagation();		// W3C版
window.event.cancelBubble = true;	// IE版

六、Arrry数组常用操作函数

ArrObj1.concat(ArrObj2)		// 数组合并
ArrayObject.pop()		// 删除并返回数组的最后一个元素
ArrayObject.push(value)		// 向数组的末尾添加一个或更多元素，并返回新的长度
ArrayObject.shift()		// 删除并返回数组的第一个元素
ArrayObject.unshift(value)	// 向数组的开头添加一个或更多元素，并返回新的长度
ArrayObject.splice(index,length,newItem) // 从指定的位置开始删除，删除指定的长度，并插入新值，如果未有未值则只做删除操作，并返回被删除的项
ArrayObject.reverse()		//颠倒数组中元素的顺序