[TOC]
# 每日英語
1. `snippet` 代碼段(vscode會用到, 加快編程速度)
2. `prefix` 前綴
3. `description` 描述
4. `result` 結果(可以縮寫成res)
5. `plus` 加法
6. `minus` 減法
7. `multiply` 乘法
8. `divide` 除法
9. `square root` 開方(sqrt)
10. `math` 數學
11. `method` 方法
12. `param` 參數
13. `length` 長度(用來獲取數組長度)
14. `concat` 合并(數組)
15. `separator` 分隔符
16. `shift` 移位(刪除)
17. `slice` 切片
18. `sort` 排序
19. `splice`拼接
# 函數
## 什么是函數?
> 函數就是執行指定功能的代碼段
```javascript
function helloWorld(){
console.log('hello world !!!');
}
helloWorld(); // 輸出helloWorld
```
## 函數的命名規范
> 動詞+名詞
> 命名規范和變量一致
1. 區分大小寫
2. 不能數字開頭
3. 不能保留字
4. 不能空格
## 如何定義一個函數
```javascript
function 函數名(參數){
代碼段
}
```
```javascript
// plusNumber() = a+b
function plusNumber(){
var a = 1;
var b = 2;
return a+b;
}
```
## 函數的運行, 需要調用
```javascript
// 單純定義是沒有結果的
function helloWorld(){
console.log('hello world !!!');
}
```
## 什么是函數的參數
> 函數中用到的變量
> 可以讓函數變得更加靈活
```javascript
function printSomething(sth){
console.log(sth)
}
printSomething('hello world'); // hello world
printSomething('hello USA'); // hello USA
```
## 什么是函數的返回值?
> 反饋運行的結果
## 沒有返回值的情況
```javascript
function plusNumber(){
var a = 1;
var b = 2;
console.log(a+b);
}
plusNumber(); // 3
```
## 沒有返回值會返回undefined
```javascript
function plusNumber(){
var a = 1;
var b = 2;
// console.log(a+b);
a+b;
}
plusNumber(); // 3
console.log(plusNumber()); // undefined
```
## 函數和返回值的關系, 相當于變量和變量值的關系
```javascript
// plusNumber() = a+b
function plusNumber(){
var a = 1;
var b = 2;
return a+b;
}
console.log(plusNumber()); // 3
```
## 返回值需要被變量接收
```javascript
function plusNumber(){
var a = 1;
var b = 2;
return a+b;
}
plusNumber(); // 沒有結果
```
```javascript
function plusNumber(){
var a = 1;
var b = 2;
return a+b;
}
var result = plusNumber()
console.log(plusNumber()) // 3
```
## 如何調用函數?
> 直接用函數名
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function helloWorld(){
alert('hello world') // 執行特定功能
}
</script>
</head>
<body>
<input type="button" value="click" onclick="helloWorld()">
</body>
</html>
```
函數的第二種寫法
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
var helloWorld = function(){
alert('hello world!!!!') // 執行特定功能
}
</script>
</head>
<body>
<input type="button" value="click" onclick="helloWorld()">
</body>
</html>
```
## 函數傳參
```javascript
// plusNumber() = a+b
function plusNumber(a,b){
return a+b;
}
var res = plusNumber(3,4);
console.log(res); // 7
```
傳參, 就是傳變量
```javascript
// plusNumber() = a+b
function plusNumber(a,b){
return a+b;
}
var first = 33;
var second = 4;
var res = plusNumber(first,second);
console.log(res); // 37
```
## 使用vscode查看函數解釋(把鼠標移到函數名稱上, 即可顯示)
## 默認參數(如果不傳值, 參數也可以保證函數運算時, 有值可用, 可以提交代碼的健壯性)
```javascript
function plusNum(a=1,b=2){
return a+b;
}
console.log(plusNum()) // 3
```
# 數組屬性
什么是數組?
> 數據類型之一, 表示一組數據
> array ==> 數組
如何聲明數組
```javascript
var arr = new Array();
var arr = [];
```
如何增加元素
```javascript
var arr = [];
arr[0] = 1;
arr[1] = 2;
```
如何獲取元素
```javascript
var arr = [1,2,3,4];
arr[2]; // 3
arr[2] = 5; // 數組會變成[1,2,5,4]
```
如何獲取數組長度
```javascript
var arr = [1,2,3,4];
console.log(arr.length); // 4
```
```javascript
var arr = [1,2,3,4];
console.log(arr.length);
arr[4] = 100;
console.log(arr.length); // 5
arr[6] = 100;
console.log(arr.length); // 7
```
`length`
是一個對象的屬性,所謂屬性, 我們現在叫做變量
```javascript
var arr = [1,2,3,4];
console.log(arr.length);
arr[4] = 100;
console.log(arr.length); // 5
arr[6] = 100;
console.log(arr.length); // 7
```
## 方法和函數的區別
沒有區別, 叫法不同, 面向對象叫方法, 我們現在叫函數
## 對象復習(有索引, 就可以查出來值)
```javascript
var obj = {
"name":"China",
"sex":"female"
}
console.log(obj.name); // China
obj.name = "USA";
console.log(obj.name); // USA
```
索引也可以不加引號
```javascript
var obj = {
name:"China",
sex:"female"
}
console.log(obj.name); // China
obj.name = "USA";
console.log(obj.name); // USA
```
數組的"正規"取值方式
```javascript
var arr = [1,2,3,4];
console.log(arr['length']); // 4
arr[4] = 100;
console.log(arr['length']); // 5
arr[6] = 100;
console.log(arr['length']); // 7
```
對象的取值方式
```javascript
var arr = [1,2,3,4];
console.log(arr.length); // 4
arr[4] = 100;
console.log(arr.length); // 5
arr[6] = 100;
console.log(arr.length); // 7
```
# 數組方法
## concat() `合并`
> 連接兩個或更多的數組，并返回結果。
> `arrayObject.concat(arrayX,arrayX,......,arrayX)`
## 注意使用方式
```javascript
var arr1 = ["I","love","China"];
var arr2 = ["!","!","!"];
console.log(concat(arr1,arr2)); // concat is not defined 沒有定義, 因為是對象方法, 不是自定義函數
```
```javascript
var arr1 = ["I","love","China"];
var arr2 = ["!","!","!"];
console.log(arr1.concat(arr2)); // 把arr1和arr2 合并了, arr1的內容在前, arr2的內容在后
console.log(arr2.concat(arr1)); // 把arr1和arr2 合并了, arr2的內容在前, arr1的內容在后
```
```javascript
var arr1 = ["I","love","China"];
var arr2 = ["!","!","!"];
var res = arr1.concat(arr2); // 聲明一個變量接收方法的返回值
console.log(res); // 輸出變量
```
# join() `轉換`
> 把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。
`arrayObject.join(separator)`
## 什么是separator? 分隔符
> 能起到分割作用的符號, 都可以作為分隔符, 可以起到美觀的效果, 易于識別
```javascript
/* 分隔符的使用, 本質上, 數組轉字符串 */
var arr1 = ["I","love","China"];
var arr2 = ["!","!","!"];
var res = arr1.join(",");
var res2 = arr1.join("-");
var res3 = arr1.join("");
var res4 = arr1.join(" ");
console.log(res); // I,love,China
console.log(res2); // I-love-China
console.log(res3); // IloveChina
console.log(res4); // I love China
```
# pop() `刪除`
> 刪除并返回數組的最后一個元素
> `arrayObject.pop()`
```javascript
/* 分隔符的使用, 本質上, 數組轉字符串 */
var arr1 = ["I", "love", "China", "!", "!", "!"];
var res = arr1.pop();
console.log(res); // !
res = arr1.pop();
console.log(res); // !
res = arr1.pop();
console.log(res); // !
res = arr1.pop();
console.log(res); // China
res = arr1.pop();
console.log(res); // love
res = arr1.pop();
console.log(res); // I
res = arr1.pop();
console.log(res); // undefined
```
```javascript
// 刪除之后, 數組會改變
var arr = ["I","Love","China","!","!","!"];
console.log(arr.pop()); // !
console.log(arr.pop()); // !
console.log(arr); // [ 'I', 'Love', 'China', '!' ]
```
## push() `添加`
> 向數組的末尾添加一個或更多元素，并返回新的長度。
`arrayObject.push(newelement1,newelement2,....,newelementX)`
```javascript
/* push 結尾追加元素, 返回長度 */
var arr1 = ["I", "love", "China"];
var res = arr1.push("!");
console.log(res); // 4
res = arr1.push("!");
console.log(res); // 5
console.log(arr1); // [ 'I', 'love', 'China', '!', '!' ]
```
## 注意eval()
> 有朝一日, 做了php, 記得禁掉eval函數
```javascript
var a = "console.log('123')"; // 123
eval(a); // 字符串轉代碼
```
## reverse() `排序`
> 顛倒數組中元素的順序。
> arrayObject.reverse()
```javascript
var arr = ["I","Love","China","!","!","!"];
var res = arr.reverse();
console.log(res); // [ '!', '!', '!', 'China', 'Love', 'I' ] 順序顛倒
```
## shift() `刪除`
> 刪除并返回數組的第一個元素
> arrayObject.shift()
```javascript
var arr = [1,2,3,4,5,6,7,8];
console.log(arr.shift()); // 1
console.log(arr);
console.log(arr.shift()); // 2
console.log(arr);
console.log(arr.shift()); // 3
console.log(arr);
console.log(arr.shift()); // 4
console.log(arr);
console.log(arr.shift()); // 5
console.log(arr);
console.log(arr.shift()); // 6
console.log(arr);
console.log(arr.shift()); // 7
console.log(arr);
console.log(arr.shift()); // 8
console.log(arr);
console.log(arr.shift()); // undefined
console.log(arr);
console.log(arr.shift()); // undefined
console.log(arr);
```
## unshift() `添加`
> 向數組的開頭添加一個或更多元素，并返回新的長度。
> arrayObject.unshift(newelement1,newelement2,....,newelementX)
```javascript
var arr = [];
console.log(arr.unshift(1)); // 1
console.log(arr); // [ 1 ]
console.log(arr.unshift(1,2,3,4)); // 5
console.log(arr); // [ 1, 2, 3, 4, 1 ]
```
## slice() `查詢`
> 從某個已有的數組返回選定的元素
> arrayObject.slice(start,end)
```javascript
var arr = ["I","love","China","!"];
console.log(arr.slice(0,2)); // [ 'I', 'love' ]
```
負數是倒數的意思
```javascript
var arr = ["I","love","China","!"];
console.log(arr.slice(0,-1)); // [ 'I', 'love', 'China' ]
```
切片不影響原數組, 因為本質是查詢
```javascript
var arr = ["I","love","China","!"];
console.log(arr.slice(0,-1)); // [ 'I', 'love', 'China' ]
console.log(arr); // [ 'I', 'love', 'China', '!' ]
```
```javascript
var arr = ["I","love","China","!"];
// 如果沒有end, 默認到結束
console.log(arr.slice(1)); // [ 'love', 'China', '!' ]
console.log(arr); // [ 'I', 'love', 'China', '!' ]
```
## sort()
`排序`
> 對數組的元素進行排序, 注意`支持自定義函數`
> arrayObject.sort(sortby)
```javascript
var arr = [3,2,5,9,11,8]; // 當成字符串來排序了
// var arr = ['3','2','5','9','11','8'];
console.log(arr.sort()); // [ 11, 2, 3, 5, 8, 9 ]
```
```javascript
function sortNumber(a, b) {
return a - b;
}
var arr = [3, 2, 5, 9, 11, 8];
console.log(arr.sort(sortNumber)); // [ 2, 3, 5, 8, 9, 11 ];
```
## splice() `修改`
> 刪除元素，并向數組添加新元素。
> arrayObject.splice(index,howmany,item1,.....,itemX)
```javascript
var arr = ["I","love","China","!"];
var res = arr.splice(0,3);
console.log(res); // [ 'I', 'love', 'China' ]
console.log(arr); // [ '!' ]
```
```javascript
var arr = ["I","love","China","!"];
var res = arr.splice(0,3,"hello","world");
console.log(res); // 刪掉的返回回來
console.log(arr); // [ 'hello', 'world', '!' ], 刪了前三個, 替換了兩個
```
- 每日單詞
- JavaScript 入門
- JavaScript 基礎
- JavaScript 基礎回顧
- JavaScript 函數
- 匿名函數,多維數組,數據類型轉換
- JavaScript 類型轉換, 變量作用域
- js 運算符(一)
- js 運算符(二)
- js 流程控制語句
- JavaScript 掃盲日
- JavaScript 牛刀小試(一)
- JavaScript 牛刀小試(二)
- JavaScript 再談函數
- JavaScript-BOM
- JavaScript-定時器(一)
- JavaScript-定時器(二)
- 番外-輪播圖源碼
- JavaScript 輪播圖和 DOM 簡介
- JavaScript-DOM 基礎-NODE 接口-屬性
- JavaScript-DOM 基礎-NODE 接口-方法
- NodeList-接口-HTMLCollection-接口
- Document 節點
- CSS 復習與擴展(一)
- CSS 復習與擴展(二)
- 走進 jQuery 的世界
- 使用 jquery
- 使用 jquery-2
- jquery 中高級
- jquery 備忘清單-1
- jquery 備忘清單-2
- 聊聊 json
- jquery 備忘清單-3