zoukankan      html  css  js  c++  java
  • Javascript基础

    定义

    javascript是一门动态弱类型的解释型编程语言,增强页面动态效果,实现页面与用户之间的实时动态的交互。

      javascript是由三部分组成:ECMAScript、DOM、BOM

    • ECMAScript由ECMA-262定义,提供核心语言功能(ECMA是欧洲计算机制造商协会)
    • DOM(Document Object Model)文档对象模型,提供访问和操作网页内容的方法和接口
    • BOM(Browser Object Model)浏览器对象模型,提供与浏览器交互的方法和接口

    JavaScript引入方式

    Script标签内写代码

      可以写在head中,不过推荐写在body中

    <script type="text/javascript"> Js代码内容 </script>

    引入外部的JS文件

    <script type="text/javascript" src="JS文件"> </script>

    注释方式

    //   单行注释
    /**/ 多行注释
    结束符
    console.log() 输出

    变量

      声明变量使用 var 变量名; 的格式来进行声明,JavaScript的变量名可以使用_,数字,字母,$组成,不能以数字开头。

         注意:局部变量必须以 var 开头申明,如果不写 var 则为全局变量

    <script type="text/javascript">
      
        // 全局变量
        name = '张三';
      
        function func(){
            // 局部变量          
            var age = 18;
      
            // 全局变量
            work='doctor'
        }
    </script>

    数据类型

    特殊值:

    • null     表示一个空对象指针,常用来描述"空值";
    • undefined  表示变量定义,但是没有值传入

    数字(Number)

    JavaScript中不区分整数和浮点数,所有数字均用浮点数值表示。

    NaN表示非数字

    转换:

    • parseInt(..)    将某值转换成整数,不成功则NaN
    • parseFloat(..) 将某值转换成浮点数,不成功则NaN

    数字的方法

    Number 对数字的支持
    Number.MAX_VALUE 最大数值
    Number.MIN_VALUE 最小数值
    Number.NaN 非数字
    Number.NEGATIVE_INFINITY 负无穷大
    Number.POSITIVE_INFINITY 正无穷大
    Number.toExponential( ) 返回四舍五入的科学计数法,加参数为保留几位
    Number.toFixed( ) 小数点后面的数字四舍五入,加参数为保留几位
    Number.toPrecision( ) 四舍五入,自动调用toFixed()或toExponential()
    Number.toLocaleString( ) 把数字转换成本地格式的字符串
    Number.toString( ) 将数字转换成字符串
    Number.valueOf( ) 返回原始数值

    字符串(String)

    String.length 字符串的长度
    String.trim() 移除空白
    String.trimLeft() 移除左侧空白
    String.trimRight() 移除右侧空白
    String.concat(value, ...) 拼接
    String.slice(start, end) 切片
    String.split( ) 分割
    String.search( ) 从头开始匹配,返回匹配成功的第一个位置(g无效)
    String.match( ) 全局搜索,如果正则中有g表示找到全部,否则只找到第一个
    String.replace( ) 替换,正则中有g则替换所有,否则只替换第一个匹配项;
    $数字:匹配的第n个组内容;
    $&:当前匹配的内容;
    $`:位于匹配子串左侧的文本;
    $':位于匹配子串右侧的文本
    $$:直接量$符号
    String.charAt( ) 返回字符串中的第n个字符
    String.charCodeAt( ) 返回字符串中的第n个字符的代码
    String.fromCharCode( ) 从字符编码创建—个字符串
    String.indexOf( ) 查找子字符串位置
    String.lastIndexOf( ) 查找子字符串位置
    String.localeCompare( ) 用本地特定的顺序来比较两个字符串
    String.substr( ) 抽取一个子串
    String.substring( ) 返回字符串的一个子串
    String.toLocaleLowerCase( ) 把字符串转换小写(针对地区,在不知道程序在哪个语言环境中运行时用)
    String.toLocaleUpperCase( ) 将字符串转换成大写(针对地区)
    String.toLowerCase( ) 小写
    String.toUpperCase( ) 大写
    String.toString( ) 返回原始字符串值
    String.toString() 返回原始字符串值
    String.valueOf( ) 返回原始字符串值

    布尔类型(Boolean)

      true和false  首字母小写,在python中首字母需大写

    toString() 返回Boolean的字符串值('true'或'false')
    toLocaleString() 返回Boolean的字符串值('true'或'false')
    valueOf() 返回Boolean的原始布尔值(true或false)

    数组(Array)

    var a = ['a',1,2];
    console.log(a[0]);  

    // 输出"a"
    Array.length 数组的大小
    Array.push() 尾部添加元素
    Array.pop() 删除并返回数组的最后一个元素
    Array.unshift() 在数组头部插入一个元素
    Array.shift( ) 在数组头部移除一个元素
    Array.slice( ) 切片
    Array.reverse( ) 反转
    Array.join( ) 将数组元素连接起来以构建一个字符串
    Array.concat( ) 拼接
    Array.sort( ) 排序
    Array 对数组的内部支持
    Array.toLocaleString( ) 把数组转换成局部字符串
    Array.toString( ) 将数组转换成一个字符串

    运算符

    算数运算符

    +  -  *  /  %  ++(递增1)  --(递减1)

    比较运算符

    ===  严格运算符 比较过程没有任何类型转换
      !==  严格运算符 ===的结果取反
      ==  相等运算符 如果两个操作值不是同一类型,相等运算符会尝试进行一些类型转换,然后再进行比较
      !=  不相等运算符 ==的结果取反
      >  大于运算符  
      >=  大于等于运算符  
      <  小于运算符  
      <=  小于等于运算符  

    逻辑运算符

    !  非(两个!!表示Boolean()转型函数)

    返回一个布尔值
        &&  与 两个操作都为true时返回true,否则返回false(返回值不一定是布尔值),可以多个连用(..&&..&&..)
        ||  或 两个操作都是false时返回false,否则返回true(返回值不一定是布尔值),可以多个连用(..||..||..)

     

    语句

    1、条件语句

    JavaScript中支持两个条件语句,分别是:if 和 switch。

      if语句

    //if语句
     
    if(条件){ }

    else if(条件){ }

    else{ }

      switch语句

    //switch语句,条件等于a是执行第一个case,等于第二个执行第二个case,其它执行default.
     
    switch(条件){
            case 'a':
                执行内容1;
                break;
            case 'b':
                执行内容1;
                break;       #switch中的case子句通常都会加break语句,否则程序会继续执行后续case中的语句。
            default :
                默认执行的内容;
        }

    2.循环语句

      JavaScript中支持四种循环语句,分别是:for、for in、while、do-while

    for 循环


    for
    (var i=0;i<10;i++) { console.log(i); }

    for in

    var array1 = ["a", "b"];
     
    for(var i in array1){
        console.log(i);
        console.log(array[i]);
    }

    while

    var i = 0;
    while (i < 10) {
      console.log(i);
      i++;
    }

    do -while

    //循环的代码至少执行一次,结果为1
     
            var num = 0;
            do {
                num++;
            }while (num>10);

    函数(Function)

    函数定义

    // 普通函数
        function func(i){
            return true;
        }
               
    // 匿名函数  这里无需写函数名,定义一个变量赋值给变量
        var func = function(i){
            console.log(i);
        }
       
    // 自执行函数
        (function(i){
            console.log(i);
        })('哈哈')

    函数参数:

    函数传参的个数可以小于实际需传参的个数,没传参的默认为undefined

    参数传多默认不起作用

     function func(a,b){
            console.log();
        }
    func(1,2,3) //结果为 1,2
    func(1) //结果为

    arguments 可接收所有参数,返回一个数组

    function func() {
        console.log(arguments);
    }
    func(1,2,3) //结果为 [1,2,3]
    func('a','b') //
    结果为 ["a","b"]

    函数的全局变量和局部变量

    局部变量

    在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。

    全局变量:

    在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

    变量生存周期:

    JavaScript变量的生命期从它们被声明的时间开始。

    局部变量会在函数运行以后被删除。

    全局变量会在页面关闭后被删除。

    作用域与作用域链

      首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。

        var a = 100;
            function outer() {
                function inner1(){
                    var a = 10;
                    console.log(a);  }     //10
                function inner2() {
                    console.log(a);  }    // 100
                inner1();
                inner2();
            }
            outer();

    inner1()的作用域链为 inner1--->outer

    inner2()的作用域链为 inner2--->outer

    闭包:

    var name= "张三";
    function f(){
        var name = "李四";
        function inner(){
            console.log(name);
        }
        return inner;
    }
    var ret = f();   //ret就是inner的闭包函数
    ret();

    面向对象

    创建对象

    var person=new Object();  // 创建一个person对象
    person.name="张三";  // person对象的name属性
    person.age=18;  // person对象的age属性

     

    JSON序列化

    var str1 = '{"name": "张三", "age": 18}';
    var obj1 = {"name": "张三", "age": 18};
    // JSON字符串转换成对象
    var obj = JSON.parse(str1); 
    // 对象转换成JSON字符串
    var str = JSON.stringify(obj1);

    正则表达式

    JavaScript中支持正则表达式,其主要提供了两个功能:

    • test(string)     用于检测正则是否匹配
    • exec(string)    用于获取正则匹配的内容
    // 创建RegExp对象方式(逗号后面不要加空格)
    var reg1 = new RegExp("^(13|14|15|17|18)[0-9]{9}$");  === var reg2 = /^(13|14|15|17|18)[0-9]{9}$/;
    
    // 匹配响应的字符串
    var s1 = "138888888888888";
    
    //RegExp对象的test方法,测试一个字符串是否符合对应的正则规则,返回值是true或false。
    reg1.test(s1);  // true

    匹配模式:

      g:表示全局(global)模式,匹配所有字符串,不会匹配到第一项时停止

      i:表示不区分大小写(case-insensitive)模式

      m:表示多行(multiline)模式,到达一行文本末尾时还会继续查找下一行中是否存在匹配的项

    var s2 = "hello world";
    
    s2.match(/o/g);         // ["o", "o"]             查找字符串中 符合正则 的内容
    s2.search(/h/g);        // 0                      查找字符串中符合正则表达式的内容位置
    s2.split(/o/g);         // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割
    s2.replace(/o/g, "s");  // "hells wsrld"          对字符串按照正则进行替换
    
    // 关于匹配模式:g和i的简单示例
    var s1 = "Uliusouthern";
    
    s1.replace(/u/, "哈哈哈");      // "Uli哈哈哈southern"
    s1.replace(/u/g, "哈哈哈");     // "Uli哈哈哈so哈哈哈thern"      全局匹配
    s1.replace(/u/gi, "哈哈哈");    // "哈哈哈n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写

    时间对象

    创建对象

    //
    方法1:不指定参数 var d1 = new Date(); console.log(d1.toLocaleString()); //方法2:参数为日期字符串 var d2 = new Date("2004/3/20 11:12"); console.log(d2.toLocaleString());
    Date    操作日期和时间的对象
    Date.getDate( )    返回一个月中的某一天
    Date.getDay( )    返回一周中的某一天
    Date.getFullYear( )    返回Date对象的年份字段
    Date.getHours( )    返回Date对象的小时字段
    Date.getMilliseconds( )    返回Date对象的毫秒字段
    Date.getMinutes( )    返回Date对象的分钟字段
    Date.getMonth( )    返回Date对象的月份字段
    Date.getSeconds( )    返回Date对象的秒字段
    Date.getTime( )    返回Date对象的毫秒表示
    Date.getTimezoneOffset( )    判断与GMT的时间差
    Date.getUTCDate( )    返回该天是一个月的哪一天(世界时)
    Date.getUTCDay( )    返回该天是星期几(世界时)
    Date.getUTCFullYear( )    返回年份(世界时)
    Date.getUTCHours( )    返回Date对象的小时字段(世界时)
    Date.getUTCMilliseconds( )    返回Date对象的毫秒字段(世界时)
    Date.getUTCMinutes( )    返回Date对象的分钟字段(世界时)
    Date.getUTCMonth( )    返回Date对象的月份(世界时)
    Date.getUTCSeconds( )    返回Date对象的秒字段(世界时)
    Date.getYear( )    返回Date对象的年份字段(世界时)
    Date.parse( )    解析日期/时间字符串
    Date.setDate( )    设置一个月的某一天
    Date.setFullYear( )    设置年份,也可以设置月份和天
    Date.setHours( )    设置Date对象的小时字段、分钟字段、秒字段和毫秒字段
    Date.setMilliseconds( )    设置Date对象的毫秒字段
    Date.setMinutes( )    设置Date对象的分钟字段和秒字段
    Date.setMonth( )    设置Date对象的月份字段和天字段
    Date.setSeconds( )    设置Date对象的秒字段和毫秒字段
    Date.setTime( )    以毫秒设置Date对象
    Date.setUTCDate( )    设置一个月中的某一天(世界时)
    Date.setUTCFullYear( )    设置年份、月份和天(世界时)
    Date.setUTCHours( )    设置Date对象的小时字段、分钟字段、秒字段和毫秒字段(世界时)
    Date.setUTCMilliseconds( )    设置Date对象的毫秒字段(世界时)
    Date.setUTCMinutes( )    设置Date对象的分钟字段和秒字段(世界时)
    Date.setUTCMonth( )    设置Date对象的月份字段和天数字段(世界时)
    Date.setUTCSeconds( )    设置Date对象的秒字段和毫秒字段(世界时)
    Date.setYear( )    设置Date对象的年份字段
    Date.toDateString( )    返回Date对象日期部分作为字符串
    Date.toGMTString( )    将Date转换为世界时字符串
    Date.toLocaleDateString( )    回Date对象的日期部分作为本地已格式化的字符串
    Date.toLocaleString( )    将Date转换为本地已格式化的字符串
    Date.toLocaleTimeString( )    返回Date对象的时间部分作为本地已格式化的字符串
    Date.toString( )    将Date转换为字符串
    Date.toTimeString( )    返回Date对象日期部分作为字符串
    Date.toUTCString( )    将Date转换为字符串(世界时)
    Date.UTC( )    将Date规范转换成毫秒数
    Date.valueOf( )    将Date转换成毫秒表示
    时间对象的方法

     词法分析

    JavaScript中在调用函数的那一瞬间,会先进行词法分析。

    词法分析的过程:

    分析阶段

    当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:

    1. 函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
    2. 函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
    3. 函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。级别最高

    执行阶段

    函数内部无论是使用参数还是使用局部变量都到AO上找。

    var age = 18;
    function foo(){
      console.log(age);
      var age = 22;
      console.log(age);
    }
    foo();  // 问:执行foo()之后的结果是 undifined 
                        22
    var age = 18;
    function foo(){
      console.log(age);
      var age = 22;
      console.log(age); 
      function age(){
        console.log("呵呵");
      }
      console.log(age);
    }
    foo();  // 执行后的结果是 undifined 
                  22
                  22
  • 相关阅读:
    ssh: connect to host port 22: Connection refused
    mysql安装出现 conflicts with mysql*的解决办法
    Linux 搭建互信后,仍需要密码验证
    正则表达式的小技巧
    基础的正则表达式与re模块(2)
    包的导入
    import模块
    模块的导入
    logging 模块
    hashlib 模块
  • 原文地址:https://www.cnblogs.com/liusouthern/p/8550923.html
Copyright © 2011-2022 走看看