什么是 JavaScript
- 一种编程语言，可以在网页上实现复杂的功能，交互等
- 解释型语言
- 运行在客户端
- 面向对象语言
三种方式添加 JavaScript
-
内部的 JavaScript
<script> // Your JavaScript </script> -
外部的 JavaScript
<script src="script.js"></script> -
内联的 JavaScript (不推荐🙅♀️)
<button onclick="createParagraph()"> Click me </button>
总汇
- 类型
- JavaScript 不区分整数型和浮点型，采用的双精度 64 位格式。
> 0.1 + 0.2 < 0.30000000000000004> Math.PI > Math.sin(3) - 对象
- 变量
- 数组
- 运算符
- 函数
- 控制结构
- 闭包
字符串方法
可以使用 "". 来查看字符串方法。
以下举一些例子：
alert("Hello" + " world");
console.log("hello".length); /*输出文字*/
console.log("hello".charAt(0)); /*输出文字特定位置字*/
console.log("hello, world".replace("hello", "goodbye"));
console.log("hello,world".toUpperCase());
逻辑操作符
> 1 === 1
< true
> 1 > 2
< false
> 1>= 1
< true
> true && false <!--&& 判断前后两个值是否都为真-->
< false
> false && false
< false
> true || true <!--判断前后两个值是否有一个为真-->
< true
> true || false
< true
> true
< true
> !true
< false
变量与常量
var name = "DasAuto";
console.log(name); <!--打印 name 变量-->
<!--name 变量可以被更改-->
<!--也可以使用 let 来新建变量-->
let a = 1;
console.log(a);
<!--const 可以用于定义常量，注意不能进行更改-->
const Pi = 3.14;
console.log(Pi);
Pi = 3.141
> Uncaught TypeError: Assignment to constant variable.
at main.js:21
运算符
var x = 5;
console.log(x + 5);
<!--x 可以被重新赋值-->
// x = x + 5;
x += 5;
// x = x + 1;
x ++;
<!--同理也有自减符号-->
// x = x - 1;
x -= 1;
x --;
console.log(x);
<!--注意区分数字与字符串-->
x = "3" + "4"; // 结果为 34
x = "3" + 4 + 5; // 结果为 345，其等同于
// x = "3" + "4" + "5"
x = 3 + 4 + "5"; // 结果为 75
<!--判断符号-->
<!--== 带有自动转换，=== 则不能-->
console.log(123 == "123"); // "123" "123"，ture
console.log(123 === "123"); // 123 "123"，false
1 == ture // ture
1 === ture // false
控制结构
if (条件)，成立后执行方法。不成立，检查 else if (条件) 是否成立。 不成立最终执行 else 中的方法。
var name = "Simon":
var age = 20
if (name == "Simon" && age == 21) {
console.log{"Simon"};
} else if (name == "John") {
console.log("John");
} else {
console.log("Stranger");
}
循环
while 循环
while (条件)，成立后进入循环。
while (true) {
console.log("ture");
}
<!--会一直循环-->
do {} while () 先执行 do {} 中的内容，进行后进入 while (条件) 来判断是否继续循环。
var age = 20
var a = 19
do {
a ++;
console.log(a);
} while (age == a);
作用域
变量可以用 let 或者 var 新建，对于 var 而言是没有作用域的，即在所有地方都可以对 var 来进行访问。
如下面代码中：
if (true) {
var age = 20;
}
var a = 19;
do {
a++;
console.log(a);d
} while (age == a);
如果将 var age = 20; 改为 let age = 20;，则会出现在后面 do {} while () 语句中无法访问 age 的情况。
值得注意的是，const 同样受作用域制约。
for 循环
`for(初始化条件;条件;做什么){}’
如下代码：
for(let i = 0; i < 5; i++){
age++;
console.log(age) \\ 该命令后 执行 `i++`
}
判断
三元操作符
var name = "Daniel";
var age = 20;
var allowed = (age >= 18) ? "Yes" : "No"; \\ `:` 为二选一，`?` 为将二选一中满足条件的，赋值给 allowed
console.log(allowed);
switch
给 switch 传入几个 case 来做判断。
swicth(name) {
case 'Simon':
console.log("Simon");
break;
case 'John':
console.log("John");
break;
default:
console.log("Stranger");
}
对象
var obj = new Object();
var obj2 = {};
obj = {
name: "Simon",
age: '20',
email: "Simon@gamil.com",
contact: {
phone: "1234567"
Telegram: "@Simon"
}
}
console.log(obj.contact.phone);
// console.log(["contact"]["phone"]);
-
使用
obj.property的形式来提取出对应属性。 -
也可以用
["contact"]["phone"];达到相同的目的。 -
对应属性的值可以进行更改。
-
当添加新的属性，将自动添加对应的新属性以及值。
obj.contact.WeChat = "abcd"
数组
var a = new Array();
var b = [];
// 两者都可以用来新建数组
a[0] = "dog";
console.log(a);
// 可以用 a.length 访问其长度属性
console.log(a.length);
a[1] = "cat";
a[5] = "tiger";
console.log(a);
// 这时会打印 ["dog", "cat", empty * 3, "tiger"]
// 并且长度 length属性变为 6
console.log(a[2]);
// 当我们调用 empty 处位置值时，会提示未定义
// 当然我们也可以直接定义一个数组，保证不会出现隔空
b = ["dog", "cat", "tiger"];
console.log(b);
// 打印出数组 b 中的所有项
for (let i = 0; i < b.length; i++) {
console.log(b[i]);
}
// 也可以使用这种方法
for(let i in a) {
console.log(a[i]);
}
// 注意虽然 a 中有三个空项，但使用 for in 的方法不会打印空项
// dog
// cat
// tiger
// 相对的，如果使用普通的 let 方法，在数组中 empty 的位置会出现 undefined
for (let i = 0; i < b.length; i++) {
console.log(a[i]);
}
// dog
// cat
// undefined
a.forEach(function(value)) {
console.log(value);
});
// 在数组中最后添加项
b.push("sheep");
// 在数组中末尾删除项
b.pop();
// 倒叙数组
b.reverse();
// 删除第一个项
b.shift();
// 在第一个位置添加
b.unshift("lion");
关于数组方法，更多的可以访问:
函数
let a = 1;
// 定义函数
function add() {
a++;
}
consloe.log(a);
// 执行函数
add();
// 函数中传入值
function add(x) {
a += x // a = a + x;
}
add(4);
console.log(a);
// 较复杂的情况，求和函数
function add() {
let sum = 0;
// arguments 为 add() 函数中传入的参数
for (let i = 0, j = arguments.length; i < j; i++) {
sum += arguments[i];
}
return sum;
}
let sum = add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
console.log(sum);
闭包
function makeAdder(a) {
return function(b) {
return a + b;
};
}
var x = makeAdder(5);
var sum = x(6);
console.log(sum);
// 闭包即返回一个函数