JavaScript之简单自我总结

Love The Way You Lie 2022-07-19 02:08 153阅读 0赞

1.JavaScript 函数
    *函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
    *有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。
    *在使用 return 语句时，函数会停止执行，并返回指定的值。
    *在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的.
    *函数定义作为对象的属性，称之为对象方法。
    *函数如果用于创建新的对象，称之为对象的构造函数。
    
    2.JavaScript 作用域
    局部 JavaScript 变量
    在 JavaScript 函数内部声明的变量（使用 var）是局部变量，
    所以只能在函数内部访问它。（该变量的作用域是局部的）。
    您可以在不同的函数中使用名称相同的局部变量，因为只有声明
    过该变量的函数才能识别出该变量。只要函数运行完毕，本地变量就会被删除。
    全局 JavaScript 变量
    在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
    
    3.JavaScript 变量的生存期
    JavaScript 变量的生命期从它们被声明的时间开始。
    局部变量会在函数运行以后被删除。
    全局变量会在页面关闭后被删除。
    附:
    向未声明的 JavaScript 变量分配值
    如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
    
    4.JavaScript 常用事件
    onchange    HTML 元素改变
    onclick     用户点击 HTML 元素
    onmouseover     用户在一个HTML元素上移动鼠标
    onmouseout  用户从一个HTML元素上移开鼠标
    onkeydown   用户按下键盘按键
    onload  浏览器已完成页面的加载
    
    
    5.JavaScript 字符串(可见其灵活性)
    
    通常，JavaScript 字符串是原始值： var firstName = "John";
    new 关键字将字符串定义为一个对象： var firstName = new String("John");
    
    原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)。
    原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性
    时可以把原始值当作对象。
    
    
    
    字符串属性
    属性  描述
    constructor     返回创建字符串属性的函数
    length  返回字符串的长度
    prototype   允许您向对象添加属性和方法
    
    字符串方法
    Method  描述
    charAt()    返回指定索引位置的字符
    charCodeAt()    返回指定索引位置字符的 Unicode 值
    concat()    连接两个或多个字符串，返回连接后的字符串
    fromCharCode()  将 Unicode 转换为字符串
    indexOf()   返回字符串中检索指定字符第一次出现的位置
    lastIndexOf()   返回字符串中检索指定字符最后一次出现的位置
    localeCompare()     用本地特定的顺序来比较两个字符串
    match()     找到一个或多个正则表达式的匹配
    replace()   替换与正则表达式匹配的子串
    search()    检索与正则表达式相匹配的值
    slice()     提取字符串的片断，并在新的字符串中返回被提取的部分
    split()     把字符串分割为子字符串数组
    substr()    从起始索引号提取字符串中指定数目的字符
    substring()     提取字符串中两个指定的索引号之间的字符
    toLocaleLowerCase()     根据主机的语言环境把字符串转换为小写，只有几种语
    言（如土耳其语）具有地方特有的大小写映射
    toLocaleUpperCase()     根据主机的语言环境把字符串转换为大写，只有几种语
    言（如土耳其语）具有地方特有的大小写映射
    toLowerCase()   把字符串转换为小写
    toString()  返回字符串对象值
    toUpperCase()   把字符串转换为大写
    trim()  移除字符串首尾空白
    valueOf()   返回某个字符串对象的原始值
    
    其中一些常见的字符串方法如下示例：
    （1）在字符串中查找字符串
    var str="Hello world, welcome to the universe.";
    var n=str.indexOf("welcome");
    如果没找到对应的字符函数返回-1
    
    （2）lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。
    内容匹配
    
    （3）match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
    实例
    var str="Hello world!";
    document.write(str.match("world") + "<br>");
    document.write(str.match("World") + "<br>");
    document.write(str.match("world!"));
    
    
    （4）替换内容
    replace() 方法在字符串中用某些字符替换另一些字符。
    实例
    str="Please visit Microsoft!"
    var n=str.replace("Microsoft","w3cschool");
    
    
    （5）字符串大小写转换
    字符串大小写转换使用函数 toUpperCase() / toLowerCase():
    实例
    var txt="Hello World!";       // String
    var txt1=txt.toUpperCase();   // txt1 文本会转换为大写
    var txt2=txt.toLowerCase();   // txt2 文本会转换为小写
    
    （6）字符串转为数组
    字符串使用strong>split()函数转为数组:
    实例
    txt="a,b,c,d,e"   // String
    txt.split(",");   // 使用逗号分隔
    txt.split(" ");   // 使用空格分隔
    txt.split("|");   // 使用竖线分隔  
    
    6.JavaScript (typeof, null, 和 undefined)
    ---NaN - 非数字值
    ---Infinity-无穷大
    
    typeof 
    你可以使用 typeof 操作符来检测变量的数据类型。
    实例
    typeof "John"                // 返回 string
    typeof 3.14                  // 返回 number
    typeof false                 // 返回 boolean
    typeof [1,2,3,4]             // 返回 object
    typeof {
       name:'John', age:34} // 返回 object
    
    
    null是一个只有一个值的特殊类型。表示一个空对象引用。
    任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined. 
    用 typeof 检测 null 返回是object。
    用 typeof 检测 undefined 返回值是undefined
    
    
    7.JavaScript 类型转换
    
    Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。
    JavaScript 数据类型
    
    在 JavaScript 中有 5 种不同的数据类型：
        string
        number
        boolean
        object
        function
    
    3 种对象类型：
        Object
        Date
        Array
    
    2 个不包含任何值的数据类型：
        null
        undefined
    
    示例（或判断对象是否为日期）
    可以使用 constructor 属性来查看是对象是否为数组 (包含字符串 "Array"):
    实例
    function isArray(myArray) {
        return myArray.constructor.toString().indexOf("Array") > -1;
    } 
    
    
    8.JavaScript 正则表达式
    
     var patt = /w3cschool/i
    
    实例解析：
    /w3cschool/i  是一个正则表达式。
    w3cschool  是一个模式 (用于检索)。
    i  是一个修饰符 (搜索不区分大小写)。
    
    var n = str.search(/w3cschool/i); 
    var res = str.replace(/microsoft/i, "w3cschool"); 
    
    patt.test("The best things in life are free!");
    字符串中含有 "e"，所以该实例输出为：
    true 
    
    /e/.exec("The best things in life are free!");
    字符串中含有 "e"，所以该实例输出为:
    e
    
    
    9.JavaScript (错误处理throw、try 和 catch)
    
    JavaScript 抛出（throw）错误
    当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。
    
    JavaScript try 和 catch
    try 语句允许我们定义在执行时进行错误测试的代码块。
    catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
    JavaScript 语句 try 和 catch 是成对出现的。
    
    
    10.JavaScript 调试
    console.log() 方法
    debugger 关键字用于停止执行 JavaScript，并调用调试函数。
    这个关键字与在调试工具中设置断点的效果是一样的。
    
    
    11.JavaScript 变量提升
    x = 5; // 变量 x 设置为 5
    elem = document.getElementById("demo"); // 查找元素
    elem.innerHTML = x;                     // 在元素中显示 x
    var x; // 声明 x 
    
    
    12.JavaScript 严格模式(use strict)
    "use strict" 指令只运行出现在脚本或函数的开头。
    
    例如：
    "use strict";
    x = 3.14;                // 报错 (x 未定义) 
    
    
    13.JavaScript 使用误区
    （1）赋值运算符应用错误
    在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会
    产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)。
    var x = 0;
    if (x == 10)
    区别
    var x = 0;
    if (x = 10) 
    
    （2）比较运算符常见错误
    在常规的比较中，数据类型是被忽略的，以下 if 条件语句返回 true：
    var x = 10;
    var y = "10";
    if (x == y)
    
    在严格的比较运算中，=== 为恒等计算符，同时检查表达式的值与类型，以下 if 
    条件语句返回 false：
    var x = 10;
    var y = "10";
    if (x === y) 
    
    (3)加法与连接注意事项
    加法是两个数字相加。
    连接是两个字符串连接。
    JavaScript 的加法和连接都使用 + 运算符。
    接下来我们可以通过实例查看两个数字相加及数字与字符串连接的区别：
    var x = 10 + 5;          // x 的结果为 15
    var x = 10 + "5";        // x 的结果为 "105"
    
    
    (4)点型数据使用注意事项
    
    JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储。
    
    所有的编程语言，包括 JavaScript，对浮点型数据的精确度都很难确定：
    var x = 0.1;
    var y = 0.1;
    var z = x + y            // z 的结果为 0.2
    if (z == 0.2)            // 返回 false
    
    解决以上问题，可以用整数的乘除法来解决：
    实例
    var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.2
    
    
    (5)JavaScript 字符串分行
    
    JavaScript 运行我们在字符串中使用断行语句:
    实例 1
    var x =
    "Hello World!";
    
    但是，在字符串中直接使用回车换行是会报错的：
    实例 2
    var x = "Hello World!";
    
    (6)由于 return 是一个完整的语句，所以 JavaScript 将关闭 return 语句。
    
    (7)定义对象，最后不能添加逗号
    
    错误的定义方式：
    websites = {
       site:"哈哈", url:"www",}
    
    正确的定义方式：
    websites = {
       site:"哈哈", url:"www"}
    
    (8)JavaScript 作用域问题
    在每个代码块中 JavaScript 不会创建一个新的作用域，一般各个代码块的作用
    域都是全局的。
    
    以下代码的的变量 i 返回 10，而不是 undefined：
    实例
    for (var i = 0; i< 10; i++) {
        // some code
    }
    return i;
    
    14 JavaScript JSON文本格式
    JSON 对象保存在大括号内。{
       "firstName":"John", "lastName":"Doe"} 
    {
       "employees":[
        {
       "firstName":"John", "lastName":"Doe"},
        {
       "firstName":"Anna", "lastName":"Smith"},
        {
       "firstName":"Peter", "lastName":"Jones"}
    ]}
    
    JSON.parse()    用于将一个 JSON 字符串转换为 JavaScript 对象。
    JSON.stringify()    用于将 JavaScript 值转换为 JSON 字符串。
    
    
    15.JavaScript 自调函数
    函数表达式可以 "自调用"。
    自调用表达式会自动调用。
    如果表达式后面紧跟 () ，则会自动调用。
    不能自调用声明的函数。
    通过添加括号，来说明它是一个函数表达式：
     (function () {
        var x = "Hello!!";      // 我将调用自己
    })();
    
    
    function myFunction(a, b) {
        return a * b;
    }
    分号是用来分隔可执行JavaScript语句。
    由于函数声明不是一个可执行语句，所以不以分号结束。
    
    
    16.JavaScript call() 和 apply()
    call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法
    的第一个参数必须是对象本身。
    实例
    function myFunction(a, b) {
        return a * b;
    }
    myFunction.call(myObject, 10, 2);      // 返回 20
    
    实例
    function myFunction(a, b) {
        return a * b;
    }
    myArray = [10,2];
    myFunction.apply(myObject, myArray);   // 返回 20
    
    17.JavaScript 闭包
    <script>
    var add = (function () {
        var counter = 0;
        return function () {
       return counter += 1;}
    })();
    function myFunction(){
        document.getElementById("demo").innerHTML = add();
    }
    </script>
    
    18 JavaScript HTML DOM
    
    DOM HTML
    document.getElementById(id).innerHTML=新的 HTML
    DOM CSS
    document.getElementById(id).style.property=新样式
    DOM 事件
    element.addEventListener(event, function, useCapture);
    DOM 元素 
    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
    </div>
    
    <script>
    var para=document.createElement("p");
    var node=document.createTextNode("这是一个新段落。");
    para.appendChild(node);
    
    var element=document.getElementById("div1");
    element.appendChild(para);
    </script>
    
    添加文本节点
    这段代码创建新的<p> 元素：
    var para=document.createElement("p");
    如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
    var node=document.createTextNode("这是一个新段落。");
    然后您必须向 <p> 元素追加这个文本节点：
    para.appendChild(node);
    
    添加元素
    最后您必须向一个已有的元素追加这个新元素。
    这段代码找到一个已有的元素：
    var element=document.getElementById("div1");
    以下代码在已存在的元素后添加新元素：
    element.appendChild(para);
    
    删除元素
    这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：
    <div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
    </div>
    
    找到 id="div1" 的元素：
    var parent=document.getElementById("div1");
    找到 id="p1" 的 <p> 元素：
    var child=document.getElementById("p1");
    从父元素中删除子元素：
    parent.removeChild(child);
    
    也可以用以下方法
    var child=document.getElementById("p1");
    child.parentNode.removeChild(child);
    
    
    19.JavaScript for...in 循环
    
    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];
    }