JavaScript开发优化技巧
JavaScript开发优化技巧
1、按字符串属性值对对象数组进行排序
可以通过不同的方式来完成。
1）、使用Underscore
_.sortBy(collection, [iteratees=[_.identity]])
创建一个元素数组，并按照在每个Iteratee中运行集合中每个元素的结果，以升序排序。此方法执行稳定的排序，即保留相等元素的原始排序顺序。迭代对象由一个参数（value）调用。
var objs = [ { val1: 'abc',val2: 'a' },{ val1: 'cde', val2: 'b' },{ val1: 'fgh', val2: 'c' }
];
var sortedValues = _.sortBy( objs, 'val1' );
2）、使用ES6排序功能
var data = [{ name: 'abc', value: 21 },{ name: 'cde', value: 37 },{ name: 'ee', value: 45 },{ name: 'ff', value: -12 },{ name: 'ab', value: 13 },{ name: 'cs', value: 37 }
];
// sort by value
data.sort(function (a, b) {return a.value - b.value;
});
3）、使用Lodash
const sortedValues = _.sortBy(data, 'string');
2、如何四舍五入至小数点后两位（仅在必要时）
该parseFloat()函数解析一个参数（如果需要，首先将其转换为字符串）并返回一个浮点数。
该toFixed()方法使用定点表示法格式化数字。
1）、使用ParseFloat
parseFloat("183.456").toFixed(2);
该Math.round()函数返回四舍五入到最接近的整数的数字的值。
2）、使用MathRound
Math.round( num * 100 + Number.EPSILON ) / 100
Number()创建一个新Number值。
3）、将字符串转换为十进制
var string = 10.134.toFixed(2); // => '10.13'
var num = Number(string); // => 10.13
3、如何遍历或枚举JavaScript对象?
每个ECMAScript版本都采用不同的方式枚举对象。
该Object.keys()方法返回给定对象自己的可枚举属性名称的数组，并以与普通循环相同的顺序进行迭代。
该forEach()方法为每个数组元素执行一次提供的功能。
ES5（Object.keys（）和forEach）
var data = { val1: "abc", val2: "cde" };
Object.keys(data).forEach(function(key) {console.log(key, obj[key]);
});
ES6（for … of）：
该for…of语句在创建了一个循环迭代迭代的对象，包括：内置String，Array，阵列状物体（例如，arguments或NodeList）， TypedArray，Map，Set和用户定义的iterables。它使用对象的每个不同属性的值调用要执行的语句来调用自定义迭代挂钩。
for (const key of Object.keys(data)) {console.log(key, obj[key]);
}
ES8 Object.entries()
该Object.entries()方法返回给定对象自己的可枚举字符串键属性[key, value]对的数组，其顺序与for…in循环提供的顺序相同。
Object.entries(data).forEach(([key, value]) => console.log(key, value)
);
我们可以合并for…of，销毁和Object.entries：
for (const [key, value] of Object.entries(data)) {console.log(key, value);
}
4、event.preventDefault（）和return false有什么区别？
如果返回false，则有可能正在执行其他函数，这些函数是专门在click内编写的，而preventDefault则不允许执行任何操作。
$('a').click(function (e) {// logic
// runtime error...navigation happened
return false;
});
preventDefault（）的示例$('a').click(function (e) {e.preventDefault();
// logic
// runtime error, naviagation will not happen
});
5、如何检查JavaScript中的空字符/未定义字符串/空字符串？
if (!!data) {// Some code here
}
或使用类型转换：
if (Boolean(data)) {// Code here
}
两者执行相同的功能。将变量类型转换为布尔值，其中str是变量。
对于null，undefined，0、000，“ ”，false，它将返回false。
对于字符串“ 0”和“空格 ”，它返回true。
6、如何将项目插入到特定索引（JavaScript）的数组中？
在特定索引处附加单个元素
//Append at index 2
array.splice(2, 0,'newData');
//Append at index 5
array[5] = 'newData';
在特定索引处附加多个元素。
//Append at index 2
array.splice(2, 0,'data1', 'data2', 'data3');
7、如何使用JavaScript获取当前URL？
使用windows功能：window.location.href
8、检查密钥是否存在于JavaScript对象中？
在操作符中使用。
let data =“ abc” in array;
使用hasOwnProperty
let result = data.hasOwnProperty("abc")
直接访问元素（括号样式）
let result = data["abc"] === undefined
直接访问元素（对象样式）
let result = array.abc === undefined;
9、如何在JavaScript中合并两个数组并删除重复项？
我们确实在日常生活中使用数组，并且有很多要求，我们需要组合数组以及删除重复项。
以下是实现此目的的一些方法。
1）、使用Lodash
console.log(_.union([10, 4, 5], [134, 26, 19, 10], [6, 1]));
2）、使用Filter和Concat
let a = [56, 43, 3], b = [11, 43, 56, 12]
let c = a.concat(b)
let d = c.filter((val, pos) => c.indexOf(val) === pos)
3）、使用set
[...new Set([...array1 ,...array2])]; // => remove duplication
10、如何检查字符串在JavaScript中是否包含子字符串？
我们可以使用以下两种方法来实现此功能。
1）、includes（）
该includes()方法确定一个数组是否在其条目中包括某个值，是返回值true还是false适当的值。
const val1 = "atitpatel";
const val2 = "patel";
console.log(string.includes(val2));
2）、indexof（）
在indexOf()该方法返回在该给定元素可以在阵列中可以发现，或-1，如果它不存在的第一个索引。
var str = "atitpatel";
var substr = "patel";
console.log(str.indexOf(substr) !== -1);
11、如何替换所有出现的字符串
1）、我们可以使用ES6来解决这个问题。
str = str.replace(/test/g, '');
2）、我们可以使用正则表达式。
let find = 'ab';
let re = new RegExp(find, '');
let str = find.replace(re, 'cd');
console.log(str);
12、如何正确克隆JavaScript对象
1）、使用ES6
var val1 = {data: "value"};
var val2= Object.assign({}, val1);
2）、如果要浅拷贝
Object.assign({}, data)
3）、进行深复制
JSON.parse(JSON.stringify(data))
13、！！不是JavaScript中的运算符？
!! 将其右侧的值转换为其等效的布尔值。
!!false === false
!!true === true
!!0 === false
!!parseInt("foo") === false // NaN is falsy
!!1 === true
!!-1 === true // -1 is truthy
!!(1/0) === true // Infinity is truthy
!!"" === false // empty string is falsy
!!"foo" === true // non-empty string is truthy
!!"false" === true // ...even if it contains a falsy value
!!window.foo === false // undefined is falsy
!!null === false // null is falsy
!!{} === true // an (empty) object is truthy
!![] === true // an (empty) array is truthy;
14、如何在JavaScript中循环遍历数组？
我们有几种选择：
1）、顺序for循环：
var array = ["a","b"];
var arrayLength = array.length;
for (var i = 0; i < arrayLength; i++) {console.log("value",array[i]);
}
2）、Array.prototype.forEach
const data = ["a", "b", "c"];
data.forEach(function (item, index) {console.log(item, index);
});
3）、 ES6for-of声明
let data = ['a', 'b', 'c'];
for (const a of data){console.log(a);
}
15、如何使用JavaScript复制到剪贴板
通过执行以下操作，我们可以提示用户单击并输入：
function copy(text) {window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
现在，剪贴板复制操作为SAFE，因为用户单击了提示。
<button id="data" onclick="copy(document.getElementById('data').innerHTML)">Copy here</button>
<script>function copy(text) {window.prompt("To Copy Please do this: Ctrl+C, Enter", text);}
</script>
16、如何测试一个空的JavaScript对象
有几种方法可以实现此功能。
1）、jQuery的：
jQuery.isEmptyObject({}); // true
2）、 lodash：
_.isEmpty({}); // true
3）、Underscore
_.isEmpty({}); // true
17、如何在JavaScript中使字符串的首字母大写
我们可以更新具有text-transform属性的CSS。
1）、在CSS中：
p:first {text-transform:capitalize;
}2）、使用函数，我们可以调用toUpperCase（）方法。
function makeUpperCase(val)
{return val && val[0].toUpperCase() + val.slice(1);
}
18、如何使用JavaScript更改元素的类？
有很多需求，我们需要根据条件更改某些颜色或CSS。
如何在JavaScript中完成？
更改元素的所有类：
要将所有现有类替换为一个或多个新类，请设置className属性：
document.getElementById("test").className = "newclass";
要将其他类添加到元素：
要将类添加到元素中而不删除或影响现有值，请添加空格和新的类名称，如下所示：
document.getElementById("test").className += " newClass";
要从元素中删除类：
要在元素中删除单个类而又不影响其他潜在类，则需要简单的正则表达式替换：
document.getElementById("test").className =document.getElementById("test").className.replace( /(?:^|\s)newClass(?!\S)/g , '' )
19、是否可以将CSS应用于一半的字符？
下面是使CSS适用于半角字符的示例。
h1 {display: inline-block;margin: 0; /* for demo snippet */line-height: 1em; /* for demo snippet */font-family: helvetica, arial, sans-serif;font-weight: bold;font-size: 300px;background: linear-gradient(to right, #7db9e8 50%,#1e5799 50%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}
<h1>XYZ</h1>
20、如何在数组中追加内容？
在较早的JavaScript版本中，这是通过使用apply方法完成的。
该apply()方法调用具有给定this值的函数，并arguments以数组（或类似数组的对象）的形式提供。
let array1 = [33, 45, 5];
let array2 = [100, 2];
Array.prototype.push.apply(array2, array1);
console.log(array2); // [100, 2, 33, 45, 5]
使用ES6，可以使用扩展运算符完成此操作。
let array1 = [11, 42, 53];
let array2 = [1, 2];
array2.push(...array1);
console.log(array2); // [11, 2, 3, 42, 53]
21、如何检查对象是否为数组？
当我们想检查对象是否为数组时，可以遵循以下选项。
let arr = [10,20,30,40,50];
Javascript（新旧浏览器）：function isArray(arr) {return arr.constructor.toString().indexOf("Array") > -1;
}
function isArray(arr) {return arr instanceof Array;
}
function isArray(arr) {return Object.prototype.toString.call(arr) === '[object Array]';
}
然后这样称呼它：
isArray(arr);
JavaScript（IE9 +，Ch5 +，FF4 +，Saf5 +，Opera10.5 +）Array.isArray（arr）;
下划线和Lodash：
_.isArray（arr）;
22、如何检测未定义的对象属性？
当我们想检查对象的特定属性是否未定义时，我们可以直接使用if条件和===运算符进行检查。
if(data.prop === undefined) {alert("it is: `undefined`");
}
要检查对象是否实际上没有这样的属性，并尝试访问它时，默认情况下将返回undefined：
if(!o.hasOwnProperty('prop')) {alert("not exisiting);
}
检查与标识符关联的值是否为特殊值undefined，或者尚未声明该标识符。
if(typeof variable === 'undefined') {alert('variable is `undefined`, or it is not declared');
}
23、如何在JavaScript中将字符串转换为布尔值？
有几种方法可以在JavaScript中将字符串转换为布尔值。
使用测试方法
var stringValue = "true";
var boolValue = (/true/i).test(stringValue) //returns true
使用比较运算符
var val = "true";
var boolValue = (val =="true"); //returns true
使用JSON.parse
var val = "true";
var boolValue = JSON.parse(val); //returns true
使用三元运算符
var val = “true”;
var boolValue = val.toLowerCase() == ‘true’ ? true : false; //returns true
使用 switch-case
var val = "true";
var boolValue = getBoolean(val); //returns true
function getBoolean(value){switch(value){case true:case "true":case 1:case "1":case "on":case "yes":return true;default: return false;}
}
24、如何获取JavaScript中的查询字符串值？
当我们处理URL参数并想从URL中提取信息时，这是最常见的用法。
下面是一些我们可以从中获取字符串值的方法。
ES2015（ES6）：创建一种实现此功能的方法
getQueryStringParams = query => {return query? (/^[?#]/.test(query) ? query.slice(1) : query).split('&').reduce((params, param) => {let [key, value] = param.split('=');params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';return params;}, {}): {}
};
URLSearchParams从位置使用内置方法。
你可以在location以下位置使用它：
let params = new URLSearchParams(location.search);
let params = (new URL(location)).searchParams;
let url = new URL('https://abc.com?val1=1&val2=2');
let params = new URLSearchParams(url.search);
我们还可以使用.searchParamsURL对象的简写属性来获取参数，如下所示：
let params = new URL('https://abc.com?val1=1&val2=2').searchParams;
params.get('val1'); // "1"
params.get('val2'); // "2"
25、如何获取JavaScript对象的长度？
在大多数情况下，我们确实检查数组的长度，但是，如果要检查对象的长度怎么办？以下两种方法是获取对象长度的最佳方法。
1、使用ES6功能
let size = Object.keys(data).length;
2、使用下划线
_.size({val1 : 1, val2 : 2, val3 : 3});
26、如何反转包含复杂表情符号的字符串？
当我们进行更多编程或遇到一些编码挑战时，这是其中最常见的问题。
我们可以使用lodash功能来解决这一挑战。
function reverse(txt) { return _.split(txt, '').reverse().join(''); }
const data = 'abc abc
JavaScript开发优化技巧相关推荐
- 10个JavaScript开发小技巧
"梦想天空"(网名)曾发表一篇博文,为我们介绍了10个JavaScript开发小技巧,现转载于此,供大家学习: 尽管我使用Javascript来做开发有很多年了,但它常有一些让我很 ...
- 项目开发优化技巧总结
一.RecycleView 优化 RecycleView在开发时可以考虑以下优化的方案: 1. 数据处理和视图加载分离 a. 数据的处理逻辑尽可能放在异步处理,onBindViewHolder方法只做 ...
- JavaScript开发的技巧
1. 使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型.但===和!==不会,它们会同时比较值和数据类型,这也使得它们要比==和!=快. 1 if("1" ...
- javascript开发技巧训练_学好这些小技巧，帮你写出更好地JavaScript
近几年来随着前端发展的日益成熟,JavaScript的日渐受到重视,以及Node.js方案变得越来越可行,我们对JavaScript程序员的需求也正在持续增长. 图片源自网络,仅做配文展示 从需求比例 ...
- 好程序员Web前端教程分享JavaScript开发技巧
好程序员Web前端教程分享JavaScript开发技巧,相信知道Web前端的小伙伴都熟悉,Javascript的很多扩展的特性是的它变得更加的犀利,同时也给予程序员机会创建更漂亮并且更让用户喜欢的网站 ...
- JavaScript 开发的40个经典技巧
JavaScript 开发的40个经典技巧 javascript/jquery 浏览数:1,265 2017-5-4 首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话,默认会作为一个新 ...
- web前端开发常用的优化技巧汇总
减少HTTP请求的次数或者减少请求数据的大小 页面中每发一次HTTP请求,都需要完成请求+响应这个完整的HTTP事务,会消耗一些时间,也有可能导致HTTP链接通道的堵塞,为了提高页面的加载速度和运行的 ...
- JavaScript 开发人员需要知道的简写技巧
本文来源于多年的 JavaScript 编码技术经验,适合所有正在使用 JavaScript 编程的开发人员阅读. 本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作. 文 ...
- [译] 优秀 JavaScript 开发人员应掌握的 9 个技巧
Photo by Andrew Worley on Unsplash 原文链接:9 Tricks for Kickass JavaScript Developers in 2019 原文作者:Luka ...
最新文章
- mysql查看某个数据库下的所有视图
- JUC并发编程一 并发架构
- VTK：Filtering之Delaunay2D
- JUC原子类-类成员(五)
- ACDSee Photo Manager 12 中文绿色版
- java动态同步_java并发基础-Synchronized
- 两种方法求最大公约数和最小公倍数
- 《数值分析》学习笔记 ·001——计算方法的任务和特点
- django mysql开发_基于django框架web项目实战开发四 django+mysql实现增删查改功能
- 编译原理论文_我的第一篇论文
- 用Welford算法实现LN的方差更新
- python plot坐标轴_修改python plot折线图的坐标轴刻度方法
- java jdbc 链接pg_使用PostgreSQL JDBC连接池
- 基于VHDL的vivado2017.4使用教程
- 28款数据恢复软件分类介绍
- #学习笔记 使用c语言来制作一个计算器
- 400类商家服务电话点击电话号码直接拨号
- 高等代数 线性映射(第9章)1 概念,运算,核与象
- 日撸代码300行：第二天
- matlab分析具体问题论文,关于Matlab论文范文写作 Matlab在化探异常解释评价中应用相关论文写作资料...
热门文章