美文网首页
web前端--JS基础

web前端--JS基础

作者: zxhlcl | 来源:发表于2018-11-02 12:22 被阅读0次

    一、基础

    0、代码规范

    变量名推荐使用驼峰法来命名(camelCase)
    通常运算符 ( = + - * / ) 前后需要添加空格
    通常使用 4 个空格符号来缩进代码块
    条语句通常以分号作为结束符

    1、变量

    JavaScript 变量可用于存放值(比如 x=5)和表达式(比如 z=x+y)
    变量必须以字母开头
    变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
    变量名称对大小写敏感(y 和 Y 是不同的变量)

    var lastname="Doe", age=30, job="carpenter"; 
    var x,y,z=1; 
    //x,y 为 undefined, z 为 1。
    
    2、对象

    对象的定义

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

    对象属性

    person["lastName"]; 
    person.lastName;
    

    对象方法
    使用以下语法创建对象方法:
    methodName : function() { code lines }
    使用以下语法访问对象方法:
    objectName.methodName()

    <script>
    var person = {
        firstName: "John",
        lastName : "Doe",
        id : 5566,
        fullName : function() 
        {
           return this.firstName + " " + this.lastName;
        }
    };
    document.getElementById("demo1").innerHTML = "不加括号输出函数表达式:"  + person.fullName;
    document.getElementById("demo2").innerHTML = "加括号输出函数执行结果:"  +  person.fullName();
    </script>
    //不加括号输出函数表达式:function() { return this.firstName + " " + this.lastName; }
    //加括号输出函数执行结果:John Doe
    

    person 对象的 fullName 属性,它将作为一个定义函数的字符串返回

    3、函数

    语法:
    function myFunction(param1 param2)
    {
    var x=param1;
    var y=param2;
    return x+y;
    }
    注意:把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性;非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。

    var var1 = 1; // 不可配置全局属性
    var2 = 2; // 没有使用 var 声明,可配置全局属性
    
    console.log(this.var1); // 1
    console.log(window.var1); // 1
    
    delete var1; // false 无法删除
    console.log(var1); //1
    
    delete var2; 
    console.log(delete var2); // true
    console.log(var2); // 已经删除 报错变量未定义
    
    4、作用域

    在 JavaScript 中, 对象和函数同样也是变量。
    在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
    JavaScript 函数作用域: 作用域在函数内修改。

    变量生命周期:
    JavaScript 变量生命周期在它声明时初始化。
    局部变量在函数执行完毕后销毁。
    全局变量在页面关闭后销毁。

    全局和局部变量
    变量在函数外定义,即为全局变量。
    变量在函数内声明,变量为局部作用域。

    注意:
    如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。

    5、数据类型

    值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。
    引用数据类型:对象(Object)、数组(Array)、函数(Function)。
    undefined 是一个没有设置值的变量
    null是一个只有一个值的特殊类型,表示一个空对象引用。

    typeof undefined             // undefined
    typeof null                  // object
    null === undefined           // false
    null == undefined            // true
    
    6、运算符

    1、数学运算
    +、 - 、、 \ 、% 、++ 、--
    注意自加和自减
    x=++y (先自加,再赋值) x=y++ (先赋值,再自加)
    2、比较运算
    ==、===、!=、!==、>、<、>=、<=
    3、赋值运算
    =、+=、-=、
    =、/=、%=
    4、逻辑运算
    && || !
    5、位运算
    & | ~ ^ >> <<
    6、条件运算
    variablename=(condition)?value1:value2

    7、事件

    HTML 事件是发生在 HTML 元素上的事情。
    当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
    包括:鼠标事件、键盘事件等,参考DOM

    8、分支语句和循环语句

    分支结构
    if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
    if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
    if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
    switch 语句 - 使用该语句来选择多个代码块之一来执行
    swith-case语法:
    switch(n)
    {
    case 1:
    执行代码块 1
    break;
    case 2:
    执行代码块 2
    break;
    default:
    与 case 1 和 case 2 不同时执行的代码
    }
    循环语句
    for - 循环代码块一定的次数
    for/in - 循环遍历对象的属性
    while - 当指定的条件为 true 时循环指定的代码块
    do/while - 同样当指定的条件为 true 时循环指定的代码块
    注意:
    do/while --先执行再判断,至少执行一次代码体

    for循环
    下面是 for 循环的语法:
    for (语句 1; 语句 2; 语句 3)
    {
    被执行的代码块
    }

    语句 1 (代码块)开始前执行
    语句 2 定义运行循环(代码块)的条件
    语句 3 在循环(代码块)已被执行之后执行

    //在循环开始前已经设置了值时,省略语句1
    var i=2,len=cars.length;
    for (; i<len; i++)
    { 
        document.write(cars[i] + "<br>");
    }
    
    //当循环内部有相应的代码时,省略语句3
    var i=0,len=cars.length;
    for (; i<len; )
    { 
        document.write(cars[i] + "<br>");
        i++;
    }
    

    continue--下次循环
    break--退出本次循环

    9、数据转换

    5 种不同的数据类型: string 、number、 boolean、object、function
    3 种对象类型: Object、Date、Array
    2 个不包含任何值的数据类型:null、undefined

    1、typeof 使用

    typeof "John"                 // 返回 string
    typeof 3.14                   // 返回 number
    typeof NaN                    // 返回 number
    typeof false                  // 返回 boolean
    typeof [1,2,3,4]              // 返回 object
    typeof {name:'John', age:34}  // 返回 object
    typeof new Date()             // 返回 object
    typeof function () {}         // 返回 function
    typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
    typeof null                   // 返回 object 
    

    NaN 的数据类型是 number
    数组(Array)的数据类型是 object
    日期(Date)的数据类型为 object
    null 的数据类型是 object
    未定义变量的数据类型为 undefined

    2、constructor 属性
    constructor 属性返回所有 JavaScript 变量的构造函数

    "John".constructor                 // 返回函数 String()  { [native code] }
    (3.14).constructor                 // 返回函数 Number()  { [native code] }
    false.constructor                  // 返回函数 Boolean() { [native code] }
    [1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
    {name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
    new Date().constructor             // 返回函数 Date()    { [native code] }
    function () {}.constructor         // 返回函数 Function(){ [native code] } 
    

    3、数据转换
    通过使用 JavaScript 函数
    通过 JavaScript 自身自动转换

    a.转换为字符串

    String(x)         // 将变量 x 转换为字符串并返回
    String(123)       // 将数字 123 转换为字符串并返回
    String(100 + 23)  // 将数字表达式转换为字符串并返回
    (123).toString()
    (100 + 23).toString()
    
    String(false)        // 返回 "false"
    String(true)         // 返回 "true" 
    false.toString()     // 返回 "false"
    true.toString()      // 返回 "true" 
    
    Date()      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
    String(new Date())      // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
    

    b.转换为数字
    注意:一元操作符+

    Number("3.14")    // 返回 3.14
    Number(" ")       // 返回 0
    Number("")        // 返回 0
    Number("99 88")   // 返回 NaN 
    
     var y = "5";      // y 是一个字符串
    var x = + y;      // x 是一个数字 
     var y = "John";   // y 是一个字符串
    var x = + y;      // x 是一个数字 (NaN)
    
    Number(false)     // 返回 0
    Number(true)      // 返回 1 
    
    d = new Date();
    Number(d)          // 返回 1404568027739 
    

    当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型。

    5 + null    // 返回 5         null 转换为 0
    "5" + null  // 返回"5null"   null 转换为 "null"
    "5" + 1     // 返回 "51"      1 转换为 "1" 
    "5" - 1     // 返回 4         "5" 转换为 5
    

    当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法:

    document.getElementById("demo").innerHTML = myVar;
    
    myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
    myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
    myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"
    

    转换表如下:

    数据转化表.png
    10、正则表达式

    1、语法:/正则表达式主体/修饰符(可选)
    修饰符含义:
    i 执行对大小写不敏感的匹配。
    g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
    m 执行多行匹配。
    2、RegExp 对象
    test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false

    var patt = /e/;
    patt.test("The best things in life are free!"); 
    

    3、使用 exec()
    exec() 方法用于检索字符串中的正则表达式的匹配

    /e/.exec("The best things in life are free!"); 
    
    11、异常处理

    try 语句测试代码块的错误。
    catch 语句处理错误。
    finnaly
    throw 语句创建自定义错误。

    二、提升(hosting)

    JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。
    JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。
    JavaScript 只有声明的变量会提升,初始化的不会。
    函数优先,虽然函数声明和变量声明都会被提升,但是函数会首先被提升,然后才是变量。

    理解JS解析机制:
    遇到 script 标签的话 js 就进行预解析,将变量 var 和 function 声明提升,但不会执行 function,然后就进入上下文执行,上下文执行还是执行预解析同样操作,直到没有 var 和 function,就开始执行上下文。如:
    a=5;
    show();
    var a;
    function show(){};
    预解析:
    function show(){};
    var a;
    a=5;
    show();
    需要注意都是函数声明提升直接把整个函数提到执行环境的最顶端。

    相关文章

      网友评论

          本文标题:web前端--JS基础

          本文链接:https://www.haomeiwen.com/subject/qasqxqtx.html