一、输入和输出
1.1、弹框输入
var name = prompt("please your name:");1.2、输出
<body>
<div id="div1"></div>
<script>
var name = "abc";
console.log(name); // 控制台输出
window.alert(name); // 弹窗输出
document.write(name); // 写入HTML页面，如果在文档已完成加载后执行，整个HTML页面将被覆盖。
document.getElementById("div1").innerHTML = name; // 写入HTML标签
</script>
</body>二、变量
通过var声明变量，变量名有如下规则：
1、变量名可包含数字、字母、下划线和$符号
2、变量名不可以数字开头，建议使用字母开头
3、大小写敏感
4、保留字不可用作变量名如：
var num1, str1 = 'abc';tips：let和const
let声明的变量只在let命令所在的代码块{}内有效；
var a = 5;
console.log(a); // 5
{
let a = 2;
console.log(a); // 2
}
console.log(a); // 5const用于声明常量，声明时必须初始化，初始化后值不可更改：
const PI = 3.14;
PI = 3.14159; // 报错三、注释
单行注释：//
多行注释：/* */四、数据类型
4.1、原始类型
4.1.1、Number
- 定义方法：
var n1 = 123; # typeof(n1)为number
var n2 = new Number(123); # type(n2)为object- 八进制和16进制：以0开头表示8进制，以0x开头表示16进制。
- Infinity：无穷大，数字最大为64位，超过上限后为Infinity
tips：10/0不会报错，也是一个Infinity - NaN：非数字
Infinity + Infinity // Infinity
Infinity * Infinity // Infinity
Infinity - Infinity // NaN
Infinity / Infinity // NaN
isNaN(Infinity) // false- Number常用方法
Number('123') // 123，强制类型转换，将字符串转为数字
Number('123a') // NaN
parseInt('123.4abc5'); // 123，字符串以数字开头，提取开头的数字转为整型
parseInt('abc123.45'); // NaN
parseFloat('123.4abc5'); // 123.4
parseFloat('abc123.45'); // NaN
isNaN(Infinity); // false
Number.isInteger(123.4); // false
var a = 123.456;
a.toFixed(2); // 123.46，返回指定小数位数4.1.2、String
- 定义字符串：
var str1 = "abc";
var str2 = new String("def");tips：数字和字符串可以直接相加，结果为拼接字符串，如：123+‘abc’，结果为’123abc’
- 字符串常用属性和方法：
属性：
'abc'.length // 3，字符串长度方法：
String(null); // 'null'，强制类型转换
'abcdef'.charAt(2); // 'c'，返回指定下标的字符
'abc'.concat('def','g'); // 'abcdefg'，连接字符串
'abc'.startsWith('ab'); // true，判断字符串是否以指定字符串开头
'abc'.endsWith('bc'); // true，判断字符串是否以指定字符串结尾
'abcd'.indexOf('cd'); // 2,返回子字符串出现的位置，无则返回-1
'abcd'.includes('cd'); // true，判断字符串是否包含子串
'abcdxcd'.lastIndexOf('cd'); // 5，子串最后出现的位置
'ab'.repeat(3); // ababab，3次连接
'abcdefcd'.replace('cd','12'); // 'ab12efcd'，替换1次
'abcdefcd'.replaceAll('cd', '12'); // 'ab12ef12'，替换所有
'abcdef'.slice(2,-2); // 'cd'，提取子串，范围为[start, end)
'ab**cd*e'.split('*'); // ['ab', '', 'cd', 'e']，切片
'abcdef'.substr(2, 3); // 'cde'，提取子串，参数1为下标，参数2为提取长度
'abcdef'.substring(2, 4) // 'cd'，提取两个指定下标间的字符，不支持负数，范围[)
'AbCd'.toLowerCase(); // 'abcd'，转小写
'AbCd'.toUpperCase(); // 'ABCD'，转大写
' ab cd '.trim(); // 'ab cd'，去除两端空格
str1 = new String('ABC');
str1.valueOf(); // 返回字符对象原始值
str1.toString(); // 返回字符对象原始值4.1.3、Boolean
- ture/false
- 支持强制类型转换，如：Boolean(‘’)：false
4.1.4、Null
- 空：str1 = null;
4.1.5、Undefined
- 定义了变量，但未赋值就使用
var str1;
console.log(str1); // undefined4.2、引用类型
4.2.1、Array
- 数组定义：
var lst1 = ['a', 'b', 'c'];
var lst2 = new Array(['d', 'e', 'f']);
console.log(typeof(lst1), typeof(lst2)); // object object- 常用属性：
length：数组长度- 常用方法：
var lst1 = ['a', 'b', 'c'];
var lst2 = ['d', 'e', 'f'];
// 约定每一个示例之前都为lst1 lst2赋以上初值
var lst3 = lst1.concat(lst2); // ['a', 'b', 'c', 'd', 'e', 'f']，连接
var lst1.fill('mm'); // ['mm', 'mm', 'mm']，填充
lst1.includes('c'); // true，lst1中是否包含'c'
lst1.indexOf('c'); // 2，'c'出现的位置，无则返回-1
lst1.join('-'); // 'a-b-c'，数组转字符串，默认分隔符为','
lst1.lastIndexOf('c'); // 2，数组元素最后出现位置
lst1.pop() // 'c'，删除最后个元素并返回其值
lst1.push('d') // 4，在末尾添加元素，并返回新长度
lst1.reverse(); // ['c', 'b', 'a']，反转
lst1.shift(); // 'a'，删除第一个元素并返回其值
lst1.unshift(); // 4，在开头添加元素，并返回新长度
var str3 = lst1.slice(0, -1); // ['a', 'b']，取指定范围，返回给新数组，范围[)
lst1.splice(1, 1, 'd'); // ['b']，删除/添加元素
// 参数1：必填，删除/添加的的位置
// 参数2：可选，删除元素个数，未填时，从该位置删到结尾
// 参数3...n：可选，要添加的元素
lst1.splice(1, 0, 'mm', 'nn'); // []，lst1变为：['a', 'b', 'mm', 'nn', 'c']
var str1 = lst1.toString(); // 'a,b,c'，转字符串，逗号分隔，lst1不变4.2.2、Object
- 对象声明：
obj1 = {a:1,b:2};
obj2 = new Object({a:1,b:2});- 对象属性：
obj1 = {name: "zhangsan", age: 20};
obj1.name // "zhangsan"
obj1.age // 20
obj1['age'] // 20
obj1['age1'] // undefined- 对象方法：
var obj1 = {
name: "zhangsan",
age: 20,
func: function(){
return [this.name, this.age];
}
};
obj1.name // "zhangsan"
obj1.age // 20
obj1.func() // ['zhangsan', 20]- this关键字
- 在对象方法中：
this关键字指向它所在方法的对象，如上例，this在方法func()中，它指向func()方法所在的对象obj1。 - 单独使用时：
this指全局对象。如浏览器中，全局对象是[object Window]
<body>
<div id="div1"></div>
<script>
document.getElementById("div1").innerHTML = this;
</script>
</body>运行结果如下：
[object Window]- 函数中的this：
JS中，函数的所有者默认绑定this，所以在函数中this指全局对象：
<body>
<div id="div1"></div>
<script>
document.getElementById("div1").innerHTML = func1();
function func1() {
return this;
}
</script>
</body>结果如下：
[object Window]在严格模式下，函数是未绑定到 this，这时候this是undefined：
<body>
<div id="div1"></div>
<script>
"use strict";
document.getElementById("div1").innerHTML = func1();
function func1() {
return this;
}
</script>
</body>结果如下：
undefined- 事件中的this：
在HTML事件处理程序中，this指的是接收此事件的HTML元素：
<body>
<button id="btn1" οnclick="this.style.display='none'">点我我便消失</button>
</body>- 显示函数绑定：
apply和call允许切换函数执行的上下文环境（context），即this绑定的对象，可以将this引用到任何对象。
实例如下：
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // 返回 "John Doe"4.2.3、Date
- 创建对象
d = new Date();
// 当前日期时间
var d = new Date(2022, 6, 7, 12, 30, 50, 0);
// 创建时指定年月日时分秒毫秒
// 日时分秒毫秒均可以不指定。未指定时，日默认为1，其他默认为0
var d = new Date(2022);
// 只带1个参数时，表示毫秒
// Thu Jan 01 1970 08:00:02 GMT+0800 (中国标准时间)
var d = new Date("July 13, 2022 12:13:30");
// Wed Jul 13 2022 12:13:30 GMT+0800 (中国标准时间)
var d = new Date("2022-07-06");
// Wed Jul 06 2022 08:00:00 GMT+0800 (中国标准时间)
var d = new Date("2022-07-06T12:01:02");
// 日期时间通过'T'分隔
// Wed Jul 06 2022 12:01:02 GMT+0800 (中国标准时间)
var d = new Date("07/19/2022");
// Tue Jul 19 2022 00:00:00 GMT+0800 (中国标准时间)- 方法
var d = new Date("2022-07-06T12:01:02");
// Wed Jul 06 2022 12:01:02 GMT+0800 (中国标准时间)
d.getFullYear(); // 2022，年
d.getMonth(); // 6，0-11，6表示7月
d.getDate(); // 6，获取日期
d.getDay(); // 3，获取星期，0-6，星期天为0
d.getHours(); // 12，时
d.getMinutes(); // 1，分
d.getSeconds(); // 2，秒
d.getMilliseconds();// 0，毫秒
d.getTime(); // 1657080062000，时间戳，单位为毫秒
// 除Day外，其他都可以用同名的set进行设置。如：setDate(20)4.2.4、其他
Fuction、Re’gExp等。
五、运算符
5.1、算术运算符
+ - * / % ++ --5.2、赋值运算符
= += -= *= /= %=5.3、比较运算符
== === != !== > < >= <=tips：绝对等于和等于区别如下：
10 == '10'; // true，值相等则为真
10 === '10'; // falae，值和类型都需要相等
10 != '10'; // false
10 !== '10'; // true5.4、逻辑运算符
&& || !
与 或 非5.5、条件运算符
var num1 = 5
var str1 = (num1 > 5)?"big":"small"; // "small"六、逻辑控制
6.1、if
var a = 10, b = 20;
if (a > b){
console.log('a大于b');
} else if (a < b){
console.log('a小于b');
} else {
console.log('a等于b');
}
// 'a小于b'6.2、switch
var n = 2
switch(n)
{
case 1:
console.log('n为1');
break;
case 2:
console.log('n为2');
break;
default:
console.log('n为其他');
}
// 'n为2'tips：如果没有break，则之后的语句都会执行：
var n = 2
switch(n)
{
case 1:
console.log('n为1');
case 2:
console.log('n为2');
default:
console.log('n为其他');
}
// 'n为2'
// 'n为其他'6.3、while
while:
var i = 1;
while (i <= 5){
console.log("index: %d", i);
i++;
}
// index: 1
// index: 2
// index: 3
// index: 4
// index: 5do while:
var i = 8;
do {
console.log("index: %d", i);
i++;
}
while (i <= 5);
// index: 86.4、for
for (var i = 1; i <= 5; i++) {
console.log("index: %d", i);
}
// index: 1
// index: 2
// index: 3
// index: 4
// index: 56.5、break&continue
break跳出循环；continue终端循环的当前迭代，继续执行下一个迭代。
七、函数
7.1、函数定义
函数的一般格式如下：
function add(a, b) {
return a + b;
}
var sum = add(3, 4);
console.log(sum);
// 12js对函数的形参和实参无限制，当形参个数大于实参个数时，多余的形参为undefined；当形参个数小于实参个数时，多余的实参被忽略：
function myFunc(a, b, c) {
console.log(a, b, c);
}
// 形参个数大于实参个数
myFunc(1, 2); // 1 2 undefined
// 形参个数小于实参个数
myFunc(1, 2, 3, 4); // 1 2 3函数还可以通过如下方式定义：
函数表达式：
var myFunc = function (a, b) {
console.log(a, b);
};
myFunc(1, 2); // 1 2Function()构造器：
var myFunc = new Function("a", "b", "console.log(a + b);");
myFunc(1, 2); // 37.2、函数提升
将变量、函数的声明提升到当前作用域顶端：
变量提升：
console.log(a);
var a = 2;
// undefined
/*
相当于:
var a;
console.log(a);
a = 2;
*/函数提升：
myFunc();
function myFunc() {
console.log("test.")
}
// test.
// 将函数的声明提升到顶端tips：函数表达式不会被提升
myFunc();
myFunc = function () {
console.log("abc")
};
// 报错：Uncaught ReferenceError: myFunc is not defined7.3、函数自调用
如下：
(function myFunc(a, b) {
console.log(a*b);
})(2, 3);7.3、函数的属性和方法
函数也是对象，有自己的属性和方法：
function myFunction(a, b) {
return argument.length; // 接收参数的个数
}
console.log(myFunction.toString()); // 以字符串返回函数
console.log(myFunction(1,2,3));7.4、箭头函数
- 格式：
const 函数名 = (参数1, 参数2, ...) {函数体};- 示例：
const func = (x, y) => {
var sum = x + y;
var sub = x - y;
return [sum, sub];
}
console.log(func(3, 4)); // [7, -1]只有一个参数时，可省略()；只有一条语句时，可省略return和{}：
const func01 = x => x * 5;
console.log(func01(5)); // 257.5、void
计算一个表达式，但不返回值，格式如下：
void func()
javascript:void func()
// 或
void(func())
javascript:void(func())如：
<a href="javascript:void(0)">单击此处什么也不会发生</a>八、异常处理
8.1、try
语法如下：
try {
... // 抛出异常
} catch(err) {
... // 捕获和处理异常
} finally {
... // 接数处理，不论是否产生异常都会执行该部分
}示例：
try {
console.log(str1);
} catch(err) {
console.log(err.message);
}
// str1 is not defined8.2、throw
创建自定义错误。
var num = 1000;
try {
if(num < 0) throw "值为负数";
if(num > 100) throw "超过100";
} catch(e) {
console.log(e)
}
// 超过1000九、JSON
- JSON->Object
js1 = '{"name": "abc", "age": 20}';
obj1 = JSON.parse(js1); // {name: "abc", age: 20}- Object->JSON
obj1 = {name: "abc", age: 20};
js1 = JSON.stringify(obj1); // '{"name":"abc","age":20}十、类
10.1、创建类
class ClassName {
constructor() { ... } // 构造函数
method_1() { ... }
method_2() { ... }
method_3() { ... }
}示例如下：
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
eat (food) {
console.log(this.name + " eat " + food);
}
run () {
console.log("I'm running!");
}
static say() { // 静态方法，类可以调用，实例化对象不可以
console.log("say hello");
}
}
p1 = new Person("zhangsan", 18);
p1.eat("apple"); // zhangsan eat apple
p1.run(); // I'm running!
p1.say(); // 报错：p1.say is not a function
Person.say() // say hello10.2、类继承
接上例：
class Student extends Person {
constructor(name, age, school) {
super(name, age);
this.school = school;
}
mySchool() {
console.log("My school is " + this.school);
}
}
p2 = new Student("lisi", 17, "xxx");
p2.mySchool(); // My name is lisi,I'm 17 years old.My school is xxx十一、正则表达式
11.1、语法
var patt = /pattern/modifiers;
var patt = new RegExp(pattern, modifiers);11.2、修饰符
i 大小写不敏感
g 全局匹配，查找所有匹配而非找到第一个即停止
m 多行匹配11.3、方括号
用户查找某个范围的字符
[abc] // 查找方括号间的任何字符
[^abc] // 不再方括号间的任何字符
[0-9] // 数字
[a-z] // 小写字母
[A-Z] // 大写字母
[A-z] // 大小写字母11.4、元字符
. // 匹配除换行和行结束符外的所有字符
\w // 数字、字母、下划线
\W // 非单词字符
\d // 数字
\D // 非数字
\s // 空白字符
\S // 非空白字符
\b // 单词边界
\B // 非单词边界
\0 // NULL字符
\n // 换行符
\f // 换页符
\r // 回车符
\t // 制表符11.5、量词
n+ // 至少1个n
n* // 0个或多个n
n? // 0个或1个n
n{X} // X个n
n{X,} // 至少X个n
n{X,Y} // 至少X个，至多Y个n11.6、RegExp对象方法
exec() // 检索字符串中指定的值。返回找到的值，并确定其位置。
test() // 检索字符串中指定的值。返回true或false。
toString() // 返回正则表达式的字符串。11.7、String 对象方法
search() // 检索与正则表达式相匹配的值。找到返回其下标，未找到返回-1
match() // 找到一个或多个正则表达式的匹配。返回数组，未找到返回null
replace() // 替换与正则表达式匹配的子串。
split() // 把字符串分割为字符串数组。11.8、示例
var str1 = "Hello hello"
var patt1 = /H(.*?)o/ig;
var patt2 = /H.*?x/ig;
var result1 = patt1.exec(str1); // Hello,ell
var result2 = patt2.exec(str1); // null
var result3 = patt1.test(str1); // true
var result4 = patt2.test(str1); // falsevar str1 = "My name is Gaohui";
document.write(str1.search(/g.*?i/i)); // 11
document.write(str1.search(/g.*?x/i)); // -1
var str2 = "abcadcaec";
document.write(str2.match(/a.c/ig)); // abc,adc,aec
var str3 = "I'm a good good man."
newStr3 = str3.replace(/g.*?d/g, "nice")
document.write(str3); // I'm a good good man.
document.write(newStr3); // I'm a nice nice man.
var str4 = 'ab**cd*e';
var lst = str4.split(/\*+/);
console.log(lst); // [ab, cd, e]
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
