---
# System prepended metadata

title: Basic
tags: [Javascript]

---

# Basic
###### tags: `Javascript`
---
**取值**

    <script type ="type/javascript">
		var a = 'name';
		var obj = {name : 'aaaa' } 
		obj.name; // 取值 => aaaa
		obj[a]; // 取值 => aaaa

		let name = 't';
		let age = 10 ;
		let obj = {name,age} //若為同名則可省略key

	</script>
    
---
**展開運算符**

        let arr1 = [1,2,3,4,5]
        let arr2 = [5,6,3,2,5]
		
        展開陣列
        console.log(...arr1)
		
        可用於拼接陣列
        [...arr1,...arr2]
		
        可用於不定參數
        function sum ( ...number){
        }

        let obj = {name ="t",age=10};
        console.log(...obj);//無法展開物件
        let obj2 = {...obj};//但可以深度複製物件
        let obj3 = {...obj,name:'y'};//複製物件時同時更改屬性值(merge)

        題外 使用reduce可以加總整個陣列
        arr.reduce((preValue,currentValue)=>{
        	return preValue + currentValue
        })
    
---
**解構運算式**

	<script type="text/javascript">
		let arr1 = [1,2,3,4,5]
		let arr2 = [5,6,3,2,5]
	
	const arr [a,b,c,...c] = arr;//解構陣列 可搭配展開運算
	
	let obj = { name : 'tom' , age : 10}
	const {name2,age2} = obj;//解構物件
	</script>

---
**類中方法的this**


	<script type="text/javascript">
	.....
	class Person {
		constructor(name,age){
			this.name = name;
			this.age = age;
			this.speak2= this.speak2.bind(this)
		}
		speak(){
			console.log(this)
		}

		speak2}
		speak(){
			console.log(this)
		}
		
		say = ()=>{
		
		}
	}

	constant  p1 = new Person();
	p1.speak(); //=>透過實例對象調用，裡面的this指向實例
	p1.speak2();//=>透過bind將物件實例與方法綁定
	
	constant speak = p1.speak;//將函數指向變數
	speak();//直接呼叫原型物件上的函數參考，因此console.log(this)是undefined

	</script>

透過bind方法可將this與方法做綁定
bind : 回傳一個新的函數並且將這個函數內的this綁定為傳入的this


say也是person的方法但是他是個arrow function 
注意的點是他沒有內部的this而在內部寫this的話要往外找

ps 在類別中所有方法會自動開啟局部嚴格模式

---
**Array**
常用陣列方法
- map
- filter
- find : 找第一個
- findIndex : 找第一個index
- every : 驗證所有結果，全部過才過
- some : 驗證所有結果，一個過就過
- reduce : 接收前一個回傳值並往後丟，常用於累加
---
**Class**
**1. 建立類別**

	<script type="text/javascript">
	.....
	class Person {
		constructor(name,age){//構造器方法、建構子
			//this代表實例對象
			this.name = name;
			this.age = age;
		}
		
		//一般方法
		//存放在類的原型物件 prototype 給實例使用
		//通過Person實例調用speak時，speak中的this就是Person實例
		//若p.speak().call({}) =>此方式會更改實例對象因此this所代表的不是p的實例
		speak(){
			console.log(this.name + ','+this.age)
		}
	}

	constant  p1 = new Person();
	p1.speak();
	.....
	</script>

**2.繼承類別**

	<script type="text/javascript">
	.....
	class Person {
		constructor(name,age){
			this.name = name;
			this.age = age;
		}
		
		speak(){
			console.log(this.name + ','+this.age)
		}
	}

	class Student extends Person{
		//繼承一個類別後又定義了建構子則必定要在此建構子內呼叫父類的建構子,並且要在其他程式碼之前執行
		constructor(name,age,grade){
			super(name,age);
			this.grade = grade;
		}
		//同java可重寫
		speak(){
			...
		}
		
	}

	constant  s1 = new Student('john',19);
	//原型鏈
	//當s1呼叫時則會先找Student的原型物件內是否有speak方法
	//沒有則往上找Person的原型物件以此類推直到找到
	s1.speak();
	.....
	</script>

類中可以直接寫賦值語句

	class car {
		wheel  = 4  給car類初始化一個屬性 wheel 為 4
	}

而這個方式是給類別的實例加上屬性
如果要在原型物件上加屬性的話則要加上static

	class car {
		static wheel  = 4  給car類初始化一個屬性 wheel 為 4
	}