【Web前端】JavaScript入门与基础(一)
JavaScript简介
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。
JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多
JavaScript与ECMAScript的关系：ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。
JavaScript版本
JavaScript语句、标识符
语句：JavaScript 程序的单位是行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句。
var num = 10;
语句以分号结尾，一个分号就表示一个语句结束
标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名
标识符是由：字母、美元符号($)、下划线(_)和数字组成，其中数字不能开头
温馨提示:中文是合法的标识符，可以用作变量名（不推荐）
JavaScript保留关键字
JavaScript有一些保留字，不能用作标识符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。
JS变量
Js中的变量可以通过var或let进行命名
var是函数级作用域
// var - 函数作用域 (Function Scope)
function varTest() {var x = 1;if (true) {var x = 2; // 同一个变量console.log(x); // 2}console.log(x); // 2
}let是块级作用域
// let - 块级作用域 (Block Scope)
function letTest() {let x = 1;if (true) {let x = 2; // 不同的变量console.log(x); // 2}console.log(x); // 1
}关于变量提升，var - 会提升并初始化为 undefined ，而let也会提升但不会初始化 (暂时性死区)
console.log(foo); // undefined
var foo = "bar";console.log(bar); // ReferenceError: Cannot access 'bar' before initialization
let bar = "baz";关于在全局作用域中的行为，var会成为全局对象(window)的属性，而let不会成为全局对象的属性
var globalVar = "I'm global";
console.log(window.globalVar); // "I'm global"let globalLet = "I'm also global";
console.log(window.globalLet); // undefined关于是否可以重复声明问题，var允许重复，let不允许重复
var x = 1;
var x = 2; // 没问题let y = 1;
let y = 2; // 错误，y已经被赋值为1了，不允许在被赋值为2关于两者在循环中的行为差异
// var 在循环中的问题
for (var i = 0; i < 3; i++) {setTimeout(() => console.log(i)); // 3, 3, 3
}// let的正确行为
for (let j = 0; j < 3; j++) {setTimeout(() => console.log(j)); // 0, 1, 2
}| 特性 | var | let | const |
|---|---|---|---|
| 作用域 | 函数作用域 | 块级作用域 | 块级作用域 |
| 提升 | 是 | 否(暂时性死区) | 否(暂时性死区) |
| 重复声明 | 允许 | 不允许 | 不允许 |
| 重新赋值 | 允许 | 允许 | 不允许 |
| 必须初始化 | 否 | 否 | 是 |
JavaScript引入方法
方法一：引入到HTML文件
<body><script>var age = 20</script>
</body>
方法二：引入本地独立JS文件
<body><script type="text/javascript" src="./javascript.js"></script>
</body>
方法三：引入网络来源文件
<body><script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</body>
JavaScript注释与常见输出方式
JavaScript注释：源码中注释是不被引擎所解释的，它的作用是对代码进行解释。Javascript 提供两种注释的写法：一种是单行注释，用//起头；另一种是多行注释，放在/和/之间。
// 这是单行注释/*这是多行注释
*/
嵌入在HTML文件中的注释
<!-- 注释 -->
JavaScript有很多种输出方式，都可以让我们更直观的看到程序运行的结果
// 在浏览器中弹出一个对话框,然后把要输出的内容展示出来,alert都是把要输出的内容首先转换为字符串然后在输出的
alert("要输出的内容");
document.write("要输出的内容");
// 在控制台输出内容
console.log("要输出的内容");
Javascript数据类型
数据类型分类：JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种：数值，字符串，布尔值（原始类型/合成类型），undefined和null
// 数值型
var age = 20;
// 字符串型
var name = "Javascript";
// 布尔型
var learn = true;
// 合成类型
var user = {name:"Javascript",age:18,learn:true
}
可以通过typeof方法确定一个值是什么类型
// 数值返回number
typeof 123 // "number"// 字符串返回string
typeof '123' // "string"// 布尔值返回boolean
typeof false // "boolean"// 对象返回object
typeof {} // "object"typeof undefined; // "undefined"typeof null; // "object" (历史遗留问题)unll和undefined的区别
null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。
何时使用undefined或null
使用undefined
- 让变量保持未初始化状态
- 函数默认返回值
- 对象不存在的属性
使用null：
- 明确表示"无"或"空"的意图
- 主动清空一个变量或属性
- 作为函数的参数表示"无值"
// undefined 的典型场景：
let x;
console.log(x); // undefinedfunction foo() {}
console.log(foo()); // undefinedconst obj = {};
console.log(obj.prop); // undefined// null 的典型场景：
// 主动设置为null
let y = null;// DOM查询不到元素
document.getElementById("non-existent"); // null// 作为函数的参数，表示"无"
JSON.parse("null"); // null// 相等性比较
null == undefined; // true (抽象相等)
null === undefined; // false (严格相等)关于JSON处理方面：
JSON.stringify({a: undefined}); // "{}" (属性被忽略)
JSON.stringify({a: null}); // "{"a":null}"| 类型 | 含义 |
|---|---|
undefined | 表示变量已声明但未赋值，或函数没有返回值时的默认值 |
null | 表示"无"的对象，通常用于主动清空一个变量的值 |
例子：
// 用户数据示例
let user = {name: "张三",age: null, // 表示年龄信息是"无"(可能是用户选择不提供)address: undefined // 表示地址信息未提供
};// 函数参数处理
function greet(name = "Guest") {console.log(`Hello, ${name}!`);
}greet(null); // "Hello, null!" (明确传递null)
greet(undefined); // "Hello, Guest!" (使用默认值)// 数组中使用
const arr = [undefined, null];
console.log(arr[0]); // undefined
console.log(arr[1]); // nullJavascript运算符
运算符之算术运算符
常见的算术运算符有，加减乘除运算符，余数运算符（%），自增自减运算符（++，--）
10 + 10; // 20
100 - 10; // 90
10 * 2; //20
10 / 5; 213 % 5 // 3var x = 1;
var y = 1;
++x // 2
--y // 0
自增和自减运算符有一个需要注意的地方，就是放在变量之后，会先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会先进行自增/自减操作，再返回变量操作后的值。
var x = 1;
var y = 1;
x++ // 1
++y // 2var x = 10;
var y = 20;
console.log(x++ + y);// 30
运算符之赋值运算符
赋值运算符（Assignment Operators）用于给变量赋值
// 将 1 赋值给变量 x
var x = 1;
// 将变量 y 的值赋值给变量 x
var x = y;
// 等同于 x = x + y
x += y
// 等同于 x = x - y
x -= y
// 等同于 x = x * y
x *= y
// 等同于 x = x / y
x /= y
// 等同于 x = x % y
x %= y
运算符之比较运算符
比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件。
2 > 1 // true
2 < 1 // false| 比较运算符 | 描述 |
|---|---|
| < | 小于运算符 |
| > | 大于运算符 |
| <= | 小于或等于运算符 |
| >= | 大于或等于运算符 |
| == | 相等运算符, 双等比较值 |
| === | 严格相等运算符，三等比较值和类型 |
| != | 不相等运算符 |
| !== | 严格不相等运算符 |
运算符之布尔运算符
取反运算符（!）
!true // false
!false // true
非布尔值取反：对于非布尔值，取反运算符会将其转为布尔值。可以这样记忆，以下六个值取反后为true，其他值都为false。undefined null false 0 NaN 空字符串（''）
!undefined // true
!null // true
!0 // true
!NaN // true
!"" // true!54 // false
!'hello' // false
且运算符（&&）
console.log(10 < 20 && 10 >5); // true
或运算符（||）
console.log(10 < 20 || 10 < 5); // true
Javascript条件语句
条件语句之if语句
if语句语法规范
if (布尔值){语句;
}
需要注意的是，“布尔值”往往由一个条件表达式产生的，必须放在圆括号中
var m = 3;
if (m === 3) {m++;
}
console.log(m); // 4
注意，if后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（===）和相等运算符（==）。尤其是赋值表达式不具有比较作用。
var x = 1;
var y = 2;
if (x = y) {console.log(x);
}
条件语句之 if...else
if...else基本结构：if代码块后面，还可以跟一个else代码块表示不满足条件时，所要执行的代码。
if (m === 3) {// 满足条件时，执行的语句
} else {// 不满足条件时，执行的语句
}
多个if...else连接：对同一个变量进行多次判断时，多个if...else语句可以连写在一起。
if (m === 0) {// ...
} else if (m === 1) {// ...
} else if (m === 2) {// ...
} else {// ...
}
if...else嵌套
var eat = true;
var food = "猪肉炖粉条";
if (eat) {if (food == "双椒鱼头") {console.log('双椒鱼头'); }else{console.log("猪肉炖粉条");}
} else {console.log('不吃了');
}
条件语句之 switch
switch (fruit) {case "banana":// ...break;case "apple":// ...break;default:// ...
}
需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。
var x = 1;switch (x) {case 1:console.log('x 等于1');case 2:console.log('x 等于2');default:console.log('x 等于其他值');
}
// x等于1
// x等于2
// x等于其他值
三元运算符
JavaScript还有一个三元运算符（即该运算符需要三个运算子）?:，也可以用于逻辑判断。
(条件) ? 表达式1 : 表达式2
// 判断一个整数是奇数与偶数
// if...else语句
var n = 100;
if (n % 2 === 0) {console.log("偶数");
} else {console.log("奇数");
}
// 三元运算符
var n = 100;
n % 2 === 0 ? '偶数' : '奇数'
Javascript循环语句
for语句就是循环命令，可以指定循环的起点、终点和终止条件。它的格式如下
for (初始化表达式; 条件; 迭代因子) {语句
}
for语句后面的括号里面，有三个表达式。
初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。
布尔表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
迭代因子（increment）：每轮循环的最后一个操作，通常用来递增循环变量。
var x = 3;
for (var i = 0; i < x; i++) {console.log(i);
}// 循环输出1~100之间数字的和
var sum=0;
for(var i=1;i<=100;i++){sum+=i;
}
console.log(sum);// 循环输出1000以内的奇数
for(i = 0 ; i<1000; i ++){if( i % 2 ==1){console.log( i + " "); }
}// 九九乘法表
for(var i = 1;i <= 9;i++){document.write("<br>"); for(var j = 1;j <= i;j++){sum = i * j;document.write(i ,"*",j ,"=",sum," ");}
}
While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。
while (条件) {语句;
}
例子：
var i = 0;
while (i < 100) {console.log('i 当前为：' + i);i = i + 1;
}while (true) {console.log('Hello, world');
}// for
var x = 3;
for (var i = 0; i < x; i++) {console.log(i);
}// while
var x = 3;
var i = 0;
while (i < x) {console.log(i);i++;
}
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);
}
Javascript字符串
字符串简单使用
字符串就是零个或多个排在一起的字符，放在单引号或双引号之中
'JavaScript'
"JavaScript"
单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号
'key = "value"'
"It's a long JavaScript"
如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此
'Did she say \'Hello\'?'
// "Did she say 'Hello'?"
"Did she say \"Hello\"?"
// "Did she say "Hello"?"
温馨提示：字符串默认只能写在一行内，分成多行将会报错，如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠
var longString = 'Long \
long \
string';
longString
// "Long long long string"
length属性返回字符串的长度，该属性也是无法改变的
var s = 'JavaScript';
s.length // 10
字符串方法_charAt()
charAt方法返回指定位置的字符，参数是从0开始编号的
var s = new String('JavaScript');
s.charAt(1) // "a"
s.charAt(s.length - 1) // "t"// 如果参数为负数，或大于等于字符串的长度，charAt返回空字符串'JavaScript'.charAt(-1) // ""
'JavaScript'.charAt(10) // ""
字符串方法_concat()
concat方法用于连接两个字符串，返回一个新字符串，不改变原字符串
var s1 = 'JavaScript';
var s2 = 'HTML';
s1.concat(s2) // "JavaScriptHTML"
s1 // "Javascript"// 该方法可以接受多个参数
'HTML'.concat('Javascript', 'web') // "HTMLJavascriptweb"
如果参数不是字符串，concat方法会将其先转为字符串，然后再连接
var one = 1;
var two = 2;
var three = '3';''.concat(one, two, three) // "123"
字符串方法_substring()
substring方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）
'JavaScript'.substring(0, 2) // "Ja"
如果省略第二个参数，则表示子字符串一直到原字符串的结束
'Javascript'.substring(2) // "vascript"
如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置
'Javascript'.substring(9, 2) // "vascript"
// 等同于
'Javascript'.substring(2, 9) // "vascript"
如果参数是负数，substring方法会自动将负数转为0
'Javascript'.substring(-3) // "Javascript"
'Javascript'.substring(2, -3) // "Ja"
字符串方法_substr()
substr方法用于从原字符串取出子字符串并返回，不改变原字符串，跟substring方法的作用相同
substr方法的第一个参数是子字符串的开始位置（从0开始计算），第二个参数是子字符串的长度
'Javascript'.substr(2, 7); // vascrip
如果省略第二个参数，则表示子字符串一直到原字符串的结束
'Javascript'.substr(2) // "vascript"
如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串
'Javascript'.substr(-7) // "ascript"
'Javascript'.substr(4, -1) // ""
字符串方法_indexOf()
indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1，就表示不匹配
'hello world'.indexOf('o') // 4
'Javascript'.indexOf('world') // -1
indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配
'hello world'.indexOf('o', 6) // 7
字符串方法_trim()
trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串
' hello world '.trim()
// "hello world"
该方法去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）
'\r\nJavascript \t'.trim() // 'Javascript'
ES6扩展方法，trimEnd()和trimStart()方法
" Javascript ".trimEnd(); // Javascript
" Javascript ".trimStart(); // Javascript
字符串方法_split()
split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组
'Java|Script|HTML'.split('|') // ["Java", "Script", "HTML"]
如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。
'a|b|c'.split('') // ["a", "|", "b","|", "c"]
如果省略参数，则返回数组的唯一成员就是原字符串
'Ja|vascr|ipt'.split() // [Ja|vascr|ipt]
split方法还可以接受第二个参数，限定返回数组的最大成员数。
'a|b|c'.split('|', 0) // []
'a|b|c'.split('|', 1) // ["a"]
'a|b|c'.split('|', 2) // ["a", "b"]
'a|b|c'.split('|', 3) // ["a", "b", "c"]
'a|b|c'.split('|', 4) // ["a", "b", "c"]
Javascript数组
数组（array）是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。
var arr = ['a', 'b', 'c'];
两端的方括号是数组的标志。a是0号位置，b是1号位置，c是2号位置。（位置也被称为下标）.除了在定义时赋值，数组也可以先定义后赋值。
var arr = [];
arr[0] = 'a';
arr[1] = 'b';
arr[2] = 'c';
任何类型的数据，都可以放入数组
var arr = [ 100, [1, 2, 3],false ];
如果数组的元素还是数组，就形成了多维数组
var a = [[1, 2], [3, 4]];
a[0][1] // 2
a[1][1] // 4
length 属性:数组的length属性，返回数组的成员数量
['a', 'b', 'c'].length // 3
数组的遍历
数组的遍历可以考虑使用for循环或while循环
var a = ['a', 'b', 'c'];
// for循环
for(var i = 0; i < a.length; i++) {console.log(a[i]);
}
// while循环
var i = 0;
while (i < a.length) {console.log(a[i]);i++;
}
for...in遍历数组
var a = ['a', 'b', 'c'];
for (var i in a) {console.log(a[i]);
}
数组静态方法_Array.isArray()
Array.isArray方法返回一个布尔值，表示参数是否为数组。它可以弥补typeof运算符的不足
var arr = ["Javascript", 100, true];
console.log(typeof arr); // objectvar arr = ['Javascript', 'HTML', 'Web'];
Array.isArray(arr) // true
数组方法_push()/pop()
push方法用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组
var arr = [];
arr.push("Javascript") // 1
arr.push('HTML') // 2
arr.push(true, {}) // 4
arr // ["Javascript", 'HTML', true, {}]
pop方法用于删除数组的最后一个元素，并返回该元素。注意，该方法会改变原数组
var arr = ['Javascript', 'HTML', 'WEB前端'];
arr.pop() // 'WEB前端'
arr // ['Javascript', 'HTML']
数组方法_shift()/unshift()
shift方法用于删除数组的第一个元素，并返回该元素。注意，该方法会改变原数组
var arr = ['Javascript', 'HTML', 'WEB前端'];
arr.shift() // '尚学堂'
arr // ['Javascript', 'HTML']
shift方法可以遍历并清空一个数组
var list = [1, 2, 3, 4, 5, 6];
var item;
while (item = list.shift()) {console.log(item);
}
list // []
unshift方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组
var arr = ['Javascript', 'HTML', 'WEB前端'];
arr.unshift('Java'); // 4
arr // ['Java', 'Javascript', 'HTML', 'WEB前端']
unshift方法可以接受多个参数，这些参数都会添加到目标数组头部
var arr = [ 'HTML', 'Javascript' ];
arr.unshift('WEB前端', 'Java') // 4
arr // [ 'WEB前端', 'Java', 'HTML', 'Javascript' ]
数组方法_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或空位，会被转成空字符串
[undefined, null].join('#')
// '#'
['a',, 'b'].join('-')
// 'a--b'
数组的join配合字符串的split可以实现数组与字符串的互换
var arr = ["a","b","c"];
var myArr = arr.join("");
console.log(myArr);
console.log(myArr.split(""));
数组方法_concat()
concat方法用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变
['hello'].concat(['world'])
// ["hello", "world"]
['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]
除了数组作为参数，concat也接受其他类型的值作为参数，添加到目标数组尾部。
[1, 2, 3].concat(4, 5, 6)
// [1, 2, 3, 4, 5, 6]
数组方法_reverse()
reverse方法用于颠倒排列数组元素，返回改变后的数组。注意，该方法将改变原数组
var a = ['a', 'b', 'c'];
a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]// 实现一个字符串反转排列
var str = "hello";
str.split("").reverse().join("")
数组方法_indexOf()
indexOf方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1
var arr = ['a', 'b', 'c'];
arr.indexOf('b') // 1
arr.indexOf('y') // -1
// indexOf方法还可以接受第二个参数，表示搜索的开始位置
['Javascript', 'HTML', 'Web'].indexOf('Javascript', 1) // -1Javascript函数
函数的声明 function 命令： function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。
function print(s) {console.log(s);
}
函数名的提升 JavaScript 引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。
add();
function add() {}
函数参数 函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数。
function square(x) {console.log(x * x);
}
square(2) // 4
square(3) // 9
函数返回值 JavaScript函数提供两个接口实现与外界的交互，其中参数作为入口，接收外界信息；返回值作为出口，把运算结果反馈给外界。
function getName(name){return name;
}
var myName = getName("Javascript")
console.log(myName); // Javascript
注意：
return后面不能在添加任何代码，因为不会执行