Javascript Notes

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Grammar_and_types

Array

var points = [];   
var points = new Array(9); 
var cars = new Array("Saab", "Volvo", "BMW");
var person = {firstName:"John", lastName:"Doe", age:46};
var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.push("Lemon"); // adds a new element (Lemon) to fruits
    fruits[6] = "Lemon";
Array.isArray(fruits); 
var squares=[
      'O', null, 'X',
      'X', 'X', 'O',
      'O', null, null,
  ];

Object

var car = {type:"Fiat", model:"500", color:"white"};
console.log(car.type);
console.log(car["color"]);

Array.prototype.slice()

The slice() method 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.

arr.slice(begin, end)->區間是[begin, end), 包括begin, 不包括end

var a = ['zero', 'one', 'two', 'three'];
var sliced = a.slice(1, 3);

console.log(a);      // ['zero', 'one', 'two', 'three']
console.log(sliced); // ['one', 'two']

Arrow Functions

Arrow function expression，也是所謂的 fat arrow function，最初流行在 coffeescript 的語法中，現在可以在 Javascript 上使用。

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// 等於 : => { return expression; }
// 只有一個參數時,括號才能不加:
(singleParam) => { statements }
singleParam => { statements }
//若無參數,就一定要加括號:
() => { statements }

Promises

var wait1000 = () => new Promise((resolve, reject) => {
    setTimeout(resolve, 1000)
})
wait1000()
    .then(function() {
        console.log(‘Yay!’)
        return wait1000()
    })
    .then(function() {
        console.log(‘Wheeyee!’)
    });

Import and Export

import {port, getAccounts} from ‘module’


export default App;

export default 和 export 區別：

1. 在一個文件或模塊中，export、import可以有多個，export default僅有一個
2. 通過export方式導出，在導入時要加{ }，export default則不需要

1.export
//a.js
export const str = "blablabla~";
export function log(sth) { 
  return sth;
}

//b.js
import { str, log } from 'a'; //也可以分开写两次，导入的时候带花括号

//c.js
const str = "blablabla~";
export default str;

//d.js
import str from 'c';

Object rest and spread properties

https://developers.google.com/web/updates/2017/06/object-rest-spread

// Rest elements for array destructuring assignment:
const primes = [2, 3, 5, 7, 11];
const [first, second, ...rest] = primes;
console.log(first); // 2
console.log(second); // 3
console.log(rest); // [5, 7, 11]

// Spread elements for array literals:
const primesCopy = [first, second, ...rest];
console.log(primesCopy); // [2, 3, 5, 7, 11]

// Shallow-clone an object:
const data = { x: 42, y: 27, label: 'Treasure' };
// The old way:
const clone1 = Object.assign({}, data);
// The new way:
const clone2 = { ...data };
// Either results in:
// { x: 42, y: 27, label: 'Treasure' }

// Merge two objects:
const defaultSettings = { logWarnings: false, logErrors: false };
const userSettings = { logErrors: true };
// The old way:
const settings1 = Object.assign({}, defaultSettings, userSettings);
// The new way:
const settings2 = { ...defaultSettings, ...userSettings };
// Either results in:
// { logWarnings: false, logErrors: true }