JS基本语法

文章热词:JS,JavaScript

日期:2019-03-01 15:12 by Mr. Yang 1199 0 收藏
我要分享

摘要:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

1.基础

1.1.变量声明    1.1.1 关键字var 储存数据的内存空间1.2.数据类型    1.2.1 基本数据类型 ; number string boolean null undefined
    1.2.2 复杂数据类型 object function1.3.类型检测
    1.3.1 typeof 检测基本数据类型  (语法:typeof 变量||字面量)
        数字类型返回 "number" 字符串返回"string" boolean返回"boolean"
        复杂数据类型统一返回object 
        特殊 null返回object  function返回function
    1.3.2 instancof 判断对象的实例 
        语法:实例对象 instancof 构造函数
        返回值 true || false
    1.3.3 constructor  返回对象的构造函数
        语法:obj.constructor 
        返回构造函数名
    1.3.4 Object.prototype.toString.call();
        字符串返回:"[object String]"
        数字返回:"[object Number]"        null返回:"[object Null]"        undefined返回:"[object Undefined]"        object返回:"[object Object]"        boolean返回:"[object Boolean]"
        数组返回:"[object Array]"
1.4 类型转换
    1.4.1 转换成number  方法:Number()、parseInt() 、parseFloat() 通过运算符转换 转换不成功返回NAN
    1.4.2 转换成:string  方法:.toString()、String、通过字符串拼接 +
    1.4.3 boolean  Boolean() 、!!取反 
        值得注意的是 :0 '' null undefined NaN //会转换成false  其它都会转换成true1.5 操作符
    1.5.1 算术运算符 +-/* 
    1.5.2 一元运算符 ++ -- !
    1.5.3 赋值运算符 = += -+ /+ *+
    1.5.4 逻辑运算符 && || 
    1.5.5 关系运算符  > < >=  <=
    1.5.6 相等运算== != !== ===
    1.5.7 优先级 () > 一元> 算术 > 关系 > 逻辑(先&&后||) > 赋值
    不同类型直接操作符号隐式转换
        转换规则:
                  有数字或者boolean 转数字比较 (++ -- 运算符相当于加一 减一所以是转成数字)
                   没有数字和bool 有字符串 转换成字符串
               复杂数据类型比较地址
            其中值得注意是 等等 和 全等的比较转换                      x                    y                    = =       = = =  

                    0                    false                true     false
                    ""                   false                true     false
                    ""                   0                    true     false
                    "0"                  0                    true     false
                    "17"                 17                   true     false

                    null                 undefined            true     false
                    null                0                    false    false
                    null                 false                false    false
                    undefined            false                false    false
                    0                    NaN                  false    false
                    "foo"                NaN                  false    false
                    NaN                  NaN                  false    false

                    1. null == undefined  返回的是true
                    2. null 和undefined 和其他类型判断相等的时候,不转换类型
                    3. 一般只要有NaN参与的运算,返回都是NaN NaN转换成boolean 是false  .  NaN != NaN 返回的是true;
    
1.6 流程控制语句
    1.6.1 分支结构
          1:if(){...}else {..}           2.switch (){            case value:             break;             default:              break;
           }    1.6.2 三元运算 
        语法: 条件? 表达式1 :表达式2
    1.6.3 循环语句         for(var i=0;i<10;i++){ 循环体 }        for(var key in obj){}        while(条件){循环体 }       do{ 循环体 }while ( 条件);  //至少执行一次
       1.7 数组    1.7.1 创建数组          1、字面量var arr = [];          2、构造函数 var arr = new Array();    1.7.2.数组操作
          通过下标  增删改1.8 函数    1.8.1 函数三要素  函数名 参数 返回值    1.8.2.声明    
        1.字面量 var fn = function(a,b,c){return}
        2.函数声明  function fn(){}
        3.函数调用    函数名()        arguments对象  每个函数内部都有一个arguments对象与形参对象 成映射关系
1.9.对象
    1.9.1.概念:一类事物的抽象,在编程语言中理解成无序的属性和方法的结合
         创建对象
             1.字面量 var obj = {};             2.内置构造函数 var obj = new Object();            3.工厂模式 
                语法:function createP(name, age) {                        var o = new Object();
                        o.name = name;
                        o.age = age;
                        o.sayUrl= function() {
                           alert(this.age);
                        }                        return o;
                        }                    var obj = createP("OTT","18");            4.自定义构造函数
                语法:function P(name ,age){                    this.name = name;                    this.age = age;
                }
           行内约定:一般来说构造函数首字母大写 
    1.9.2 属性操作         1.通过 点语法 中括号语法操作    
            obj.name 或者 obj["name"]         2.delete obj.key 删除对象属性1.10.内置对象    1.10.1 Array 数组的方法
        array.push(value);//将一个或多个元素添加到数组的结尾,返回length
        array.pop();//从数组中删除最后一个元素 改变了数组的长度  返回被删除的元素
        array.unshift(value);//将一个或多个元素添加到数组的开头 返回length
        array.shift();//从数组中删除第一个元素,改变了数组的长度 返回被删除的元素
        array.reverse();//翻转数组,返回翻转过的数组 原数组不变
        array.sort();//默认排序顺序是根据字符串Unicode码点 可以传函数.sort(function (a,b){return });返回值<=0 位置不变 返回值大于0 交换位置  原数组发生改变
        concat:数组合并,不会影响原来的数组,会返回一个新数组
        join(str);以str将数组连接成字符串 
        slice(begin, end):复制数组的一部分到一个新数组,并返回这个新数组
        splice(begin,num,val); 在begin位置删除num个元素 并将val填补到该位置  返回被踢除的元素 原数组发生改变
        forEach(function(ele,i){ });遍历数组的每一项 无返回值
        map(function(ele,i){ });为数组的每项执行回调函数并将返回值存到数组 返回这个数组 原数组不变 (注意不会忽略数组的 空项(值为null undefined...) 实际上数组的内置对象都不会忽略空项目)
        filter(functiong( ele ,i){});为数组的每项执行回调函数并将返回值为true的项目 存到数组 返回这个数组 原数组不变
        reduce(functin(a,b){ return a;},a);为数组的每项执行回调函数 并将a带入到下次循环 最后返回a  如果不传参数那么默认是前一项 原数组不变    1.10.2 String 对象
        charAt("要查询的字符")        //获取指定位置处字符
        charCodeAt(index)      //获取指定位置处字符的ASCII码
        indexOf:获取某个字符第一次出现的位置,如果没有,返回-1
        lastIndexOf:从后面开始查找第一次出现的位置。如果没有,返回-1
        trim();//去除字符串两边的空格,内部空格不会去除
        toUpperCase()//全部转换成大写字母
        toLowerCase()//全部转换成小写字母
        concat字符串拼接返回新的字符串 一般都用 + 号
        slice(start,end)包含头不包含尾返回一个新的字符串,end为负值从后往前  原字符串不变 
        substring(start,end)包含头,不包含尾 返回一个新的字符串 原字符串不变
        substr(从start开始,截取length个字符)(推荐)
        split:将字符串分割成数组,原字符串不改变(很常用)
        replace(searchValue, replaceValue)//参数:searchValue:需要替换的值    replaceValue:用来替换的值
    1.10.3 Data 日期对象 创建:var d = new Data();或者 Data.now();
        d.getTime()        // 返回毫秒数和valueOf()结果一样,valueOf()内部调用的getTime()
        d.getMilliseconds() 
        getSeconds()  // 返回0-59
        getMinutes()  // 返回0-59
        getHours()    // 返回0-23
        getDay()      // 返回星期几 0周日   6周6
        getDate()     // 返回当前月的第几天
        getMonth()    // 返回月份,***从0开始***
        getFullYear() //返回4位的年份  如 2016
    1.10.4 Math 算术对象        Math.PI        // 圆周率
        Math.random()// 生成随机数
        Math.floor()/Math.ceil()// 向下取整/向上取整
        Math.round()// 取整,四舍五入
        Math.abs()    // 绝对值
        Math.max()/Math.min()// 求最大和最小值
        Math.sin()/Math.cos() // 正弦/余弦
        Math.power()/Math.sqrt() // 求指数次幂/求平方根
    内置对象中Math是对象 而其他的是构造函数 需要用new构建    
1.11 值类型与引用类型     1.值类型:简单类型,变量在存储的时候,存储的是值本身    2.引用类型:复杂类型,变量在存储的时候,存储的是对象的地址

2.面向对象编程

3.1.基本概念    3.1.1.什么是对象?
        我们常说万物皆对象,很笼统,在计算机中最早在c语言中把具有特定长度的类型,称作为对象类型;后来我们说内存中的一块有效区域叫对象;
        我把对象理解成具有某些属性和方法的变量 而创造出这些变量的抽象叫做类    3.1.2.什么是面向对象?
        面向对象是一种思想,通过调用对象的某种方法和属性来完成某件事情,当然这个对象是我们创造出来的,我们把可能在多个地方会使用的到的功能赋给对象,在调用    3.1.3.特性    
        1.封装性  只需要关注对象提供的方法如何使用,而不需要关心对象对象的内部具体实现        2.继承  一个对象没有的一些属性和方法,另外一个对象有,拿过来用,就实现了继承        3.多态 指在一棵继承树中的类中可以有多个同名但不同方法体以及不同形参的方法。多态有两种情况:覆盖和重载3.2.创建的方式    3.2.1.内置构造函数Object
        var obj = new Object();    3.2.2.对象字面量        var obj = {};    3.2.3.工厂函数
       本质上就是函数内 返回对象        function p (x,y){            retrun {name : x,age : y}
        }    3.2.4.自定义构造函数
        行内通约:首字母大写
        构造函数一定要使用new关键字            1.new 的作用    
                在内存中开辟空间(对象obj)
                调用构造函数
                让构造函数的this指向新的对象  本质上就是在构造函数中var this = obj;
                返回 this3.3.原型    3.3.1.原型基本概念prototype        1.prototype是一个对象        2.所有函数自带prototyoe属性        3.作用:存储公共方法    3.3.2.构造函数、原型、实例的关系        1.实例化对象能够访直接问构造函数的prototype        2.构造函数的.prototype == 实例的.__proto__   原型的constructor 指向构造函数    3.3.3.__proto__属性 原型连        1.所有对象都有 __proto__ 指向构造函数的prototype        2.构造函数的.prototype == 实例的.__proto__  例Array.prototype == [].__proto__    3.3.4.属性查找原则        1先在自身寻找
            当实力具有某个属性时自动屏蔽原型对应属性 哪怕属性值为null 通过delete操作符完全删除属性重新指向原型        2.找不到再沿着__proto__一直往上找 找不到返回undefined
    3.3.5.constructor属性        1.原型对象prototype 包含constructor 指向构造函数3.4.原型链    3.4.1.原型链基本概念
        对象的原型和原型的连接        Object是顶层对象的构造函数 Object.prototype.__proto__ ==null
        3.4.2.Object.prototype成员        1.constructor  指向了Object 构造函数        2.对象.hasOwnProperty(属性)  判断某个属性是否来自实例             1.""属性""in""对象"" in操作符只要通过对象能够访问的可枚举的属性就返回 true
        3.构造函数.prototype.isPrototypeOf(对象)  确定原型和实例之间是否存在关系        4.对象.propertyIsEnumerable(属性名) 判断对象的属性是否可枚举 
            注意:只能判断自身属性,原型上的需要用.__proto__.propertyIsEnumerable();
            设置不可枚举属性 Object.defineProperty(对象,属性,{value : "",enumerable : false})           5.A.isPrototypeof(B),判断A是否在B的原型链上           6.toString()  当对象需要隐式转换时系统自动调用  返回值 [object 类型]
            常用Object.prototype.toString.call("");做类型判断        7.toLocaleString() 在没重写的情况下跟toString一样 内置对象Date String ..重新了次方法        8.valueOf() 返回 将对象转换成简单类型 如果转换不成功 再次调用toString    3.4.3.Object 内置方法( 函数也是对象也可以内置方法)        1.Object.keys(对象)返回一个包含所有可枚举属性的字符串数组           2.Object.getOwnPropertyNames()返回实例的所有属性 无论是否可以枚举        3.Object.getPrototypeOf(对象) 返回对象的原型    3.4.4.instanceof运算符  判断对象是否是构造函数的实例

3.函数

6.1.定义函数的三种方式    6.1.1.字面量 var fn = function (){}    6.1.2.表达式 function fn(){}    6.1.3.构造函数式:(作用 执行字符串形式的代码 )        //参数 (arg1,arg2....,函数体) 当只有一个参数式默认为函数体

        //所有参数都必须是字符串
    var fn = new Function(""a"",""a"",""console.log(a+b)"");
    匿名函数自调用 原理将函数变成表达式
    (function (){})();
    (function (){}());
    !function (){}(); //通过运算符将匿名行数变成表达式6.2.eval 的介绍    6.2.1 作用 
        1.将字符串当代码执行        2.将json数据转换成js代码    6.2.2 利用eval 执行字符串的特性 将JSON数据转换成js对象        eval(""(""+json+"")"");    6.2.3.JSON介绍
        概念:JSON是数据格式 用于多语言交换
        对象转换成JSON JSON.stringify(对象) 返回json字符串        JSON.parse(json) 返回js对象6.3.函数调用this指向    6.3.1 函数调用模式  当函数被调用this指向window
        格式 : 函数名();    6.3.2 方法调用模式  当函数是某个对象的方法this指向该对象
        格式 : obj.fn();    6.3.3. 构造函数调用模式  this指向新对象
        格式  var obj = new 函数名();    6.3.4. 方法借调模式 call apply bind         1. call 作用: 调用函数并指定this指向 
                格式:fn.call(this,arg1,agr2...); 第一个参数如果没有那就是指向window 后面的参数规则和函数一致         2. 伪数组 扩展
                特点 1、有length属性 
                     2、有下标属性 0 1 2 3....                      3、不能用数组的方法
                   借调数组push方法                          Array.prototype.push.call(伪数组,“参数”);
                          ;[].join.call(伪数组,""-"");        3.apply 
            参数:第一个参数是 this指向
              第二个参数是实参数组 哪怕只有一个实参也必须实参        4.bind 给函数绑定一个this指向 原函数this指向不变 返回一个指定this的新函数
            格式:var newfn = fn.bing(obj);6.4 函数也是对象    1.Function.prototype == fn.__proto__;
        fn.__proto__.__proto__== Object.prototype;
    函数顶层 Funtion.__proto__ == Funtion.prototype6.5 Function.prototype成员    1.arguments 实参列表 伪数组 
    2.length 函数形参的长度    3.name 函数名 函数定义以后不可更改    4.caller 返回函数 位于哪个函数中6.6 预解析    6.6.1 铺垫  
        1. 字面量:(直接量) 从字面能看出值和类型 55 “55”true [] {}        2.变量: 必须要声明才能使用的存数值的内存空间
            ***浏览器可以直接字面量 而不需要提前声明    6.6.2 作用 目的        1.把变量和函数提升到作用域的顶端        2.开辟存储空间 存储变量    6.7.3.规则 
            1.全局                1、将变量声明提升 赋值不提升 同名覆盖                2、将函数声明 提升整个函数体 同名覆盖                3、执行代码 执行过程中忽略所有声明 直接赋值            2.函数 形成在函数执行前 执行结束释放空间                1、将变量声明和形参提升 赋值不提升 同名覆盖                2、将形参数和实参值相统一                3、将函数声明 提升整个函数体 同名覆盖                4、执行代码 执行过程中忽略所有声明 直接赋值6.7 作用域与作用域链    6.7.1 铺垫 :
        全局变量 :定义在全局的变量 全局都可以访问
        局部变量:定义的函数体内部的变量 只有在函数体内可以访问    6.7.2.作用域概念
            作用域是一条规则 决定变量定义存储在哪里 
            查找变量时在自身作用域链上查找    6.7.3.作用域链        1、多层嵌套函数形成的链式关系        2、作用 存储自身可访问的变量范围        3、变量查找原则 现在自身作用域查找 查找不到在去自己是作用域链上查找        4、当整个作用域链都没有时候            1、如果是调用则报错            2、如果是赋值操作 那么就在全局创建一个变量并赋值(隐式全局)6.8 词法作用域    6.8.1 又叫 静态作用域 
         在函数声明时作用域已经确定 跟函数的调用无关6.9 递归函数    1.概念 : 函数内部直接或者间接调用自己叫递归    2.注意 : 递归一定要有出口[结束条件] 否则超出最大调用栈6.10 闭包    1. 概念 将函数A内部的函数B保存到A的外部形成闭包
        格式 当一个函数被保存到外部时一定产生闭包        function fn1(){            var num = 1;            function fn2(){
                 num++;    
                }            return f2;
        }        var temp = fn1();    2 作用 将函数内部的变量保存到函数外部使用    3 内存问题  垃圾回收
          引用计数 当一个引用类型有零个指针指向的时候 系统会自动回收
        环境标记 进入环境是标记

4.正则表达式

7.1.正则创建    7.1.1.概念 : 用于匹配规则的表达式    7.1.2.作用 :字符串校验    7.1.3.创建    

        7.1.3.1 构造函数 var reg = new RegExp(/\d/,g);        7.1.3.2 字面量 var reg = /^\d/g;7.2.元字符    7.2.1 . 除了换行和回车以外的任意字符[^\n]    7.2.2 \. 匹配 .    7.2.3 \d 所有的数字字符[0-9]    7.2.4 \D 所有的非数字字符[^0-9]    7.2.5 \w 所有的单词字符 [a-zA-Z0-9_]    7.2.6 \W 所有的非单词字符[^a-zA-Z0-9_]    7.2.7 \s 空字符 [\t \n 空格]    7.2.8 \S 非空字符[^\t\n]    7.2.9 |或优先级最低 ()表达式优先级最高 []一个字符的范围        7.2.10 [^]非 ^开始  $结束    /^abc$/精确匹配 必须是同一个单词    7.2.11.量词
        *  0次或0次以上 {0,}
           +  1次或1次以上 {1,}
        ?  0次或者1次   {0,1}
        {n,m}  出现n到m次
        () $1 $2 表示表达式匹配到的项7.3.正则匹配    7.3.1.reg.test(str);    7.3.2.参数
        g 全局匹配 global
        i忽略大小写ignore7.4.字符串方法    7.4.1.str.replace(//g,"""");
    7.5.正则提取
            str.match(reg) 返回数组


下一篇:常用的Meta标签写法和作用


评论