CodeWars上的JavaScript技巧积累
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
The slice()
method returns a shallow copy of a portion of an array into a new array object selected from begin
to end
(end
not included). The original array will not be modified.
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"] console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"] console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
对字符串进行操作的时候,slice(-1)是取最后一位字符。
https://www.codewars.com/kata/56f695399400f5d9ef000af5/solutions/javascript
const correctTail = (body, tail) => body.slice(-1) === tail
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
The map()
method creates a new array with the results of calling a provided function on every element in the calling array.
var array1 = [1, 4, 9, 16]; // pass a function to map
const map1 = array1.map(x => x * 2); console.log(map1);
// expected output: Array [2, 8, 18, 32]
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
The reduce()
method executes a reducer function (that you provide) on each member of the array resulting in a single output value.
在使用这个的时候,需要注意的是,必须先自己封装一个reducer函数,然后传递给reduce方法
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10 // 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
The reducer function takes four arguments:
- Accumulator (acc)
- Current Value (cur)
- Current Index (idx)
- Source Array (src)
Your reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array and ultimately becomes the final, single resulting value.
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
The reverse()
method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.
var array1 = ['one', 'two', 'three'];
console.log('array1: ', array1);
// expected output: Array ['one', 'two', 'three'] var reversed = array1.reverse();
console.log('reversed: ', reversed);
// expected output: Array ['three', 'two', 'one'] /* Careful: reverse is destructive. It also changes
the original array */
console.log('array1: ', array1);
// expected output: Array ['three', 'two', 'one']
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
The replace()
method returns a new string with some or all matches of a pattern
replaced by a replacement
. The pattern
can be a string or a RegExp
, and the replacement
can be a string or a function to be called for each match. If pattern
is a string, only the first occurrence will be replaced.
The original string is left unchanged.
https://stackoverflow.com/questions/1206911/why-do-i-need-to-add-g-when-using-string-replace-in-javascript
答案1
It isn't required, but by default string.replace
in JavaScript will only replace the first matching value it finds. Adding the /g
will mean that all of the matching values are replaced.
答案2
The "g" that you are talking about at the end of your regular expression is called a "modifier". The "g" represents the "global modifier". This means that your replace will replace all copies of the matched string with the replacement string you provide.
A list of useful modifiers:
- g - Global replace. Replace all instances of the matched string in the provided text.
- i - Case insensitive replace. Replace all instances of the matched string, ignoring differences in case.
- m - Multi-line replace. The regular expression should be tested for matches over multiple lines.
You can combine modifiers, such as g and i together, to get a global case insensitive search.
Examples:
//Replace the first lowercase t we find with X
'This is sparta!'.replace(/t/,'X');
//result: 'This is sparXa!'
//Replace the first letter t (upper or lower) with X
'This is sparta!'.replace(/t/i, 'X');
//result: 'Xhis is sparta!'
//Replace all the Ts in the text (upper or lower) with X
'This is sparta!'.replace(/t/gi, 'X' );
//result: 'Xhis is sparXa!'
For more information see the JavaScript RegExp Object Reference at the w3schools.
three dots
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
https://stackoverflow.com/questions/31048953/what-do-these-three-dots-in-react-do
This is a feature of es6 which is used in React as well. Look at the below example:
function Sum(x,y,z) {
return x + y + z;
}
console.log(Sum(1,2,3)); //6
This way is fine if we have maximum 3 parameters but what if we need to add for example 110 parameters. Should we define them all and add them one by one?! Of course there is an easier way to do which is called SPREAD. Instead of passing all those parameters you write :
function (...numbers){}
We have no idea how many parameters we have but we know there are heaps of those. Based on es6 we can rewrite the above function as below and use the spread and mapping between them to make it as easy as a piece of cake:
let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45
get ascii code from character
https://stackoverflow.com/questions/94037/convert-character-to-ascii-code-in-javascript
String.prototype.charCodeAt()
can convert string characters to ASCII numbers. For example:
"ABC".charCodeAt(0) // returns 65
For opposite use String.fromCharCode(10)
that convert numbers to equal ASCII character. This function can accept multiple numbers and join all the characters then return the string. Example:
String.fromCharCode(65,66,67); // returns 'ABC'
function like range in C#
https://www.codewars.com/kata/reversed-sequence/train/javascript
https://stackoverflow.com/questions/19544452/remove-last-item-from-array
const reverseSeq = n => {
var temp = [...Array(n + 1).keys()].reverse();
temp.pop();
return temp;
};
Javascript arrays: remove all elements contained in another array
Use the Array.filter()
method:
myArray = myArray.filter( function( el ) {
return toRemove.indexOf( el ) < 0;
} );
Small improvement, as browser support for Array.includes()
has increased:
myArray = myArray.filter( function( el ) {
return !toRemove.includes( el );
} );
Next adaption using arrow functions:
myArray = myArray.filter( ( el ) => !toRemove.includes( el ) );
对char表示的数字做加减运算的时候
直接在变量前面放1个+号,就可以
https://www.codewars.com/kata/57eaeb9578748ff92a000009/solutions/javascript
Given an array of integers as strings and numbers, return the sum of the array values as if all were numbers.
Return your answer as a number.
function sumMix(x){ return x.map(a => +a).reduce((a, b) => a + b); }
https://stackoverflow.com/questions/15129137/what-does-mean-in-javascript
r = +_;
+
tries to cast whatever_
is to a number._
is only a variable name (not an operator), it could bea
,foo
etc.
Example:
+"1"
cast "1" to pure number 1.
var _ = "1";
var r = +_;
r
is now 1
, not "1"
.
Moreover, according to the MDN page on Arithmetic Operators:
The unary plus operator precedes its operand and evaluates to its operand but attempts to converts it into a number, if it isn't already. [...] It can convert string representations of integers and floats, as well as the non-string values
true
,false
, andnull
. Integers in both decimal and hexadecimal ("0x"
-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate toNaN
.
It is also noted that
unary一元 plus is the fastest and preferred way of converting something into a number
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
var sentence = 'The quick brown fox jumps over the lazy dog.'; var word = 'fox'; console.log(`The word "${word}" ${sentence.includes(word)? 'is' : 'is not'} in the sentence`);
// expected output: "The word "fox" is in the sentence"
函数内部检查,被调用的时候,外部是否进行了传参
You should actually check typeof argument2 === "undefined", in case someone defines "undefined".
https://stackoverflow.com/questions/11461428/check-if-argument-is-passed-to-a-java-script-function
null
is a specific value. undefined
is what it will be if it is not passed.
让一个单词的首字母大写
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
usage of Date
https://www.codewars.com/kata/is-the-date-today/train/javascript
function isToday(date) {
var today = new Date();
var date1 = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
var date2 = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate()));
return date1.getTime() === date2.getTime();
}
其他人更简单的解法
function isToday(date) {
return new Date().toDateString() === date.toDateString();
}
判断参数是否为数字
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
没有做完的
//https://www.codewars.com/kata/closest-elevator/train/javascript
function elevator(left, right, call) {
console.log(`${left},${right},${call}`);
var middle = (left + right) / 2;
var delta1 = 0;
var delta2 = 0;
if (left <= right) {
delta1 = Math.abs(middle - left);
delta2 = Math.abs(right - middle);
} else {
delta1 = Math.abs(middle - right);
delta2 = Math.abs(left - middle);
}
var result = 'left';
if (left === right) {
result = 'right';
} else {
if (call <= left) {
result = 'left';
} else if (call >= right) {
result = 'right';
} else {
if (delta2 >= delta1) {
result = 'right';
}
}
}
return result;
}
CodeWars上的JavaScript技巧积累的更多相关文章
- ( 译、持续更新 ) JavaScript 上分小技巧(四)
后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...
- ( 译、持续更新 ) JavaScript 上分小技巧(三)
最近家里杂事较多,自学时间实在少的可怜,所以都在空闲时间看看老外写的内容,学习之外顺便翻译分享~等学习的时间充足些再写写自己的一些学习内容和知识点分析(最近有在接触的:复习(C#,SQL).(学习)T ...
- ( 译、持续更新 ) JavaScript 上分小技巧(二)
考虑到文章过长,不便于阅读,这里分出第二篇,如有后续,每15个知识点分为一篇... 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第三篇地址:( 译.持续更新 ) Java ...
- ( 译、持续更新 ) JavaScript 上分小技巧(一)
感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...
- Javascript技巧
Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如下: ...
- (译文)12个简单(但强大)的JavaScript技巧(二)
原文链接: 12 Simple (Yet Powerful) JavaScript Tips 其他链接: (译文)12个简单(但强大)的JavaScript技巧(一) 强大的立即调用函数表达式 (什么 ...
- 21个值得收藏的Javascript技巧
1 Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如 ...
- Webbrowser控件史上最强技巧全集
原文:Webbrowser控件史上最强技巧全集 Webbrowser控件史上最强技巧全集 VB调用webbrowser技巧集 1.获得浏览器信息: Private Sub Command1_Click ...
- javascript知识点积累
8年javascript知识点积累 08年毕业就开始接触javascript,当时是做asp.net发现很多功能用asp.net控件解决不了,比如checkbox单选,全选问题,自动计算总价问题, ...
随机推荐
- 编译Hadoop1.1.2eclipse插件并测试
(一).building hadoop 1.编辑{HADOOP_HOME}/build.xml (1).对31行的hadoop版本做修改 <property name="version ...
- selenium的元素定位-iframe
# name = top-frame # 如果iframe有name属性 或 id属性则 可以直接在frame种填写 # 如果没有name和id属性 frame() 可以接受elementOBj el ...
- java中使用MD5进行加密
java中使用MD5进行加密 在各种应用系统的开发中,经常需要存储用户信息,很多地方都要存储用户密码,而将用户密码直接存储在服务器上显然是不安全的,本文简要介绍工作中常用的 MD5加密算法,希 ...
- 巨蟒django之CRM2 展示客户列表&&分页
1.展示客户列表 点击画红线中的views,进入下列界面 路径的查找顺序:应该是先查找外层的templates里边的html,然后查找app里边的templates 另一个会按照app的顺序进行寻找, ...
- Oracle DBA的学习(笔记)
1.软件任务分组:系统分析师.系统设计师.程序员.测试人员.开发dba.系统架构师.实施人员. 2.常用设计图:活动图.用例图.类图.序列图. 2010-9-15(dba学习) 1.1 Oracle产 ...
- IBM WebSphere cannot start in RAD 9.1
Have solved the problem. Solutions follows Step 1: double click on "WebSphere Application Serve ...
- Model的save方法的使用
在使用类方法创建对象的时候发生save()总提示缺少self参数的错误: class BookInfo(models.Model): #创建书本信息类,继承models.Model booktitle ...
- jdbc PreparedStatement 防止sql注入的关键代码片段
mysql-connector-java-5.1.38.jar PreparedStatement 的 setString(int parameterIndex, String x) 方法 for ( ...
- MySQL中InnoDB脏页刷新机制Checkpoint
我们知道InnoDB采用Write Ahead Log策略来防止宕机数据丢失,即事务提交时,先写重做日志,再修改内存数据页,这样就产生了脏页.既然有重做日志保证数据持久性,查询时也可以直接从缓冲池页中 ...
- Android系统移植与调试之------->如何修改Android设备存储盘符名称与Android设备的型号
一.修改Android设备存储盘符名称 (注:TBDG1073为我的项目名称) 1.修改device/other/TBDG1073/system.prop 文件 2.修改ro.media.patiti ...