当前位置: 首页 > news >正文

一些现代 Javascript 技巧

当我在学习 JavaScript 时,我曾经列出一个可以节省时间的技巧列表。我从其他人的代码、编程网站以及我用来学习的教程之外的任何地方获取了这些列表。我将分享该列表中的一些技巧,我发现这些技巧在现代 JavaScript 中非常有用,它对处于学习初级阶段和中级阶段的人非常有用。

另外,你也可以在留言区跟我分享你的一下学习技巧与相关问题,我们一起学习讨论进步。

史蒂夫乔布斯说,这个国家的每个人都应该学习编程计算机,因为它教你如何思考。

下面提到的一些技巧没有特定的顺序。

处理变量赋值的逻辑运算符

1. AND (&&)

当且仅当所有操作数都为true时,一组布尔操作数的逻辑与 (&&) 运算符才会为true。否则会是false的。

一般地,运算符返回第一个 falsy 的值。

和变量的用例

let a="one",b="two",c="three";


let d = a && b && c;  // "three"


/*In above the case , the first two input should have some values, then only 
I can access the last one, otherwise it will return the falsy value*/


let a = "",b="two",c="three";


let d = a && b && c;  // ""

2. OR (||)

当且仅当其一个或多个操作数为true时,一组操作数的逻辑 OR (||) 运算符为true。如果它的任何参数为true,则返回true,否则返回false。

例子:

使用上述示例,以便比较

/**input1*/
let a="one",b="two",c="three";


let d = a || b || c;  // "one"




/**input2*/
let a = "",b="two",c="three"; 


let d = a || b || c;  // "two"




/**input3*/
let a = "",b="",c="";


let d = a || b || c;  // ""

03.对象中的动态属性名称

在现代 javascript 中,使用动态键设置对象很简单。使用“[‘key’]”可以添加属性。

例子 :

var stu_address = 'address';
var student = {
    name:'mick',
    age : 10,
    stu_address : 'chennai'    


}
// {name:'mick', age : 10, stu_address : 'chennai'}


/*Using notations you can change the key dynamically*/


var stu_address = 'address';
var student = {
    name:'mick',
    age : 10,
    [stu_address] : 'chennai'    


}


//{name: 'mick', age: 10, address: 'chennai'}

04.数组到对象,对象到数组

在现代 javascript 世界中,我们可以将数组转换为对象或将对象转换为数组是最简单的方法。我想你知道扩展运算符,你可能用过很多地方,就像我们将在这里使用它的那样。

例子 :

数组到对象

let arr = [1,2,3,4,5,6,7,8,9]


const convert_obj = {...arr}; 
// {"0": 1, "1": 2, "2": 3, "3": 4, "4": 5, "5": 6, "6": 7, "7": 8, "8": 9,"9": 10}

对象到数组

我们有 3 种类型将对象转换为数组

1).Object.Keys :使用此方法,将获取所有键作为数组

2). Object.values:使用该方法将获取所有值作为一个数组

3). Object.entries:将获取数组中的键和值

let obj = {
            one : 'a',
            two : 'b',
            three : 'c'
        };


/*1. Object.keys*/


         const keys = Object.keys(obj) //['one', 'two', 'three']


/*2. Object.values*/             


           const values = Object.values(obj) // ['a', 'b', 'c']


/*3. Object.entries*/


             const entries = Object.entries(obj) // [ ["one", "a"], ["two", "b"], ["three","c"] ]

05.解构赋值

解构赋值是一种特殊的语法,它允许我们将数组或对象“解包”成一堆变量,因为有时这样更方便。

ES6 中引入的解构赋值使得将数组值和对象属性分配给不同的变量变得很容易,大多数人在 react、angular 等 javascript 框架中使用了这个特性。

const student = {
    name : 'mick',
    age : 10,
    gender : 'male'
}


/*Before ES6 : */
 student.name // "mick"
 student.age //10
 student.gender // "male"   


/*From ES6 (using this feature) : */


const {name,age,gender} = student;
 name // "mick"
 age // 10
 gender // "male"

注意:在解构对象时,应该为变量使用与对应对象键相同的名称。

const {name1,age,gender} = student;


name1 // undefined


/*if you want to assign different variable names, you can use key and pair*/


const {name : name1,age : age1 , gender: gender2} = student;


name1 // "mick"


/*and you can assign default values */


const {name,age,gender,score=70} = student;


score // 70

如果键不是那样,将分配默认值。

在数组中:

const num = [11,12,13,14,15,16,17,18,19];
    const [firstElement, secondElement, thirdElement] = num;
    firstElement // 11
    secondElement // 12
    thirdElement // 13


// is equivalent to:
const firstElement = num[0];
const seco
ndElement = num[1];


let [a, b, c] = "mick"; // ["m", "i", "c"]

总结

以上就是我在这篇文章中,与你分享的一些关于Javascript的技巧,希望你能从中学到一些有用的东西。

相关文章:

  • Java学习 --- 类方法(静态方法)
  • 网课答案搜题方法详细步骤
  • promise函数
  • 何云伟全国相声巡回演,首场定在北京吉祥戏楼,不知道送不送鸡蛋
  • 秋招面试!阿里、字节、美团等大厂面试我只刷这份《Java面试题》没想到还真拿下了offer!
  • Day741.Redis消息队列 -Redis 核心技术与实战
  • C 语言的特性
  • python使用xlwings模块生成excel文件、并将数据写入生成的excel文件中、将数据写入指定表单的指定单元格中
  • 游戏客户端--个人学习路线总结、指北
  • 电场与磁场中的物理量
  • 【C++】基础入门(一):域、命名空间、C++输入输出
  • Hadoop生态及Hive、HBase、Impala、HDFS之间的关系
  • 3D-NAND向500层进发,天花板在哪里?
  • 【更新!】3dMax材质ID随机生成器插件MaterialIDsRandomGenerator v2.1.2使用教程
  • 音乐APP首页框架搭建
  • [微信小程序] 使用ES6特性Class后出现编译异常
  • [译] 怎样写一个基础的编译器
  • 【译】React性能工程(下) -- 深入研究React性能调试
  • 0x05 Python数据分析,Anaconda八斩刀
  • Apache的80端口被占用以及访问时报错403
  • express如何解决request entity too large问题
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • HomeBrew常规使用教程
  • Java 9 被无情抛弃,Java 8 直接升级到 Java 10!!
  • Java 最常见的 200+ 面试题:面试必备
  • JavaScript 奇技淫巧
  • leetcode388. Longest Absolute File Path
  • mysql常用命令汇总
  • Selenium实战教程系列(二)---元素定位
  • Webpack4 学习笔记 - 01:webpack的安装和简单配置
  • 高性能JavaScript阅读简记(三)
  • 关于使用markdown的方法(引自CSDN教程)
  • 扑朔迷离的属性和特性【彻底弄清】
  • 如何在 Tornado 中实现 Middleware
  • 深度学习入门:10门免费线上课程推荐
  • 使用SAX解析XML
  • 详解移动APP与web APP的区别
  • 在GitHub多个账号上使用不同的SSH的配置方法
  • 自动记录MySQL慢查询快照脚本
  • Nginx惊现漏洞 百万网站面临“拖库”风险
  • postgresql行列转换函数
  • 通过调用文摘列表API获取文摘
  • ​一、什么是射频识别?二、射频识别系统组成及工作原理三、射频识别系统分类四、RFID与物联网​
  • # .NET Framework中使用命名管道进行进程间通信
  • #pragma预处理命令
  • #单片机(TB6600驱动42步进电机)
  • (C++17) std算法之执行策略 execution
  • (TipsTricks)用客户端模板精简JavaScript代码
  • (层次遍历)104. 二叉树的最大深度
  • (附源码)ssm基于jsp的在线点餐系统 毕业设计 111016
  • (三)c52学习之旅-点亮LED灯
  • (四)c52学习之旅-流水LED灯
  • (未解决)macOS matplotlib 中文是方框
  • (转)jdk与jre的区别
  • .Net Winform开发笔记(一)