数组的处理方式

你说你说你来说
152 阅读6分钟

数组的处理方式

js数组的方法有：map()、forEach()、filter()、push()、pop()、shift()、unshift()、concat()、isArray()、toString()、join()、splice()、every()、some()、reduce()、reverse()、sort()、toLocaleString()、slice()、indexOf()、lastIndexOf()

ES6: keys()、values()、entries()、of()、from()、copyWithin()、fill()、find()、findIndex()

ES7: includes()

  • forEach()：历遍数组，对每一个元素进行处理，会改变原数组。forEach(( value数组每一项的值，index索引，数组)=》{})

array.forEach(function(currentValue, index, arr), thisValue)
返回值： undefined
var arr = [10, 20];
arr.forEach(function(value, index, array) { // value数组每一项的值，index索引
console.log(array); // [10, 20]
console.log(value); // 10, 20
console.log(index); // 0, 1
});

  • map()：用来转换原数组，切输出的结果和原结果

    长度是一致的。返回值是一个新数组。map(( value数组每一项的值，index索引，数组)=》{})
const arr = [1, 2, 3];
const test = arr.map( x => x * 2); 
const test1 = arr.map( x => {
    if(x>1) return x
})

log(test) // [2, 4, 6]
 
log(test1) // [ undefined, 2, 3 ]

var arr = [4, 9];
var arr2 = arr.map(Math.sqrt);
console.log(arr, arr2); // [4, 9] [2, 3]

  • filter()：过滤函数创建新数组，以仅保留true基于该函数返回的元素。返回值是一个新数组。filter(( value数组每一项的值，index索引，数组)=》{})

const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.filter(isOdd); // [1, 3]

arr = [1, 3, 5, 2];
var arr2 = arr.filter(function(value) {
if (value > 2) {
return value;
}
});
console.log(arr, arr2); // [1, 3, 5, 2] [3, 5]

  • push()：在数组末尾增加新元素{}，并返回新数组的长度

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

  • pop()： 删除数组中的最后一个元素，并返回删除的元素

var arr=[1,2,3,];
arr.pop();
//3
console.log(arr)//[1,2]

  • unshift()：将一个或者多个元素添加到数组的开头，并返回新数组的长度

var arr=[1,2,3,];
arr.unshift(-1,0)
//5
console.log(arr)//[-1,0,1,2,3]

  • shift():删除数组的第一个元素，并返回该元素

var arr=[1,2,3,];
arr.shift();
//1
console.log(arr)//[2,3]

  • concat()：合并两个或者多个数组，并返回一个新数组，不影响原数组

var arr = [];
var arr2 = [3,4];
var arr3 = [5,6];
var newArr = arr.concat(arr2, arr3);
console.log(newArr); // [3,4,5,6]

  • isArray：判断一个对象是不是数组，返回布尔值

var arr=[];
var obj={};
Array.isArray(arr);//true
Array.isArray(obj);//false

  • toString()：将数组转化成字符串，返回转化后的字符串

var arr=[1,2,3,4]
arr.toString();//'1,2,3'

  • toLocaleString()：将数组转化成字符串，返回转化后的字符串

var arr=[1,2,3,4]
arr.toLocaleString();//'1,2,3'

  • join()：将数组转化成字符串，返回转化后的字符串

var arr=[1,2,3,4]
arr.join('/');//'1/2/3'

  • splice()：删除或者替换现有元素，或者原地添加新元素来修改数组，并以数组形式返回被修改得内容。此方法会改变原数组。array.splice(修改位置，删除数量，替换值)

var arr = [1, 2, 3, 4, 5, 6];
arr.splice(6, 0, 7); //  [1, 2, 3, 4, 5, 6, 7]
arr.splice(7, -1, 8); // [1, 2, 3, 4, 5, 6, 7, 8]
arr.splice(7, 2, -2); // [1, 2, 3, 4, 5, 6, 7, -2]
arr.splice(0, 3, -3); // [-3, 4, 5, 6, 7, -2]
arr.splice(-1, 1, 9); // [-3, 4, 5, 6, 7, 9] 
arr.splice(7, 2, 10); // [-3, 4, 5, 6, 7, 9, 10]
arr.splice(-9, 2, -1); // [-1, 5, 6, 7, 9, 10]

  • slice()：从已有数组中浅拷贝，接收两个参数slice(begin, end)，包括begin，不包括end，不改变原数组

var arr = [1, 2, 3, 4];
arr.slice(1,3); // [2,3]
arr.slice(-2); // [3,4]

  • every()：测试一个数组内所有元素是否都能通过某个指定函数测试，所有元素通过返回true，反之false

var arr = [1,2,3]
arr.every(item=>{
	return item>2
})//false
arr.every(item=>{
	return item>0
})//true

  • some()：测试一个数组内是否至少有一个元素是否都能通过某个指定函数测试，有的话返回true，反之false

var arr = [1,2,3]
arr.some(item=>{
	return item>2
})//true
arr.some(item=>{
	return item>4
})//false

  • reduce()：对数组中得每一个元素执行一个函数，reduce((结果,单个)={})返回值为结果

var arr = [1, 2, 3];
arr.reduce(function(item1, item2) {
    return item1 + item2;
}) // 6
arr.reduce(function(item1, item2) {
    return item1 * item2;
}, 5)// 30

  • reverse()：将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组

var arr = [1, 2, 3];
arr.reverse(); // [3, 2, 1]

  • sort()：对数组进行排序，会改变原数组，默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的

var arr = [2, 1, 4, 12];
var arr2 = ['a', 'b', 'ae', 'ac'];
arr.sort(); // [1, 12, 2, 4];
arr2.sort(); // ['a', 'ac', 'ae', 'b']

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

var arr = [1,2,3];
arr.indexOf(3); // 2
arr.indexOf(0); // -1

  • lastIndexOf()：返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1，第二个参数代表从第几个元素开始往前找

var arr = [2,3,5,2]
arr.lastIndexOf(2);//3
arr.lastIndexOf(2,2);//0

  • keys(): 返回一个包含数组中每个索引键的Array Iterator对象

var arr = [1,2,3,4];
var iterator = arr.keys();
for (let key of iterator) {
  console.log(key); // 0 1 2 3
}

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

var arr = [ 'a', 'b', 'c' ];
var iterator = arr.values();
for (let key of iterator) {
  console.log(key); // 'a' 'b' 'c'
}

  • entries()：方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。迭代对象中数组的索引值作为 key， 数组元素作为 value。

var arr = ['a', 'b', 'c'];
var iterator = array.entries();
console.log(iterator.next().value); // [0, "a"]
console.log(iterator.next().value); // [1, "b"]

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

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

  • from()：从一个类似数组或可迭代对象中创建一个新的，浅拷贝的数组实例

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

  • copyWithin()：浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度，会改变原数组

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

// copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4)); // ["d", "b", "c", "d", "e"]

// copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3)); // ["d", "d", "e", "d", "e"]

console.log(array1) // ["d", "d", "e", "d", "e"]

  • fill()：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引，arr.fill(value[, start[, end]])

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

  • find()：返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined

var arr = [1,3,45,5];
var test = arr.find(function(item) {
    return item > 4
}) 
console.log(test) // 45

  • findIndex()：返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1

var arr = [1,3,45,5];
var test = arr.findIndex(function(item) {
    return item > 4
}) 
console.log(test) // 2

  • includes()：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false

var arr = [1,3,45,5];
console.log(arr.includes(3)); // true
avatar
文章
阅读
粉丝