数组的方法

javascript

// 相同的阵列
var people = [
  {
    name : 'Casper' ,
    like : '锅烧意面' ,
    age : 18
  },
  {
    name : 'Wang' ,
    like : '炒面' ,
    age : 24
  },
  {
    name : 'Bobo' ,
    like : '萝卜泥' ,
    age : 1
  },
  {
    name : '卤蛋' ,
    like : '萝卜泥' ,
    age : 3
  }
];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

from

将一个数组或者类数组变成数组，会复制一份

let newArr = Array.from(oldArr);

of

of 是为了将一组数值，转换为数组

console.log(Array(3), Array(3).length);
console.log(Array.of(3), Array.of(3).length);

1
2

copyWithin

copyWithin(target, start = 0, end = this.length) 覆盖目标的下标开始的下标结束的后一个的下标

[1, 2, 3, 4, 5].copyWithin(0, 1, 2);

filter()

filter() 会回传一个阵列，其条件是 return 后方为 true 的物件，很适合用在搜寻符合条件的资料。

var filterEmpty = people.filter( function ( item, index, array ) {
});
console.log(filterEmpty);     //没有条件，会是一个空阵列

var filterAgeThan5 = people.filter( function ( item, index, array ) {
  return item.age > 5 ;        //取得大于五岁的   如果这边符合条件 只要为ture即可
});
console .log(filterAgeThan5);    // Casper, Wang这两个物件

1
2
3
4
5
6
7
8

find()

find() 与 filter() 很像，但 find() 只会回传一次值，且是第一次为 true 的值。

javascript

var findEmpty = people.find( function ( item, index, array ) {
});
console .log(findEmpty);           //没有条件，会是undefined

var findAgeThan5 = people.find( function ( item, index, array ) {
  return item.age > 5 ;            //取得大于五岁的
});

console .log(findAgeThan5);        //虽然答案有两个，但只会回传Casper这一个物件
var findLike = people.find( function ( item, index, array ) {
  return item.like === '萝卜泥' ;   //取得阵列like === '萝卜泥'
});
console .log(findLike);            //虽然答案有两个，但只会回传第一个Bobo物件

1
2
3
4
5
6
7
8
9
10
11
12
13

forEach()

forEach 是这几个阵列函式最单纯的一个，不会额外回传值，只单纯执行每个阵列内的物件或值。

javascript

var forEachIt = people.forEach( function ( item, index, array ) {
  console .log(item, index, array); //物件,索引,全部阵列
  return item;                      // forEach没在return的，所以这边写了也没用
});

console .log(forEachIt);             // undefined

people.forEach( function ( item, index, array ) {
  item.age = item.age + 1 ;          // forEach就如同for，不过写法更容易
});
console .log(people);                //全部age + 1

1
2
3
4
5
6
7
8
9
10
11

map()

使用 map() 时他需要回传一个值，他会透过函式内所回传的值组合成一个阵列。如果不回传则是 undefined 回传数量等于原始阵列的长度这很适合将原始的变数运算后重新组合一个新的阵列。

javascript

var mapEmpty = people.map( function ( item, index, array ) {
});
console .log(mapEmpty);     // [undefined, undefined, undefined, undefined]

var mapAgeThan5 = people.map( function ( item, index, array ) {
  return item.age > 5 ;     //比较大于五岁的
});
console .log(mapAgeThan5); // [true, true, false, false]

var mapAgeThan5_2 = people.map( function ( item, index, array ) {
  // 错误示范
  if (item.age > 5 ) {
    return item;               //回传大于五岁的
  }
  return  false ;                //别以为空的或是false就不会回传
});
console .log(mapAgeThan5_2);    // [{name: 'Casper'...}, {name: 'Wang'...}, false, false]
var mapEat = people.map( function ( item, index, array ) {
  if (item.like !== '萝卜泥' ) {
    return  ` ${item.like}好吃` ;
  } else {
    return  ` ${item.like}不好吃` ;
  }
});
console .log(mapEat);           // ["锅烧意面好吃", "炒面好吃", "萝卜泥不好吃", "萝卜泥不好吃"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

every()

every() 可以检查所有的阵列是否符合条件，这仅会回传一个值 trueor false，可以用来检查阵列中的内容是否符合特定条件。

javascript

var ans = array.every( function ( item, index, array ) {
  console .log(item, index, array); //物件,索引,全部阵列
  return item.age > 10  //当全部age大于10才能回传true
});
console .log(ans); // false:只要有部分不符合，则为false

var ans2 = array.every( function ( item, index, array ) {
  return item.age < 25
});
console .log(ans2); // true:全部age都小于25

1
2
3
4
5
6
7
8
9
10

some()

some() 与 every() 非常接近，都是回传 true or false，差异仅在 every() 需完全符合，some() 仅需要部分符合。

javascript

var ans = people.some( function ( item, index, array ) {
  return item.age > 10  //当全部age大于10才能回传true
});
console .log(ans);   // true:只要有部分符合，则为true

var ans2 = people.some( function ( item, index, array ) {
  return item.age < 25
});
console .log(ans2); // true:只要有部分符合，则为true

var ans2 = people.some( function ( item, index, array ) {
  return item.age > 25
});
console .log(ans2); // false:全部都不符合则为false

1
2
3
4
5
6
7
8
9
10
11
12
13
14

reduce()

reduce() 和其他几个差异就很大了，他可以与前一个回传的值再次作运算，参数包含以下： accumulator: 前一个参数，如果是第一个阵列的话，值是以另外传入或初始化的值 currentValue: 当前变数 currentIndex: 当前索引 array: 全部阵列

javascript

var reduceEmpty = people.reduce( function ( accumulator, currentValue, currentIndex, array ) {
});
console .log(reduceEmpty);                  //没有条件，会是undefined

var reducePlus = people.reduce( function ( accumulator, currentValue, currentIndex, array ) {
  // 分别为前一个回传值, 目前值, 当前索引值
  console .log(accumulator, currentValue, currentIndex);
  return accumulator + currentValue.age;   //与前一个值相加
}, 0 );                                     //传入初始化值为0
console .log(reducePlus);                   //总和为46

var reducePlus = people.reduce( function ( accumulator, currentValue, currentIndex, array ) {
  console .log( 'reduce' , accumulator, currentValue, currentIndex)
  return  Math .max( accumulator, currentValue.age ); //与前一个值比较哪个大
}, 0 );
console .log(reducePlus);                   //最大值为24

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

数组的方法 #

from #

of #

copyWithin #

filter() #

find() #

forEach() #

map() #

every() #

some() #

reduce() #

数组的方法

from

of

copyWithin

filter()

find()

forEach()

map()

every()

some()

reduce()