Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ES6] 6.Array.from() 与 Array.reduce() #337

Open
qiilee opened this issue Oct 8, 2019 · 0 comments
Open

[ES6] 6.Array.from() 与 Array.reduce() #337

qiilee opened this issue Oct 8, 2019 · 0 comments
Labels

Comments

@qiilee
Copy link
Member

qiilee commented Oct 8, 2019

答案:

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组
Array.reduce()方法对累加器和数组中的每个元素 (从左到右)应用一个函数,将其减少为单个值。

解析:

Array.from()

// 那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象。

// 1、将类数组对象转换为真正数组:

let arrayLike = {
  0: "tom",
  1: "65",
  2: "男",
  3: ["jane", "john", "Mary"],
  length: 4
};
let arr = Array.from(arrayLike);
console.log(arr); // ['tom','65','男',['jane','john','Mary']]

// 那么,如果将上面代码中length属性去掉呢?实践证明,答案会是一个长度为0的空数组。

// 这里将代码再改一下,就是具有length属性,但是对象的属性名不再是数字类型的,而是其他字符串型的,代码如下:

let arrayLike = {
  name: "tom",
  age: "65",
  sex: "男",
  friends: ["jane", "john", "Mary"],
  length: 4
};
let arr = Array.from(arrayLike);
console.log(arr); // [ undefined, undefined, undefined, undefined ]

// 会发现结果是长度为4,元素均为undefined的数组

// 由此可见,要将一个类数组对象转换为一个真正的数组,必须具备以下条件:

// 1、该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。

// 2、该类数组对象的属性名必须为数值型或字符串型的数字

// ps: 该类数组对象的属性名可以加引号,也可以不加引号

// 2、将Set结构的数据转换为真正的数组:

let arr = [12, 45, 97, 9797, 564, 134, 45642];
let set = new Set(arr);
console.log(Array.from(set)); // [ 12, 45, 97, 9797, 564, 134, 45642 ]

//  Array.from还可以接受第二个参数,作用类似于数组的map方法,用来对每个元素进行处理,将处理后的值放入返回的数组。如下:

let arr = [12, 45, 97, 9797, 564, 134, 45642];
let set = new Set(arr);
console.log(Array.from(set, item => item + 1)); // [ 13, 46, 98, 9798, 565, 135, 45643 ]

// 3、将字符串转换为数组:

let str = "hello world!";
console.log(Array.from(str)); // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d", "!"]

// 4、Array.from参数是一个真正的数组:

console.log(Array.from([12, 45, 47, 56, 213, 4654, 154]));
// 像这种情况,Array.from会返回一个一模一样的新数组

参考

Array.reduce()

语法:

array.reduce(function(accumulator, currentValue, currentIndex, array), initialValue);

accumulator:累加器,即函数上一次调用的返回值。第一次的时候为 initialValue || arr[0]

currentValue:数组中函数正在处理的的值。第一次的时候initialValue || arr[1]

currentIndex:数据中正在处理的元素索引,如果提供了 initialValue ,从0开始;否则从1开始

array: 调用 reduce 的数组

initialValue:可选项,累加器的初始值。没有时,累加器第一次的值为currentValue;注意:在对没有设置初始值的空数组调用reduce方法时会报错。
//无初始值
[1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}); // 10
callback accumulator currentValue currentIndex array return value
first call 1(数组第一个元素) 2(数组第二个元素) 1(无初始值为 1) [1, 2, 3, 4] 3
second call 3 3 2 [1, 2, 3, 4] 6
third call 6 4 3 [1, 2, 3, 4] 10
//有初始值
[1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10); // 20
callback accumulator currentValue currentIndex array return value
first call 10(初始值) 1(数组第一个元素) 0(有初始值为 0) [1, 2, 3, 4] 11
second call 11 2 1 [1, 2, 3, 4] 13
third call 13 3 2 [1, 2, 3, 4] 16
fourth call 16 4 3 [1, 2, 3, 4] 20
//1.数组元素求和
[1, 2, 3, 4].reduce((a, b) => a + b); //10

//2.二维数组转化为一维数组
[[1, 2], [3, 4], [5, 6]]
  .reduce((a, b) => a.concat(b), []) //[1, 2, 3, 4, 5, 6]

  [
    //3.计算数组中元素出现的次数
    (1, 2, 3, 1, 2, 3, 4)
  ].reduce((items, item) => {
    if (item in items) {
      items[item]++;
    } else {
      items[item] = 1;
    }
    return items;
  }, {}) //{1: 2, 2: 2, 3: 2, 4: 1}

  [
    //数组去重①
    (1, 2, 3, 1, 2, 3, 4, 4, 5)
  ].reduce((init, current) => {
    if (init.length === 0 || init.indexOf(current) === -1) {
      init.push(current);
    }
    return init;
  }, []) //[1, 2, 3, 4, 5]
  [
    //数组去重②
    (1, 2, 3, 1, 2, 3, 4, 4, 5)
  ].sort()
  .reduce((init, current) => {
    if (init.length === 0 || init[init.length - 1] !== current) {
      init.push(current);
    }
    return init;
  }, []); //[1, 2, 3, 4, 5]

参考

@qiilee qiilee added the ES6 label Oct 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant