JavaScript筆記

字符串的操作：

多行字符

```
`這是一個
多行
字符串`;
```

注意：反引號在鍵盤的ESC下方，數字鍵1的左邊：

┌─────┐ ┌─────┬─────┬─────┬─────┐
│ ESC │ │ F1  │ F2  │ F3  │ F4  │
│     │ │     │     │     │     │
└─────┘ └─────┴─────┴─────┴─────┘
┌─────┬─────┬─────┬─────┬─────┐
│  ~  │  !  │  @  │  #  │  $  │
│  `  │  1  │  2  │  3  │  4  │
├─────┴──┬──┴──┬──┴──┬──┴──┬──┘
│        │     │     │     │
│  tab   │  Q  │  W  │  E  │
├────────┴──┬──┴──┬──┴──┬──┘
│           │     │     │
│ caps lock │  A  │  S  │
└───────────┴─────┴─────┘

字符串的操作

toUpperCase , toLowerCase , indexOf , substring

var s = 'Hello js';

s[0];	//'H'
s[4];	//'o'
s[21];	//undefined 超出範圍的索引不會報錯，但一律返回undefined

s.toUpperCase();	//'HELLO JS'
s.toLowerCase();	//'hello js'
s.indexOf('js');	//6
s.indexOf('JS');	//沒有找到指定子串，返回-1

s.substring(0,5);	//'Hello',從索引0開始到5（不包括5）
s.substring(6);		//'js',從6開始到結束

數組

indexOf , slice , put&pop , unshift&shift , sort , reverse , splice , concat , join

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];

arr.indexOf('Microsoft');	//0
arr.indexOf('Baidu');		//-1，元素未找到

arr.slice(0,3);				//['Microsoft', 'Apple', 'Yahoo']
arr.slice(3);				//['AOL', 'Excite', 'Oracle']

//push()向末尾添加若干元素，pop()是將最後的元素返回並刪除。注：空數組繼續pop不會報錯，而是返回undefined
arr.push('a','b');		//['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle','a','b']
arr.pop();				//'b'
arr.pop();				//'a'

//unshift()向頭部添加若干元素，shift()將第一個元素返回並刪除
arr.unshift('a','b');	//['a','b','Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle']
arr.shift();			//'a'
arr.shift();			//'b'

arr.sort();				
arr;					//['AOL','Apple','Excite','Microsoft','Oracle','Yahoo']

arr.reverse();			
arr;					//['Yahoo','Oracle','Microsoft','Excite','Apple','AOL']

arr.splice(2,3,'Google','Facebook');	//返回刪除元素['Microsoft','Excite','Apple']
arr;					//['Yahoo','Oracle','Google','Facebook','AOL']
arr.splice(2,2);		//返回刪除元素['Google','Facebook']，只刪除不添加
arr;					//['Yahoo','Oracle','AOL']
arr.splice(2,0,'Google','Facebook');	//返回[]，只添加不刪除		
arr;					//['Yahoo','Oracle','Google','Facebook','AOL']

var added = arr.concat(['Amazon','Alibaba']);
added;		//['Yahoo','Oracle','Google','Facebook','AOL','Amazon','Alibaba']

arr.join('-');		//'Yahoo-Oracle-Google-Facebook-AOL-Amazon-Alibaba'

函數

函數也是變量，可以傳遞
參數傳遞時可以和函數定義不匹配。即參數缺失以undefined補，參數多出的部分可以通過arguments來獲取，也可以function(a , b , ...rest)的函數定義來接收更多的參數。
對象中的函數稱之爲方法

高階函數：一個函數可以接收另一個函數作爲參數

'use strict';

function pow(x) {
    return x * x;
}

//map()的用法。注：map的參數默認爲一個，即數組的元素。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var res_pow = arr.map(pow); 		// [1, 4, 9, 16, 25, 36, 49, 64, 81]

var res_double = arr.map(function(x){
    return 2*x;
});									//[2,4,6,8,10,12,14,16,18]

//reduce()的用法。注：reduce的參數默認爲兩個，即當前索引的本元素和下個元素。

arr.reduce(function(x,y){
    return x+y;
});									//45,1到9求和

//filter()的用法。注：filter的參數默認爲一個，即數組的元素。傳入的函數返回值類型爲bool值，true保留該元素，false丟棄該元素。
arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {
    return x % 2 !== 0;
});									// [1, 5, 9, 15]

arr = ['A', 'B', 'C'];
r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是變量arr
    return true;
});

//sort()的高階用法
arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});								 // [1, 2, 10, 20]

閉包：將函數作爲結果值返回。特點：延遲調用

'use strict'

function lazy_sum(arr) {
    var sum = function () {
        return arr.reduce(function (x, y) {
            return x + y;
        });
    }
    return sum;
}

var f1 = lazy_sum([1, 2, 3, 4, 5]);
var f2 = lazy_sum([1, 2, 3, 4, 5]);
f1 === f2;					// false，當我們調用lazy_sum()時，每次調用都會返回一個新的函數，即使傳入相同的參數
f1(); 						// 15

function count() {
    var arr = [];
    for (let i=1; i<=3; i++) {		//var定義i時，f1,f2,f3的結果都是16，因爲當所有函數都被加載完成時，i的值是4。當let定義i時,i的值只在本循環內有效，所以i的值在被載入時就已經確定，所以f1,f2,f3的結果依次時1,4,9
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1();					//1
f2();					//4
f3();					//9

(function (x) {
    return x * x;
})(3); 		// 9,創建一個匿名函數並立刻執行
/**
  *上述的循環按下述寫法，也可得到1,4,9的結果
  *for (var i=1; i<=3; i++) {
  *     arr.push((function (n) {
  *         return function () {
  *             return n * n;
  *         }
  *     })(i));
  * }
**/

箭頭函數：類似於Java中的Lambda表達式

'use strict'

//下述兩個函數變量的功能一樣。
var f = function (x) {
    return x * x;
};
var fn = x => x * x;

generator：可以多次返回值

'use strict'

function* fib(max) {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < max) {
        yield a;
        [a, b] = [b, a + b];
        n ++;
    }
    return;
}

var f = fib(5);
f.next(); // {value: 0, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 1, done: false}
f.next(); // {value: 2, done: false}
f.next(); // {value: 3, done: false}
f.next(); // {value: undefined, done: true}

知識點補充

'use strict'	//解決不使用var定義變量造成的全局變量衝突，由ECMA推出的規範

JavaScript中一個語句要以；結尾，不然會出現斷句錯誤的情況。

判斷對象類型：

//方法一使用typeof方法。 
console.log(typeof str); //string 
console.log(typeof arr); //object 
console.log(typeof obj); //object 
console.log(typeof num); //number 
console.log(typeof b); //boolean 
console.log(typeof n); //null是一個空的對象 
console.log(typeof u); //undefined 
console.log(typeof fn); //function

JavaScript筆記

JavaScript筆記

字符串的操作：

數組

函數

知識點補充

python gdal 安裝使用（Windows， python 3.6.8）

【docker筆記】Mysql+Redis+ElasticSearch+kibana+Jenkins 開發環境搭建

【SoBlog自動化部署方案】Debian9.11部署系統記錄

Chrome解決http自動跳轉至https的問題

【nginx反向代理】映射同一服務器上的多個端口

【docker筆記】使用docker配置Jenkins

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結