浅总结,JavaScript基础知识点。

       来华清远见培训前端一个多月了,通过培训逐步掌握了HTML+CSS,JavaScript基础知识,在学习过程中遇见问题老师都会很有耐心的帮助解决问题。对学习JavaScript基础的过程中一些知识点进行简单的总结。

1.JavaScriptjs)三大组成部分

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.弹框输出

  1. alert('警告框'); 页面弹出警告框。
  2. confirm("确认框"); 返回值确认为true,取消为false
  3. prompt("输入框");输入内容点击确认返回输入的数据,点击取消返回null
  4. console.log("打印"+"语句");控制台输出,+字符串拼接
  5. console.warn("警告语句");
  6. console.erro("报错输出")报错当前js代码将不会执行;
  7. console.table({ name: "张三", age: 18 });表格打印
  8. 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语法规范

  1. 可以在标识符前后加空格,不能再标识符中间加空格
  2. 分号表示一个语句的结束,应该加分号,不加一般也不会报错 按照规范加上
  3. 严格区分大小写

    var a =100;
   
console.log(A); // A is not defined A没有定义

4.命名规则

不能以数字开头;应该英文或者$ 或者_开头;多个单词下划线连接或者使用驼峰法命名;变量名尽量见名知意;中文也可以做为变量名,但是不建议;不能使用关键字或保留字

var关键字

var关键字:使用var声明变量;

 var  a = "声明变量";

变量的命名规则:不能以数字开头 大小写英文 $ _ 多个单词下划线连接 或者 驼峰法,见名知意,中文可以变量 不建议,不能使用关键字 保留字

变量: 保存值以供之后使用(任何类型的值);理解为装东西的盒子。

var声明变量的初始化;

 var a = "声明变量";//右边的值赋值给变量a
 // =
在这里是进行赋值操作
 //右边赋值给左边

多个变量同时声明用逗号分割,需要分别给不同的变量赋值,如果不赋初始值就为undefined

var可以先使用后声明;否则不可以先使用。

 console.loga);
 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:非数字;

undefinednull的区别:

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,如0NaN,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 true1 false0

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字符串方法

定义字符串:单引号 双引号 反引号 (引号必须成对存在) ${变量名}

  1. 字面量字符串

     \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开始算起,startend的位置不能自动交换,字符串只能从左往右进行截取) 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

三元运算符

条件操作符(三目运算符) 判断条件表达式(truefalse ? (如果为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){

//表达式1true执行的语句

}else{

//else是跟在if或者else if后面的

//else不需要写表达式

//表达式1fasle执行的语句

}

               var num = 12;

​    if (num > 10) {

​      console.log("num > 10");

​    } else {

​      console.log("num <= 10");

​    }

if else if

if (表达式1) {

//表达式1true执行的语句

} else if (表达式2) {

//表达式2true执行的语句

} else if (表达式3) {

//表达式3true执行的语句

} 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. 语句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);

breakcontinue关键字

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:数组中的下一项数据

indexnext元素的下标

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() {}

        // fnthis指向为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){

            //变量ca回调函数

            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)

        }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值