美文网首页
js数组的操作

js数组的操作

作者: zy懒人漫游 | 来源:发表于2018-02-03 05:01 被阅读0次

length 是Array的实例属性。返回或设置一个数组中的元素个数。

var items = ['shoes', 'shirts', 'socks', 'sweaters'];
console.log(items.length )//4

可以用来遍历数组:通过数组下标遍历数组元素,并把每个元素的值修改为原值的2倍

var arr1 = [1,2,3,4,5]
for (var i = 0;i<arr1.length;i++){
  arr1[i] *= 2
}
console.log(arr1);//[2, 4, 6, 8, 10]

也可以用来截断数组:看下面这个例子

var numbers = [1, 2, 3, 4, 5];
if (numbers.length > 3) {
  numbers.length = 3;
}
console.log(numbers); // [1, 2, 3]
console.log(numbers.length); // 3

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

var arr = Array(3)
console.log(arr);//[ undefined, undefined, undefined]
var arr1 = Array(3,1)
console.log(arr1);//[3,1]

var arr2 = Array.of(3)
var arr3 = Array.of(3,1)
console.log(arr2);//[3]
console.log(arr3);//[3,1]

Array() 和 Array.of 构造函数之间的区别在于处理整数参数:Array(3) 创建一个包含 3 个 undefined 元素的数组,而Array.of(3) 创建一个具有单个元素 3的数组。

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

语法:var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];
var arr3 = arr1.concat(arr2);// arr3 is a new array [ "a", "b", "c", "d", "e", "f" ]

every() 方法测试数组的所有元素是否都通过了指定函数的测试。

var arr1 = [3,99,78,5,97]
function isBelowThreshold(currentValue){
  return currentValue > 40;
}
console.log(arr1.every(isBelowThreshold));//false

var arr2 = [45,99,78,55,97]
function isBelowThreshold2(currentValue){
  return currentValue > 40;
}
console.log(arr2.every(isBelowThreshold2));//true

fill()方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

arr.fill(value)  用来填充数组元素的值。
arr.fill(value, start) |(star 可选) 起始索引,默认值为0。
arr.fill(value, start, end) |(end可选) 终止索引,默认值为 this.length。

var arr1 = [7,99,78,5,97]
console.log(arr1.fill(2));//[2, 2, 2, 2, 2] 原数组的值都被填充为2

var arr2 = [7,99,78,5,97,9,9,9]
console.log(arr2.fill(2,3));//[7, 99, 78, 2, 2, 2, 2, 2] 从下标为3开始的,所有的值都填充为2

var arr3 = [7,99,78,5,97]
console.log(arr3.fill(1,2,4));//[7, 99, 1, 1, 97]  从下标为2开始,到下标为3的数字,值都填充为1

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

callback 被调用时传入三个参数:
1.元素的值
2.元素的索引
3.被遍历的数组

var arr1 = [12,1,4,10,6,98]
function newArr(value){
  return value >= 10;
}
console.log(arr1.filter(newArr));//[12, 10, 98]

`filter` 为数组中的每个元素调用一次 `callback` 函数,并利用所有使得 `callback` 返回 true
或 等价于 true 的值的元素创建一个新数组。`callback` 只会在已经赋值的索引上被调用,对于那些
已经被删除或者从未被赋值的索引不会被调用。那些没有通过 `callback` 测试的元素会被跳过,不会被
包含在新数组中。

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

function isBigEnough(element) {
  return element >= 15;
}

[12, 5, 8, 130, 44].find(isBigEnough); // 130

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

var arr1 = [2,1,4,10,6,98]
function theBigest(value){
  return value >= 10;
}
console.log(arr1.findIndex(theBigest));//3

var arr2 = [2,1,4,10,6,98]
function theBigest2(value){
  return value >= 110;
}
console.log(arr2.findIndex(theBigest2));//-1

forEach() 方法对数组的每个元素执行一次提供的函数。
等同于for循环。

const items = ['item1', 'item2', 'item3'];
const copy = [];
items.forEach(function(item){
  copy.push(item)
});
console.log(copy);//["item1", "item2", "item3"]

const items2 = ['item1', 'item2', 'item3'];
const copy2 = [];
for (let i=0; i<items2.length; i++) {
  copy2.push(items2[i])
}
console.log(copy2);//["item1", "item2", "item3"]

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

语法:
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)

searchElement 需要查找的元素值。
fromIndex (可选)从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + 
fromIndex 的索引开始搜索。默认为 0。
[1, 2, 3].includes(3, -1); // true 查找3,数组的长度+需要查找的元素值=2,结果正确返回true
如果fromIndex 大于等于数组长度 ,则返回 false 。该数组不会被搜索。
var arr = ['a', 'b', 'c'];
arr.includes('c', 3);   //false
arr.includes('c', 100); // false
如果 fromIndex 为负值,计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0,则整个数组都会被搜索。
var arr = ['a', 'b', 'c'];
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true

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

arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])

参数:searchElement  要查找的元素
fromIndex  开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。
如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,
-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其
查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。
其默认值为0.

返回值:首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

join()方法将一个数组(或一个类数组对象的所有元素连接成一个字符串并返回这个字符串。
注意:join() 方法,不会改变数组!

var arr = ['a','b','c'] 
var str = arr.join()//默认为 ","
var str1 = arr.join('')
var str2 = arr.join('-')
console.log(str);//a,b,c
console.log(str1);//abc
console.log(str2);//a-b-c

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。一个新数组,每个元素都是回调函数的结果。

var arr = [1,2,3];
var str = arr.map(function (n){
 return n*n;
});
console.log(str);//[1,4,9] 一个新数组,每个元素都是回调函数的结果。
console.log(arr);//[1,2,3] 原数组不变

等同于
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
map处理字符串的方式多种多样,例如 反转等.
var str = 'hello world';
var newStr = Array.prototype.map.call(str, function(n) {
  return n;
}).reverse().join(''); 
console.log(newStr);//"dlrow olleh"

将字符串数组转换为数字数组, 只需一条语句, 如下:
console.log(['1', '2', '3'].map(Number));//[1,2,3]

pop()方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。
从数组中删除的元素(当数组为空时返回undefined)。

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

push() 方法将一个或多个元素添加到数组的末尾,并返回新数组的长度。

var arr = [1,2,3,4]
var arr1 = arr.push(8)
var arr2 = [9,8,7,6]
var arr3 = arr2.push(8,2)
console.log(arr);//[1,2,3,4,8]
console.log(arr1)//5
console.log(arr2)//[1,2,3,4,0,2]
console.log(arr3)//6

reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值。

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
});
callback callback currentValue currentIndex array return value
first call 0 1 1 [0, 1, 2, 3, 4] 1
second call 1 2 2 [0, 1, 2, 3, 4] 3
third call 3 3 3 [0, 1, 2, 3, 4] 6
fourth call 6 4 4 [0, 1, 2, 3, 4] 10
求数组里所有值的和
var arr = [1,2,3,4,5].reduce(function(sum, value){
  return sum + value;
},0);
console.log(arr);//15

计算数组中每个元素出现的次数
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
console.log(countedNames);//{ 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

数组去重
var arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
var result = arr.sort().reduce(function(init, current){
  if(init.length===0 || init[init.length-1]!==current){
        init.push(current);
    }
    return init;
}, []);
console.log(result); //[1,2,3,4,5]

reduceRight() 方法接受一个函数作为累加器(accumulator)和数组的每个值(从右到左)将其减少为单个值。

var a=['a','b','c','d']
var left  = a.reduce(function(prev, cur)  {
 return prev + cur; 
}); 
var right = a.reduceRight(function(prev, cur) { 
return prev + cur;
}); 
console.log(left);  // abcd
console.log(right); //cdba

var arr = ['h','e','l','l','o', 'w','o','r','l','d'];
var newArr = Array.prototype.map.call(arr, function(n) {
  return n;
}).reverse().join(''); 
console.log(newArr);//"dlrowolleh"

var arr1 = ['h','e','l','l','o', 'w','o','r','l','d'];
var right1 = arr1.reduceRight(function(prev, cur) {
 return prev + cur;
 }); 
console.log(right1)//dlrowolleh

可以用reduceRight() 和 map()+reverse()方法实现字符串反转,前者可能更简便

reverse() 方法将数组中元素的位置颠倒。
第一个数组元素成为最后一个数组元素,最后一个数组元素成为第一个

var a = ['1',2,'c']
console.log(a.reverse());//['c',2,'1']

shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。


var arr = ['a','c','d','e'];
console.log('调用 shift 之前: '+arr);
var shifted = arr.shift();
console.log('调用 shift 之后: '+arr);
console.log('被shift的元素:'+shifted);

slice() 方法返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。原始数组不会被修改。


var arr1 = [1,2,3,4,5,6,7,8,9];
var brr1 = arr1.slice(4,1)
console.log(arr1);// [1,2,3,4,5,6,7,8,9];
console.log(brr1);//[]
简单的来看就是1-4<0,返回空数组

var brr2 = arr1.slice(2,2)
console.log(brr2);//[]
简单的来看就是2-2=0,返回空数组

var brr3 = arr1.slice(-2)
console.log(brr3);//[]
slice(-2)表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。

var brr4 = arr1.slice(0,4)
console.log(brr4);//[1,2,3,4]
简单的来看就是4-0=4,返回索引为0开始数到第4个元素

var brr5 = arr1.slice(4,5)
console.log(brr5);//[5]
简单的来看就是5-4=1,返回索引为5开始数到第1个元素

var brr6 = arr1.slice(2)
console.log(brr6);//[3,4,5,6,7,8,9];
返回索引为2开始数到最后一个元素

some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。
只要有一个元素通过函数的测试,就为true,否则为false;

function passed(element){
  return (element >= 10);
}
var arr = [99,88,7,2,45].some(passed)
console.log(arr);//true

function noPass(element){
  return (element >= 110);
}
var arr1 = [99,88,7,2,45].some(noPass)
console.log(arr1);//false

sort() 方法用就地( in-place )的算法对数组的元素进行排序,并返回数组。 sort 排序不一定是稳定的。默认排序顺序是根据字符串Unicode码点。

var scores = [1, 10, 21, 2]; 
scores.sort(); 
// [1, 10, 2, 21]
// 注意10在2之前,
// 因为在 Unicode 指针顺序中"10"在"2"之前

var things = ['word', 'Word', '1 Word', '2 Words'];
things.sort(); 
// ['1 Word', '2 Words', 'Word', 'word']
// 在Unicode中, 数字在大写字母之前,
// 大写字母在小写字母之前.

也有做升序排列
var arr = [4, 2, 5, 1, 3];
arr.sort(function(a, b) {
  return a - b;
});
console.log(numbers);//[1,2,3,4,5]

splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。

var arr=[1,2,3,4,5,6,7]
console.log(arr.splice(2,2,'被删除的元素'));//[3,4]  从索引为2开始数2个元素
console.log(arr);//[1, 2, "被删除的元素", 5, 6, 7]  再打印一次就把'被删除的元素'替换到刚才的位置

var arr1=[1,2,3,4,5,6,7]
console.log(arr1.splice(2,0,"插入的元素"));//[1, 2, "插入的元素", 3, 4, 5, 6, 7] 从第二位开始删除0个,增加要插入的元素
console.log(arr1);

var arr2=[1,2,3,4,5,6,7]
console.log(arr2.splice(2));
console.log(arr2);//[1,2]  从第二位开始删除所有的元素包括第二位
请注意,splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。

toString() 返回一个字符串,表示指定的数组及其元素。

var arr = ['apple','pear','orange','mango','banana']
console.log(arr.toString());//apple,pear,orange,mango,banana

unshift() 方法将一个或多个元素添加到数组的开头,并返回新数组的长度。

var arr = ['apple','pear','orange','mango','banana']

console.log(arr.unshift('zhuty','dasd'));//7
console.log(arr)//["zhuty", "dasd", "apple", "pear", "orange", "mango", "banana"]

要注意的是2者打印的不同,一个是个数,一个是数组

相关文章

  • js笔记

    js数组 删除某个元素 js数组是否含有某个元素 判断value为undefined cookie操作

  • JS jsonArray操作

    JS jsonArray操作 js对数组对象的操作以及方法的使用 如何声明创建一个数组对象:var arr = n...

  • JS对象 & JSON & JS数组操作

    JS对象 & JSON & JS数组操作 JSON 格式(JavaScript Object Notation 的...

  • js基础了解

    js数组常用遍历方法使用: js数组常用操作方法使用: 基本逻辑运算: 基本字符串操作方法:

  • JS文集的目录

    js基础心法 深浅拷贝(递归)深浅拷贝(首层浅拷贝) js 数据处理 数组对象查找的常见操作数组对象去重的常见操作...

  • js对象数组操作 数组操作

    var numbers = [1, 2, 3];var newNumbers1 = numbers.map(fun...

  • JS数组操作

    splice 用于一次性解决数组添加、删除(这两种方法一结合就可以达到替换效果),方法有三个参数 开始索引 删除元...

  • JS数组操作

    1.栈方法 push()和pop() 后入先出 push():末尾追加 pop():末尾弹出 2.队列方法 先入先...

  • js 数组操作

    遍历删除元素: 遍历数组:for循环遍历: forEach遍历:

  • js数组操作

    一、改变原数组的方法 a.reverse() 将数组逆序,会修改原数组 a.sort 对数组进行排序, 需要传入自...

网友评论

      本文标题:js数组的操作

      本文链接:https://www.haomeiwen.com/subject/xhmyzxtx.html