JavaScript学习笔记(1)

JavaScript 专栏收录该内容
48 篇文章 2 订阅

1.Javascript 简介

    诞生于1995年,当时的主要目的是处理由以前服务器语言负责的一些没有填写的必填域,是否输入了无效的值。在web日益流行的同时,人们对客户端脚本语言的需求也越来越强烈,那时绝大多数因特网用户使用的速度仅为28.8kbit/s的猫上网,但网页的大小和复杂性却不断增加,为完成简单的表单验证而与服务器交换数据只会加重用户的负担。    
    1995年2月 计划在Netscape Navigator2浏览器中开发名为LiveSript的脚本语言,同时在浏览器和服务器中使用,为了赶在发布日期前完成LiveScript开发,Netscape和sun公司建立了一个开发联盟,在Netscape Navigator2发布的前夕,为了搭上媒体上热炒的java顺风车,临时把LiveScript改名为javaScript。在Navigator3发布不就,ie3就加入了名为JScript的javaScript的实现。这意味着有两个不同的javascript版本:javascript,jscript.当时并没有标准规定JavaScript的语法和特性。 
    1997年,JavaScript1.1 为蓝本的建议被提交给了ECMA(European Computer ManufacturersAssociation欧洲计算机制造商协会)。定义了ECMAScript新脚本语言的标准(ECMA-262)。第二年,ISO/IEC(International Organization for Standardization and International Electrotechnical Commission,国标标准化组织和国际电工委员会)也采用了ECMAScript作为标准(ISO/IEC-16262),自此浏览器开发商就致力于将ECMAScript作为各自JavaScript实现的基础。  
    简单的理解就是:网景公司推出javascript后所取得的成功,微软推出了JScript,还有CEnvi推出ScriptEase等,这些都与JavaScript同样可在浏览器上运行.为了统一规格,因为JavaScript兼容于ECMA标准,Ecma国际以JavaScript为基础制定了ECMAScript标准,所以javascript也称为ECMAScript。

 2.页面开发使用的基本前端技术

    html+css+javscript
    这个是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位和效果渲染,再通过JavaScript实现元素相应的动态变化效果.

3.富客户端概念

    3.1 网络应用程序经历了从胖客户端到瘦客户端的发展历程,胖客户端是相对于传统的C/S结构的网络应用程序来说的,
    而瘦客户端一般都是相对于B/S结构的Web应用来说的
    3.2 富客户端(Rich Client)简介富因特网应用程序(Rich Internet Applications,RIA)利用具有很强交互性的富客户端技术来为用户提供一个更高和更全方位的网络体验。富客户端结合了桌面应用程序和b/s的一些优点,但本质还是b/s应用。
    3.3 富客户端技术充分利用本地机器的处理能力来处理数据,而不需要把某些数据发送到服务器处理,充分利用了本地机器的资源。
    3.4 ajax jquery flex Silverlight JavaFX等都属于构建富客户端的技术
    3.5 javascript也是构建富客户端要是使用一个最基本的技术

4.javascript和java的区别

    4.1 javascript与Java是由不同的公司开发的不同产品:
        最早的javascript是Netscape公司的产品,其目的是为了扩展Netscape Navigator(网景导航者浏览器)功能,而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言.
        而Java是SUN Microsystems公司推出的新一代面向对象的程序设语言,常用于后台代码的开发.
   4.2 于1995年由Netscape公司的Brendan Eich首次设计实现而成 。由于Netscape公司与Sun公司合作,Netscape高层希望它看上去能够像Java,因此取名为JavaScript
 
   4.3 javascript主要运行在客户端浏览器中(脚本语言),而且java主要是运行在后台服务器中

5.完整的JavaScript包含的三个部分

    5.1 ECMAScript规范,描述了该语言的语法和基本对象的定义;
        其主要包括
            1,语法
            2,数据类型
            3,语句
            4,关键字
            5,保留字
            6,操作符
            7,对象
    5.2 文档对象模型(DOM),描述处理网页内容的方法
        DOM(Document Object Model) 是针对XML但经过扩展用于HTML的应用程序编程接口。DOM将整个页面映射成一个多节点结构

        例如:html代码: 

            <html> 
                <head> 
                    <title>hello</title> 
                </head> 
                <body> 
                    <p>你好</p> 
                </body> 
            </html> 
            dom模型
              html
            /           \
          head     body
             |             |
           title         p
             |            |
           'hello'    '你好'
    5.3 浏览器对象模型(BOM),描述与浏览器进行交互的方法
        BOM(Browser Object Model),开发人员可以使用BOM控制浏览器显示的页面以外的部分。弹出新浏览器窗口;移动,缩放,关闭浏览器的功能;提供浏览器详细信息的navigator对象;提供浏览器所加载页面的详细信息的location对象;提供用户显示器分辨率详细信息的screen对象;对cookies的支持;支持XMLHttpRequest,IE中的ActiveXObject自定义对象  

6.兼容性

   JavaScript的三个组成部分,在当前五个主要浏览器(IE,Firefox,Chrome,Safari,Opera)中得到了不同程度支持,其中,所有浏览器对ECMAScript支持大体都还不错,并且支持程度越来越高,但对DOM的支持彼此相差较多,对已经正式纳入HTML5标准的BOM来说,尽管各浏览器都实现了某些总所周知的共同特性,但其他特性还因浏览器而异。   

7.javascript语言的特点

    7.1 解释执行的脚本语言
        它的基本结构形式与c、c++、java十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。【它是需要嵌入到html页面中,让浏览器来解释执行的。】  
    7.2 基于对象的语言      
        javascript是一种基于对象的语言,和java语言不同,javascript虽然有面向对象的思想在,但这个并不是它的重点
    7.3 简单性
       它是一种基于java基本语法语句和控制流之上的简单而紧凑的设计, 基本java中的语法都可以使用到javascript中,所以对于学过java语言的情况下,学习javascript也相对比较简单.
    7.4 弱类型语言
        javascript的语法松散要求不严谨,比如:一个变量在之前没有声明的情况下就可以直接使用,声明变量的时候也可以不声明变量的类型等.
    7.5 事件驱动
        我们在页面上的操作,例如 左键/右键的单击、双击,键盘上面的按键的监听,鼠标的移动 鼠标拖拽 鼠标滚轴的滚动等等事件的响应处理都可以交给javascript  
    7.6 动态性
        javascript可以直接对用户输入做出响应,无须经过web服务程序.
    7.7 安全性
        javascript不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。  
    7.8 跨平台性
        javascript是依赖于浏览器,与操作环境无关,只要能运行浏览器的计算机,并支持javascript的浏览器就可正确执行,但是不同浏览器以及同一浏览器的不同版本对javascript的支持是不同的(浏览器的兼容性)  

8.在页面中使用javascript的常见情况

    1.动态改变网页的设计布局(操作页面中的标签元素)
    2.验证表单
    3.检测浏览器、控制浏览器的行为
    4.操作cookies
    5.处理页面中触发的事件
    6.在使用ajax的时候也要用到javascript
    7.很多前端的框架都是基于javascript的封装  

9.javascript在页面中的位置

     <script>标签元素,常见的有如下几个属性
    language: 已废弃
    type     : 可看做是language的替代属性,表示编写代码使用的脚本语言的内容类型,默认是text/javascript
    src     : 表示包含要执行代码的外部文件
    charset : 指定src属性指定的代码的字符集,大多数浏览器会忽略这个值。
    defer     : 表示脚本可以延迟到文档全部被解析和显示之后再执行(只针对外部脚本文件) 
    1.直接嵌入在页面中
        须位于 <script> 与 </script> 标签之间,一般放置在 HTML 页面的 <body> 或者 <head> 标签中:
            <script type="text/javascript"> 
                //在这里写JS代码 
            </script>
        注意:js代码所写的位置会影响到代码的执行效果,因为浏览器会从上到下去加载整个html页面文件,如果js代码是写在head里面,就是先执行js代码然后加载页面标签元素,如果是写body标签中的下面,则表示先加载html页面元素然后在执行js代码.
    2.写到标签元素的事件属性里面
<div οnclick="javascript:alert('hello world')"> 
    3.写到一个外部的文件里面(.js结尾的文件)
        写到一个js文件中,然后哪个页面使用就引入过来,类似于css样式表的引用
        例如:
        <script type="text/javascript" src="js/test.js"></script>
        注意:
            1.不要在<script>标签中再填写其他js代码,否则将会忽略
            2.src 可以跨域访问 。例如:http://cdn.code.baidu.com/  //百度静态资源公共库
            3.标签位置<head>标签中:等到全部的js代码都被下载,解释和执行完成后才能开始呈现页面的内容。可将代码引用放到<body>元素内容后面。
            4.延迟脚本 defer="defer",延迟至浏览器遇到</html>标签后再执行。如果有多个延迟脚本,并不会按照顺序执行。该属性适用于外部引用的js   

10.基础语法

    1) 区分大小写  
          typeof 关键字, typeOf 非关键字
      2) 标识符
      指变量,函数,属性的名字或者函数的参数。标识符是按照以下规则组合起来的一或多个字符:
      1.字母,数字,下划线,$组成。
      2.只能以字母,下划线,$开头。
      3.不能将关键字作为标识符。
      3) 注释
        //单行注释
        /*
        *      多行注释
        */
      4) 语句
        每个语句以分号结尾,如果省略分号,由解析器确定语句的结尾,即分号可以省略,但是我们要求每个语句的末尾都应该有分号。 

11.关键字保留字  

    1) 关键字:(在js中有特殊功能)
        break        do         instanceof    typeof
        case        else        new        var
        catch        finally        return        void
        continue        for        switch        while
        debugger        this        function    with
        default        if         throw        delete
        in             try
 
    2) 保留字:(将来可能成为关键字)
        abstract    enum    int        short
        boolean    export    interface    static
        byte    extends    long        super
        char    final    native        synchronized
        class    float    package        throws
        const    goto    private        transient
        debugger    double    implements    protected
        volatile    import    public
 

12.javascript中的变量:

    ECMAScript的变量是弱类型(松散类型),可以用来保存任何类型的数据。定义变量时使用var操作符
    var 变量名;
    声明                var message;
    初始化             message = "hello"
    声明并初始化    var message = "hello";
    定义多个变量
                    var msg1 = "hello";
                    var msg2 = "world";
                    var message= "hello",found=false, age = 29;
 
    局部变量与全局变量:
        1) 在函数内定义的为局部变量,在函数外部定义的是全局变量
              function test(){ 
                var message = "hello";   
              } 
              test(); 
              alert(message); //错误 
        2) 如果在函数中定义变量没有加var,该变量为全局变量(依赖浏览器版本)
              function test(){ 
                message = "hello";   
             } 
              test(); 
              alert(message); //可以访问    

13.javascript中的数据类型

    1)ECMAScript不支持自定义类型,只有六种数据类型:
        五种基本数据类型(简单数据类型)
              Undefined    未定义    "undefined"
                var a ;
              Null        空引用数据类型 "null"
                var a = null;
              Boolean        布尔类型 true/false
                var a = false;
              Number        数字类型
                整数
                浮点数
              String        字符串类型 "" ''
                var a ="true";
                var a ='hello';
                        
        一种引用数据类型(复杂数据类型)
              Object(本质由一组无序的键值对组成)
                var person= new Object();
                person.name = "briup";
                person.age = 12;
 
      2) typeof 操作符
          返回该变量名所指向数据的类型
        语法:
            typeof 变量名   
        可有取值如下
              "undefined"        未定义 
              "boolean"        布尔类型 
              "string"        字符串 
              "number"        数值 
              "object"        对象或者null 
              "function"        函数 
      3) 基本数据类型
        1. Undefined  
         该类型只有一个值undefined。对未声明和未初始化的变量执行typeof操作符都返回undefined
        var a; 
        console.log(a);            // undefined 
        console.log(typeof a);    // undefined 
        console.log(b);            // 报错 ReferenceError: b is not defined  
        2. Null类型
            该类型只有一个值 null ,null可以表示一个空对象的指针。
            var car = null; 
            console.log(typeof car )    //结果为:object  因为null被认为是空对象的引用 
            实际上 undefined 派生自null值。undefined == null 结果为 true
            null与undefined的意义不同,null可以用来表示一个空对象,而undefined表示该类型没有任何定义
        3. Boolean类型
            该类型只有两个值,true,false                
        4. Number
            该类型用来表示整数和浮点数
            1) 表示方法:
                1. 整数:
                    十进制数: 55    0~9
                    八进制数: 首位为0,其他位为(0~7 如果字面值超出了范围,前导0将会被忽略)
                        070 (表示 7*8一次方 =  56)
                        079    (9超过了表示范围,表示79)
                    十六进制: 前两位为0x,其他位为(0~9,A~F)
                2. 浮点数

                    所谓浮点数值,就是该数值中必须包含一个小数点,并且小数点后必须至少有一位数字。浮点数值的最高精度是17位小数。

                        例如:    var f = 1.2;
                    科学计数法:e
                        var e = 3.125e7;        //31250000
            2) 数值范围
               由于内存的限制,ECMAScript不能保存世界上所有的数值。ECMAScript能表示的最小数值保存在Number.MIN_VALUE中,能表示的最大的数值保存在Number.MAX_VALUE中。如果某次计算的结果超过了JavaScript数值范围,将会返回Infinity(正无极)或者-Infinity(负无极)使用 isFinite()函数可以判断参数是否在最大值和最小值之间,如果在,返回true
                 在绝大数浏览器中:
                    Number.MIN_VALUE : 5e-324
                    Number.MAX_VALUE :    1.7976931348623157e+308
                如果某次计算返回了正的或者负的Infinity,那么该值无法继续参与下一次计算。可以使用isFinite(para)函数判断para 是否在最大数最小数之间
            3) 非数值 NaN (not a number)
                该数值表示一个本来要返回数值的操作数未返回数据的情况。
                    var a = 10/'a'; 
                    console.log(a);        //NaN 
                任何涉及到NaN的操作都会返回NaN; NaN与任何值都不相等,包括NaN本身。
                isNaN,判断参数是否"不是数值",当参数para不是数值的时候返回true    
                    isNaN(NaN);        true 
                    isNaN("blue");    true    无法转换为数值 
                    isNaN(10);        false    10 
                    isNaN("10");    false    10 
                    isNaN(true);    false 
            注意:
                1) 默认情况下,ECMAScript会将小数点后带有6个零以上的浮点数转化为科学计数法。
                    0.0000003 => 3e-7
                2) 在进行算术计算时,所有以八进制十六进制表示的数值都会被转换成十进制数值。                     
                3) 保存浮点数需要的内存是整数的两倍,因此ECMAScript会不失时机将浮点转换为整数
                    例如:
                    var b = 1.0;  将解析为1                 
        5. String
            该类型表示由零个或者多个16位Unicode字符组成的字符序列,即字符串。字符串可以由双引号或者单引号表示
            1)特殊字符
                \n    换行
                \t    制表
                \b    退格
                \r    回车
                \\    斜杠
                \'    单引号
                \"    双引号
            2)字符长度     
                通过length属性获取字符长度
        6. Object
            ECMAScript中的对象其实就是一组数据和功能的集合。对象可以通过执行"new 对象类型"来创建。
                var o = new Object();

14.类型转换

    1) 其他数据类型到Boolean类型转换
        通过Boolean() 函数转换
          【Boolean      true        false】
            String        非空字符串    ""
            Number        任何非0        0和NaN
            Object        任何对象    null
            Undefined    n/a            undefined    (n/a not applicable 不适用)
        例如:
            Boolean("");        //false 
            Boolean(0);        //false 
            Boolean(NaN);        //false 
            Boolean(null)        //false 
            Boolean(undefined)    //false 
以上值都被当做false,其他所有值都被当做真,包括对象
            Boolean("briup");    //true 
            Boolean(1);        //true 
 2) 其他数据类型到数值类型转换
        1.Number()函数
            1) 如果转换的值是null,undefined,boolean,number
                Number(true);        //1 
                Number(false);        //0 
                Number(null);        //0 
                Number(undefined);    //NaN 
                Number(10);        //10 如果是数字值,原样输出          
            2) 如果是字符串:
                Number("123");  //如果仅包含数值,转换为对应的数值 
                Number("234.1");//解析为对应的小数 
                Number("+12.1");//首位为符号位,其余为为数值,转换为对应的数值 
                Number("1+2.3");//NaN 符号位出现在其他位置,解析为NaN 
                Number("0xa");  //如果仅包含十六进制格式,转为为对应的十进制的值 
                Number("010");    //【注意!】不会当做八进制被解析,结果为10 
                Number("");    //空字符串被转换为0 
                Number("123ac");//包含其他字符: NaN 
                Number(" 12");    //12  
        2.parseInt()函数
            1) 如果转换的值是null,undefined,boolean,number
                parseInt(true);        //NaN 
                parseInt(false);    //NaN 
                parseInt(null);        //NaN 
                parseInt(undefined);//NaN 
                parseInt(10);        //10 如果是整数值,原样输出 
                parseInt(10.3);        //10 如果是小数,舍去小数点一级后面的内容 
            2) 如果是字符串:
 
                parseInt("123");  //123;如果仅包含数值,转换为对应的数值 
                parseInt("234.1");//234;小数点后面的数值省略 
                parseInt("+12.1");//12; 首位为符号位,其余为为数值,转换为整数 
                parseInt("0xa");  //10; 如果仅包含十六进制格式,转为为对应的十进制的值 
                parseInt("010");  //10; 【注意!】不会当做八进制被解析,结果为10 
                parseInt("");      //NaN;空字符串被转换为NaN 
                parseInt("1+2.3");//1;    如果首位为数值,依次向后解析,找到连续的数值,直到遇到第一个非数值的,将之前获取的数值转换为Number返回
                parseInt("123abc");//123; 
 
           
       3.parseFloat()函数
             与parseInt() 类似,但是也有不同:  
                1.字符串中的第一个小数点是有效的,而第二个小数点则无效其后的内容会被省略
                2.始终忽略前导0
                parseFloat("22.3.4")    //22.3 
                parseFloat("022.34");    //22.34 
                3.不能解析0x
    3) 其他数据类型到字符串类型转换
        1. toString()函数
            默认情况下,toString()是以十进制格式返回【数值】的字符串表示,通过传递参数,可以输入以二进制,八进制,十六进制乃至任意有效进制格式的字符串值
                var num = 10; 
                num.toString();        "10" 
                num.toString(2);    "1010" 
                num.toString(8);    "12" 
                num.toString(16);    "a" 
            但是null ,undefined 没有toString() 方法 
                null.toString()            //报错 TypeError: null has no properties      
                undefined.toString();    //报错 TypeError: undefined has no properties 

15.javascript中的三种弹框:

    alert  confirm  prompt             
        alert    提示框/警告框
        confirm  确认框
        prompt     输入对话框 
    这三个方法都是window这个对象的方法.window是JS中的一个内置对象,只有window对象的方法,调用的时候才可以省去对象的名字,直接用方法名字来调用.例如:window.alert("hello")和alert("hello")是一样的效果.
    这三种弹框都有一个共同的特点,当浏览器运行一个弹框代码的时候,用户如果不点击弹框中的确定或者取消按钮的话,浏览器就会卡这个弹框处,下面的页面代码就不会被执行.    
    alert弹出一个警告框/提示框,用户点击确定按钮之后就可以继续访问。 
    confirm弹出一个确认框,用户可以点击确定或者取消,这个confirm方法会相应的返回true或者false.    
    prompt弹出一个可以让用户输入的框口,用户输入后点击确定,这个方法会把用户输入的内容返回.
    prompt("请输入你的性别:");
    同时还可以在输入框设置一个默认值.
    prompt("请输入你的性别:","男");  

16.String、Date、Math对象 

     16.1.字符串对象
        length        
            属性,获取字符串的字符数量 
        charAt(i)    
            返回给定位置的字符
        charCodeAt()    
            返回给定位置的字符的字符编码
            var s = "helloworld"; 
            s.charAt(1);       //e 
            s.charCodeAt(1); //101 
        concat()    
            将一个或多个字符串拼接起来,返回拼接得到的新字符串,但是大多使用"+"拼接
        slice()        
            (参数1:开始位置,参数2:返回字符后一个字符位置)
        substr()    
            (参数1:开始位置,参数2:返回字符个数)
        substring()    
            (参数1:开始位置,参数2:返回字符后一个字符位置)
            var s = "helloworld"; 
            s.slice(3,7);     //lowo 
            s.substr(3,7);     //loworld 
            s.substring(3,7);//lowo 
            substring的使用不改变原值大小 
        indexOf();    
            从前往后查找指定字符所在位置
        lastIndexOf();    
            从后往前查找字符串所在位置,可以有第二个参数,代表从字符串中哪个位置开始查找。
        trim();        
            删除前置以及后置中的所有空格,返回结果
            var s = " hello world ";
            console.log("|"+s.trim()+"|");    //|hello world|
        split()
            分割字符串 返回一个数组
            var s = "hello world"; 
            console.log(s.split(" ")); 
            console.log(s.split(" ").length); 
            console.log(s.split(" ")[0]); 
            console.log(s.split(" ")[1]); 
        toLowerCase()    :转换为小写
        toUpperCase()    :转换为大写
    16.2.日期对象
        var date = new Date(); // 获取当前日期
        console.log(date); 
     
        console.log(date.getYear()); //获得当前年份-1900 
        console.log(date.getFullYear()); //获得当前年份 
        console.log(date.getMonth());//获得当前月份-1  
        console.log(date.getDate()); //获得当前是一个月中的哪一号
        console.log(date.getDay()); //获得星期几 
        console.log(date.getHours()); //获得时间中的 时 (24) 
        console.log(date.getMinutes()); //获得时间中的 分 
        console.log(date.getSeconds());//获得时间中的 秒  
        console.log(date.getMilliseconds()); //获得时间中的 毫秒 
        console.log(date.getTime()); //获得时间戳 
        parse()函数
            解析一个日期时间字符串,返回1970-01-01 0时0分0秒 到给定日期之间的毫秒数
        var date = "2016-12-19"; 
        console.log(Date.parse(date)); 
        toLocaleDateString()函数
        toLocaleString()函数
        toLocaleTimeString()函数
        toString()函数
        toTimeString()函数
        例如:
        var date = new Date();  
        console.log(date.toLocaleDateString()); 
        console.log(date.toLocaleString()); 
        console.log(date.toLocaleTimeString()); 
        console.log(date.toString()); 
        console.log(date.toTimeString()); 
    16.3.Math对象
        1.比较方法
            Math.min()    求一组数中的最小值
            Math.max()    求一组数中的最大值
            Math.min(1,2,19,8,6);    //1 
        2.将小数值舍入为整数的几个方法:
            Math.ceil()  向上舍入
            Math.floor() 向下舍入
            Math.round() 四舍五入
            console.log(Math.ceil(12.41));    //13 
            console.log(Math.floor(12.41));    //12 
            console.log(Math.round(12.3));    //12 
            console.log(Math.round(12.5));    //13 
        3.随机数
            Math.random() 返回大于0小于1的一个随机数[0,1)
       //获得一个随机数 [23,36]
       console.log(parseInt(Math.random()*14+23)); 
        4.常量
            //获得常量π
            console.log(Math.PI);
            //获得常量e
            console.log(Math.E);         
        5.其他方法:(了解即可,即用即查)
            abs(num)        返回num绝对值
            exp(num)        返回Math.E的num次幂
            log(num)        返回num的自然对数
            pow(num,power)    返回num的power次幂
            sqrt(num)        返回num的平方根
            scos(x)            返回x的反余弦值
            asin(x)            返回x的反正弦值
            atan(x)            返回x的反正切值
            atan2(y,x)        返回y/x的反正切值
            cos(x)            返回x的余弦值
            sin(x)            返回x的正弦值

            tan(x)            返回x的正切值

17、操作符

     1) 一元操作符
        ++,--,+,-操作,先将任意类型的值转换为Number然后进行运算(通过Number()方法进行转换)
        1.递增 ++   
            var a = "11";
            1+a++;
            1+ ++a;
            前置:操作该变量之前进行递增或者递减操作
            后置:操作该变量之后进行递增或者递减操作    
        2.递减 --
            前置:操作该变量之前进行递增或者递减操作
            后置:操作该变量之后进行递增或者递减操作
        3.加 +
        4.减 -
 
     2) 布尔操作符, 非(NOT)
        逻辑非 !

        先将任意类型的数值转换为Boolean,然后取反.

            !a ==> !Boolean(a) 
            !0        //true 
            !""        //true     
            !NaN    //true     
            !false    //true 
     3) 逻辑与 &&
        可应用于任意数值。如果有一个操作数不是布尔类型,逻辑与就不一定返回boolean类型
        
        对于 x && y 来说
        1.如果第一个操作数是  
            null,NaN,undefined,false,0,""这些可被转换为false的值的时候则返回第一个值(x)

            例如:

            var s1 = null; 
            var s2 = "briup"; 
            console.log(s1 && s2);    //返回null 
        2.如果第一个操作数其他,则返回第二个数(y) 
            var s1 = 8; 
            var s2 = "briup"; 
            var s3 = ""; 
            var result    = s1 && s2;    //briup 
            var result2 = s3 && s2;    //空字符串  
     4) 逻辑或 ||  
     5) 加减操作符
        1. 加法 +
            m + n

            1) 当m,n不为String类型的时候,先将m,n转换为Number类型,然后再进行计算 

             true + false;      //1;Number(true)+Number(false); 
             true + 1;          //2;Number(true) + 1 
             null + undefined; //NaN;Number(undefined) -> NaN 
            2) 当m,n有一个为String,无论另一个操作数为何(但不为对象)都要转换为String,然后再进行拼接 
             "1" + true;        // 1true 
             "1" + undefined;    // 1undefined 
             "1" + 1;        // 11 
        2. 减法 -
            m - n
            无论操作数为任何类型,先将其使用Number()转换器转换为Number类型,然后再计算。 
            true - 1;    //0;    1-1 
            null - true;    //-1 ;    0-1 
            1 - undefined    //NaN    
     6) 乘除操作符
        当操作数为非数值的时候执行自动的类型转化Number()
        1. 乘法 *
            如果两个数都是数值,执行常规的乘法计算
            如果一个操作数是NaN,结果为NaN
            超过数值范围返回Infinity
            如果有一个操作数不是数值,则先调用Number()将其转换为数值。
        2. 除法 /
            如果一个操作数是NaN,结果为NaN (0/0 ; NaN)
            一个非0值除0 结果为Infinity    
            如果有一个操作数不是数值,则先调用Number()将其转换为数值。 
            var s1 = 5; 
            var s2 = 2; 
            var result = s1/s2;  //2.5 
        3. 取余 %
            如果两个数都是数值,执行常规的取余计算
            如果一个操作数是NaN,结果为NaN(任意数%0 ; NaN)
            如果有一个操作数不是数值,则先调用Number()将其转换为数值。
     7) 关系操作符
        < > <= >=  ,返回一个【Boolean】值
        1.如果两个操作数是字符串,比较字符串中对应位置的每个字符的字符编码值 
            "a">"b"    //false 
            "1">"a"    //false 
        2.如果一个操作数是数值,将另外一个操作数也转换为数值进行比较 
           "3">1;            //true 
            3>true;            //true -------=   3>Number(true) 
            3>undefined;    //false Number(undefined)=NaN ;任何数和NaN比较结果都为false 
     8) 相等操作符,返回【Boolean】
        1.相等和不相等 ==, != (先转换再比较)
            1.如果两个操作数都为字符串,比较字符序列
            2.如果两个操作数都为数值类型,比较值的是否相等
            3.如果两个操作数都是对象,比较的对象的引用
            4)null == undefined        //true
            5)NaN与任何值(包括NaN)使用相等 比较结果为false,使用不等 比较结果为true.
           6)如果一个操作数为number类型,另外一个操作数为undefined,null,boolean,string之一,先将这些数据类型转换为数值,再进行比较
        2.全等比较(恒等于)

            仅比较不转换,先比较两个数所属的数据类型,如果类型不同则不同,如果类型相同,再继续比较两个数的值

            console.log("55" == 55); true 
            console.log("55" === 55);false 
            null == undifined;        //true null派生自undifined 
            null === undifined;        //false 
     9) 三目运算符 ? :  
        variable = boolean_expression ? true_value : false_value;
        如果boolean_expression为true,将true_value赋给variable,否则将false_value赋给variable
         
        例如:求任意两个数之间最大值 
           function max(m,n){ 
                return m>n?m:n;    //如果m>n为true返回m,如果m>n为false,返回n 
           } 
    10) 赋值运算符 =  
        将右侧的值赋给左侧的变量
        可以和其他算术运算符连用 *= /= %= += -=  
 
    11) 逗号操作符
       可以在一条语句中执行多个操作
       var num1 = 1, num2 = 2, num3 = 3;    

18、流程控制语句

     1) if语句

        if(condition){

            statement1

        }else{

            statement2

        }

        condition表示任意表达式,该表达式求值的结果不一定是布尔类型,如果不是布尔类型,ECMAScript会调用Boolean() 转换函数将这个表达式结果转换为一个布尔类型,如果condition求值结果为true,执行statement1。如果求值结果为false,执行statement2

        var a = "hello"; 
        if(a!=null){ 
            //... 
        } 
        或者直接写       
        if(a){         
            //          
        }     

     2) switch语句

        switch(expression){ 
            case val: 
                break; 
            case val2: 
                break; 
            default: 
        } 

        等价于

        switch(expression){ 
            case val:{ 
                break; 
            } 
            case val2:{ 
                break; 
            } 
            default: 
        }  
      可以在switch语句中使用任何数据类型。 
      例如: 
var day = new Date().getDay(); 
        var x = ""; 
        switch (day){ 
            case 0: 
              x="Today it's Sunday"; 
              break; 
            case 1: 
              x="Today it's Monday"; 
              break; 
            case 2: 
              x="Today it's Tuesday"; 
              break; 
            case 3: 
              x="Today it's Wednesday"; 
              break; 
            case 4: 
              x="Today it's Thursday"; 
              break; 
            case 5: 
              x="Today it's Friday"; 
              break; 
            case 6: 
              x="Today it's Saturday"; 
              break; 
            default: 
              x="error!!!"; 
        }    
     3) 循环语句    
        for语句
        for循环是一种前测试循环语句,但它具有在执行循环之前初始化变量和定义循环后要执行的代码的能力。以下是for循环的语法:
        初始化表达式,控制表达式,循环后表达式 
        for(initialization;expression;post-loop-expression){ 
            //loop option 
        } 

        例如: 

        var sum = 0; 
        for(var i=0;i<10;i++){ 
            sum +=i; 
        } 
        console.log(i); //10   
        ECMAScript不存在块级作用域,在循环内部定义的变量也可以在外部访问到,但是在函数内部定义的局部变量,在函数外部是不能访问的
    
        ----------
        死循环 
        for(;;){ 
            //当for中的表达式省略的时候,会创建一个死循环 
        } 
        while(true){ 
         
        } 

        ----------

        后测试循环语句 

        do-while语句   
        do{ 
         
        }while(condition);  
        后测试循环语句,即只有在循环体中的代码执行之后,才会测试出口条件。循环体内的代码最少被执行一次。
        ----------
        while语句 ,前测试循环语句    
        while(condition){ 
         
        } 

        前测试循环语句,即在循环体内的代码被执行之前,就会对出口条件求值。因此,循环体内的代码有可能永远不会被执行。 

        while(false){ 
            // 
        } 
        ----------
        for-in 语句

        是一种精准的迭代语句,可以用来枚举对象的属性

        for(property in expression){ 
            statement 
        } 
        例如:
        1.打印出window对象中所有的属性 
            for(var propName in window){ 
                console.log(propName+":"+window[propName]); 
            }  

       2.打印person对象

       var person = new Object();

        person.name = "tom"; 
        person.age = 20; 
        person.sayHello=function(){....} 
        或者简写为: 
        var person = { 
                name:"tom", 
                age:20, 
                sayHello:function(){ 
                    alert("hello world"); 
                } 
        }; 
        console.log(person.name); 
        console.log(person.age); 
        person.sayHello(); 
        for(var key in person){ 
            console.log(key+" - "+person[key]); 
        } 
        ----------
        label 语句

            使用label可以在代码中添加标签,以便将来使用

            label : for(int i=0;i<10;i++){ 
                if(i == 5){ 
                    break label; 
                } 
            } 
        循环关键字
           break    跳出循环体
           continue     结束本次循环,进行下一次循环 
     4) 特殊语句
        with语句
        主要作用是将代码的作用域设置在一个特定的对象中,定义with语句的主要目的是为了简化多次访问同一个对象的工作,但是大量使用with语句会导致性能下降,并且难以维护,所以不建议使用。

            例如:

            var person = { 
                name:'briup', 
                age:12, 
                gender:'男' 
            } 

            要想访问person对象中的属性需要:

                console.log(person.name); 
                console.log(person.age); 
                console.log(person.gender); 
            但是还可以通过with语句来实现
                with(person){ 
                    console.log(name); 
                    console.log(age); 
                    console.log(gender); 
                } 

19、javascript中的函数

    函数实际上是对象,每个函数都是Function类型的实例,函数名实际上是指向函数对象的指针。
    1) 表示方法:
        1.函数声明
        function sum(a,b){
            return a+b;
        }
        2.函数表达式
        var sum = function(a,b){
                return a+b;
        }
        解析器在向执行环境中加载数据时,会率先读取函数声明,并使其在执行任何代码之前可用;当执行器执行到函数表达式的代码的时候才会真正的解释执行
    2) 函数的参数
        ECMAScript函数的参数与大多数其他语言中的函数的参数有所不同,ECMAScript函数不介意传递参数的个数以及参数类型,这是因为函数的参数在函数内部是使用一个数组对象来表示的。这个数组对象就是arguments

        例如:

        function test(){ 
            for (i = 0; i < arguments.length; i++) { 
                console.log(arguments[i]); 
            } 
        } 
        test(15,"hello"); 
    3) 函数的调用
        在JS中,函数没有重载的概念,两个函数的函数名相同即是同样一个函数,但是Java中不是,java中判断方法是否是同一个是看方法名和参数列表
        js中函数可以先调用后定义

        例如:

            <script type="text/javascript"> 
                test(); 
                function test(){ 
                    alert("hello world"); 
                } 
                test(); 
            </script> 
    4) 函数对象
        javascript中的函数也是对象,它是Function类型的对象,用java中的概念理解就是,javascript中的每个函数都是Function类型的实例,就像java中的每个方法都是Method类的实例一样。
    5) 匿名函数

        //定义一个函数test,其参数需要接收另一个函数,注意js中的函数也是对象,就是这个Function类型的对象,函数对象也有自己的方法和属性,其中call就是Function类型中的一个方法,所有的函数对象就可以调用这个call方法来让自己本身执行(类似java中的反射)

        function test(f){ 
            //表示f这个函数要执行,执行f函数的对象是null,参数是"suwu" 
            //执行f函数的对象设置为null的话会默认变成window对象 
            f.call(null,"suwu"); 
        } 
         
        //调用test函数,并把一个匿名函数对象作为参数传给test 
        test(function(name){ 
            console.log("hello! "+name); 
        }); 

20、Array类型

    ECMAScript数组和其他语言中的数组都是有序列表,但是有以下特性:
    a.每一项都可以保存任何类型的数据。
    b.数组的大小是可以动态调整。
    c.数组的length属性:可读可写,可以通过设置length的值从数组的末尾移除项或向数组中添加新项
 
    1) 创建方法

       1. 使用Array构造函数

          var arr = new Array(); 
          var arr = new Array(20);  // 预先指定数组的大小 
          var arr = new Array("tom","zs","lisi"); //传入参数 
          注意:new关键字也可以省略,但是尽量不要省略
       2. 使用数组字面量

          由一对包含数组项的方括号表示,多个数组项之间用逗号分隔

          var arr = ["tom","zs","lisi"]; 
          var arr = []            //空数组 
    2) 访问数组元素
       数组变量名[索引]

        1.如果索引小于数组的长度,返回对应项的值

            var arr = ["tom","zs","lisi"]; 
            arr[0] ;        //访问数组中第一个元素,返回值为tom 

       2.如果索引大于数组的长度,数组自动增加到该索引值加1的长度

            var arr = ["tom","zs","lisi"]; 
            arr[3] ="jacky";    //添加元素,数组长度变为4 
        数组最多可以包含4 294 967 295个项

    3) 检查数组

        var arr = []; 
        console.log(typeof(arr));  //输出object,不能使用typeof进行判断是否为数组    
        console.log(Array.isArray(arr));   //判断arr是否是数组类型 
    4) 转换数组为字符串
        数组继承Object方法,并且对这些方法进行了重写
        toString();        在默认情况下都会以逗号分隔字符串的形式返回数组项
            例如:
            var arr = ["tom","zs","lisi"];    
            arr.toString()        //tom,zs,lisi  
       valueOf(); 在默认情况下以数组字面量的方式显示
            console.log(arr.valueOf());
            console.log(arr);
            俩个输出的结果一样:
                ["tom","zs","lisi"];
        join();    使用指定的字符串用来分隔数组字符串
            例如:
            arr.join("||");        //tom||zs||lisi
 
    5) 栈,队列方法
        1.栈  LIFO (Last-In-First-Out)
            push() 可接受任意类型的参数,将它们逐个添加到数组的末尾,并返回数组的长度
            pop()     从数组的末尾移除最后一项,减少数组的length值,返回移除的项
        2.队列    FIFO (First-In-First-Out)
            shift()  移除数组中的第一个项并且返回该项,同时将数组的长度减一。
            unshift() 在数组的前端添加任意个项,并返回新数组的长度。
 
    6) 排序
       reverse()  反转数组项的顺序
       sort()       
         1.默认排序:该方法会调用每个数组项的toString() 转型方法,然后排序
         2.自定义排序:
            a.该方法可以接受一个比较函数作为参数,比较函数有两个参数
            b.如果第一个参数位于第二个参数之前,返回负数

            c.如果第一个参数位于第二个参数之后,返回正数

            var arr = [11,5,23,7,4,1,9,1]; 
            console.log(arr.sort(compare)); 
 
            //该比较函数适合于大多数数据类型 ,类似于Java中的比较器
            function compare(v1,v2){ 
                if(v1>v2){ 
                    return -1; 
                }else if( v1<v2){ 
                    return 1; 
                }else{ 
                    return 0; 
                } 
            } 
    7) 操作方法

        concat()    :先创建当前数组的一个副本,然后将接收到的参数添加到这个副本的末尾,返回副本

            var arr = ["aa","bb","cc","dd"]; 
            var arr_new = arr.concat("ee","ff");  
            // arr_new = ["aa", "bb", "cc", "dd", "ee", "ff"] 
            // arr不改变,原数组不变 
        slice()    :可接受一个或者两个参数(返回项的起始位置,结束位置)
            当接受一个参数,从该参数指定的位置开始,到当前数组末尾的所有项
            当接受两个参数,起始到结束之间的项,但是不包含结束位置的项
            例如:
            var arr = ["aa","bb","cc","dd"];

            1.接受一个参数时

               var arr_new = arr.slice(1); 
                // arr_new = ["bb", "cc", "dd"]; 
                // arr 不改变 

            2.接受两个参数时

                var arr_new = arr.slice(1,2);     
                // arr_new = ["bb"];  
                // arr不改变 
 
        splice(): 向数组的中插入数据并返回一个数组,该数组中包含从原始数组中删除的项。
            删除:指定两个参数(删除的起始位置,要删除的项数)
            插入:指定三个参数(起始位置,0,要插入的项任意数量的项)
            替换:指定三个参数(起始位置,要删除的项,要插入的任意数量的项)
 
            例如:
            var arr = ["aa","bb","cc","dd"];

            1.删除

                var del_arr = arr.splice(1,2); 
                // arr = ["aa","dd"];     在原数组进行了删除操作 
                // del_arr = ["bb","cc"];返回删除的元素数组 

            2.插入

               var del_arr = arr.splice(1,0,"ee","ff"); 
                // arr =  ["aa", "ee", "ff", "bb", "cc", "dd"] 将指定项插入到1位置处 
                //del_arr = [], 返回空数组 

            3.替换

               var del_arr = arr.splice(1,2,"ee","ff"); 
                // arr =  ["aa", "ee", "ff", "dd"] 将"bb","cc" 替换成了"ee","ff" 
                //del_arr = ["bb", "cc"], 返回删除的元素数组 

        indexOf()(要查找的项,开始查找的位置(可选)) 从数组开头向后查找,使用全等操作符,找不到该元素返回-1  

            var arr = ["22","11","cc","dd","11"]; 
            arr.indexOf(11); //返回-1,因为内部使用"==="进行匹配 
            arr.indexOf("11"); //返回1,默认从下标为0往后匹配,返回第一个匹配元素的位置 
            arr.indexOf("11",2); //返回4,从下标为2开始往后匹配,返回第一个匹配元素的位置

        lastIndexOf()(要查找的项,开始查找的位置(可选)) 从数组末尾向前查找,使用全等操作符,找不到该元素返回-1

            var arr = ["22","11","cc","dd","11"]; 
            arr.lastIndexOf("11"); //返回4,默认从下标为4往前匹配,返回第一个匹配元素的位置 
            arr.lastIndexOf("11",2); //返回1,从下标为2往前匹配,返回第一个匹配元素的位置 
    8) 迭代方法:
        every();对数组中的每一元素运行给定的函数,如果该函数对每一项都返回true,则返回true
            every(回调函数)
            every(function(){})
            every(function(item,index,arr){})

            every(function(遍历的每项,索引,被遍历的数组){})

            var arr = [11,5,23,7,4,1,9,1]; 
            var result = arr.every(function(item,index,arr){ 
                return item >2; 
            }); 
            console.log(result); //false 
        some(); 对数组中的每一元素运行给定的函数,如果该函数对任意一项返回true,则返回true
            some(回调函数)
            some(function(){})
            some(function(item,index,arr){})
            some(function(遍历的每项,索引,被遍历的数组){}) 
            var arr = [11,5,23,7,4,1,9,1]; 
            var result = arr.some(function(item,index,arr){ 
                return item >2; 
            }); 
            console.log(result); //true 
 
        filter();对数组中的每一元素运行给定的函数,会返回满足该函数的项组成的数组
            filter(回调函数)
            filter(function(){})
            filter(function(item,index,arr){})
            filter(function(遍历的每项,索引,被遍历的数组){})
            var result = arr.filter(function(item,index,arr){ 
                return item >2; 
            }); 
            console.log(result); // [11, 5, 23, 7, 4, 9] 
        map();对数组中的每一元素运行给定的函数,返回每次函数调用的结果组成的数组
            map(回调函数)
            map(function(){})
            map(function(item,index,arr){})
            map(function(遍历的每项,索引,被遍历的数组){}) 
 
            var result = arr.map(function(item,index,arr){ 
                return item * 2; 
            }); 
            console.log(result); // [22, 10, 46, 14, 8, 2, 18, 2] 
 
        forEach();对数组中的每一运行给定的函数,没有返回值,常用来遍历元素
            forEach(回调函数)
            forEach(function(){})
            forEach(function(item,index,arr){})
            forEach(function(遍历的每项,索引,被遍历的数组){}) 
            var result = arr.forEach(function(item,index,arr){ 
                console.log(item); 
            }); 
 

 

-------------------记于2018-07-08


  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值