Web前端开发之JavaScript

条件语句
三元运算符
循环语句
字符串
数组

1. 条件语句

1.1 if语句

if (布尔值){ // “布尔值”往往由一个表达式产生，其中，赋值表达式不具备比较作用

语句;

}

1.2 if...else 语句

if...else可成对单独使用，也可多层if...else if...else if... ...else使用。if...else嵌套时，else代码块总是与离自己最近的同级if语句配对。

if (m === 0) {

//....

}else if (m === 1) {

//...

}else if (m === 2) {

//....

}else {

//...

}

1.3 switch 语句

switch (fruit) { // 可用于代替多个if..else语句

case "banana":

// ...

break;

case "apple":

// ...

break;

default:

//...

}

2. 三元运算符

JS有一个三元运算符 ?: ，可用于逻辑判断，被视为if...else...的简写形式，用于多种场合

条件 ? 表达式1 : 表达式2

3. 循环语句

3.1 for语句

for (初始化表达式; 条件; 迭代因子) { // 表达式可省略

语句;

}

示例：打印九九乘法表

<script>var sum = 0;for(var i = 1; i <= 9; i++){document.write("<br>");for(var j = 1; j <= i; j++){sum = i * j;document.write(j, "*", i, "=", sum, " ");}}</script>

3.2 while

while (条件) { // 所有for循环都可以改写成while循环

语句;

}

3.3 break语句和 continue语句

两者都具有跳转作用，可以让代码不按既有顺序执行

break：用于跳出代码块或循环

for (var i = 0; i < 5; i++) {

if (i === 3){

break;

}

console.log(i);

}

continue：立即终止本轮循环，返回循环结构的头部，开始下一轮循环

for (var i = 0; i < 5; i++) {

if (i === 3){

continue;

}

console.log(i);

}

4. 字符串

4.1 字符串简介

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中
单引号字符串的内部，可以使用双引号；双引号字符串内部，可以使用单引号
单(双)引号字符串内部使用单(双)引号，必须加转义字符 \
字符串默认只能写在一行内，如果必须分成多行，可以在每行尾部使用反斜杠 \ (代码中)

length 属性：返回字符串的长度，该属性是无法改变的

var s = '字符串123,string';

console.log(s.length); // 13

4.2 字符串方法_charAt()

chatAt 方法返回指定位置的字符，参数是从0开始编号的

var s = new String('hello');

s.charAt(1); // e

s.charAt(s.length - 1); // l

// 如果参数为负数、或大于等于字符串的长度，charAt 返回空字符串 " "

4.3 字符串方法_concat()

concat 方法用于连接两个字符串，返回一个新的字符串，不改变原字符串

var str1 = "Hello";

var str2 = "World";

var str3 = "!";

var num = 100; // 如果参数不是字符串，会先转为字符串 100 => "100"

var result = str1.concat(str2,str3,num); //该方法可接受多个参数

console.log(result); // HelloWorld!100

console.log(str1);

console.log(num); //100

// 字符串相加，不需使用concat，可使用+连接字符串

var result = str1 + str2 + str3 + num;

console.log(result); // HelloWorld!100

concat 和加号的区别：

concat不管什么类型直接合并成字符串
加号遇到数字类型直接做运算，遇到字符串和字符串相连接

4.4 字符串方法_substring()

substring 方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）

如果省略第二个参数，则表示子字符串一直到原字符串的结束
如果第一个参数大于第二个参数，substring 方法会自动更换两个参数的位置
如果参数是负数，substring 方法会自动将负数转为0

4.5 字符串方法_substr()

substr 方法用于从原字符串取出子字符串并返回，不改变原字符串，跟substring 方法作用相同。substr 方法第一个参数是子字符串开始位置，第二个参数是子字符串的长度

如果省略第二个参数，则表示子字符串一直到原字符串的结束
如果第一个参数是负数，表示倒数计算的字符位置
如果第二个参数是负数，将被自动转为0，因此返回空字符串

4.6 字符串方法_indexOf()

indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回 -1，表示不匹配

'hello world'.indexOf('o') //4

indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配

'hello world'.indexOf('o', 6) //7

4.7 字符串方法_trim()

trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串

' hello world '.trim() // "hello world"

该方法去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）

'\r\nhelloworld \t'.trim() // "helloworld"

ES6扩展方法，trimEnd() 和 trimStart()方法：分别去掉尾部或头部的空格。

4.8 字符串方法_split()

split方法按照给定规则分割字符串，返回一个由分割出来的字符串组成的数组

'hello|world'.split('|') // ['hello', 'world']

如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符

'a|b|c'.split(' ') // ['a', '|', 'b', '|', 'c']

如果省略参数，则返回数组的唯一成员是原字符串

'a|b|c'.split() // ['a|b|c']

split方法可以接受第二个参数，限定返回数组的最大成员数

'hello|wo|rld'.split('|', 3) // ['hel', 'wo', 'rld']

5. 数组

5.1 数组简介

数组（array）是按次序排列的一组值，整个数组用方括号表示，其中的值编号从0开始。数组可以在定义时赋值，也可以先定义后赋值。数组越界会返回undefined。

任何类型的数据，都可以放入数组

var arr = [100, [1, 2, 3], false];

// 如果数组的元素还是数组，就形成了多维数组

var arr = [100, 200, ["iwen", "tom"]]

length属性：返回数组的成员数量

[100, 200, 300].length // 3

5.2 数组的遍历for...in

数组的遍历可以考虑使用 for循环或 while循环，也可以使用 for...in 遍历数组

var a = ['hello', 'world', '!'];

for(var i in a){

console.log(a[i]);

}

5.3 数组静态方法_Array.isArray()

Array.isArray方法返回一个布尔值，表示参数是否为数组。可以弥补typeof运算符的不足

var arr = ['hello', 'world', '!'];

Array.isArray(arr) // true

5.4 数组方法_push()/pop()

push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。

var arr = [];

var myLength = arr.push('hello', true, 100);

console.log(myLength); // 3

console.log(arr); // ['hello', true, 100]

pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组

var arr = ['hello', 'world', '!'];

arr.pop();

console.log(arr); // ['hello', 'world']

5.5 数组方法_shift()/unshift()

shift方法用于删除数组的第一个元素，并返回该元素，该方法会改变数组

var arr = ['hello', 'world', '!'];

arr.shift();

console.log(arr); // ['world', '!']

shift方法可以遍历并清空一个数组

var list = [1, 2, 3, 4, 5, 6];

var item;

while(item = list.shift()){

console.log(ltem);

} ;

console.log(list) // []

unshift方法用于在数组的第一个位置添加元素，并返回添加后的数组长度，会改变原数组

var arr = ['world', '!'];

arr.unshift(100, 'hello'); // unshift方法可以接受多个参数

console.log(arr); // [100, 'hello', 'world', '!']

5.6 数组方法_join()

join方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔

var a = [1, 2, 3, 4];

a.join(' '); // '1 2 3 4'

a.join('|'); // '1 | 2 | 3 | 4'

a.join(); // '1, 2, 3, 4'

如果数组成员是 undefined 或 null 或空位，会被转成空字符串

数组的 join 配合字符串的 split 可以实现数组与字符串的互换

var arr = ['a', 'b', 'c'];

var myArr = arr.join(" ");

console.log(myArr); // a b c

console.log(myArr.split("")); //['a', 'b', 'c']

5.7 数组方法_concat()

concat方法用于多个数组的合并，它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变。

['hello'].concat(['world'], ['!']); // ['hello', 'world', '!']

除了数组作为参数，concat也接受其他类型的值作为参数，添加到目标数组尾部。

应用场景：上拉加载，合并数据

5.8 数组方法_reverse()

reverse方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组

var a = ['a', 'b', 'c'];

a.reverse(); // ['c', 'b', 'a']

实现一个字符串反转排列

var str = 'hello';

str.split("").reverse().join(""); // 'olleh'

5.9 数组方法_indexOf()

indexOf方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1

var arr = ['a', 'b', 'c'];

arr.indexOf('b'); // 1

arr.indexOf('y'); // -1

indexOf可以接受第二个参数，表示搜索的开始位置