I would like to ask on how to write Multidimensional Array in jQuery ?
its oky if its in basic syntax, im still new to jQuery.
Its Javascript, not JQuery that handles the arrays, so what you really want is a tutorial on multidimensional arrays in Javascript.
Here is a good one.
Basically you define one array, then reference it inside another array. For example:
var columns = new Array(3);
var rows = new Array(4);
rows[0] = columns;
This can then be accessed as follows:
rows[0][0]
there are no multidimensional arrays in javascript, but you can have an array whose elements are arrays
square = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]
arrays don't have to be of the same length
triangle = [
[1, 2, 3],
[4, 5],
[6]
]
you can mix array and non-array elements
wookie = [
head,
[hand, hand],
belly,
[foot, foot]
]
Related
I'm trying to practice with the concept of immutability. I'm using the the spliceTest array as my main reference for creating copies of the array and mutating those. I'm coming to the problem when I declare removeOneItem variable, I somehow can't declare a new spread variable using the same reference of spliceTest.
const removeOneItem = [...spliceTest.splice(0,0), ...spliceTest.splice(1)];
const removeFive = [...spliceTest.splice(0,4), ...spliceTest.splice(5)];
const spreadTest = [...spliceTest];
console.log('removeOneItem:', removeOneItem)
console.log('spreadTest:', spreadTest, spliceTest)
console.log('removeFive:', removeFive)
Results::::::::::::
removeOneItem: [ 2, 3, 4, 5, 6, 7, 8, 9 ]
spreadTest: [] []
removeFive: [ 1 ]
According to MDN:
The splice() method changes the contents of an array by removing or
replacing existing elements and/or adding new elements in place.
This means, that the splice operation changes your array
Immutability of data is a cornerstone of functional programming and in general I'll do what you are trying to do: clone the data and mutate the clone. The following function takes an array and a series of sub-arrays. The sub-arrays consist of [startIndex, quantity]. It clones the original array by the spread operator and splices the clone according to the second parameter (...cutDeep). It will return an object with the original array and the cloned array. If you wrap everything in a function then your scope protects each return. Note on subsequent turns The second clone (secondResult.dissected) is spliced once more and the last log proves the original array is never mutated.
Demo
const data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
const dissect = (array, ...cutDeep) => {
let clone = [...array];
for (let [cut, deep] of cutDeep) {
clone.splice(cut, deep);
}
return {
original: array,
dissected: clone
};
}
const firstResult = dissect(data, [2, 3], [5, 2], [9, 1]);
const secondResult = dissect(data, [3, 2], [10, 1]);
console.log(JSON.stringify(firstResult));
console.log(JSON.stringify(secondResult));
console.log(JSON.stringify(dissect(secondResult.dissected, [0, 2], [5, 1])));
console.log(JSON.stringify(data));
The problem is that you use splice when you most likely want to use slice.
splice is used for mutating an array, while slice is used to select a sub-array.
const sliceTest = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// select a sub-array starting from index 1 (dropping 0)
const removeOneItem = sliceTest.slice(1);
// select a sub-array starting from index 5 (dropping 0, 1, 2, 3, and 4)
const removeFive = sliceTest.slice(5);
// spread the full array into a new one
const spreadTest = [...sliceTest];
// array log helpers (leave these out in your code)
const toString = array => "[" + array.join(",") + "]";
const log = (name, ...arrays) => console.log(name, ...arrays.map(toString));
log('removeOneItem:', removeOneItem)
log('spreadTest:', spreadTest, sliceTest)
log('removeFive:', removeFive)
slice already creates a shallow copy of the array, so [...arr.slice(i)] is not needed.
As a two dimensional array is an array of arrays, I needed to apply array methods .unshift() and .pop() to each individual array in a 2D array of my JavaScript code.
Is there a way to do so? I know an individual member can be accessed by looping along a[i][j], but how do I obtain the individual array for applying methods to it?
Example: I have an array:
var a = [
[1,2,3]
[4,5,6]
[7,8,9]
]
Now in the first row I want to remove 3 from last and add 3 to the beginning giving me [3,1,2]. And do the same for all rows.
You can iterate over your array using .forEach(), and then for each element in your array (ie: each inner array), .pop() the last element from the end of your array, and then use .unshift(element) to prepend the element you just popped off you're array:
const a = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
a.forEach(innerArray => {
const last = innerArray.pop();
innerArray.unshift(last);
});
console.log(a);
The above can be implemented using a regular for loop if you find that easier to understand:
const a = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
for(let i = 0; i < a.length; i++) {
const innerArray = a[i];
const last = innerArray.pop();
innerArray.unshift(last);
}
console.log(a);
You can also do this by using .map(), which will produce a new array, leaving your original array a untouched:
const a = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
const a_new = a.map(inner => [inner.pop(), ...inner]);
console.log(a_new);
Map it. Functional programming is cool!
// to delete the first and last element of the inner array - `unshift` + `pop`
const result = someArray.map(innerArray => innerArray.slice(1, -1));
I'm trying to merge the elements of the array into one big array. But I receive a message saying:
ReferenceError: reduce is not defined
Here is my code:
var arrays = [[1, 2, 3], [4, 5], [6]];
console.log(reduce(arrays, function(arrayOne, arrayTwo){
return arrayOne.concat(arrayTwo);
}, 0));
reduce() is a method of the Array object, so you must use arrays.reduce().
Moreover, since your initial value is set to 0 (the 2nd parameter), you can't use arrayOne.concat on it, since it's not an array, so you must set the initial value to [].
var arrays = [[1, 2, 3], [4, 5], [6]];
console.log(arrays.reduce(function(arrayOne, arrayTwo){
return arrayOne.concat(arrayTwo);
}, []));
Note that calling Array.flat is easier:
var arrays = [[1, 2, 3], [4, 5], [6]];
// If you expect a multi-level nested array, you should increase the depth.
var depth = 1;
console.log(arrays.flat(depth));
reduce() is only defined on Arrays, you cannot call it by itself:
arrays.reduce(
function (a, b) { return a.concat(b); }
);
// Array [ 1, 2, 3, 4, 5, 6 ]
Is array.slice enough to clone a multidimensional Array in JavaScript?
For example:
var array = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
var b = array.slice();
console.log(b);
I saw a secondary implementation as this from Play by Play: Lea Verou on pluralsight:
b = array.slice().map( function(row){ return row.slice(); });
The docs are pretty clear:
The slice() method returns a shallow copy of a portion of an array into a new array object.
So the answer is no: slice by itself is not enough to clone a multidimensional array. It will only clone one dimension. You need to recursively clone each element (the way the "secondary implementation" you posted is doing) if you want a deep clone.
From MDN:
The slice() method returns a shallow copy of a portion of an array into a new array object.
That is, it will not clone the internal arrays / objects. Observe:
var array = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
var b = array.slice();
b[0].push(10);
console.log(array);
> [ [1, 2, 3, 10], [4, 5, 6], [7, 8, 9] ]
So if you want a deep copy of your 2D array, then you'd have to go with the map method (or something similar).
How could I insert an array of items into an existing array if the start index is outside the bounds of the array I'm inserting.
For example:
[ 1, 2, 3 ]
I need to insert at index 10. I tried something like this:
Array.prototype.splice.apply(curData, [newData[0].index, 0].concat(newData));
but it respected the array bounds. This COULD be accomplished with a for loop but i'd say it wouldn't be very performant at all. Any ideas?
arrOne = [1, 2, 3];
arrTwo = [10, 11, 12, 13];
arrOne[9] = undefined;
arrOne.concat(arrTwo);