JS 基础知识复习归纳总结

最新推荐文章于 2024-06-27 20:11:55 发布

转载最新推荐文章于 2024-06-27 20:11:55 发布 · 53 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Abner5/p/6684698.html

本文深入探讨JavaScript中的变量声明、提升现象、作用域规则及其执行环境。通过具体实例讲解全局与局部变量的区别，帮助读者理解变量搜索机制，并介绍算术、逻辑等基本运算符。

变量

//    全局变量
    var sum; //变量声明
    sum = 10; //变量赋值
    document.title='1111'
    function fn(){
        //局部变量
        var sum=0;
    }
    console.log(sum) /*undefined*/

变量和函数声明的提升

    //变量声明提升
    /*声明变量
    变量赋值*/
    function test() {
        var a = "1";
        var f = function() {};
        var b = "2";
        var c = "3";
    }
    //上述代码等价于
    function test() {
        var a, f, b, c;
        a = "1";
        f = function() {};
        b = "2";
        c = "3";
    }

函数执行环境和作用域

代码执行：先生成一个执行环境，再执行

全局作用域（全局变量）：
1，最外层函数和在最外层函数外面定义的变量拥有全局作用域，如下的例子：sum=10， test， a=1
函数本身也是一个特殊的变量，其名字就是函数名字
2，未定义直接赋值的变量自动声明为拥有全局作用域 -- 比如 all1 all2
3，所有window对象的属性拥有全局作用域，例如：window对象的内置属性都拥有全局作用域，例如window.name、window.location、window.top等
我们也可以通过如下方式定义一个全局变量：window.name=11

执行环境类似一个表格：第一行放置全局变量，第二行放置局部变量
变量搜索机制：先搜索局部变量，如果没找到，搜索全部变量
第一行：sum， test， a
第二行：a， foo

/*看看函数的执行*/
    /*a：由于变量声明提升，这里a变量是存在的，但是是undefined*/
    var sum =0;
    var a = 10
    all1 = 1000;
    function test() {
        //这个时候由于变量声明提升，a变量已经声明，并且值是undefined
        console.log(a);
        all2 = 200;
        //foo是一个函数，解析的时候会提升，所以能够访问到
        console.log(foo());
        /*如果省略下面这句 输出结果是什么*/
        //var a =1;
        function foo() {
            return 2;
        }
    }
    test();

变量声明提升笔试题

var v = "hello";
    function test (){
        console.log(v);
        var v = "world";
    }
    //    这段代码运行的结果是什么呢？
    //    答案是：undefined
    //    这段代码说明了两个问题，
    //    第一，function作用域里的变量v遮盖了上层作用域变量v。
    //    第二，在function作用域内，变量v的声明被提升了。所以最初的代码相当于：
//
//    var v = "hello";
//    function test (){
//        var v; //声明一个变量 声明提升，但是不会被赋值
//        console.log(v);
//        v = "world";
//    }

运算符　　

算术运算符 +（加） ——（减） *（乘） /（除） %(取余数)
复合赋值运算符 -= += *= /= %=
自增自减运算符 -- ++
比较运算符 > < >= <= ==(比较的时候做类型转换) ===（全等于：值数据类型都一样才算相等） !=
逻辑运算符 && 与 |或！非
三元运算符
短路运算符

== ===

 //自动类型转换
    if(1=='1'){
        alert('==一样')  //一样
    }

//比较的时候不会类型转换
//    if(1==='1'){
//        alert('===一样')  //不相等，不会执行
//    }

表达式

逗号表达式

var x= 0,y= 0,z=0;
    var result = (x=8*2,x*4) /*整个表达式的值为64，x的值为16*/
    console.log(result)
    console.log(x)


    x=(z=5,5*2) /*整个表达式为赋值表达式，它的值为10，z的值为5*/
    console.log(x)
    console.log(z)

    x=z=5,5*2 /*整个表达式为逗号表达式，它的值为10，x和z的值都为5*/
    console.log(x)
    console.log(z)

短路表达式

数据和数据类型

五大数据类型

//数值型
var num1 = 1;
//字符串型
var num2 ='2333fgfgfggggggggggggggggggggg';
//布尔型
var num3 =false;
//对象型
var num4 = document.getElementById('mydiv');
//未定义
 var num5;

数据类型检测的重要性

    //创业型公司   两个员工 : 小王:4000元  小李 : 5000元 一个月
    //字符串
    var xiaowang='7000';
    //字符串
    var xiaoli='10000';

    100007000
    //9000
    //数据类型转换
    alert(parseInt(xiaowang)+parseInt(xiaoli));
    //数据类型转换..
    //parseInt
    //检测数据类型
    alert(typeof(xiaowang))

dom对象

函数工具

属性工具

    document.title = '基础信息'             //设置文档标题等价于HTML的<title>标签
    document.bgColor = 'red'          //设置页面背景色
    document.fgColor  = 'green'          //设置前景色(文本颜色)
    document.linkColor = 'blue'         //未点击过的链接颜色
    document.alinkColor = 'red'        //激活链接(焦点在此链接上)的颜色
    document.vlinkColor = 'orange'        //已点击过的链接颜色