js蝴蝶学习笔记

￡神魔★判官ぃ 2022-05-10 13:03 119阅读 0赞

第2章：语法

2.5语句

switch语句

while语句

do while语句

for语句

for in语句

try/catch/finally 语句

<p>请输入 5 到 10 之间的数:</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">检测输入</button>
    <p id="message"></p>
    <script>
        function myFunction(){
            var message=document.getElementById("message");
            message.innerHTML="";
            var x=document.getElementById("demo").value;
            try{
                if(x=="") throw "为空";
                if(isNaN(x)) throw "不是一个数字";
                if(x>10) throw "太大";
                if(x<5) throw "太小";
            }
            //异常通过 catch 语句捕获，并输出自定义信息：
            catch(err){
                message.innerHTML="输入的值"+err;
            }
            // finally 语句无论 try 和 catch 执行结果如何都会执行：
            finally{
                document.getElementById("demo").value="";
            }
        }
    </script>

2.6表达式

如果第一个运算数的值为假，那么运算符&&产生第一个运算数的值。否则，它产生第二个运算数的值。

如果第一个运算数的值为假，那么运算符||产生后一个运算数的值。否则，它产生第一个运算数的值。

第3章：对象

对象字面量

var zhangsan={
        sex:"男",
        age:"23",
        hobby:{
            sports:"run",
            idol:"郑爽"
        }
        city:{
            place:"上海",
            weather:"rain"
        }
    };

检索  
两种检索方式

zhangsan["sex"]   //"男"
    zhangsan.hobby.sports      //"run"
    如果检索不存在的成员元素
    zhangsan["name"]   //undefined
    zhangsan.job   //undefined
    ||运算符可以用来填充默认值
    var name = zhangsan["name"] || "(张三)";
    var job = zhangsan.job || "student";
    尝试检索一个undefined值将会导致TypeError异常。这可以通过&&运算符来避免错误
    zhangsan.equipment                                 //undefined
    zhangsan.equipment.model                           //throw "TypeError"
    zhangsan.equipment && zhangsan.equipment.model     //undefined

更新  
对象中的值可以通过赋值语句来更新。如果属性名已经存在于对象中，那么这个属性将被替换

zhangsan["age"]="25";
    如果对象之前并没有拥有过那个属性名，那么该属性就被扩充到该对象中
    zhangsan["name"]="zhangsan";
    zhangsan.nickname="lucky";
    zhangsan.family={
        sister:"two"
    };
    zhangsan.status="student";

引用  
对象通过引用来传递。它们永远不会被拷贝：

原型对象

Person原型对象定义了公共的say方法，虽然此举在构造实例之后出现，但是因为原型方法在调用之前已经声明，因此之后的每个实例将都拥有该方法。原型对象的用途是为每个实例对象存储共享的方法和属性，原型对象仅有一份。所以：person,say==new Person().say

function Person(){
          this.name="zhangsan";
      }
      var person = new Person();
      Person.prototype.say=function(){
          console.log("hello"+this.name);
      };
    person.say();

数组的两种赋值形式

属性名出现的顺序是不确定的，如果想要确保属性以特定的顺序出现，最好的办法就是完全避免使用for in,而是创建一个数组,在其中以正确的顺序包含属性名。

var arr = new Array();
            arr[0] = "first";
            arr[1] = "second";
            arr[2] = "third";
            for(var x in arr){
                document.write(x+":"+arr[x]+"<br/>");
            }
    
            var workers = [
                "zhngsan",
                "lisi",
                "wangwu"
            ];
            for(var i=0;i<workers.length;i++){
                document.write(i+":"+workers[i]+"<br/>");
            }

删除

var zhangsan={
                sex:"男",
                age:"25",
                nickname:"lucky"
            }
            delete zhangsan.nickname;
            document.write(zhangsan.nickname);

减少全局变量污染，最小化使用全局变量的一个方法是在你的应用中只创建唯一一个全局变量

方法调用模式

函数调用模式

当一个函数并非一个对象的属性时，那么它就是被当做一个函数来调用.对于普通的函数调用来说，函数的返回值就是调用表达式的值

// function add(x,y){
            //     return x+y;
            // }
            // var sum=add(3,4);
            // console.log(sum);//7

使用函数调用模式调用函数时，非严格模式下，this被绑定到全局对象;

// function add(x,y){
            //     console.log(this);//window
            // }
            // add();

严格模式下，this是undefined

// function add(x,y){
            //     "use strict";
            //     console.log(this);//undefined
            // }
            // add();

所以"this"可以用来判断当前是否是严格模式

var strict = (function(){return !this;}());

因为函数调用模式的函数中的this绑定到全局对象，所以会发生全局属性被重写的现象

var a=0;
            function fn(){
                this.a=1;
            }
            fn();
            console.log(this,this.a,a);//window,1,1

解决方法:给该方法定义一个变量并给他赋值this,那么你饿不函数就可以通过那个变量访问到this.

var b=0;
            function fn2(){
                var that=this;//解决方法
                taht.b=1;
                console.log(that,that.b,b);//window,1,1
            }
            fn();
            console.log(this,this.b,b)//window,0,0

构造函数调用模式,如果函数或者方法被调用之前带有关键字new，它就构成构造函数调用

function fn(){
                this.a=1;
            }
            var obj = new fn();
            console.log(obj.a);//1

如果构造函数调用在圆括号内包含一组实参列表,先计算这些实参表达式，然后传入函数内

function fn(x){
                this.a=x;
            };
            var obj = new fn(2);
            console.log(obj.a);//2

如果构造函数没有形参,js构造函数调用的语法时允许省略实参列表和圆括号的，凡是没有形参的构造函数调用都可以省略圆括号

var o = new Object();等价于var o = new Object;

apply方法让我们构建一个参数数组并用其去调用函数.它也允许我们选择this的值。

apply方法接收两个参数。第一个是将被绑定给this的值。第二个就是一个参数数组。

构造一个包含两个数字的数组，并将它们相加。

var obj={};
            var array=[1,2];
            function sum(x,y){
                return x+y;
            }
            console.log(sum.call(obj,1,2));//3
            console.log(sum.apply(obj,[1,2]));//3
            console.log(sum.apply(null,array));//3

思考：这四种函数调用的方法，什么时候选择那种比较合适呢？它们各自的优劣势？

参数

function add(x,y){//形参
                return x+y;
            }
            add(3,4);//实参

Arguments (实参)对象

由于js允许函数有不定数目的参数，所以需要一种机制，可以在函数体内部读取所有参数。这就是arguments对象的由来

arguments对象包含了函数运行时的所有参数，arguments\[0\]就是第一个参数，arguments\[1\]就是第二个参数，以此类推。这个对象只有在函数体内部，才可以使用。

var f = function(one){
                console.log(arguments[0]);//1
                console.log(arguments[1]);//2
                console.log(arguments[2]);//3
            }
            f(1,2,3);
            function add(x){
                console.log(arguments[0],arguments[1],arguments[2]);//4 5 6
                return x+1;
            }
            add(4,5,6);

arguments对象的length属性显示实参的个数,函数的length属性显示形参的个数

function add(x,y){
                console.log(arguments.length);//3
                return x+1;
            }
            add(1,2,3);
            console.log(add.length);//2

形参只是提供便利，但不是必需的

function add2(){
                return arguments[0]+arguments[1];
            }
            console.log(add2(1,2));//3

和数组的关系

需要注意的是，虽然arguments很像数组，但它是一个对象。数组专有的方法（比如slice和forEach）,不能在arguments对象上直接使用。

如果要让arguments对象使用数组方法，真正的解决方法是将arguments转为真正的数组.

下面是两种常用的转换方法：slice方法和逐一填入新数组.

var args = Array.prototype.slice.call(arguments);
            //或者
            var args = [];
            for(var i=0;i<arguments.length;i++){
                args.push(arguments[i]);
            }

callee属性

arguments对象有一个名为callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数

上面这个函数的执行与函数名紧紧耦合在了一起，可以用arguments.callee消除函数解耦

但在严格模式下，访问这个属性会抛出TypeError错误

这时，可以用具名的函数表达式

异常

当查出非正常的事故，程序应该抛出一个异常

throw语句中断函数的执行，它应该抛出一个exception对象，该对象包含可识别异常类型的name属性和一个描述性的message属性，你也可以添加其他的属性。

该exception 对象将被传递到一个try语句的catch从句;

构造一个try\_it函数，用不正确的方式调用之前的add函数

学习心得

这几天学习了语法（包括空白、标识符、数字、字符串、语句、表达式、字面量、函数）；对象（包括对象字面量、检索、更新、引用、原型、反射、枚举、删除、减少全局变量污染）；函数（包括函数对象、函数字面量、调用、参数、返回、异常）

在语法这一章

空白：就是我们在写js代码时，用空格将各个字符分割开来，例如var a=0;a和var之间需要用空格隔开

标识符：是我们自己定义的变量名、函数名、数组名...标识符可以是任意顺序的大写字母、数字、下划线和美元符号，但标识符不能以数字开头，不能是js中保留关键字。

数字：Math对象

字符串：被包围在单引号或双引号之间

语句：while语句，for语句,do while语句,for in语句,if语句

下列的值为假（false,null,undefined,空字符串’ ’,数字0,数字NaN），其他都为真

表达式：如果第一个运算数的值为假，那么运算符&&产生第一个运算数的值。否则，它产生第二个运算数的值。

如果第一个运算数的值为假，那么运算符||产生后一个运算数的值。否则，它产生第一个运算数的值。

函数声明：

可以定义命名的函数变量，而无需给变量赋值。 例如：function bar()\{return 3;\}

函数表达式：

通过函数表达式定义的函数可以是命名的，也可以是匿名的。函数表达式不能以”function”开头(下面自调用的例子要用括号将其括起来).

例如：var a=function()\{return 3;\}

字面量：5这是一个值，且唯一，可以用五,five表示，15是value，后面的都是字面量

函数：

在对象这一章

对象字面量：包围在一对花括号中的零或多个”名/值”

var zhangsan=\{

age:25,

city:”上海”

检索：可以使用\[\]和.的表示法，建议使用.更紧凑

例如：zhangsan\[age\]              zhangsan.city

更新：对象中的值可以通过赋值语句来更新，如果属性名已经存在于对象中，那么这个属性的值将被替换。如果之前并没有那个属性名，那么该属性将被扩充到对象中。

zhangsan.city=“江西”

引用：var x=s;x.name=“1”;var n=s.name最后结果是”1”

原型:下面的Person为原型对象

function Person()\{this.name=“zhangsan”;\}

var person=new Person();

Person.prototype.say=function()\{console.log(this.name);\};

person.say();

数组的两种赋值形式：

var arr=new Array();

arr\[…\]=…;

第二种：

var arr=\{

sex:”男”,

age:25

删除：delete

第四章：函数

函数字面量:

var add=function(a,b)\{

return a+b\}

四种调用模式:方法调用模式、函数调用模式、构造器调用模式、Apply调用模式

方法调用模式：当一个函数被保存为对象的一个属性时，我们称之它为该对象的一个方法，那么this被绑定到该对象上

var myObject=\{

name:”myObject”,

incremnet:function(a,b)\{return a+b;\}

alert(myObject.increment(1,2))

函数调用模式：当一个函数并非一个对象的属性时，那么它就是被当做一个函数来调用

构造函数调用模式：如果函数或者方法被调用之前带有关键字new，它就构成构造函数调用

apply方法：让我们构建一个参数数组并用其去调用函数，它允许我们选择this的值

参数：实参和形参

异常：自定义报错语句

给类型增加方法:通过给object.prototype添加方法来使得该方法对所有对象可用

递归

递归函数会直接或间接地调用自身的一种函数，它将一个问题分解成一组相似的子问题，调用自身去解决他的子问题

var hanni = function (disc,src,aux,dst){
                if(disc > 0){
                    hanni(disc-1,src,dst,aux);
                    console.log("Move disc"+disc+"from"+src+"to"+dst);
                    hanni(disc-1,aux,src,dst);
                }
            }
            hanni(3,"Src","Aux","Dst");

简单递归

var fn=function(n){
                if(n==1){return 1;}else{
                    return n*fn(n-1);
                }
            };
            document.writeln(fn(5));

var obj1={
                num:5,
                fun:function(x){
                    if(x==1){return 1}
                    else{
                        return x*this.fun(x-1);
                    }
                }
            }
            document.writeln(obj1.fun(5));

当一个函数返回它内部定义的一个函数时，就产生了一个闭包，闭包不但包括被返回的函数，还包括这个函数的定义缓解

var obj1 = function(){
                var count=0;
                var func = function(){
                    count++;
                    return count;
                }
                return func;
            }
            var obj = obj1();
            console.log(obj());//1
            console.log(obj());//2
            console.log(obj());//3

接下来这个例子帮助我们更好的理解

var obj2 = function(){
                var count2 = 0;
                var func2 = function(){
                    count2++;
                    return count2;
                }
                return func2;
            }
            var counter1 = obj2();
            var counter2 = obj2();
            console.log(counter1());//1
            console.log(counter2());//1
            console.log(counter1());//2
            console.log(counter2());//2
            console.log(counter1());//3
            console.log(counter2());//3

回调:相当于打电话给别人，留下了号码，让别人回电话

回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。

function add(num1,num2,callback){
                var sum=num1+num2;
                callback(sum);
            }
            function print(num){
                console.log(num)
            }
            add(1,2,print);//3

级联：后面再看，现在不理解

套用

var add1 = add.curry(1);
            document.writeln(add1(6));//7

记忆

第5章：继承

5.2对象说明符

var myObject = maker(a,b,c,d,e);
            //推荐如下方法写
            var myObject = maker({
                first:a,
                last:b,
                state:c,
                city:d,
                place:e
            });

第六章：数组

6.1数组字面量

var empty={};
            var numbers=[
                "zero","one","two"
            ]
            console.log(empty[1])//undefined
            console.log(numbers[1])//one
            console.log(empty.length)//undefined
            console.log(numbers.length)//3
            //对象字面量
            var number_object={
                "0":"zero",
                "1":"one",
                "2":"two"
            };

6.2长度

第七章：正则表达式

7.1一个例子:匹配Url

var parse_ur1=/^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
            //^字符表示这个字符串的开始，它是一个标记，用来防止exec跳过不像URL的前缀
            var url = "http://www.ora.com:80/goodparts?q#fragment";
            var result = parse_ur1.exec(url);//exec() 方法用于检索字符串中的正则表达式的匹配。
            var names=["url","scheme","slash","host","port","path","query","hash"];
            var blanks = "                         ";
            var i;
            for(i = 0; i < names.length; i++){
                document.writeln(names[i]+":"+blanks.substring(names[i].length)+result[i]+"<br/>");//substring() 方法用于提取字符串中介于两个指定下标之间的字符
            }
            //blanks.substring(names[i].length)表示截取出对应names[i].length的空格长度

7.2另一个例子：匹配数字

var parse_number = /^-?\d+(?:\.\d*)?(?:e[+\-]?\d+)?$/i;
            var test = function(num){
                document.writeln(parse_number.test(num));
            }
            test("1");//true

第八章：方法

//join(separator)   把一个数组构造成一个字符串
            var a = ["a","b","c"];
            var b = a.join(",");//用""空字符串,可以实现无间隔的连接
            console.log(b);//a,b,c
            //pop()  移除数组中的最后一个元素并返回该元素，如果空返回undefined
            var c = a.pop();
            console.log(a);//["a","b"]
            console.log(c);//c
            //push() 将一个或多个参数附加到一个数组的尾部
            var d = a.push(b,"true");
            console.log(c);//["a","b","a,b,c","true"]
            console.log(d);//4
            //reverse() 反转数组中的元素的顺序
            var e = a.reverse();
            console.log(a);//["true","a,b,c","b","a"]
            console.log(e);//["true","a,b,c","b","a"]
            //shift() 移除数组中的第一个元素并返回该元素，如果空返回undefined
            var f = a.shift();
            console.log(a);//["a,b,c","b","a"]
            console.log(f);//true
            //slice(start,end) 从起始位置复制到结束位置
            var g = a.slice(0,1);
            console.log(a);//["a,b,c","b","a"]
            console.log(g);//["a,b,c"]
            //sort(comparefn) 对数组中的内容进行适当的排序.它不能正确地给一组数字排序
            var h = [4,8,15,16];
            h.sort();
            console.log(h);//[15,16,4,8];
            //使用自己的比较函数来替换默认的比较函数，比较数字的大小顺序
            h.sort(function (a,b){
                return a-b;
            });
            console.log(h);//[4,8,15,16];
            //给字符串排序
            var i = ["aa","bb","a",4,8,15,16,23,42];
            i.sort(function(a,b){
                if(a===b){return 0;}
                if(typeof a === typeof b){
                    return a<b?-1:1;
                }
                return typeof a<typeof b ? -1:1;
            });
            console.log(i);//[4,8,15,16,23,42,"a","aa","bb"]
            //unshift(item...) 将item添加到数组的尾部
            var j = ["a","b"];
            var k = j.unshift("?","@");
            console.log(j);//["?", "@", "a", "b"]
            console.log(k);//4

后面几章基本上不用怎么看，只用大概了解就行了。

目前对第四章-------4.13级联----------57页；第四章-------4.15记忆----------59页

第五章整章，

这些不太理解。还有apply方法什么的，也不太理解