Javascript基礎語法學習介紹1(輸出/變數/判斷式/函數/陣列/迴圈)

Javascript基礎語法學習介紹1

基本輸出
JS 五種變數型態
javascript變數特徵
if語句_雙等號與三等號之差異!!!
if語句範圍表達式
switch 多分枝判斷語句
function 有參數傳入 / 無參數傳入之陳述式
function 值之回傳
迴圈(for 、while、break/continue)
Array 常用操作

文字編輯器使用:
Subline Text3
不熟悉可以參考如下文章設置教學分享文
http://coolmandiary.blogspot.tw/2016/02/subline-text-3-part1.html

基本輸出

1 2	//-----------------javascript輸出--------------- console.log('Hello World');

JS 五種變數型態

//-----------------JS 五種變數型態---------------

//String
var name = 'Sam';
console.log(name);

//int
var age = 23;
console.log(age);
//Boolean
var isMale = false;
console.log(isMale);


//undefine
var undefine;


//Null
var nullvar = Null;

javascript變數特徵

var name = 'Sam';
var age = 28;
//字串相加: String+ 數字
console.log(name+age);
//數值計算 數字+數字
console.log(age+age);
//Sam是28歲
console.log(name + ' is ' + age+' years old.');

age = 'twenty-eight';
console.log(name + ' is ' + age+' years old.');

if語句_雙等號與三等號之差異!!!

var isMale = false;

if (isMale){
 console.log('Yes');
}else{
 console.log('No');
}

var isFemale = 'No';
//雙等於判斷兩邊值是否一致
if(isFemale == 'Yes'){
 console.log('She is female.');
}else{
 console.log('He is male.');
}

//雙等於號=>會自動轉換兩邊都為字串再做比對
//數字23 和  字串23--->相等的!!
if(23 =='23'){
 console.log('equal');
}else{
 console.log('Not equal');
}

//三等於號=>直接做比對
//數字23 和  字串23--->不相等的!!
if(23 ==='23'){
 console.log('equal');
}else{
 console.log('Not equal');
}

雙等號 -> 會自動轉換兩側為字串再去做比對
三等號->直接比對，因此資料型態上若不同也會視為不相同!!!

if語句範圍表達式

//if...else if.....else....
var number = 20;
if (number < 20){
 //code section1
}else if(number>30){
 //code section2
}else{
 //code section3
}


//多條件表達式串聯
//AND
if(number > 20 && number < 30){
 //code section
}
//OR
if(number < 18 || number > 65){
 //code section
}
//反相運算
if(!number){

}

switch 多分枝判斷語句

var caseStr = 'case4';

switch(caseStr){
 case 'case1':
  console.log('this is case1');
  break;
 case 'case2':
  console.log('this is case2');
  break;
 case 'case3':
  console.log('this is case3');
  break;
 default:
  console.log('this is other case!');
}

function 有參數傳入 / 無參數傳入之陳述式

//沒有參數的function
function myFunc(){
 console.log('This is no parameter function');
}

myFunc();
myFunc();
myFunc();
myFunc();

//有參數的function
function sum(a,b){
 var c = a+b;
 console.log(c);
}

sum(3,4);
sum(1,2);

function 值之回傳

function returnFunc(a){
 var b = a + 7;
 return b;
}

var result = returnFunc(3);
console.log(result);

迴圈(for 、while)

1.for loop

//---------------for loop----------------

for(var i=1;i<=5;i++){
 console.log(i); //1 2 3 4 5
}
console.log('-----------------------')
for(var i=1;i<10;i+=2){
 console.log(i);//1 3 5 7 9
}
console.log('-----------------------')
for(var i=1;i<=10;i=i*2){
 console.log(i)
}

2.while loop

//-------------while loop---------------
var i=1
while(i<=5){
 console.log(i);
 i++
}

3. break(直接中斷) / continue(跳過不算)

//-------------break / continue---------------
var i=1
while(i<=5){
 if(i===4)
  break;
 console.log(i);//1 2 3
 i++
}
console.log('---------------------------')
for(var i=1;i<=5;i++){
 if(i===3)
  continue;
 console.log(i); //1 2 4 5
}

Array 常用操作

Javascript Array中你可以存放很多數值、字串、物件等等
也可以存空值

Part1. Array 的宣告:
寫法1.直接於宣告陣列的同時賦值
寫法2.陣列物件實體化寫法

Part2. Array的種類共可分為三種:
1.空的陣列
2.同類型(資料型態統一)陣列
3.不同類型(資料型態不統一)陣列

Part3. Array之輸出:
1.全輸出 (直接傳入陣列名)
2.單一特定Element輸出 (使用中括號包覆索引)

Part4. Array常用基礎操作
1.修改特定元素
2.獲取陣列總大小(長度)
3.獲取陣列某一內容之索引
4.Array 元素之插入
5.Array 元素之刪除

Part5. Array之特殊使用:

Part1. Array 的宣告:

寫法1.直接於宣告陣列的同時賦值

//寫法1.直接於宣告陣列的同時賦值
var EmptyArray = [];
console.log(EmptyArray);
var EmptyArrayWithDefaultSize = [];
EmptyArrayWithDefaultSize.length = 3;
console.log(EmptyArrayWithDefaultSize);
var EleArray = ['A','B','C'];
console.log(EleArray);
var EleArray2 = ['Node.js','Angular.js','React.js','Vue.js']
console.log(EleArray2);
var EleArray3 = [1,2,3,4];
console.log(EleArray3);
var EleArray4 = [1,'Apple',2,'Microsoft',3,4,5,'Google','Facebook','Amazon'];
console.log(EleArray4);

寫法2.陣列物件實體化寫法(將陣列視為物件實體)

//寫法2.將陣列視為物件之實體化寫法
var EmptyArray = new Array();
var EmptyArrayWithDefaultSize = new Array(3);
var EleArray = new Array('A','B','C');
var EleArray2 = new Array('node.js','angular.js','React.js','Vue.js');
var EleArray3 = new Array(1,2,3,4);
var EleArray4 = new Array(1,'Apple',2,'Microsoft',3,4,5,'Google','Facebook','Amazon');

====> 寫法1呈現結果會和寫法2一樣喔!!!!

Part2. Array的種類共可分為三種:

Javascript 的 Array的種類共可分為三種:
1.空的陣列
2.同類型(資料型態統一)陣列
3.不同類型(資料型態不統一)陣列

PS:陣列中所存放的元素也可以是陣列!!!甚至是物件(之後再來分另一篇介紹)

1.空的陣列

//空陣列(長度0)
var EmptyArray = [];
console.log(EmptyArray);
//空陣列(長度預設給5)
var EmptyArrayWithDefaultSize = [];
EmptyArrayWithDefaultSize.length = 5;
console.log(EmptyArrayWithDefaultSize);
console.log(EmptyArrayWithDefaultSize[0]);
console.log(EmptyArrayWithDefaultSize[1]);
console.log(EmptyArrayWithDefaultSize[2]);
console.log(EmptyArrayWithDefaultSize[3]);
console.log(EmptyArrayWithDefaultSize[4]);

2.同類型(資料型態統一)陣列

//同類型陣列
var nameArray = ['Amy','Irene','Kevin','Steven'];
var numArray = [1,2,3,4,5];


//全輸出
console.log(nameArray);
console.log(numArray);
//單一特定Element輸出
console.log(nameArray[2]);
console.log(numArray[0]);

3.不同類型(資料型態不統一)陣列

var mixedArray = ['Kevin',27,'teacher'];
console.log(mixedArray);
console.log(mixedArray[0]);
console.log(mixedArray[1]);
console.log(mixedArray[2]);

Part3. Array之輸出:
1.全輸出 (直接傳入陣列名)
2.單一特定Element輸出 (使用中括號包覆索引)

Part4. Array常用基礎操作:

1.修改特定元素

//修改特定元素
var nameArray = ['Amy','Irene','Kevin','Steven'];
console.log(nameArray);
nameArray[0] = 'Iris';
console.log(nameArray);

2.獲取陣列總大小(長度)
例如: 0~3 -> 返回 4

//獲取陣列總大小
var nameArray = ['Amy','Irene','Kevin','Steven'];
console.log(nameArray);
console.log(nameArray.length);

3.獲取陣列某一內容之索引

//獲取陣列某一內容之索引
var nameArray = ['Amy','Irene','Kevin','Steven'];
console.log(nameArray);
console.log(nameArray.indexOf('Kevin'));

4.Array 元素之插入

方法1.添加於最尾端 : push()
方法2.添加於最前端 : unshift()

//添加新元素到Array中
var nameArray = ['Amy','Irene','Kevin','Steven'];
console.log(nameArray);
//添加於最尾端
nameArray.push('Tom');
console.log(nameArray);
//添加於最前端
nameArray.unshift('Chris');
console.log(nameArray);

5.Array 元素之刪除

方法1.刪除最尾端元素 : pop()
方法2.刪除最前端元素 : shift()
方法3.間接透過指派陣列長度去刪減整個陣列元素或者特定範圍 : array.length
方法4.刪除特定元素 : delete (指定特定Index)
->delete過的值會轉為undefine的empty值(位址依舊保留)
方法5. splice(StartIndex,EndIndex) 取特定範圍(從StartIndex到EndIndex)
~~方法6. slice(StartIndex,EndIndex) 取特定範圍(從StartIndex到EndIndex-1)~~
--> 有點像python中列表切片之觀念
(PS:方法5測試會局部範圍刪除 / 方法6則不會!!)

//刪除Array中的元素
var nameArray = ['Amy','Irene','Kevin','Steven','Sam','Karen'];
console.log(nameArray);//'Amy','Irene','Kevin','Steven','Sam','Karen'
//刪除最尾端元素
nameArray.pop();//'Amy','Irene','Kevin','Steven','Sam'
console.log(nameArray);
//刪除最前端元素
nameArray.shift();//Irene','Kevin','Steven','Sam'
console.log(nameArray);
//間接透過指派 陣列長度去刪減整個陣列元素 或者 特定範圍
nameArray.length = 2//只保留從最前面數來總剩餘長度為2 ，留下 Irene','Kevin'
console.log(nameArray);

//全刪除
//間接透過指派空大小
var nameArray = ['Amy','Irene','Kevin','Steven'];
console.log(nameArray);
console.log(nameArray.length);
nameArray.length = 0
console.log(nameArray);

//刪除特定元素-->使用delete 搭配陣列Index
var nameArray = ['Amy','Irene','Kevin','Steven'];
console.log(nameArray);
delete nameArray[2];//'Amy','Irene','Steven'
console.log(nameArray);

//刪除特定元素-->使用 .splice(startIndex,EndIndex) 
var nameArray = ['Amy','Irene','Kevin','Steven','Benson','Jack'];
console.log(nameArray);
//['Amy','Irene','Kevin','Steven','Benson','Jack']
//  [0]    [1]     [2]     [3]      [4]      [5]
nameArray.splice(1,3);
//['Amy','Benson','Jack']
console.log(nameArray);

方法5 以及方法6差異所在
(下面會再獨立介紹!!)
方法6於呼叫 .slice 切片方法後並不影響原先陣列長度

Part5. Array之特殊使用:

陣列.includes(目標查找元素)

var colorArray = ["red","green","blue"]
if(colorArray.includes("blue")){
 console.log("it's in array");
}else{
 console.log("it's not in array");
}

if(colorArray.includes("white")){
 console.log("it's in array");
}else{
 console.log("it's not in array");
}

是指判斷一個元素是否存在於此陣列當中

它只能一次判一個元素不能一次判定多個

var arr = [1,2,3,4];
console.log(arr.includes(2));
console.log(arr.includes(4));
console.log(arr.includes(1,2,3,4));
console.log(arr.includes(1,2));
console.log(arr.includes(3,4));
console.log(arr.includes(1,2,3));
console.log(arr.includes(1,3));
console.log(arr.includes(1,2,4));
console.log(arr.includes(5));
console.log(arr.includes(0));

當我們所面對的陣列長度為不固定或者很長一大串的時候
我們只想找出特定內容值目標去修改
此時我們不太可能大海撈針去一筆一筆修改
以下方來舉例
假設我們今天的任務為

找尋到Boby 將錯誤名字改回為 Bob
這邊你可能肉眼直接算出來位置就在index:5
但如果換作是Kevin要改為某某值的時候呢????
是不是就需要花點時間了???

1
2
3

var tooLongArray = ['Amy','Irene','Kevin','Steven',
'Jack','Boby','Amy','Amy','Benson','Jane','Jerry','Amy','Alice',
'Tom','Eric','Kevin','John','Amy','Simon','Terry','Amy']

此時我們在修改元素值的時候
建議可這麼做
==> 使用indexOf()來定位陣列中的值索引
(好處.節省自己慢慢先排序並確立目標內容索引的時間)

var tooLongArray = ['Amy','Irene','Kevin','Steven',
'Jack','Boby','Amy','Amy','Benson','Jane','Jerry','Amy','Alice',
'Tom','Eric','Kevin','John','Amy','Simon','Terry','Amy']
console.log(tooLongArray)
//找尋到Boby 將錯誤名字改回為 Bob
//使用indexOf()來定位陣列中的值索引
console.log(tooLongArray.indexOf('Boby'))
tooLongArray[tooLongArray.indexOf('Boby')] = 'Bob'
console.log(tooLongArray)

indexOf如果要找尋的目標元素內容是有多個重複的呢???
這時候會以哪個為主??

這裡我拿找尋Amy來嘗試做看看

發現.當陣列中有大量重複值只會取第一次出現的索引位置

新任務: 假設凡是為Amy的都全改為Marry
此時有很多的做法!!!

寫法1.直接迴圈遍歷比對只要value為Amy的進行修改

//寫法1.
for(var i=0;i<tooLongArray.length;i++){
 if(tooLongArray[i] == 'Amy'){
  tooLongArray[i] = 'Marry';
 }
}
console.log(tooLongArray)

寫法2.則是比較複雜但是又很特別的解決方法(不同思考方式)
Step1.
是先嘗試先抓取到 tooLongArray 中元素值為Amy的
我們將這些索引值存放於一個陣列 indexArr
indexArr : 存了 tooLongArray 中出現Amy元素值的所在位置(Index)

Step2.
再去迴圈遍歷進行索引之比對
這邊使用到 .includes() 之方法
可以比對當前索引是否包含在此一陣列中

//如果想全部取出則必須搭配後續會介紹到之迴圈
//進行目標元素內容遍歷匹配的滑移修改
var indexArr = [];
var targetElement = 'Amy';
var indexTmp = tooLongArray.indexOf(targetElement);
while(indexTmp != -1){
 indexArr.push(indexTmp);
 indexTmp = tooLongArray.indexOf(targetElement,indexTmp+1);
}
//先獲得了陣列中 重複多個的元素內容值為 Amy 之 index
console.log(indexArr);//tooLongArray中元素為Amy之索引值(位置)

for(var i=0;i<tooLongArray.length;i++){
 if(indexArr.includes(i)){//如果遍歷之索引 有包含在 剛剛所取出之元素為Amy的索引陣列中
  tooLongArray[i] = 'Mary';
 }
}
console.log(tooLongArray);

陣列.join('分隔內容')

有的時候要做一些分隔處裡就有需要用到

//於陣列元素之間串插固定字串
var nameArray = ['Amy','Irene','Kevin','Steven'];
console.log(nameArray);
console.log(nameArray.join(';'));

陣列.every(函式)

會判斷陣列中的所有元素是否都通過了由指定特定函式所實作的測試

一個生活實例
比方說

一批洗髮精產品當中我們的消保局會去檢測當中是否有磷這種化學物超標之檢測
那這部分可能有更精確的數值量百分比
這邊就當參考

假設超過 35% 就算超標

function IsOverThreshold(value){
 return value < 35;
}

var shampooArray1 = [12,15,24,33,6];
var shampooArray2 = [1,38,26,17,19];

console.log(shampooArray1.every(IsOverThreshold));
console.log(shampooArray2.every(IsOverThreshold));

陣列1.concat(陣列2)

陣列串接

var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));

陣列.filter(函式)
.filter(箭頭函式)

所以主要都式傳入一個 function 只是表達方法不同

這邊先舉一個再前面都學習過的一個例子

.filter(函式)
找出小於5的元素

->找尋出字元長度大於6的單字
如果是用 .filter(函式)
則我們會這麼寫

1
2
3

console.log(words.filter(function(name) {
    return name.length > 6
}));

.filter(箭頭函式)

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

var result = words.filter(word => word.length > 6);

console.log(result);

這裡有一個特殊語法 '=>'
叫做 arrow function expression / 箭頭函式陳述式

其實可觀察出格式意義的規律!!!!
本質不變兩個都是作為一個函式的參數代入

只不過

function 關鍵字改替換成一行用箭頭
串接左(合乎條件的返回成員元素) , 右(條件陳述式)兩邊

上面曾經有先談到在陣列元素刪除的部分
這邊補上一些元素值捕獲作用範圍之差異

.splice(idxStart,idxEnd) v.s
.slice(idxStart,idxEnd)
==>特定範圍元素獲取

.splice(idxStart,idxEnd)
->會回傳元素從 idxStart~idxEnd

.slice(idxStart,idxEnd)
->會回傳元素從 idxStart~idxEnd-1 (不包含最後一個!!!)