JS中数组(Array)对象属性方法整理

Array

---

常用属性和方法：

属性：1-length.   2-prototype

方法：1-from().  2-isArray().   3-of().    4-concat().    5-copyWithin().     6-entries().   7-every()

8-fill().    9-filter().   10-find().    11-forEach().    12-includes().   13-indexOf().   14-join()    15-keys(). 

16-map().    17-pop().     18-push().    19-reduce().   20-reverse().   21-shift().    22-slice().    

23-some().     24-sort().     25-splice().    26-toString().    27-unshift().  28-values()

属性

---

1，Array.length——数组的实例属性，返回或设置一个数组中元素的个数

//获取数组的长度。
var array1 = ['a', 'b', 'c'];
var array2 = [5, 2, 54, 22, 44, 0];
console.log(array1.length);     // 3
console.log(array2.length);     // 6

2，Array.prototype——表示数组构造函数的原型，允许向Array对象添加新的属性和方法

//JavaScript Array本身并不提供 test() 方法。
if(!Array.prototype.test) {
    Array.prototype.test = function() {
        //自定义方法。。。
        console.log(‘自定义test方法’);
    }
}

方法

---

1，Array.from()——从一个类似数组或可迭代对象中创建一个新的数组实例

console.log(Array.from('foo'));
// ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// [2, 4, 6]

2，Array.isArray()——确定传递的值是否是一个 Array

Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("string");   
// false
Array.isArray(undefined);  
// false

3，Array.of()——创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型

//Array.of() 和 Array 构造函数之间的区别在于处理整数参数：
//Array.of(7) 创建一个具有单个元素 7 的数组，
//而 Array(7) 创建一个长度为7的空数组（注意：这是指有7个空位的数组，而不是7个undefined)
Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

4，Array.concat()——用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组

var array1 = ['a', 'b', 'c'];
var array2 = ['x', 'y', 'z'];

console.log(array1.concat(array2));
// ["a", "b", "c", "x", "y", "z"]

5，Array.copyWithin()——浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小

//copyWithin(target, start,end) 接收3个参数，
//target-复制到的位置，start-开始位置，end-结束位置

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

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

6，Array.entries()——返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对

var array1 = ['a', 'b', 'c'];

var iterator1 = array1.entries();

console.log(iterator1.next().value); //[0, "a"]
console.log(iterator1.next().value); //[1, "b"]

//iterator.next方法运行
var arr = ["a", "b", "c"];
var iter = arr.entries();
var a = [];

// for(var i=0; i< arr.length; i++){   // 实际使用的是这个 
for(var i=0; i< arr.length+1; i++){    // 注意，是length+1，比数组的长度大
    var tem = iter.next();             // 每次迭代时更新next
    console.log(tem.done);             // 这里可以看到更新后的done都是false
    if(tem.done !== true){             // 遍历迭代器结束done才是true
        console.log(tem.value);
        a[i]=tem.value;
    }
}
    
console.log(a);                         // 遍历完毕，输出next.value的数组

7，Array.every()——测试数组的所有元素是否都通过了指定函数的测试

function isLarge(curValue) {
  return curValue < 40;
}

var array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isLarge));  //true

8，Array.fill()——用一个固定值填充一个数组中从起始索引到终止索引内的全部元素,不包括终止索引

var array1 = [1, 2, 3, 4];

//用0填充索引2到4
console.log(array1.fill(0, 2, 4));  //[1, 2, 0, 0]

//用5从索引1开始填充
console.log(array1.fill(5, 1));  //[1, 5, 5, 5]

//用6填充整个数组
console.log(array1.fill(6));   //[6, 6, 6, 6]

9，Array.filter()——创建一个新数组, 其包含通过所提供函数实现的测试的所有元素

var array1 = [12, 5, 8, 130, 44];

function isBigEnough(element) {
  return element >= 10;
}
var filtered = array1.filter(isBigEnough);
// filtered is [12, 130, 44]

//ES2015实现
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems('ap'));     // ['apple', 'grapes']
console.log(filterItems('an'));     // ['banana', 'mango', 'orange']

10，Array.find()——返回数组中满足提供的测试函数的第一个元素的值,否则返回undefined

var array1 = [5, 12, 8, 130, 44];

var found1 = array1.find(function(element) {
  return element > 10;
});

console.log(found1);     // 12
//类似方法还有-findIndex()，返回数组中满足提供的测试函数的第一个元素的索引，否则返回-1
var found2= array1.findIndex(function(element) {
  return element > 10;
});

console.log(found2);     // 1

11，Array.forEach()——对数组的每个元素执行一次提供的函数

var array1 = [1, 2, 3, 4];
var array2 = [];
array1.forEach(function(element) {
  array2.push(element*element);
});

console.log(array2);    //[1, 4, 9, 16]

12，Array.includes()——判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false

//arr.includes(searchElement) 
//arr.includes(searchElement, fromIndex)

[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

13，Array.indexOf()——返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));    // 1

// 从索引2开始找
console.log(beasts.indexOf('bison', 2));    // 4

console.log(beasts.indexOf('giraffe'));    // -1

14，Array.join()——将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串

var elements = ['Fire', 'Wind', 'Rain'];

console.log(elements.join());    //Fire,Wind,Rain

console.log(elements.join(''));    //FireWindRain

console.log(elements.join('-'));    //Fire-Wind-Rain

15，Array.keys()——返回一个包含数组中每个索引键的Array Iterator对象。

var array1 = ['a', 'b', 'c'];
var iterator = array1.keys(); 
  
for (let key of iterator) {
  console.log(key);     //0 1 2
}

16，Array.map()——创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

var array1 = [1, 2, 3, 4];

const map1 = array1.map(x => x * 2);

console.log(map1);    //[2, 8, 18, 32]

17，Array.pop()——从数组中删除最后一个元素，并返回该元素的值,此方法更改数组的长度

let myFish = ["angel", "clown", "mandarin", "surgeon"];

let popped = myFish.pop();

console.log(myFish);     //["angel", "clown", "mandarin"]

console.log(popped);     // surgeon

18，Array.push()——将一个或多个元素添加到数组的末尾，并返回新数组的长度

var animals = ['pigs', 'goats', 'sheep'];

console.log(animals.push('cows'));    // 4

console.log(animals);    // ["pigs", "goats", "sheep", "cows"]

animals.push('chickens');

console.log(animals);    // ["pigs", "goats", "sheep", "cows", "chickens"]

19，Array.reduce()——创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

//reduce为数组中的每一个元素依次执行callback函数，接受四个参数：
//accumulator 累加器
//currentValue 当前值
//currentIndex 当前索引
//array 数组


var array1 = [0, 1, 2, 3]
var sum1 = array1.reduce(function (a, b) {
  return a + b;
}, 0);    //sum1 6

var sum2 = array1.reduce((a,b)=> a+b, 10);  //sum2 16

20，Array.reverse()——将数组中元素的位置颠倒,第一个数组元素成为最后一个数组元素，最后一个数组元素成为第一个

var array1 = ['one', 'two', 'three'];
console.log(array1);    // ['one', 'two', 'three']

var reversed = array1.reverse(); 
console.log(reversed);    // ['three', 'two', 'one']

console.log(array1);    // ['three', 'two', 'one']

21，Array.shift()——从数组中删除第一个元素，并返回该元素的值，此方法更改数组的长度

let sports = ['swim', 'run', 'bike', 'climb'];

console.log('调用 shift 之前: ' + sports);
// "调用 shift 之前: swim,run,bike,climb"

var shifted = sports.shift(); 

console.log('调用 shift 之后: ' + sports); 
// "调用 shift 之后: run,bike,climb" 

console.log('被删除的元素: ' + shifted); 
// "被删除的元素: swim"

22，Array.slice()——返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象,且原始数组不会被修改

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));    // ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));    // ["camel", "duck"]

console.log(animals.slice(1, 5));    // ["bison", "camel", "duck", "elephant"]

23，Array.some()——测试数组中的某些元素是否通过由提供的函数实现的测试

/*
some 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。否则，some 返回 false。
callback 被调用时传入三个参数：元素的值，元素的索引，被遍历的数组。
注意：对于放在空数组上的任何条件，此方法返回false。
*/
var array1 = [2, 5, 8, 1, 4];
var array2 = [12, 5, 8, 1, 4];

//检测在数组中是否有元素大于 10
function isBiggerThan10(element, index, array) {
  return element > 10;
}

array1.some(isBiggerThan10);      // false
array2.some(isBiggerThan10);     // true

24，Array.sort()——对数组的元素进行排序，并返回数组，排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点

var numbers1 = [4, 2, 5, 1, 3];
numbers1.sort(function(a, b) {
  return a - b;
});
console.log(numbers1);

//也可以写成：
var numbers2 = [4, 2, 5, 1, 3]; 
numbers2.sort((a, b) => a - b); 
console.log(numbers2);

// [1, 2, 3, 4, 5]

25，Array.splice()——通过删除现有元素和/或添加新元素来更改一个数组的内容

var months = ['Jan', 'March', 'April', 'June'];
//从第1位开始删除0个元素，插入“Feb”
months.splice(1, 0, 'Feb');
console.log(months);    //['Jan', 'Feb', 'March', 'April', 'June']
//从第4位开始删除1个元素，然后插入“May”
months.splice(4, 1, 'May');
console.log(months);    // ['Jan', 'Feb', 'March', 'April', 'May']

26，Array.toString()——返回一个字符串，表示指定的数组及其元素

var array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());    // "1,2,a,1a"

27，Array.unshift()——将一个或多个元素添加到数组的开头，并返回新数组的长度

var array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));    // 5

console.log(array1);    // [4, 5, 1, 2, 3]

28，Array.values()——返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

let arr = ['w', 'y', 'k', 'o', 'p'];
let eArr = arr.values();
console.log(eArr.next().value); // w
console.log(eArr.next().value); // y
console.log(eArr.next().value); // k
console.log(eArr.next().value); // o
console.log(eArr.next().value); // p