操作数组常用的几种方法：
1. 循环遍历：forEach
- 用来循环遍历数组，它提供一个回调函数，可以用来处理数组的每一个元素，默认没有返回值。回调函数的第一个参数是，数组的每一项，第二个参数树数组中每一项的下标
let arr = [1,2,3,4,5,6] arr.forEach((item,index) => { console.log(item,index) })
2. (也可以做到)：map
- 返回一个新数组，不会对空数组进行检测，不会改变原数组
let userArray = [{ name:'张三'， age:18 },{ name:'李四', age:20 }] let newUserArray = userArray.map(item =>{ return { name:item.name, sex:item.sex } }) //console.log(newUserArray)
3. 过滤数组：filter
- 返回值是一个新的数组,也可以直接return过滤条件
let arr = [1,2,3,4,5] let newArr = arr.filter((item,index,array) =>{ return item >=2 }) //console.log(newArray)
4. 拼接数组：concat
- 用来拼接数组并且返回一个新数组，该方法不会改变原始数组
let arrA = [1,2,3] let arrB = [4,5,6] let arrAB = arrA.concat(arrB) //console.log(arrAB)
5. 遍历数组：every
- 一般用于判断数组中是否有满足条件的数组元素：只有元素都满足条件后则返回true，只要有一项不满足就返回false。
let arr = [1,2,3,4,5,6] let arrA = arr.every(item => item > 0) let arrB = arr.every(item => item > 1) console.log(arrA,arrB) // true false
6. 遍历数组：some
- some和every方法非常类似，在遍历所有元素后，只要有一项元素满足条件则返回true，全部不满足则返回false
let arr = [1,2,3,4,5,6] let arrA = arr.some(item => item > 2) let arrB = arr.some(item => item < 0) console.log(arrA,arrB) // true false
7. 数组求和：reduce
- resuce做的事情很多：比如数组求和、数组求积、数组中元素出现的次数、数组去重等
语法： arr.reduce((prev,cur,index,arr) =>{ ... }.init)
参数：
- prev必需：累计器累计回调的返回值，表示上一次调用回调时的返回值，或初始值init
- cur必需：表示当前正在处理的数组元素
- index可选：表示当前正在处理的数组元素的索引，若提供了init的值，则索引为0，否则为1
- arr可选：表示原数组
- init可选：表示初始值
let arr = [1,2,3,4,5] let sum = arr.reduce((sum,val) => sum + val,0) consoel.log(sum) //15
8. 查找数组中第一个满足条件的属性：find 和 findIndex
- find：找到第一个满足条件的值
- findIndex：方法返回一的是第一个满足条件元素的下标
let arr = [2,4,6,8,10] let arrA = arr.find(item =>{ return item > 6 }) consoel.log(arrA) // 8 找到值 let arrB = arr.findIndex(item =>{ return item > 6 }) console.log(arrB) // 3 找到下标
9. 截取字符串：substring 和 substr
- 相同点：只传一个参数，两者作用相同
let string = '123456' console.log(arr.substr(2)) // '456' console.log(arr.substring(2)) // '456' - 不同点：传2个参数
- substr(startIndex,length) 第二个参数是从起始点开始计算所截取的字符串的长度
- substring(starIndex,endIndex) 第二个参数是截取的字符串最终下标
let string = '123456' console.log(arr.substr(2,3)) // '345' console.log(arr.substring(2,5)) // '3456'
10. 删除数组中的属性：splice
- splice方法可以用来对js的数组进行删除，添加，替换等操作
// 删除：第一个参数为第一项的位置，第二个参数为要删除几个 let arr = ['a','b','c','d'] arr.splice(0,2,'删除的元素') console.log(arr) // ['c','d'] // 插入：第一个参数(插入的位置)，第二个参数(0)，第三个参数(插入的项) arr.splice(1,0,'insert') consoe.log(arr) //['a','insert','b','c','d'] // 替换：第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项） arr.splice(1,1,'insert') consoe.log(arr) //['a','insert','c','d']
11. 截取元素：slice
- 会返回一个新数组，不会修改元数组
let arr = ['a','b','c','d'] let newArr = arr.slice(0,2) console.log(arr) // ['a','b','c','d'] console.log(newArr) // 返回的是被截取的元素 ['a','b']
12. 把数组中所有元素放入一个字符串：join
- 把数组中所有元素放入一个字符串，元素之间通过指定的分隔符进行分割
let string = ['H','E','L','L','O'] let str = arr,join('') console.log(str) //HELLO
13. 往数组末尾添加：push
- 往数组末尾添加，返回值是数组的长度，会改变原数组
let arr = [1,2,3,4,5,6] console.log(arr.push(7,8)) // 8 arr 数组的长度 console.log(arr) // [1,2,3,4,5,6,7,8]
14. 往数组前面添加：unshift
- 往数组前面添加，返回值是数组的长度，会改变原数组
let arr = [1,2,3,4,5,6] console.log(arr.unshift(7,8)) // 8 arr 数组的长度 console.log(arr) // [7,8,1,2,3,4,5,6]
15. 从数组末尾删除：pop
- 返回值是删除的元素，会改变原数组
let arr = [1,2,3,4,5,6] console.log(arr.pop()) // 6 删除的值 console.log(arr) // [1,2,3,4,5]
16. 反转数组：reverse
- 做顺序翻转
let arr = [1,2,3,4,5,6] console.log(arr.reverse()) //[5,4,3,2,1]
17. 数组排序：sort
- 按照Unicode code位置排序，默认升序
let str = ['e','z','o','k','v'] let num = [5,8,1,3,0,9] console.log(str.sort()) // ["e", "k", "o", "v", "z"] console.log(num.sort()) // [0, 1, 3, 5, 8, 9]
18. 查找：indexOf 和 lastIndexOf
- indexOf 和 lastIndexOf 都接受两个参数L查找的值、查找的起始位置，不存在时返回 -1；存在返回下标位置
- indexOf是从前往后查找，lastIndexOf是从后往前查找
let arr = [2,7,6,8,5,7,1] // 传入一个参数 console.log(arr.indexOf(4)) // -1 不存在 console.log(arr.indexOf(7)) // 1 找到的第一个元素的下标位置 // 传入两个参数 console.log(arr.indexOf(7,3)) // 5
操作对象常用的几种方法：
1. Object.defineProperty(obj,porperty,detail)：
- 作用是在一个对象上定义一个新属性或者修改一个对象的现有属性并返回这个对象，Vue做数据拦截使用
let userObj = {} let userName = '张三' Object.defineProperty(userObj,'name',{ get: function() { console.log('触发get方法') return userName }, set: function(val) { console.log('触发set方法') userName = val } }) // 读取person对象的name属性时触发get方法 console.log(userObj.name) // 对student.name进行修改，触发set方法 userObj.name = '李四' console.log(userObj.name)
2. Object.is()
- 是一种判断两个值是否相同的方法，与严格相等运算符(===)几乎相同
- 在(===)的基础上修复了一些特殊情况下的失误：+0 和 -0、NaN 和 NaN
Object.is(8,8) //true Object.is(8,'8') //false Object.is(8,true) //false
3. Object.crected()
- 使用指定对象作为原型去创建一个新的对象，并可以为新对象直接添加属性
let obj = { a:a1, b:b2 } let obj1 = Object.create(obj) console.log(obj1) // {} 空对象 console.log(obj2.a) // a1 可以访问到原对象中的属性 说明原对象是新对象的原型
4. Object.assign()
- 复制与合并 - 用于将所有可枚举的自身属性从一个或多个源对象复制到目标对象，
- 语法： Object.assign(target,...sources)
let obj1 = { a:1 } let obj2 = Object.assign({},obj1) console.log(obj2) // { a:1 } // 合并多个多选 const obj = { firstname:"John", lastname:"Doe", age:50 }; const obj2 = { other: "cat" }; const obj3 = { car: "Benz" }; const obj4 = Object.assign(obj1,obj2,obj3) console.log(obj4) // ...
5. Object.keys()
- 会返回一个由一个给定对象的自身可枚举属性组成的数组
let obj = {name:'张三',age:20} Object.keys(obj) //[name,age]
6. Object.values()
- 会返回一个由一个给定对象的自身可枚举属性值组成的数组，和Object.keys()相似
let obj = {name:'张三',age:20} Object.values(obj) //['张三',20]
7. obj.hasOwnProperty()
- 判断对象某个属性是否存在
const obj = { name: '张三', age: 20, sex: 'male' } console.log(obj,hasOwnProperty('name')) // true
8. for...in
- 遍历对象中所有可枚举的属性，包括自有属性和继承属性
const obj = { itemA: 'itemA', itemB: 'itemB' } var newObj = Object.create(obj) newObj.newItemA = 'newItemA' newObj.newItemB = 'newItemB' for(i in newObj) { console.log(i) // newItemA newItemB itemA itemB } // 现在将其中一个属性变为不可枚举 Object.defineProperty(newObj,'newItemA',{ enumerable: false }) for(i in newObj) { console.log(i) // newItemB itemA itemB }
9. Object.entries()
- 该方法返回一个对象：key和value键值对组成的数组
const obj = {a:1,b:2}
