JS基础随笔(菜鸟必看篇)


Posted in Javascript onJuly 13, 2016

在学习的过程中总会一次次的冒出以前囫囵吞枣的地方,下面将今天学到的一下知识点记录下来方便以后查看。

JavaScript中的数据类型

简单(基本)数据类型:Number、String、Boolean、Undefined、Null

复杂(引用)数据类型: Object、Array、Date、function等

下面介绍一下简单(基本)数据类型和复杂(引用)数据类型的区别:

简单数据类型:在栈内直接存储值,如下图所示     

JS基础随笔(菜鸟必看篇)                                     

复杂数据类型:在栈内存储引用,如下图

    JS基础随笔(菜鸟必看篇)

在了解以上两种数据类型的存储方式之后可以区分两者的不同,可通过做以下的练习:

var a =10;
  var b = a;
  //问:当改变a的值后,b的值是否发生改变
  a=20;
  console.log(b);  // 10
var s1 = new Object();
var s2 = s1;
//问:改变s1的属性后,s2相同的属性是否改变
s1.name = "mh";
console.log(s2.name);    //mh
function f2(arr)
     {
       arr = [9,8,7,6,5];//产生新的对象
       arr[0]=-100;
     }
     var array = [1,2,4,7,5];
     f2(array);
     console.log(array[0]);//  1

JavaSript中的变量提升,function声明以及变量作用域

首先先看以下下面的一道面试题:

var num = 10;
    fun();
    function fun()
    {
      console.log(num);
      var num =20;
    }

在没有学习之前我会直接回答为10,现在学习JavaScript中的预编译概念知道了var关键字的提升概念以及function的声明概念知道了以上代码与下面代码等量:

var num;//全局作用域  遇到var和function 提升
     function fun() {
       var num ;  //局部做用户 遇到var 提升
       console.log(num);
       num =20;
     }
    num = 10;
    fun();

再看下面这道题:

//问题:为什么会出现下面的错误?
      //Uncaught TypeError:fnName is not a function

      console.log(fnName(1,2));
      var fnName = function (a,b) {
        return a + b;
      }

以上代码等同于以下代码:

var fnName;
      console.log(fnName(1,2));
      fnName = function (a,b) {
        return a + b;
      }

可以看到因为function在等号右面所以只会对var进行提升,从而会报“Uncaught TypeError:fnName is not a function”错误。

了解变量的作用域可以看以下代码:

f1();
        console.log(c);
        console.log(b);
        console.log(a);
        function f1() {
          var a = b = c = 20;
          console.log(c);
          console.log(b);
          console.log(a);
        }

对于var a=b=c=20; 这类连续赋值,在局部作用域内只会对a再声明,而b、c的作用域为全局作用域。所以只有全局作用域内的a报错为"Uncaught ReferenceError: a is not defined"。

以上这篇JS基础随笔(菜鸟必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
javascript版2048小游戏
Mar 18 Javascript
JavaScript数据库TaffyDB用法实例分析
Jul 27 Javascript
jQuery+css实现炫目的动态块漂移效果
Jan 28 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 #Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 #Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 #Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 #Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 #Javascript
javascript类型系统——undefined和null全面了解
Jul 13 #Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 #Javascript
You might like
PHP cdata 处理(详细介绍)
2013/07/05 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
2010年最佳jQuery插件整理
2010/12/06 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
Python标准库inspect的具体使用方法
2017/12/06 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
OpenCV 边缘检测
2019/07/10 Python
python3 mmh3安装及使用方法
2019/10/09 Python
Python如何基于selenium实现自动登录博客园
2019/12/16 Python
Django ORM filter() 的运用详解
2020/05/14 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
岗位职责风险点
2014/03/12 职场文书
经理任命书模板
2014/06/06 职场文书
个人授权委托书范本
2014/09/14 职场文书
2015年营业员工作总结
2015/04/23 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python