来华清远见培训前端一个多月了,通过培训逐步掌握了HTML+CSS,JavaScript基础知识,在学习过程中遇见问题老师都会很有耐心的帮助解决问题。对学习JavaScript基础的过程中一些知识点进行简单的总结。
1.JavaScript(js)三大组成部分
1.1.ECMAScript:
JavaScript的核心,规定了js脚本语言的组成部分:
语法-----类型 ----语句 ----关键字------保留字------操作符-------对象
es5 es6+
1.2.DOM:
Document Object Model文档对象模型 进行节点操作 节点的增删改,以及样式。
1.3.BOM:
Browser Object Model浏览器对象模型 ,进行后退 打开新页面
2.js的引入
js的引入有三种方式分别是行内,嵌入式,外部.js文件引入
1.行内:js代码写在开始标签里面,
例如:<div οnclick="alert('我是弹窗');">普通的按钮</div>
onclick:鼠标点击div弹出弹窗;
不推荐,js代码不能高效的复用
2.嵌入式 :js代码写在</body>标签上面,在<script></script>标签里面书写js代码。
因为HTML页面加载顺序是从上往下执行,为了有效的避免js代码加载时间过长导致屏幕出现白屏。所以写在</body>标签上面等样式与html结构加载完了在执行。
3.外部引入,<script src="js文件地址"></script>
该标签内不能编写js代码,编写了也不会生效。
js注释代码
shift + alt + a : / / 多行注释
ctal + / : //单行注释
js输出语句
1.弹框输出
- alert('警告框'); 页面弹出警告框。
- confirm("确认框"); 返回值确认为true,取消为false
- prompt("输入框");输入内容点击确认返回输入的数据,点击取消返回null
- console.log("打印"+"语句");控制台输出,+字符串拼接
- console.warn("警告语句");
- console.erro("报错输出")报错当前js代码将不会执行;
- console.table({ name: "张三", age: 18 });表格打印
- console.clear();清除控制台
2.输出到文档
a. 输出字符串到页面
1.document.write("你好,世界");
b.输出包含html标签的字符串到页面
带有HTML标签的js会当作html来执行,只会输出标签里面的文字
2.document.write("<div>我是div标签</div>");
c.输出包含html标签的内容添加到指定元素;
例如:
< a href="">我是1< /a>
//获取页面元素
var doc =document.querySelector("a");
doc.innerHTML ="我是a标签内容";
js语法规范
- 可以在标识符前后加空格,不能再标识符中间加空格
- 分号表示一个语句的结束,应该加分号,不加一般也不会报错 按照规范加上
- 严格区分大小写
var a =100;
console.log(A); // A is not defined A没有定义
4.命名规则
不能以数字开头;应该英文或者$ 或者_开头;多个单词下划线连接或者使用驼峰法命名;变量名尽量见名知意;中文也可以做为变量名,但是不建议;不能使用关键字或保留字
var关键字
var关键字:使用var声明变量;
var a = "声明变量";
变量的命名规则:不能以数字开头 大小写英文 $ _ 多个单词下划线连接 或者 驼峰法,见名知意,中文可以变量 不建议,不能使用关键字 或 保留字
变量: 保存值以供之后使用(任何类型的值);理解为装东西的盒子。
var声明变量的初始化;
var a = "声明变量";//右边的值赋值给变量a
// = 在这里是进行赋值操作
//右边赋值给左边
多个变量同时声明用逗号分割,需要分别给不同的变量赋值,如果不赋初始值就为undefined
有var可以先使用后声明;否则不可以先使用。
console.log(a);
var a = "声明变量";
2.'use strict' 严格模式下,无var声明的变量会报错
3.var声明的变量无法通过delete删除,没有var声明的变量会被delete删除;如果没有var声明的变量会提升为window对象属性,所以能被删除。
delete 删除对象的属性
var a = 100; //存在window中的变量
b = 200; //提升到全局的属性 认为是window的属性
delete a;
delete b; //window属性
【有var声明的变量 和 无var声明的变量 的区别 】(面试题)
1. 有var 声明的变量 可以先使用,后定义 值为undefined
无var 声明的变量 必须先声明,后使用 代码执行到定义行才能获取变量,提升到全局作用域中
全局预编译:
1.打开窗口 创建全局window对象
2.提升var 声明变量 变量值为undefined
3.function声明的函数,提升funciton函数,值为函数体
4.执行非var 非function的代码
2.'use strict' 严格模式下,无var声明的变量会报错
3.var声明的变量无法通过delete删除 没有var声明的变量会被delete删除
数据类型
基本数据类型-------保存在栈
String(字符串) :单引号 双引号 反引号
Number(数字):数字
Boolean(布尔类型):true(真),false(假);
undefined:声明变量但是不赋初始值,系统给默认undefined,或者自己赋值undefined; 开辟了空间
null(空):空值,需要手动赋值null 没有开辟内存空间
引用数据类型--------保存在堆中
object:对象{};对象放在花括号里面obj{属性:属性值;}通过对象属性点语法获取属性值。(对象名.属性名)
function:函数;用function定义函数 函数名 () {函数体} function ftn() {};调用函数 ftn();
array:数组[];var arr = [1,23,3,44,5,[123,314,12,3]];数组中可以是任何数据,数组名.length;获取数组长度。中括号取下标 索引值 下标从0开始 到length-1结束
typeof数据类型检测
typeof:检测变量的数据类型
值:undefined(变量未定义);boolean(布尔值);string(字符串);number(数字);object(对象或者null);function(函数);
NaN:非数字;
undefined和null的区别:
1.定义:
undefined :声明了变量但是没有赋值
null : 空指针 手动定义null 考虑到变量初始时不知道赋值为什么 手动赋值为null
2.typeof
typeof undefined; 值为undefined
typeof null; 值为object
3.相等性判断
== 判断值的相等性 结果字面量相等返回true 不相等返回false
=== 字面量与数据类型都需要相等,判断值相等 , 判断类型是否相等
null == undefined ; true
null === undefined; false
布尔值 boolean
值: true fasle
调用转型函数 Boolean() : 将其他类型值转换为boolean值
总结:
false: 0 , NaN , 空字符串"", false , undefined 和 null
true: 任何非空字符串 任何非零数字 true 任何引用数据类型数据
代表空,否定的值会被转换为false,如“,0,NaN,undefined
其余都转为true
1.数字: 除了 0 , NaN 为false 其余所有数字均为true
var num = 100;
var num1 = 0.23;
var num2 = -10;
var num3 = NaN;
var num4 = 0;
var num5 = -0;
var num6 = +0;
console.log(Boolean(num)); //true
console.log(Boolean(num1)); //true
console.log(Boolean(num2)); //true
console.log(Boolean(num3)); //false
console.log(Boolean(num4)); //false
console.log(Boolean(num5)); //false
console.log(Boolean(num6)); //fasle
2.字符串: 除了空字符串""为false 其余字符串为true
var str = "";
var str1 = " ";
var str2 = "123";
var str3 = "{num: 123}";
console.log(Boolean(str)); //fasle
console.log(Boolean(str1)); //true
console.log(Boolean(str2)); //true
console.log(Boolean(str3)); //true
3.boolean : 直接转为自己的字面量
var bool1 = true;
var bool2 = false;
console.log(Boolean(bool1));//true
console.log(Boolean(bool2));//false
4.undefined 和 null : 转换为false
var un;
var nul1 = null;
console.log(Boolean(un)); //false
console.log(Boolean(nul1)); //false
5.引用数据类型 object: 所有引用数据类型全部转换为true
var obj = {};
var obj1 = {
name: "ccc",
};
var arr = [];
var arr1 = [1];
var arr2 = [1, 2, 3];
var arr3 = ["string", "boolean"];
function fn() {}
console.log(Boolean(obj));//true
console.log(Boolean(obj1));//true
console.log(Boolean(arr));//true
console.log(Boolean(arr1));//true
console.log(Boolean(arr2));//true
console.log(Boolean(arr3));//true
console.log(Boolean(fn));//true
Number数字型
小数计算精度问题
console.log(0.1 + 0.2); //0.30000000000000004 精度17位
console.log(0.1 + 0.2 == 0.3); //false
解决方法:
toFixed();保留小数。
var result = (0.1 + 0.2).toFixed(1);
console.log(result == 0.3);
console.log(typeof (0.1 + 0.2).toFixed(1));
数学公式:
var num = 3.1415926;
var num1 = 3.6;
var num2 = 3.9;
console.log(Math.floor(num1)); //1,向下取整 3
console.log(Math.ceil(num)); //2,向上取整 4
console.log(Math.round(num)); //3
console.log(Math.round(num1)); //4 四舍五入
console.log(Math.random()); //3,随机数 (0-1) 21 - 95
var caipiao1 = Math.random()31 + 1 //1 - 32
console.log(Math.floor(caipiao1));
var c2 = Math.random()74 + 21// 0-74 21 - 95 (最大值-最小值) + 最小值
console.log(Math.pow(2,3)) //8 2的三次方 幂
console.log(Math.max(1,5,6,8,9,3)); //最大值
console.log(Math.min(1, -20, 10, 4)); //最小值
isFinite():判断值是否在数值范围内,在范围内返回true,不在返回false
判断范围-Number.MAX_VALUE 到 Number.MAX_VALUE之间
// NaN 非数值 数值中的一种类型 意义为非数值
// 1.任何涉及 NaN 的操作(例如 NaN/10)都会返回 NaN
// 2.NaN 与任何值都不相等,包括 NaN 本身。
// isNaN() 判断值是否为NaN 为NaN,结果返回true 除此之外为false
var num = 0;
var num1 = 100;
var num2 = -100;
console.log(0 / 0); //NaN
console.log(num1 / 0); //Infinity 无限
console.log(num2 / 0); //-Infinity
console.log(isNaN(0 / 0)); //true
console.log(isNaN(num1 / 0)); //false
console.log(isNaN(num1)); //false
console.log(typeof 1 / 1); //NaN
console.log('string' / 1); //NaN
console.log(NaN == NaN); //false
console.log(NaN + 1); //NaN
console.log(NaN - 1); //NaN
console.log(NaN 10); //NaN
alert(isNaN(NaN)); //true
alert(isNaN(10)); //false( 10 是一个数值)
alert(isNaN("10")); //false(可以被转换成数值 10)
alert(isNaN("blue")); //true(不能转换成数值)
alert(isNaN("100abc")); //true(不能转换成数值)
alert(isNaN(true)); //false(可以被转换数值 1)
转换数字类型:
+字符串拼接。减法将数字字符串转换为数字做减法操作,如不是数字字符串返回NaN;乘法将数字字符串转换为数字做乘法操作,如不是数字字符串返回NaN;除法将数字字符串转换为数字做除法操作,如不是数字字符串返回NaN;
Number: 直接转为字面量
Boolean true为1 false为0
String 空字符串 空格 为0 其余除了纯数字都为NaN
object function arr: 引用数据类型 除了空数组为0 以及数组长度为1 且 值转为为数字 结果为数组的值 其余为NaN
对象 : 先调用valueOf()方法获取到数据的原始值 若结果是NaN 则继续调用toString()方法 接着转换Number()
parseInt()转换规则: 将其他类型转换为整数;忽略前导空格 后导空格;纯数字直接转为数字;非数字开头字符串转为NaN 数字开头的字符串保留数字 直到非数字之前;undefined 和 null 均为NaN;转换16进制为十进制
parseFloat()转换规则: 将其他类型数据 转换为小数(浮点数); 从头开始解析 碰到第一个小数点保留 第二个小数点就是无效Infinity -Infinity 转换为Infinity -Infinity
String字符串方法
定义字符串:单引号 双引号 反引号 (引号必须成对存在) ${变量名}
- 字面量字符串
\n:换行 \t:制表符
\b:空格 \r:回车符
2.字符串被创建值不能被改变,只能销毁之前的然后再用另一个包含新值的字符串填充该变量.
3.获取字符串长度length; 字符串名.length;
4.加号做字符串拼接操作,
5.toString()转换规则:将其他数据类型转换为字符串
charAt() 方法可返回指定位置的字符。
第一个字符位置为 0, 第二个字符位置为 1,返回最后一个charAt(.length-1) 以此类推.
number类型
var num = 100;
var num1 = 10.12;
var num2 = NaN;
var num3 = Infinity;
var num4 = -Infinity;
var num5 = -0;
var num6 = +0;
console.log(typeof num.toString()); //'100'
console.log(typeof num1.toString()); //'10.12'
console.log(typeof num2.toString()); //'NaN'
console.log(typeof num3.toString()); //'Infinity'
console.log(typeof num4.toString()); //'-Infinity'
console.log(typeof num5.toString()); //0
console.log(typeof num6.toString()); //0
Boolean类型转换
var bool = true;
var bool1 = false;
console.log(bool.toString()); //true
console.log(bool1.toString()); //false
undefiend null : 没有toString()方法
引用数据类型
var obj = {};
var obj1 = {name: '123'};
var arr = [];
var arr1 = [1,2,3];
var arr2 = ['12',null,undefined,123,{}]
function fn() {
var a = 100;
}
console.log(obj.toString()); //[[object Object]]
console.log(obj1.toString()); // [object Object]
console.log(arr.toString()); // ''
console.log(arr1.toString()); // 1,2,3
console.log(arr2.toString()); // 12,,,123,[object Object]
console.log(fn.toString());
6.String() : 如果数据有toString()方法 ;数据就调用toString() , 没有toString() 调用String();
7.indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置;
字符串名.indexOf(searchvalue,fromindex)
searchvalue;必需。规定需检索的字符串值。
fromindex:可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。
如果查找不到检索的字符串将返回-1.
8.substring() 方法用于提取字符串中介于两个指定下标之间的字符,语法:
字符串名.substring(start,stop);
如果参数 start 与 stop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)
start:必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。
stop:可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。
不接受负的参数。
slice(start,end)接受负数(从字符串尾部-1开始算起,start与end的位置不能自动交换,字符串只能从左往右进行截取) start: 包含start 不包含end 左闭右开 [ ) end: 省略 截取到最后一个元素 不交换位置支持负数start 等于 end ,空字符串。
str.substr(start,length) : start: 开始的位置 为负数 ,从后往前数 -1开始数 length: 截取字符串的长度 省略值 截取到最后一个字符串
9.trim();从字符串中移除前导空格、尾随空格和行终止符;
10.将所有字母转为大写字母 str.toUpperCase()
11.将所有字母转为小写字母 str.toLowerCase()
12.str.split : 分割字符串 通过小括号中的 标识分割 结果是数组
创建对象
对象名{
属性:属性值,
属性:属性值
}
多个属性用英文逗号隔开
原始表达式
原始表达式不可再分割,是最小单位的表达式;包含直接量、关键字(保留字)和变量名;
数组初始化表达式:
数组直接量;由([])和逗号(英文状态 ,)分隔开的列表构成,数组的元素是逗号分隔开的表达式的值“数组初始化表达式”中的“元素”也可以是“数组初始化表达式”,即多维数组;
对象初始化表达式:
对象直接量,由{}和其内用英文逗号分割,对象的属性是逗号分隔开的表达式的值; 属性包括属性名和属性值,属性名和属性值之间用冒号隔开;“对象初始化表达式”中的“元素”也可以是“对象初始化表达式”,可以任意层级嵌套。
函数定义表达式
表达式的值是这个新定义的函数;
函数调用:函数名();或者在函数体外面用()包裹函数体,表示函数直接执行。
属性访问表达式:点(.)或者([])两种访问方式
算术表达式:加减乘除取余,+-/%;
数字相加 或 字符串连接;false+true
+ : 将其他数据类型转换为Number进行计算 除了和字符串相加 拼接 引用数据类型 valueOf() 没有转为数字 接着调用toString()
减法操作符 -: 运算结果全都是number类型 valueOf() toString() Number()
乘性操作符: 乘法、除法 和 求模 结果均为Number类型
赋值操作符=:
右侧的值赋给左侧的变量
复合赋值操作 等于号(=)前面再添加乘性操作符、加性操作符
一元运算符
只能操作一个值的操作符叫做一元操作符 不是数字Number()转为数字
1.递增++ 运算结果是Number类型
2.递减-- 运算结果是Number类型
前置递增操作符 ++XXX --XXX 在运算之前加1
后置递增操作符 XXX++ XXX-- 在运算之后加1
var a = 100;
var b = 200;
console.log(a++); //101 a: 100 ; a=101
console.log(a--); //99 a:101 ; a=100
console.log(b++); //201 b:200 ; b=201
console.log(a + b); //300 301
逻辑非 ! : 将其他类型转为布尔值Boolean(),取反
逻辑与: 逻辑与操作符由两个和号(&&)表示
表达式1 && 表达式2;
表达式1转为布尔值为真 那么结果为表达式2
表达式1转为布尔值结果为假 那么结果为表达式1
全真为真 一假为假
逻辑或: || 逻辑或操作符由两个(||)表示
表达式1 || 表达式2
表达式1为真 , 结果为表达式1
表达式1为假 , 结果为表达式2
一真为真 全假为假
比较运算符: 小于(<) 、大于(>) 、小于等于(<=)和 大于等于(>=)
相等性判断: ==判断值是否相等(隐式转换) ===判断值相等 类型相等
!= 判断不相等 判断值 !== 判断值和类型都不相等
var a = 10;
var b = 10;
console.log(a != b); //false
console.log( 10 != '10'); // false
console.log( 10 !== '10'); // true
三元运算符
条件操作符(三目运算符) 判断条件表达式(true?false) ? (如果为true执行) '1' : (为fasle执行) '2'
var a = 100;
var b = 200;
var c = a || b ? "10" : "20"; // '10'
var d = b ? "10" : "20" || a; // '10'
var c1 = a && b ? "10" : "20"; // '10'
var d1 = b ? "10" : "20" && a; // '10'
逗号运算符
逗号运算符,先执行左侧的操作,在右侧的操作,最后返回右侧的数值。
多个变量声明
var a=1,b=2,c=3,d=4;
等价于:
var a =1;
var b =2;
var c =3;
var d =4;
逗号运算符 返回是最后一个表达式
var num = (1, true, "hello", "66666");
console.log(num);//66666
var res = (
function () {
return 121212
},
function () {
return "hello"
}
)()
console.log(res);//hello
eval操作符
不加引号 将eval中的计算结果或表达式返回
console.log(eval(1));
console.log(eval(1 + 2));
console.log(10 10 + 5);
加引号 执行eavl中的代码块
console.log(eval("1"));//1
console.log("1+344");//1+344
console.log("1010+5");//1010+5
var res = eval("var num ='hello';console.log(num)");//hello
var res1 = eval(function fn() {});
var res2 = eval("function fn(){console.log(111); };fn()");//111
if判断
基本语法:if(表达式){
//代码块
//表达式为true才会执行的语句
}
if (!undefined) {
console.log("表达式为真会执行");
}
if (5 > 3) {
console.log("5>3");
}
else
if(表达式1){
//表达式1为true执行的语句
}else{
//else是跟在if或者else if后面的
//else不需要写表达式
//表达式1为fasle执行的语句
}
var num = 12;
if (num > 10) {
console.log("num > 10");
} else {
console.log("num <= 10");
}
if else if
if (表达式1) {
//表达式1为true执行的语句
} else if (表达式2) {
//表达式2为true执行的语句
} else if (表达式3) {
//表达式3为true执行的语句
} else {
//上面表示式都为false执行的语句
}
var myname = "伍斌1";
if (myname == "张帆") {
console.log("我的名字是" + myname);
} else if (myname == "黄垚") {
console.log("我的名字是" + myname);
} else if (myname == "伍斌") {
console.log("我的名字是" + myname);
} else {
console.log("我的名字是111" + myname);
}
switch语句
switch语法:
switch(表达式){
case 1:
//表达式 == 1 为true才会执行代码块
break; //终止本次循环
case 2:
//表达式 == 2 为true才会执行代码块
break; //终止本次循环
default:
//上面的表达式都不成立执行的语句
}
var date = new Date("2022-5-10").getDay();
switch (date) {
case 1:
console.log("今天是星期1");
case 2:
console.log("今天是星期2");
break; //终止本次循环
case 3:
console.log("今天是星期3");
break;
case 4:
console.log("今天是星期4");
break;
case 5:
console.log("今天是星期5");
break;
case 6:
console.log("今天是星期6");
break;
default: //上面的表达式都不成立执行的语句
console.log("今天是星期tian");
break;
}
console.log(date);
for循环
for循环语法:
- 语句1:for循环执行之前初始化变量 (var i = 0;) 执行一次
2.语句2:for循环执行的时候的判断条件 判断条件为true执行代码块
3. 语句3:for循环中的代码块执行完毕执行的语句 i++ i--
for(语句1;语句2;语句3){
代码块
}
var arr = [1, 3, 3, 5, 7, 8];
var sum = 0;
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
sum = sum + arr[i]
}
console.log(sum);
while循环
while(表达式){
//表达式为true执行的代码块
}
var i = 0;
var sum = 0;
while (i < 100) {
i++;
sum += i;
}
console.log(sum);
do.....while循环
do{
//不管表达式为真还是为假都会执行一次
}while(表达式)
先执行一次在做判断是否继续执行
var i = 0;
do {
console.log(i);
i++;
} while (i < 10)
console.log(i);
break和continue关键字
break 结束整个循环;不在继续执行循环
continue 结束本次循环,跳出当次循环,直接开始下一次循环
Date()时间对象
Date()时间对象的方法:
//获取当前的时间
var time = new Date();
//输出当前时间
console.log(time);
//判断Date类型
console.log(typeof time); // "object"
// 获取年份 getFullYear()
console.log(time.getFullYear());
// 获取月份 getMonth()+1 [0,11]
console.log(new Date().getMonth() + 1);
// 获取日期 getDate()
console.log(time.getDate());
// 获取星期 getDay()
console.log(time.getDay());
// 获取小时 getHours()
console.log(time.getHours());
// 获取分钟 getMinutes()
console.log(time.getMinutes());
// 获取秒数
console.log(time.getSeconds());
// 获取时间戳(从1970 01-01 00:00:00 - 现在的时间的总的毫秒数)
console.log(time.getTime());
console.log(new Date("2020-09-01 12:20:09").getFullYear
获取时间差。(做倒计时用)
//获取倒计时时间。
var eattime = new Date("2022-5-10 12:00:00");
//获取当前时间
var nowtime = new Date();
//倒计时时间-当前时间,(自动转换为毫秒数)
var time = eattime - nowtime;
// 将毫秒数转换为小时
var hour = Math.floor(time / 1000 / 60 / 60);
//判断时间显示如果是个位数,自动补0
if (hour < 10) {
hour = "0" + hour
}
对象
1.万物皆对象
对象创建方法
1.直接量:var obj = {};
2.工厂模式:
function CreateObj(myname, age, sex) {
// 手动创建一个空对象
var obj = new Object();
obj.name = myname;
obj.age = age;
obj.sex = sex;
// 手动返回对象
return obj
}
console.log(CreateObj("风清扬", 18, "男")); //{}
console.log(CreateObj("林青霞", 18, "女"));
3.构造函数
CreateObj1函数通过new关键字调用 CreateObj1就是构造函数
new关键字主要做了什么? 面试题
1.实例化了一个对象(obj),同时会继承构造函数原型上的方法和属性
2.this指向实例化对象(obj) this===obj
3.属性和方法添加到this对象上
4.隐式的返回this
function CreateObj1(name, age, sex) {
this.myname = name;
this.myage = age;
this.mysex = sex;
}
var obj = new CreateObj1("风清扬", 18, "男")
console.log(obj);
4.内置构造函数创建对象
// String Array Object Number Boolean Date Function
console.log(new String("hello"));//String
// str.indexOf()
console.log(new Number());//Number
console.log(new Array());//Array(0)
console.log(new Function());//匿名函数Function
console.log(new Object());//Object
instanceof检查左侧的实例化对象是否是右侧类的实例,如果是返回true;
var bol = new Boolean(true);
var str = new String("hello"); //字面量
console.log(bol instanceof Boolean);//true
console.log(bol instanceof Array);//false
console.log(str instanceof String);//true
console.log(bol);//Boolean {true}
对象方法
案例:
var obj = {
name: "刘德华",
age: 18,
sex: "男"
}
1.获取属性值
对象名.属性名 obj.name
console.log(obj.name);
对象名["属性名"] obj["age"]
console.log(obj["age"]);
访问不存在的属性 返回undefined
console.log(obj.hobby);
2.添加 对象中不存在属性赋值
obj["a"] = "hello";
console.log(obj);
3.删除 delete obj.age 只能删除自身的属性不包括继承的属性
console.log(delete obj.age);
console.log(delete obj.toString); //删除继承的属性不生效 返回值也是true
console.log(obj);
4.检测是否存在属性
in操作符 自身的和继承的属性 返回布尔值 不区分自己的属性和继承的属性
console.log("name" in obj);//true
console.log("toString" in obj);//true
hasOwnProperty() 自身的属性不包括继承 返回布尔值
console.log(obj.hasOwnProperty("age"));//true
console.log(obj.hasOwnProperty("toString"));//fasle
propertyIsEnumerable() 自身的属性不包括继承且属性是可枚举的
// 给对象添加属性
Object.defineProperty(obj, "myhobby", {//myhobby为属性名
enumerable: true, //可枚举的属性(可以for...in遍历获取到属性)//fasle为不可枚举
value: ["学习", "吃饭", "睡觉"]//给对象内添加属性默认值
})
for (var key in obj) {
console.log(obj[key]);
}
console.log(obj.propertyIsEnumerable("name")); //true
console.log(obj.propertyIsEnumerable("toString")); //fasle
console.log(obj.propertyIsEnumerable("myhobby")); //true
存取器 getter取 setter存
var obj1 = {
name: "刘德华",
get age() {
return 18
},
set age(value) {
console.log(value, 111);//hello 111
}
}
console.log(obj1.age); // 取值器 触发get方法//18
obj1.age = "hello";//存值器 触发set方法
this关键字
this指向调用者而非持有者 谁调用this指向谁
全局作用域的函数中的this指向window
函数作用域的函数中的this指向window
对象中的方法中的this 谁调用这个方法this就指向谁
构造函数中的this指向实例化对象
1.全局作用域的函数中的this指向window
function afun1() {
console.log(this);//window{}对象
}
window.afun1()
2. 函数作用域的函数中的this指向window
function outer () {
console.log(this, "outer");//window,outer
function inner() {
console.log(this, "inner");//window,inner
}
inner()
}
outer()
3.对象中的方法中的this 谁调用这个方法this就指向谁
var obj = {
name: "obj1",
say: function () {
console.log(this.name);//obj1
},
obj2: {
name: "obj2",
say: function () {
console.log(this.name);//obj2
}
}
}
console.log(obj.say());//undefined 调用的函数没有返回值
console.log(obj.obj2.say());//undefined 调用的函数没有返回值
例题:
function a(value) {//5
this.x = value;//5
console.log(this);//this指向window
return this;
};
var x = a(5);//5 //6
var y = a(6);
console.log(x);
console.log(y.x);
/
GO===window{
x:6,
y:window{
x:6,
y:undeined,
a:function(){}
},
a:function(){}
}
a-AO{
value:5
}
a-AO{
value:6
}
/
构造函数
// 构造函数 new 函数名()
// 构造函数和普通函数的区别
// 构造函数的函数名尽量首字母大写
// 构造函数中this的指向实例化对象
// 普通函数中谁调用this就指向谁
function Person(name){
this.myname = name;
this.say = function(){
console.log(this.myname);
}
}
var p1 = new Person("风清扬");
var p2 = new Person("林青霞");
console.log(p1,p2);
p1.say();
p2.say();
构造函数的原型链
// 万物皆对象
function Son(name, age) {
this.myname = name;
this.myage = age;
this.say = function () {
console.log("我的名字是" + this.myname + "我的年龄是" + this.myage);
}
}
// 构造函数Son的原型对象上添加了一个sing方法
Son.prototype.sing = function () {
console.log("是" + this.myname + "在唱歌");
}
Object.prototype.dance = function () {
console.log("跳舞");
}
var s1 = new Son('小明', 18);
var s2 = new Son('小红', 16);
// 1.每个对象上有一个属性__proto__ ,指向构造函数的原型对象(prototype)
// 对象是由谁创建出来的 对象.__proto__ == 构造函数.prototype
// 1.实例化对象是由构造函数创建出来的
console.log(s1.__proto__ == Son.prototype);
console.log(s2.__proto__ == Son.prototype);
console.log(s2);
console.log(s1.dance());
console.log(s2.sing());
// console.log(s2.working()); undeifne()
// 2.构造函数的原型对象是由Object创建出来的
console.log(Son.prototype.__proto__ == Object.prototype);
// 3.万物皆空
console.log(Object.prototype.__proto__);
5月.11日;11.35 构造函数原型链
构造函数原型链
每个对象都有一个隐式的属性(proto原型),每个函数都有一个prototype(原型对象)属性
原型链:
对象和对象之间都是有联系的,并不是独立存在的,通过对象的原型属性指向函数的原型对象,一层一层往上找,
直到找到Object的原型对象,这种层层继承的链式结构就叫做原型链
优先使用自己的属性和方法,自己不存在找函数的原型对象上的方法和属性,直到找到Object的原型对象的属性的属性和方法
原型对象上有一个属性constructor属性,指向是构造函数
function fn() {
}
fn.myname = "heloo";
// 构造函数的原型链:
// 1. 实例化对象的原型指向构造函数的原型对象
console.log(fn.__proto__ == Function.prototype); //true
// 2. 构造函数的原型对象的原型指向Object的原型对象
console.dir(Function.prototype.__proto__ == Object.prototype);//true
// 3. Object的原型对象的原型指向null
console.log(Object.prototype.__proto__); //null
console.dir( Function.prototype.constructor == Function); //true
console.log(Object.prototype.constructor == Object); //true
内置构造函数 :String Number Boolean Array Function Object
1.内置构造函数的原型对象是由Object创建的
var str = "hello"; // new String()
//判断是否存在内置构造函数。
console.log(str.__proto__ == String.prototype);//true
console.log( String.prototype.__proto__ == Object.prototype);//true
var arr = []; //new Array()
console.log(arr.__proto__ == Array.prototype);//true
console.log(Array.prototype.__proto__ == Object.prototype);//true
2.内置构造函数是由Function创建的
console.dir(Boolean.__proto__ == Function.prototype) ;
console.dir(Array.__proto__ == Function.prototype) ;
console.dir(Function.__proto__ == Function.prototype) ;
例题:
//在全局作用域声明了fn变量
var fn = function () {
this.f = "Fn"
}
// Object的原型对象上添加了a方法
Object.prototype.a = function () {
console.log("aaaaaa");
}
// Function的原型对象上添加了b方法
Function.prototype.b = function () {
console.log("bbbbbbbbbb");
}
// f.__proto__ == fn.prototype
var f = new fn(); // fn{f:"Fn"}
f.a()
// fn是函数
fn.a() //aaaaa
fn.b() //bbbbbbbbbb
数组方法
1.创建数组
1.1 直接量
var arr = [];
1.2 new关键字
var arr1 = new Array();
2.读写 arr[index] 索引/下标(index)
数组的下标从0开始; length长度是元素的个数
#####
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9,];
arr[2] = "我替换后下标为2 的元素";
console.log(arr);
arr[arr.length] = "这个位置没有我就添加";
console.log(arr);
var num = arr.unshift("unshift在头部添加");
console.log(arr);
console.log("unshift的返回值是添加后的数组长度:" + num);
arr.push("push最后的位置添加")
console.log(arr);
var splice = arr.splice(1, num, "我是删除后添加进来的");//num,删除后面的元素,0就不删除
console.log(arr);
console.log(splice);
删除
var arr1 = ["12", 23, 34, 45, 56, 67, 78, 89, 90]
console.log(arr1);//
//删除头部的元素 arr.shift()
//返回值:返回删除的元素,如果是空数组返回时undefined
var aa = arr1.shift();//删除头部第一个元素
console.log(arr1);
console.log(aa, typeof aa);//返回被删除的元素
//删除数组最后一个元素 arr.pop()
//返回的是删除的元素
var bb = arr1.pop();
console.log(arr1);//删除最后一个字元素
console.log(bb);//返回被删除的元素
var cc = arr1.splice(3, 2);//从第3的元素开始,删除后面两个元素
console.log(arr1);//
console.log(cc);//返回被删除的元素
//删除任意位置的元素 arr.splice(startindex,delnum,eles)
//startindex:从哪个位置开始删除
//delnum:删除的个数
//eles:删除之后在startindex添加的元素(可选)
//返回值是新数组,新数组中是删除的元素
var dd = arr1.splice(2, 2, "删除位置添加");//从第3的元素开始,删除后面两个元素,在被删除的位置添加
console.log(arr1);
console.log(dd);//返回被删除的元素
数组的查找
从前往后遍历
1. indexOf(ele,startindex):返回是元素首次出现的下标
ele表示查找的元素;startindex可选
如果不写 默认查找的区间[0,arr.length-1]
如果写 查找的区间[startindex,arr.length-1]
var arr = ["hello",1,1,2,4,5,6,6,7,8];
console.log(arr.indexOf(1));//1
console.log(arr.indexOf(1,2));//2
console.log(arr.indexOf("hell666"));//不存在的元素返回-1
2.从后往前遍历
2. lastIndexOf(ele,startindex):返回是元素首次出现的下标
ele表示查找的元素
startindex可选
不写 默认查找的区间[0,arr.length-1]
写 查找的区间[startindex,arr.length-1]
var arr = ["hello",1,1,2,4,5,6,6,7,8];
console.log(arr.lastIndexOf(1));
console.log(arr.lastIndexOf(6, 7));
console.log(arr.lastIndexOf(true));
数组转换字符串
数组名.toString();
var arr = ["hello", 1, 1, 2, 4, 5, 6, 6, 7, 8];
console.log(arr.toString());
数组名.join()
join(分隔符) 元素和元素之间都会存在一个分隔符
var arr = ["hello", 1, 1, 2, 4, 5, 6, 6, 7, 8];
console.log(arr.join());
console.log(arr.join("-"));
console.log(arr.join(""));
console.log(arr.join("%6-----"));
2.数组翻转 reverse()
var arr = ["hello", 1, 1, 2, 4, 5, 6, 6, 7, 8];
console.log(arr.reverse());
3.排序 sort(function(m,n){return m-n}) 修改原数组
var arr = [1, 56, 2, 10, 26, -20];
console.log(arr.sort(function (a, b) {
return a - b
}));
console.log(arr.sort(function (a, b) {
return b - a
}));
console.log(arr);
4.连接两个或者多个数组 arr.concat(arr1,arr2) 返回是新数组
var arr = ["a", "b"];
console.log(arr);
console.log(arr.concat([1], ["添加"]));//后面添加,不影响原有的数组,返回值是新数组
console.log(arr);
var arr1 = [1, 2, 3, 4, 5]
console.log(arr.concat(arr1, arr1));//可以使用变量,并且可以重复添加
数组的迭代器方法
1.forEach(function(item,index,arr){})
item表示数组中的每一项元素
index表示数组中元素的下标
arr表示原数组
没有返回值
var arr = [1, 2, 3];
arr.forEach(function (a, b, c) {
console.log(a);
// console.log(b);
// console.log(arr);
})
2.every() 返回值是布尔值 数组中的每一个元素必须满足条件
一个不满足条件直接返回fasle 全真为真,一假全假
arr.every(function(ele,index,arr){})
ele表示数组中的每一项元素
index表示数组中元素的下标
arr表示原数组
var arr = [1, 2, 3];
var res = arr.every(function (ele) {
console.log(ele);
return ele > 0
})
console.log(res);
3.some() 一些
一个满足条件返回true
arr.some(function(ele,index,arr){})
ele表示数组中的每一项元素
index表示数组中元素的下标
arr表示原数组
var arr = [1, 2, 3];
console.log(arr.some(function (ele) {
console.log(ele);
return ele > 0
}));
迭代器产生新数组的方法
1.map()
arr.map(function(ele,index,arr){})
var arr = [1, 2, 4, 6, 7];
var res = arr.map(function (ele) {
console.log(ele);
return ele
})
console.log(res);
2.filters() 过滤器
arr.filter(function(ele,index,arr){})
var arr = [1, 2, 4, 5];
var res = arr.filter(function (ele) {
return ele % 2 == 0
})
console.log(res);
数组方法
数组累加方法: arr.reduce(function(prev,next,index,arr){},defaluevalue)
prev:有defaluevalue,prev表示默认值,没有prev默认是数组中的第一项, prev表示上一次返回值
next:数组中的下一项数据
index:next元素的下标
arr:原数组
var arr = [1, 3, 12, 10, 3, 4, 6];
var res = arr.reduce(function (prev, next, index, arr) {
return prev + next
},0)
var res1 = arr.reduce(function (prev, next, index, arr) {
return prev next
},1)
console.log(res, res1);
var res2 = arr.reduce(function (prev, next, index, arr) {
return prev = prev < next ? next : prev
})
console.log(res, res1, res2);
判断是否为数组:返回布尔值
Array.isArray(xxx)
var arr = [12, 3, 4];
var obj = {}
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
console.log(arr instanceof Array);
console.log(obj instanceof Array);
类数组不能使用数组方法;
// arguments对象
// 类数组:不能使用数组的方法
// 获取类数组中的值 arguments[index]
function add() {
// console.log(arguments);
console.log(Array.isArray(arguments)); //fasle
// console.log(arguments[arguments.length - 1]);
var sum = 0
for (var i = 0; i < arguments.length; i++) {
// console.log(arguments[i]);
sum += arguments[i]
}
return sum
}
console.log(add(1, 2, 4, 5, 6, 7, 5));
console.log(add(1, 3, 5, 11, 7, 8, 10, 9, 9, 9, 10));
函数
函数的定义
1.函数的定义
1.1 函数声明式 函数名见名思意
function 函数名(){}
1.2 函数表达式声明
var fun = function () { }
1.3 内置构造函数
var fn = new Function("var a = 100;console.log(a)")
fn()
2.函数调用
函数名() 对象名.方法名()
函数传参
// 函数传参
// 形参:形式上的参数 写在声明函数的小括号中,多个形参,分隔开
// 实参:实际上的传参数 实参可以式任意数据类型,多个实参,分隔开
function add(a, b, c) {
// 相当于在函数内部 var a,b,c;
console.log(a, b, c);
}
add()
add(1)
add(1, 2)
add(1, 2, 3, 4)
函数执行规则
函数提升:(代码执行之前执行的操作)
函数名做为属性名添加到GO/AO,属性值是函数体
函数名和变量名重名时,函数提升的优先级高于变量提升
立即执行函数
函数声明式不能直接在后面写()调用
声明式 后面直接加()调用
var fun = function () {
console.log(11111);
}()
;
(function fun() {
console.log(111)
})();
立即执行函数 立即产生是局部作用域,执行完成局部作用域就被销毁
setTimeout异步任务(同步任务执行完毕才会执行异步任务) 排队
for循环时一个同步任务
面试例题:
点击按钮返回元素下标
<button>1</button>
<button>2</button>
<button>3</button>
var tags = document.querySelectorAll("button");
// 打印全局变量3,,,不符合理想的结果
for (var i = 0; i < tags.length; i++) {
tags[i].onclick = function () {
console.log(i);
}
}
// 打印对应元素的下标
//解决方法:使用let 声明循环变量
for (let i = 0; i < tags.length; i++) {
tags[i].onclick = function () {
console.log(i);
}
}
// 打印对应元素的下标
//解决方法:通过给元素添加自定义属性
for (var i = 0; i < tags.length; i++) {
tags[i].index = i;//给元素添加属性
tags[i].onclick = function () {
console.log(this.index);
}
}
函数作用域链
1.语法检查
2.预编译(全局预编译 函数(局部)预编译)
3.执行代码
全局预编译
1.创建一个GO(Global Object)对象
2.变量提升(var声明的变量),变量做为属性名添加到GO对象中,属性值undefined
3.函数提升,函数名做为属性名添加到GO对象中,属性值为函数体
局部预编译:
立即生成一个执行器上下文对象(AO),执行完成就会被销毁
1.创建一个AO(Acnative Object)对象
2.变量提升(var声明的变量)和形参,变量做为属性名添加到AO对象中,属性值undefined
3.将实参赋值给形参
4.函数提升,函数名做为属性名添加到AO对象中,属性值为函数体
[[scopes]] 作用域链 = []
例题
function fn(a) {
console.log(a); //function(){}
var a = 123;
console.log(a); //123
function a() {}
var b = function () {}
console.dir(b); //function () {}
function d() {}
}
fn(1);
重点:闭包
写法: 函数内部嵌套函数,并且返回函数
作用: 实现全局间接访问局部变量
特点:引用在,空间不灭, 继承原来所在的作用域链
var num = 1;
function add() {
num++;
return num;
}
console.log(add()); //2
console.log(add()); //3
console.log(add()); //4
function add1() {
var num1 = 1;
return ++num1
}
console.log(add1()); //2
console.log(add1()); //2
console.log(add1()); //2
函数特殊对象
1.函数的length属性,形参的个数
2.函数的name属性,函数名
function fun(a, b) {}
console.dir(fun.length)
console.dir(fun.name)
console.log(new Function().name); //anonymous
改变this的指向
1 call(obj,parmas1,parmss2) 执行函数
2 apply(obj,[parmas1,parmas2]) 执行函数
3 bind(obj,parmas1,parmss2) 返回的是函数体和call基本类似 区别就是bind方法需要在加一个()调用
call例题
function fun(a, b) {
console.log(this);
console.log(a, b);
function outer(x) {
console.log(this, x, 22222);
}
// 将outer中的this指向obj
outer.call(obj)
// 将outer中的this指向fun3
outer.call(fun3, "hello")
}
var obj = {
name: "obj"
};
function fun3() {}
// 把fn的this指向为obj
fun.call(obj);
// 把fn中的this指向fun3,传递的参数给fun
fun.call(fun3, 1, 2)
apply(obj,[parmas1,parmas2]) 执行函数
例题
function afun(m, n) {
console.log(this, m, n);
}
afun(1, 2)
afun.apply({
name: "obj"
}, [
[1, 2],
["hrllo"]
]); obj
var obj = {
name: "objname",
say: function (m) {
console.log(this, m, 1111);
}
}
var otherobj = {
name: "otherobj"
}
obj.say.apply(window, ["hello"])
obj.say.apply(otherobj, [55555555555])
bind(obj,parmas1,parmss2) 返回的是函数体
例题
function afun(a, b) {
console.log(this, a, b);
}
var obj = {
name: "objname",
say: function (m) {
console.log(this, m, 1111);
}
}
afun.bind(obj)()
afun.bind(obj, 1, 2)()
obj.say.bind(window, "hello")()
Math对象方法中没有this
var arr = [1, 22, 1, 223, 4]
console.log(Math.max(arr));//NaN
console.log(Math.max.apply(window, arr));//223
console.log(Math.max.apply(null, arr));//223
console.log(Math.max.apply(undefined, arr));//223
console.log(Math.max.apply({}, arr));//223
console.log(Math.max.apply([], arr));//223
递归函数:
递归函数:
1.函数自己调用自己
2.终止条件
例题:
function Add(num) {
if (num < 5) {
return 5
} else {
return Add(num - 6) 3
}
}
console.log(Add(20));
//解析
//Add(20) ==> Add(14)3 == 135
//Add(14) ==> Add(8) 3 == 45
//Add(8) ==> Add(2)3 == 15
//Add(2) == 5
回调函数
回调函数是一个函数,将会在另一个函数完成执行后立即执行。回调函数是一个作为参数传给另一个 JavaScript 函数的函数。这个回调函数会在传给的函数内部执行。
例题:
function fun(){
console.log("fun----");
}
var outer = function(){
console.log("outer----");
}
function Afun(c,a){
//变量c和a回调函数
console.log(c,11111);
console.log(a,2222);
if(0){
a()
}
setTimeout(function(){
c()
},2000)
}
Afun(fun,outer)
正则表达式
// 1.直接量
2.new关键字
var reg = /abc/;
var reg = new RegExp("abc")
例题:
var reg = /abc/;
var str = "ad";
console.log(reg.test(str));//false
量词
// + +之前的字符至少出现一次
var reg = /abc+d/;
console.log(reg.test("abcd")); //true
console.log(reg.test("abd")); //fasle
console.log(reg.test("abcccccd")); //true
// 之前的字符 >=0次
var reg1 = /abc/
console.log(reg1.test("ab"));
console.log(reg1.test("a")); //fasle
console.log(reg1.test("abc")); //fasle
console.log(reg1.test("abccccc")); //fasle
// ? ?之前的字符可以出现0次或者1次
console.log("----------------------------");
var reg2 = /abc?/
console.log(reg2.test("ab")); //true
console.log(reg2.test("a")); //fasle
console.log(reg2.test("abc")); //true
console.log(reg2.test("abccccc")); //true
console.log("abccccc".match(reg2)); //"abc"
console.log("abccccc".match(reg1)); //"abccccc"
console.log("----------------------------");
// {num} {}之前的字符可以出现至少num次
var reg5 = /abc{4}/
var reg6 = /abc{3,6}/
console.log(reg5.test("ab")); //fasle
console.log(reg5.test("a")); //fasle
console.log(reg5.test("abc")); //fasle
console.log(reg5.test("abcccc")); //true
console.log(reg6.test("abcc")); //fasle
console.log(reg6.test("abccc")); //true
console.log(reg6.test("abccccccc")); //true
console.log("abccccccc".match(reg6)); //"abc"
// console.log("abccccc".match(reg1));//"abccccc"
// $ 以$之前的字符结尾
var reg7 = /#$/;
console.log("---------------");
console.log(reg7.test("hello"));
console.log(reg7.test("hello-"));
console.log(reg7.test("hello-#"));
// ^ 以^之前的字符开头
var reg8 = /^Af$/;
console.log("---------------");
console.log(reg8.test("abc"));//fasle
console.log(reg8.test("Agb"));//true
console.log(reg8.test("aAfg"));//fasle
console.log(reg8.test("Af"));//fasle
console.log(reg8.test("Afy"));//fasle
方括号
// 1.查找方括号之间的任何字符
var reg = /[abc]/;
console.log(reg.test("a"));
console.log(reg.test("f"));
// 2.查找任何不在方括号之间的字符。
var reg1 = /[^abc]/;
console.log(reg1.test("a")); //fasle
console.log(reg1.test("f")); //true
// 3.查找任何从 0 至 9 的数字
var reg2 = /[0-9]/;
console.log("---------------");
console.log(reg2.test("0")); //true
console.log(reg2.test("f")); //fasle
// 4.查找任何从小写 a 到小写 z 的字符
var reg3 = /[a-z]/;
console.log("---------------");
console.log(reg3.test("A")); //fasle
console.log(reg3.test("f")); //true
// 5.查找任何从大写 A 到大写 Z 的字符
var reg4 =/[A-Z]/;
console.log("---------------");
console.log(reg4.test("AERE")); //true
console.log(reg4.test("tuuweuwuYye")); //fasle
console.log("tuuweuwuYye".match(reg4));
var reg5 = /[a-zA-Z0-9]/
// 6.查找任何指定的选项
var reg6 = /(red|green|blue)/
console.log(reg6.test("re"));//fasle
console.log(reg6.test("red"));//true
console.log(reg6.test("bl"));//fasle
console.log(reg6.test("green"));//true
元字符
var reg = /\w/; //单词字符(英文、数字及下划线)
console.log(reg.test("1213"));
console.log("123".match(reg));
console.log(reg.test("1q213"));
console.log(reg.test("1_213"));
var reg1 = /\W/;
console.log("------------------");
// 非单词字符(英文、数字及下划线)
console.log(reg1.test("%")); //true
console.log(reg1.test("1q213")); //fasle
console.log(reg1.test("1213")); //fasle
// \s space 空白符(包含Tab、换行符、空格 \n)
var str = `
hello
`
var reg2 = /\s/;
console.log(reg2.test(str));
console.log(reg2.test("hello"));
console.log(reg2.test("hello \n"));
console.log(reg2.test("hel 0000"));
// \d 所有的数字字符
console.log("---------------");
var reg3 = /\d/;
console.log(reg3.test(12));
console.log(reg3.test("12a"));
// 1.去除字符串开头的空格
var reg = /^\s/g;
// 2.去除字符串尾部的空格
var reg2 = /\s$/g;
// 3.去除字符串两端的空格
var reg3 = /^\s|\s$/g;
// 4.去除字符串中所有的空格
var reg4 = /\s/g
var reg1 = /\w/g;
console.log(reg.test("hello"));
console.log(reg.test("1 hello"));
console.log(reg.test(" hello"));
console.log(reg1.test("hello"));
console.log("hello".match(reg1));
console.log("hello".replace(/\w/ig, "xxxxx"));
console.log(" hello".replace(reg, ""));
console.log("hello ".replace(reg2, "") + "66666");
console.log(" hello ".replace(reg3, "") + "66666");
console.log(" h el lo ".replace(reg4, "") + "66666");
例题
var con = prompt("请输入评论")
var warncon = "敏感词";
var reg = /敏感词/g
if (reg.test(con)) {
alert(con.replace(reg, ""))
} else {
alert('评论成功')
}
定时器
setInterval(function(){},毫秒数) 每隔多少毫秒都会执行一次
var time = 5;
var timer = setInterval(function () {
time--;
console.log(time);
if(time <= 0){
clearInterval(timer)
alert("秒杀结束")
}
document.querySelector("div").innerHTML = `距离秒杀结束时间还有${time}秒`
}, 1000)
setTimeout(function(){},毫秒数) 隔多少毫秒执行一次
var timer2 = setTimeout(function(){
console.log(12133);
},3000)
document.querySelector(".btn").onclick = function(){
clearTimeout(timer2)
}