ES6及ES6+对象、数组方法使用（含力扣题目）持续更新...

于 2021-08-05 16:42:31 发布
阅读量249 收藏 2
点赞数 3
分类专栏： JavaScript 前端基础 面试 文章标签： javascript js 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baoyin0822/article/details/119421656
版权

1.apply()方法：

  • 通过apply可以编写用于不同对象的方法
var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"

  • person的fullName方法被应用到person1

  • call()和apply()之间的区别是

    • call()方法分别接受参数
    • apply()方法接受数组形式的参数
    • 如果要使用数组而不是参数列表，则apply()方法非常方便

  • 带参数的apply()方法

    var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);

  • 与call()方法的对比

    var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");

  • 注意的是，call()方法和apply()方法传参时有很大的区别，apply会识别数组中的每一项出来作为参数进行传递，而call不会识别数组中的每一项，而是将整个数组作为一个参数传递进去

  • apply()方法的使用

    • 数组上模拟max方法，由于Math.max()方法只能找到数字列表中的最大数字，不能找到数组中的，借助apply找到数组中的最大值：

      Math.max.apply(null, [1,2,3]) // 返回结果为3

      Math.max.apply(Math, [1,2,3]) // 返回结果为3

      Math.max.apply(" ", [1,2,3]) // 返回结果为3

      Math.max.apply(0, [1,2,3]) // 返回结果为3

  • 在JavaScript严格模式下，如果apply()方法的第一个参数不是对象，则它将成为被调用函数的所有者（对象）。在非严格模式下，它成为全局对象

2.reduce()方法：

  • 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

  • reduce()方法可以作为一个高阶函数，用于函数的compose，需要注意：reduce()对于空数组是不会执行回调函数的；

  • 语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

    • function(total,currentValue,currentIndex,arr)：必需。用于执行每个数组元素的函数。
    • total：必需。初始值，或者计算结束后的返回值
    • currentValue：必需。当前元素值
    • currentIndex：可选。当前元素的索引
    • arr：可选。当前元素所属的数组对象
    • initalValue：可选。传递给函数的初始值
    var arr = [1,2,3,4]
var sum = arr.reduce(function(prev, cur, index, arr){
    console.log(prev, cur, index)
    return prev + cur // 这个返回结果就是下一次prev的值
})
console.log(arr, sum)
/*
打印结果：
121
332
643
[1,2,3,4] 10
index是从1开始的，第一次的prev的值是数组的第一个值，数组长度为4，但是reduce函数循环3次
*/

    var  arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0) //注意这里设置了初始值
console.log(arr, sum);
/*
打印结果：
010
121
332
643
[1,2,3,4] 10
index是从0开始的，第一次的prev的值是我们设置的初始值0，数组长度是4，reduce函数循环4次
*/

  • 如果没有提供total，reduce会从索引1的地方开始执行function函数，跳过第一个索引。如果提供了total，从索引0开始。

  • 如果传入空数组

    var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
//报错，"TypeError: Reduce of empty array with no initial value"

    // 设置了初始值后就不会报错
var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0)
console.log(arr, sum); // [] 0

  • reduce()的用法

    • 数组求和、求乘积
    var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24
    • 计算元素出现的次数
    let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}
    • 数组去重
    let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]
    • 将二维数组转为一维
    let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]
    • 将多维数组转为一维
    let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
    • 对象里的属性求和
    var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

3.字符串截取的方法对比，力扣（剑指Offer58）

  • str.substr(startIndex,length)
    • 开始截取的位置和截取的长度
    • 截取的不包含长度所在的那一位
  • str.substring(startIndex,stopIndex)
    • 字符串截取，从start开始截取到序号为stopIndex之间的字符串
    • 截取的字符串不包含结束截取的那一位
  • str.slice(startIndex,stopIndex)
    • 字符串截取，从start开始截取到序号为stopIndex之间的字符串
    • 截取的字符串不包含结束截取的那一位

4.map()方法：

  • map()方法创建一个新数组，数组中的元素为原始数组调用函数处理后的值

  • map()方法按照原始数组元素顺序依次处理元素

    • map()不会对空数组进行检测
    • map()不会改变原始数组
    var array1 = [1,4,9,16];
const map1 = array1.map(x => x * 2);
console.log(map1); // [2,8,18,32]

  • 语法：array.map(function(currentValue,index,arr), thisValue)

    • function(currentValue, index,arr)
    • currentValue：必需。当前元素的值
    • index：可选。当前元素的索引值
    • arr：可选。当前元素属于的数组对象
    • thisValue：可选。对象作为该执行回调时使用，传递给函数，用作this的值，如果省略或传入null、undefined，那么回调函数的this为全局对象；

  • 取出二维数组中的数组之和最大值

    /*
示例 1：
输入：accounts = [[1,2,3],[3,2,1]]
输出：6
解释：
第 1 位客户的资产总量 = 1 + 2 + 3 = 6
第 2 位客户的资产总量 = 3 + 2 + 1 = 6
两位客户都是最富有的，资产总量都是 6 ，所以返回 6 。
*/
var maximumWealth = (accounts) => {
    return Math.max(...accounts.map(item => item.reduce((t, n) => t + n, 0)))
}
console.log(maximumWealth([
    [1, 5],
    [7, 3],
    [3, 5]
])) // 10

5.includes()方法：

  • 用来判断一个数组中是否包含一个指定的值，如果是返回true，否则false

  • 语法：arr.includes(searchElement, fromIndex)

    • searchElement：必须，需要查找的元素值
    • fromIndex：可选，从该索引处开始查找searchElement，如果为负值则按升序从array.length + fromIndex的索引处开始搜索，默认是0
    [1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

let site = ['runoob', 'google', 'taobao'];
site.includes('runoob'); // true 
site.includes('baidu'); // false

6. filter()方法：

  • 用于创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
  • 注意：
    • filter()不会改变原数组
    • filter()不会对空数组进行检测
  • 语法：array.filter(function(currentValue,index,arr),thisValue)
    • function：必需。函数，数组中的每个元素都会执行这个函数
    • currentValue：必需。当前元素的值
    • index：可选。当前元素的索引值
    • arr：可选。当前元素属于的数组对象
    • thisValue：可选。对象作为该执行回调时使用，传递给函数，用作this的值。如果省略，this的值为undefined

6.1 结合filter()和includes()方法实现模糊查询：

  • 代码如下（筛选出名字中包含“小”的数据；筛选出名字包含“华”的数据）：
let arr = [{id: 1, name: '小明'}, {id: 2, name: '小红'}, {id: 3, name: '小华'}, {id: 4, name: '大刚'}, {id: 5, name: '李华'}]
const filterArr1 = arr.filter(i => i.name.includes('小'))
const filterArr2 = arr.filter(j => j.name.includes('华'))
console.log(filterArr1) // [{id: 1, name: '小明'}, {id: 2, name: '小红'}, {id: 3, name: '小华'}]
console.log(filterArr2) // [{id: 3, name: '小华'}, {id: 5, name: '李华'}]

7. forEach()方法：

  • 用于调用数组的每个元素，并将元素传递给回调函数

  • 对空数组不会执行回调函数

  • 语法：array.forEach(function(currentValue, index, arr), thisValue)

    • function：必需。数组中每个元素需要调用的函数
    • currentValue：必需。当前元素
    • index：可选。当前元素的索引值
    • arr：可选。当前元素所属的数组对象
    • thisValue：可选。传递给函数的值一般用this值，如果参数为空，undefined会传递给this值

  • 不支持continue和break语句，可以通过some和every来实现

    • 实现continue

      var arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
    if (item === 3) {
        return;
    }
    console.log(item);
});
// 跳过3的元素，打印结果为1 2 4 5

      var arr = [1, 2, 3, 4, 5];
arr.some(function (item) {
        if (item === 2) {
                return;  // 不能为 return false
        }
        console.log(item);
});
// 跳过索引为2的元素，打印结果为1 2 4 5

    • break实现

      var arr = [1, 2, 3, 4, 5];
arr.every(function (item) {
        console.log(item);
        return item !== 3;
});
// 找到3和之前的所有元素，打印结果为1 2 3 false

8. fill()方法

  • 用于数组中添加指定的元素，使用默认内容初始化数组

  • 语法：array.fill(value,start,end)

    • value：填充值
    • start：可选。填充起始位置
    • end：可选。填充结束位置，实际结束位置为end-1
    const arr = [1,2,3]
arr.fill(6)
console.log(arr) // [6,6,6]

9.set()方法

  • set对象是值的集合，可以按照插入的顺序迭代它的元素，set中的元素只会出现一次，即set中的元素是唯一的

  • set实例的属性和方法

    • size：返回set实力的成员总数；
    • add(value)：添加某个值，返回Set解构本身；
    • delete(value)：删除某个值，返回一个布尔值，表示删除是否成功；
    • has(value)：返回一个布尔值，表示该值是否为set的成员；
    • clear()：清除所有成员，没有返回值；

  • set方法的4个遍历方法，用于遍历成员

    • keys()：返回键名的遍历器；
    • values()：返回键值的遍历器；
    • entries()：返回键值对的遍历器；
    • for…of…：遍历实例中的每一项；
    let set = new Set([a:'1',b: '2', c:'3']);

for (let item of set.keys()) {
  console.log(item);
}
// 1
// 2
// 3

for (let item of set.values()) {
  console.log(item);
}
// 1
// 2
// 3

for (let item of set.entries()) {
  console.log(item);
}
// ["1", "1"]
// ["2", "2"]
// ["3", "3"]

let myArr= new Set(['1', '2', '3']);

for (let x of myArr) {
  console.log(x);
}
// 1
// 2
// 3

10.assign()方法

  • assign()方法用于对象属性的合并，克隆对象（浅拷贝），对象添加多个方法

  • 语法assign(要合并的对象,要合并的对象,要合并的对象,...)

    • 合并多个对象
    const obj1 = {name: '张三', age: 20}
const obj2 = {address: '成都', hobby: 'code'}
const obj = Object.assign(obj1, obj2)
console.log(obj) // {name: '张三', age: 20, address: '成都', hobby: 'code'}
    • 克隆对象（浅拷贝）
    const obj = {name: '张三', age: 20}
const obj1 = Object.assign({}, obj)
console.log(obj1) // {name: '张三', age: 20}
    • 为对象添加多个方法
    Object.assign(SomeClass.prototype, {
    someMethod(arg1, arg2) {},
    anotherMethod() {}
})
// 与合并对象思想一样，两个方法已经挂载到SomeClass的原型对象上了
BreenCL
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值