js 数组api

南易_站长

阅读量：11841

js 数组api

# 总结一下JS数组API

### 静态方法与实例方法

首先，分清一下Array对象上的静态方法和实例方法，静态方法就是只存在于Array对象上的方法，比如用Array.xxx()调用，而实例方法是写在原型链上的，各种数组和Array共享，可以直接调用比如[].xxx()

### 小工具

Array.length

> 除了直接拿来用，还可以判断数组是否为空，也可以直接截短数组(不常用)

Array.isArray

> 判断数组类型，不用typeof和instanceof

Array.from

> 类数组转数组,像DOM的一些集合，arguments，还有Set/Map/String等数据结构都可以转

* 在某些情况不能直接引用原数组的可以直接使用此方法拷贝

Array.of

> 多参数转数组，和new Array不一样

fill

> 可以填充元素，常常和new Array()一起用

toString/toLocalString：

> 重写了Object的相关方法，返回经join连接的字符串

### 增删改查

pop/push/shift/unshift

> 模拟栈和队列常用，要注意出队是shift

find/findIndex/includes/indexOf/lastIndexOf

> 查值查索引(传回调)，模糊查找，顺着查倒着查索引

join

> 数组转字符串，和字符串的split方法互相照应

slice/concat/splice：

> 拆和合，还有一个增删改都能干的splice  
> concat还可以将非数组值合并到数组里

copyWithin:

> 浅复制,目前还没用到过

### 迭代相关

keys/enenties/values

> 都是返回一个迭代器对象，可以配合of或者in循环获取内容

### 函数式编程工具函数

every/some

> 逻辑里面的所有和存在

sort/reverse

> 排序和反转，算法题经常用

forEach/map/filter

> 遍历/映射/过滤，根据特定场景选择使用

reduce/reduceRight

> 累加/反向累加，设定初始值可以做一些很酷的事情

## 详解

* **1）concat方法：不会改变原数组，会返回一个拼接后的新数组**

```jsx
  var arr1 = [1,2,3];
  var arr2 = [3,4];
  arr1.concat(arr2);
  console.log(arr1.length); // 3
  console.log(arr1); // [1, 2, 3]
  console.log(arr2); // [3, 4]
  console.log(arr1.concat(arr2)) // [1, 2, 3, 3, 4]

```

* **2）slice方法：不会改变原数组，会返回一个截取后的新数组**

```jsx
  var arr = [1,2,3,4,5,6];
  arr.slice(1,4);
  console.log(arr); // (6) [1, 2, 3, 4, 5, 6]
  console.log(arr.length); // 6
  console.log(arr.slice(1,4)); // (3) [2, 3, 4]

```

```jsx
// slice方法的手动实现，不绑定到原型链上
  function my_slice(start, end) {
    var start = start || 0;
    var end = end || this.length; //this指向调用的对象，当用了call后，能够改变this的指向，也就是指向传进来的对象，这是关键
    var result = [];
    for (var i = start; i < end; i++) {
      result.push(this[i]);
    }
    return result;
  }
  arr = [1, 2, 3, 4, 5, 6];
  console.log(my_slice.call(arr)); // [1, 2, 3, 4, 5, 6]
  console.log(my_slice.call(arr, 1, 4)); // [2, 3, 4]
  console.log(my_slice.call(arr, 1, 6)); // [2, 3, 4, 5, 6]

```

```jsx
// // slice方法的手动实现，绑定到原型链上
  Array.prototype.my_slice = function(start, end) {
    var result = [];
    var start = start || 0;
    var end = end || this.length;
    for (var i = start; i < end; i++) {
      result.push(this[i]);
    }
    return result;
  }

var arr = [1,2,3,4,5,6];
  console.log(arr.my_slice()); // [1, 2, 3, 4, 5, 6]
  console.log(arr.my_slice(1,4)); // [2, 3, 4]
  console.log(arr.my_slice(1,6)); // [2, 3, 4, 5, 6]

```

* **3）join方法：不会改变原数组，会返回一个字符串**

```jsx
  var arr = [1,2,3,4,5];
  arr.join('-');
  console.log(arr); // [1, 2, 3, 4, 5]
  console.log(arr.length); // 5
  console.log(arr.join('-')); // '1-2-3-4-5'

```

* 4）**push/pop方法：会改变原数组**

```jsx
  var arr = [1, 2, 3, 4, 5];
  arr.push(6);
  console.log(arr); // (6) [1, 2, 3, 4, 5, 6]
  console.log(arr.push(7)); // 7
  console.log(arr); // (7) [1, 2, 3, 4, 5, 6, 7]
  arr.pop();
  console.log(arr); // (6) [1, 2, 3, 4, 5, 6]
  console.log(arr.pop()); // 6

```

* 5）**shift/unshift方法：会改变数组**

```jsx
  var arr = [1,2,3,4,5];
  arr.shift();
  console.log(arr); // (4) [2, 3, 4, 5]
  console.log(arr.length); // 4
  arr.unshift(6);
  console.log(arr); // (5) [6, 2, 3, 4, 5]
  console.log(arr.length); // 5

```

* 6）**sort方法：会改变数组**

```jsx
  var arr = [21, 1, 3, 45, 2];
  arr.sort();
  console.log(arr); // (5) [1, 2, 21, 3, 45]
  arr.sort(function(a, b) {
    if (a < b) {
      return -1;
    } else if (a > b) {
      return 1;
    } else {
      return 0;
    }
  })
  console.log(arr); // (5) [1, 2, 3, 21, 45]

```

* 7）**reverse方法：会改变数组**

```jsx
  var arr = [21, 1, 3, 45, 2];
  arr.reverse();
  console.log(arr); // (5) [2, 45, 3, 1, 21]

```

* 8）**splice方法：会改变数组，并以数组形式返回被删除的部分，插入时返回空数组**

```jsx
  var arr = [1, 2, 3, 4, 5];
  console.log(arr.splice(1,3)); // (3) [2, 3, 4] 返回被删除的数
  console.log(arr); // (2) [1, 5]
  var arr1 = [1,2,3,4,5];
  console.log(arr1.splice(1,0,7,8)); // [] 插入时返回空数组
  console.log(arr1); // (7) [1, 7, 8, 2, 3, 4, 5]
  var arr2 = [1,2,3,4,5];
  console.log(arr2.splice(1,1,7,8)); // [2] 返回被替换掉的数
  console.log(arr2); // (6) [1, 7, 8, 3, 4, 5]

```

* 9）**indexOf/lastIndexOf方法：不会改变数组，返回指定数值的数组下标**

```jsx
  var arr = [1, 2, 3, 2, 5];
  console.log(arr.indexOf(2)); // 1 返回值为2的数组的下标
  console.log(arr.indexOf(2,2)); // 3 第一个参数表示要查找的数，第二个参数表示查找起点位置的索引
  console.log(arr.indexOf(6)); // -1
  console.log(arr.lastIndexOf(2)); // 3 从数组的末尾开始向前查找，返回正序下标
  console.log(arr.lastIndexOf(2,2)); // 1 从数组的末尾开始向前查找，返回正序下标

```

* 10）**forEach方法：不会改变数组且方法没有返回值**

```jsx
  var arr = [1, 2, 3, 2, 5];
  arr.forEach(function(a, index, array) { // 循环遍历,对每一项运行给定函数,这个方法没有返回值
  console.log(a, index, array === arr); // 参数分别为：遍历的数组内容,内容对应的数组索引,数组本身
    // 1 0 true
    // 2 1 true
    // 3 2 true
    // 2 3 true
    // 5 4 true
  })
  console.log(arr); // (5) [1, 2, 3, 2, 5]

```

```jsx
  var arr = [1, 2, 3, 2, 5];
  var arr1 = arr.forEach(function(a) { // forEach方法没有返回值
    return a * 2;
  })
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(arr1); // undefined

```

* 11）**map方法：不会改变原数组且返回一个新数组**

```jsx
  var arr = [1, 2, 3, 2, 5];
  var arr1 = arr.map(function(a) { // 对每一项运行给定函数，返回每次函数调用的结果组成的数组
    return a * 2;
  })
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(arr1); // (5) [2, 4, 6, 4, 10]

```

* 12）**filter方法：不会改变原数组，且返回一个新数组**

```jsx
  var arr = [1, 2, 3, 2, 5];
  var arr1 = arr.filter(function(a) { // 返回满足过滤条件组成的数组
    return a > 2;
  })
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(arr1); // (2) [3, 5]

```

* 13）**every方法：不会改变原数组，且返回一个布尔值**

```jsx
  var arr = [1, 2, 3, 2, 5];
  var arr1 = arr.every(function(a) { // 判断数组中每一项都是否满足条件，所有项都满足条件才会返回true
    return a > 2;
  })
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(arr1); // false

```

* 14）**some方法：不会改变原数组，且返回一个布尔值**

```jsx
  var arr = [1, 2, 3, 2, 5];
  var arr1 = arr.some(function(a) { // 判断数组中每一项都是否满足条件，只要有一项满足条件就会返回true
    return a > 2;
  })
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(arr1); // true

```

* 15）**reduce方法：不会改变原数组，迭代数组的所有项，然后构建一个最终返回的值，从数组的第一项开始，逐个遍历到最后**

```jsx
  var arr = [1, 2, 3, 2, 5];
  // reduce方法有两个参数：在每一项上调用的函数和（可选的）作为归并基础的初始值
  // reduce方法的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象
  // 这个函数返回的任何值都会作为第一个参数自动传给下一项
  // 第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数是数组的第二项
  var sum = arr.reduce(function(pre, cur, index, array) { 
    return pre + cur;
  }, 10)
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(sum); // 23

```

* 16）**reduceRight：不会改变原数组，迭代数组的所有项，从数组的最后一项开始，向前遍历到第一项**

```jsx
  var arr = [1, 2, 3, 2, 5];
  var sum = arr.reduceRight(function(pre, cur, index, array) { 
    return pre + cur;
  }, 10)
  console.log(arr); // (5) [1, 2, 3, 2, 5]
  console.log(sum); // 23

```

* 17）**fill：会改变原数组，元素填充**

```jsx
// arr.fill(value, start, end)
  var arr = [1, 2, 3, 2, 5];
  arr.fill(1,2,4); // 用1填充数组中从起始索引到终止索引内的全部元素
  console.log(arr); // (5) [1, 2, 1, 1, 5]

```

* 18）**find：不会改变原数组，返回数组中满足提供的测试函数的第一个元素的值**

```jsx
  function big(element) {
    return element >= 2;
  }
  var arr = [1, 2, 3, 2, 5];
  var arr1 = arr.find(big); // 返回数组中满足提供的测试函数的第一个元素的值
  console.log(arr1); // 2 
  console.log(arr); // (5) [1, 2, 3, 2, 5]

```

* 19）**includes方法：用来判断一个数组是否包含一个指定的值，返回 true或 false**

```jsx
  var arr = [1, 2, 3, 2, 5];
  console.log(arr.includes(2)); // true
  console.log(arr.includes(6)); // false

```

* 20）**toLocaleString：不会改变原数组，返回一个字符串表示数组中的元素，数组中的元素将使用各自的 toLocaleString 方法转成字符串，这些字符串将使用一个特定语言环境的字符串（例如一个逗号 “,”）隔开**

```jsx
  var arr = [11111111, 2222222];
  console.log(arr.toLocaleString()); // 11,111,111,2,222,222
  console.log(arr); // (2) [11111111, 2222222]

```

* 21）**toString：不会改变原数组，返回一个字符串，表示指定的数组及其元素**

```jsx
  var arr = [1,2,3];
  arr.toString();
  console.log(arr.toString()); // '1,2,3'
  console.log(arr); // (3) [1, 2, 3]

```

* 22）**Array.from：将伪数组或可迭代对象(包括arguments Array,Map,Set,String…)转换成数组对象**

```csharp
// arrayLike：想要转换成数组的伪数组对象或可迭代对象
// mapFn (可选参数)：如果指定了该参数，新数组中的每个元素会执行该回调函数
// thisArg (可选参数)：可选参数，执行回调函数 mapFn 时 this 对象
// 返回值：一个新的数组实例
Array.from(arrayLike, mapFn, thisArg)

```

**toString()方法与toLocalString()方法区别：**

1）toLocalString()是调用每个数组元素的 toLocaleString() 方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串；

2）toString()方法获取的是String(传统字符串),而toLocaleString()方法获取的是LocaleString(本地环境字符串)；

3）如果你开发的脚本在世界范围都有人使用，那么将对象转换成字符串时请使用toString()方法来完成；

4）LocaleString()会根据你机器的本地环境来返回字符串，它和toString()返回的值在不同的本地环境下使用的符号会有微妙的变化；

5）使用toString()是保险的，返回唯一值的方法,它不会因为本地环境的改变而发生变化；如果是为了返回时间类型的数据，推荐使用LocaleString()；若是在后台处理字符串，请务必使用toString()；

```tsx
###toString()、toLocaleString()、valueOf()方法的区别
// JS Array
  var arr = [12421,22232,3333];
  console.log(arr.valueOf()); // (3) [12421, 22232, 3333] 返回数组本身
  console.log(arr.toString()); // '12421,22232,3333' 把数组转换为字符串，并返回结果，每一项以逗号分割
  console.log(arr.toLocaleString()); // '12,421,22,232,3,333' 把数组转换为本地数组，并返回结果

```

```tsx
// JS Boolean
  var boolean = new Boolean();
  console.log(boolean.valueOf()); // false 返回 Boolean 对象的原始值
  // 根据原始布尔值或者 booleanObject 对象的值返回字符串 "true" 或 "false",默认为"false"
  console.log(boolean.toString()); // 'false'
  // Boolean对象没有toLocalString()方法,但是在Boolean对象上使用这个方法也不会报错

```

```jsx
// JS Math
console.log(Math.PI.valueOf()); // 3.141592653589793

```

```dart
// JS Number
  var num = new Number(11337);
  console.log(num.valueOf()); // 11337
  console.log(num.toString()); // '11337'
  console.log(num.toLocaleString()); // '11,337'

```

```jsx
// JS String
  var str = 'fsflgs';
  console.log(str.valueOf()); // 'fsflgs'
  console.log(str.toString()); // 'fsflgs'
  console.log(str.toLocaleString()); // 'fsflgs'

```

```jsx
// JS Date
  var date = new Date();
  console.log(date); // Thu Sep 13 2018 21:51:58 GMT+0800 (中国标准时间)
  console.log(date.toLocaleString()); // 2018/9/13 下午9:51:58

```

## 会改变原数组的方法

pop、push、shift、unshift、fill、sort、reverse、splice

参考链接：  
[js数组方法大全](https://www.cnblogs.com/obel/p/7016414.html)  
[Javascript toString()、toLocaleString()、valueOf()三个方法的区别](https://www.cnblogs.com/niulina/p/5699031.html)

作者：puxiaotaoc  
链接：https://www.jianshu.com/p/5ae00e24e47a  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

表情

登录

注册

南易_站长

阅读量：11841

js 数组api

评论