zoukankan      html  css  js  c++  java
  • JavaScript之从头再来

    引入文件

    1. 引入外部文件

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

    2. 存放在HTML的<head>或<body>中

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

    HTML的head中

    HTML的body代码块底部(推荐)

    3. 为什么要放在<body>代码块底部?

    HTML代码从上到下执行,先加载CSS,避免html出现无样式状态;

    将JavaScript代码块放在<body>最后,可以让网页尽快的呈现给用户,减少浏览者的等待时间,避免因为JS代码块阻塞网页的呈现。

    变量

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

    <script type="text/javascript">
      
        // 全局变量
        name = 'nick';
      
        function func(){
            // 局部变量
            var age = 18;
      
            // 全局变量
            gender = "man"
        }
    </script>
    

    注:需要注意变量提升,就是把变量位置放到函数体的最上方

    运算符

    1. 算术运算符

     
        +  一元加,数值不会产生影响 对非数值应用一元加运算时,会调用Number()转型函数对这个值进行转换
        -  一元减,转换为负数 ~
        ++  递增1 通过Number()转型为数字,再加1,再重新赋值给操作数值
        -- 递减1 ~
    二元算术
        +  加法  
        -  减法  
        *  乘法  
        /  除法  
        %  取模  
    1> 如果其中一个操作数是对象,则对象会转换为原始值:日期对象通过toString()方法执行转换,其他对象通过valueOf()方法执行转换。如果结果还不是原始值,则再使用toString()方法转换
    2> 在进行了对象到原始值的转换后,如果其中一个操作数是字符串的话,另一个操作数也会转换成字符串,进行字符串拼接
    3> 两个操作数都将转换成数字或NaN,进行加法操作
    二元运算过程

    2. 比较运算符

      ===  严格运算符 比较过程没有任何类型转换
      !==  严格运算符 ===的结果取反
      ==  相等运算符 如果两个操作值不是同一类型,相等运算符会尝试进行一些类型转换,然后再进行比较
      !=  不相等运算符 ==的结果取反
      >  大于运算符  
      >=  大于等于运算符  
      <  小于运算符  
      <=  小于等于运算符  
    1> 如果两个值类型不同则返回false
    2> 如果两个值类型相同,值相同,则返回true,否则返回false
    3> 如果两个值引用同一个对象,则返回true,否则,返回false
    console.log([] === []);//false
    console.log({} === {});//false
    var a = {};
    b = a;
    console.log(a === b);//true
    严格运算符比较过程
    对象类型和原始类型比较:
    1> 对象类型会先使用valueOf()转换成原始值,如果结果还不是原始值,则再使用toString()方法转换,再进行比较(日期类只允许使用toString()方法转换为字符串)
    2> 在对象转换为原始值之后,如果两个操作数都是字符串,则进行字符串的比较
    3> 在对象转换为原始值之后,如果至少有一个操作数不是字符串,则两个操作数都将通过Number()转型函数转换成数字进行数值比较
    
    注:如果一个值是null,另一个值是undefined,则返回true;
    console.log(null == undefined);//true
    如果一个值是null,另一个值是0,则返回tfalse;
    console.log(null == 0);//false
    空字符串或空格字符串会转成0
    console.log(null == []);//false
    console.log(null == '');//false
    console.log([] == ' ');//false,相当于'' == ' '
    console.log([] == '');//true,相当于'' == ''
    console.log(0 == '');//true
    相等运算符比较过程
    数字和字符串比较:
    1> 如果操作值是对象,则这个对象将先使用valueOf()转换成原始值,如果结果还不是原始值,则再使用toString()方法转换
    2> 在对象转换为原始值之后,如果两个操作数都是字符串,则按照unicode字符的索引顺序对两个字符串进行比较
    3> 在对象转换为原始值之后,如果至少有一个操作数不是字符串,则两个操作数都转换成数字进行比较
    console.log('B' > 'a');//false
    console.log('b' > 'a');//true
    console.log(9 > '2');//true
    大于小于运算符比较过程

    3. 逻辑运算符

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

    返回一个布尔值
        &&  与 两个操作都为true时返回true,否则返回false(返回值不一定是布尔值),可以多个连用(..&&..&&..)
        ||  或 两个操作都是false时返回false,否则返回true(返回值不一定是布尔值),可以多个连用(..||..||..)
    //七个假值:
    console.log(!!undefined);//false
    console.log(!!null);//false
    console.log(!!0);//false
    console.log(!!-0);//false
    console.log(!!NaN);//false
    console.log(!!'');//false
    console.log(!!false);//false
     
    console.log(!!{});//true
    console.log(!![]);//true
    
    1> 取代if语句
    //前面条件成立则运行后面操作
    (a == b) && dosomething();
    
    2> 用于回调函数
    //若没有给参数a传值,则a默认为undefined假值,所以不执行a()。
    function fn(a){
        a && a();
    }
    && 常用操作
    1> 变量设置为默认值
    //如果没有向参数a传入任何参数,则将该参数设置为空对象
    function func(a){
        a = a || {};
    }
    || 常用操作

    数据类型

    特殊值:

    null      表示一个空对象指针,常用来描述"空值";

    undefined    表示变量未定义

    1、数字(Number)

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

    转换:

    parselnt()   将某值转换成整数,不成功则NaN

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

    特殊值:

    NaN,非数字。可以使用isNaN(num)来判断。

    Infinity,无穷大。可以使用isFinite(num)来判断。

    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( ) 返回原始数值

    2、字符串(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( ) 返回原始字符串值
     空字节
    
     换行
    	 制表
     空格
    
     回车
    f 进纸
    \ 斜杠
    ' 单引号
    " 双引号
    转义字符

    3、布尔类型(Boolean)

    true(真)和false(假)

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

     4、数组(Array)

    var name = Array("nick","jenny");
    var name = ["nick","jenny"];
    
    Array.length 数组的大小
    Array.push() 尾部添加元素
    Array.pop() 删除并返回数组的最后一个元素
    Array.unshift() 在数组头部插入一个元素
    Array.shift( ) 在数组头部移除一个元素
    Array.slice( ) 切片
    Array.reverse( ) 反转
    Array.join( ) 将数组元素连接起来以构建一个字符串
    Array.concat( ) 拼接
    Array.sort( ) 排序
    Array 对数组的内部支持
    Array.splice( start, deleteCount, value, ...)

    插入、删除或替换数组的元素

    obj.splice(n,0,val) 指定位置插入元素
    obj.splice(n,1,val) 指定位置替换元素
    obj.splice(n,1)    指定位置删除元素
    Array.toLocaleString( ) 把数组转换成局部字符串
    Array.toString( ) 将数组转换成一个字符串
  • 相关阅读:
    NAIPC 2019-It’s a Mod, Mod, Mod, Mod World(类欧几里德模板)
    BAPC 2018 Preliminaries-Isomorphic Inversion(字符串哈希)
    Cubemx 生成工程代码失败的原因
    共生滤波器相关论文分析
    西瓜书6.2 matlab的libsvm使用
    西瓜书4.4 基于基尼指数选择划分的决策树 预剪枝与后剪枝
    西瓜书4.3 编写过程 决策树
    西瓜书 5.5 编写过程(标准BP与累计BP)
    西瓜书3.4 解题报告(python 多分类学习 十折交叉法)
    西瓜书3.3 尝试解题(python)对率回归 极大似然估计
  • 原文地址:https://www.cnblogs.com/zhangkui/p/6808482.html
Copyright © 2011-2022 走看看