當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

数据可视化【一】JavaScript学习

發布時間：2023/11/30 javascript 45 豆豆

生活随笔收集整理的這篇文章主要介紹了数据可视化【一】JavaScript学习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

本博客是我學習Curran Kelleher老師數據可視化課程的筆記，感興趣的小伙伴可以點擊這里學習。

three cores of data visualization:

analysis
design
construction

推薦書籍《visualization analysis & design》

使用https://vizhub.com/進行編程學習，這個網站好像是Curran Kelleher自己創建的一個教學網站。

JS知識點

該部分的學習除了上述課程以外，還參照了廖雪峰的JavaScript教程。

JavaScript代碼可以直接嵌在網頁的任何地方，不過通常我們都把JavaScript代碼放到<head>中。由<script>...</script>包含的代碼就是JavaScript代碼，它將直接被瀏覽器執行。或者代碼放在一個單獨的.js文件中，然后在HTML中通過<script src="..."></script>引入這個文件
如果在一個頁面中引入多個文件，并且在<script></script>中間還有js代碼，瀏覽器將將會按照順序依次執行。
JavaScript的設計者希望用null表示一個空的值，而undefined表示值未定義。事實證明，這并沒有什么卵用，區分兩者的意義不大。大多數情況下，我們都應該用null。undefined僅僅在判斷函數參數是否傳遞的情況下有用。
變量名是大小寫英文、數字、$和_的組合，且不能用數字開頭。變量名也不能是JavaScript的關鍵字，如if、while等。申明一個變量用var或let或const語句，盡量使用const
var聲明的變量的作用域是函數。內部函數可以訪問外部函數定義的變量，并且會覆蓋重名的變量。函數在定義的時候會掃描整個函數體的語句，把所有var變量的聲明提升到函數頂部。因此為了防止出現混亂，應該在函數頂部使用var定義。更好的做法是使用let定義變量，這樣的變量有塊級作用域。const和let都有塊級作用域，但是const無法改變
如果一個變量沒有通過var申明就被使用，那么該變量就自動被申明為全局變量。在strict模式下這種聲明方法是不允許的。啟用strict模式的方法是在代碼的第一行寫上'use strict';
在``包圍的字符串中可以使用$加變量名來獲得變量的值并轉換成字符串，并且可以得到多行字符串。字符串是不可變的，如果對字符串的某個索引賦值，不會有任何錯誤，但是，也沒有任何效果：
可以通過()=>{}的方式聲明函數，不需要關鍵字function
數組的長度保存在length屬性中。如果修改length的值改變數組的大小。如果通過索引賦值，索引超過了范圍，同樣會引起數組大小的變化。
數組可以通過數組的forEach方法遍歷數組

array.forEach(item => {//對item的操作 });

這種方法的好處是可以可以把里面的函數變成其他的，靈活的進行遍歷

數組使用map方法可以得到另一個數組，每個數組的值是函數處理過的值

let func = item => {//對item的操作 }; let tmp = array.map(item);

數組可使用filter方法過濾元素，需要傳入的函數返回布爾值

let tmp = array.filter(item => {})

數組的sort()方法默認將數字轉化為字符串，返回仍然是當前字符串。可以通過傳入一個函數，分別返回-1，0，1來確定排序順序。
數組使用join方法可以將數組元素看成字符串拼接起來
使用解構賦值可以使得代碼更加簡潔。如果是數組的話使用[]，如果是對象的話使用{}

JSON.stringify(array, null, 2); 將數組轉化為字符串，第二個參數一般用不上，第三個參數是添加換行的，否則擠在一起
JSON.parse(str)可以將上面的字符串再轉換成數組
對象最后一個鍵值對不要加逗號，否則有的瀏覽器會報錯
訪問屬性是通過.操作符完成的，但這要求屬性名必須是一個有效的變量名。如果屬性名包含特殊字符，就必須用''括起來
檢測對象是否擁有某一屬性可以用in操作符。有可能這個屬性是繼承得到的。為了判斷一個對象是否是對象本身擁有的，可以用hasOwmProperty()方法。

var a = ['A', 'B', 'C']; for (let i in a){console.log(i); //'0' '1' '2'console.log(a[i]); //'A' 'B' 'C' } var xiaohong = {name: '小紅','middle-school': 'No.1 Middle School' };

例如上面的屬性名middle-school就不是一個有效的變量名，只能用xiaohong['middle-school']的方法進行訪問。

for ... in ...可以把一個對象的所有屬性名依次循環出來，可以用hasOwnProperty()過濾對象繼承的屬性，數組也是對象，不過屬性名為數組的下標。需要注意的是得到的是屬性名類型為String類型
JavaScript中對象的鍵值是字符串類型的。如果想要讓鍵值為其他類型的，可以使用Map。可以用二維數組對Map進行初始化，常用的方法有set get has delete等

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); m.get('Michael'); // 95m = new Map(); // 空Map m.set('Adam', 67); // 添加新的key-value m.set('Bob', 59); m.has('Adam'); // 是否存在key 'Adam': true m.get('Adam'); // 67 m.delete('Adam'); // 刪除key 'Adam' m.get('Adam'); // undefinedm = new Map(); m.set('Adam', 67); m.set('Adam', 88); m.get('Adam'); // 88

Set和Map相似，但是不存儲value。

為了解決Map和Set不能使用下標訪問的問題，我們可以使用for ... of ...循環來遍歷，只循環集合本身的元素，后添加的元素不會循環
同樣的我們可以使用forEach方法進行循環。不過需要注意使用方法
第三個參數是調用者本身

函數如果沒有return語句，函數執行完畢后也會返回結果，只是結果為undefined。
函數有多種定義方法

function abs(x) {if (x >= 0) {return x;} else {return -x;} }var abs = function (x) {if (x >= 0) {return x;} else {return -x;} };//不要忘記分號var abs = x => x>0 ? x : -x;

由于JavaScript允許傳入任意個參數而不影響調用，因此傳入的參數比定義的參數多也沒有問題，雖然函數內部并不需要這些參數。為了避免參數不存在，可以使用typeof運算符對參數進行檢查。

function abs(x) {if (typeof x !== 'number') {throw 'Not a number';}if (x >= 0) {return x;} else {return -x;} }

特殊參數使用：arguments是調用者傳入的所有參數的數組。...rest參數可以獲得所有額外的參數。如果傳入的參數連正常定義的參數都沒有填滿rest參數會接受一個空數組（不是undefined）。
需要注意return后面不要隨意換行，JS會自動加分號，可能導致錯誤。
方法的this指針始終指向調用者，如果直接調用函數一般this指向window。在strict模式下，直接調用函數的this指針指向undefined。只有對象直接調用函數的this指針是有效的，內層嵌套的函數的this指針是無效的，解決方法是一個臨時變量將this保存起來。
對于上面的問題，還可以使用apply和call方法解決。apply還能動態改變函數的行為
返回閉包時牢記的一點就是：返回函數不要引用任何循環變量，或者后續會發生變化的變量。如果一定要引用循環變量怎么辦？方法是再創建一個函數，用該函數的參數綁定循環變量當前的值，無論該循環變量后續如何更改，已綁定到函數參數的值不變。

在沒有class機制，只有函數的語言里，借助閉包，同樣可以封裝一個私有變量。我們用JavaScript創建一個計數器

'use strict';function create_counter(initial) {var x = initial || 0; //initial如果沒有定義為假return {inc: function () {x += 1;return x;}} }var c1 = create_counter(); c1.inc(); // 1 c1.inc(); // 2 c1.inc(); // 3var c2 = create_counter(10); c2.inc(); // 11 c2.inc(); // 12 c2.inc(); // 13

閉包還可以把多參數的函數變成單參數的函數。例如，要計算xy可以用Math.pow(x, y)函數，不過考慮到經常計算x2或x3，我們可以利用閉包創建新的函數pow2和pow3：

'use strict';function make_pow(n) {return function (x) {return Math.pow(x, n);} } // 創建兩個新函數: var pow2 = make_pow(2); var pow3 = make_pow(3);console.log(pow2(5)); // 25 console.log(pow3(7)); // 343

如果使用箭頭函數要返回一個對象，而且對象只有一個鍵值對的時候要把對象用括號括起來
箭頭函數和匿名函數的區別：箭頭函數內部的this總是指向詞法作用域，也就是外層調用者。由于已經綁定，所以無法使用call或者apply()對this進行綁定，傳入的第一個參數被忽略。
setTimeOut(()=>{} , x)可以用來睡眠一樣的操作，前面傳入的是一個函數，后面是睡眠的秒數，單位是毫秒，睡眠xms后運行前面的函數

模仿視頻在vizhub上的實現的代碼：https://vizhub.com/Edward-Elric233/97bd1319ee774022babd69cd4cca220e

不過需要注意一點的是在這個網頁上的import文件需要在文件名前面加上./，Curran老師在Youtube上說明了自己不用加也可以成功運行的原因是Bug。

總結

以上是生活随笔為你收集整理的数据可视化【一】JavaScript学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

javascript

数据可视化【一】JavaScript学习

JS知識點

總結