1.陣列 (物件型別)
//[]陣列
//只有值，可包任何型別
//取值用索引，順序很重要因為要知道第幾個才能取
const colors = ["yellow", "red", "blue"];
const any = [123, true, "Tom"];//可混合
//length 長度
console.log(`colors陣列共用${colors.length}筆`);
//讀取陣列，陣列從從0開始算
let myColor = colors[2];
console.log(myColor); // "blue"
myColor = colors[3]; //陣列從0開始
console.log(myColor); // undefined
//陣列資料應用
let colors = [];
colors[0] = "blue";
colors[1] = "yellow";
colors[3] = "red";
console.log(colors);//["blue","yellow", null,"red"]
console.log(`colors陣列共用${colors.length}筆`); //colors陣列共用4筆
//unshift 加入第一筆
colors.unshift("green");
console.log(colors);//["geeen","blue","yellow",null,"red"];
//push 加入最後一筆
colors.push("black");
console.log(colors);//["geeen","blue","yellow",null,"red","black"];
//pop 刪除第一筆
colors.shift();
console.log(colors);//["blue","yellow",null,"red","black"];
//pop 刪除最後一筆
colors.pop();
console.log(colors);//["blue","yellow",null,"red"];
//splice 刪除指定資料
//splice(1 , 2) splice(起始位置(陣列從0開始) , 2(往後刪除幾筆))
colors.splice(1, 2);
console.log(colors);//["blue","red"];
//splice 插入指定資料 第二參數為0
colors.splice(1, 0, "gold");
console.log(colors);//["blue","gold","red"];
//splice 修改指定資料 第二參數為1
colors.splice(1, 1, "white");
console.log(colors);//["blue","white","red"];
const data = [1, 3, 9, 5, 7, 9];
//map() 方法會建立一個新的陣列(不影響原始資料)
const arr1 = data.map(x => x * x);
console.log(arr1);//[1,9,81,25,49,81]
//forEach() 不會回傳值
data.forEach(function(item,index,array){
//item 目前資料
//index 目前索引
//array 目前所有陣列
console.log(item,index,array);
});
const arr2 = [];
data.forEach(x => { arr2.push(x * x); });
console.log(arr2);//[1,9,81,25,49,81]
//filter() 篩選出符合條件回傳新的陣列(不影響原始資料)，查無空陣列
const arr3 = data.filter(x => x >= 5);
console.log(arr3);//[9,5,7,9]
//find() 由前往後符合的第一筆，查無undefined
const obj4 = data.find(x => x >= 5);
console.log(obj4);//9
//indexOf 由前往後符合的第一筆，-1查無
const i5 = data.indexOf(9);
console.log(i5);//2 [1 3 9這筆, 5, 7, 9]
//lastIndexO 由後往前符合的第一筆，-1查無
const i6 = data.lastIndexOf(9);
console.log(i6);//5 [1, 3, 9, 5, 7, 9這筆]
//reduce() 方法將一個累加器及陣列中每項元素（由左至右），將陣列化為單一值。
const i7 = data.reduce((a, b) => {
//console.log(a,b);//a 累加後的值 b目前進來運算的值
return a + b;
}, 0); //'0' 是累加器的初始值
console.log(i7);//34
console.log ( data.reduce((a, b) => a + b, 0));//簡寫
//sort() 排序
//reverse() 反排序
//join() 變字串
//some() 一個值符合條件回傳true
//every() 陣列完全符合條件true
//slice() 淺拷貝至新物件
//concat() 合併
2.物件 (物件型別)
//物件{}
//屬性:值
//取值用屬性，順序不重要只要知道屬性就能取值
const family = {
myFather: "David",//屬性 : 值
myMonther: "Mary",//屬性 : 值
dogs: 3
};
console.log(family.myFather); //讀取物件中屬性
//物件資料應用
let home = {};
//新增、修改
//點記法 (Dot notation)
home.myMonther = "May";
home.myFahter = "Kevin";
home.cats = 4;
console.log(home); //{"myMonther": "May","myFahter": "Kevin", "cats": 4}
home.cats += 1;
home.myMonther = "Tom";
console.log(home); //{"myMonther": "Tom","myFahter": "Kevin", "cats": 5}
//刪除
delete home.cats;
console.log(home); //{"myMonther": "Tom","myFahter": "Kevin"}
console.log(home.cats); //undefined
//讀取方式
//括弧記法 (Bracket notation)，屬性特殊字元時必須使用
let f = "001";//特殊開頭為數字時
home[f] = "1234"
console.log(home[f]);//"Kevin"
3. ... Spread Operator Rest Operator
<script>
// ...用法
//展開運算符 Spread Operator
//1.淺拷貝及合併
const arr1 = [1, 2, 3];
const arr2 = [...arr1];
arr2.push(4);
console.log(arr1, arr2);//[1, 2, 3] , [1, 2, 3, 4]
const arr3 = ["Good", "Morning"];
const arr4 = [...arr3, "Teacher"];
console.log(arr4); //['Good', 'Morning', 'Teacher']
//2.直接傳入函式中，
function sum(a, b) {
return a + b;
}
const arr5 = [1, 2, 3];//函式如果只有兩個參數傳入第三個時會忽略
console.log(sum(...arr5)); // 3
//3.可迭代(iterable)物件轉陣列，String、Array、TypedArray、Map、Set物件
const str1 = "Today in Monday";
const arr6 = [...str1];
console.log(arr6);//[ "T","o","d","a","y"," ", "i", "n", " ", "M", "o", "n", "d", "a", "y"]
//其餘運算符 Rest Operator
function sumAll(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
console.log(sumAll(1, 2, 3, 4)); // 10
console.log(sumAll(5, 10, 15)); // 30
</script>
4.JSON(Javascript Object Notaion)(JS物件表示法)
1.屬性都是字串 "data" : [] ;
2.沒辦法放函式
3.不能註解
4.最後一個值後面不能加入逗號
5.目前前後端常用資料傳遞格式
5.補充
陣列第幾筆用[]中間數字
物件找值用.屬性
6.chrome擴充套件
JSONView
參考資料
六角學院直播課
Day 09: ES6篇: Spread Operator & Rest Operator(展開與其餘運算符)
