简介
一种脚本语言，可用于HTML和Web，更可广泛用于服务器等领域。
组成：
ECMAScript 核心语法
Web APIs DOM（文档对象模型）+BOM
书写位置
- 内部JS：
<script>写在<body>最后<body> <!-- body content here --> <script> alert("Hello, JS!") </script> </body> - 外部JS：单独引入
.js文件<body> <!-- body content here --> <script src="./main.js"></script> </body> - 内联JS：标签内部
<button onclick="alert('Hello World!')">按钮</button>
输入/输出
document.write("写入文档");
console.log("打印日志");
alert("弹出提示框");
let a = prompt("输入框", "默认值");
document.write("<p>你输入的内容是：" + a + "</p>");
let age = 20;
document.write(`<p>我的年龄是${age}岁</p>`); //模板字符串
let，var区别
- 作用域：
- var：var 声明的变量是函数作用域的，即在声明它的函数内部有效。
- let：let 声明的变量是块级作用域的，即在声明它的块（如 if 语句块、for 循环块等）内有效。
- 变量提升：
- var：var 声明的变量会发生变量提升，即在变量声明之前就可以访问到变量（但值为 undefined）。
- let：let 声明的变量不会发生变量提升，在声明之前访问会报错。
var可重复声明
常量 const
必须赋值，不能修改
数组
let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
- 添加
- push(el1, el2)：添加元素到尾部，返回新的长度
- unshift(el)：添加到头部
- 删除
- pop()：删除最后一个元素，返回该元素
- shift()：删除第一个元素
- splice(start, count=1, ..., (el1)...)：指定开始位置，移除个数，替换元素
let arr = [1, 2 ,'Alex', 'Bob', 'Charlie']
console.log(arr.push('Dave', 'Eve')) // 7
arr.unshift(0)
// [0, 1, 2, 'Alex', 'Bob', 'Charlie', 'Dave', 'Eve']
console.log(arr.shift()) // remove the first element
arr.splice(2, 1, 'Jane') // replace 'Alex' with 'Jane'
console.log(arr) // [0, 1, 'Jane', 'Bob', 'Charlie', 'Dave', 'Eve']
map(func)：映射，返回新数组join：连结成字符串
数据类型
弱数据类型：在程序运行时才确定
- 基本数据类型： 存储的值本身
- Number
- String
.trim()去掉前后空格 - Boolean
- null
- undefined
- Symbol
- 引用数据类型： 可变
- Object
- Array
- Function
- Date
- RegExp 正则表达式
let person = { // Object
name: "John",
age: 30
};
let colors = ["red", "green", "blue"]; // Array
function sayHello() { // Function
console.log("Hello!");
}
let today = new Date(); // Date
let regex = /hello/i; // RegExp
类型判断
typeof 运算符/函数
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof null); // object
关于null与undefined
null是已赋值空类型
console.log(null+1) // 1
console.log(undefined+1) // NaN
console.log(null+null) // 0
类型转换
- 隐式转换: 运算，拼接
- 显示转换：手动
let str = "123"
let ans1 = Number(str) + 1 // 124
let ans2 = +str + 1 // 124 隐式
let age = +prompt("请输入你的年龄："); // number
- parseInt()：只保留整数
- parseFloat()：保留小数
console.log(parseInt("89.65px")) // 89
console.log(parseFloat("12.98px")) // 12.98
比较运算符
==值相等===值、类型都相等!==不全等
console.log(2 === 2) // true
console.log(2 == "2") // true
console.log(2 === "2") // false
console.log(null == undefined) // true
console.log(null === undefined) // false
console.log(null == 0) // false
console.log(null === 0) // false
console.log(undefined == 0) // false
console.log(undefined === 0) // false
console.log(NaN == NaN) // false
console.log(NaN === NaN) // false
console.log(0 == false) // true
console.log(0 === false) // false
console.log("" == false) // true
console.log("" === false) // false
console.log(1 == true) // true
console.log(1 === true) // false
console.log(1 == "true") // true
console.log(1 === "true") // false
console.log(0 == "") // true
console.log(0 === "") // false
建议用 === 判断
NaN不等于任何值
三元运算符
let num1 = 10, num2 = 20;
num1>num2 ? console.log("${num1}大于${num2}") : console.log("${num1}不大于${num2}"); // 10不大于20
let a = prompt("Enter a:");
document.write( a<10 ? 0+a : a) //if a is less than 10, add 0 before it
函数
声明：function f(param = default) { return val }
function addTwo(a, b) {
return a + b;
}
document.write(addTwo(2, 3)); // Output: 5
回调函数：作为参数被传递的函数
function call() {
console.log('call')
}
setInterval(call, 1000)
setTimeout(() => {
alert('Hello');
}, 2000); // 仅一次性执行
匿名函数
let fn = function(param) { body }
立即执行
(function(){ })() 或 (function(){ }())
(function(x, y) { console.log(x + y) }(2, 7)); // Output: 9
对象
无序的数据集合
- 属性：属性名+值 成对出现 用
,分隔 - 方法：函数
let stu = {
u_name: "John",
age: 25,
greet: function() {
console.log("Hello, my name is " + this.u_name + " and I am " + this.age + " years old.");
}
};
stu.greet(); // Output: Hello, my name is John and I am 25 years old.
stu.address = "123 Main St";
delete stu.age;
console.log(stu); // Output: {name: "John", address: "123 Main St"}
- 增加新属性/修改属性：
obj.attr = val - 删除：
delete obj.attr
查询可用 obj['attr'] 属性名为字符串
let obj = {
'o-name': 'Object 1',
}
console.log(obj['o-name']); // Output: Object 1
遍历
for (let key in obj) 语法
for (let key in stu) { // Iterate over the object's properties
console.log(key + ": " + stu[key]);
}
// Output:
// name: John
// age: 25
// address: 123 Main St
日期对象
获取 let date = new Date()
let date = new Date('2021-01-01 12:00:00 AM UTC +00:00');
console.log(date.toLocaleDateString()); // "1/1/2021"
时间戳：毫秒，since 1970-01-01
