不为人知的JavaScript热门基础知识大全（收藏）-js教程-PHP中文网

首页

web前端

js教程

不为人知的JavaScript热门基础知识大全（收藏）

php是最好的语言

Jul 24, 2018 am 09:22 AM

学习JavaScript是很枯燥又头疼的，本文带你加深基础知识的印象，以后学习会用到的，需要的就收藏下来吧。

一、js内建对象

(1)Number
创建方式：

var myNum=new Number(value);
var myNum=Number(value);

属性和方法：
           toString():转成字符串
           valueOf()：返回一个 Number 对象的基本数字值
   (2)Boolean
       创建方式：

var bool = new Boolean(value);    
var bool = Boolean(value);

属性和方法：
           toString():转成字符串
           valueOf()：返回一个 Boolean 对象的基本值(boolean)
   (3)String
       创建方式：

var str = new String(s);
var str = String(s);

属性和方法：
           length:字符串的长度
           charAt():返回索引字符
           charCodeAt:返回索引字符unicode
           indexOf():返回字符的索引
           lastIndexOf();逆向返回字符的索引
           split();将字符串按照特殊字符切割成数组
           substr():从起始索引号提取字符串中指定数目的字符
           substring():提取字符串中两个指定的索引号之间的字符
           toUpperCase();转大写
       示例：
   (4)Array
       创建方式：

var arr = new Array();//空数组
var arr = new Array(size);//创建一个指定长度的数据
var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
var arr = [];//空数组
var arr = [1,2,5,"java"];//创建数组直接实例化元素

属性和方法：
           length:数组长度
           join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
           pop():删除并返回最后元素
           push()：向数组的末尾添加一个或更多元素，并返回新的长度
           reverse();反转数组
           sort();排序
   (5)Date
       创建方式：

    var myDate = new Date();
    var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值

属性和方法
           getFullYear():年
           getMonth():月 0-11
           getDate():日 1-31
           getDay()：星期 0-6
           getTime():返回1970年1月1日午夜到指定日期（字符串）的毫秒数
           toLocalString();获得本地时间格式的字符串

   (6)Math
       创建方式：
           Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，
           不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
       属性和方法
           PI：圆周率
           abs():绝对值
           ceil():对数进行上舍入
           floor():对数进行下舍入
           pow(x,y)：返回 x 的 y 次幂
           random():0-1之间的随机数
           round():四舍五入
   (7)RegExp
       创建方式：
           var reg = new RegExp(pattern);
           var reg = /^正则规则$/;
       规则的写法：
           [0-9]
           [A-Z]
           [a-z]
           [A-z]
           \d 代表数据
           \D   非数字
           \w   查找单词字符
           \W   查找非单词字符
           \s   查找空白字符
           \S   查找非空白字符
           n+   出现至少一次
           n*   出现0次或多次
           n?   出现0次或1次
           {5} 出现5
           {2,8} 2到8次
       方法：
           test(str):检索字符串中指定的值。返回 true 或 false
       需求：
           校验邮箱：

 var email = haohao_827@163.com
 var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
 reg.test(email);

二、js的函数
   1、js函数定义的方式
       (1)普通方式
           语法：function 函数名(参数列表){函数体}
           示例：
               function method(){
                   alert("xxx");
               }
               method();
       (2)匿名函数
           语法：function(参数列表){函数体}
           示例：
               var method = function(){
                   alert("yyy");
               };
               method();
       (3)对象函数
           语法：new Function(参数1,参数2,...,函数体);
           注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
           示例：
               var fn = new Function("a","b","alert(a+b)");
               fn(2,5);
   2、函数的参数
       (1)形参没有var去修饰
       (2)形参和实参个数不一定相等
       (3)arguments对象是个数组会将传递的实参进行封装
       function fn(a,b,c){
           //var sum = a+b+c;
           //alert(sum);
           //arguments是个数组会将传递的实参进行封装
           for(var i=0;i56c9e5f3d44be06bfe714581f08c06faname8c1ecd4bb896b2264e0711597d40766c
           666ac8728054c077fc5cc775c102c5f26ef44c608976f15c1dbf0d10ec38e59754bdf357c58b8a65c66d7c19c8e4d114
           5cd6e472395e766622bc5d31b556eb7a
               var txt = document.getElementById("txt");
               txt.onfocus = function(){
                   //友好提示
                   var span = document.getElementById("action");
                   span.innerHTML = "用户名格式最小8位";
                   span.style.color = "green";
               };
               txt.onblur = function(){
                   //错误提示
                   var span = document.getElementById("action");
                   span.innerHTML = "对不起格式不正确";
                   span.style.color = "red";
               };
           2cacc6d41bbb37262a98f745aa00fbf0

       onmouseover:鼠标悬浮的事件
       onmouseout:鼠标离开的事件
           需求：p元素鼠标移入变为绿色移出恢复原色
           #d1{background-color: red;width:200px;height: 200px;}
           aee05862a039576747986e29c62a5b6e94b3e26ee717c64999d7867364b1b4a3
           5cd6e472395e766622bc5d31b556eb7a
               var p = document.getElementById("d1");
               p.onmouseover = function(){
                   this.style.backgroundColor = "green";
               };
               p.onmouseout = function(){
                   this.style.backgroundColor = "red";
               };
           2cacc6d41bbb37262a98f745aa00fbf0


       onload:加载完毕的事件
           等到页面加载完毕在执行onload事件所指向的函数
           112c8dd940660acc05061dbf2b5db10d54bdf357c58b8a65c66d7c19c8e4d114
           5cd6e472395e766622bc5d31b556eb7a
               window.onload = function(){
                   var span = document.getElementById("span");
                   alert(span);
                   span.innerHTML = "hello js";
               };
           2cacc6d41bbb37262a98f745aa00fbf0

   2、事件的绑定方式
       (1)将事件和响应行为都内嵌到html标签中
           eb97007688bd4ee11ee398225995a9ef
       (2)将事件内嵌到html中而响应行为用函数进行封装
           e5be66fcadd6496779bd49fbc27cc8da
           5cd6e472395e766622bc5d31b556eb7a
               function fn(){
                   alert("yyy");
               }
           2cacc6d41bbb37262a98f745aa00fbf0
       (3)将事件和响应行为与html标签完全分离
           a358fafa8396ad7dc5f5a7f914de75f5
           5cd6e472395e766622bc5d31b556eb7a
               var btn = document.getElementById("btn");
               btn.onclick = function(){
                   alert("zzz");
               };
           2cacc6d41bbb37262a98f745aa00fbf0

       ****this关键字
           this经过事件的函数进行传递的是html标签对象
           128bbdd9af658ca0b18345bf87cc930e
           5cd6e472395e766622bc5d31b556eb7a
               function fn(obj){
                   alert(obj.name);
               }
           2cacc6d41bbb37262a98f745aa00fbf0

   3、阻止事件的默认行为
       IE：window.event.returnValue = false;
       W3c: 传递过来的事件对象.preventDefault();
       //ie：window.event.returnValue = false;
       //W3c：传递过来的事件对象.preventDefault();
       //W3c标准
       if(e&&e.preventDefault){
           alert("w3c");
           e.preventDefault();
       //IE标签
       }else{
           alert("ie");
           window.event.returnValue = false;
       }


       //通过事件返回false也可以阻止事件的默认行为
       36ef15f7e6d6015c58f58d0682250793点击我吧5db79b134e9f6b82c0b36e0489ee08ed

   4、阻止事件的传播
       IE：window.event.cancelBubble = true;
       W3c: 传递过来的事件对象.stopPropagation();
       if(e&&e.stopPropagation){
           alert("w3c");
           e.stopPropagation();
       //IE标签
       }else{
           alert("ie");
           window.event.cancelBubble = true;
       }

四、js的bom
   (1)window对象
       弹框的方法：
           提示框：alert("提示信息");
           确认框：confirm("确认信息");
               有返回值：如果点击确认返回true 如果点击取消返回false
               var res = confirm("您确认要删除吗？");
               alert(res);
           输入框：prompt("提示信息");
               有返回值：如果点击确认返回输入框的文本点击取消返回null
               var res = prompt("请输入密码？");
               alert(res);
       open方法：
           window.open("url地址");
           open("../jsCore/demo10.html");

       定时器：
           setTimeout(函数,毫秒值);
               setTimeout(
                   function(){
                       alert("xx");
                   },
                   3000
               );
           clearTimeout(定时器的名称);
               var timer;
               var fn = function(){
                   alert("x");
                   timer = setTimeout(fn,2000);
               };
               var closer = function(){
                   clearTimeout(timer);
               };
               fn();
           setInterval(函数,毫秒值);
           clearInterval(定时器的名称)
               var timer = setInterval(
               function(){
                   alert("nihao");
               },
               2000
           );
           var closer = function(){
               clearInterval(timer);
           };

       需求：注册后5秒钟跳转首页
       恭喜您注册成功，61527e5a7561c38afef98843873e863b554bdf357c58b8a65c66d7c19c8e4d114秒后跳转到首页，如果不跳转请c9ca91c44f624efbdeac8a61e5d229cf点击这里5db79b134e9f6b82c0b36e0489ee08ed
       5cd6e472395e766622bc5d31b556eb7a
           var time = 5;
           var timer;
           timer = setInterval(
               function(){
                   var second = document.getElementById("second");
                   if(time>=1){
                       second.innerHTML = time;
                       time--;
                   }else{
                       clearInterval(timer);
                       location.href="../jsCore/demo10.html";
                   }
               },
               1000
           );
       2cacc6d41bbb37262a98f745aa00fbf0

   (2)location
       location.href="url地址";
   (3)history
       back();
       forward();
       go();
       1caf2b098dae8153f530b128d07235f6后一页5db79b134e9f6b82c0b36e0489ee08ed
       37b168c45408b29e158e51ed43749902
       397ca4b3e686f9e61348658dbaa98c6f

       b54d1f75f3cbdea9047b27df40a4a9b4
       1fc8573c016b40974ee22a5d6a3e8133

五、js的dom
   1、理解一下文档对象模型
       html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改
       在dom树当中一切皆为节点对象
   2、dom方法和属性
       笔记见代码
相关推荐：

JavaScript 变量基础知识_基础知识

JavaScript必须知道的基础知识

以上是不为人知的JavaScript热门基础知识大全（收藏）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。