[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