├── .DS_Store ├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .firebaserc ├── .gitignore ├── README.md ├── ScreenShot.png ├── assets └── README.md ├── components ├── ContentFooter.vue ├── Contents.vue ├── README.md ├── RunButton.vue └── Topic.vue ├── data ├── Contents.vue ├── contents.js ├── emojis.js ├── products.js └── users.js ├── layouts ├── README.md └── default.vue ├── middleware └── README.md ├── nuxt.config.js ├── package.json ├── pages ├── README.md └── index.vue ├── plugins ├── README.md └── nuxt-codemirror-plugin.js ├── static ├── README.md ├── favicon.ico └── preview.jpg ├── store └── README.md └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sellsuki/js-array-playground/6bdf15bafcb93d7f15e169073791842588377901/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | build/*.js 2 | config/*.js 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 13 | 'plugin:vue/essential' 14 | ], 15 | // required to lint *.vue files 16 | plugins: [ 17 | 'vue' 18 | ], 19 | // add your custom rules here 20 | rules: {} 21 | } 22 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "js-array-playground" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # js-array-playground 2 | 3 | > A Vue.js project for Experimenting NEW Array and Arrow function from ES6 4 | 5 | ---------------------------------------- 6 | ## Content 7 | * Array.filter() 8 | * Array.find() 9 | * Array.findIndex() 10 | * Array.map() 11 | * Array.reduce() 12 | * Array.filter().map() 13 | * Array.sort() 14 | * Array.reverse() 15 | * Array.push() 16 | * Array.shift() 17 | * Array.pop() 18 | * Array.splice() 19 | * Array.join() 20 | * Array.concat() 21 | * Array.slice() 22 | * Array.copyWithin() 23 | * Array.entries() 24 | * Array.every() 25 | * Array.fill() 26 | * Array.find() 27 | * Array.forEach() 28 | * Array.includes() 29 | * Array.from() 30 | * Array.isArray() 31 | * Array.of() 32 | * Array.indexOf() 33 | * Array.keys() 34 | * Array.lastIndexOf() 35 | * Array.map() 36 | * Array.reduceRight() 37 | * Array.some() 38 | * Array.toLocaleString() 39 | * Array.unshift() 40 | * Array.values() 41 | * Array[Symbol.iterator]() 42 | 43 | > JavaScript Array Playground 44 | 45 | ![JavaScript Array Playground](https://rawgit.com/Sellsuki/js-array-playground/master/ScreenShot.png) 46 | 47 | ## Build Setup 48 | 49 | ``` bash 50 | # install dependencies 51 | npm install 52 | 53 | # serve with hot reload at localhost:8080 54 | npm run dev 55 | 56 | # build for production with minification 57 | npm run build 58 | 59 | # deploy to firebase hosting 60 | npm run deploy 61 | 62 | # run unit tests 63 | npm run unit 64 | 65 | # run e2e tests 66 | npm run e2e 67 | 68 | # run all tests 69 | npm test 70 | ``` 71 | 72 | For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). 73 | -------------------------------------------------------------------------------- /ScreenShot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sellsuki/js-array-playground/6bdf15bafcb93d7f15e169073791842588377901/ScreenShot.png -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /components/ContentFooter.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 20 | 21 | 23 | -------------------------------------------------------------------------------- /components/Contents.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | 24 | 26 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /components/RunButton.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 19 | 21 | -------------------------------------------------------------------------------- /components/Topic.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 54 | 55 | 67 | -------------------------------------------------------------------------------- /data/Contents.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 23 | 24 | 26 | -------------------------------------------------------------------------------- /data/contents.js: -------------------------------------------------------------------------------- 1 | let contents = [ 2 | { 3 | title: 'Array.filter()', 4 | type: 'pure', 5 | description: 'Creates a new array with all elements that pass the test implemented by the provided function.', 6 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter', 7 | examples: [ 8 | { 9 | code: '/* Try change the code */\nemojis.filter(\n\temoji => emoji === "🐶")\n/* and press ▶ Run below */' 10 | }, 11 | { 12 | code: 'emojis.filter(\n\temoji => emoji >= "🐶")' 13 | }, 14 | { 15 | code: 'users.filter(\n\tuser => user.age > 13)' 16 | }, 17 | { 18 | code: 'users.filter(\n\tuser => user.gender === "female")' 19 | }, 20 | { 21 | code: 'products.filter(\n\tproduct => product.price < 20000)' 22 | }, 23 | { 24 | code: 'products.filter(\n\tproduct => product.price > 20000 \n\t&& product.price < 30000)' 25 | } 26 | ] 27 | }, 28 | { 29 | title: 'Array.find()', 30 | type: 'pure', 31 | description: 32 | 'Returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.', 33 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find', 34 | examples: [ 35 | { 36 | code: 'emojis.find(\n\temoji => emoji === "🐶")' 37 | }, 38 | { 39 | code: 'users.find(\n\tuser => user.age > 13)' 40 | }, 41 | { 42 | code: 'products.find(\n\tproduct => product.price < 20000)' 43 | } 44 | ] 45 | }, 46 | { 47 | title: 'Array.findIndex()', 48 | type: 'pure', 49 | description: 50 | 'Returns the index of the first element in the array that satisfies the provided testing function. Otherwise -1 is returned.', 51 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex', 52 | examples: [ 53 | { 54 | code: 'emojis.findIndex(\n\temoji => emoji === "🐶")' 55 | }, 56 | { 57 | code: 'users.findIndex(\n\tuser => user.age > 13)' 58 | }, 59 | { 60 | code: 'products.findIndex(\n\tproduct => product.price < 20000)' 61 | } 62 | ] 63 | }, 64 | { 65 | title: 'Array.map()', 66 | type: 'pure', 67 | description: 68 | 'Creates a new array with the results of calling a provided function on every element in the calling array.', 69 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map', 70 | examples: [ 71 | { 72 | code: "emojis.map(\n\temoji => \n\t\t'Char code of ' + emoji + ' is ' + emoji.codePointAt(0))" 73 | }, 74 | { 75 | code: 'users.map(\n\tuser => user)' 76 | }, 77 | { 78 | code: 'users.map(\n\tuser => user.gender)' 79 | }, 80 | { 81 | code: "users.map(\n\tuser => \n\t\tuser.name + ' age ' + user.age)" 82 | }, 83 | { 84 | code: 'users.map(\n\tuser => user.gender).length' 85 | } 86 | ] 87 | }, 88 | { 89 | title: 'Array.reduce()', 90 | type: 'pure', 91 | description: 92 | 'Applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.', 93 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce', 94 | examples: [ 95 | { 96 | code: 'users.reduce(\n\t(previousValue, currentValue) => \n\t\tpreviousValue + currentValue.age, 0)' 97 | }, 98 | { 99 | code: 'users.reduce(\n\t/* Try change params */\n\t(sumAge, user) => \n\t\tsumAge + user.age, 0)' 100 | }, 101 | { 102 | code: 'emojis.reduce(\n\t(result, emoji) => \n\t\tresult + \'💥\' + emoji, "")' 103 | }, 104 | { 105 | code: 'products.reduce(\n\t(sumPrice, product) => \n\t\tsumPrice + product.price, 0)' 106 | } 107 | ] 108 | }, 109 | { 110 | title: 'Array.filter().map()', 111 | description: 'Two method can put together.', 112 | examples: [ 113 | { 114 | code: "users.filter(\n\tuser => \n\t\tuser.gender === 'female')\n\t\t\t.map(user => user.username)" 115 | } 116 | ] 117 | }, 118 | { 119 | title: 'Array.sort()', 120 | type: 'impure', 121 | description: 'Sorts the elements of an array and returns the array. We can define the conditions for sorting.', 122 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort', 123 | examples: [ 124 | { 125 | code: 'emojis.sort()' 126 | }, 127 | { 128 | code: 'users.sort()' 129 | }, 130 | { 131 | code: '/*Order by name*/\nusers.sort(\n\t(a, b) => (a.name - b.name))' 132 | }, 133 | { 134 | code: '/*Order by price*/\nproducts.sort(\n\t(a, b) => (a.price - b.price))' 135 | } 136 | ] 137 | }, 138 | { 139 | title: 'Array.reverse()', 140 | type: 'impure', 141 | description: 'Reverses an array in place.', 142 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse', 143 | examples: [ 144 | { 145 | code: 'emojis.reverse()' 146 | }, 147 | { 148 | code: 'users.reverse()' 149 | }, 150 | { 151 | code: 'products.reverse()' 152 | } 153 | ] 154 | }, 155 | { 156 | title: 'Array.push()', 157 | type: 'impure', 158 | description: 'Adds one or more elements to the end of an array and returns the new length of the array.', 159 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push', 160 | examples: [ 161 | { 162 | code: "emojis.push('💥')" 163 | }, 164 | { 165 | code: "emojis.push('⚽', '🏀')" 166 | }, 167 | { 168 | code: "/* Observe this carefully */\nemojis.push(['🔫', '💣', '🔪'])" 169 | } 170 | ] 171 | }, 172 | { 173 | title: 'Push', 174 | type: 'pure', 175 | description: 'We can pure push too.', 176 | examples: [ 177 | { 178 | code: 179 | "// Use spread operator\nvar newEmojis = [...emojis, '🏀']\n// Try push to array\nnewEmojis.push('🏀')\nnewEmojis" 180 | }, 181 | { 182 | code: 183 | "// or use concat \nvar newEmojisAgain = [].concat(emojis, '👍')\n// Try push to array\nnewEmojisAgain.push('🏀')\nnewEmojisAgain" 184 | } 185 | ] 186 | }, 187 | { 188 | title: 'Array.shift()', 189 | type: 'impure', 190 | description: 191 | 'Removes the first element from an array and returns that removed element. This method changes the length of the array.', 192 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift', 193 | examples: [ 194 | { 195 | code: 'emojis.shift()' 196 | }, 197 | { 198 | code: 'users.shift()' 199 | }, 200 | { 201 | code: 'products.shift()' 202 | } 203 | ] 204 | }, 205 | { 206 | title: 'Array.pop()', 207 | type: 'impure', 208 | description: 209 | 'Removes the last element from an array and returns that element. This method changes the length of the array.', 210 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop', 211 | examples: [ 212 | { 213 | code: 'emojis.pop()' 214 | }, 215 | { 216 | code: 'users.pop()' 217 | }, 218 | { 219 | code: 'products.pop()' 220 | } 221 | ] 222 | }, 223 | { 224 | title: 'Array.splice()', 225 | type: 'impure', 226 | description: 'Changes the contents of an array by removing existing elements and/or adding new elements.', 227 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice', 228 | examples: [ 229 | { 230 | code: '/*Add new element to index 2*/\n emojis.splice(2, 0,\n\t "👍", "👊", "✊", "✌️", "👌", "✋")' 231 | }, 232 | { 233 | code: '/*Add new element*/\n/*to index 2 - 4*/\n emojis.splice(2, 3,\n\t "👍", "👊", "✊")' 234 | }, 235 | { 236 | code: '/*Remove element index 2 - 3*/\n users.splice(2, 2)' 237 | } 238 | ] 239 | }, 240 | { 241 | title: 'Array.join()', 242 | type: 'pure', 243 | description: 'Joins all elements of an array (or an array-like object) into a string and returns this string.', 244 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join', 245 | examples: [ 246 | { 247 | code: 'emojis.join()' 248 | }, 249 | { 250 | code: 'emojis.join("|")' 251 | } 252 | ] 253 | }, 254 | { 255 | title: 'Array.concat()', 256 | type: 'pure', 257 | description: 258 | 'This method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.', 259 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat', 260 | examples: [ 261 | { 262 | code: '//Take first array and concatenate\n/* with the second array.*/\nemojis.concat(users)' 263 | }, 264 | { 265 | code: '//Concatenate more than 2 arrays\nempty.concat(users, emojis)' 266 | }, 267 | { 268 | code: 269 | '//Concatenate more than 3 elements\n//with empty array\n[].concat(["🇹🇭", "🇰🇷", "🇯🇵"], emojis, ["🇹🇭", "🇰🇷", "🇯🇵"])' 270 | } 271 | ] 272 | }, 273 | { 274 | title: 'Array.slice()', 275 | type: 'pure', 276 | description: 277 | 'Returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.', 278 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice', 279 | examples: [ 280 | { 281 | code: '// Extracts all element.\nemojis.slice()' 282 | }, 283 | { 284 | code: '// Extracts the third element. \n// through the last element.\nemojis.slice(3)' 285 | }, 286 | { 287 | code: '// Extracts the third element. \n// through the fourth element.\nemojis.slice(3, 4)' 288 | } 289 | ] 290 | }, 291 | { 292 | title: 'Array.toString()', 293 | type: 'pure', 294 | description: 'Returns a string representing the specified array and its elements.', 295 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toString', 296 | examples: [ 297 | { 298 | code: '// Return toString value of emojis. \nemojis.toString()' 299 | } 300 | ] 301 | }, 302 | { 303 | title: 'Copy Array', 304 | type: 'pure', 305 | description: 'pure Copy Array', 306 | examples: [ 307 | { 308 | code: 309 | "// Copy emojis array \nvar copyEmojis = [...emojis]\n// Try push element to emojis\ncopyEmojis.push('🏀')\ncopyEmojis" 310 | }, 311 | { 312 | code: 313 | "// or use [].concat \nvar copyEmojisAgain = [].concat(emojis)\n// Try push element to emojis\ncopyEmojisAgain.push('🏀')\ncopyEmojisAgain" 314 | } 315 | ] 316 | }, 317 | { 318 | title: 'Array.copyWithin()', 319 | type: 'impure', 320 | description: 321 | 'Shallow copies part of an array to another location in the same array and returns it, without modifying its size.', 322 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin', 323 | examples: [ 324 | { 325 | code: 326 | '// place at position 0 \n// the element between\n// position 3 and 4 \nvar copyEmojis = emojis.slice(0)\ncopyEmojis.copyWithin(0, 3, 4)' 327 | }, 328 | { 329 | code: 330 | '// place at position 1 \n// the elements after \n// position 3 \nvar copyEmojis = emojis.slice(0)\ncopyEmojis.copyWithin(1, 3)' 331 | } 332 | ] 333 | }, 334 | { 335 | title: 'Array.entries()', 336 | type: 'pure', 337 | description: 'Returns a new Array Iterator object that contains the key/value pairs for each index in the array.', 338 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/entries', 339 | examples: [ 340 | { 341 | code: '// place at position 0 \nvar iterator = emojis.entries()\niterator.next().value' 342 | } 343 | ] 344 | }, 345 | { 346 | title: 'Array.every()', 347 | type: 'pure', 348 | description: 'Tests whether all elements in the array pass the test implemented by the provided function.', 349 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every', 350 | examples: [ 351 | { 352 | code: 353 | '// function to test\nfunction isPriceBelowThreshold(product) {\n return product.price < 100000;\n}\nproducts.every(isPriceBelowThreshold)' 354 | } 355 | ] 356 | }, 357 | { 358 | title: 'Array.fill()', 359 | type: 'impure', 360 | description: 361 | 'Fills all the elements of an array from a start index to an end index with a static value. The end index is not included.', 362 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/fill', 363 | examples: [ 364 | { 365 | code: 366 | 'var copyEmojis = emojis.slice(0)\n// fill with 0 from position \n// 2 until position 4\ncopyEmojis.fill(0, 2, 4)' 367 | }, 368 | { 369 | code: 'var copyEmojis = emojis.slice(0)\n// fill with 1 from position 2\ncopyEmojis.fill(1, 2)' 370 | }, 371 | { 372 | code: 'var copyEmojis = emojis.slice(0)\n// fill with 2 \ncopyEmojis.fill(2)' 373 | } 374 | ] 375 | }, 376 | { 377 | title: 'Array.find()', 378 | type: 'pure', 379 | description: 380 | 'Returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.', 381 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find', 382 | examples: [ 383 | { 384 | code: '// Find the first user \n// age more than 14\nusers.find(function(user) {\n return user.age > 14\n})' 385 | } 386 | ] 387 | }, 388 | { 389 | title: 'Array.forEach()', 390 | type: 'pure', 391 | description: 'Executes a provided function once for each array element.', 392 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach', 393 | examples: [ 394 | { 395 | code: 'let copyEmojis = ""\nemojis.forEach(function(emoji) {\n copyEmojis += emoji\n})\ncopyEmojis' 396 | } 397 | ] 398 | }, 399 | { 400 | title: 'Array.includes()', 401 | type: 'pure', 402 | description: 403 | 'Determines whether an array includes a certain element, returning true or false as appropriate. It uses the sameValueZero algorithm to determine whether the given element is found.', 404 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes', 405 | examples: [ 406 | { 407 | code: 'emojis.includes("💻")' 408 | }, 409 | { 410 | code: 'emojis.includes("🇹🇭")' 411 | }, 412 | { 413 | code: 'emojis.includes("🍵")' 414 | } 415 | ] 416 | }, 417 | { 418 | title: 'Array.from()', 419 | type: 'pure', 420 | description: 'Creates a new, shallow-copied Array instance from an array-like or iterable object.', 421 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from', 422 | examples: [ 423 | { 424 | code: 'Array.from("shiba")' 425 | } 426 | ] 427 | }, 428 | { 429 | title: 'Array.isArray()', 430 | type: 'pure', 431 | description: 'Determines whether the passed value is an Array.', 432 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray', 433 | examples: [ 434 | { 435 | code: 'Array.isArray(emojis)' 436 | } 437 | ] 438 | }, 439 | { 440 | title: 'Array.of()', 441 | type: 'pure', 442 | description: 443 | 'Creates a new Array instance with a variable number of arguments, regardless of number or type of the arguments.', 444 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of', 445 | examples: [ 446 | { 447 | code: 'Array.of(1, 2, 3, 4, 5)' 448 | } 449 | ] 450 | }, 451 | { 452 | title: 'Array.indexOf()', 453 | type: 'pure', 454 | description: 455 | 'Returns the first index at which a given element can be found in the array, or -1 if it is not present.', 456 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf', 457 | examples: [ 458 | { 459 | code: 'emojis.indexOf("☕️")' 460 | }, 461 | { 462 | code: 'emojis.indexOf("👙")' 463 | }, 464 | { 465 | code: 'emojis.indexOf("🍶")' 466 | } 467 | ] 468 | }, 469 | { 470 | title: 'Array.keys()', 471 | type: 'pure', 472 | description: 'Returns a new Array Iterator object that contains the keys for each index in the array.', 473 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys', 474 | examples: [ 475 | { 476 | code: 477 | 'let copyEmoji = ""\nvar iterator = emojis.keys()\nfor (let key of iterator) {\n copyEmoji += key; // expected output: 0 1 2\n}\ncopyEmoji' 478 | } 479 | ] 480 | }, 481 | { 482 | title: 'Array.lastIndexOf()', 483 | type: 'pure', 484 | description: 485 | 'Returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.', 486 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf', 487 | examples: [ 488 | { 489 | code: 'emojis.lastIndexOf("🍻")' 490 | }, 491 | { 492 | code: 'emojis.lastIndexOf("👙")' 493 | }, 494 | { 495 | code: 'emojis.lastIndexOf("💪")' 496 | } 497 | ] 498 | }, 499 | { 500 | title: 'Array.map()', 501 | type: 'pure', 502 | description: 503 | 'Creates a new array with the results of calling a provided function on every element in the calling array.', 504 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map', 505 | examples: [ 506 | { 507 | code: 'var array = [1, 4, 9, 16]\narray.map(x => x * 2)' 508 | } 509 | ] 510 | }, 511 | { 512 | title: 'Array.reduceRight()', 513 | type: 'impure', 514 | description: 515 | 'Applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.', 516 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map', 517 | examples: [ 518 | { 519 | code: 520 | '[[0, 1], [2, 3], [4, 5]].reduceRight(\n (previousValue, currentValue) => previousValue.concat(currentValue)\n)' 521 | } 522 | ] 523 | }, 524 | { 525 | title: 'Array.some()', 526 | type: 'pure', 527 | description: 528 | 'Tests whether at least one element in the array passes the test implemented by the provided function.', 529 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some', 530 | examples: [ 531 | { 532 | code: 533 | 'var array = [1, 2, 3, 4, 5]\nvar even = function(element) {\n // checks whether an element is even\n return element % 2 === 0;\n}\narray.some(even)' 534 | } 535 | ] 536 | }, 537 | { 538 | title: 'Array.toLocaleString()', 539 | type: 'pure', 540 | description: 541 | 'Returns a string representing the elements of the array. The elements are converted to Strings using their toLocaleString methods and these Strings are separated by a locale-specific String (such as a comma “,”).', 542 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString', 543 | examples: [ 544 | { 545 | code: 546 | 'var array1 = [1, "a", new Date("21 Dec 1997 14:12:00 UTC")]\narray1.toLocaleString("en", {timeZone: "UTC"})' 547 | } 548 | ] 549 | }, 550 | { 551 | title: 'Array.unshift()', 552 | type: 'impure', 553 | description: 'Adds one or more elements to the beginning of an array and returns the new length of the array.', 554 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift', 555 | examples: [ 556 | { 557 | code: 'emojis.unshift("🍺","🍻")' 558 | } 559 | ] 560 | }, 561 | { 562 | title: 'Array.values()', 563 | type: 'pure', 564 | description: 'Returns a new Array Iterator object that contains the values for each index in the array.', 565 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/values', 566 | examples: [ 567 | { 568 | code: 569 | 'let copyArray = ""\nconst array = ["a", "b", "c"]\nconst iterator = array.values()\nfor (const value of iterator) {\n copyArray += value // \n}\ncopyArray' 570 | } 571 | ] 572 | }, 573 | { 574 | title: 'Array[Symbol.iterator]()', 575 | type: 'pure', 576 | description: 'Property is the same function object as the initial value of the values() property.', 577 | ref: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator', 578 | examples: [ 579 | { 580 | // cant find the right example 581 | code: 582 | 'let copyArray = ""\nvar arr = ["w", "y", "k", "o", "p"]\nvar eArr = arr[Symbol.iterator]()\nfor (let letter of eArr) {\n copyArray += letter\n}\ncopyArray' 583 | } 584 | ] 585 | }, 586 | { 587 | title: 'How to break loop array function with Array.some()', 588 | type: 'pure', 589 | description: 'If use forEach and want to break loop just use some and return with condition', 590 | ref: 'https://stackoverflow.com/questions/2641347/how-to-short-circuit-array-foreach-like-calling-break', 591 | examples: [ 592 | { 593 | // cant find the right example 594 | code: 'users.some(item => {\n\tconsole.log(item)\n\treturn item.id === 1002\n})' 595 | } 596 | ] 597 | } 598 | ] 599 | 600 | export default contents 601 | -------------------------------------------------------------------------------- /data/emojis.js: -------------------------------------------------------------------------------- 1 | let emojis = ['🍺', '🍻', '🍶', '🍵', '☕️', '🍼', '💻', '👙', '🐶', '🎮', '💪'] 2 | export default emojis 3 | -------------------------------------------------------------------------------- /data/products.js: -------------------------------------------------------------------------------- 1 | let products = [ 2 | { 3 | id: '001', 4 | name: 'iPad Pro', 5 | price: 30900, 6 | storage: 32, 7 | type: 'iPad', 8 | size: '12.9' 9 | }, 10 | { 11 | id: '002', 12 | name: 'iPad Pro', 13 | price: 34900, 14 | storage: 128, 15 | type: 'iPad', 16 | size: '12.9' 17 | }, 18 | { 19 | id: '003', 20 | name: 'iPad Pro', 21 | price: 38900, 22 | storage: 256, 23 | type: 'iPad', 24 | size: '12.9' 25 | }, 26 | { 27 | id: '004', 28 | name: 'iPad Pro', 29 | price: 22900, 30 | storage: 32, 31 | type: 'iPad', 32 | size: '9.7' 33 | }, 34 | { 35 | id: '005', 36 | name: 'iPad Pro', 37 | price: 26900, 38 | storage: 128, 39 | type: 'iPad', 40 | size: '9.7' 41 | }, 42 | { 43 | id: '006', 44 | name: 'iPad Pro', 45 | price: 30900, 46 | storage: 256, 47 | type: 'iPad', 48 | size: '9.7' 49 | }, 50 | { 51 | id: '007', 52 | name: 'iPad Air 2', 53 | price: 14400, 54 | storage: 32, 55 | type: 'iPad', 56 | size: '9.7' 57 | }, 58 | { 59 | id: '008', 60 | name: 'iPad Air 2', 61 | price: 18400, 62 | storage: 128, 63 | type: 'iPad', 64 | size: '9.7' 65 | }, 66 | { 67 | id: '009', 68 | name: 'iPad mini 4', 69 | price: 14400, 70 | storage: 32, 71 | type: 'iPad', 72 | size: '7.9' 73 | }, 74 | { 75 | id: '010', 76 | name: 'iPad mini 4', 77 | price: 18400, 78 | storage: 128, 79 | type: 'iPad', 80 | size: '7.9' 81 | }, 82 | { 83 | id: '011', 84 | name: 'iphone7', 85 | price: 26000, 86 | storage: 32, 87 | type: 'iPhone', 88 | size: '4.7' 89 | }, 90 | { 91 | id: '012', 92 | name: 'iphone7', 93 | price: 55000, 94 | storage: 128, 95 | type: 'iPhone', 96 | size: '4.7' 97 | }, 98 | { 99 | id: '013', 100 | name: 'iphone7Plus', 101 | price: 49000, 102 | storage: 32, 103 | type: 'iPhone', 104 | size: '5.5' 105 | }, 106 | { 107 | id: '014', 108 | name: 'iphone7Plus', 109 | price: 59000, 110 | storage: 128, 111 | type: 'iPhone', 112 | size: '5.5' 113 | }, 114 | { 115 | id: '020', 116 | name: 'iphoneX', 117 | price: 69000, 118 | storage: 128, 119 | type: 'iPhone', 120 | size: '6.0' 121 | }, 122 | { 123 | id: '017', 124 | name: 'iphone8', 125 | price: 60000, 126 | storage: 128, 127 | type: 'iPhone', 128 | size: '6.0' 129 | } 130 | ] 131 | export default products 132 | -------------------------------------------------------------------------------- /data/users.js: -------------------------------------------------------------------------------- 1 | let users = [ 2 | { 3 | id: 1000, 4 | name: 'Corey Griffith', 5 | username: 'coGriffith', 6 | gender: 'male', 7 | age: 13 8 | }, 9 | { 10 | id: 1001, 11 | name: 'Marion McDaniel', 12 | username: 'mMcDaniel', 13 | gender: 'female', 14 | age: 15 15 | }, 16 | { 17 | id: 1002, 18 | name: 'Tom Robbins', 19 | username: 'tRobbins', 20 | gender: 'male', 21 | age: 15 22 | }, 23 | { 24 | id: 1003, 25 | name: 'Ruth Harvey', 26 | username: 'rHarvey', 27 | gender: 'female', 28 | age: 14 29 | }, 30 | { 31 | id: 1004, 32 | name: 'Terry Willis', 33 | username: 'tWillis', 34 | gender: 'male', 35 | age: 13 36 | } 37 | ] 38 | export default users 39 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /* 3 | ** Headers of the page 4 | */ 5 | plugins: [ 6 | { src: '~plugins/nuxt-codemirror-plugin.js', ssr: false } 7 | ], 8 | css: [ 9 | // lib css 10 | { src: 'bulma/bulma.sass', lang: 'sass' }, 11 | { src: 'font-awesome/scss/font-awesome.scss', lang: 'scss' }, 12 | 'codemirror/lib/codemirror.css', 13 | // merge css 14 | 'codemirror/addon/merge/merge.css', 15 | // theme css 16 | 'codemirror/theme/material.css' 17 | ], 18 | head: { 19 | title: 'js-array-playground', 20 | meta: [ 21 | { charset: 'utf-8' }, 22 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 23 | { hid: 'description', name: 'description', content: 'JavaScript Array Playground' } 24 | ], 25 | link: [ 26 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 27 | ] 28 | }, 29 | /* 30 | ** Customize the progress bar color 31 | */ 32 | loading: { color: '#3B8070' }, 33 | /* 34 | ** Build configuration 35 | */ 36 | build: { 37 | /* 38 | ** Run ESLint on save 39 | */ 40 | extend (config, { isDev, isClient }) { 41 | if (isDev && isClient) { 42 | config.module.rules.push({ 43 | enforce: 'pre', 44 | test: /\.(js|vue)$/, 45 | loader: 'eslint-loader', 46 | exclude: /(node_modules)/ 47 | }) 48 | } 49 | }, 50 | /* 51 | ** Disabled warning 52 | */ 53 | postcss: { 54 | plugins: { 55 | 'postcss-custom-properties': { 56 | warnings: false 57 | } 58 | } 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-array-playground", 3 | "version": "1.0.0", 4 | "description": "JavaScript Array Playground", 5 | "author": "Nati Namvong ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 13 | "precommit": "npm run lint" 14 | }, 15 | "dependencies": { 16 | "bulma": "^0.7.1", 17 | "font-awesome": "^4.7.0", 18 | "nuxt": "^1.0.0", 19 | "vue-codemirror": "^4.0.5" 20 | }, 21 | "devDependencies": { 22 | "babel-eslint": "^8.2.1", 23 | "eslint": "^4.15.0", 24 | "eslint-friendly-formatter": "^3.0.0", 25 | "eslint-loader": "^1.7.1", 26 | "eslint-plugin-vue": "^4.0.0", 27 | "node-sass": "^4.9.0", 28 | "sass-loader": "^7.0.1" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 179 | 180 | 245 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/plugins 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /plugins/nuxt-codemirror-plugin.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueCodemirror from 'vue-codemirror' 3 | 4 | // language 5 | import 'codemirror/mode/vue/vue.js' 6 | 7 | // active-line.js 8 | import 'codemirror/addon/selection/active-line.js' 9 | 10 | // styleSelectedText 11 | import 'codemirror/addon/selection/mark-selection.js' 12 | import 'codemirror/addon/search/searchcursor.js' 13 | 14 | // highlightSelectionMatches 15 | import 'codemirror/addon/scroll/annotatescrollbar.js' 16 | import 'codemirror/addon/search/matchesonscrollbar.js' 17 | import 'codemirror/addon/search/searchcursor.js' 18 | import 'codemirror/addon/search/match-highlighter.js' 19 | 20 | // keyMap 21 | import 'codemirror/mode/clike/clike.js' 22 | import 'codemirror/addon/edit/matchbrackets.js' 23 | import 'codemirror/addon/comment/comment.js' 24 | import 'codemirror/addon/dialog/dialog.js' 25 | import 'codemirror/addon/dialog/dialog.css' 26 | import 'codemirror/addon/search/searchcursor.js' 27 | import 'codemirror/addon/search/search.js' 28 | import 'codemirror/keymap/sublime.js' 29 | 30 | // foldGutter 31 | import 'codemirror/addon/fold/foldgutter.css' 32 | import 'codemirror/addon/fold/brace-fold.js' 33 | import 'codemirror/addon/fold/comment-fold.js' 34 | import 'codemirror/addon/fold/foldcode.js' 35 | import 'codemirror/addon/fold/foldgutter.js' 36 | import 'codemirror/addon/fold/indent-fold.js' 37 | import 'codemirror/addon/fold/markdown-fold.js' 38 | import 'codemirror/addon/fold/xml-fold.js' 39 | 40 | // more... 41 | 42 | Vue.use(VueCodemirror) 43 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sellsuki/js-array-playground/6bdf15bafcb93d7f15e169073791842588377901/static/favicon.ico -------------------------------------------------------------------------------- /static/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sellsuki/js-array-playground/6bdf15bafcb93d7f15e169073791842588377901/static/preview.jpg -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | --------------------------------------------------------------------------------