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单选,全选问题,自动计算总价问题, ...
随机推荐
- 构造方法与构造块的执行顺序(区别于static)
小面试题:在类的实例化时,会调用类的构造块(类中的构造块)和构造方法,无论构造方法在前还是在后,都先执行构造块 class Person{ public Person(){ System.out.pr ...
- ProgressBar 进度条设置百分比显示
rawable/progressbar <layer-list xmlns:android="http://schemas.android.com/apk/res/android&qu ...
- std::vector<std::vector<> >
上次看到这个有点晕了,其实这个vector保存的是std::vector<> #include <vector> #include <iostream> using ...
- 1119 机器人走方格 V2(组合)
1119 机器人走方格 V2 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 M * N的方格,一个机器人从左上走到右下,只能向右或向下走.有多少种不同的走法?由于 ...
- SpringBoot自带热加载开发工具
SpringBoot自带热加载开发工具 maven配置: <!-- SpringBoot自带热加载开发工具 --> <dependency> <groupId>or ...
- 使用EasyNVR无插件流媒体服务器接口和EasyPlayer.js播放器插件实现web网页H5播放无插件
1.背景需求 很多客户在使用EasyNVR无插件流媒体服务器时,不喜欢产品化的界面,有时可能满足不了日常观看使用的需求.因此软件提供丰富的HTTP接口,供第三方平台调用集成.但是有时客户这边可能没有专 ...
- ssh常用
目录操作:rm -rf mydir /*删除mydir目录*/mkdir dirname /*创建名为dirname的目录*/cd mydir /*进入mydir目录*/cd – /*回上一级目录*/ ...
- log日志框架和LocationAwareLogger问题
遇到了同样的问题, 我的解决办法是在pom.xml中增加如下配置,去除对于jcl-over-slf4j.jar的依赖. <exclusions> <ex ...
- MySQL中Index Condition Pushdown(ICP)优化
在MySQL 5.6开始支持的一种根据索引进行查询的优化方式.之前的MySQL数据库版本不支持ICP,当进行索引查询是,首先根据索引来查找记录,然后在根据WHERE条件来过滤记录.在支持ICP后,My ...
- B-Tree vs LSM-tree
什么是B-树 一.已排序文件的查找时间 对一个有N笔记录的已排序表进行二叉查找,可以在O(log2N)比较级完成.如果表有1,000,000笔记录,那么定位其中一笔记录,将在20 ( log21,00 ...