JavaScript Array+String对象的常用方法

Array 对象

Array 对象用于在单个的变量中存储多个值。

创建 Array 对象的语法：

new Array();
new Array(size);
new Array(element0, element1, ..., elementn);

参数

参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。

参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回值

返回新创建并被初始化了的数组。

如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。

当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 undefined 的数组。

当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。

当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

concat():连接两个或更多的数组，并返回结果。

// 连接数组与参数
var a = [1,2,3];
console.log(a.concat(4,5));  //1,2,3,4,5

/******************************************/
// 连接2个数组
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

console.log(arr.concat(arr2))  // George,John,Thomas,James,Adrew,Martin

/******************************************/
// 连接3个数组
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"

console.log(arr.concat(arr2,arr3));

join():把数组中的所有元素放入一个字符串(默认为逗号分割)

/******************************************/
// 把数组的所有元素放入字符串
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var s = arr.join();
console.log(arr.join());  // George,John,Thomas

/******************************************/
// 使用分隔符来分隔数组中的元素
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

console.log(arr.join("."))  // George.John.Thomas

pop():删除数组的最后一个元素，减少数组的长度，返回删除的值。

push(n):将参数加载到数组的最后，返回新数组的长度。

shift():删除数组的第一个元素,数组长度减1，返回删除的值。

unshift(n1,n2):把参数加载数组的前面，返回新数组的长度。

sort()：按指定的参数对数组进行排序 ，返回的值是经过排序之后的数组

reverse()：反转数组项的顺序，返回的值是经过排序之后的数组

concat(3,4)：把两个数组拼接起来。 返回的值是一个副本

slice[start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组（不影响原数组）

1个参数：n.即：n到末尾的所有

2个参数：[start,end]

splice()：

删除：2个参数，起始位置，删除的项数

插入：3个参数，起始位置，删除的项数，插入的项

替换：任意参数，起始位置，删除的项数，插入任意数量的项

indexOf()和lastIndexOf()：接受两个参数，要查找的项(可选)和查找起点位置的索引

indexOf()：从数组开头向后查找

lastIndexOf()：从数组末尾开始向前查找

every()：对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true。

filter()：对数组中的每一项运行给定函数，返回该函数会返回true的项组成数组。

forEach()：对数组的每一项运行给定函数，这个方法没有返回值。

map()：对数组的每一项运行给定函数，返回每次函数调用的结果组成的数组。

some()：对数组的每一项运行给定参数，如果该函数对任一项返回true，则返回true。以上方法都不会修改数组中的包含的值。

reduce()和reduceRight()：缩小数组的方法，这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。

join(separator)：将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符

var arr = [1, 2, 3];

var str = arr.toString();
console.log(arr);  // ["1", "2", "2"]
console.log(arr.toString())  // 1,2,2

ES6扩展

数组扩展

• ●find :
  
  find的参数为回调函数，回调函数可以接收3个参数，值x、所以i、数组arr，回调函数默认返回值x。

let arr=[1,2,234,'sdf',-2];
arr.find(function(x){
    return x<=2;
})//结果：1，返回第一个符合条件的x值
arr.find(function(x,i,arr){
    if(x<2){console.log(x,i,arr)}
})//结果：1 0 [1, 2, 234, "sdf", -2]，-2 4 [1, 2, 234, "sdf", -2]

• ●findIndex :
  
  findIndex和find差不多，不过默认返回的是索引。

let arr=[1,2,234,'sdf',-2];
arr.findIndex(function(x){
    return x<=2;
})//结果：0，返回第一个符合条件的x值的索引
arr.findIndex(function(x,i,arr){
    if(x<2){console.log(x,i,arr)}
})//结果：1 0 [1, 2, 234, "sdf", -2]，-2 4 [1, 2, 234, "sdf", -2]

• ●includes:
  
  includes函数与string的includes一样，接收2参数，查询的项以及查询起始位置。

let arr=[1,2,234,'sdf',-2];
arr.includes(2);// 结果true，返回布尔值
arr.includes(20);// 结果：false，返回布尔值
arr.includes(2,3)//结果：false，返回布尔值

• ●keys:
  
  keys，对数组索引的遍历

let arr=[1,2,234,'sdf',-2];
for(let a of arr.keys()){
    console.log(a)
}//结果：0,1,2,3,4  遍历了数组arr的索引

• ●values:
  
  keys，对数组项的遍历

let arr=[1,2,234,'sdf',-2];
for(let a of arr.values()){
    console.log(a)
}//结果：1,2,234,sdf,-2 遍历了数组arr的值

• ●entries:
  
  entries，对数组键值对的遍历。

let arr=['w','b'];
for(let a of arr.entries()){
    console.log(a)
}//结果：[0,w],[1,b]
for(let [i,v] of arr.entries()){
    console.log(i,v)
}//结果：0 w,1 b

• ●fill:
  
  fill方法改变原数组，当第三个参数大于数组长度时候，以最后一位为结束位置。

let arr=['w','b'];
arr.fill('i')//结果：['i','i']，改变原数组
arr.fill('o',1)//结果：['i','o']改变原数组,第二个参数表示填充起始位置
new Array(3).fill('k').fill('r',1,2)//结果：['k','r','k']，第三个数组表示填充的结束位置

• ●Array.of():
  
  Array.of()方法永远返回一个数组，参数不分类型，只分数量，数量为0返回空数组

Array.of('w','i','r')//["w", "i", "r"]返回数组
Array.of(['w','o'])//[['w','o']]返回嵌套数组
Array.of(undefined)//[undefined]依然返回数组
Array.of()//[]返回一个空数组

• ●copyWithin:
  
  copyWithin方法接收三个参数，被替换数据的开始处、替换块的开始处、替换块的结束处(不包括);copyWithin(s,m,n).

["w", "i", "r"].copyWithin(0)//此时数组不变
["w", "i", "r"].copyWithin(1)//["w", "w", "i"],数组从位置1开始被原数组覆盖，只有1之前的项0保持不变
["w", "i", "r","b"].copyWithin(1,2)//["w", "r", "b", "b"],索引2到最后的r,b两项分别替换到原数组1开始的各项，当数量不够，变终止
["w", "i", "r",'b'].copyWithin(1,2,3)//["w", "r", "r", "b"]，强第1项的i替换为第2项的r

• ●Array.from():
  
  Array.from可以把带有lenght属性类似数组的对象转换为数组，也可以把字符串等可以遍历的对象转换为数组，它接收2个参数，转换对象与回调函数

Array.from({'0':'w','1':'b',length:2})//["w", "b"],返回数组的长度取决于对象中的length，故此项必须有！
Array.from({'0':'w','1':'b',length:4})//["w", "b", undefined, undefined],数组后2项没有属性去赋值，故undefined
Array.from({'0':'w','1':'b',length:1})//["w"],length小于key的数目，按序添加数组

//////////////////////////////
let divs=document.getElementsByTagName('div');
Array.from(divs)//返回div元素数组
Array.from('wbiokr')//["w", "b", "i", "o", "k", "r"]
Array.from([1,2,3],function(x){
        return x+1})//[2, 3, 4],第二个参数为回调函数

字符串扩展

• ●for…of：
  
  由于es5并没有为js制定字符串相关遍历方法，for…of无疑会是接下来前端开发中的一个很重要角色。

let str="wbiokr";
for(let s of str){
    console.log(s)
}
//结果：w, b, i, o, k, r

• ●includes：
  
  string.includes(s,i)方法参数1为需要查询字符(串),参数2为查询的起始位置，返回布尔值，而indexOf返回查询的位置。

let str="wbiokr";
str.includes('wb');//结果:true
str.includes('wbiokr');//结果：true
str.includes('w',1);//false
str.includes('b',1);//true

• ●startsWith：
  
  string.startsWith(s,i)方法参数1为需要查询字符(串),参数2为查询的起始位置，返回布尔值,表示是否字符(串)位于string的头部位置。

let str="wbiokr";
str.startsWith('wb');//结果:true
str.startsWith('w');//结果:true
str.startsWith('w',1);//结果:false
str.startsWith('b',1);//true
str.startsWith('kr');//结果：false

• ●endsWith：
  
  string.endsWith()方法参数1为需要查询字符(串),参数2为查询的起始位置，返回布尔值,表示是否字符(串)位于string的尾部位置。

let str="wbiokr";
str.endsWith('kr');//结果:true
str.endsWith('r');//结果:true
str.endsWith('wb');//结果：false
str.endsWith('i',6);//false
str.endsWith('i',3);//false
str.endsWith('kr',6);//true

• ●repeat：
  
  string.repeat(num)方法,参数num为重复字符串的次数，各种情况下的返回值见代码。

let str="wbiokr";
str.repeat(2);//wbiokrwbiokr"str被重复了2次返回，str不改变
'hi'.repeat(3);//"hihihi"
'hi'.repeat(2.6);//'hihi'浮点类型参数，会取整重复
'hi'.repeat(0);//''0的时候返回空字符串
'hi'.repeat(-3)//负数，报错
'hi'.repeat(undefined)//''undefined转化为0
'hi'.repeat(null)//''null转化为0
'hi'.repeat(NaN)//''NaN转化为0

• ●‘${}’：
  
  开发过程中,经常用到jq为元素动态添加子元素或动态添加内容，过去我们都是通过字符串拼接进行添加变量。ES6添加的 可以很好的取代jq的老方法，单引号加上’${}’不仅可以嵌入变量，还能保持代码格式，并且{}里面可以进行js代码运行。

let str="wbiokr";
$('#box').html('
    there is a word ${str},i know it
');
//there is a word wbiokr,i know it