Javascript实用方法

这篇我主要记录一些在工作中常用的、实用的方法。

String

trim

字符串方法中的trim主要用来去空格使用,很多时候,在后台做参数处理的时候,我们都会使用该方法,比如在获取用户输入的账户时

var a = String(‘ 1234         ‘);
var b = "hello world";

console.log(b.trim()); //hello world
console.log(a.trim()); //1234
console.log(a); // 1234

以上,可以看出,trim方法去掉的是两头的空格,对中间的空格并不会产生影响。值得注意的是,trim方法,返回的是一个新的字符串,对原来的变量没有影响。

slice

slice方法用于切割字符串,用到的地方挺多的,比如在处理文件流的时候,我们就可以用slice来切割,当然,大多时候,也就仅仅是对字符串做一个简单处理

var b = "hello world, I like you";

console.log(b.slice(13)); //I like you
console.log(b.slice(15,20)); //like
console.log(b.slice(15,-4)); //like
console.log(b); //hello world, I like you

slice方法,支持传入两个参数,开始位置与结束位置,传入负数时,代表此次计数从末尾开始。

split

split方法用于将字符串分组存放,是常用的方法之一。能够让我们对分组好的字符串进行分组操作

var b = "hello world, I like you, and you?";

console.log(b.split()); //[ ‘hello world, I like you, and you?‘ ]
console.log(b.split(‘‘)); //["h","e","l","l","o"," ","w","o","r","l","d",","," ","I",
" ","l","i","k","e"," ","y","o","u",","," ","a","n","d"," ","y","o","u","?"]
console.log(b.split(‘ ‘)); //[ ‘hello‘, ‘world,‘, ‘I‘, ‘like‘, ‘you,‘, ‘and‘, ‘you?‘ ]
console.log(b.split(‘ ‘,3)); //[ ‘hello‘, ‘world,‘, ‘I‘ ]

以空字符分组的时候,会将字符串按每一个字符来分组,这点很实用,可以按字符分组,想想都会觉得程序的世界也是鸟语花香啊~

substr、substring

都是用来截取字符串的,substr方法,支持传入两个参数,一个是开始位置,一个是截取长度,而substring的两个参数一个是开始位置,一个是结束位置

var b = "hello world, I like you, and you?";

console.log(b.substr()); //hello world, I like you, and you?
console.log(b.substr(13,10)); //I like you
console.log(b.substring(15,-9)); //hello world, I
console.log(b.substring(15,-1)); //hello world, I

由此可见,substr、substring和slice这三者来说,各有所长(╯°O°)╯┻━┻
你能体会么~不能体会的就留个言咯

Array

filter

filter能够按一定条件筛选出满足条件的数据,比如在后台处理mongdb的id时,前台传过来的id必须得满足id.trim().length === 24

var b = [ ‘hello‘, ‘world,‘, ‘I‘, ‘like‘, ‘you,‘, ‘and‘, ‘you?‘ ];

console.log(b.filter(function (item){
    return item.length < 5;
}));  //[ ‘I‘, ‘like‘, ‘you,‘, ‘and‘, ‘you?‘ ]

concat

concat方法能够将多个数组组合成一个数组,这在异步处理数据最后进行组装的时候特别有用

var b = [ ‘hello‘, ‘world,‘, ‘I‘, ‘like‘];
var a = [ ‘you,‘, ‘and‘, ‘you?‘ ];
var c = [[1],[2]];

console.log(b.concat(a)); //[ ‘hello‘, ‘world,‘, ‘I‘, ‘like‘, ‘you,‘, ‘and‘, ‘you?‘ ]
console.log(b.concat(a).concat(c)); //[ ‘hello‘, ‘world,‘, ‘I‘, ‘like‘, ‘you,‘, ‘and‘, ‘you?‘, [ 1 ], [ 2 ] ]

很多时候,在最后处理数据的时候,这种数组中嵌套了数组的情况是比较烦的,不过很简单,underscore有方法能够轻松解决它,你知道吗?(?•? ? •??)

forEach

forEach应该是用的最多的方法了吧,它的作用就是遍历数组中的每一个值,然后你就可以对每一个值进行操作了

var b = [‘hello‘, ‘world,‘, ‘I‘, ‘like‘, ‘you,‘, ‘and‘, ‘you?‘];

b.forEach(function (ele, index) {
    ele = ele + 1;
});
console.log(b); //[ ‘hello‘, ‘world,‘, ‘I‘, ‘like‘, ‘you,‘, ‘and‘, ‘you?‘ ]

关于forEach,更准确的说对于Javascript中的对象,我一直觉得自己的理解已经够解决遇到的一般问题了,但是这个forEach还是给我带来了难题。比如上面这个,我对ele进行改变之后,b数组并没有按照我想象中的改变,结果是一成不变。而在在我的经历中,forEach中对遍历的值进行改变,它最终的结果使能够被改变的。因此,在这个变与不变之间,我没有找到一条清晰的分界线…

map

说了forEach怎么可以没有map,同是遍历数组中的每一个值,map能够将对这些值的操作进行返回为一个新的数组

var b = [‘hello‘, ‘world,‘, ‘I‘, ‘like‘, ‘you,‘, ‘and‘, ‘you?‘];

console.log(b.map(function (ele){
    ele = ele + 1;
    return ele;
})); //[ ‘hello1‘, ‘world,1‘, ‘I1‘, ‘like1‘, ‘you,1‘, ‘and1‘, ‘you?1‘ ]

reduce

再说说这个reduce吧,reduce方法遍历数组的每一个值,操作自己定,最后返回一个做了这些累积操作的值,常用来算和吧,实用的呢,它能够产生比filter更强力的功效,这个自己体会吧~

var summary = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(summary.reduce(function (pre, cur) {
    pre += cur;
    return pre;
}, 0)); //45

今天就先写这么多吧,细水长流~

你可以很厉害,也可以很坚强,baby~

如想了解更多,请移步我的博客

时间: 2024-10-24 05:27:06

Javascript实用方法的相关文章

Javascript实用方法二

承接上一篇, Object keys object的keys方法能够获取一个给定对象的所有键(key/属性名)并以数组的形式返回.这个方法可以用于键的筛选.匹配等. var basket = { strawberry: 12, banana: 20, apple: 30, juice: 20 }; console.log(Object.keys(basket)); //[ 'strawberry', 'banana', 'apple', 'juice' ] create create方法用于创建

JavaScript 实用方法

1.按时间显示问候语 2.强制光标停留位置 3.保存页面文本 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <html><head> 3 <title>JS常用方法</title> 4 <meta name="Generator" content="EditPlus"> 5 <met

Swiper的简单实用方法

最近项目中有用到一个非常强大的组件idangerous.swiper.js的组件,这个组件能够实现幻灯片的播放效果,而且有各种3D效果,大家可以去试一下,效果很不错的说! 这是这个项目的api文档:http://www.idangero.us/sliders/swiper/api.php GitHub上的地址:https://github.com/nolimits4web/Swiper 具体使用方法(copy的Swiper官网的代码): 首先在页面中引入css和js文件: <link rel=&qu

《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 <JavaScript实用效果整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201717.html 文章 国外30个使用很酷的JS滑动和滚动效果的网站 速度超快的菜单切换效果 使用Ctrl+Enter提交表单 jQuery Easing 动画效果扩展 超酷的固定菜单页面滚动效果 幸运大转盘-jQuery+PH

JavaScript 字符串方法

字符方法<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>字符方法</title> </head> <body> <script type="text/javascript"> /* charAt方法和charCodeAt方法都接收一个参数,基于0的字

Firefox下javascript调试方法

前面博文谈了一下IE浏览器下javascript的调试方法,今天没事干就把火狐浏览器(Firefox)下的javascript调试方法也看了一下,记录在此,希望对大家有所帮助. 我们这次使用的代码页面为document获取对象博文中的按name属性获取对象的代码. <html> <head> <title>getElementsByName</title> </head> <body> <form id="form1&

javascript sort方法容易犯错的地方

sort方法用来对数组排序非常方便.但是sort(func)这个func参数的构造却很容易混淆. 这个func的作用是,把排序结果里任意相邻两项a,b放入到func里来执行,如果返回值都为-1,则为正序排列,如返回值都为1,则为逆序排列. 例如,[1,3,65,97,45,6,2] 如果要正序,就应该写成[1,3,65,97,45,6,2].sort(function(a, b){return a - b;}), 如果要逆序:[1,3,65,97,45,6,2].sort(function(a,

JavaScript 字符串方法(二)

字符串大小写转换方法<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>大小写转换</title> </head> <body> <script type="text/javascript"> var str="HELLO world"

JavaScript数组方法对比(深度学习数组)

JavaScript数组方法对比 众所周知,JavaScript提供了许多对数组进行改变的方法,但是有些会对原数组进行影响,有些不会.下边就列举出来. 一.新增 影响原数组 array.push()  //向数组的末尾添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]; array.push(6); // [1,2,3,4,5,6]; array.unshift() //向数组的开头添加一个或更多元素,并返回新的长度. var array =[1,2,3,4,5]