JavaScript创建和填充数组的更多方法

空数组+fill()方法创建并填充数组

● 我们之前创建数组的方式都是手动去创建去一个数据,例如

javascript 复制代码
console.log([1, 2, 3, 4, 5, 6, 7]);

● 当然我们也可以使用Array对象来构造数组

javascript 复制代码
console.log([1, 2, 3, 4, 5, 6, 7]);
console.log(new Array(1, 2, 3, 4, 5, 6, 7));

● 再看一个创建数组的案例,

javascript 复制代码
const x = new Array(7);
console.log(x);

这并不会创建一个只有为7值得数据,然后创建一个长度为7得空数组

javascript 复制代码
const x = new Array(7);
console.log(x.map(() => 5));

通过map方法去填充整个数组,但是这个并做不到,因为map方法只能有有值的情况进行替换,未定义的无法替换

● 我们可以使用fill方法去填充

javascript 复制代码
const x = new Array(7);
console.log(x.map(() => 5));

x.fill(6);
console.log(x);

● fill方法和slice方法类似,我们也可以传入参数,让他知道替换数组中的哪些值

javascript 复制代码
x.fill(1, 3, 5);
console.log(x);

将数组中index为3到5的填充1

Array.from

● fill方法虽然很好用,但是如果想创建[1,2,3,4,5,6,7]这样的数组的话,还是要使用Array.from方法更为简单

● 首先Array.from方法也可以简答的填充数组,和fill类似

javascript 复制代码
const y = Array.from({ length: 7 }, () => 1);
console.log(y);

● 当然,我们也可以生成我们1-7的那种数组

javascript 复制代码
const z = Array.from({ length: 7 }, (cur, i) => i + 1);
console.log(z);

● 实际用例,例如我们想得到下面这个页面所有存取款记录的数字部分

javascript 复制代码
labelBalance.addEventListener('click', function () {  //创建点击时间,因为必须要登录之后才能确定刷新UI才能读取到movements__value
  const movementsUI = Array.from(  
    document.querySelectorAll('.movements__value'),//通过选择器选中所有movements__value元素
    el => Number(el.textContent.replace('€', ''))//将这些元素作为参数,获取文本内容,并将€替换为空
  );
  console.log(movementsUI); //输出
});
相关推荐
袁煦丞28 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆29 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记39 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆39 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户214118326360240 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军41 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句43 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜43 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI44 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课1 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试