
作品網址:
主題目標
- 隨著卷軸移動到中央,讓圖片動態顯示。
需求思考分析
- 獲取頁面中的所有圖片元素
- 滾動事件監聽
- 尺寸獲取及處理
- 滾動至指定區域的條件判斷
處理步驟
步驟 1. 比較普通變數
字串、整數或布林變數的參照,只要宣告一變數複製,兩者即為不同;這幾個類型類似實值型別的參照
let age = 100; let age2 = age; console.log(age, age2); // 100,100 age = 200; console.log(age, age2); // 200,100 let name = "Wes"; let name2 = name; console.log(name, name2); // Wes,Wes name = "wesley"; console.log(name, name2); // wesley,Wes
步驟 2. 比較陣列
陣列物件的複製就類似參照型別了,所以可以透過一些函式回傳新的陣列,有以下幾種方式
步驟 3. 比較物件
物件的複製也是類似參照型別,所以跟陣列類似,有以下幾個方式處理:
但是物件裡面尚有巢狀物件的情形需要考慮,陣列其實也是有巢狀的情形,所以可以利用 JSON 來處理
const wes = { name: "Wes", age: 100, social: { twitter: "@wesbos", facebook: "wesbos.developer" } }; const dev2 = JSON.parse(JSON.stringify(wes)); dev2.social.twitter = "@coolman"; console.log(dev2.social, wes.social);
特別技術、函式
<HTML>
<CSS>
<JavaScript>
Spread syntax
展開語法(Spread syntax), 可以在函數調用/數組構造時,將數組表達式或者string在語法層面展開;還可以在構造字面量對象時,將對象表達式按key-value的方式展開。( 譯者註 :字面量一般指[1, 2, 3] 或者{name: “mdn”} 這種簡潔的構造方式)
ES 6 出現的快速語法,針對 function 、 array 、 object ,皆可以使用,用來結合物件或陣列等。
function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; console.log(sum(...numbers)); // expected output: 6 console.log(sum.apply(null, numbers)); // expected output: 6
Array.prototype.concat()
concat()
方法被用來合併兩個或多個陣列。此方法不會改變現有的陣列,回傳一個包含呼叫者陣列本身的值,作為代替的是回傳一個新陣列。
const array1 = ['a', 'b', 'c']; const array2 = ['d', 'e', 'f']; const array3 = array1.concat(array2); console.log(array3); // expected output: Array ["a", "b", "c", "d", "e", "f"]
Object.assign()
Object.assign()被用來複製一個或多個物件自身所有可數的屬性到另一個目標物件。回傳的值為該目標物件。
Object.assign(target, ...sources) var obj = { a: 1 }; var copy = Object.assign({}, obj); console.log(copy); // { a: 1 }
Array.prototype.slice()
slice() 方法返回一個新的數組對象,這一對像是一個由 begin和end決定的原數組的淺拷貝(包括begin,不包括end)。原始數組不會被改變。
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // expected output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4)); // expected output: Array ["camel", "duck"] console.log(animals.slice(1, 5)); // expected output: Array ["bison", "camel", "duck", "elephant"]
JSON.stringify()
JSON.stringify() 方法將一個JavaScript 值(對像或者數組)轉換為一個JSON 字符串,如果指定了replacer 是一個函數,則可以選擇性地替換值,或者如果指定了replacer 是一個數組,則可選擇性地僅包含數組指定的屬性。
JSON.parse()
JSON.parse() 方法把會把一個JSON字串轉換成 JavaScript的數值或是物件。另外也可選擇使用reviver函數讓這些數值或是物件在被回傳之前做轉換。
const json = '{"result":true, "count":42}'; const obj = JSON.parse(json); console.log(obj.count); // expected output: 42 console.log(obj.result); // expected output: true
參考資料:
JS30紀錄 14-JavaScript References vs Copying: https://shunnien.github.io/2018/01/03/Javascript30days-14/
Js 30 day 中文指南:https://github.com/soyaine/JavaScript30