弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】


Posted in Javascript onAugust 07, 2019

本文实例讲述了弱类型语言javascript开发中的一些坑。分享给大家供大家参考,具体如下:

测试1: (未声明变量自动提升为全局变量)

test1();
function test1() {
  function setName() {
    name = '张三'; // 此处没有var声明,提升至全局
  }
  setName();
  console.log(name);// '张三'
}

测试2: (函数内部局部变量的变量提升)

test2();
function test2() {
  var a = 1;
  function haha() {
    console.log(a);
    var a=1;
  }
  haha(); // undefined
}

测试3: (给window对象挂载属性,作用域提升至全局)

test3();
function test3() {
  var b=2;
  function hehe(){
    window.b = 3; // 此时的b为全局变量的b
    console.log(b); // 此时的b是函数test3()里的b为2
  }
  hehe();
}

测试4: (变量提升,局部作用域的综合)

test4();
function test4() {
  c = 5;
  function heihei() {
    var c;
    window.c = 3;
    console.log(c); // 函数heihei内的c为undefined
    console.log(window.c); // 3
  }
  heihei();
}

测试5: (数组的长度的问题)

test5();
function test5() {
  var arr = [];
  arr[0] = '1';
  arr[1] = 'b';
  arr[9] = 100;
  console.log(arr.length); // 10
}

测试6: (等与全等的问题)

test6();
function test6() {
  var a = 1;
  console.log(a++); // 1
  console.log(++a); // 3
  console.log(null == undefined); // true
  console.log(null === undefined);// false
  console.log(1 == "1"); // true
  console.log(1 === "1"); // false
  console.log(NaN === NaN) // false;
}

测试7: (类型相关)

test7();
function test7() {
  console.log(typeof 1); // number
  console.log(typeof "hello"); // string
  console.log(typeof typeof "hello"); // string
  console.log(typeof !!"hello"); // boolean
  console.log(typeof /[0-9]/); // object
  console.log(typeof {}); // object
  console.log(typeof null); // object
  console.log(typeof undefined); // undefined
  console.log(typeof [1, 2, 3]); // object
  console.log(toString.call([1, 2, 3])); // [object Array]
  console.log(typeof function () {}); // function
}

测试8: (parse函数相关)

test8();
function test8() {
  console.log(parseInt(3.14));// 3
  console.log(parseFloat('3.01aaa'));// 3.01
  console.log(parseInt('aa1.2'));// NaN;
  console.log(parseInt('8.00',16));// 8
  console.log(parseInt('0x8',16));// 8
  console.log(parseInt('8.00',10));// 8
  console.log(parseInt('010',8));// 10
  console.log(parseInt('1000',2));// 1000
}

测试9: (变量提升,函数提升与return后阻断执行)

test9();
function test9() {
  function bar() {
    return foo;
    foo = 10;
    function foo(){};
  }
  console.log(typeof bar()); // 'function'
}

测试10: (作用域与函数提升)

test10();
function test10() {
  var foo = 1;
  function bar() {
    foo = 10;
    console.log(typeof foo);
    return;
    function foo(){};
  }
  bar(); // number
  console.log(foo); // 1
}

测试11: (变量提升与函数提升)

test11();
function test11() {
  console.log(typeof a); // function
  var a = 3;
  function a(){};
  console.log(typeof a); // number
}

测试12: (arguments对象)

test12();
function test12() {
  function foo(a) {
    console.log(a);// 1
    arguments[0] = 2;
    console.log(a);// 2
    console.log(arguments.length);// 3
  }
  foo(1,3,4);
}

测试13: (中间函数名,直接使用会报错)

test13();
function test13() {
  var foo = function bar(name) {
    console.log("hello " + name);
  }
  foo("world");
  console.log(bar); // 此处会报错 bar is not defined
}

测试14: (在js中定时器,最后执行,涉及到的知识点是事件循环和事件队列)

test14();
function test14() {
  function foo() {
    console.log('I am foo');
  }
  console.log('正常执行');
  setTimeout((function(){
    console.log('定时器大灰狼来啦');
  }),0);
  foo();
}

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
javascript代码加载优化方法
Jan 30 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
Aug 24 Javascript
精通JavaScript的this关键字
May 28 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
Jun 29 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
几种tab切换详解
Feb 03 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 #Javascript
javascript for循环性能测试示例
Aug 07 #Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 #Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 #Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 #Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 #Javascript
javascript中的数据类型检测方法详解
Aug 07 #Javascript
You might like
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
php简单实现数组分页的方法
2016/04/30 PHP
JS实现根据出生年月计算年龄
2014/01/10 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
省市二级联动小案例讲解
2016/07/24 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
详解numpy的argmax的具体使用
2019/05/27 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
django框架创建应用操作示例
2019/09/26 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
爽歪歪广告词
2014/03/20 职场文书
大学迎新标语
2014/06/26 职场文书
物业消防安全责任书
2014/07/23 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
个人租房协议书样本
2014/10/01 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
2015年财政所工作总结
2015/04/25 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
Linux中各个目录的作用与内容
2022/06/28 Servers