脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js高级写法

js高手进阶实用语法的高级写法

 更新时间：2023年08月26日 15:50:47   投稿：yin  
这篇文章主要介绍了js高手进阶实用语法的高级写法的相关资料,需要的朋友可以参考下

一、常见写法优化

名称

一般写法优化
取整(不四舍五入)

var a='12.534324'

parseInt(a,10);

Math.floor(a);

a>>0;      //12

~~a;     //12

a|0;

取整(四舍五入）

var a='12.534324'

Math.round(a);
num.toFixed(0)

a+.5|0;   //13
未定义

undefined; 
 

void 0;      // 快
0[0];        // 略慢
布尔值短写法

true; 
 

!0; 
串连字符串

var a='a',b=4,c='c';

''+a+b+c; 

''.concat(a, b, c);
字符串截取

var str='apple'

str.charAt(0); 
 

str[0]
获取数组是否存在元素for循环[1, 2, 3].indexOf(2);

二、优化嵌套的条件语句

可优化大量的ifelse  switch语句

before:

//method1
     if (color) {
         if (color === 'black') {
             printBlackBackground();
         } else if (color === 'red') {
             printRedBackground();
         } else if (color === 'blue') {
             printBlueBackground();
         } else if (color === 'green') {
             printGreenBackground();
         } else {
             printYellowBackground();
         }
     }

//method2
     switch(color) {
         case 'black':
             printBlackBackground();
             break;
         case 'red':
             printRedBackground();
             break;
         case 'blue':
             printBlueBackground();
             break;
         case 'green':
             printGreenBackground();
             break;
         default:
             printYellowBackground();
     }

//method3
     switch(true) {
         case (typeof color === 'string' && color === 'black'):
             printBlackBackground();
             break;
         case (typeof color === 'string' && color === 'red'):
             printRedBackground();
             break;
         case (typeof color === 'string' && color === 'blue'):
             printBlueBackground();
             break;
         case (typeof color === 'string' && color === 'green'):
             printGreenBackground();
             break;
         case (typeof color === 'string' && color === 'yellow'):
             printYellowBackground();
             break;
     }

优化后

//method4
     var colorObj = {
         'black': printBlackBackground,
         'red': printRedBackground,
         'blue': printBlueBackground,
         'green': printGreenBackground,
         'yellow': printYellowBackground
     };
     if (color in colorObj) {
       colorObj[color]();
     }

三、检查某对象是否有某属性

使用 hasOwnProperty和in

before:

var myObject = {
       name: '@tips_js'
    };
if (myObject.name) { }

after:

myObject.hasOwnProperty('name'); // true
'name' in myObject; // true
 
 myObject.hasOwnProperty('valueOf'); // false, valueOf 继承自原型链
 'valueOf' in myObject; // true

四、更简单的使用indexOf实现contains功能

before:

var someText = 'javascript rules';
 if (someText.indexOf('javascript') !== -1) {
 }

after:

!!~someText.indexOf('tex'); // someText contains "tex" - false
!!~someText.indexOf('java'); // - true

五、将有length属性的对象转化为数组

比如带有length属性的自定义对象，NodeList，parameters等。

转化：

var  arr  = { length : 2 , 0 : 'first' , 1 : 'second' };
1、Array. prototype . slice . call (arr) //["first", "second"]
2、Array.from(arr) //
["first", "second"]

六、获取DOM元素在父类中的索引

//html
<ul>
    <li></li>
    <li onclick="getIndex()"></li>
</ul>
//js
function getIndex() {
　　var evt = window.event;
   var target = evt.target;
   return [].indexOf.call(document.querySelectorAll('li'), target);// 返回1
}

　　

七、判断类型  instanceof

1

2

let data = [1]

console.log(data instanceof Array) // true

　　

八、if else 高级写法

if(a >=5){
alert("你好");
}
//可以写成：
a >= 5 && alert("你好");
var attr = true && 4 && "aaa";
//运行的结果不是简单的true或这false，而是”aaa”代码：var attr = attr || “”;这个运算经常用来判断一个变量是否已定义，如果没有定义就给他一个初始值，这在给函数的参数定义一个默认值的时候比较有用。

　　

到此这篇关于js高手进阶实用语法的高级写法的文章就介绍到这了,更多相关js高级写法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • javascript中的Array对象(数组的合并、转换、迭代、排序、堆栈)

    javascript中的Array对象(数组的合并、转换、迭代、排序、堆栈)

    Array 是javascript中经常用到的数据类型。javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据。本文主要讨论javascript中数组的声明、转换、排序、合并、迭代等等基本操作
    2023-03-03
  • js实现楼层效果的简单实例

    js实现楼层效果的简单实例

    下面小编就为大家带来一篇js实现楼层效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 模拟抽奖

    模拟抽奖

    模拟抽奖...
    2006-08-08
  • 详解cordova打包成webapp的方法

    详解cordova打包成webapp的方法

    本篇文章主要介绍了详解cordova打包成webapp的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 在JavaScript中如何使用宏详解

    在JavaScript中如何使用宏详解

    这篇文章主要给大家介绍了关于在JavaScript中如何使用宏的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Java @Schema和@ApiModel等注解的联系浅析

    Java @Schema和@ApiModel等注解的联系浅析

    这篇文章主要给大家介绍了关于Java @Schema和@ApiModel等注解的联系的相关资料,我在看公司之前的文档,发现了@schema注解,不太了解,所以查询了一些资料,把我的见解记录下,需要的朋友可以参考下
    2023-08-08
  • JS中实现隐藏部分姓名或者电话号码的代码

    JS中实现隐藏部分姓名或者电话号码的代码

    最近做了小项目，项目需要只显示用户的姓名和手机号开头跟结尾，其他部分用*号代替，下面小编给大家分享一段简单的代码，需要的朋友跟随脚本之家小编一起看看吧
    2018-07-07
  • 小程序自定义单页面、全局导航栏的实现代码

    小程序自定义单页面、全局导航栏的实现代码

    这篇文章主要介绍了小程序自定义单页面、全局导航栏的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • JS实现的RGB网页颜色在线取色器完整实例

    JS实现的RGB网页颜色在线取色器完整实例

    这篇文章主要介绍了JS实现的RGB网页颜色在线取色器,结合完整实例形式分析了基于JS运算及鼠标事件响应来操作页面元素实现取色器功能的方法,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-12-12
  • JS+CSS3模拟溢出滚动效果

    JS+CSS3模拟溢出滚动效果

    这篇文章主要介绍了JS+CSS3模拟溢出滚动效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08

最新评论