Day 4 - Array

当需要把资料放在一起时,就会需要 Array (阵列)。

小提醒:阵列不是原始资料型别之一。

当有很多资料的时候,我们不太可能一一命名变数并给它值,例如:

let friend1 = "Mike";
let friend2 = "David";
let friend3 = "Mary";

这时候可以使用阵列,把每个资料放进一个中括号[ ]里,如下:

let friends = ["Mike","David","Mary"]

阵列包含许多属性及方法,这边来介绍几个常用的

Array properties

  • index 索引值
    从 0 开始算起,可以用来抓资料位置。
    例如:
let friends = ["Mike","David","Mary"];
console.log(friends[0]); // Mike
console.log(friends[1]); // David
console.log(friends[2]); // Mary
  • length 资料长度
let friends = ["Mike","David","Mary"];
console.log(friends.length); // 3

Array methods

  • push() 在阵列的最後增加元素
let people=['A','B','C'];
people.push('D');
console.log(people); // ['A','B','C','D']
  • pop() 删除阵列的最後一个元素
let people=['a','b','c'];
people.pop();
console.log(people); // ['a','b']
  • shift() 删除阵列的第一个元素
let people=['a','b','c'];
people.shift();
console.log(people); // ['b','c']
  • unshift() 在阵列的第一个位置增加元素
let people=['a','b','c'];
people.unshift('1');
console.log(people); // ['1','a','b','c']
  • reverse() 将目前阵列排序给反转过来
let ary = ['A', 'B', 'C', 'D', 'E']; 
ary.reverse();
console.log(ary); // ['E','D','C','B','A']
  • slice() 用来删除元素或新增元素
    当只有一个参数时,表示从此索引位置开始删除後面所有的元素(包括自己)
    例如
let array = ['A', 'B', 'C', 'D', 'E'];
array.splice(2); //从索引值= 2(c)的地方开始往後全部删除,所以 CDE 都会被删掉,只剩下 AB
console.log(array); //['A', 'B']

当有 2 个参数时,第一个参数表示起始位置,第二个参数表示要删除的资料比数
例如

let people=['A','B','C','D','E','F','G'];
people.splice(1,3); // 表示从索引位置=1(B)开始,删除 3 笔资料,所以 BCD 会被删除
console.log(people); // ['A','E','F','G']

当有 3 个参数时,第一个参数表示起始位置,第二个参数表示包要删除的资料比数,第三个参数表示从起始位置开始要加入到阵列的元素
例如

let ary = ['A', 'B', 'D', 'E'];
ary.splice(2,0,'C');  // 第二个参数带入0,表示不删除任何资料,仅在第三个参数放入要加入的资料
console.log(ary); // ['A', 'B', 'C', 'D', 'E']

<<:  数位AI化

>>:  【D5】期货资讯:期交所&Open data

ProxmoxVE PVE VM 安装 ChromeOS

ProxmoxVE PVE VM 安装 ChromeOS ChromeOS 版本 Download ...

大共享时代系列_009_共享农场

有没有想过除了从菜市场、超级市场买菜以外,试着跟人在离家不远的农场,共享农作、畜牧来获取需求的天然的...

[Day12] 从 function 谈变数的 Scope

说到 function ,又要回头来谈变数在 function 的 scope(作用域) 先宣告一个...

DAY21-导览设计之Navbar

前言: 接下来要来完成我们网站的导览部分了,这里阿森主要分为两个大项目,分别是Navbar和Sid...

[Day - 29] React Hooks useEffect 学习笔记

useEffect - 副作用处理 useEffect:资料获取、订阅或手动方式修改 React C...