• JS


    定义JS简介

    JavaScript是互联网上最流行的脚本语言,这门语言可用于HTML和WEB,更广泛用于服务器,PC,笔记本电脑等设备。

    JS用法

    如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。

    <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

    <script> 和 </script> 之间的代码行包含了 JavaScript

    <script>
    alert("我的第一个 JavaScript");
    </script>
    

    上面例子中的 JavaScript 语句,会在页面加载时执行。通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

    通过外部调用如下

    <!DOCTYPE html>
    <html>
    <body>
    <script src="myScript.js"></script>
    </body>
    </html>
    

    JS输出方式

    JavaScript 可以通过不同的方式来输出数据:

    • 使用 window.alert() 弹出警告框。可直接携程为alert()
    • 使用 document.write() 方法将内容写到 HTML 文档中。
    • 使用 innerHTML 写入到 HTML 元素。
    • 使用 console.log() 写入到浏览器的控制台。

    JS变量

    与代数一样,JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)。变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

    • 变量必须以字母开头
    • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
    • 变量名称对大小写敏感(y 和 Y 是不同的变量)

    声明JS变量时,需要用到var关键字来标识

    var carname="Volvo";
    

    一条语句多个变量的情况

    var lastname="Doe", age=30, job="IT";
    

    不过需要注意的是,在程序中常常会遇到无值的变量,在JS中实际上是undefined,如声明一个变量后面不跟值时,其实就是undefined

    不过变量的规则有很多种,在JS中默认的规范是匈牙利类型标记法,这样试自己的代码看起来更规范。

    Var iMyTestValue = 0, sMySecondValue = "hi";
    
    // i 和 s 表示数据类型的意思,分别表示整数和字符串
    

    JS数据类型

    在JS中包括 字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。

    数据类型的转换

    强制转换

     string: var str=x.toString() //x 不是 null和undefind
                 或 var str=String(); 万能,//相当于隐式转换
    转number: 
        任意类型 to number: var num=Number(x);
        //如果x是纯数字组成或可被隐式转为数字,则返回一个number的数值
        //如果x不是纯数字组成或不可被隐式转换为数字,则返回NaN
     NaN: Not  a number 无效的数字
        
        string to number:
            var num=parseInt(str);
            执行原理:从str的开始位置,依次读取每个字符
                      跳过开头的空白字符
                      仅读取数字字符
                      碰到第一个不是数字的字符,就退出
                      不认识小数点
            比如: var width="12px";
                  width=parseFloat(width);//12
                  width=width+5;//17
                  width=width+"px";//17px;
    

    注: 在JS中查看类型使用 typeof  

    JS运算符和表达式

    算数运算: + - * / %

    隐式转换: 默认都转为数字,再运算
              如果无法转为数字,则转为NaN
              如果NaN参数任何算数计算,结果仍然为NaN
              特殊: +运算中,只要碰上字符串,就都转为字符串。+运算变为字符串拼接。
          %: m%n 表示m/n,不取商,而取除不尽的余数部分
    何时使用: 1. 判断能否被整除
                   2. 控制一个运算的结果,不能超过指定值
                       因为模运算的结果,不可能超过除数
    

    关系运算: 做比较。包括: >   <   >=   <=   ==    !=  只返回truefalse

    特殊: 1. 如果参与比较的两值都是字符串
                   会按位PK每个字符的unicode号
                   直到比出结果为止
            2. NaN不大于,不小于,不等于任何值
                   NaN和任何值做> < ==比较都返回false
                   NaN和任何值做!=比较返回true
               结果: 无法用普通的关系运算,判断一个数据是否是NaN
               解决: var bool=isNaN(num)
                    本意用来检测num是不是NaN
                       如果num是NaN就返回true,否则返回false
               经常反用: 用来检测num是不是数字或能否被隐式转为数字。
    	        比如: var bool=!isNaN(num)
                      用来检测num是不是数字
                          如果num是数字,就返回true
                          否则返回false。
            3. null和undefined: null==undefined -> true
               如何解决: 
                  全等: === 类型相同且数值相同
                        其实就是不带隐式转换的==
                        
               function String(x){
    	     //如果x是null,就返回"null"
    	     if(x===null){ return "null"; }
                 //否则,如果x是undefined,就返回"undefined"
    	     else if(x===undefined){return "undefined"}
    	     //否则
    	     else{ return x.toString(); }
               }
    

    逻辑运算: 将多个关系运算综合得出最终结论

    返回值: 逻辑运算作为条件使用时,都返回true,false
          包括: &&(而且)   ||(或)    !(不)    
          其中: &&: 只有两个条件都为true,结果才为true 
                    只要一个条件为false,结果就为false
                ||: 只要一个条件为true,结果就为true
                    只有两个条件都为false,结果才为false
                !: 颠倒任意bool值:!true->false !false->true
          隐式转换: 默认将每个关系运算都转为bool再综合比较
       ***短路逻辑: 只要前一个条件已经可以得出最终结论,则后续条件不再执行!
          &&: 如果前一个条件为true,时后一个条件才执行
              如果前一个条件为false,则后一个条件不执行
          固定套路: 实现简单分支: 
    	1个条件,1件事,满足条件才执行,不满足就不执行
            公式: 条件&&操作;
          比如: //如果total>500,才打八折
                if(total>500){total=total*0.8}
          也可写成: total>500&&(total=total*0.8);
    
          ||: 如果前一个条件为true,则后一个条件不执行
              如果前一个条件为false,则判断后一个条件
          固定套路: 实现两个值二选一使用——备选值
    

    位运算

    左移和右移:  
          m<<n: 读作m左移n位,相当于:m* 2的n次方 
          m>>n: 读作m右移n位,相当于: m/ 2的n次方 
          m>>>0: 取整
    

    扩展赋值运算: 一句话执行两个操作: 运算,再保存回去

     += -= *= /= %=
          何时使用: 只要取出变量的值做计算,之后还要再保存回去时,就要用扩展赋值运算简写。
           比如: total=total*0.8; => total*=0.8;
                 m+=n; => m=m+n; 累加
                 m*=n; => m=m*n; 累乘
         递增,递减运算: ++  --
           i++ => i+=1 => i=i+1
           i-- => i-=1 => i=i-1
          递增 vs 累加:
            如果每次固定增1,才用递增,否则,用累加
       ****递增/减,单独使用,放前放后都一样
           递增/减,参与其他表达式中时: 变量中的值都会被+1
               前++,返回递增后的*新*值
               后++,返回递增前的*旧*值
    

    注:++ 的优先级高于+

    JS对象

    一个完整的JS程序实现需要三个不同的部分共同实现 

    • 核心(ECMAScript) 
    • 文档对象模型(DOM) Document object model (整合js,css,html)
    • 浏览器对象模型(BOM) Broswer object model(整合js和浏览器)
    • Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的. 

    如JS中的数据类型等都在ECMAScript中描述

    • 语法 
    • 类型 
    • 语句 
    • 关键字 
    • 保留字 
    • 运算符 
    • 对象 (封装 继承 多态) 基于对象的语言.使用对象.

    对象的定义

    var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
    

    这看上去像python中的字典。

    在ECMA对象中,常见的11种内置对象

    Array ,String , Date, Math, Boolean, Number  Function, Global, Error, RegExp , Object
    

    在BOM对象中,常用的

    window,history,location
    

    JS函数  

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。属于ECMA对象中内置的一种对象

    • 可以使用变量、常量或表达式作为函数调用的参数
    • 函数由关键字function定义
    • 函数名的定义规则与标识符一致,大小写是敏感的
    • 返回值必须使用return
    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction()
    {
    alert("Hello World!");
    }
    </script>
    </head>
    
    <body>
    <button onclick="myFunction()">Try it</button>
    </body>
    </html>
    函数示例

    调用函数

    var 返回值=函数名(参数值列表)
            参数值列表: 一组数据或变量的组合,逗号分隔每个值
            参数值的个数不一定和定义函数时的参数变量一致
            如果参数值得个数>参数变量的个数 
            就舍弃多余的参数值
            如果参数值的个数<参数变量的个数
            没有活得参数值的参数变量,默认undefined
     建议:严格按照参数变量的个数和顺序,传递参数值
          返回值: 专门用于接受函数调用结果的变量
          如果不需要接住函数的调用结果,可省略
    

    作用域

    1. 全局作用域:在全局作用域中存储的变量,在程序的任何位置都可访问
    	  在全局作用于中创建的变量,都是全局变量
              函数名其实一个变量
              函数定义其实是一个引用类型的对象
              函数还可定义为: 使用*函数直接量*
                 var 函数名=function(参数列表){xxx}
    2. 函数作用域:在函数作用域中存储的变量,只能在本次函数调用时,内部访问。
        变量的使用规则: 优先使用局部变量。
         如果局部没有,才到全局找
         如果全局没有,就报错!
    *局部变量: 包括参数变量和在函数内var出的变量
          在任何位置给未声明的变量赋值,都会在全局创建该变量
    ——禁止!
         全局污染: 在局部尝试给未声明的变量直接赋值,导致篡改全局的变量值。
         强烈建议: 所有变量必须用var声明后,才能使用。
    

    闭包

    还记得函数自我调用吗?该函数会做什么?

    var add = (function () {
        var counter = 0;
        return function () {return counter += 1;}
    })();
    
    add();
    add();
    add();
    
    // 计数器为 3
    

    变量 add 指定了函数自我调用的返回字值。自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。计数器受匿名函数的作用域保护,只能通过 add 方法修改。

    闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭
    

    字符串String  

    用于存储和处理文本。可以存储一系列字符,如"aa".

    1. 转义字符: 将字符串中和程序冲突的字符转义为原文的特殊字符
         何时使用: 只要字符串中包含和程序冲突的特殊符号时
         如何使用: 1. 包含和程序冲突的特殊符号: 
    			在特殊符号前加,将符号转为原文
    	            如果特殊符号就是,要变成\
                   2. 字符串中包含特殊功能的符号:
    		    
     换行    	 制表符
                   3. 输出unicode编码的字符
                        uXXXX 一个字
    	          比如: 汉字第一个字:u4e00
                              最后一个字: u9fa5
    2. 大小写转换: 将字符串中每个英文字母统一转为大写或小写
          何时使用: 只要程序不区分大小时,就要先转换,再比较
          如何使用: var upper=str.toUpperCase();
                    var lower=str.toLowerCase();
    3. 获取指定位置的字符: str.charAt(i); 等效于 str[i]
    4. 获得指定位置的字符的unicode号: 
    	var num=str.charCodeAt(i);
         从unicode号翻译回原文:(一次只能转一个字符)
    	var char=String.fromCharCode(num);
    5. 检索字符串:查找关键词的位置
    	1. 从前先后找:
    	  var i=str.indexOf("关键词"[,fromi]);
    	  从fromi位置开始,查找右侧下一个关键词的位置
    	  第二个参数: 表示开始查找的位置
    	             可省略,如果省略,表示从0位置开始
              返回值: 找到: 返回关键词第一个字符的位置的下标
                    没找到: 返回-1
            2. 从后向前找:
              var i=str.lastIndexOf("关键词"[,fromi])
    	  从fromi位置开始,查找左侧下一个关键词的位置
    	  第二个参数: 省略,默认从length-1开始
    	  返回值: 同indexOf
       何时使用: 如果从开头开始查找所有关键字时,首先indexOf
    	     如果获得最后一个关键词的位置。
    6. 截取子字符串: 
    	var subStr=str.slice(starti,endi+1);
    	              .substring(starti,endi+1);
    	差别: slice支持负数参数;substring不支持负数参数
    	var subStr=str.substr(starti,n);
    	   获取str中starti位置开始的n个字符
    	   ***不必考虑含头不含尾!
    	比如: pid="110112198312262111"
                     //012345678901234567
    		 //      |       |
    	    //如果离开头近:
    	    	str.slice(6,14);=>str.substring(6,14)
    	    //如果离结尾近
    	        str.slice(6,pid.length-4);
    		    =>str.substring(6,pid.length-4);
    	        str.slice(6,-4); X=>substring
                //如果不考虑含头不含尾:
    		str.substr(6,8)
    7.字符串中字符个数: str.length
    	 
    charAt()    返回指定索引位置的字符
    charCodeAt()    返回指定索引位置字符的 Unicode 值
    concat()    连接两个或多个字符串,返回连接后的字符串
    fromCharCode()    将 Unicode 转换为字符串
    indexOf()    返回字符串中检索指定字符第一次出现的位置
    lastIndexOf()    返回字符串中检索指定字符最后一次出现的位置
    localeCompare()    用本地特定的顺序来比较两个字符串
    match()    找到一个或多个正则表达式的匹配
    replace()    替换与正则表达式匹配的子串
    search()    检索与正则表达式相匹配的值
    slice()    提取字符串的片断,并在新的字符串中返回被提取的部分
    split()    把字符串分割为子字符串数组
    substr()    从起始索引号提取字符串中指定数目的字符
    substring()    提取字符串中两个指定的索引号之间的字符
    toLocaleLowerCase()    根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
    toLocaleUpperCase()    根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
    toLowerCase()    把字符串转换为小写
    toString()    返回字符串对象值
    toUpperCase()    把字符串转换为大写
    trim()    移除字符串首尾空白
    valueOf()    返回某个字符串对象的原始值
    字符串所有方法

    数组array

    数组对象是使用单独的变量名来存储一系列的值。

    数组切片slice

    //x.slice(start, end)
    //
    //使用注解
    //
    //x代表数组对象
    //start表示开始位置索引
    //end是结束位置下一数组元素索引编号
    //第一个数组元素索引为0
    //start、end可为负数,-1代表最后一个数组元素
    //end省略则相当于从start位置截取以后所有数组元素
    
    var arr1=['a','b','c','d','e','f','g','h'];
    var arr2=arr1.slice(2,4);
    var arr3=arr1.slice(4);
    var arr4=arr1.slice(2,-1);
    
    alert(arr2.toString());
    //结果为"c,d" 
    alert(arr3.toString());
    //结果为"e,f,g,h"
    alert(arr4.toString());
    //结果为"c,d,e,f,g"
    View Code

    时间属性Date

    getFullYear()
    使用 getFullYear() 获取年份。
    getTime()
    getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
    setFullYear()
    如何使用 setFullYear() 设置具体的日期。
    toUTCString()
    如何使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。
    getDay()
    如何使用 getDay() 和数组来显示星期,而不仅仅是数字。
    Display a clock
    如何在网页上显示一个钟表。
    

    创建日期 

    可以通过New关键字来定义Date对象

    new Date() // 当前日期和时间
    new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
    new Date(dateString)
    new Date(year, month, day, hours, minutes, seconds, milliseconds)
    

    RegExp对象  

    什么是RegExp?

    • 正则表达式描述了字符的模式对象。
    • 当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。
    • 简单的模式可以是一个单独的字符。
    • 更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。
    • 您可以规定字符串中的检索位置,以及要检索的字符类型,等等。

    语法

    var patt=new RegExp(pattern,modifiers);
    
    或更简单的方法
    
    var patt=/pattern/modifiers;
    
    // pattern指匹配规则
    //修饰符(modifiers)描述了检索是否是全局,区分大小写等。
    

    修饰符

    修饰符用于执行不区分大小写和全文的搜索。

    • i - 修饰符是用来执行不区分大小写的匹配。
    • g - 修饰符是用于执行全文的搜索(而不是在找到第一个就停止查找,而是找到所有的匹配)。

    test()

    test()方法搜索字符串指定的值,根据结果并返回真或假。如下面找 'e'

    var patt1=new RegExp("e");
    document.write(patt1.test("The best things in life are free"));
    

    有的话返回True  

    exec()

    exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。,如寻找 'e'

    var patt1=new RegExp("e");
    document.write(patt1.exec("The best things in life are free"));
    

    如果有该字符则返回返回该字符'e'

    Math对象  

    专门提供数学计算的API对象,和其它对象不同的是不需要使用new去创建

    1. 取整: 3种:
    	上取整: 只要超过,就取下一个整数
    	    Math.ceil(num);
            下取整: 无论超过多少都省略小数部分
    	    Math.floor(num);
    	四舍五入取整: 够五进位,不够就舍弃
    	    Math.round(num); 返回数字,但只能取整
           vs num.toFixed(d); 可以指定小数位置,但返回字符串
    	  自定义round方法:
    		按任意小数位数四舍五入
    		返回数字类型
    	  注意舍入误差: 
    2. 乘方和开方:
           乘方: Math.pow(底数,幂) 比如:Math.pow(10,2)
           开方: Math.sqrt(num) 只能开平方
    3. 最大值和最小值:返回参数中最大或最小的一个值
    	Math.max(x,y,z)
    	Math.min(x,y,z)
    	获取数组中的最大值或最小值
    	问题: Math.max/min不支持数组参数!
            解决: Math.max.apply(Math,arr);
    	   其中apply可以打散arr,将每个元素单独传入
    4. 绝对值: Math.abs(num)
    
    5. 随机数: Math.random() 在0~1之间取随机小数
    		可能取到0,但不可能取到1
    	在min~max之间取随机整数的公式:
    	parseInt(Math.random()*(max-min+1)+min);
    	如果0~max之间取随机,可简写为:
    	parseInt(Math.random()*(max+1));
        

    SWITCH语句 

      switch语句用于基于不同的条件来执行不同的动作

    switch(n)
    {
    case 1:
      执行代码块 1
    break;
    case 2:
      执行代码块 2
    break;
    default:
     n 与 case 1 和 case 2 不同时执行的代码
    }
    基本语法
    var d=new Date().getDay(); 
    switch (d) 
    { 
    case 0:x="今天是星期日"; 
    break; 
    case 1:x="今天是星期一"; 
    break; 
    case 2:x="今天是星期二"; 
    break; 
    case 3:x="今天是星期三"; 
    break; 
    case 4:x="今天是星期四"; 
    break; 
    case 5:x="今天是星期五"; 
    break; 
    case 6:x="今天是星期六"; 
    break; 
    }
    实例

    注在switch语句中有个default关键字,主要功能值用来匹配不存在的情况,一般放在这个条件语句的尾部

     
     

     
     

      

      

      

      

      

     

      

  • 相关阅读:
    前端开发神器
    React表单明文密文切换,携带禁止浏览器自动回填,简单验证提示功能
    webapp 虚拟键盘隐藏留下空白解决办法
    jQuery常用表单事件执行顺序
    localStorage+cookie实现存取表单历史记录
    js.cookie.js使用方法
    H5超细边框
    JS删除数组中某个元素
    JS获取地址栏参数(支持中文)
    React书写规范
  • 原文地址:https://www.cnblogs.com/flash55/p/6047286.html
Copyright © 2020-2023  润新知