# JavaScript 基礎&ES6
###### tags: `javascript`
:::success
:bulb: **小訣竅 :** 左側清單有快速導覽
:::
## 新手小知識
- onload會等網頁下載完成後才會執行，有圖片會等到圖片都下載完才執行。

window.onload = function(){
    //在此網頁全都下載完才執行alert喔
    alert('Hello JS')
}

- 變數型別

//三種基本型別: 數值(Number)、字串(String)、布林(Boolean)
var number = 1;
var string = "我是shawn";
var boolean = true;
// 兩種複合型別: 陣列(Array)、物件(Object)
var array = [];
var object = {};
// 兩種簡單型別: 空值(null)、未定義(undefined)
var Null = null;
var Undefined;
// 特殊型別 : 函式(Function)
var fn = function(){};

- 運算子

// 一般運算子(加減乘除)
var num1 = 1 + 1;
var num2 = 2 - 1;
var num3 = 2 * 2;
var num4 = 10 / 2; 
// 特殊運算子轉型
var test1 = "5" + 1; //51 (字串)
var test2 = "6" - 1; //5 (數字)
var test3 = 1 + "2"; //12 (字串)
var test4 = 5 - "2"; //3 (數字)

## Array
- [衍伸學習-陣列操作處理](/zGyKqxjKQM-06u1cvOh9Ng)

let arr = [];
// #push (【新增】至最後面)
arr.push('shawn');
arr.push('alice');
console.log(arr); // ['shawn','alice']

// #unshift (【新增】至最前面)
arr.unshift('shawn');
arr.unshift('alice');
console.log(arr); // ['alice','shawn']

// #pop(【移除】最後面)
let arr2 = ['shawn','alice','nacy'];
arr2.pop();
console.log(arr2);// ['shawn','alice']

// #shift(【移除】最前面)
let arr3 = ['shawn','alice','nacy'];
arr3.shift();
console.log(arr3);// ['alice','nacy']

// #indexOf 取得位置
let arr4 = ['shawn','alice'];
console.log(arr4.indexOf('alice')); //1
console.log(arr4.indexOf('alex')); //-1

// #splice(【新增資料至指定位置or移除某筆特定資料】)
// array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

// purpose:新增一筆bob至shawn後面
let arr5 = ['shawn','alice'];
//新增一筆至shawn後面(需先找到shawn的位置)
let shawnIndex = arr5.findIndex(data=>data=='shawn');//0
//由於須放置shawn之後,插入位置+1
arr5.splice(shawnIndex+1,0,'bob');
console.log(arr5);// ['shawn','bob','alice'];

// purpose:將bob移除
let arr6 = ['shawn','bob','alice'];
//找到bob位置
let bobIndex = arr6.findIndex(data=>data=='bob');//1
//刪除位置為bob,所以不用變動
arr6.splice(bobIndex,1);
console.log(arr6);// ['shawn','alice'];

## Object

let obj = {
  name:'shawn',
  height:180,
}
// 取得方式
let a = obj.name;
let b = obj['name'];

// 監控Obj變化
Object.defineProperty()

## String

// #String.trim() 去除前後空白
let str1 = ' mike ';
console.log(str1.trim()); //mike

// #String.slice() 切割字串
// slice(起始位置,數目) 數目沒打切到底
let str2 = '[e-mail]'
console.log(str.slice(0,str.indexOf('@'))); //abc
console.log(str.slice(3));//@gmail.com

// #String.toLocaleLowerCase() 大寫轉小寫
// #String.toLocaleUpperCase() 小寫轉大寫
let str3 = 'shawn';
str3.toLocaleUpperCase();// SHAWN
let str4 = 'SHAWN';
str4.toLocaleLowerCase(); //shawn

// #字串反轉
let str5 = 'hello';
console.log(str5.split('').reverse().join(''));// olleh 

// String.replace('取代名稱','取代內容') 字串取代  ps.取代名稱可用正規表達式
let data = '2019-01-01';
console.log(data.replace('/-/g','/'));

// String.indexOf(); 取得字串位置
let email = '[e-mail]'
console.log(email.indexOf('@')); //3

## DOM操作

// html
<a class="btn"></a>
// 獲取對象
let btn = document.querySelector('.btn');

// #操作DOM 屬性
btn.href = "https://google.com";
btn.target = "_black";

// #操作DOM style
btn.style.fontSize = '150px';

// #操作DOM 內容
// 1.innerHTML =>可以把HTML Tag做出來
btn.innerHTML = 'hi這是<a>網址</a>';
// 2.innerText =>會一模一樣顯示文字在上頭
btn.innerText = 'hi這是<a>網址</a>';

// #操作DOM class
// html
<div class="menu"></div>
// 獲取對象
let menu = document.querySelector('.menu');
// 操作
menu.classList.add('open'); //新增
menu.classList.remove('open'); //移除
menu.classList.toggle('open'); //切換
menu.classList.contains('open'); //檢查class存不存在
menu.classList.replace("open","close");//替換
//進階 可以類陣列直接轉陣列 (可使用arr全部方法)
ex. 
const pList = [...document.querySelectorAll('p')];

## 常見的數學函式 Math

Math.random(); // #隨傳 0~1 之間的亂數

Math.round(num); // #回傳四捨五入的數字

Math.floor(num); // #去除小數點，回傳正整數


// 要是想要 0~10 呢?
Math.random() * 10; 

// #小數點陷阱
console.log(0.1 + 0.2); //0.30000000000000004

## OOP 物件導向
- [說明(包含ES6-Class語法糖)](/wxt-QQngQaCrk5YoiGQE_A)
## ES6
### var,let,const
- [變數愛恨情仇](/HnEcdwVRTtC7_KFkud_4Lw)
### 解構賦值
可以使用 「...」 作為剩餘資料的搜集:object,array
也可以使用 「...」 作為將object,array 展開給新的object,array的簡易方法。

//# 陣列解構
let test = ["foo", "bar"];
//old
let foo = test[0];
let bar = test[1];
//new 
let [foo, bar] = test;
console.log(foo, bar); //"foo" "bar"

//#陣列解構-1 陣列太長情況解構，一樣依照位置其餘不影響
let test = ["foo", "bar","haha","nono"];
let [foo, bar] = test;
console.log(foo, bar); //"foo" "bar"

//#陣列解構-2 使用「...」可以把剩餘值接收
let test = ["foo", "bar","haha","nono"];
let [foo, bar, ...rest] = test;
console.log(rest); //["haha","nono"];

//# 物件解構
let test={
  foo:"fooStr",
  bar:"barStr",
  test1:'test111',
  test2:123
}
//old
let foo = test.foo;
let bar = test.bar;
let restObj = Object.assign({},{test1:test.test1,test2:test.test2})
// new
let {foo,bar,...restObj} =test;
console.log(foo,bar,restObj); //fooStr barStr {test1:'test111',test2:123}

//# 物件解構-1 重新命名
let {foo:new_foo,bar:new_bar} = test;
console.log(new_foo,new_bar); //fooStr barStr

//**********************//
//# 陣列賦值
let a = ["a1", "a2"];
let b = ["b1", "b2"];

//# old 合併方式
let c = a.concat(b);
console.log(c); ["a1", "a2","b1", "b2"];

//# 陣列賦值 new合併方式
let c = [...a,...b];
console.log(c); ["a1", "a2","b1", "b2"];

//# 物件賦值
let test = {
  a: "testA",
  b: 123
};
let test_1 = {
  c: "testC",
  d: 456
};

//# 物件賦值 old合併方式
let combin = Object.assign(test,test_1);
console.log(combin); //{a: "testA",b: 123, c: "testC", d: 456}

//# 物件賦值 new合併方式 (也可新增新的key,ex.e)
let newCombin ={...test,...test_1,e:789};
console.log(newCombin); //{a: "testA",b: 123, c: "testC", d: 456,e:789}

### 模板字串

let a = 'hello';
let b = 'world';
//結果一樣 hello javascript in the world

//old
console.log(a+' javascript'+' in the '+b);

//new
console.log(`${a} javascript in the ${b}`);

## 面試題目
- [面試考題](/gRH-ELmoSWidNhLJaC639g)