【Javascript】ES6基础总结
汪臻
一、输入和输出
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); // 5
const用于声明常量，声明时必须初始化，初始化后值不可更改：
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); // undefined
4.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'; // true
5.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: 5
do while:
var i = 8;
do {
console.log("index: %d", i);
i++;
}
while (i <= 5);
// index: 8
6.4、for
for (var i = 1; i <= 5; i++) {
console.log("index: %d", i);
}
// index: 1
// index: 2
// index: 3
// index: 4
// index: 5
6.5、break&continue
break跳出循环；continue终端循环的当前迭代，继续执行下一个迭代。
七、函数
7.1、函数定义
函数的一般格式如下：
function add(a, b) {
return a + b;
}
var sum = add(3, 4);
console.log(sum);
// 12
js对函数的形参和实参无限制，当形参个数大于实参个数时，多余的形参为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 2
Function()构造器：
var myFunc = new Function("a", "b", "console.log(a + b);");
myFunc(1, 2); // 3
7.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 defined
7.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)); // 25
7.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 defined
8.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 hello
10.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个n
11.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); // false
var 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]
类似资料：