JS中数组常用操作

/ 2评 / 3
内容纲要

数组

javascript 中数组是动态的,根据需求他们会增长或缩减,并且在创建数组时无须声明一个固定大小或者在数组大小变化时无须重新分配空间。

创建数组

1.Array构造器

new Array() //构造器
new Array([size]);  //指定长度
new Array(element,element,element); //赋值
const arr = new Array();
arr[0] = 1;
  1. 字面量
const arr1 = [];
const arr2 = [1,2,3];

稀疏数组

稀疏数组就是包含从0开始不连贯索引的数组。可使用 Array() 构造函数活简单的指定索引来创建稀疏数组。

数组长度

每个数组都有一个length 属性,这个属性使其区别于常规的JavaScript对象,作为稠密数组,length 属性值代表数组中的个数,其值比数组中最大的索引大1.
可以设置 length 属性长度,当设置数值大于索引值时,数组将填充空值,反之将元素删除。
在es5中,可以用Object.defineProperty()让数组的length属性变为只读

 a = [1,2,3]
 Object.defineProperty(a,"length",{writable: false});
 a.length = 0;
 console.log(a)  // [1,2,3]

数组常用方法

1.push() 向数组的末尾添加一个或多个元素,并返回新的数组长度。原数组改变。

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

2.pop() 删除并返回数组的最后一个元素,若该数组为空,则返回undefined。原数组改变。

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

3.unshift() 向数组的开头添加一个或多个元素,并返回新的数组长度。原数组改变。

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

4.shift() 删除数组的第一项,并返回第一个元素的值。若该数组为空,则返回undefined。原数组改变。

const arr = [1,2,3,4]
arr.shift() // 1
console.log(arr) //[2,3,4]

5.concat() 合并两个或多个数组,生成一个新的数组。原数组不变。

const arr = [1,2,3],
arr1 = ['a','b','c'],
arr2 = ['x','y','z'];
const resArr = arr.concat(arr1,arr2);
console.log(arr) // [1,2,3];
console.log(resArr) //[1,2,3,'a','b','c','x','y','z'];

6.join() 将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,”

const arr = [1,2,3],
arr1 = ['a','b','c'],
arr2 = ['x','y','z'];
const resArr = arr.concat(arr1,arr2);
console.log(arr) // [1,2,3];
console.log(resArr) //[1,2,3,'a','b','c','x','y','z']

7.sort() 对数组元素进行排序。按照字符串UniCode码排序,原数组改变。

//从小到大排序
const arr = [2,3,1,4];
const sortNum = (a,b) => {
    return a-b;
}
arr.sort(sortNum); // [1,2,3,4];
    //从大到小排序
    const arr = [2,3,1,4]
    const sortNum = (a,b) => {
        return b-a;
    }
arr.sort(sortNum); // [4,3,2,1]
//按照数组某个值进行排序
    const arr = [
        {name:'小一', age: '18'},
        {name: '小二', age: '16'},
        {name: '小三', age: '20'}
    ]
    function compare(params) {
        return function sortAge(a,b){
            return a[params] - b [params]
        }
    }
    arr.sort(compare('age'));

8.reverse() 将数组倒序。原数组改变

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

9.slice(start, end) 从start开始,end之前结束,不到end;如果不给end值,从start开始到数组结束。start可以给负值,-1表示数组最后位置,-2表示倒数第二个,以此类推,原数组不改变。

    const a = [1,2,3,4,5]
    a.slice(0,1); //[1]
    console.log(a); //[1,2,3,4]

10.splice(index,howmany,arr1,arr2...)删除元素并添加元素,从index位置开始删除howmany个元素,并将arr1、arr2...数据从index位置依次插入。howmany为0时,则不删除元素。原数组改变。

    const a = [1,2,3,4];
    console.log(a.splice(0,1)) //1
    console.log(a); //2,3,4

11.copyWithin(target[, start[, end]])浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。

        const array1 = ["a", "b", "c", "d", "e"];
        const array2 = array1.copyWithin(0, 2, 3);
        array2.push(1);
        console.log(array1, array2);  //["c", "b", "c", "d", "e", 1]

12.fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。原数组改变。

const array1 = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]
// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]
console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

13.flat()方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity,可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

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

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

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

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}

数组遍历

1.map()

map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。map()按照原始数组元素顺序依次处理元素,不会对空数组进行检测,不会改变原始数组。
从结构和参数形式上看,map方法和forEach方法一模一样,但是其区别就在于,forEach方法,旨在处理单个数据,map方法,==旨在整理整体数据,并返回整理后的数据。map()有返回值==

array.map(function(currentValue,index,arr), thisValue)
currentValue: 当前元素的值
index: 当前元素的索引值
arr: 当前元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。
如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。
let list = [1, 2, 3, 4, 5];
let other = list.map((d, i) => {
  return d * 2;
});
console.log(other);   // [2, 4, 6, 8, 10]

2.filter()

filter()方法创建一个新的数组,==新数组中的元素是通过检查指定数组中符合条件的所有元素。filter() 有返回值。==filter() 不会对空数组进行检测,不会改变原始数组。
从结构和参数形式上看,filter方法和map方法, forEach方法一模一样,但用法是有区别的。 ==filter作为一个过滤器,顾名思义,旨在过滤数据,返回的是满足条件的数据。==

array.filter(function(currentValue, index,arr))

var a = [1,2,3,4,5,6,7,8,9,10];
console.log(a.filter(function(val, idx, arr){
    return val > 5;
}, this));

3.reduce() &&reduceRight()

reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。

reduceRight()reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
reduceRight() 首次调用回调函数 callback 时,accumulator 和 currentValue 可以是两个值之一。如果调用 reduceRight() 时提供了 initialValue 参数,则 accumulator 等于 initialValue,currentValue 等于数组中的最后一个值。如果没有提供 initialValue 参数,则 prevValue 等于数组最后一个值, currentValue 等于数组中倒数第二个值。

语法:

arr.reduce(callback,[initialValue])

实例一:求和

const arr = [1, 2, 3, 4, 5];
const total = r.reduce((previousValue, currentValue) => {
    return previousValue + currentValue;
}, 10);
console.log(rr); //25

实例二:合并多维数组

const twoArr = [['mu','zi'],['dig','big'],['lucky','jiji']];
const oneArr = twoArr.reduce((total,currentValue) =>{ 
  return total.concat(currentValue);
})
console.log(oneArr);//["mu", "zi", "dig", "big", "lucky", "jiji"]

实例三:统计有多少个不重复单词

// 不用reduce时: 
var arr = ["apple","orange","apple","orange","pear","orange"]; 
function getWordCnt(){ 
  var obj = {}; 
  for(var i= 0, l = arr.length; i< l; i++){ 
    var item = arr[i]; 
    obj[item] = (obj[item] +1 ) || 1; 
  } 
  return obj; 
}
console.log(getWordCnt());//{apple: 2, orange: 3, pear: 1}
// 用reduce时: 
var arr = ["apple","orange","apple","orange","pear","orange"]; 
function getWordCnt(){ 
  return arr.reduce(function(prev,next){ 
    prev[next] = (prev[next] + 1) || 1; 
    return prev; 
  },{}); 
} 
console.log(getWordCnt());//{apple: 2, orange: 3, pear: 1}

实例四: 统计期末成绩

//期末总成绩
const result = [
    {
        subject: "math",
        score: 88
    },
    {
        subject: "chinese",
        score: 95
    },
    {
        subject: "english",
        score: 80
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
//总成绩减去扣分项
var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, -10);
//各科所占的比重不同,分别为50%,30%,20%
var dis = {
    math: 0.5,
    chinese: 0.3,
    english: 0.2
}

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, -10);

var qsum = result.reduce(function(prev, cur) {
    return prev + cur.score * dis[cur.subject]
}, 0)

console.log(sum, qsum);
var arrString = 'abcdaabc';

arrString.split('').reduce(function(res, cur) {
    res[cur] ? res[cur] ++ : res[cur] = 1
    return res;
}, {})

4.some() && every()

every()与some()方法都是JS中数组的迭代方法。

  • every()是对数组中每一项运行给定函数,如果该函数对每一项返回true,则返回true。
  • some()是对数组中每一项运行给定函数,如果该函数对任一项返回true,则返回true。
var arr = [ 1, 2, 3, 4, 5, 6 ]; 

const a = [1, 2, 3, 4, 5];
const b = a.some((arr, index ,array) => {
    return arr > 3;
});
console.log(b);  //true 

const c = a.every((arr, index ,array) => {
     return arr > 3;
})
console.log(c); //false

5.indexOf && lastIndexOf

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

lastIndexOf() 方法返回调用String 对象的指定值最后一次出现的索引,在一个字符串中的指定位置 fromIndex处从后向前搜索。如果没找到这个特定值则返回-1 。该方法将从尾到头地检索字符串 str,看它是否含有子串 searchValue。开始检索的位置在字符串的 fromIndex 处或字符串的结尾(没有指定 fromIndex 时)。如果找到一个 searchValue,则返回 searchValue 的第一个字符在 str 中的位置。str中的字符位置是从 0 开始的。

语法:

str.indexOf(searchValue[, fromIndex])
str.lastIndexOf(searchValue[, fromIndex])

参数:

searchElement: 要查找的元素
fromIndex (可选):开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。

==注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.==

const a = [1, 2, 3, 4, 5, 6, 5, 8];
console.log(a.indexOf(5, 1)); //4
console.log(a.lastIndexOf(5)); //6

6.find() && findIndex()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
==find方法会遍历稀疏数组,不会改变数组。==

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
==findIndex方法会遍历稀疏数组,不会改变数组。==

语法:

arr.find(callback[, thisArg])

参数

callback: 在数组每一项上执行的函数,接收 3 个参数

返回值

数组中第一个满足所提供测试函数的元素的值,否则返回 undefined。

arr.findIndex(callback[, thisArg])

参数

callback: 在数组每一项上执行的函数,接收 3 个参数

返回值

数组中通过提供测试函数的第一个元素的索引。否则,返回-1

const arr = [
    {
        name: "张三",
        gender: "男",
        age: 20
    },
    {
        name: "李四",
        gender: "男",
        age: 21
    },
    {
        name: "王五",
        gender: "男",
        age: 22
    }
];

const b = arr.find(Element => {
    return Element.name == "李四";
});
const c = arr.findIndex(Element => {
    return Element.name == "王五";
});
console.log(b); //{name:'李四' ....
console.log(c); // 2

7.forEach() && for in && for of && for

forEach() 方法会根据集合中元素的插入顺序,依次执行提供的回调函数。一般用于对数组的遍历,不用于对对象的遍历,此方法会对数组中的每一个值进行遍历,直至全部遍历完成。故在其中的return,break会失效。==forEach 函数为集合对象中每个元素都执行一次回调;它不会返回任何值。==

语法:

mySet.forEach(callback[, thisArg])

参数

callback 为集合中每个元素执行的回调函数,该函数接收三个参数:

thisArg 回调函数执行过程中的 this 值。

function logSetElements(value1, value2, set) {
    console.log("s[" + value1 + "] = " + value2);
}

new Set(["foo", "bar", undefined]).forEach(logSetElements);

// logs:
// "s[foo] = foo"
// "s[bar] = bar"
// "s[undefined] = undefined"

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。循环只遍历可枚举属性(包括它的原型链上的可枚举属性)。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性,例如 String 的 indexOf() 方法或 Object的toString()方法。循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性(更接近原型链中对象的属性覆盖原型属性)。==for ... in是为遍历对象属性而构建的,不建议与数组一起使用==
它最常用的地方应该是用于调试,可以更方便的去检查对象属性(通过输出到控制台或其他方式)。尽管对于处理存储数据,数组更实用些,但是你在处理有key-value数据(比如属性用作“键”),==需要检查其中的任何键是否为某值的情况时,还是推荐用for ... in。==

var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}

// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

for...of语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句==一般用于遍历对象,循环遍历对象的value,与forEach不同的是,它可以正常的响应break, return,continue.==

let iterable = [10, 20, 30];

for (let value of iterable) {
    value += 1;
    console.log(value);
}
// 11
// 21
// 31

for 用于创建一个循环,它包含了三个可选的表达式,三个可选的表达式包围在圆括号中并由分号分隔, 后跟一个在循环中执行的语句(通常是一个块语句)。

//首先它和forEach,forof一样不可以遍历对象 //解决办法:就是把对象先转化为数组类型- - //有一个对象:
let obj={a:1,b:2,c:3} //用Object.keys属性转化
let obj2=Object.keys(obj) //最后就可以用来遍历了
for (let i=0;i<obj2.length;i++){
    console.log(obj2[i])
} //输出结果就能出来了,forEach,for of同理

2条回应:“JS中数组常用操作”

发表评论

电子邮件地址不会被公开。