JS Array String 类型

来源:互联网 发布:我们走了一些弯路 知乎 编辑:程序博客网 时间:2024/05/18 02:22

1. Array

methods:

1.from() (es6)

from 方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。任何有 length 属性的对象,都可以通过 from 方法转为数组。
常用方式:
将字符串转化为数组。

Array.from('hello') // [ 'h', 'e', 'l', 'l', 'o' ]

将 Set 对象转换为数组。

Array.from(new Set(['a', 'b'])) // [ 'a', 'b' ]

将对象转换为数组的几种形式。from 是通过key作为下标并且参照 length 属性大小来填充元素的。当没有合适的元素插入时就会插入 undefined 补位。

var o = { 0: 'a', 1: 'b', 2: 'c', length: 3 }Array.from(o) // [ 'a', 'b', 'c' ]// key值为只包含数字内容的字符串var o = { '0': 'a', '1': 'b', '2': 'c', length: 3 }console.log(Array.from(o)); // [ 'a', 'b', 'c' ]// key值不从0起var o = { 1: 'a', 2: 'b', 3: 'c', length: 3 }Array.from(o) // [ undefined, 'a', 'b' ]// key值为不能转化为数字的字符串var o = { a: 'a', b: 'b', c: 'c', length: 3 }Array.from(o) // [ undefined, undefined, undefined ]

应用:

ES5

function foo() {    [].slice.call(arguments);}

ES6

function foo() {    Array.from(arguments); // [ 'a', 'b', 'c' ]}

2.copyWithin()
在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三个参数。
target(必需):从该位置开始替换数据。
start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。这三个参数都应该是数值,如果不是,会自动转为数值。(不包含)

[1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [ 4, 2, 3, 4, 5 ]// 上面和下面这两个方法等同// -2相当于3号位,-1相当于4号位[1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [ 4, 2, 3, 4, 5 ]// 将3号位复制到0号位[].copyWithin.call({length: 5, 3: 1}, 0, 3) // { '0': 1, '3': 1, length: 5 }

3.concat()
创建当前数组副本,将接收到的参数添加到副本的末尾。

var arr = Array(1, 2, 3);var resArr = arr.concat(4);arr // [ 1, 2, 3 ]resArr // [ 1, 2, 3, 4 ]

4.join()
把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

var arr = Array.of(1, 2, 3);var resStr = arr.join(",");arr // [ 1, 2, 3 ]resStr // 1,2,3

5.push()
向数组的末尾添加一个或多个元素,并返回新的长度。

var arr = Array.of(1, 2, 3);var resLen = arr.push('a');arr // [ 1, 2, 3, 'a' ]resLen // 4

6.pop()
删除并返回数组的最后一个元素。

var arr = Array.of(1, 2, 3);var resEle = arr.pop();arr // [ 1, 2 ]resEle // 3

7.shift()
删除并返回数组第一个元素

var arr = Array.of(1, 2, 3);var resEle = arr.shift();arr // [ 2, 3 ]resEle // 1

8.unshift()
向数组的前端添加一个或多个元素,并返回新的长度

var arr = Array.of(1, 2, 3);var resLen = arr.unshift('a');arr // ['a', 1, 2, 3 ]resLen // 4

9.迭代方法
every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。
 filter():对数组中的每一项运行给定函数,返回该函数会返回true 的项组成的数组。
 forEach():对数组中的每一项运行给定函数。这个方法没有返回值。
 map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
 some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

var numbers = [1,2,3,4,5,4,3,2,1];var everyResult = numbers.every(function(item, index, array){return (item > 2);});alert(everyResult); //falsevar filterResult = numbers.filter(function(item, index, array){return (item > 2);});alert(filterResult); //[3,4,5,4,3]numbers.forEach(function(item, index, array){//执行某些操作,无返回值});var mapResult = numbers.map(function(item, index, array){return item * 2;});alert(mapResult); //[2,4,6,8,10,8,6,4,2]var someResult = numbers.some(function(item, index, array){return (item > 2);});alert(someResult); //true

10.遍历数组元素
最基本的方法:

for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]);}

forEach方法:

myArray.forEach(function (value) { console.log(value);});

缺点:不能使用 break 语句来跳出循环,也不能使用 return 语句来从闭包函数中返回。

for in 循环方法:

for (var index in myArray) { // 实际代码中不要这么做 console.log(myArray[index]);}

缺点: 不仅数组本身的元素将被遍历到,那些由用户添加的附加(expando)元素也将被遍历到。在某些情况下,上面代码将会以任意顺序去遍历数组元素。

for of 方法:
1.这是遍历数组最简单直接的方法
2.避免了所有 for–in 语法存在的坑
3.与 forEach() 不同的是,它支持 break、continue 和 return 语句。

11.entries

entries() 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。

var arr = ["a", "b", "c"];var iterator = arr.entries();// undefinedfor (let e of iterator) {    console.log(e);}// [0, "a"] // [1, "b"] // [2, "c"]

12.fill()
fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素.
arr.fill(value, start, end)
具体要填充的元素区间是 [start, end) , 一个半开半闭区间.
如果 start 是个负数, 则开始索引会被自动计算成为 length+start, 其中 length 是 this 对象的 length 属性值. 如果 end 是个负数, 则结束索引会被自动计算成为 length+end.
fill 方法故意被设计成通用方法, 也就是说它不需要 this 值必须是个数组对象, 类数组对象也是可以调用该方法的 .

[1, 2, 3].fill(4)            // [4, 4, 4][1, 2, 3].fill(4, 1)         // [1, 4, 4][1, 2, 3].fill(4, 1, 2)      // [1, 4, 3][1, 2, 3].fill(4, 1, 1)      // [1, 2, 3][1, 2, 3].fill(4, -3, -2)    // [4, 2, 3][1, 2, 3].fill(4, NaN, NaN)  // [1, 2, 3]Array(3).fill(4);            // [4, 4, 4][].fill.call({length: 3}, 4) // {0: 4, 1: 4, 2: 4, length: 3}

13.find()
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined.
语法:
arr.find(callback[, thisArg])
callback
在数组每一项上执行的函数,接收 3 个参数:
element
当前遍历到的元素。
index
当前遍历到的索引。
array
数组本身。
thisArg
可选,指定 callback 的 this 参数
实例:
用对象的属性查找数组里的对象

var inventory = [    {name: 'apples', quantity: 2},    {name: 'bananas', quantity: 0},    {name: 'cherries', quantity: 5}];function findCherries(fruit) {     return fruit.name === 'cherries';}console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

寻找数组中的质数

function isPrime(element, index, array) {  var start = 2;  while (start <= Math.sqrt(element)) {    if (element % start++ < 1) {      return false;    }  }  return element > 1;}console.log([4, 6, 8, 12].find(isPrime)); // undefined, not foundconsole.log([4, 5, 8, 12].find(isPrime)); // 5

14 . findIndex()
返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

function isBigEnough(element) {  return element >= 15;}[12, 5, 8, 130, 44].findIndex(isBigEnough); // 3

15 . includes()
判断当前数组是否包含某指定的值,如果是,则返回 true,否则返回 false。(通用方法,非数组也可利用call调用)

var a = [1, 2, 3];a.includes(2); // true a.includes(4); // false

16 . indexOf()
返回在数组中可以找到给定元素的第一个索引,如果不存在,则返回-1。
语法:
arr.indexOf(searchElement[, fromIndex = 0])
searchElement
要查找的元素
fromIndex
开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,仍然从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.
实例:
找出指定元素出现的所有位置

var indices = [];var array = ['a', 'b', 'a', 'c', 'a', 'd'];var element = 'a';var idx = array.indexOf(element);while (idx != -1) {  indices.push(idx);  idx = array.indexOf(element, idx + 1);}console.log(indices);// [0, 2, 4]

lastIndexOf():从后往前查找。

17 . reduce()
对累加器和数组中的每个元素 (从左到右)应用一个函数,将其减少为单个值。
语法:
arr.reduce(callback,[initialValue])
callback
执行数组中每个值的函数,包含四个参数
accumulator
上一次调用回调返回的值,或者是提供的初始值( initialValue)
currentValue
数组中正在处理的元素
currentIndex
数据中正在处理的元素索引,如果提供了 initialValue ,从0开始;否则从1开始
array
调用 reduce 的数组
initialValue
可选项,其值用于第一次调用 callback 的第一个参数。

实例:

计算数组中各个值出现次数

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];var countedNames = names.reduce(function(allNames, name) {   if (name in allNames) {    allNames[name]++;  }  else {    allNames[name] = 1;  }  return allNames;}, {});// countedNames is { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

reduceRight()的执行方向相反。

18 . slice()
返回一个从开始到结束(不包括结束)选择的数组的一部分浅拷贝到一个新数组对象。
语法:

arr.slice(begin,end)

实例:

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];var citrus = fruits.slice(1, 3);// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']// citrus contains ['Orange','Lemon']

slice 方法可以用来将一个类数组(Array-like)对象/集合转换成一个数组。你只需将该方法绑定到这个对象上。

function list() {  return Array.prototype.slice.call(arguments);}var list1 = list(1, 2, 3); // [1, 2, 3]

19 . sort()
适当的位置对数组的元素进行排序,并返回数组 , 默认排序顺序是根据字符串Unicode码点。
语法:

arr.sort() arr.sort(compareFunction)

compareFunction
可选。用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序。

如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;如果 compareFunction(a, b) 等于 0a 和 b 的相对位置不变。备注: ECMAScript 标准并不保证这一行为,而且也不是所有浏览器都会遵守;如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果,否则排序的结果将是不确定的。
var items = [  { name: 'Edward', value: 21 },  { name: 'Sharpe', value: 37 },  { name: 'And', value: 45 },  { name: 'The', value: -12 },  { name: 'Magnetic' },  { name: 'Zeros', value: 37 }];items.sort(function (a, b) {  if (a.value > b.value) {    return 1;  }  if (a.value < b.value) {    return -1;  }  // a 必须等于 b  return 0;});

20 . splice()
删除现有元素和/或添加新元素来更改数组的内容。

array.splice(start, deleteCount, item1, item2, ...)
var myFish = ["angel", "clown", "mandarin", "surgeon"];//从第 2 位开始删除 0 个元素,插入 "drum"var removed = myFish.splice(2, 0, "drum");//运算后的 myFish:["angel", "clown", "drum", "mandarin", "surgeon"]//被删除元素数组:[],没有元素被删除//从第 3 位开始删除 1 个元素removed = myFish.splice(3, 1);//运算后的myFish:["angel", "clown", "drum", "surgeon"]//被删除元素数组:["mandarin"]//从第 2 位开始删除 1 个元素,然后插入 "trumpet"removed = myFish.splice(2, 1, "trumpet");//运算后的myFish: ["angel", "clown", "trumpet", "surgeon"]//被删除元素数组:["drum"]

21 . toLocaleString()
返回一个字符串表示数组中的元素。数组中的元素将使用各自的 toLocaleString 方法转成字符串,这些字符串将使用一个特定语言环境的字符串(例如一个逗号 “,”)隔开。

数组中的元素将会使用各自的 toLocaleString 方法:
Object: Object.prototype.toLocaleString()
Number: Number.prototype.toLocaleString()
Date: Date.prototype.toLocaleString()

var number = 1337;var date = new Date();var myArr = [number, date, "foo"];var str = myArr.toLocaleString(); console.log(str); // 输出 "1337,2015/2/27 下午8:29:04,foo" // 假定运行在中文(zh-CN)环境,北京时区

2.String

  1. fromCharCode()
    返回使用指定的Unicode值序列创建的字符串。
String.fromCharCode(65,66,67)
  1. charAt()
    从一个字符串中返回指定的字符。
str.charAt(index)
  1. concat()
    将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回。
var hello = "Hello, ";console.log(hello.concat("Kevin", " have a nice day.")); /* Hello, Kevin have a nice day. */
  1. includes()
    判断一个字符串是否包含在另一个字符串中,根据情况返回true或false.
str.includes(searchString[, position])

searchString
要在此字符串中搜索的字符串。。
position
可选。从当前字符串的哪个索引位置开始搜寻子字符串;默认值为0。

'Blue Whale'.includes('blue'); // returns false
  1. localeCompare()
    返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。
// The letter "a" is before "c" yielding a negative value'a'.localeCompare('c'); // -2 or -1 (or some other negative value)// Alphabetically the word "check" comes after "against" yielding a positive value'check'.localeCompare('against'); // 2 or 1 (or some other positive value)// "a" and "a" are equivalent yielding a neutral value of zero'a'.localeCompare('a'); // 0
  1. repeat()
    构造并返回一个新字符串,该字符串包含被连接在一起的指定数量的字符串的副本
"abc".repeat(2)      // "abcabc""abc".repeat(3.5)    // "abcabcabc" 参数count将会被自动转换成整数.
  1. slice()
    提取一个字符串的一部分,并返回一新的字符串。
var str1 = 'The morning is upon us.';var str2 = str1.slice(4, -2);console.log(str2); // OUTPUT: morning is upon u
  1. split()
    将一个String对象分割成字符串数组,通过将字符串分成子串。
    split 方法返回一个数组。
    当找到一个 seperator 时,separator 会从字符串中被移除,返回存进一个数组当中的子字符串。如果忽略 separator 参数,则返回的数组包含一个元素,该元素是原字符串。如果 separator 是一个空字符串,则 str 将被转换为由字符串中字符组成的一个数组。
    如果 separator 是一个正则表达式,且包含捕获括号(capturing parentheses),则每次匹配到 separator 时,捕获括号匹配的结果将会插入到返回的数组中。
"Webkit Moz O ms Khtml".split( " " )   // ["Webkit", "Moz", "O", "ms", "Khtml"]
  1. substr()
    返回一个字符串中从指定位置开始到指定字符数的字符。
str = "abcdefghij";console.log("(1,2): "    + str.substr(1,2));   // (1,2): bcconsole.log("(-3,2): "   + str.substr(-3,2));  // (-3,2): hiconsole.log("(-3): "     + str.substr(-3));    // (-3): hijconsole.log("(1): "      + str.substr(1));     // (1): bcdefghijconsole.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): abconsole.log("(20, 2): "  + str.substr(20,2));  // (20, 2):
  1. substring()
    返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。(不支持负数参数)
    如果 indexStart 大于 indexEnd,则 substring 的执行效果就像两个参数调换了一样。例如,str.substring(1, 0) == str.substring(0, 1)。
  2. trim()
    从一个字符串的两端删除空白字符。在这个上下文中的空白字符是所有的空白字符 (space, tab, no-break space 等) 以及所有行终止符字符(如 LF,CR)。
var orig = '   foo  ';console.log(orig.trim()); // 'foo'// 另一个.trim()例子,只从一边删除var orig = 'foo    ';console.log(orig.trim()); // 'foo'