Charles Ren's Tech Blog
以下主要記錄一些個人認為比較重要的點，而不是全部詳細的JS內容，由於看的是英文版的教程詳情參考w3school，以及codemosh的視訊教程，這個是付費的。
javascript可以執行在瀏覽器,在瀏覽器外執行在Node環境上。
Js basic
JS中ES6之後就建議使用let和const而減少var的使用
const 在建立的時候必須賦值
JS中沒有賦值的變數預設賦值為undefined
JS資料型別
五種基本資料型別： string number boolean null undefined
三種物件型別：Object大括號 Function Array中括號
基本資料型別是值傳遞，物件型別是引用傳遞。
例子如下：
let number = 10;
function increase(num){
num++;
}
increase(number);
console.log(number);
let obj = { value: 10};
function increaseO(ob){
ob.value++;
}
increaseO(obj);
console.log(obj);
//第一個輸出為10，第二個輸出為11
JS資料型別是動態的，也就是變數型別可以變化，而java是靜態型別語言，如下：
var x; // Now x is undefined x = 5; // Now x is a Number x = "John"; // Now x is a String
JS中可以在裡面利用引號，但是需要和外層引號不同才有效
var answer = "It's alright"; // Single quote inside double quotes
var answer = "He is called 'Johnny'"; // Single quotes inside double quotes
var answer = 'He is called "Johnny"'; // Double quotes inside single quotes
typeof 作為檢視變數型別
typeof "John" // Returns "string" typeof 3.14 // Returns "number" typeof true // Returns "boolean" typeof x // Returns "undefined" (if x has no value) typeof {name:'John', age:34} // Returns "object" typeof [1,2,3,4] // Returns "object" (not "array", array is an object) typeof null // Returns "object" typeof function myFunc(){} // Returns "function"
undefined 和null 和“ ” 的區別
undefined 的型別是 undefined
null型別是 object
“ “ 型別是string
JS操作符
== 和 === 的區別
=== 表示恆等，需要型別和值都value and type相等；== 表示相等即僅僅比較兩邊變數的數值是否相等。
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
falsy為以下幾個:
undefined, null, 0, false, ’ ', NAN 不是falsy 的都是truthy
|| 操作符是根據falsy來判斷的，返回第一個truthy的值
個人感覺應該先了解一下JS DOM
JS HTML DOM
HTML DOM是HTML執行的一個標準，也就是HTML DOM遵循此標準來進行操作HTML元素。
JS的位置
在HTML中JS程式碼都放在 tags標籤中
<script src="https://www.w3schools.com/js/myScript1.js"></script> 引用URL連線作為script
<script src="/js/myScript1.js"></script> 指定一個資料夾作為引用
<script src="myScript1.js"></script> 引用當前頁面相同路徑下的scrpit檔案
JS輸出
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
1. getElementById用來獲取html中的元件，innerHTML決定元件內容
這種方式很常見
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
2.測試方便運用document.write(), 只用來測試使用
<script>
document.write(5+6);
</script>
3. window.alert(); 展示一個提示框
<script>
window.alert(5+6);
</script>
4.除錯需求用 console.log()
<script>
consloe.log(5+6);
</script>
</body>
</html>
JS的statement
以下的每一行叫做statement，JS用分號來分開JS statement，計算機來執行statement，在js中執行者是瀏覽器。
var a, b, c; // Declare 3 variables 宣告三個變數
a = 5; // Assign the value 5 to a 給每個變數賦值
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c
每一行程式碼長度最好不要超過80個字元，如果超過了儘量在操作符如“=”後面換行。
JS的關鍵字中跟JAVA基本一致，但是變數為var
JS語法
JS語法中有兩種值：固定值和變數
固定值 literals
Numbers 包括整數和小數，不作區分
Strings 包括"John" 和 ‘John’ 單雙引號不做區分
變數 variables
變數用來儲存資料
JS用var宣告變數用 =來給變數賦值
JS中變數命名習慣和JAVA中一樣駝峰命名法
變數沒有賦值的時候會被自動賦值為undefined
可以連續給變數賦值
var person = "John Doe", carName = "Volvo", price = 200;
//當變數被重新宣告的時候他還是擁有之前的值。但重新賦值就會擁有新的值
var carName = "Volvo";
var carName;
var x = 2 + 3 + 5 + '3' + 5 //變數中有一個是string 則這個string後面的數字會被看成string ,前面的還是數字運算，這個輸出為1035
JS function
js中方法是物件
沒有返回型別
JS中定義函式有兩種方式
//第一種：函式宣告
function name(parameter1, parameter2, parameter3) {
code to be executed
}
//第二種：函式表示式
下面是一個匿名方法，在宣告方法的時候直接將方法的物件給一個變數
let run = function(a ,b){
console.log(a-b);
};
let move = run;//可以把這個引用賦值給move
run(5,3);//呼叫run方法，這裡run不是方法名，但是需要用這種方式來呼叫方法
move(5,3);
function sum(a, b){
return a+b;
}
sum(1,2,3,4,5) //這個在js中是可以的，方法只接收前面的引數
js hoisting 就是將java的宣告會放到最頂端，即使你在後面才宣告。
this指標，在物件和類中指向物件，在方法或匿名回撥方法中指向window
JS事件
在HTML標籤中通過事件直接執行 JavaScript的程式碼
The time is?
NaN 表示不是一個合法的數字，當用string型別來進行運算時會出現，但當string 型別
var x = 100 / "Apple"; // x will be NaN (Not a Number)
var x = 100 / "10"; // x will be 10
JS中物件和陣列的區別
陣列用中括號建立，物件用大括號建立
物件用名字做索引，陣列用數字做索引
javaScript get 語法
var person = {
firstName: "John",
lastName : "Doe",
getName : function(){
return this.firstName;
},
get fullName() {
return this.firstName + " " + this.lastName;
}
};
person.getName();//用這個來呼叫方法
person.fullName;//直接用這個來呼叫屬性的方式來呼叫get方法，第二種方式更簡潔
parameters是形參， arguments 是實參
這裡的arguments是一個關鍵字，表示傳入的實引數組
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i;
var max = -Infinity;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
儘量不要宣告全域性方法，因為他屬於window物件。
JS邏輯
switch case邏輯有些過時，程式碼較為混亂，建議使用if else
迴圈
for while do…while for…in for…of
//用for..in 來遍歷物件的屬性
const person = {
name : 'bin',
age : 30
}
for(let key in person)
console.log(key + " : " + person[key]);//輸出和物件一樣
//用for..of來遍歷陣列
const colors = ['red','green','blue'];
for (let color of colors)
console.log(color);
JS array
let selectedC = ['red', 'blue'];
selectedC[2] = 1; //可以動態給變數賦值，新增加一個值
console.log(selectedC); //可以直接列印所有變數
const numbers = [3, 4];
numbers.push(5,6);//末尾新增
numbers.unshift(1,2);//前端新增
numbers.splice(2 , 0 ,'a');
const index = numbers.indexOf('a');//查詢為a的標記
const includes = numbers.includes('a');//看是否包含a
//查詢一個物件陣列中的物件
const courses = [
{id : 1 , name : 'a'},
{id : 2 , name : 'b'}
];
const course = courses.find(d => d.name === 'a');//d是courses中的單個物件引用
console.log(course);
//合併陣列
const first = [1,2,3];
const second = [4,5,6];
const combined = [...first, ...second , 'a'];
console.log(combined);
//遍歷陣列
//第一種方式
for(let number of first){
console.log(number);
}
//第二種方式
first.forEach((number , index) => console.log(index, number));
//過濾陣列
const numbers2 = [1,-2,54,5];
const filtered = numbers2.filter(n => n >0);
console.log(filtered);
//join方法：把陣列中的元素放到一個字串
const arr = ['g','d','de'];
console.log(arr.join('-'));//輸出g-d-de
JS物件
最好的方法是沒有引數的方法。
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}};
鍵值對，物件中前面的是property
通過兩種方式來使用物件中的property
person.lastName;
person[“lastName”];
JS中沒有類只有物件，所以用建立函式的方式來建立類
建立類的兩種方式：兩種方式都可以建立類，只是看傾向於哪一種，java程式設計師更傾向於第二種，跟java中類很相似。
//1.factory function naming:camel name 返回值是一個物件
function creatCircle(radius){
return {
radius,
draw(){
console.log('draw');
}
};
}
const myCircle = creatCircle(1);//建立物件
const myCircle2 = createCircle(2);
//2.construct function naming: pascle name 有this 標誌 ，注意這裡是方法，所以用分號
function Circle(radius){
this.radius = radius;
this.draw = function(){
console.log('draw');
}
}
//建立的物件
const circle = new Circle(1);
//克隆物件
const another = {... circle };
利用const建立物件，不能再重新賦值這個物件，但是可以修改物件裡的屬性，新增和刪除。刪除物件中的屬性，可以用 delete obj.property
function Circle(radius) {
this.radius = radius;
this.draw = function () {
console.log('draw');
}
}
const circle = new Circle(10);
//遍歷物件屬性
for (let key in circle){
if(typeof circle[key] !== 'function')//只顯示非函式的屬性
console.log(key,circle[key]);
}
//第二種方法
const keys = Object.keys(circle);
console.log(keys);
//檢視是否包含某個key
if('radius' in circle)
console.log('Circle has a radius');
JS的繼承
js中prototype 就是parent,這個物件我們叫做objectBase,他是所有物件的父物件
JS Dates物件
var d = new Date();//建立物件返回當前時間
var d = new Date(2018, 11, 24, 10, 33, 30, 0);//建立物件指定年月日時分秒毫秒
var d = new Date("October 13 2014 11:13:00");
var d = new Date("2015-03-25T11:00:05Z");//指定標準ISO時間格式,用T或者空格隔開,這個是客戶端和伺服器用的通用的時間
建立中月份從0 開始算，0是一月
JS時間輸出格式為下面
Sat Oct 13 2018 12:11:20 GMT+0100 (British Summer Time)
獲取時間的一些方法 getFullYear(), 獲取年
getDate()獲取當天日期
getDay()獲取當天星期
ES6 classes
簡單一句話，es6更傾向使整個模組靜態化，也就是新增加的一些新功能個人感覺讓js更傾向於java的語法。
es6預設使用 use strict。
建立類:非常類似於java語法
class Circle{
constructor(radius){
this.radius = radius;
}
draw(){
console.log('draw');
}
//靜態方法，類直接呼叫
static pop(){
}
}
const c = new Circle('2');
c.draw();
ES6 中直接在想要export的地方加關鍵字export，而用import來匯入modules
ES6中bable工具把ES6程式碼轉化成所有瀏覽器可以執行的es5 JS語言，相當於一個轉化器和編譯器
而Bundle是用來把所有的js檔案合併成一個Js檔案的工具，現在最流行的是webpack。
npm是一個安裝所有第三方工具和庫的軟體工具
package.js下的script 可以用npm run script中的關鍵字來實現script的內容