zoukankan      html  css  js  c++  java
  • JSStudy

    目录

    JS Study

    JavaScript 变量

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

    JavaScript 数据类型

    • 当您向变量分配文本值时,应该用双引号或单引号包围这个值。
    • 当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。
    var pi=3.14;//数字赋值不要加引号
    var person="John Doe";
    var answer='Yes I am!';
    

    声明(创建) JavaScript 变量

    1. 先声明,后赋值
    var name;
    name="HuangXin";
    
    1. 声明同时赋值
    var name="HuangXin";
    
    1. 一条语句,多个变量
    //可以一行
    var lastname="Doe", age=30, job="carpenter";
    //可以多行
    var lastname="Doe",
    age=30,
    job="carpenter";
    

    误区:

    一条语句中声明的多个变量不可以同时赋同一个值:

    var x,y,z=1;
    

    x,y为undefined;z为1。

    注:
    声明的变量没有的为undefined

    var name;
    //等价于
    var name=nudefined;
    

    重新声明 JavaScript 变量

    在以下两条语句执行后,变量 name 的值依然是 "HuangXin":

    var name="HuangXin";
    var name;
    

    JavaScript 算数

    声明变量赋值的同时可以进行计算:

    var a=4;
    var b=a+1;//b=5
    

    *JavaScript 数据类型

    值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

    引用数据类型:对象(Object)、数组(Array)、函数(Function)。


    JavaScript 字符串

    字符串可以是引号中的任意文本。您可以使用单引号或双引号。

    您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:

    var answer="It's alright";
    var answer="He is called 'Johnny'";
    var answer='He is called "Johnny"';
    

    JavaScript 数字

    • JavaScript 只有一种数字类型。数字可以带小数点,也可以不带;
    • 极大或极小的数字可以通过科学(指数)计数法来书写:
    var x=123e5;//12300000
    var y=123e-5;//0.00123
    

    JavaScript 布尔

    布尔(逻辑)只能有两个值:true 或 false。

    var x=true;
    var y=false;
    

    JavaScript 数组

    创建cars数组:

    var cars=new Array();
    cars[0]="Saab";
    cars[1]="BMW";
    

    或者:

    var cars=new Array("Saab","BMW");
    

    or:

    var cars=["Saab","BMW"];
    

    JavaScript 对象

    对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

    var person={id:"10010",name:"HuangXin"};
    

    or:

    var person={
    	id:"10010",
    	name:"HuangXin";
    };
    

    对象属性有两种寻址方式:

    id=person["id"];
    id=person.id;//推荐
    

    Undefined 和 Null

    Undefined 这个值表示变量不含有值。

    可以通过将变量的值设置为 null 来清空变量。

    cars=null;
    person=null;
    

    JavaScript 对象

    对象定义

    var person={
    	id:"10010",
    	name:"HuangXin",
    	address:"SD"
    };
    

    访问对象方法

    如果使用 fullName 属性,不添加 (), 它会返回函数的定义:

    function() { return "id:" + this.id + "name:" + this.name + "address:" + this.address; }
    

    JavaScript 函数

    调用带参数的函数

    可以发送任意多的参数,由逗号 (,) 分隔:

    function myFunction(var1,var2)
    {
    代码
    }
    

    变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值


    带有返回值的函数

    function myFunction()
    {
        var x=5;
        return x;
    }
    

    函数调用将被返回值取代:

    var myVar=myFunction();
    

    局部 JavaScript 变量

    在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。


    全局 JavaScript 变量

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

    JavaScript 变量的生存期

    • JavaScript 变量的生命期从它们被声明的时间开始。
    • 局部变量会在函数运行以后被删除。
    • 全局变量会在页面关闭后被删除。

    向未声明的 JavaScript 变量分配值

    • 如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。
    • 非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。
    var var1 = 1; // 不可配置全局属性
    var2 = 2; // 没有使用 var 声明,可配置全局属性
    console.log(this.var1); // 1
    console.log(window.var1); // 1
    console.log(window.var2); // 2
    delete var1; // false 无法删除
    console.log(var1); //1
    delete var2; 
    console.log(delete var2); // true
    console.log(var2); // 已经删除 报错变量未定义
    

    JavaScript 作用域

    JavaScript 作用域

    变量在函数内声明,变量为局部作用域。

    局部变量:只能在函数内部访问。


    JavaScript 全局变量

    • 变量在函数外定义,即为全局变量。全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
    • 如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。

    JavaScript 变量生命周期

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

    函数参数

    函数参数只在函数内起作用,是局部变量。
    在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。


    JavaScript 事件

    JavaScript 字符串

    • 字符串的索引从 0 开始,这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。
    • 你可以在字符串中使用引号,字符串中的引号不要与字符串的引号相同。

    字符串可以是对象

    • 通常, JavaScript 字符串是原始值,可以使用字符创建: var firstName = "John"
    • 但我们也可以使用 new 关键字将字符串定义为一个对象: var firstName = new String("John")
    var x = "John";
    var y = new String("John");
    typeof x // 返回 String
    typeof y // 返回 Object
    

    注:

    • 不要创建 String 对象。它会拖慢执行速度,并可能产生其他副作用。
    • === 为绝对相等,即数据类型与值都必须相等。

    字符串属性和方法

    原始值字符串没有属性和方法(因为他们不是对象),但可以使用JavaScript的属性和方法,
    因为JavaScript在执行方法和属性时可以把原始值当作对象。

    字符串属性

    属性 描述
    constructor 返回创建字符串属性的函数
    length 返回字符串的长度
    prototype 允许您向对象添加属性和方法

    字符串方法

    方法 描述
    charAt() 返回指定索引位置的字符
    charCodeAt() 返回指定索引位置字符的 Unicode 值
    concat() 连接两个或多个字符串,返回连接后的字符串
    fromCharCode() 将 Unicode 转换为字符串
    indexOf() 返回字符串中检索指定字符第一次出现的位置
    lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
    localeCompare() 用本地特定的顺序来比较两个字符串
    match() 找到一个或多个正则表达式的匹配
    replace() 替换与正则表达式匹配的子串
    search() 检索与正则表达式相匹配的值
    slice() 提取字符串的片断,并在新的字符串中返回被提取的部分
    split() 把字符串分割为子字符串数组
    substr() 从起始索引号提取字符串中指定数目的字符
    substring() 提取字符串中两个指定的索引号之间的字符
    toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
    toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
    toLowerCase() 把字符串转换为小写
    toString() 返回字符串对象值
    toUpperCase() 把字符串转换为大写
    trim() 移除字符串首尾空白
    valueOf() 返回某个字符串对象的原始值

    JavaScript 运算符


    JavaScript 比较 和 逻辑运算符

    比较运算符

    比较运算符在逻辑语句中使用,以测定变量或值是否相等。

    逻辑运算符

    逻辑运算符用于测定变量或值之间的逻辑。

    条件运算符

    ?:(三目运算符)


    JavaScript if...Else 语句

    条件语句

    • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
    • if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
    • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
    • switch 语句 - 使用该语句来选择多个代码块之一来执行

    if 语句

    if (time<20)
    {
        x="Good day";
    }
    

    if...else 语句

    if (time<20)
    {
        x="Good day";
    }
    else
    {
        x="Good evening";
    }
    

    if...else if...else 语句

    if (time<10)
    {
        document.write("<b>早上好</b>");
    }
    else if (time>=10 && time<20)
    {
        document.write("<b>今天好</b>");
    }
    else
    {
        document.write("<b>晚上好!</b>");
    }
    

    JavaScript switch 语句

    switch(n)
    {
        case 1:
            执行代码块 1
            break;
        case 2:
            执行代码块 2
            break;
        default:
            与 case 1 和 case 2 不同时执行的代码
    }
    

    工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。
    请使用 break 来阻止代码自动地向下一个 case 运行。

    请使用 default 关键词来规定匹配不存在时做的事情:


    JavaScript for 循环

    循环可以将代码块执行指定的次数。

    JavaScript 循环

    for (var i=0;i<cars.length;i++)
    { 
        document.write(cars[i] + "<br>");
    }
    

    不同类型的循环

    • for - 循环代码块一定的次数
    • for/in - 循环遍历对象的属性
    • while - 当指定的条件为 true 时循环指定的代码块
    • do/while - 同样当指定的条件为 true 时循环指定的代码块

    For 循环

    for (var i=0; i<5; i++)
    {
          x=x + "该数字为 " + i + "<br>";
    }
    

    For/In 循环

    var person={fname:"Bill",lname:"Gates",age:56}; 
     
    for (x in person)  // x 为属性名(fname,lname,age)
    {
        txt=txt + person[x];
    }
    

    JavaScript while 循环

    while 循环

    while 循环会在指定条件为真时循环执行代码块。

    while (i<5)
    {
        x=x + "The number is " + i + "<br>";
        i++;
    }
    

    do/while 循环

    do
    {
        x=x + "The number is " + i + "<br>";
        i++;
    }
    while (i<5);
    

    JavaScript break 和 continue 语句

    • break 语句用于跳出循环。
    • continue 用于跳过循环中的一个迭代。

    JavaScript 标签

    • continue 语句(带有或不带标签引用)只能用在循环中。
    • break 语句(不带标签引用),只能用在循环或 switch 中。
    cars=["BMW","Volvo","Saab","Ford"];
    list: 
    {
        document.write(cars[0] + "<br>"); 
        document.write(cars[1] + "<br>"); 
        document.write(cars[2] + "<br>"); 
        break list;
        document.write(cars[3] + "<br>"); 
        document.write(cars[4] + "<br>"); 
        document.write(cars[5] + "<br>"); 
    }
    

    JavaScript typeof, null, undefined,valueOf()

    typeof 操作符

    你可以使用 typeof 操作符来检测变量的数据类型。

    typeof "John"                // 返回 string
    typeof 3.14                  // 返回 number
    typeof false                 // 返回 boolean
    typeof [1,2,3,4]             // 返回 object
    typeof {name:'John', age:34} // 返回 object
    

    在JavaScript中,数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。

    null

    在 JavaScript 中 null 表示 "什么都没有"。

    null是一个只有一个值的特殊类型。表示一个空对象引用。
    用 typeof 检测 null 返回是object。

    undefined

    在 JavaScript 中, undefined 是一个没有设置值的变量。

    typeof 一个没有值的变量会返回 undefined。

    任何变量都可以通过设置值为 undefined 来清空。

    null 和 undefined 的值相等,但类型不等。


    JavaScript 类型转换

    JavaScript 数据类型

    6 种不同的数据类型

    • string
    • number
    • boolean
    • object
    • function
    • symbol

    3 种对象类型

    • Object
    • Date
    • Array

    2 个不包含任何值的数据类型

    • null
    • undefined

    Notion:

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

    constructor 属性

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

    JavaScript 类型转换

    JavaScript 变量可以转换为新变量或其他数据类型:

    • 通过使用 JavaScript 函数
    • 通过 JavaScript 自身自动转换

    将数字转换为字符串

    1. 全局方法 String() 可以将数字转换为字符串。该方法可用于任何类型的数字,字母,变量,表达式.
    String(x)         // 将变量 x 转换为字符串并返回
    String(123)       // 将数字 123 转换为字符串并返回
    String(100 + 23)  // 将数字表达式转换为字符串并返回
    
    1. Number 方法 toString() 也是有同样的效果。
    x.toString()
    (123).toString()
    (100 + 23).toString()
    

    将日期转换为字符串

    1. Date() 返回字符串。
    Date()
    
    1. 全局方法 String() 可以将日期对象转换为字符串。
    2. Date 方法 toString()。
    3. Other methods:
      |方法 |描述 |
      |-- |-- |
      |getDate() |从 Date 对象返回一个月中的某一天 (1 ~ 31)。|
      |getDay() |从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
      |getFullYear() |从 Date 对象以四位数字返回年份。 |
      |getHours() |返回 Date 对象的小时 (0 ~ 23)。 |
      |getMilliseconds() |返回 Date 对象的毫秒(0 ~ 999)。 |
      |getMinutes() |返回 Date 对象的分钟 (0 ~ 59)。 |
      |getMonth() |从 Date 对象返回月份 (0 ~ 11)。 |
      |getSeconds() |返回 Date 对象的秒数 (0 ~ 59)。 |
      |getTime() |返回 1970 年 1 月 1 日至今的毫秒数。 |

    将字符串转换为数字

    全局方法 Number() 可以将字符串转换为数字。

    Number("3.14")    // 返回 3.14
    Number(" ")       // 返回 0
    Number("")        // 返回 0
    Number("99 88")   // 返回 NaN
    

    JavaScript 正则表达式

    语法

    /正则表达式主体/修饰符(可选)

    使用字符串方法

    search() 方法使用正则表达式

    使用正则表达式搜索 "Runoob" 字符串,且不区分大小写:

    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);
    

    search() 方法使用字符串

    search 方法可使用字符串作为参数。字符串参数会转换为正则表达式:

    var str = "Visit Runoob!"; 
    var n = str.search("Runoob");
    

    replace() 方法使用正则表达式

    使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :

    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"Runoob");
    

    replace() 方法使用字符串

    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace("Microsoft","Runoob");
    

    正则表达式修饰符

    修饰符 可以在全局搜索中不区分大小写:

    修饰符 描述
    i 执行对大小写不敏感的匹配。
    g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
    m 执行多行匹配。

    正则表达式模式

    方括号用于查找某个范围内的字符:

    表达式 描述
    [abc] 查找方括号之间的任何字符。
    [0-9] 查找任何从 0 至 9 的数字。
    (x|y) 查找任何以"|" 分隔的选项。

    元字符是拥有特殊含义的字符:

    元字符 描述
    d 查找数字。
    s 查找空白字符。
     匹配单词边界。
    uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

    量词:

    量词 描述
    n+ 匹配任何包含至少一个 n 的字符串。
    n* 匹配任何包含零个或多个 n 的字符串。
    n? 匹配任何包含零个或一个 n 的字符串。

    使用 RegExp 对象

    在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象。

    使用 test()

    • test() 方法是一个正则表达式方法。
    • test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。
    var patt = /e/;
    patt.test("The best things in life are free!");
    

    使用 exec()

    • exec() 方法是一个正则表达式方法。
    • exec() 方法用于检索字符串中的正则表达式的匹配。
    • 该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。
    /e/.exec("The best things in life are free!");
    

    JavaScript 错误 - throw、try 和 catch

    • try 语句测试代码块的错误。
    • catch 语句处理错误。
    • throw 语句创建自定义错误。
    • finally 语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。

    JavaScript 错误

    JavaScript try 和 catch

    try {
        ...    //异常的抛出
    } catch(e) {
        ...    //异常的捕获与处理
    } finally {
        ...    //结束处理
    }
    

    JavaScript 调试

    debugger 关键字

    var x = 15 * 5;
    debugger;
    document.getElementbyId("demo").innerHTML = x;
    

    JavaScript 变量提升

    • JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。
    • JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。

    JavaScript 初始化不会提升。

    JavaScript 只有声明的变量会提升,初始化的不会。

    JavaScript 严格模式(strict mode)不允许使用未声明的变量。


    JavaScript 严格模式(use strict)

    JavaScript 严格模式(strict mode)即在严格的条件下运行。严格模式下你不能使用未声明的变量。

    "use strict";
    x = 3.14;       // 报错 (x 未定义)
    

    严格模式的限制

    1. 不允许使用未声明的变量
    2. 不允许删除变量或对象。
    3. 不允许删除函数。
    4. 不允许变量重名
    5. 不允许使用八进制
    6. 不允许使用转义字符
    7. 不允许对只读属性赋值
    8. 不允许对一个使用getter方法读取的属性进行赋值
    9. 不允许删除一个不允许删除的属性
    10. 变量名不能使用 "eval" 字符串
    11. 变量名不能使用 "arguments" 字符串
    12. 不允许使用以下这种语句
    13. 由于一些安全原因,在作用域 eval() 创建的变量不能被调用
    14. 禁止this关键字指向全局对象。

    保留关键字

    • implements
    • interface
    • let
    • package
    • private
    • protected
    • public
    • static
    • yield

    "use strict" 指令只允许出现在脚本或函数的开头。


    JavaScript 表单

    JavaScript 表单验证

    JavaScript this 关键字

    • 在方法中,this 表示该方法所属的对象。
    • 如果单独使用,this 表示全局对象。
    • 在函数中,this 表示全局对象。
    • 在函数中,在严格模式下,this 是未定义的(undefined)。
    • 在事件中,this 表示接收事件的元素。
    • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

    JavaScript JSON

    JSON 是用于存储和传输数据的格式。

    JSON 通常用于服务端向网页传递数据 。

    JSON 语法规则

    • 数据为 键/值 对。
    • 数据由逗号分隔。
    • 大括号保存对象
    • 方括号保存数组

    JSON 对象

    {"name":"Runoob", "url":"www.runoob.com"}
    

    JSON 数组

    "sites":[
        {"name":"Runoob", "url":"www.runoob.com"}, 
        {"name":"Google", "url":"www.google.com"},
        {"name":"Taobao", "url":"www.taobao.com"}
    ]
    

    JSON 字符串转换为 JavaScript 对象

    使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

    var obj = JSON.parse(text);
    

    将 JavaScript 值转换为 JSON 字符串。

    JSON.stringify()

    var str = {"name":"菜鸟教程", "site":"http://www.runoob.com"};
    str_pretty1 = JSON.stringify(str);
    

    JavaScript 异步编程

    回调函数

    JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

    回调函数就是一个函数,它是在我们启动一个异步任务的时候就告诉它:等你完成了这个任务之后要干什么。

    setTimeout(function () {
        document.getElementById("demo").innerHTML="RUNOOB!";
    }, 3000);
    

    异步 AJAX

    jQuery主用



    JS 函数定义

    • JavaScript 使用关键字 function 定义函数。
    • 函数可以通过声明定义,也可以是一个表达式。

    函数声明

    function functionName(parameters) {
      执行的代码;//只有可执行js语句才用分号分开
    }
    

    声明之后不会执行,被调用时才会执行。

    分号是用来分隔可执行JavaScript语句。由于函数声明不是一个可执行语句,所以不以分号结束。

    函数表达式

    函数表达式以分号结尾,因为它是一个执行语句。

    JavaScript 函数可以通过一个表达式定义。都是匿名函数(没有函数名)。

    函数表达式可以存储在变量中:

    var x = function(a, b) {return a * b};
    

    在函数表达式存储在变量后,变量也可作为一个函数使用:

    var x = function (a, b) {return a * b};
    var z = x(4, 3);
    

    Function() 构造函数(少用:速度慢)

    var myFunction = new Function("a", "b", "return a * b");
    var x = myFunction(4, 3);
    

    在 JavaScript 中,很多时候,你需要避免使用 new 关键字。

    函数提升(Hoisting)

    函数可以在声明之前调用

    myFunction(5);//调用
    function myFunction(y) {
        return y * y;
    }//声明
    

    使用表达式定义函数时无法提升。

    自调用函数

    • 函数表达式可以 "自调用"。
    • 自调用表达式会自动调用。
    • 如果表达式后面紧跟 () ,则会自动调用。
    • 不能自调用声明的函数。
    • 通过添加括号,来说明它是一个函数表达式:
    (function () {
        var x = "Hello!!";      // 我将调用自己
    })();//无参
    (function(a, b) {
    	console.log(a + b); // 我将调用自己
    })(2, 3);//有参数
    
    • 以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。

    函数可作为一个值使用

    • JavaScript 函数作为一个值使用:
    function myFunction(a, b) {
        return a * b;
    }
    var x = myFunction(4, 3);
    
    • JavaScript 函数可作为表达式使用:
    function myFunction(a, b) {
        return a * b;
    }
    var x = myFunction(4, 3) * 2;
    

    箭头函数

    ES6 新增了箭头函数。

    (参数1, 参数2, …, 参数N) => { 函数声明 }
    (参数1, 参数2, …, 参数N) => 表达式(单一)
    

    当只有一个参数时,圆括号是可选的:

    (单一参数) => {函数声明}
    单一参数 => {函数声明}
    

    没有参数的函数应该写成一对圆括号:

    () => {函数声明}
    
    const xx = () => console.log("xx");
    xx();//xx
    const yy = x => console.log("yy:" + x * x);
    yy(6);//36
    const zz = (x, y) => {
    	console.log("zz");
    	return x;
    }
    console.log("zz:"+zz(2,3));//zz 2
    
    • 箭头函数是不能提升的,所以需要在使用之前定义。
    • 使用 const 比使用 var 更安全,因为函数表达式始终是一个常量。
    • 如果函数部分只是一个语句,则可以省略 return 关键字和大括号 {}

    JavaScript 函数参数

    JavaScript 函数对参数的值没有进行任何的检查。

    函数显式参数(Parameters)与隐式参数(Arguments)

    • 函数显式参数在函数定义时列出。
    • 函数隐式参数在函数调用时传递给函数真正的值。

    参数规则

    1. JavaScript 函数定义显式参数时没有指定数据类型。
    2. JavaScript 函数对隐式参数没有进行类型检测。
    3. JavaScript 函数对隐式参数的个数没有进行检测。

    默认参数

    ES5 中如果函数在调用时未提供隐式参数,参数会默认设置为: undefined

    function myFunction(x, y) {
        y = y || 0;
    }
    

    如果y已经定义 , y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。

    ES6 函数可以自带参数

    ES6 支持函数带有默认参数,就判断 undefined 和 || 的操作:

    function myFunction(x, y = 10) {
        // y is 10 if not passed or undefined
        return x + y;
    }
    myFunction(0, 2) // 输出 2
    myFunction(5); // 输出 15, y 参数的默认值
    

    arguments 对象

    JavaScript 函数有个内置的对象 arguments 对象。argument 对象包含了函数调用的参数数组。

    通过值传递参数

    在函数中调用的参数是函数的隐式参数。

    JavaScript 隐式参数通过值来传递:函数仅仅只是获取值。

    如果函数修改参数的值,不会修改显式参数的初始值(在函数外定义)。

    隐式参数的改变在函数外是不可见的。

    通过对象传递参数

    在JavaScript中,可以引用对象的值。

    因此我们在函数内部修改对象的属性就会修改其初始的值。

    修改对象属性可作用于函数外部(全局变量)。

    修改对象属性在函数外是可见的。

    JavaScript 函数调用

    JavaScript 函数有 4 种调用方式。每种方式的不同在于 this 的初始化。

    this 关键字

    一般而言,在Javascript中,this指向函数执行时的当前对象。

    作为一个函数调用

    function myFunction(a, b) {
        return a * b;
    }
    myFunction(10, 2);           // myFunction(10, 2) 返回 20
    

    以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象

    • 在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面。
    • 在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

    myFunction() 和 window.myFunction() 是一样的。

    全局对象

    当函数没有被自身的对象调用时 this 的值就会变成全局对象。

    在 web 浏览器中全局对象是浏览器窗口(window 对象)。

    function myFunction() {
        return this;
    }
    myFunction();                // 返回 window 对象
    

    函数作为全局对象调用,会使 this 的值成为全局对象。
    使用 window 对象作为一个变量容易造成程序崩溃。

    函数作为方法调用

    在 JavaScript 中你可以将函数定义为对象的方法。

    var myObject = {
        firstName:"John",
        lastName: "Doe",
        fullName: function () {
            return this.firstName + " " + this.lastName;
        }
    }
    myObject.fullName();         // 返回 "John Doe"
    
    • fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。
    • this对象,拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。

    函数作为对象方法调用,会使得 this 的值成为对象本身。

    使用构造函数调用函数

    如果函数调用前使用了 new 关键字, 则是调用了构造函数。使用new关键字则会创建一个新的对象。

    // 构造函数:
    function myFunction(arg1, arg2) {
        this.firstName = arg1;
        this.lastName  = arg2;
    }
    // This    creates a new object
    var x = new myFunction("John","Doe");
    x.firstName;                             // 返回 "John"
    

    构造函数中 this 关键字没有任何的值。this 的值在函数调用实例化对象(new object)时创建。

    作为函数方法调用函数

    call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

    function myFunction(a, b) {
        return a * b;
    }
    myObject = myFunction.call(myObject, 10, 2);     // 返回 20
    
    function myFunction(a, b) {
        return a * b;
    }
    let myArray = [10, 2];
    let myObject = myFunction.apply(myObject, myArray);  // 返回 20
    

    两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。

    在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。

    在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

    var let const

    在javascript中有三种声明变量的方式:var、let、const。

    JS中作用域有:全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。块作用域由 { } 包括,if语句和for语句里面的{ }也属于块作用域。

    var

    var定义的变量可以修改,如果不初始化会输出undefined,不会报错。

    var 声明全局变量,换句话理解就是,声明在for循环中的变量,跳出for循环同样可以使用。

    声明在for循环内部的sum,跳出for循环一样可以使用,不会报错正常弹出结果

    let

    同一个变量,不可在声明之前调用,必须先定义再使用,否则会报错,循环体中可以用let

    let是块级作用域,函数内部使用let定义后,对函数外部无影响。并且let不能定义同名变量,否则会报错。

    const

    用于声明常量,也具有块级作用域 ,也可声明块级。const定义的变量不可以修改,而且必须初始化。

    const和let一样,也不能重复定义同一个变量,const一旦定义,无法修改.

    let和const属于局部变量,不会出现变量提升的情况,全局定义的let和const变量,不属于顶层变量,不属于window的属性,

    JavaScript 闭包

    JavaScript 变量可以是局部变量或全局变量。私有变量可以用到闭包。

    全局变量

    变量声明时如果不使用 var 关键字,那么它就是一个全局变量,即便它在函数内定义。

    变量生命周期

    全局变量的作用域是全局性的,即在整个JavaScript程序中,全局变量处处都在。

    而在函数内部声明的变量,只在函数内部起作用。这些变量是局部变量,作用域是局部性的;函数的参数也是局部性的,只在函数内部起作用。

    JavaScript 内嵌函数

    所有函数都能访问全局变量。

    实际上,在 JavaScript 中,所有函数都能访问它们上一层的作用域。

    JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

    该实例中,内嵌函数 plus() 可以访问父函数的 counter 变量:

    function add() {
        var counter = 0;
        function plus() {counter += 1;}
        plus();    
        return counter; 
    }
    

    JavaScript 闭包

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

    闭包是一种保护私有变量的机制,在函数执行时形成私有的作用域,保护里面的私有变量不受外界干扰。直观的说就是形成一个不销毁的栈环境。

    JavaScript 对象

    JavaScript 中的所有事物都是对象。对象只是带有属性和方法的特殊数据类型。

    访问对象的属性

    //语法:
    objectName.propertyName
    //如:
    var message="Hello World!";
    var x=message.length;
    

    访问对象的方法

    //讲法:
    objectName.methodName();
    //如:
    var message="Hello world!";
    var x=message.toUpperCase();
    

    创建 JavaScript 对象

    1. 使用 Object 定义并创建对象的实例。
    2. 使用函数来定义对象,然后创建新的对象实例。

    使用 Object

    Object 构造函数,会根据给定的参数创建对象,具体有以下情况:

    • 如果给定值是 null 或 undefined,将会创建并返回一个空对象。
    • 如果传进去的是一个基本类型的值,则会构造其包装类型的对象。
    • 如果传进去的是引用类型的值,仍然会返回这个值,经他们复制的变量保有和源对象相同的引用地址。(传地址)
    • 当以非构造函数形式被调用时,Object 的行为等同于 new Object()。
    // 以构造函数形式来调用
    new Object([value]);//vaule 可以是任何值。
    //如:
    person=new Object();
    person.firstname="John";
    person.lastname="Doe";
    person.age=50;
    person.eyecolor="blue";
    

    也可以使用对象字面量来创建对象,语法格式如下:

    { name1 : value1, name2 : value2,...nameN : valueN }
    //如:
    person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
    

    JavaScript 对象就是一个 name:value 集合。

    使用对象构造器

    function person(firstname,lastname,age)
    {
    	//在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)
        this.firstname=firstname;
        this.lastname=lastname;
        this.age=age;
    }
    //创建 JavaScript 对象实例
    myFather=new person("John","Doe",50);
    

    把属性添加到 JavaScript 对象

    您可以通过为对象赋值,向已有对象添加新属性

    把方法添加到 JavaScript 对象

    在构造器函数内部定义对象的方法

    function person(firstname,lastname,age,eyecolor)
    {
        this.firstname=firstname;
        this.lastname=lastname;
        this.age=age;
        this.eyecolor=eyecolor;
        this.changeName=changeName;
        function changeName(name)
        {
            this.lastname=name;
        }
    }
    //or
    p.changeName = function(name) {
    	this.lastName = name;
    }
    

    JavaScript 类

    JavaScript 是面向对象的语言,但 JavaScript 不使用类。

    JavaScript 基于 prototype(标准,原型,样本),而不是基于类的。

    JavaScript for...in 循环

    for (variable in object)
    {
        执行的代码……
    }
    //**for...in 循环中的代码块将针对每个属性执行一次。**
    //如:
    var person={fname:"John",lname:"Doe",age:25}; 
    for (x in person)
    {
        txt=txt + person[x];
    }
    

    JavaScript 的对象是可变的

    对象是可变的,它们是通过引用来传递的。

    var x = person;  // 不会创建 person 的副本,是引用
    

    如果修改来 x ,person 的属性也会改变,

    JavaScript prototype(原型对象)

    所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。

    在一个已存在的对象构造器中是不能添加新的属性的。

    要添加一个新的属性需要在在构造器函数中添加:

    function Person(first, last, age, eyecolor) {
      this.firstName = first;
      this.lastName = last;
      this.age = age;
      this.eyeColor = eyecolor;
      this.nationality = "English";
    }
    

    prototype 继承

    所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

    添加属性和方法

    使用 prototype 属性就可以给对象的构造函数添加新的属性和方法:

    function Person(first, last, age, eyecolor) {
      this.firstName = first;
      this.lastName = last;
      this.age = age;
      this.eyeColor = eyecolor;
    }
    Person.prototype.nationality = "English";
    //add new method
    Person.prototype.name = function() {
      return this.firstName + " " + this.lastName;
    };
    
    

    JavaScript Number 对象

    JavaScript 只有一种数字类型。可以使用也可以不使用小数点来书写数字。

    const PI=3.14;
    var x=6;
    var y = 123e5;//12300000
    var z = 123e-5;//0.00123
    

    所有 JavaScript 数字均为 64 位

    avaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。所有的数字都是浮点型类型。

    精度

    • 整数(不使用小数点或指数计数法)最多为 15 位。
    • 小数的最大位数是 17,但是浮点运算并不总是 100% 准确。

    八进制和十六进制

    如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。

    var y = 0377;//八进制
    var z = 0xFF;//十六进制
    

    默认情况下,JavaScript 数字为十进制显示。但是可以使用 toString() 方法 输出16进制、8进制、2进制。

    var myNumber=128;
    myNumber.toString(16);   // 返回 80
    myNumber.toString(8);    // 返回 200
    myNumber.toString(2);    // 返回 10000000
    

    无穷大(Infinity)

    当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在JavaScript中以Infinity表示。

    NaN - 非数字值

    NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

    var x = 1000 / "Apple";//字符串
    isNaN(x); // 返回 true
    var y = 100 / "1000";//字符串数字
    isNaN(y); // 返回 false
    //除以0是无穷大,无穷大是一个数字
    var x = 1000 / 0;
    isNaN(x); // 返回 false
    

    数字可以是数字或者对象

    var x = 123;
    var y = new Number(123);
    typeof(x) // 返回 Number
    typeof(y) // 返回 Object
    

    JavaScript 字符串(String) 对象

    String 对象用于处理已有的字符块。

    JavaScript 字符串

    var carname="Volvo XC60";
    var carname='Volvo XC60';
    

    使用位置(索引)可以访问字符串中任何的字符:

    var character=carname[7];
    

    JavaScript Date(日期) 对象

    日期对象用于处理日期和时间。

    创建日期

    有四种方式初始化日期:

    new Date();
    new Date(value);
    new Date(dateString);
    new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
    //参数大多数都是可选的,在不指定的情况下,默认参数是0。
    

    设置日期

    var myDate=new Date();
    myDate.setFullYear(2010,0,14);
    //在下面的例子中,我们将日期对象设置为 5 天后的日期:
    myDate.setDate(myDate.getDate()+5);
    

    JavaScript Array(数组) 对象

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

    创建一个数组

    创建一个数组,有三种方法。

    1. 常规方式:
    var myCars=new Array();
    myCars[0]="Saab";      
    myCars[1]="Volvo";
    myCars[2]="BMW";
    
    1. 简洁方式:
    var myCars=new Array("Saab","Volvo","BMW");
    
    1. 字面:
    var myCars=["Saab","Volvo","BMW"];
    

    访问数组

    通过指定数组名以及索引号码,你可以访问某个特定的元素。

    在数组中有不同的变量类型。

    数组方法和属性

    创建新方法

    原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。

    Array.prototype.myUcase=function(){
        for (i=0;i<this.length;i++){
            this[i]=this[i].toUpperCase();
        }
    }
    

    JavaScript Boolean(布尔) 对象

    如果布尔对象无初始值或者其值为:

    • 0
    • -0
    • null
    • ""
    • false
    • undefined
    • NaN

    那么对象的值为 false。否则,其值为 true!

    JavaScript Math(算数) 对象

    Math(算数)对象的作用是:执行常见的算数任务。

    具体介绍

    JavaScript RegExp 对象

    RegExp:是正则表达式(regular expression)的简写。

    语法:

    var patt=new RegExp(pattern,modifiers);
    或更简单的方法
    var patt=/pattern/modifiers;
    //模式描述了一个表达式模型。
    //修饰符(modifiers)描述了检索是否是全局,区分大小写等。
    

    RegExp 修饰符

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

    • i - 修饰符是用来执行不区分大小写的匹配。
    • g - 修饰符是用于执行全文的搜索(而不是在找到第一个就停止查找,而是找到所有的匹配)。
    var str = "Visit RUnoob";
    var patt1 = /runoob/i;
    str.match(patt1)
    //RUnoob
    
    var str="Is this all there is?";
    var patt1=/is/g;
    str.match(patt1)
    //is,is
    
    var str="Is this all there is?";
    var patt1=/is/gi;
    str.match(patt1)
    //Is,is,is
    

    test()

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

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

    exec()

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

    var patt1=new RegExp("e");
    document.write(patt1.exec("The best things in life are free"));
    //e
    
  • 相关阅读:
    编译原理:算符优先分析
    编译原理:自下而上语法分析
    编译原理:实验二 递归下降语法分析
    编译原理:LL(1)文法的判断,递归下降分析程序
    作业9 DFA最小化
    作业8 非确定的自动机NFA确定化为DFA
    作业7 正规式到正规文法与自动机
    作业6 正规文法与正规式
    作业5 词法分析程序的设计与实现
    作业4 文法和语言总结与梳理
  • 原文地址:https://www.cnblogs.com/yanying521/p/14279144.html
Copyright © 2011-2022 走看看