2020-8-13数组属性与用法

数组属性与用法

一、基本用法
1.数组创建
Array.of()
将参数中所有值作为元素形成数组。

console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
// 参数值可为不同类型
console.log(Array.of(1, '2', true)); // [1, '2', true]
// 参数为空时返回空数组
console.log(Array.of()); // []

2.Array.from()
将类数组对象或可迭代对象转化为数组。

// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])); // [1, 2]
// 参数含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]

参数

Array.from(arrayLike[, mapFn[, thisArg]])

返回值为转换后的数组。
arrayLike
想要转换的类数组对象或可迭代对象。

console.log(Array.from([1, 2, 3])); // [1, 2, 3]

3.mapFn
可选，map 函数，用于对每个元素进行处理，放入数组的是处理后的元素。

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

thisArg
可选，用于指定 map 函数执行时的 this 对象。

let map = {
    do: function(n) {
        return n * 2;
    }
}
let arrayLike = [1, 2, 3];
console.log(Array.from(arrayLike, function (n){
    return this.do(n);
}),map); // [2, 4, 6]

4.类数组对象
一个类数组对象必须含有 length 属性，且元素属性名必须是数值或者可转换为数值的字符。

let arr = Array.from({
  0: '1',
  1: '2',
  2: 3,
  length: 3
});
console.log(); // ['1', '2', 3]

// 没有 length 属性,则返回空数组
let array = Array.from({
  0: '1',
  1: '2',
  2: 3,
});
console.log(array); // []

// 元素属性名不为数值且无法转换为数值，返回长度为 length 元素值为 undefined 的数组  
let array1 = Array.from({
  a: 1,
  b: 2,
  length: 2
});
console.log(array1); // [undefined, undefined]

5.转换可迭代对象
转换 map

let map = new Map();
map.set('key0', 'value0');
map.set('key1', 'value1');
console.log(Array.from(map)); // [['key0', 'value0'],['key1',
// 'value1']]

6.转换 set集合

let arr = [1, 2, 3];
let set = new Set(arr);
console.log(Array.from(set)); // [1, 2, 3]

7.转换字符串

let str = 'abc';
console.log(Array.from(str)); // ["a", "b", "c"]

二、常用用法

常用属性

1.Length:
Length属性可设置或返回数组中元素的数目。

var arr = new Array(3)
arr[0] = "John"
arr[1] = "Andy"
arr[2] = "Wendy"

document.write("Original length: " + arr.length)
document.write("<br />")
arr.length=5
document.write("New length: " + arr.length)```

2.prototype:
prototype 属性使您有能力向对象添加属性和方法。

var arr = new Array(3)
arr[0] = "John"
arr[1] = "Andy"
arr[2] = "Wendy"
document.write("Original length: " + arr.length)
document.write("<br />")
arr.length=5
document.write("New length: " + arr.length)

数组方法

1.concat

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

concat() 方法不会更改现有数组。它总是返回一个新数组。
concat() 方法可以使用任意数量的数组参数
2.slice
slice() 方法用数组的某个片段切出新数组。slice() 方法创建新数组。它不会从源数组中删除任何元素;

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1); 

slice() 可接受两个参数，比如 (1, 3)；该方法会从开始参数选取元素，直到结束参数（不包括）为止。
3.join

join() 方法也可将所有数组元素结合为一个字符串。

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 

5.split
一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。

但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。

String.split() 执行的操作与 Array.join 执行的操作是相反的。
6.splice
splice() 方法可用于向数组添加新项
第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
splice() 方法返回一个包含已删除项的数组：

```javascript
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

清空数组的方法
1.length

var arr = [1,2,3];
console.log(arr);
arr.length = 0;
console.log(arr);

2.splice

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目

var arr = [1,2,3];
console.log(arr);
arr.splice(0);
console.log(arr);

3.[]

利用声明一个空数组来完成,代码如下:

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

伪数组

具有length属性，其他属性(索引)为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)，不具有数组的方法。

var fakeArray = {
    "0":"aaa",
    "1":23,
    length:2
};
for (var i=0;i<fakeArray.length;i++){
    console.log(fakeArray[i])
}

常见的伪数组(类数组对象)

{"0":"a,"1":b}

函数内部的arguments
DOM对象列表(document.getElementsByTags)
jQuery对象($(“div”))
转换伪数组

let arr = [].slice.call(pagis)
pagis.slice()

console.log(arr) 这时arr就是真数组了。
Array.prototype

let arr  = Array.prototype.slice.call(pagis);

利用了slice传一个数组/集合，就会直接返回这个集合的原理。拿到的也是数组。也就可以使用数组的各种方法了。

for循环

1 var arr1 = [],
2   len1 = pagis.length;
3 for (var i = 0; i < len1; i++) {
4   arr1.push(pagis[i]);
5 }

bind

1 var func = Function.prototype.call.bind(Array.prototype.slice);
1 var func = Function.prototype.bind(Array.prototype.slice).call;
var func = Function.prototype.call()
func(类数组对象) ===》 Function.prototype.call(类数组对象) ===》 类数组对象.slice()
2 console.log('类数组转换成数组：', func(pagis));

…扩展运算符

1 function args(){
2   console.log(arguments);
3   let newArr = [...arguments];
4   console.log(newArr);
5 }
6 args(1,2,3,23,2,42,34);

void add(){
  arguments
}
add(a:1,b:2,c:3,d:4,c:5)

三、扩展的方法
查找
1.find()
查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。

let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 3

// 数组空位处理为 undefined
console.log([, 1].find(n => true)); // undefined

2.findIndex()
查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。

let arr = Array.of(1, 2, 1, 3);
// 参数1：回调函数
// 参数2(可选)：指定回调函数中的 this 值
console.log(arr.findIndex(item => item = 1)); // 0
// 数组空位处理为 undefined
console.log([, 1].findIndex(n => true)); //0

3.填充
fill()
将一定范围索引的数组元素内容填充为单个指定的值。

let arr = Array.of(1, 2, 3, 4);
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]
copyWithin()
将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。
// 参数1：被修改的起始索引
// 参数2：被用来覆盖的数据的起始索引
// 参数3(可选)：被用来覆盖的数据的结束索引，默认为数组末尾
console.log([1, 2, 3, 4].copyWithin(0,2,)); // [3, 4, 3, 4]

// 参数1为负数表示倒数
console.log([1, 2, 3, 4].copyWithin(-2, 0)); // [1, 2, 1, 2]

console.log([1, 2, ,4].copyWithin(0, 2, 4)); // [, 4, , 4]

4.遍历
entries()
遍历键值对。

for(let [key, value] of ['a', 'b'].entries()){
    console.log(key, value);
}
// 0 "a"
// 1 "b"

// 不使用 for... of 循环
let entries = ['a', 'b'].entries();
console.log(entries.next().value); // [0, "a"]
console.log(entries.next().value); // [1, "b"]

// 数组含空位
console.log([...[,-'a'].entries()]); // [[0, undefined], [1, "a"]]

5.keys()
遍历键名。

for(let key of ['a', 'b'].keys()){
    console.log(key);
}
// 0
// 1

// 数组含空位
console.log([...[,'a'].keys()]); // [0, 1]
values()
遍历键值。
for(let value of ['a', 'b'].values()){
    console.log(value);
}
// "a"
// "b"

// 数组含空位
console.log([...[,'a'].values()]); // [undefined, "a"]

6.包含
includes()
数组是否包含指定值。
注意：与 Set 和 Map 的 has 方法区分；Set 的 has 方法用于查找值；Map 的 has 方法用于查找键名。

// 参数1：包含的指定值
[1, 2, 3].includes(1);    // true

// 参数2：可选，搜索的起始索引，默认为0
[1, 2, 3].includes(1, 2); // false

// NaN 的包含判断
[1, NaN, 3].includes(NaN); // true

7.嵌套数组转一维数组
flat()

console.log([1 ,[2, 3]].flat()); // [1, 2, 3]

// 指定转换的嵌套层数
console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]]

// 不管嵌套多少层
console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5]

// 自动跳过空位
console.log([1, [2, , 3]].flat()); // [1, 2, 3]

8.flatMap()
先对数组中每个元素进行了的处理，再对数组执行 flat() 方法。

// 参数1：遍历函数，该遍历函数可接受3个参数：当前元素、当前元素索引、原数组
// 参数2：指定遍历函数中 this 的指向
console.log([1, 2, 3].flatMap(n => [n * 2])); // [2, 4, 6]

最后寄语：

作者还是一位初学者，有什么不对的地方，请大家谅解和及时指正。本期文章到此结束，我们下期再见。谢谢大家。