JavaScript基础知识总结（一）

秒速五厘米 2021-11-14 13:14 346阅读 0赞

# JavaScript基础知识总结（一） #

##     1.  异步加载 ##

在加载网页时，用户会先看到页面的内容，而如果js要加载的东西过多时，页面并不会显示内容，而是空白的这样用户体验会大打折扣，所以这里可以在 script 标签内添加属性来**异步**完成加载 JavaScript 。

##     2.  延迟执行 ##

有些 js 代码中会调用 HTML 代码中 id 对应的元素，但是HTML 页面加载是从上到下的，这时如果 js 代码中要用到的话，就需要写到 HTML 的尾部，这里也可以在 script 标签内添加属性来**延迟执行** js 文件。

##     3.  字符串加减 ##

var a="3.1415926535";
    var b = a - 2;
    var c = a + 2;
    alert(b+"\n"+c);

乍一看 b = 1.1415926535，c = 5.1415926535，我们来看输出结果：

![20190731212028710.png][]

字符串不支持减法，所以 a 变量被改变数据类型为数值类型，执行 a- 2=1.14159

但是字符串支持加法运算，加法作为连字符，所以系统吧 c 变量变为字符串，连了起来 c = a+2=......2

##     4.  定义全局变量与局部变量 ##

//定义全局变量，这里不管用不用var都是全局变量
    var test="全局变量";
    function myFun(){
        //在函数内的不使用var定义的变量为全局变量
        age = 20
        //在函数内使用var定义的变量为局部变量
        var isMale = true;
    }
    myFun();
    alert(test +"\n" + age);
    alser(isMale);

如果同名，则局部变量将会覆盖全局变量

var isMale="全局变量";
    function myFun(){
        var isMale ="局部变量";
        alert(isMale);
    }
    myFun();
    alert(isMale);

第一次输出为“局部变量”第二次输出为“全局变量”

下面这样会覆盖掉

var isMale="全局变量";
    function myFun(){
        isMale ="局部变量";
        alert(isMale);
    }
    myFun();
    alert(isMale);

第一次输出为“局部变量”第二次输出为“局部变量”

**    补充：**

var 定义变量没有块的概念

let 定义变量，有作用域，即块的概念

##     5.  变量提升 ##

var scope="全局变量";
 function test(){
 document.writeln(scope + " ");
 //定义scpoe局部变量，其作用范围为整个函数内
 let scope = "局部变量";
 document.writeln(scope + " ")
 }
 test();

输出结果：

![20190731213629108.png][]

JavaScript的变量提升机制，指的是变量声明**总是会被解释器“提升”到函数体顶部**

**（变量提升只是提升变量声明的部分，并不会提升变量赋值部分）**

同理下面代码：

var x=100;
 var y=200;
 function foo(){
 document.writeln(x + " ");
 document.writeln(y + " ");
 if(false){
 var x=1;
 }
 return;
 var y=2;
 }
 foo();

按理说 x=1，与y=2不可能获得执行机会，而且定义了全局变量 x=100，y=200 ，但是由于变量提升机制输出结果为：

![20190731214407414.png][]

这就是只提升了函数的声明，并没有给它赋值，所以会显示undefined。

##     6.  输出浏览器的版本 ##

alert("浏览器版本为：" + navigator.appVersion);

##     7.  js的数组定义的三种方式 ##

同一个数组中的数组元素可以有**不同**的数据类型

var a = [3 ,5 ,23];
    var b = [];
    var c = new Array();
    b[0]='hello';
    b[1]=6;
    c[5]=true;
    c[7]=null;
    alert(a + "\n" + b +"\n" +c
        + "\na数组的长度：" + a.length
        + "\nb数组的长度：" + b.length
        + "\nc数组的长度：" + c.length);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODY2NTE2_size_16_color_FFFFFF_t_70][]

##     8.  js的数组也可以作为栈和队列使用 ##

var stack = [];
    //将数组当栈使用
    //入栈
    stack.push("孙悟空");
    stack.push("猪八戒");
    stack.push("白骨精");
    //出栈
    console.log(stack.pop());
    console.log(stack.pop());
    console.log(stack.pop());
    //将数组当队列使用
    var queue = [];
    //入队列
    queue.unshift("孙悟空");
    queue.unshift("猪八戒");
    queue.unshift("白骨精");
    //出队列
    console.log(queue.shift());
    console.log(queue.shift());
    console.log(queue.shift());

![20190731215056381.png][]

不难发现，栈和队列的输出结果竟然是一致的。

解释：

push方法是在尾部插入元素

pop是把数组尾部的元素弹出来

unshift是在头部插入元素

shift是把数组头部的元素弹出来

所以上面代码中的进出：

stack = ["孙悟空","猪八戒","白骨精"];
    //pop弹出尾部元素
    //所以顺序是：白骨精、猪八戒、孙悟空
    
    queue = ["白骨精","猪八戒","孙悟空"];
    //shift弹出头部元素
    //所以顺序是：白骨精、猪八戒、孙悟空

以上，所以想实现真正的队列和栈需要两者灵活配合使用

##     9.  对 js 数组进行操作的函数 ##

*  concat()为数组添加元素
 *  reverse();反转数组
 *  join()将多个元素用定界符拼接在一起
 *  slice()截取数组
 *  sort()排序
 *  splice()截取追加

var a = ["html",2,"yeeku"];
    var f = [4,5,6,7,8];
    console.log(a.concat(4,5));
    console.log(a.concat([4,5]));
    console.log(a.concat(f,[6,7]));
    console.log("-----------------------------------------")
    var b = ["html",20,"is",99,"good"];
    console.log(b.join());
    console.log(b.join("+"));
    console.log(b.join("冲冲冲"));
    console.log("-----------------------------------------")
    var c = ["html","css","jquery","bootstrap"];
    c.reverse();
    console.log(c);
    console.log(c.sort());
    console.log("-----------------------------------------")
    var d = ["yeeku","leegang","crazyit","fkit","charlie"];
    console.log(d.slice(3));
    console.log(d.slice(2,4));
    console.log(d.slice(1,-2));
    console.log(d.slice(-3,-2));
    console.log("-----------------------------------------")
    var e = ["yeeku","leegang","crazyit","fkit","charlie"];
    console.log(e.splice(3));
    console.log(e.splice(1,1));
    console.log(e.splice(0,1,20,30,40));
    console.log(e);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODY2NTE2_size_16_color_FFFFFF_t_70 1][]

**注意：**

对于sort函数

默认形式：c.sort();

默认升序排序

我们可以通过给参数，来调整升序还是降序

但是必须是**函数**

var c = [1,9,2,7,6,1,5,3];
    c.sort(function(c,b){
        return b-c;
    });
    console.log(c);

![20190731220225879.png][]

即如果数组中第一个大于第二个数，则降序，否则升序。

##     10.  js的赋值运算符 "=" 是有值的，值等于等号右边的值，所以可以连续赋值 ##

var a=b=c=d=e=f=7;

##     11.  js抛出异常 ##

try{
 for (var i=0;i<10;i++){
 document.writeln(i + ' ');
 if(i>4){
 throw new Error('用户自定义异常')
 }
 }
 }catch(e){
 document.writeln('系统出现异常' + e.message + ' ');
 }finally{
 document.writeln('系统的finally块');
 }

##     12.  for in 遍历 ##

for(propName in navigator){
 document.write('属性'+propName+'的值是：'+navigator[propName]);
 document.write(" ");
 }

##     13.  用标签的形式，break 跳到对应的标签  ##

outer:
 for(var i = 0;i < 5; i++){
 for(var j = 0;j < 5 ;j++){
 document.writeln('j的值为：'+j);
 if(j>=2)break outer;
 document.writeln('i的值为：' + i);
 document.writeln(' ');
 }
 }

执行结果：

![20190731220728884.png][]

##     14.  函数提升 ##

hello('zkm');
    function hello(name){
        alert('你好，'+name)
    }

##     15.  return 返回值 & typeof 方法 ##

function hello(name){
        if(typeof name == 'string'){
            return name + '，你好！';
        }
        return '只能输入字符串！';
    }
    alert(hello('zkm'));

##     16.  匿名函数方式 ##

var f = function(name){
        document.writeln('匿名函数');
        document.writeln('你好'+name);
    };
    f('zkm');

##     17.  函数、方法、对象、变量、类，在定义一个 JavaScript 函数时同时定义了这么多东西 ##

比如输出不加 “（）”的hello

var hello = function(name){
        return name + "，你好！";
    }
    alert("hello是否为Function对象：" + (hello instanceof Function)
        + "\nhello是否为Object对象：" + (hello instanceof Object));
    alert(hello);

执行结果：

![20190731221156967.png][]

加上 “（）”的hello 即 hello()；

执行结果：

![2019073122122987.png][]

##     18.  利用函数创建对象构造器 ##

function Person(name,age){
 this.name = name;
 this.age = age;
 this.info = function(){
 document.writeln("我的名字是：" + this.name + " ");
 document.writeln("我的年纪是：" + this.age + " ");
 }
 }
 var p = new Person('zkm',29);
 p.info();

执行结果：

![20190731221306847.png][]

##     19.  弹出到一个新的网页 ##

with(window.open()){
        document.writeln("这是一个弹出的新网页！");
    }

执行结果：

![20190731221539141.png][]

##     20.  另一种方法定义一个对象，并定义一个对象内的方法 ##

var p = {
 walk:function(){
 for(var i=0;i<5;i++){
 document.writeln("慢慢走...");
 }
 }
 }
 p.walk();

##     21.  避免变量与函数重名 ##

function hello(name){
 document.writeln(name + "，你好！ ");
 }
 hello('zkm');
 alert(hello);
 hello = "冲冲冲";
 hello("孙悟空");

依次执行的结果：

![20190731221741102.png][]

![20190731221745409.png][]

![20190731221753359.png][]

最后会报错，hello = "冲冲冲"; 把 hello 又定义成了变量，会覆盖掉函数，所以 hello 不在是函数了，而是一个字符串变量。

**变量提升与函数提升同时存在时，若变量赋值了，则变量先提升，否则函数提升。**

##     22.  类属性与实例属性 ##

function Person(national, age){
 //this修饰的变量为实例属性
 this.age = age;
 //Person修饰的变量为类属性
 Person.national = national;
 //var修饰的变量为局部变量
 var bb = 0;
 }
 var p1 = new Person('中国',29);
 document.write("创建一个Person对象 ");
 document.writeln("p1的age属性为" + p1.age + " ");
 document.writeln("p1的national属性为" + p1.national + " ");
 document.writeln("通过Person访问静态national属性为" + Person.national + " ");
 document.writeln("p1的bb属性为" + p1.bb + " <hr />");
 var p2 = new Person('美国',32);
 document.writeln("创建两个对象之后 ");
 document.writeln("p1的age属性为" + p1.age + " ");
 document.writeln("p1的national属性为" + p1.national + " ");
 document.writeln("p2的age属性为" + p2.age + " ");
 document.writeln("p2的national属性为" + p2.national + " ");
 document.writeln("通过Person访问静态national属性为" + Person.national + " ");

执行结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODY2NTE2_size_16_color_FFFFFF_t_70 2][]

##     23.  为对象增加属性 ##

执行结果：

![20190731222506281.png][]

##     24.  函数的独立性 ##

function Person(name){
        this.name = name;
        this.info = function(){
            alert("我的name是：" +this.name);
        }
    }
    var p = new Person("zkm");
    p.info();
    window.p.info();
    //以window对象调用p的info属性
    //下面这句话就相当于 p.info.call(window) = window.info()
    //所以 name 就调用的是window下的name
    p.info.call(window);

执行结果：

前两次：

![20190731222557463.png][]

最后一次：

![20190731222608354.png][]

但是当我们定义了 var name ="ccc";

前两次：

![20190731222656215.png][]

最后一次：

![20190731222703711.png][]

这是直接输出的window下的name

但是当我们删除了 var name ="ccc";

他还是会输出这个，清缓存也没用，把这些函数里的name换成另一个比如iname他就又正常了，我很不解！！！！

##     25.  再次验证函数的独立性 ##

最后一句代码：通过 cat 这个对象，去调用dog的info方法

执行结果：

![20190731223004928.png][]

##     26.  给函数传参不完整 ##

function Dog(name,age,brak){
        this.name = name;
        this.age = age;
        this.brak = brak;
    }
    var dog = new Dog("ccc");
    alert(dog.age)

执行结果：

undefined

##     27.  命名函数与匿名函数的提升规则 ##

**全局函数会被提升到 script 的顶端，而匿名函数只会提升被赋值的变量，而不会提升函数的定义**

##     28.  变量与函数提升规则 ##

变量如果赋值则，优先级大于函数，否则小于函数

而函数也要考虑是命名函数，还是匿名函数，命名函数按照规则没问题，而匿名函数需要特殊看待。

[20190731212028710.png]: /images/20211114/9613926156ee4c0d8e6534ffe9dc464b.png
[20190731213629108.png]: /images/20211114/15c2309991184a679e4d9ed5f94dfa4c.png
[20190731214407414.png]: /images/20211114/e2b3a150abd542e5b12c07f78fef27dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODY2NTE2_size_16_color_FFFFFF_t_70]: /images/20211114/2c86ed8ce7c649b7b44497fd323c0ca1.png
[20190731215056381.png]: /images/20211114/a743439f8dea4328a83e11702cffcb6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODY2NTE2_size_16_color_FFFFFF_t_70 1]: /images/20211114/bf82fd3c76924f57b65f50d20549efcf.png
[20190731220225879.png]: /images/20211114/026783e999884604b95039392a02b498.png
[20190731220728884.png]: /images/20211114/baf94d06c50a4114b3e4858cafc035f3.png
[20190731221156967.png]: /images/20211114/67f45ab243e34ac3854592e86ea85ab6.png
[2019073122122987.png]: /images/20211114/9458f03ba5f646f4b7142cd2f1f54f74.png
[20190731221306847.png]: /images/20211114/29c0819f276e489a9600291495dddb7c.png
[20190731221539141.png]: /images/20211114/bb7649c938ad4ecbb2ffe3703bd24f7a.png
[20190731221741102.png]: /images/20211114/e91cc79ddbe741d6af4fb0f962e7c993.png
[20190731221745409.png]: /images/20211114/884851800baa4635ab68c00f963d24aa.png
[20190731221753359.png]: /images/20211114/cdb2638184d542d48c51dc708ef992a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxODY2NTE2_size_16_color_FFFFFF_t_70 2]: /images/20211114/06c39f3789e345fa825428ae2c79686a.png
[20190731222506281.png]: /images/20211114/0f94e6d013544d6fa0ad479f2fc533ac.png
[20190731222557463.png]: /images/20211114/de3e3ced2ad5412d8caf5b53467f6e9d.png
[20190731222608354.png]: /images/20211114/bccc4e5a5ddb4fd1a0db633060441add.png
[20190731222656215.png]: /images/20211114/576c1e120f394cf79fcf8a9e0cd3203e.png
[20190731222703711.png]: /images/20211114/1349c3e1a0ba4ac7a8ec81aac521c034.png
[20190731223004928.png]: /images/20211114/bc66f7525f214752a750fdf5f70a4e48.png