Trying out Arrays

Created: Sat 25 Dec 21 Updated on: Tue 21 May 24

Page section: playground

TAGS: arrays loops for of loop

Show

Add items

Remove

Copying

Looping

Array methods

name	example	effect
push	myVar.push(‘squid’)	adds squid to the end of the array
unshift	myVar.unshift(‘squid’)	adds squid to the start of the array
shift	myVar.shift()	removes the first item
pop	myVar.pop()	removes the last item
splice	myVar.splice(3, 1)	removes one item starting with fourth [3]
slice	myVar.slice(3, 1)	copies one item starting with fourth [3]. Used in a new variable

So with:

let myVar = [[1, "tree"], 2, 3, 4, 5, 6];

and

const mySubVar = ["frog", "Linsang", "stink badger"];

Looping with a `for .. of` loop

Using a for .. of loop through the anythingGoes array.

agBtn.addEventListener('click', () => {
 ag.innerHTML = '';
 for (let item of anythingGoes) {
   ag.innerHTML += `${item} <br>`;
 }
 ag.innerHTML += `<br>${anythingGoes.join(', ')}`;
});

Convert to JSON

Press to convert the JS todos object to JSON format.

Full list of array methods…

2:02 reverse
2:35 push
3:23 unshift
3:54 includes
5:00 isArray
5:32 from
6:36 of
7:01 indexOf
7:48 lastIndexOf
8:39 toString
9:15 toLocaleString
10:04 join
10:52 pop
11:54 shift
12:25 slice
13:52 forEach
15:08 find
16:18 findIndex
16:58 some
18:09 every
19:07 filter
20:07 map
21:32 reduce
25:29 reduceRight
26:20 concat
27:05 fill
28:44 flat
30:37 flatMap
32:50 splice
34:48 keys
37:20 values
37:59 entries
39:06 sort
42:25 copyWithin

View contents of: /static/js/tryout-arrays.js

const fruit = ["apples", "bananas", "cantaloupe", "dorians"];

const scientificFruit = [
  "Bell pepper",
  " Chile pepper",
  " Corn kernel",
  " Cucumber",
  " Eggplant",
  " Jalapeño",
  " Olive",
  " Pea",
  " Pumpkin",
  " Squash",
  " Tomato",
  " Zucchini",
];

const todos = [
  {
    id: 1,
    text: "Take out rubbish",
    isCompleted: true,
  },
  {
    id: 2,
    text: "Meet with boss",
    isCompleted: true,
  },
  {
    id: 3,
    text: "Dental appointment",
    isCompleted: false,
  },
];

function showFruit() {
  document.getElementById("fruitlist").innerHTML = fruit;
}

function fruitLoops(frt) {
  document.getElementById("fruit-loops").innerHTML += frt + '<br>';
}

const butt1 = document.getElementById("listfruit");

butt1.addEventListener("click", () => {
  document.getElementById("fruitlist").innerHTML = fruit;
});

const butt2 = document.getElementById("fruit2");

butt2.addEventListener("click", function () {
  document.getElementById("fruitlist").innerHTML = fruit[1];
});

const butt3 = document.getElementById("scientific");

butt3.addEventListener("click", function () {
  document.getElementById("fruitlist").innerHTML = scientificFruit;
});

const butt39 = document.getElementById("copying");

butt39.addEventListener("click", function () {
  const otherFruit = fruit.slice(1, 3);
  console.log("what apphen?");
  alert(`A new array called otherFruit now contains ${otherFruit}`);
});

// For buttons showing Array Methods

let myVar = [[1, "tree"], 2, 3, 4, 5, 6];
const mySubVar = ["frog", "Linsang", "stink badger"];

const showMyVar = document.getElementById("show-my-var");
const smvList = document.getElementById("smv-list");

function listMyVar() {
  smvList.innerHTML = ``;
  for (let i = 0; i < myVar.length; i++) {
    smvList.innerHTML += `<li>${myVar[i]}</li>`;
  }
}

showMyVar.addEventListener("click", () => {
  listMyVar();
});

const resetMyVar = document.getElementById("reset-my-var");

resetMyVar.addEventListener("click", () => {
  myVar = [[1, "tree"], 2, 3, 4, 5, 6];
  listMyVar();
  //   alert("reset");
});