数组的方法很多,ECMScript5又提供了好几种方法。有空把之前的云上的笔记整理了一下,方便自己以后查找使用。

一、ECMScript 3的Array.prototype中定义的方法

1、join()
定义:将数组中所有的元素都转化为字符串拼接在一起,返回最后生成的字符串。
注意:不改变原数组

var a = [1,2,3];
console.log(a.join()); //1,2,3 默认使用逗号分隔
console.log(a.join("")); //123 转化为字符串的常用方法
console.log(a.join("-")); //1-2-3 自定义分隔符
console.log(a); //[1,2,3] 不修改原素组
var b = new Array(5);
console.log(b.join('*')); //**** 4个连字号组成字符串

2、reverse()
定义:将数组中的元素颠倒顺序,返回逆序的字符串。
注意:原数组被改变

var a2=[1,2,3];
console.log(a2.reverse()); //[3,2,1]
console.log(a2); //[3,2,1]原数组被修改
console.log(a2.reverse().join()); //1,2,3 因为原数组又被修改了

  

3、sort()
定义:将数组中的元素排序后返回排序后的数组、
注意:数组以字母表顺序排。
原数组被改变
可以自定义按非字母的顺序排序,只要个sort()传入一个比较的匿名的比较函数可以了。
该比较函数决定了两个参数的在排好数组中的先后顺序,加入第一个参数在前,返回小于0的值,反之。相等为0。

    var a3=['c','b',undefined,'a','z'];
console.log(a3.sort()); //["a", "b", "c", "z", undefined],undefined被排到最后
console.log(a3); //["a", "b", "c", "z", undefined]修改原数组 //自定义排序规则
var a4 = [33,4,1111,2222];
//console.log(a4.sort()); //[1111, 2222, 33, 4] 默认排序
a4.sort(function(a,b){
return a-b;
});
console.log(a4); //[4, 33, 1111, 2222]

  

4、concat()
定义:创建并返回一个新数组。新数组由原数组和concat()里面的参数组成
注意:不改变原数组
只能扁平化一维数组,高维不行(不会递归扁平化数组),高维数组(扁平化)降维可以看。扁平化多维数组

    var a5 = [1,2,3];
console.log(a5.concat(4)); //[1,2,3,4]
console.log(a5); //[1,2,3] //原数组不改变
console.log(a5.concat([4,5])); //[1, 2, 3, 4, 5]
console.log(a5.concat([4,5,[6,7]])); //[1, 2, 3, 4, 5,[6,7]] //只能扁平化一维

  

5、slice()
定义:返回指定数组的片段或者子数组,两个参数分别指是片段的开始和结束位置(不包含结束的位置)。
注意:不改变原数组
如果没有参数,相当于生成一原数组的副本
生成的新数组不包含结束位置的元素
说明:字符串也可以使用这个方法 ,如"[Object Array]".slice(8,-1); =>Array

   var a6 = [1,2,3,4,5];
console.log(a6.slice(1,3)); //[2,3] //索引从1到3但包括3的子数组
console.log(a6); //[1,2,3,4,5] //原数组不改变
console.log(a6.slice(1)); //[2,3,4,5] 只有一个参数,则从该参数位置到末尾
console.log(a6.slice(1,-1)); //[2,3,4] 参数为-1只向最后一个元素,但不包括它
console.log(a6.slice(-2,-1)) //[4] 从倒数第2个数到倒数第一个数,但不包括倒数第一个数

  

6、splice()
定义:在数组中输入和删除元素的通用方法。返回的是由删除元素组成的新数组,没有删就返回空数组[]
前两个参数是指定需要删除的元素,后面的任意个数的参数是需要插入到原数组的元素
注意:原数组被改变

   var a7 = [1,2,3,4,5];
b7 = a7.splice(2);
console.log(b7); //[3,4,5] 返回原数组从索引为2的元素到结尾被删除的部分
console.log(a7); //[1,2] 原数组是被修改之后的数组 b7 = a7.splice(1,2);
b7 = a7.splice(1,1); // 从索引为1的元素开始删除1个元素
console.log(b7); //[2,3] 从索引为1的元素开始删除2个元素,也就是2和3
console.log(a7); //[1,4,5] 原数组是被删除之后剩余的数组 var b7 = a7.splice(1,0,100);
console.log(b7); //[] 因为没有删除元素,所有返回的是一个空数组
console.log(a7); //[1, 100, 2, 3, 4, 5] 从索引为1的元素开始,删除0个元素,之后原索引为1的位置插入新元素

  

7、push()和pop()
定义:push在数组的末尾添加一个或者多个元素,返回新数组的长度。所以不能链式操作
pop删除数组的最后一个元素,返回它删除的值元素

组合使用push()和pop()可以实现先进后出的栈

var a8 = [1,2,3];
var b8 = a8.push(4,5);
console.log(b8); //5 返回的是新数组的长度。
console.log(a8); //[1,2,3,4,5] 直接原数组尾部添加4 var a9 = [1,2,3];
var b9 = a9.pop();
console.log(b9); //3 返回的删除的元素。
console.log(a9); //[1,2] 直接在原数组上删除元素3
//栈
var stack = [];
stack.push(1,2,3);
console.log(stack); //[1,2,3]
stack.pop();
console.log(stack); //[1,2]
stack.push(100)
console.log(stack); //[1, 2, 100]
stack.pop()
console.log(stack); //[1, 2]

  

8、unshift()和shift()
定义:unshift是在数组头部添加一个或多个元素。如果一次性传入多个参数,多个参数按照按照原先的位置直接加到数

组中。返回新数组的新数组的长度。
shift:删除数组的第一个元素,并返回删除的元素

//组合使用push()和()可以实现先进先出的队列
var queue = [];
queue.push(1,2,3);
console.log(queue); //[1,2,3]
queue.shift();
console.log(queue); //[2,3]
queue.push(100)
console.log(queue); //[2, 3, 100]
queue.shift();
console.log(queue); //[3,100]
queue.shift();
console.log(queue); //[100]

  

9、toString()
定义:将数组数组中的每个元素转化为字符串。 输出用逗号分隔的字符串列表(可能数组的内部元素(数组)还会再次调

用toString(),高维数组扁平化正是利用这点)
注意:与不使用任何参数调用的jion()方法返回的字符串一样。

var a10 = [1,2,3];
var a11 = [1,2,[3,4,[5,6]]];
console.log(a10.toString()); //1,2,3
console.log(a10); //原数组
console.log(a11.toString()); //1,2,3,4,6
console.log(a11); //原数组

  

二、ECMScript 5中的数组方法

1、forEach()  //遍历
定义:该方法从头到尾遍历数组,为某个元素调用指定的函数。传递函数包括三个参数(数组元素、元素索引、数组本身

),如果只关心数组元素的值,可以只传一个参数。
注意:无法在所有元素的都传递给调用函数之前提前结束。也就是没有像for中一样的break语句。如果要提交终止,可以

把forEach()方法放到try块中。如果forEach()调用的函数抛出forEach.break异常,循环提前结束

var data = [1,2,3];
var sum = 0;
data.forEach(function(value){
sum+=value;
});
console.log(sum); //6 var data = [10,20,30];
data.forEach(function(v,i,a){
a[i] = v*2;
});
console.log(data) //[20, 40, 60]

  

2、map()     //映射
定义:将调用的数组的每个元素传递给指定的函数,并返回一个新数组,它包含该该函数的返回值
注意:传递给map的函数应该有返回值,返回的是新数组,不修改调用的数组。

var data3 = [1,2,3];
var b = data3.map(function(val){
return val*10;
});
console.log(data3); //[1,2,3] 不改变原数组
console.log(b); //[10,20,30] 新数组

  

3、filter() //过滤
定义:返回的数组元素是调用的数组的一个子集,就传递的函数是用来做逻辑判定的,返回true,传给给判定函数的元素就是这个子集的成员。

var data4 = [1,2,3,4,5];
var b2 = data4.filter(function(val){
return val<3;
});
console.log(b2); //[1,2]
console.log(data4); //[1,2,3,4,5] 不改变原数组 var b3 = data4.filter(function(val,i){
return i%2;
});
console.log(b3); //[2,4] 返回索引为奇数的元素组成的数组

4、every() 和some()
这两种方法是数组的逻辑判定,他们针对数组中的所有元素应用指定的函数进行判定。返回true或者false
定义:every 当且仅针对数组中的所有元素调用判定的函数都返回true,它才返回true
some 至少有一个判定为true就返回true.

5、reduce()
定义:使用指定的函数将数组元素进行组合,生成一个单值。参数一是执行简化操作的函数,参数二是传给简化函数的初始值。

注意:一旦确认之后,就停止遍历数组了。

var data5 = [1,2,3];
var sum = data5.reduce(function(x,y){
return x+y;
},0);
console.log(sum); //6 var product = data5.reduce(function(x,y){
return x*y;
},100);
console.log(product); //600

 

6、indexOf()和lastIndexOf()
定义:搜索整个数组中具有给定值的位子,返回找到第一个元素的索引,如果没有找到就返回-1;indexOf()是从头找到尾,lastIndexOf()正好相反
注意:不接受函数作为参数,第一个参数是需要搜索的值,第二个参数是可选的,表示从哪里搜索,可以是负数,表示相对数组末尾的偏移量。
说明:字符串也有这两个方法,功能类似。

var data6 = [1,2,3,3,4,3,5];
console.log(data6.indexOf(3)); //2 第一个3的索引是2

  

7、isArray()
定义:判断对象是不是数组

三、作为数组的字符串

1、简单的使用

var str = "test"
str.charAt(1) //e
str[1] //e

  

2、可以调用数组的方法

注意:字符串是不可变的值,当成数组看待是只可读的。所以像push() sort() reverse() splice()等会修改原数组的方法,在字符串上是无效的。错误可能都没有提示!

var str = "hello";
Array.prototype.join.call(str," "); //"h e l l o" Array.prototype.filter.call(str, function(x){
return x.match(/o/g); //["o"]
});

  

String 对象方法

常用的:

chatAt()

indexOf()

match()

replace()

slice() //数组也是

split() //数组也是     split(/\s+/) 按中间一个或多个空字符串分隔成数组,如获取字符串中的单词

substr()

substring()

方法 描述
anchor() 创建 HTML 锚。
big() 用大号字体显示字符串。
blink() 显示闪动字符串。
bold() 使用粗体显示字符串。
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
fixed() 以打字机文本显示字符串。
fontcolor() 使用指定的颜色来显示字符串。
fontsize() 使用指定的尺寸来显示字符串。
fromCharCode() 从字符编码创建一个字符串。
indexOf() 检索字符串。
italics() 使用斜体显示字符串。
lastIndexOf() 从后向前搜索字符串。
link() 将字符串显示为链接。
localeCompare() 用本地特定的顺序来比较两个字符串。
match() 找到一个或多个正则表达式的匹配。
replace() 替换与正则表达式匹配的子串。
search() 检索与正则表达式相匹配的值。
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
small() 使用小字号来显示字符串。
split() 把字符串分割为字符串数组。
strike() 使用删除线来显示字符串。
sub() 把字符串显示为下标。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
sup() 把字符串显示为上标。
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
toSource() 代表对象的源代码。
toString() 返回字符串。
valueOf() 返回某个字符串对象的原始值。

 

 

JS中数组和字符串的方法大全的更多相关文章

  1. js中数组和字符串的方法总结

    一.数组方法简单总结为以下几种 1.原有: 增.删.改.截.拼.复.排.转 2.ES5扩展: 查.遍历 增: 前增 ,,,,]; console.log(arr.unshift(,,[ console ...

  2. JS中数组和字符串具有的方法,以及substring,substr和slice的用法与区别

     String 对象属性 属性 描述 constructor 对创建该对象的函数的引用 length 字符串的长度 prototype 允许您向对象添加属性和方法 String 对象方法 方法 描述 ...

  3. JS中数组和字符串方法的简单整理

    一.数组: 数组的基本方法:              1.增:arr.unshift() /push()    前增/后增                  2.删:arr.shift() /pop ...

  4. js中数组、字符串、日期、数学API方法一览

    以下内容摘选自 http://www.w3school.com.cn/jsref/jsref_obj_array.asp 点击方法新窗口打开详解 数组: 方法 描述 concat() 连接两个或更多的 ...

  5. javascript中数组和字符串的方法比较

    × 目录 [1]可索引 [2]转换 [3]拼接[4]创建[5]位置 前面的话 字符串和数组有很多的相同之处,它们的方法众多,且相似度很高:但它们又有不同之处,字符串是不可变值,于是可以把其看作只读的数 ...

  6. js中数组的字符串表示

    <html> <head> <title>数组的字符串表示</title> <script type="text/javascript& ...

  7. 【js中数组和字符串的相互转换】

    一.数组转字符串 //数组转字符串 var a, b; a = new Array(0,1,2,3,4); b = a.join(","); //得到字符串 二.字符串转数组 // ...

  8. js中数组遍历常用的方法

    常见的数组遍历方法,比如 for in,for  of, forEach,map,filter,every,some,find,reduce等 1,普通for循环,经常用的数组遍历 var arr = ...

  9. js中数组对象去重的方法

    var arr = [{ key: '01', value: '乐乐' }, { key: '02', value: '博博' }, { key: '03', value: '淘淘' },{ key: ...

随机推荐

  1. JS 实现MVC的写法

    案例:当select 下拉选择框值变化时,显示其值(不是文本) 常规写法 <h3>JavaScript no MVC</h3>  <div>   <selec ...

  2. 启动Eclipse时An internal error occurred during: "Initializing Java Tooling".错误

    解决方法一 重置窗口布局: windows > perspective > reset perspective 解决方法二: 如果上述方法不好使,采用下面的这种方法: 删除workspac ...

  3. jquery中attr与prop的区别

    先从一个老生常谈的问题说起,使用jquery实现全选全不选.楼主先使用的jquery版本是 jquery-1.11.1.min.js 全选<input type="checkbox&q ...

  4. 关于vertical-align和line-height的真知灼见

    本文的重点是了解vertical-align和line-height的使用 涉及到的名词:基线,底端,行内框,行框,行间距,替换元素及非替换元素,对齐.只有充分理解这些概念才会灵活运用这两个属性. 什 ...

  5. 在VS2017中安装OpenGL

    由于VS2017支持直接下载有关openGL的库文件,因此给我们带来了很多方便之处,不需要单独下载了. 1.打开VS2017,并新建一个C++控制台项目 2.然后点击 项目-管理Nuget程序包, 点 ...

  6. if__name__ == '__main__'

    # a.py import b def x(): print('x') b.y #b.py import a def y(): print('y') a.x() #执行b.py引发异常 首先,执行b. ...

  7. axios介绍与使用说明 axios中文文档

    本周在做一个使用vuejs的前端项目,访问后端服务使用axios库,这里对照官方文档,简单记录下,也方便大家参考. Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node ...

  8. 0417 jsBom操作+Dom再次整理

    BOM 1.Windows对象 window.open("打开的地址","打开的位置")window.opener:打开此页面的上一个页面对象window.cl ...

  9. 虚拟机工作站创建虚拟机并安装Linux教程

    前言: 今天开始学习一下Linux,之前早就想看,但是一直没时间,最近把其他知识整理完了,终于有时间来看一下Linux了. 本节只是安装虚拟机工作站,虚拟机,和Linux操作系统的过程,详细的记录了我 ...

  10. 智能合约开发solidity编程语言开发一个以太坊应用区块链投票实例

    智能合约开发用solidity编程语言部署在以太坊这个区块链平台,本文提供一个官方实战示例快速入门,用例子深入浅出智能合约开发,体会以太坊构建去中心化可信交易技术魅力.智能合约其实是"执行合 ...