长话简说JavaScript(6)Array详细解读

Array

一组有序的数据。通过索引标记,是动态大小的,会随着数据添加而自动增长。
1.创建数组

let colors1 = new Array(); //使用 Array 构造函数
let colors2 = new Array(20); //使用 Array 构造函数,确认数组大小
let colors3 = new Array("red", "blue", "green"); // 使用 Array 构造函数,保存存入的元素

Array 构造函数还有两个 ES6 新增的用于创建数组的静态方法:from()和 of()。from()用于将类数组结构转换为数组实例,而 of()用于将一组参数转换为数组实例。

console.log(Array.from("1234")); // [1, 2, 3, 4] 字符串会被拆分为单字符数组
const m = new Map().set(1, 2) 
 .set(3, 4);
console.log( Array.from(m)); // [1, 2, 3, 4] 集合 转换成一个新数组
const s = new Set().add(1) 
 .add(2) 
 .add(3) 
 .add(4);
console.log(Array.from(s)); // [1, 2, 3, 4] 集合 转换成一个新数组
const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1); 
console.log(a1); // [1, 2, 3, 4] 
console.log(a1 === a2); // false 对现有数组执行浅复制
const iter = {
 *[Symbol.iterator]() { 
 yield 1; 
 yield 2; 
 yield 3; 
 yield 4; 
 } 
}; 
console.log(Array.from(iter)); // [1, 2, 3, 4] 可以使用任何可迭代对象

function getArgsArray() { 
 return Array.from(arguments); 
} 
console.log(getArgsArray(1, 2, 3, 4)); // [1, 2, 3, 4]  arguments 对象可以被轻松地转换为数组
const arrayLikeObject = { 
 0: 1, 
 1: 2, 
 2: 3, 
 3: 4, 
 length: 4 
}; 
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]转换带有必要属性的自定义对象
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 替代在 ES6之前常用的 Array.prototype. slice.call(arguments)

2.数组空位
使用数组字面量初始化数组时,可以使用一串逗号来创建空位(hole)。不推荐使用
3.检测数组
Array.isArray()方法,的目的就是确定一个值是否为数组,而不用管它是在哪个全局执行上下文中创建的。
4.迭代器方法
keys()返回数组索引的迭代器,values()返回数组元素的迭代器,而 entries()返回
索引/值对的迭代器。

const a = ["foo", "bar", "baz", "qux"];
const aKeys = Array.from(a.keys()); 
const aValues = Array.from(a.values()); 
const aEntries = Array.from(a.entries()); 
console.log(aKeys); // [0, 1, 2, 3] 
console.log(aValues); // ["foo", "bar", "baz", "qux"] 
console.log(aEntries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

5.复制和填充方法
批量复制方法 copyWithin()和填充数组方法 fill()都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引。使用这个方法不会改变数组的大小。

const nums = [1, 2,3,4, 5];
// 用 5 填充整个数组
console.log(nums.fill(5)); // 5,5,5,5,5
// 用 6 填充索引大于等于 3 的元素
console.log(nums.fill(6, 3)); // 5,5,5,6,6
// 用 7 填充索引大于等于 1 且小于 3 的元素
console.log(nums.fill(7, 1, 3)); // 5,7,7,6,6
const nums = [1, 2,3,4, 5];
// 复制索引 0 开始的内容,插入到索引 3 开始的位置
console.log(nums.copyWithin(3)); // 1,2,3,1,2
// 复制索引 2 开始的内容,插入到索引 0 开始的位置
console.log(nums.copyWithin( 0,2)); // 3,1,2,1,2
// 复制索引 0 开始到索引 3 结束的内容 插入到索引 4 开始的位置
console.log(nums.copyWithin(3,0, 2)); // 3,1,2,3,1

6.转换方法
toLocaleString()方法、toString()方法, valueOf()方法和join()方法

let colors = ["red", "green", "blue"];
console.log(colors.toString()); // red,green,blue
console.log(colors.toLocaleString()); // red,green,blue
console.log(colors.valueOf()); // red,green,blue
console.log(colors.join("||")); // red||green||blue```

7.栈方法
一种限制插入和删除项的数据结构,栈是一种后进先出(LIFO,Last-In-First-Out)的结构。最近添加的项先被删除,提供了 push()和 pop()方法。

let colors = new Array(); // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
count = colors.push("black"); // 再推入一项
let item = colors.pop(); // 取得最后一项
console.log(item); // black 
console.log(colors); // red,green

8.队列方法
先进先出(FIFO,First-In-First-Out)形式限制访问。队列在列表末尾添加数据,但从列表开头获取数据。

let colors = new Array(); // 创建一个数组
let count = colors.push("red", "green"); // 推入两项
count = colors.push("black"); // 再推入一项
let item = colors.shift(); // 取得第一项
console.log(item); // red 
console.log(colors); // green,black
colors.unshift("red");
console.log(colors); //red,green,black

9.排序方法
对元素重新排序:reverse()和 sort()。reverse()方法就是将数组元素反向排列。
sort()会按照升序重新排列数组元素,即最小的值在前面,最大的值在后面。

let colors = new Array(); // 创建一个数组
let count = colors.push(1, 5); // 推入两项
count = colors.push(4); // 再推入一项
colors.reverse(); 
console.log(colors); // 4,5,1
colors.sort(); 
console.log(colors); //1,4,5

10.操作方法
concat()方法可以在现有数组全部元素基础上创建一个新数组。

let colors = ["red", "green", "blue"];
let newColors = ["black", "brown"];
let moreNewColors = { 
// 强制打平数组
 [Symbol.isConcatSpreadable]: true, 
 length: 2, 
 0: "pink", 
 1: "cyan" 
};
// 强制不打平数组
newColors[Symbol.isConcatSpreadable] = false;

let colors3 = colors.concat("yellow", newColors); 
console.log(colors3); // ["red", "green", "blue", "yellow", ["black", "brown"]]
// 强制打平类数组对象
let colors4 = colors.concat(moreNewColors);
console.log(colors4); // ["red", "green", "blue", "pink", "cyan"]

splice()方法 在数组中间删除,插入,替换。

let colors = ["red", "green", "blue"];
colors.splice(0,1); // 删除第一个元素
console.log(colors); // green,blue
colors.splice(1, 0, "yellow", "orange"); //在索引1插入两个元素
console.log(colors); // green,yellow,orange,blue
colors.splice(1, 1, "red", "purple"); // 删除索引1 在索引1插入两个元素
console.log(colors); // green,red,purple,orange,blue

11.搜索和位置方法
搜索数组的方法:按严格相等搜索和按断言函数搜索。
严格相等:indexOf()、lastIndexOf()和 includes()

let numbers = [1, 2, 3, 4, 5];
console.log(numbers.indexOf(5)); // 3 
console.log(numbers.lastIndexOf(5)); // 5 
console.log(numbers.includes(3)); // true

断言函数:find()返回第一个匹配的元素,findIndex()返回第一个匹配元素的索引。

const people = [ 
 { 
 name: "Matt", 
 age: 27 
 }, 
 { 
 name: "Nicholas", 
 age: 29 
 } 
]; 
console.log(JSON.stringify(people.find((element, index, array) => element.age < 28))); 
// {name: "Matt", age: 27} 
console.log(people.findIndex((element, index, array) => element.age < 28)); 
// 0

12.迭代方法
传给每个方法的函数接收 3个参数:数组元素、元素索引和数组本身。
every():对数组每一项都运行传入的函数,如果对每一项函数都返回 true,则这个方法返回 true。
filter():对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后返回。
forEach():对数组每一项都运行传入的函数,没有返回值。
map():对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。
some():对数组每一项都运行传入的函数,如果有一项函数返回 true,则这个方法返回 true。

let numbers = [1, 2, 3, 4, 5];
let everyResult = numbers.every((item, index, array) => item > 2);
let someResult = numbers. some((item, index, array) => item > 2);
let numbers2 =[];
numbers.forEach(( item, index, array) => { 
 if( item > 2) {
    numbers2.push(item);
    }
});
let numbers3 = numbers.filter((item, index, array) => item > 2);
let numbers4 = numbers.map((item, index, array) => item * 2);
console.log(everyResult);// false every对所有值都得到达要求才能是true
console.log(someResult); // true some对所有值其中一个能满足条件才能是true
console.log(numbers2); // 3,4,5 执行循环执行判断条件
console.log(numbers3); // 3,4,5 过滤
console.log(numbers4); // 2,4,6,8,10 对原有集合进行操作改变成新的数组

13.归并方法
reduce()方法从数组第一项开始遍历到最后一项。reduceRight()从最后一项开始遍历至第一项。reduce()和reduceRight()的函数接收 4 个参数:上一个归并值、当前项、当前项的索引和数组本身。

let numbers = [1, 2, 3, 4, 5];
let reduceSum = numbers.reduce((prev, cur, index, array) => prev + cur);
let reduceRightSum = numbers.reduceRight((prev, cur, index, array)=> prev + cur );
console.log(reduceSum);// 15
console.log(reduceRightSum); // 15	
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

听不见你的名字

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

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

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

打赏作者

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

抵扣说明:

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

余额充值