javascript学习笔记-基础语法篇


开始使用javascript时,最初的重点通常是数字、数字运算、文本操作、日期和存储信息。有时javascript会对你输入的数据类型做出假设;
分配、数学运算或逻辑等式可能会给出意料之外的结果。即使结果是错的,javascript也会尽量使代码有效,并提供解决方案。若要客服这些缺点,可以激活严格模式,该模式可以减少静默错误、提高性能以及提供更多警告和更少的危险功能。
结合w3school进行学习

一、简介

  • JS:弱类型语言,数据决定类型,类型可变
    (1)交互性(它可以做的就是信息的动态交互)
    (2)安全性(不允许直接访问本地硬盘)
    (3)跨平台性(只要是解释JS的浏览器都可以执行,和平台无关)
    (4) 开发工具简单,记事本即可;无需编译,直接由js引擎负责执行
    (5) 面向对象
    (6) 解释性–解释性语言,不需要编译,可以直接被浏览器解释并执行
    (7) 弱数据类型,变量类型会随其值得改变进行改变(只能用var或者let来声明,不能指定类型)
    (8) 基于事件驱动–事件驱动是指在页面中执行某种操作时所产生的动作
  • js的引入
    (1)在head或者body中使用script标签插入js语言
    (2)单独的js文件,用script标签引入
    两个功能二选一使用,不能同时使用,不能在一个script标签中既引入一个js文件,又写了js代码;但是可以同时存在,写在不同的script标签中就行
    | | |
    |–|–|
    | | |

(3)js写在标签里(使用较少):
< button οnclick=“alert(‘hduiheuhsc’);”>点我一下
< a href=“javascript:alert(‘achdbdbchdcu’)”>你也点我一下
< a href=“javascript:”>你也点我一下

  • 组成
    (1)核心(ECMAScript)
    (2)文档对象模型(DOM) 让js与网页进行对话 ,点击操作,鼠标滑落操作等
    (3)浏览器对象模型(BOM) 让js与浏览器进行对话 ,比如判断滚动条距离网页顶端的距离,判断鼠标光标在网页中的位置

  • 数据类型
    (1)数值类型:number {int,double,float…}
    (2)字符串类型:string
    (3)对象类型:object
    (4)布尔类型:boolean
    (5)函数类型:function
    特殊值:
    undefined 未定义,所有js变量未赋予初始值的时候,默认值都是undefined
    null 空值
    NAN Not a Number 非数值
    Infinity 表示正无穷,-Infinity表示负无穷
    typeof()取变量的数据类型返回,可直接输出,检查Null时会返回object表示一个空值对象

  • 数据类型转换
    (1)tostring()方法
    var a=a.toString(); null和undefined没有转换为字符串的方法,不能转换会报错
    toString() 括号内有一个可选的参数,指以几进制的形式转换该字符串,如数字12调用 toString(16) 得到的结果就是 C,即12的16进制表示方式。
    (2)Sting()函数
    null和undefined直接转换为“null”和“undefined”
    (3)Number()函数
    字符串中含有非数字或者数据类型为undefined返回NaN,字符串为空串或者全为空格返回0,转换要求更严格
    (4) 0、null、undefined、""空串、NaN都认为是false,其他为true
    (5)parseInt()函数 parseFloat()
    取出有效小数,专门用来对付字符串其他数据类型尽量不用,从左往右提取数字,直到遇见非数字 120px——120
    如果字符串不是整数,比如null undefined 198.34 先转换为字符串,再转换为整数“null”“undefined”“198”可达到取整的效果

    parseFloat("12");      //返回12  
    parseFloat("12.2a");   //返回12.2  
    parseFloat("12.2.2");  //返回12.2,第二个小数点会让转换停止  
    parseFloat(null);      //返回0 
    

(6)运用算数运算进行隐式转换:
+运算的两个操作数是数字和字符串,数字会被转换为字符串;
+运算的两个操作数是数字和布尔型,布尔型会被转换为数字;
+运算的两个操作数是字符串和布尔型,布尔型会被转换为字符串;
减、乘、除、取余运算会把其他类型转换为数字;
if 括号中单独的一个变量会被转换为布尔型。

小作用:
任何数据类型+“”— 转换为字符串
任何数据类型-0*1/1----转换为Number
+(正号)任何数据类型 -----转换为Number

(7)进制表示
十六进制:以0x开头
八进制:以0开头
二进制:以0b开头,部分浏览器支持
a=“070”这种字符串,有些浏览器会当成8进制解析,有些会当成10进制转换成整数,用paresInt(a,10)解决,第二个参数表示用几进制表示的

  • 运算符
    (1)关系(比较)运算: 等于== (简单的做字面值的比较,“123” == 123) 全等于=== (比较值和数据类型)
    (2)逻辑运算:且&& 或|| 取反|
    且运算&&:
    当表达式中全为真时,返回最后一个表达式的值(所有的表达式都要为真)
    当表达式中有假时,返回第一个为假的表达式
    或运算||:
    当表达式全为假时,返回最后一个表达式的值
    当表达式中有真时,返回第一个为真的表达式
    (3)算数运算

二、数组

  • 数组基础(索引数组)
    var 数组名 =[]; //空数组
    var 数组名={1,“abb”,true}; 定义数组同时赋值,并且数据类型可以不同 ,可以放数字、字符、字符串、对象、函数、数组0
    (1)定义空数组后,会自动动态分配空间,数组可直接使用
    (2)只要我们通过数组下标赋值(读操作不行),那么最大的下标值,就会自动给数组进行扩容操作,改变数组的length
    (3)数组缩容:减小arr.length的数值,会删除结尾的多余元素
    还有一种方法:新建一个Array对象的实例
    var myArray = new Array();//创建一个初始为空的数组
    var lengthMixArray = new Array(6);//创建一个长为6的数组
    补充:
    索引数组的特点
    1.不限制数组元素个数,长度可变
    2.不限制下标越界:如果是get不存在的元素会提示undefined,如果set不存在的元素会自动在数组中添加这样一个数,自动改变数组的长度,
    下标不连续的数组称为稀疏数组
    3.不限制元素的数据类型(可存放任何数据类型的数据)

  • 关联数组(hash数组)
    1.每个元素都有专门的名称
    2.创建:创建空数组+向空数组中添加元素 arr[name]=“tom”; name:即数组索引值 tom即数组元素
    3.遍历关联数组不能用for循环了,只能用for…in… 来操作
    for(var key in arr)
    {
    arr[key]…获取当前元素值
    }
    区别
    1.索引数组以字符串输出,下标是数字,length属性有效,可用for循环遍历
    2.关联数组不能以字符串输出、下标是自定义的字符串、length属性失效、不能用for循环遍历
    3.数组能直接输出:console.log(arr);

  • 多维数组
    创建二维数组:

var multiArr = [[1,2,3,4],[5,6,7],[8,9]]; 
//创建一个4行6列的二维数组  
var muArr = new Array(4);  
for(var i = 0;i <4;i++) {  
    muArr[i] = new Array(6);  
} 
  • 数组API函数
    数组转字符串
    (1)String(arr)
    将arr中每个元素转为字符串,并用逗号隔开
    固定套路
    对数组进行拍照,用于鉴别数组是否被修改过
    (2)arr.jion(“连接符”)
    将arr中的每个元素转为字符串,并用自定义的连接符分隔(连接符可为空,无缝拼接)
    固定套路
    将字符组成单词:无缝拼接 判断数组是否是空数组
    将单词组成句子
    将数组转化为页面元素的内容
    拼接和选取
    (1)拼接:concat()拼接两个或更多数组和单独的值,并返回结果,原数组保持不变
    (2)选取:slice()返回原数组的一个子数组arr.slice(starti,endi+1)凡是两个参数都是下标的函数都是取前不取后,并且原数组保持不变
    (3)复制数组:arr.slice(0,arr.length)也可不写参数
    修改数组
    (1)删除数组内容:arr.splice(starti,n);
    (2)修改/替换数组内容:arr.splice(starti,n,值1,值2,值3…);arr.splice(starti,n,[值1,值2,值3…]);删除的元素的个数和插入的元素个数不一定要一致
    (3)插入:arr.splice(starti,0,值1,值2,值3…);
    (4)颠倒数组:reverse()只负责原样颠倒数组,不负责排序
    (5)排序:arr.sort()默认将所有元素转为字符串再排列
    问题:只能排列字符串类型的元素
    解决:
    1)使用自定义比较器函数(手写冒泡、快速、插入排序)
    2) 回调函数(比较器函数)中需要定义两个形参,浏览器将会分别使用数组中的元素作为实参去调用函数,使用哪个元素不确定,但是肯定数组中a一定在b前边,浏览器会根据回调函数的返回值来决定元素的顺序,>0交换位置,<=0不交换,直接return a-b;(升序) return b-a;(降序)

    var arr = [1,2,10,5,12];  
    arr.sort();  
    console.log(arr);//输出[1,10,12,2,5]  先转化为字符串再进行比较
    arr.sort(function(a,b){  
         return a-b;  
    });  
    console.log(arr);//输出[1,2,5,10,12]  
    

    具体可参考博文:https://www.cnblogs.com/real-me/p/7103375.html
    简单操作

  • push()可以向数组末尾添加一个或多个元素,并返回数组的新长度

  • pop()删除数组最后一个元素并返回最后一个元素

  • unshift()向数组开头添加一个或多个元素并返回新数组的长度

  • shift()删除数组的第一个元素并返回被删除元素

三、函数

1.预定义函数

== 对话框==
**alert(): **提示框
**confirm(): **确认对话框,可得到返回值true或者false
**prompt(): **输入对话框,可得到返回值即用户的输入内容
这三个实际上是js中window对象的方法,用来弹出对话框与用户实现交互,使用时window可以省略
还有其他的几个预定义函数:
perseInt() parseFloat() isNaN() eval()等比较常用

2.自定义函数

  1. function 函数名(形参列表){函数体}
  2. var 变量名=function 函数名(形参列表){函数体} 只能在函数定义语句之后调用该函数,且调用的时候只能用变量名,不能用函数名,如果没有函数名则是匿名函数
  3. function函数也是一个对象,将函数看做对象:
    var fun =new Function();
    var fun =new Function(“console.log(‘这是我的第一个函数’)”); 可以将要封装的代码以字符串的形式传递给函数(使用较少,基本不这样用)
  4. 立即执行函数()();------>(function(函数参数){函数体})();函数定义完立即执行,只进行一次,常用来防止变量污染,增加局部作用域
  5. function既可以定义一个类,也可以定义一个函数,用new时就是实例化一个对象,直接函数名赋值就是得到一个函数
function Test()   //构造函数首字母大写,实现与其他函数不同
  {  
      this.name = "test";  
      return "test";  
  }  
  var test1 = new Test();   //Object 对象,它有一个name 属性,并且返回一个字符串test  
  var test2 = Test();    // 函数Test()属于Function对象   这个test2,它单纯是一个字符串

在这里插入图片描述

function Person(name,age) 
    { 
        var o = new Object(); 
        o.name = name; 
        o.age = age; 
        o.getName = function() 
        { 
            alert(this.name); 
        } 
        return o; 
    } 
    var obj1 = new Person("liwen",25); 
    var obj2 = Person("liwen1",25); 
    obj1.getName();  //liwen       new一个函数的实例对象  
    obj2.getName();  //liwen1      直接调用  

3.注意事项

  1. 定义函数后要调用才能执行,函数参数不需要定义数据类型,调用函数时,解析器也不会检查实参的数量,多余的实参不会被赋值,实参少则undefined
  2. 有返回值时直接在函数体内return值即可,不需要定义返回类型
  3. js不允许函数重载,下一次定义相同函数名的函数会自动覆盖上一个函数
  4. 隐形参数对象arguments: 只在function函数内,不需要定义,但可以直接用来获取所有参数的变量,我们管它叫隐形参数,隐形参数特别像java基础的可变长参数,arguments中有一个属性叫callee,对应一个函数对象,就是当前函数
    使用情况:写一个对所有参数进行操作的函数,但是没有指明有几个参数,可任意传入几个参数
function fun()  
        {            //也可以对arguments参数数组进行遍历,只能用for循环遍历,不能使用foreach
            alert(arguments.length);
            alert(arguments[0]);
            alert(arguments[1]);
            alert(arguments[2]); //返回undefined
        }
        fun(1,"anb");

4.this对象

解析器在调用函数每次都会向函数内部传递一个隐含的参数this,指向函数执行的上下文对象,根据函数调用方式不同,this指向的对象不同

  1. 以函数形式调用(函数的默认对象为window)this指向window
  2. 以方法形式调用,this就是调用方法的那个对象
  3. 以构造函数形式调用,this就是新创建的对象
  4. 使用call和apply调用,this就是指定的那个对象
  5. 在事件的响应函数中,响应函数是给谁绑定的this就是谁

5.函数的方法

  1. call()和apply()都是函数对象的方法,需要通过函数对象(构造函数名)来调用,对函数对象调用call()和apply()都会调用该函数执行
    call 方法
    调用一个对象的一个方法,以另一个对象替换当前对象
    call([thisObj[,arg1[, arg2[, [,.argN]]]]])
    参数
    thisObj
    可选项。将被用作当前对象的对象。
    arg1, arg2, , argN
    可选项。将被传递方法参数序列。
    说明
    call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
    如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。说明白一点其实就是更改对象的内部指针,即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。
    运行一下下面这个代码自然就懂了
< input type ="text" id ="myText"    value ="input text" >
< script >
    function Obj(){ this .value = " 对象! " ;}
    var value = " global 变量 " ;
    function Fun1(){alert( this .value);}

    window.Fun1();   // global 变量
    Fun1.call(window);  // global 变量
    Fun1.call(document.getElementById('myText'));  // input text
    Fun1.call( new Obj());   // 对象!
</ script >

call函数和apply方法的第一个参数都是要传入给当前对象的对象,及函数内部的this。后面的参数都是传递给当前对象的参数。
运行如下代码:

var func = new function (){ this .a = " func " }
    var myfunc = function (x){
        var a = " myfunc " ;
        alert( this .a);
        alert(x);
    }
    myfunc.call(func, " var " );

可见分别弹出了func和var。到这里就对call的每个参数的意义有所了解了。

对于apply和call两者在作用上是相同的,但两者在参数上有区别的。
对于第一个参数意义都一样,但对第二个参数:
apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])

同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入

四、面向对象

1.对象的分类

  1. 内建对象:又ES标准中定义的对象,在任何ES的实现中都可以使用 比如:Math String Number Function
  2. 宿主对象:JS的运行环境提供的对象,目前来讲主要是指由浏览器提供的对象 比如BOM DOM
  3. 自定义对象
    (1)Object形式的自定义对象
    对象的定义:
    var 变量名= new Object(); //对象示例(空对象)
    变量名.属性名 = 值; //定义一个属性
    变量名.函数名 = function(){}; //定义一个方法

    对象的访问:变量名.属性名/函数名额
    (2)大括号形式的自定义对象
    var 变量名={
    属性名:值,
    属性名:值, //相互间要加逗号,最后一个不写逗号
    函数名:function(){}
    };

    删除属性:delete 对象.属性名

2.自定义对象

对象的创建
  1. 对象的创建(5种方法)
    (1)对象字面量,通过新建一个键值对的集合(对象字面量)创建对象

    var song = {  
        name:"Liekkas",  
          time:180,  
          "song language":English,  
          singer: {  
            singerName:"Sofia Jannok",  
                singerAge:30  
        }  
    };
    

    (2)通过关键字new创建

    var Store = new Object();//创建对象的一个实例  
    Store.name = "lofo Market";  
    Store.location = "NO.13 Five Avenue";  
    Store.salesVolume = 1000000;  
    

    (3)通过工厂方法创建对象
    工厂方法就是通过函数创建对象,函数封装了创建对象的过程。与构造函数有些不同,是在函数里面创建对象,创建完了以后再返回对象

    //对象的创建函数  
    function createStoreObject(name,location,salesVolume) {  
        var store = new Object();  
        store.name = name;  
        store.locaion = location;  
        store.salesVolume = salesVolume;  
        store.display = function() {  
              console.log(this.name);  
        };  
        return store;  
    }  
    //利用该函数创建一个对象  
    var store1 = createStoreObject("panda express","No.1,People Street",200000);
    

    (4)使用构造函数创建对象
    构造函数:

    • 构造函数名字首字母统一大写(规范)
    • 构造函数不需要return 就可以返回结果
    • 使用instanceof可以检查一个对象是否是一个类的实例 : 对象 instanceof 构造函数(一个类)
    • 构造函数中的方法可以提到全局作用域中,避免每次创建一个新的实例都定义一个方法,实现方法的复用(但是有缺陷,不安全很可能被覆盖),也相当于工厂模式创建对象
    • 构造函数中的属性和方法前面要加this
      //构造函数  
      function Store(name,location,salesVolume) {  
          this.name = name;  
          this.locaion = location;  
          this.salesVolume = salesVolume;  
      }  
      //创建对象的实例  
      var myStore = new Store("KeyExp","No.1,L.Street",540000); 
      

(5)使用原型(prototype)创建对象
原型对象:

  1. 相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,可以将对象中公有的内容,统一设置到原型对象中

  2. 我们每创建一个函数,解析器都会向函数添加一个属性prototype,这个属性对应原型对象,这个属性对于普通函数没有任何作用

  3. 当函数以构造函数的形式调用时,它所创建的对象都会有一个隐含的属性,指向该构造函数的原型对象,通过prototype来访问
    在这里插入图片描述

  4. 原型对象也是对象,也有原型,层层向上直到一个对象的原型为null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节。当使用一个对象的属性和方法时,会在自身中寻找,自身如果有就直接使用,没有就去原型对象中找,直到找到Object对象的原型,Object对象的原型没有原型,即为null。如果在Object中依然没有找到,则返回undefined
    在这里插入图片描述

  5. 我们打印对象时打印的对象的tostring()方法,我们可以通过修改对象的prototype属性来设置原型对象

  6. 这种方法是对使用构造函数创建对象的改进,使用构造函数创建一个对象时,会把构造函数中的方法都创建一遍,浪费内存,使用原型不存在这个问题。并且创建一个新对象时,可以更改部分属性的值

    function Store() {};  
    Store.prototype.name = "SF Express";  
    Store.prototype.locaion = "Hong Kong";  
    Store.prototype.salesVolume = 1200000000;  
    //创建对象  
    var myStore = new Store();  
    //创建一个新的对象  
    var hisStore = new Store();  
    hisStore.name = "STO Express";//覆盖了原来的name属性  
    
对象属性的操作
  1. 获取:obj.属性名 属性名必须是静态的字符串,不能是通过计算或者字符串的拼接形成的字符串
    obj[“属性名”] 属性名可以是表达式
    有两种情况必须使用第二种方式:
    (1)属性名含有空格
    (2)属性名动态生成,拼接,计算得到
  2. 修改与新增
    修改:直接obj.属性名=属性值
    增加:直接obj.属性名=属性值 自动判断是否存在并增加
  3. 删除
    删除通过delete运算符实现。删除成功返回布尔型true,删除失败也是返回true,所以在删除之前需要判断一个属性是否存在。
    需要注意的是,对象只能删除自己特有的属性,而不能删除继承自原型对象的属性。同时,对象在删除属性时,要防止删除被其他对象继承的属性,因为这样会导致程序出错。
    var Store = new Object();  
    Store.name = "lofo Market";  
    Store.location = "NO.13 Five Avenue";  
    console.log(delete Store.name);//删除成功,输出true  
    console.log(Store.name);//已删除,返回undefined  
    delete Store.prototype;//删除失败,非自有属性 
    
  4. 属性的检测和枚举
    检测:
    (1)“属性名”/“方法名” in obj 返回bool类型 console.log(“name” in school);必须有双引号
    (2)hasOwnProperty()检测对象是否具有某个自有属性或方法。所谓自有属性或者方法,是指对象自己定义的属性或者方法,而不是从原型链上继承来的。
    枚举:
    可枚举性(enumerable),这是对象的属性的一个性质,用户自己定义的属性默认为可枚举,系统内置的对象的属性默认为不可枚举。
    (1)for…in循环 包括继承的属性
    (2)Object.getOwnPropertyNames(); 括号中有一个参数,是要枚举的对象。该表达式将返回对象的所有自有属性的名字,不区分是否可枚举,结果以字符串数组的形式呈现。
    //定义一个school对象  
    var school = {  
      name:"SJTU",  
      location:"ShangHai",  
      studentNum:40000,  
      display:function() {  
            console.log(this.name);  
      }  
    };  
    //为school对象增加一个不可枚举的属性range  
    Object.defineProperty(school, "range", {  
      value: 4,//设置range属性的值  
      enumerable: false//设置range属性为不可枚举  
    });  
    //输出["name","location","studentNum","display","range"]  
    console.log(Object.getOwnPropertyNames(school));  
    
    如果用上面的for…in…循环,range属性是不能够枚举到的。
    (3)Object.keys();
    括号中有一个参数,是要枚举的对象。该表达式返回可枚举的自有属性,以字符串数组的形式。所以这里对属性的要求更加严格,既要求是自有属性,又要求可枚举。
    在这里插入图片描述

3.注意事项

  • 想取稀奇古怪的属性名不用对象名.属性名 用对象名[“属性名”]=“孙悟空” 属性名可以任取包括变量
  • 属性值可以为任意值,包括对象,obj.text.name也成立
  • 用in检查对象中是否有某个属性:属性名 in 对象名 返回为bool类型
  • object为引用数据类型,两个对象相等表示指向同一块地址,改变其中一个对象某个属性的值,另一个对象的相应属性也会改变,但是将其中一个对象设置为null只是将对象保存的地址清空,不会影响另外一个对象的值,比较引用类型的数据比的是引用地址
  • 枚举对象(遍历): for…in 语句,对象中有几个属性循环体就执行几次 for(var k in obj){…} n对应于从前到后的属性名字
    console.log(“属性名:”+k) 列举属性名
    console.log(obj[k]) 列举属性值(只能用中括号的形式)
  • 工厂方法创建对象(利用构造函数创建):將创建对象放在函数里面,不同的属性通过参数传递进去,适合批量地创建对象
  • 包装类:通过这三个包装类可以将基本数据类型转换为对象(对象的适用性更大,可以设置属性和方法这些)
    String() Number() Boolean()

4.作用域

  • 全局作用域
    (1)在页面打开时创建,在页面关闭时销毁
    (2) 在全局作用域中有一个全局对象window,它代表的是一个浏览器的窗口,它由浏览器创建,我们可以直接使用
    (3)在全局作用域中,创建的变量都会作为window对象的属性保存 var a=10 ; console.log(window.a);—10 如果变量不存在undefined,直接输出变量会报错
    (4)创建的函数都会作为window的方法保存

  • 变量的声明提前:使用var关键字声明变量,会在所有的代码之前被声明(但是不会赋值)输出显示undefined

var wholeVar = 1;     //全局变量  
function myTest() {  
   console.log(wholeVar);   //导致这儿会输出undefined
   var wholeVar = 2;   //这块儿的wholeVar会提前到这个函数作用域的最前面,
   console.log(wholeVar);  
} 

以上代码块相当于:

var wholeVar = 1;  
function myTest() {  
    var wholeVar;     //申明提前了,覆盖了全局变量  
    console.log(wholeVar);     //上面只申明,没赋值  
    wholeVar = 2;  
    console.log(wholeVar);  
} 

不使用var关键字,变量不会被声明提前输出会报错
函数的声明提前:使用函数声明形式创建的函数function 函数名(){…}它会在所有的代码执行之前就被创建(直接将函数提前)
使用函数表达式创建的函数,只会声明提前,但是不会提前创建,不能在创建函数之前使用

  • 函数作用域:
    (1)调用函数创建函数作用域,函数执行完毕后,函数作用域销毁,
    (2)每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的,
    (3)当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用如果没有则向上一级作用域寻找,直到找到全局作用域
    (4)在函数作用域中也存在与全局作用域相同的声明提前
    (5)在函数中,不使用var声明的变量都会成为全局变量

6.内置对象

js帮我们实现的一些方法和功能,直接拿来使用即可
学会查js的内置文档,w3school/MDN(可直接输入汉字查阅)

  1. Math对象
    内部含有很多数学计算方法
    Math.max()
    生成随机数:
    0-1 --Math.random();
    0-x --Math.round(Math.random()*x);
    x-y --Math.round(Math.random() * (y-x)+x);

  2. Date对象
    (1)var d=new Date();------打印程序运行到这行代码时的中国标准时间
    (2)var d2=new Date(“12/03/2016 11:10:30”);----创建指定时间的时间对象,构造函数中传递一个表示时间的字符串作为参数,日期格式:月/日/年 时:分:秒

    new Date();//无参数,返回当前时间  
    new Date(millseconds);//参数为距离1970年1月1日8时0分0秒0毫秒的毫秒数,返回对应的时间  
    new Date(timeString);//参数为时间字符串,返回这个时间字符串对应的时间  
    new Date(year,month,day,hour,minute,second,millsecond);//参数为整数序列,分别表示年、月、日、时、分、秒、毫秒,返回这些时间参数对应的一个特定的时间  
    console.log(new Date());//输出Sat Apr 07 2018 18:56:00   
    console.log(new Date(1000));//输出Thu Jan 01 1970 08:00:01  
    console.log(new Date("April 7, 2018 18:00:00"));//输出Sat Apr 07 2018 18:00:00  
    console.log(new Date(2018,4,7,18,0,0,0));//输出Mon May 07 2018 18:00:00  
    

(3)Date的函数:
getDate()获取当前日期对象是几日
getDay()获取当前日期对象是周几(0-6)
getMonth()获取当前日期对象是第几个月(0-11)
getTime()获取当前日期对象的时间戳----指的是从格林威治标准时间的1979年1月1日,0时0分0秒到当前日期所花费的毫秒数(可以/1000/60/60/24转换为天,小时,分钟等) 计算机底层在保存时间时都是使用时间戳
利用时间戳来测试代码执行的性能(在代码执行前后分别测试时间戳再求差值)
(4)日期转字符串
console.log(new Date().toString());//输出Sat Apr 07 2018 20:40:14 GMT+0800 (中国标准时间)
3. String对象
(1)str.charAt(index)根据索引取指定的字符
(2)str.charcodeAt(index) 根据索引取字符的编码
(3)String.formCharCode(Unicode编码)(要注意进制的问题) 根据编码取指定的字符
(4)indexof()检索一个字符串中是否含有指定字符,返回第一个索引值,无返回-1,可以指定第二个参数,指定开始查找的位置
Lastindexof()找到最后一个指定字符的位置
(5)substring:截取一个字符串,和slice()类似,不同的是这个方法不能接受负值作为参数,如果传递了一个负值默认使用0,自动调整参数位置使第一个参数小于第二个参数
(6)substr也是截取字符串,不过第二个参数为需要截取的个数
(7)字符串和正则表达式
split(a,b)
split(a,b)中的参数a是分割符,它的含义是:原来的字符串以该分隔符为边界,分为若干个子字符串(不含该分隔符)。b表示返回的数组的最大长度,不填表示返回所有子字符串组成的数组。如果要实现分割每一个字符,需要用空字符串""作为分隔符.
javascript var str = "012304560789"; var arr1 = str.split("");//返回["0","1","2","3","4","5","6","7","8","9] var arr1 = str.split("0");//返回["123","456","789"]; var arr2 = str.split("0",2);//返回["123","456"];
方法中可以传递一个正则表达式作为参数,这样方法就会根据正则表达式去拆分字符串(这个方法即使不设置全局匹配也会全局拆分)
var tmp=a.split(/[\s+,]/g);以逗号或者空格分割字符串为单词数组
search() 可以搜索字符串中是否含有指定内容,它与indexof不同的是它可以接受一个正则表达式作为参数,然后会根据正则表达式去检索字符串(特别适用于检索或的情况) (设置全局匹配无效,只会查找第一个)
match() 可以根据正则表达式,从一个字符串中将符合条件的内容提取出来,默认情况只会找到第一个符合要求的内容,找到以后就停止检索,我们设置匹配模式为全局模式即可找到所有符合条件的内容,可以为一个正则表达式设置多个匹配模式,且顺序无所谓,mach()会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果 str.match(/[a-z]/ig);

```javascript
<script>
        var sa="123abf";
        var arr=sa.match(/[a-z]/ig);   
        console.log(arr);//["a", "b", "f"]
        sa="123a";
        arr=sa.match(/[a-z]/ig);   
        console.log(arr); //["a"]
    </script>
```
==replace()== 可以将字符串中指定内容替换为新的内容       参数:1.被替换的内容,可以接受一个正则表达式作为参数(替换多个全局)   2.新的内容

js下标和python一样,可以使用负数表示倒数第几个

7. 正则表达式

  1. 用于定义一些字符串的规则,计算机可以根据正则表达式,来检查一个字符串是否符合规则,或者将字符串中符合规则的内容提取出来

  2. 创建对象:
    var reg=new RegExp(“正则表达式”,“匹配模式”);
    var reg=/正则表达式/匹配模式—前者更灵活(适用于包含变量时),后者更简单
    匹配模式:
    i:忽略大小写
    g:全局模式: (找出所有满足要求的子字符串)
    已知match()函数返回由匹配结果组成的数组,如果没有匹配到返回null。

    var pattern = /[a-z]/g;//全局匹配小写字母  
    console.log("a1b2c3".match(pattern));//输出["a", "b", "c"]  
    

    m多行模式: m在多行模式中执行匹配,即:符号^不仅匹配整个字符串的开头,还匹配每一行的开头,&不仅匹配整个字符串的结尾,还匹配每一行的结尾。

    var pattern = /[0-9]$/m;//多行匹配以数字结尾的字符串  
    		var string = "1\nhello";//字符串在两行,中间的\n是换行符  
    		console.log(pattern.test(string));//输出true 
    
  3. 使用:reg.test(“字符串”)

  4. 简单分类:
    (1)字符串字面量: 这些数字和字母组成的字符串称为字符串字面量。
    (2)字符类:
    第一种:字符类被放在中括号之内。[ABCD]表示一个字符类,它和A、B、C、D中的任何一个都匹配。
    第二种:字符类还有一种较为简单的表示方法,比如\d和[0-9]的含义相同:表示任意的数字。
    在这里插入图片描述
    (3)选择: 选择使用符号|来实现,|作用到整个式子中的,即整个的正则表达式会被选择符号一分为二,一个字符串和该表达式匹配,要么匹配左侧的整个子正则表达式,要么匹配右侧的整个子正则表达式,如果想要限制|符号的作用范围,需要将目标作用范围用圆括号包含在内

    var pattern = /0|1ABC/;  
    pattern.test("0");//true,和左侧的整个子正则表达式0匹配  
    pattern.test("1");//false,和右侧的整个子正则表达式1ABC不匹配  
    var pattern = /(0|1)ABC/;//选择符号仅仅作用在0和1上,而不是像上面的例子一样作用在整个正则表达式中  
    pattern.test("0")//false,注意这里和上面的例子不同  
    pattern.test("0ABC");//true  
    pattern.test("1ABC");//true  
    

    (4)分组: 用()来分组,用括号分组后,可以像使用单独的项一样使用子表达式,即可以+、?等符号操作它

    var pattern1 = /((hello){2})+/;//hellohello至少出现一次  
    var pattern2 = /(he|she)?/;//he或者she出现一次或不出现  
    console.log(pattern1.test("hello"));//输出false  
    console.log(pattern1.test("hellohello"));//输出true  
    console.log(pattern2.test("he"));//输出true  
    console.log(pattern2.test("it"));//输出true 
    

    (5)引用: 就是在后面使用和前面完全相同的子表达式。我们把所有的带圆括号的子表达式编个号,从1开始。

    var pattern = /(A|B)(\d{5})not([0-9])/;//匹配字母A或者B后面紧跟5个数字,后面再紧跟字符串not,后面再紧跟1个数字  
    

    其中(A|B)编号为1,(\d{5})编号为2,([0-9])编号为3,中间的not不在圆括号内,不参与编号。如果子表达式里面嵌套另外一层子表达式,引用时如何编号?简单来说,以子表达式前面的左括号的个数为准。注意: 这里的引用是对与子表达式匹配的字符串的引用,而不是简单的对子表达式的引用。例如:

    var pattern = /([0-9])AA\1/; //pattern不等价于正则表达式([0-9])AA[0-9],而是指字符串AA后面的数字必须和前面的相同,即形如1AA1这样的字符串。
    

    回文串:var pattern = /([a-z])([a-z])([a-z])\3\2\1/;

  5. 简单示例:
    (1)创建一个正则表达式,检查一个字符串中是否含有a或b:reg =a|b
    JavaScript会先挑选左边的子正则表达式进行匹配,a匹配成功了就会返回a
    (2)创建一个正则表达式,检查一个字符串中是否有字母:reg=/[abcdefg…]/ = /[a-z]/ = /[A-z]/表示任意字母,[]里面的内容是或的关系
    (3)reg=/a[abe]c/ —abc aac aec[]表示或
    (4)reg=/[^ab]/ 表示除了ab,在中括号内最前面加上^符号表示反向匹配:匹配和中括号内的正则表达式不匹配的所有字符
    (5)检查一个字符串中是否以a开头:^表示开头 reg=/^a/,注意是放在中括号外面
    (6)检查一个字符串是否以a结尾:¥表示结尾reg=/a$/
    (7)既要是开头也要是结尾(只有一个a) /^a¥/
    (8)检查是否是手机号:var phoneReg = /^1[3-9][0-9]{9} $ / 直接一个一个数字地比较
    (9)var phoneReg = /1[3-9][0-9]{9}/表示是否有手机号(没有规定他是否是开头或者结尾)
    (10)匹配单词:\b表示英文字母和非英文字母之间的界限,\B用来匹配非单词的边界,两者都不占用字符

    var boundaryPattern = /\bOK\b/;//匹配单词OK  
    console.log(boundaryPattern.test("OK"));//true  
    console.log(boundaryPattern.test("rewa OK de"));//true  
    console.log(boundaryPattern.test("sa,OK"));//true  
    console.log(boundaryPattern.test("OKNot"));//false  
    var pattern = /\Bed/;//ed左侧不能是单词的边界  
    console.log(pattern.test("played"));//true  
    console.log(pattern.test("edu"));//false  
    
    
  6. 量词: 可以设置一个内容出现的次数
    量词只对它前边的一个内容起作用
    {n}正好出现n次
    {m,n}出现m到n次
    { m,}m次以上
    reg=/a{3}/ -----aaa
    reg=/ab{3}/-----abbb
    reg =/(ab){3}/----ababab
    reg =/ab{3}c/-----abbbc
    reg =/ab{1,3}c/-----一次到三次(1,2,3都行)
    在这里插入图片描述

  7. 转义字符:
    单独的.表示任意字符,单独的+、*都有特殊的表示意义,那怎么表示原生的+或者 *呢,使用转义字符
    使用转义字符.表示. (特殊字符都要使用转义字符)
    注意: 使用构造函数时,由于它的参数是一个字符串,而\是字符串中转义字符,如果要用\则需要使用\来代替
    reg=new RegExp(“\\.”)----> /\./

         //?至少出现一次;
        var pattern1=/\?{1,}/;
    	//+只出现三次;
    	var pattern2=/\+{3}/;
    
    	//{}最少出现一次,最多出现两次;
    	var pattern3=/\{}{1,2}/;
    	//\出现一次或者不出现;
    	var pattern4=/\\?/;
    
  8. 去除空格就是使用“”来替换空格
    去除开头和结尾的空格:str=str.repalce(/^\s*|\s*$/g,“”)也可以将*改为+(*表示0个或多个+表示1个或多个)
    \s表示空格

  9. 一般写正则表达式需要前面加^后面加¥否则都是找有满足条件的内容就行,需要用的时候在网上找

零碎知识点

  1. js中的switch语句控制表达式的数据类型可以是字符串、整型、对象类型等任意类型
  2. 在javascript中一切都是对象,函数也可以当做对象,即可以作为参数传入到其他函数中
    //求最大值  
    function getMax(a,b) {  
        return a>b?a:b;  
    }  
    //求最小值  
    function getMin(a,b) {  
        return a<b?a:b;  
    }  
    //下面这个函数以函数作为参数,并最终返回一个值  
    function getM(func,num1,num2) {  
        return func(num1,num2);  
    }  
    getM(getMax,1,2);//返回2  
    getM(getMin,1,2);//返回1 
    
    但是我觉得没必要,直接在函数中调用其他函数就可以了,还没那么麻烦
    3. js处理异常
    系统内置错误类型;
    try {  
        console.lo("JavaScript");  
    }catch(err) {  
        window.alert("发生错误,错误信息:"+err.message);  
    }  
    console.log("错误已处理完毕。"); 
    
    创建自定义错误 throw exception
    exception可以是字符串、数字、逻辑值或者对象,这样的错误也会被catch语句块捕获。
    Error是对象,括号内的参数是err.message属性的值。
    try{
    	if(a<0) throw new Error("negative cannot be rooted");
    	else if(a==0) throw new Error("zero cannot be numerator");
    	return 1/Math.sqrt(a);
    }catch(err)
    {
    	return err.message;
    }
    
    Error是字符串:
    try{
    		if(a<0) throw "negative cannot be rooted";
    		else if(a==0) throw "zero cannot be numerator";
    		return 1/Math.sqrt(a);
    	}catch(err)
    	{
    		return err;
    	}
    

以上两种方式返回的都是提示的字符串信息

其他特殊注意点

  1. console.log()只在控制台输出,不显示到页面上 document.write()显示在网页上,并且是以html语言的形式显示,即转换成html语句,如果需要换行什么的就需要同时输出< br/>或者< p>

  2. 在事件最后return false ----取消默认行为,IE8不支持

  3. js严格区分大小写(html不严格区分)

  4. 每一条语句以分号结束,没加分号,浏览器会自动加,但是会消耗一些系统资源,而且有些时候,浏览器会加错分号,必须写

  5. unicode编码:console.log(“\u0054”) 后面为四位unicode编码,部分字符浏览器不支持,不能输出
    在网页中使用unicoude编码:< h1 >&#34< /h1 >后面为十进制数字,&#十进制
    部分图标可以用字符来代替使用

  6. 垃圾回收:js会自动回收,但是需要我们将自己不用的对象设置为null,让js回收

  7. ==只比较数值是否相等,忽略数据类型, ===比较数值的同时还需比较其数据类型

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值