常用的JavaScript技巧

// 1.声明变量
// Longhand
let x;
let y = 20;
//Shorthand
let x, y = 20;// 2.给多个变量赋值
// (使用数组解构来在一行中给多个变量赋值。)
// Longhand
let a, b, c;
a = 5;
b = 6;
c = 12;
// Shorthand
let [a, b, c] = [5, 6, 12]// 3.三元运算符
// Longhand
let marks = 26;
let result;
if (marks >= 30) {result = 'Pass';
} else {result = 'Fail'
}
// Shorthand
let result = marks >= 30 ? 'Pass' : 'Fail'// 4.赋默认值
// Longhand
let imagePath;
let path = getImagePath();
if (path !== null && path !== undefined && path !== '') {imagePath = path;
} else {imagePath = 'logo.jpg'
}
// Shorthand
let imagePath = getImagePath() || 'logo.jpg'// 5. 与 (&&) 短路运算
//Longhand
if (isLoggedin) {goToHomepage();
}
//Shorthand
isLoggedin && goToHomepage();// 6.交换两个变量
let x = 'hello', y = 20;
// Longhand
const temp = x;
x = y;
y = temp;
// Shorthand
[x, y] = [y, x];// 7.箭头函数
// Longhand
function add (num1, num2) {return num1 + num2;
}
// Shorthand
const add = (num1, num2) => num1 + num2;// 8.模板字符串
// Longhand
console.log('You got a missed call from ' + number + ' at ' + time);
// Shorthand
console.log(`You got a missed call from ${number} at ${time}`);// 9. 多行字符串
//Longhand
console.log('JavaScript, often abbreviated as JS, is a\n' + 'programming language that conforms to the \n' +'ECMAScript specification. JavaScript is high-level,\n' +'often just-in-time compiled, and multi-paradigm.' );
//Shorthand
console.log(`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.`);// 10. 多条件检查
//Longhand
if (value === 1 || value === 'one' || value === 2 || value === 'two') {// Execute some code
}
// Shorthand 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {// Execute some code
}
// Shorthand 2
if ([1, 'one', 2, 'two'].includes(value)) {// Execute some code
}// 11.对象属性复制
let firstname = 'Amitav';
let lastname = 'Mishra';
// Longhand
let obj = {firstname: firstname, lastname: lastname};
// Shorthand
let obj = {firstname, lastname};// 12.字符串传成数字
// Longhand
let total = parseInt('453');
let average = parseFloat('42.6');
// Shorthand
let total = +'453';
let average = +'42.6';// 13.重复一个字符串多次
// Longhand
let str = '';
for(let i = 0; i < 5; i ++) {str += 'Hello ';
}
console.log(str); // Hello Hello Hello Hello Hello
// Shorthand
'Hello '.repeat(5);// 14.指数幂
// Longhand
const power = Math.pow(4, 3); // 64
// Shorthand
const power = 4**3; // 64// 15. 双非位运算符 (~~)
// 双非位运算符只对 32 位整数有效，例如 (2**31)-1 = 2147483647。所以对于任何大于 2147483647 的数字，双非位运算符 (~~) 都会给出错误的结果，这种情况下推荐使用 Math.floor() 方法。
// Longhand
const floor = Math.floor(6.8); // 6
// Shorthand
const floor = ~~6.8; // 6// 16.数组中的最大和最小数字
// Shorthand
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2// 17.For循环
let arr = [10, 20, 30, 40];
// Longhand
for (let i = 0; i < arr.length; i++) {console.log(arr[i]);
}
// Shorthand
// for of loop
for (const val of arr) {console.log(val);
}
// for in loop
for (const index in arr) {console.log(arr[index]);
}// for...in循环来遍历对象属性。
let obj = {x: 20, y: 50};
for (const key in obj) {console.log(obj[key]);
}// 18. 合并数组
let arr1 = [20, 30];
// Longhand
let arr2 = arr1.concat([60, 80]);
// [20, 30, 60, 80]
// Shorthand
let arr2 = [...arr1, 60, 80];
// [20, 30, 60, 80]// 19.获取字符串中的字符
let str = 'jscurious.com';
//Longhand
str.charAt(2); // c
//Shorthand
str[2]; // c// 20.Replace All
var example = "potato potato";
console.log(example.replace(/pot/, "tom"));
// "tomato potato"
console.log(example.replace(/pot/g, "tom"));
// "tomato tomato"// 21.提取唯一值
var entries = [1, 2, 2, 3, 4, 5, 6, 6, 7, 7, 8, 4, 2, 1]
var unique_entries = [...new Set(entries)];
console.log(unique_entries);
// [1, 2, 3, 4, 5, 6, 7, 8]// 22.将数字转换为字符串
var converted_number = 5 + "";
console.log(converted_number);
// 5
console.log(typeof converted_number);
// string// 23.将字符串转换为数字
// 请注意这里的用法，因为它只适用于“字符串数字”。
the_string = "123";
console.log(+the_string);
// 123
the_string = "hello";
console.log(+the_string);
// NaN// 24.随机排列数组中的元素
var my_list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(my_list.sort(function() {return Math.random() - 0.5
}));
// [4, 8, 2, 9, 1, 3, 6, 5, 7]// 25.展平二维数组
var entries = [1, [2, 5], [6, 7], 9];
var flat_entries = [].concat(...entries);
// [1, 2, 5, 6, 7, 9]// 26.动态属性名称
const dynamic = 'flavour';
var item = {name: 'Coke',[dynamic]: 'Cherry'
}
console.log(item);
// { name: "Coke", flavour: "Cherry" }// 27.使用 length 调整大小 / 清空数组
// 调整数组的大小：
var entries = [1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length = 4;
console.log(entries.length);
// 4
console.log(entries);
// [1, 2, 3, 4]// 清空数组：
var entries = [1, 2, 3, 4, 5, 6, 7];
console.log(entries.length);
// 7
entries.length = 0;
console.log(entries.length);
// 0
console.log(entries);
// []

常用的JavaScript技巧相关推荐

12个常用的JavaScript技巧
在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是 ...
[转]javascript常用的小技巧
javascript常用的小技巧分类: javascript 2011-12-19 09:30 170人阅读评论(1) 收藏举报事件源对象 event.srcElement.tagName e ...
15个常用的JavaScript简写技巧
大家好,我是漫步,今天来分享几个JS 常见的简写技巧,助你写出更优秀的代码,喜欢的话,记得关注我并设为星标及时收到文章. 任何编程语言的简写技巧都能够帮助你编写更简练的代码,让你用更少的代码实现你的 ...
常用javascript技巧
常用javascript技巧 //事件源对象 event.srcElement.tagName event.srcElement.type //捕获释放 event.srcElement.setCap ...
7个有用的JavaScript技巧
就像所有其他编程语言一样,JavaScript具有许多技巧来完成简单和困难的任务. 一些技巧已广为人知,而另一些技巧足以使您震惊. 让我们来看看您今天可以开始使用的七个JavaScript技巧! 数组 ...
extjs中滚动条属性_36个工作中常用的JavaScript函数片段「值得收藏」
作者:Eno_Yao 转发链接:https://segmentfault.com/a/1190000022623676 前言如果文章和笔记能带您一丝帮助或者启发,请不要吝啬你的赞和收藏,你的肯定是我 ...
微信小程序-常用API开发技巧学习笔记
常用API开发技巧学习笔记第一章认识微信小程序前后端分离的开发方式小程序的特点小程序对开发者的影响学习小程序需要的基础第二章小程序环境搭建与开发工具介绍小程序开发环境没有小程序号对 ...
你需要知道的20个常用的Python技巧
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达本文转自|机器学习算法那些事 Python的可读性和简单性是其广受 ...
javascript获取系统时间时区_5个JavaScript技巧让你成为更好的开发者
英文 | https://levelup.gitconnected.com/5-javascript-tricks-that-are-good-to-know-78045dea6678翻译 | web ...

常用的JavaScript技巧

常用的JavaScript技巧相关推荐

最新文章

热门文章