数组常用的一些属性和方法

目录

构造器

静态方法

Arra.from

Arra.isArray()

instanceof 和 isArray 

Array.of()

实例属性

 length 

实例方法

toString()

toLocaleString()

reverse()

join()

concat()

sort()

push() 

pop() 

unshift() 

shift() 

includes()

indexOf() 

slice()

splice()

forEach()

map()

find()

findIndex()

some()

every()

flat()

flatMap()


构造器

Array() 构造器用于创建Array对象

示例

        可以通过使用数组字面量创建数组

const arr = ['red', 'blue', 'green', 'gray'];
// arr.length = 4;
// arr[0] = 'red'

        单个参数的Array构造器

const arr = new Array(2);
// arr.length = 2;
// arr = [empty × 2];
// arr[0] = undefined;

        多个参数的Array构造器

const arr = new Array('red', 'blue', 'green', 'gray');
// arr = ['red', 'blue', 'green', 'gray'];
// arr[0] = 'red';
// arr.length = 4;

静态方法

Arra.from

对一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例。

const arr = Array.from('hello word');
// arr = ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'd'];
const numberArr = Array.from([1,2,3], x => x * 3);
// numberArr = [3, 6, 9]

Arra.isArray()

用于确定传递的值是否是一个Array

// 下面的函数调用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
Array.isArray(new Array('a', 'b', 'c', 'd'))
// 鲜为人知的事实:其实 Array.prototype 也是一个数组。
Array.isArray(Array.prototype);

// 下面的函数调用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray(new Uint8Array(32))
Array.isArray({ __proto__: Array.prototype });

instanceof 和 isArray 

        当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.

Array.of()

创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

Array.of() 和 Array 构造函数之间的区别在于处理整数参数:Array.of(7) 创建一个具有单个元素 7 的数组,而 Array(7) 创建一个长度为7的空数组(注意:这是指一个有7个空位(empty)的数组,而不是由7个undefined组成的数组)。

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

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

实例属性

 length 

Array的实例属性。返回或设置一个数组中的元素个数。该值是一个无符号 32-bit 整数,并且总是大于数组最高项的下标。

console.log(arr.length); // 4

描述

        可以设置length属性的值来截断任何数组。例如:将一个有两个元素数组的length属性值设置为3时,那么这个数组将会包含三个元素,并且,第三个元素的值将会是undefined。

const arr = ['red', 'blue', 'green', 'gray'];

// arr.length = 6;
// ['red', 'blue', 'green', 'gray', empty × 2]

// arr.length = 2;
// ['red', 'blue']
Array.length 属性的属性特性默认值说明
writabletruefalse: 改属性值价不能被修改
enumerablefalsefalse: 删除或更改任何属性都将会失败
configurablefalsetrue: 属性可以通过迭代器 for 或 for...in 进行迭代

实例方法

toString()

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

let arr = ['red', 'blue', 'green', 'gray'];
const str = arr.toString();
// "red,blue,green,gray"

toLocaleString()

返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 ",")隔开。

参数

locales 可选

        带有BCP 47语言标记的字符串或字符串数组,关于locales参数的形式与解释,请看Intl页面。

options 可选

        一个可配置属性的对象,对于数字 Number.prototype.toLocaleString(),对于日期Date.prototype.toLocaleString().

示例

var prices = ['¥7', 500, 8123, 12];
const newPrices = prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
// newPrices = "¥7,¥500,¥8,123,¥12"

更多示例请看 IntlNumberFormatDateTimeFormat页面。

reverse()

将数组中的元素的位置颠倒,并返回该数组。

let arr = ['red', 'blue', 'green', 'gray'];
let newArr = arr.reverse();
// arr = newArr = ['gray', 'green', 'blue', 'red'];

join()

将一个数组(类数组)的所有元素链接成一个字符串并返回这个字符串,如果数组只有一个元素,那么只返回改元素而没有分隔符。

参数

separator: 可选

        指定一个字符串来分隔数组的每个元素。默认是用逗号( , )分隔。如果separator是空字符串( " " ),则所有元素之间都没有任何字符。

描述

        如果数组长度为0,则返回空字符串。
        如果一个元素为 undefind 或 null ,他会被转换为空字符串。

示例

let arr = ['red', 'blue', 'green', 'gray'];
let str = arr.join(); 
// str = "red,blue,green,gray"
let str1 = arr.join("-");
// str1 = "red-blue-green-gray"
let str2 = arr.join("  ");
// str2 = "red  blue  green  gray"
let str3 = arr.join("");
// str3 = "redbluegreengray"

concat()

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

语法

        var newArr = arr.concat(value1, value2, ,value3, ...., valueN)

参数

valueN: 可选

        数组 or 值将合并到一个新的数组中,如果不填写该参数,则新数组会进行一个浅拷贝

示例

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];
const arr4 = arr1.concat(arr2, arr3);
// arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
const arr5 = arr1.concat(arr2, ['a', 'b', 'c']);
// arr5 = [1, 2, 3, 4, 5, 6, 'a', 'b', 'c'];

const str = 'blue';
const arr6 = arr.concat(arr2, str);
// arr6 = [1, 2, 3, 4, 5, 6, 'blue'];

sort()

数组排序:用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字符串,然后比较它们的UTF-16代码单元值序列时构建的

  参数

compareFunction(firstElement, secondElement) 可选

        用来指定按照某种顺序进行排列的函数,如果不写该参数,元素按照转换为的字符串的各个字符的Unicode位点进行排序。

        firstElement  第一个用于比较的元素。

        secondElement  第二个用于比较的元素。

示例        

let arr = [1, 5, 3, 9, 4];
let newArr = arr.sort();
// newArr = arr = [1, 3, 4, 5, 9];
arr.sort((a, b) => a - b);
// arr [1, 3, 4, 5, 9]
arr.sort((a, b) => b - a);
// arr [9, 5, 4, 3, 1]

let arr = [
    { name: '小白', age: 18},
    { name: '小红', age: 22},
    { name: '小明', age: 19},
    { name: '小橘', age: 20}
];
arr.sort((a, b) => b.age - a.age);
// [
//     { name: '小红', age: 22 },
//     { name: '小橘', age: 20 },
//     { name: '小明', age: 19 },
//     { name: '小白', age: 18 }
// ]

push() 

添加元素到数组尾部,并返回数组的新长度

let arr = ['red', 'blue', 'green', 'gray'];
let newLength = arr.push('yellow');
// arr = ['red', 'blue', 'green', 'gray', 'yellow'];
// newLength = 5;
arr.push('black');
// arr = ['red', 'blue', 'green', 'gray', 'yellow', 'black'];

pop() 

删除数组最后一个元素,并返回该元素的值。

let arr = ['red', 'blue', 'green', 'gray'];
let deleteElement = arr.pop();
// arr = ['red', 'blue', 'green'];
// deleteElement = 'gray';
arr.pop();
// arr = ['red', 'blue'];

unshift() 

添加元素到数组头部,并返回数组的新长度

let arr = ['red', 'blue', 'green', 'gray'];
let newLength = arr.unshift('yellow');
// arr = ['yellow', 'red', 'blue', 'green', 'gray'];
// newLength = 5;
arr.unshift('black');
// arr = ['black', 'yellow', 'red', 'blue', 'green', 'gray'];

shift() 

删除数组头部元素,并返回该元素的值。

let arr = ['red', 'blue', 'green', 'gray'];
let deleteElement = arr.shift();
// arr = ['blue', 'green', 'gray'];
// deleteElement = 'red';
arr.shift();
// arr = ['green', 'gray'];

includes()

用来判断一个数组是否包含一个指定的值,包含返回 true,否则返回 false

参数:

searchElement

        需要查找的元素 ,注意:includes() 比较字符串和字符时是区分大小写的

fromIndex 可选

        从 fromIndex 索引处开始查找 searchElement。默认值为0; 如果为负值(-n),则从-n处的元素开始查找。

示例

let arr = [1, 2, 3, 2, 1, 3];
arr.includes(2); // true
arr.includes(4); // false
arr.includes(2, -2); // false
arr.includes(2, -2); // true

let arr1 = [NaN, null, undefined, 0, -1]
console.log(arr1.includes(0)); // true
console.log(arr1.includes(-1)); // true
console.log(arr1.includes(null)); // true
console.log(arr1.includes(undefined)); //true
console.log(arr1.includes(NaN)); // true

indexOf() 

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

参数:

searchElement: 要查找的元素

fromIndex: 可选参数

        开始查找的位置,如果这个参数大于或者等于数组的长度,则会返回-1。如果参数提供的索引是个负数,-1表示从最后一个元素开始查找,-2从倒数第二个元素开始查找,以此类推。注意,如果参数提供的索引值是一个负数,并不会改变其查找顺序,查找顺序仍然是从前往后查询数组。

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

slice()

返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。

描述:

        slice不会修改原数组,只会返回一个浅复制了原数组中的元素的一个数组。按照下述的过则拷贝:       

  • 如果该元素是对象饮用,slice会拷贝这个对象引用到新的数组里,两个对象饮用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。
  • 对于字符串、数组、布尔值来说(不是 String、Number、Boolean 对象,slice会拷贝这些值到新的数组里。在别的数组里修改这些字符串、数组、布尔值,将不会影响到另一个数组。

        如果向两个数组任何一个中添加了新的元素,另一个数组不会收到影响。

参数:

begin: 可选

       起始处索引,该索引开始提取原数组元素,如果该参数时负数(-n),则表示从原数组中的倒数第n个元素开始提取。如果不填写该参数,则表示从索引 0 开始,如果 begin 超出了原数组的索引值范围,则会返回空数组。

end: 可选

        终止处索引,,在该索引处结束,slice会提取原数组中索引从 begin 到 end的所有元素(包含 begin,但不包含 end)。如果该参数为负数,则表示在原数组中倒数第n个元素结束提取。如果不填写 end ,则slice会一直提取到原数组末尾处。

示例:

let arr = ['red', 'blue', 'green', 'gray', 'black'];
let newArr = arr.slice(1, 3);
// ['blue', 'green']
let newArr1 = arr.slice(2);
// ['green', 'gray', 'black']
let newArr2 = arr.slice(-2);
//  ['gray', 'black']

splice()

根据索引删除或替换现有元素,或者原地添加新的元素改变数组,并且返回一个新数组; 

参数:

start  

        要删除元素的起始位置,如果是负数(-n),则表示从数组的末位开始数第n位;如果超出了数组的长度,则表示从数组末尾开始添加内容;如果负数的绝对值大于数组的长度,表示开始位置位第0位;

deleteCount: 可选参数

        整数,表示要删除数组元素的个数,如果不填写则该数组start之后数组的所有元素都会被删除。如果deleteCount是0或者负数,则不移除元素,这种情况下,至少应该添加一个新元素。

item1, item2,... 可选

        要添加的数组的元素,从start位置开始添加。

返回值:  由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删除元素,则返回空数组。

let arr = ['red', 'blue', 'green', 'gray'];
let newArr1 = arr.splice(1);
// arr = ['red'];   
// newArr1 = ['blue', 'green', 'gray'];

let newArr1 = arr.splice(-1);
// arr = ['red', 'blue', 'green'];   
// newArr1 = ['gray'];

let newArr2 = arr.splice(1, 2);
// arr = ['red', 'gray'];   
// newArr2 = ['blue, 'green'];

let newArr3 = arr.splice(1, 1, 'yellow', 'black');
// arr = ['red', 'yellow', 'black', 'gray'];   
// newArr3 = ['blue', 'green'];

forEach()

遍历当前数组,不会改变原数组

备注:除了抛出异常外,没有办法中止或跳出forEach()循环。如果你需要中止或跳出循环,不应当使用当前方法。

如果需要提前终止循环,你可以用

  • for 循环
  • for…of / for...in 循环
  • every() 、some() 、find() 、findIndex() 

如果条件允许,也可以使用filter() 提前过滤出需要遍历的数组,在用forEach() 处理。

参数

callback

  为数组中每个元素执行的函数,该函数接收一至三个参数:

  • element  数组当前项的值
  • index 可选  数组当前项的索引
  • array 可选   数组对象本身

thisArg 可选

    如果提供了 thisArg参数,那么它将作为每次 callback函数执行时的this ,如果未提供,则使用undefined。

示例

const arr = ['red', 'blue', 'green', 'gray'];
arr.forEach((item, index) => {
    console.log(item, index);
})
// red 0
// blue 1
// green 2
// gray 3

map()

创建一个新数组,该数组中的每个元素是经过函数处理后的返回值。

参数:同上forEach()参数

示例

const arr = [1, 2, 3];
const map1 = arr.map(x => x * 2);
// map1 = [2, 4, 6];

const map2 = arr.map(x => [x * 2]);
// map2 = [[2], [4], [6]];

求每个元素的平方根

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

find()

返回数组中满足条件的第一个元素的值,否则返回undefined

参数:同上forEach()参数

示例

let arr = [
    { name: 'apples', quantity: 2 },
    { name: 'bananas', quantity: 0 },
    { name: 'cherries', quantity: 5 }
]
const obj = arr.find(item => {
    return item.name === 'apples';
})
console.log(obj); // { name: 'apples', quantity: 2 }

findIndex()

返回数组中满足提供条件函数的第一个元素的索引,若没有找到对应的元素则返回-1。

参数:同上forEach()参数

示例

const index = [1, 2, 3, 4, 5].findIndex(item => {
    return item > 3;
})

console.log(index); // 3;

some()

测试数组中是不是至少有一个元素通过了被提供的函数测试,返回一个boolean类型的值;

数组中至少有个一元素通过回调函数的测试就会返回true,所有元素都没通过回调函数的测试返回值才会为false

参数:同上forEach()参数

示例

let arr = [2, 5, 8, 1, 4];

arr.some(x => x > 10); // false
arr.some(x => x > 5); // true

every()

测试数组中所有的元素是否都通过了某个指定函数的测试,返回一个boolean值;

备注:若收到一个空数组,此方法在一切情况下都会返回 true

参数:同上forEach() 参数

示例

let arr = [9, 5, 8, 10, 4];

arr.every(x => x > 3); // true
arr.every(x => x > 5); // false

flat()

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

参数:同上forEach()参数

depth

        指定要提取潜逃数组的结构深度,默认值为-1,使用 Infinity,可展开任意深度的嵌套数组

示例:

扁平化嵌套数组

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]

扁平化与数组空项

var arr = [1, 2, , [4, 5]];
arr.flat();
// [1, 2, 4, 5];

flatMap()

首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。

参数:同上forEach()参数

示例:

map() 与 flatMap()

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

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

上面的代码使用 map 和 flatMap 好像都可以,但下面代码展示如何使用 flatMap。

let arr = ['a', 'b', 'c', 'd'];

let arr1 = arr.map(x => x.split(" "));

let arr2 = arr.flatMap(x => x.split(""));

console.log(arr1); // [['hello', 'word'], [''], ['helle', 'flatMap']];
console.log(arr2); // ['hello', 'word', '', 'helle', 'flatMap'];

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清梦-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值