全球云服务器

10个实用js基础教程

发布时间：2022-07-20 17:17:02 作者：keshui 阅读量：6975

每一门语言都有一些奇技淫巧，JS也不例外，一直想总结js基础教程这篇文章，我包括一些新手，都会有这么一个疑问，每次面对一张空白的页面，不知从何下手，没有思路，高手有的是设计模式，但是在这里讲一些设计模式，我可能不够格，这些书籍都有可以自己去翻阅，我能给的就是，总结我写代码的时候，会优化的一些技巧。

实用篇

1.立即执行

我为什么把立即执行放在第一个，因为一般做业务的时候都会有一个入口函数，比如一下这种格式

function init(){
    //...
}
init()

我一开始也跟上面这样写，但是后来看了《你所不知道的javaScript》，我是这么写的

(function init(){
    //...
})()

立即执行的好处：
作用域隔离,因为init这个函数名是没有必要在全局作用域中展示的

2.常量解耦

这个技巧我在业务中也是经常使用的，没学会之前是这么写的

function(){
    console.log(12345678901)
}

但是学会之后，是这样的

const TEL = 12345678901
function(){
    console.log(TEL)
}

可能这里有人会问，你这不是多此一举，而且还添加了一个全局常量，但是事实是这样的，好处如下：

• 当多处引用这个常量的时候，当你修改的时候，只要修改一处代码即可
• 这样写出来的代码更具语义话，举个例子，有些请求回调中ERROR常量一般为1，摆在那别人很难看懂

3.递归的解耦

这个方法在红宝书中有写到，我不知道常不常用，如有错误，请纠正我，因为我递归一直在用，面试写算法题也在用，没学会之前的写法

function a(){
    //...
    a();
}

学会之后，我的递归一般是这么写的

function a(){
    //...
    argument.callee();
}

解耦的好处：
修改函数名即可，不影响里面的代码

4.整数的转换之加法篇

你可能以前看到过parseInt和parseFloat这两个方法来转换成number类型的整数型和浮点型，其实，一开始我也是用这么笨的方法的，为什么说笨呢，举个例子

let str = '123'
console.log(typeof parseInt(str));    //number

接下来是加号操作符

let str = '123'
console.log(typeof +str);    //number

好处就不多说了吧，你打字打得累死，不如加号来的快，而且加号实现方式还优雅

5.短路操作

没学会这个方法之前我的代码是这样的：

if(!foo){
   foo = bar
}

但是我学会短路操作之后的是这样的：

foo = foo || bar

好处：

1. 代码量减少
2. 书写优雅

缺点：
代码可读性降低

短路原理：
在js中&&和||这两个操作符有一个特性，比如&&前后有两个表达式，前者为false，后者不会执行，||会反过来

6.条件表达式

条件表达式或许在每门语言中都会用到，你没学会之前你会这么写

if(a === true){
   b = c;
}else{
    b = d;
}

但是你学会之后，你会这么写

let b = a ? c : d

好处：
1.减少代码量
2.代码优雅

缺点：
代码可读性降低

7.调试之alert

我没有实习之前不喜欢用alert的，现在也不怎么用，都是console.log，这样就可以在浏览器的控制台中看到页面数据的输出，但是h5不一样，h5有时候pc端没什么问题，但是手机端就是各种bug，想调试一个数据很麻烦，但是我们有个宝贝，alert这个东西在手机端调试比console.log棒的地方就是我们能看见我们的数据，他会以一个弹框的形式显示给我们

8.优雅的向下取整

向下取整有很多种方式，做常用的，是调用Math的方法，如下图的例子

let num = 1.23
let num1 = Math.floor(num);
console.log(num1); //1

但是下面有一种更加优雅的方式

let num = 1.23
let num1 = num | 0;
console.log(num1)  // 1

这种方式更加简洁，这种方式的原理是来源于js的位运算，这边的 | 不是逻辑或，是按或运算

• 注意点：
  • Math.floor(NaN)返回的是NaN，但是或零返回的是0；
  • Math.floor(Infinity)返回的是Infinity，但是或零返回的是0；

9.单声明的形式

在编程中，最好养成一个习惯，一个函数的参数，声明在函数的顶部，然后用这个声明操作符来完成，例如：

let a = 0,
     b = 0,
     c = 0,
     d = 0;

• 这样的好处有：
  • 变量名不散乱，比较容易寻找
  • 少代码量
  • 防止你声明变量的时候出错

10.绑定this

这个怎么解释呢？其实es6箭头函数已经解决了，我也当一个技巧跟大家絮叨絮叨，我们在设计整个js代码怎么书写的时候，常常会把一块功能相同的代码放到一块，看看下面的例子，你就懂了

function bindEvent(){
    let _this = this;
    function a () {
        //可以在a中使用_this;
    }
    function b () {
        //可以在b中使用_this;
    }
}

• 总结：
  上面很多技巧，我平时也在用，如果有错，请你们纠正，如果有受益，麻烦点个

***本网站图片，文字之类版权申明，因为网站可以由注册用户自行上传图片或文字，本网站无法鉴别所上传图片或文字的知识版权，如果侵犯，请及时通知我们，本网站将在第一时间及时删除。

我要评论

网友评论

---

---

---

---

---

常见ftp命令 FTP命令使用详解双硬盘组建Raid0磁盘阵列图文教程用友软件客户端连接不上服务器的解决办法？WebService实例开发、运维不可不看的Linux调测工具如何使用Charles抓取Websocket的消息DNS服务的启动和停止如何用ODBC访问SQL数据库Linux视频教程：用户管理命令useraddWindows Server 2003中如何启动ASP.NET扩展服务IIS中站点主属性配置如何搭建平台【超赞】专为小白整理的adobe xd入门教程小旋风asp服务器怎么使用将基于域名的虚拟主机转换为基于IP的虚拟主机设置DHCP数据库路径快云存储技术服务器集群技术的分类什么是双线托管，比较便宜的双线托管有哪些重庆电信服务器托管注意事项IBM欲出售低端服务器业务是为何意Linux-PAM的工作流程基于域名的虚拟主机配置的两种方法分布式与集群是一回事儿么？大神教你5招加速Python英特尔称服务器业务目前已基本恢复英特尔三季度全球微处理器市场份额达83.7%【划重点】我对TopCoder的一些看法服务器技术之Pcrl语言文件的读写IDC：中国HPC发展迅猛曙光HPC销售额进全球前十强