js数组和字符串操作基础整理

一、数组定义

常规方法，new出数组对象根据下标定义

var arr1 = new Array();
arr1 [0] = 1;
arr1 [1] = 2;
arr1 [2] = 3;
document.write(arr1);  // [1,2,3]

简洁方法

var arr2 = new Array(1,2,3);
document.write(arr2);  // [1,2,3]

字面方法

var arr3= [1,2,3];
document.write(arr3);  // [1,2,3]

二、数组属性

• constructor 返回创建数组对象的原型函数。
  在 JavaScript 中, constructor 属性返回对象的构造函数。返回值是函数的引用，不是函数名：
  数组，constructor 属性返回 function Array() { [native code] }
  数字，constructor 属性返回 function Number() { [native code] }
  字符串，constructor 属性返回 function String() { [native code] }

var arr= [1,2,3];
document.write(arr.constructor); // function Array() { [native code] }

• length 设置或返回数组元素的个数。

[1,3,3].length
// 3

• prototype 允许向数组对象添加属性或方法。

 // 添加属性
Array.prototype.list = 'hahaha'
// 'hahaha'
[].list 
// 'hahaha'

// 添加方法
Array.prototype.toOne = function() {
  for (i = 0; i < this.length; i++) {
    this[i]='one';
  }
}
var arr = ["red","hi","good","hello"];
arr.toOne()
// arr ['one', 'one', 'one', 'one']

---

三、数组方法

1、基本操作

• from()
  from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。如果对象是数组，返回 true，否则返回 false。

  语法: Array.from(object, mapFunction, thisValue)

  示例:

  const arr = [1,2,3,4]
  Array.from(arr, item => item * 10);
  // [10, 20, 30, 40]
  

• reverse()
  reverse() 方法用于颠倒数组中元素的顺序。

  语法: array.reverse()

  示例:

  const arr = [1,2,3,4]
  arr.reverse()
  // [4, 3, 2, 1]
  

• slice()
  slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
  注意： slice() 方法不会改变原始数组。

  语法: array.slice(start, end)

  示例:

  const arr = [1,2,3,4]
  arr.slice(0, 1)
  // [1]
  

• splice()
  splice() 方法用于添加或删除数组中的元素。
  注意： 这种方法会改变原始数组。

  语法: array.splice(index,howmany,item1,.....,itemX)

  示例:

  const arr = [1,2,3,4]
  arr.splice(2, 1)
  // [3]
  // arr [1, 2, 4]
  
  const arr = [1,2,3,4]
  arr.splice(2, 1, 4)
  // [3]
  // arr [1, 2, 4, 4]
  

• copyWithin()
  copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

  语法: array.copyWithin(target, start, end)

  示例:

  const arr = [1,2,3,4]
  arr.copyWithin(2, 0, 2)
  // [1, 2, 1, 2]
  

• valueOf()
  valueOf() 方法返回 Array 对象的原始值。
  注意：
  该原始值由 Array 对象派生的所有对象继承。
  valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。
  valueOf() 方法不会改变原数组。
  数组中的元素之间用逗号分隔。

  语法: array.valueOf()

  示例:

  const arr = [1,2,3,4]
  arr.valueOf()
  // [1, 2, 3, 4]
  

• concat()
  concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

  语法: arr.concat(arr1,arr2,...,arrN)

  示例:

  const arr = []
  const arr1 = [1, 2]
  const arr2 = [3, 4]
  
  arr.concat(arr1, arr2)
  // 注意是返回值！
  // [1, 2, 3, 4]
  

• isArray()
  isArray() 方法用于判断一个对象是否为数组。
  注意： 它是Array对象提供的方法，把需要检测的对象传参进去

  语法: Array.isArray(obj)

  示例:

  const arr = []
  Array.isArray(arr)
  // true
  

• fill()
  fill() 方法用于将一个固定值替换数组的元素。

  语法: array.fill(value, start, end)

  示例:

  var arr = ["good", "yes", "no", "hello"];
  arr.fill("one", 2, 4);
  
  // 改变了原数组
  (4) ['good', 'yes', 'one', 'one']
  

---

2.高阶函数相关

• filter(）
  filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
  注意： filter() 不会对空数组进行检测；filter() 不会改变原始数组。

  语法: array.filter(function(currentValue,index,arr), thisValue)

  示例:

  const arr = [1,2,3,4]
  
  arr.filter(item => item > 2)
  // 注意是返回值！
  // [3, 4]
  

• forEach()
  forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
  注意： forEach() 对于空数组是不会执行回调函数的。

  语法: array.forEach(function(currentValue, index, arr), thisValue)

  示例：

  const arr = [1,2,3,4]
  let sum = 0
  arr.forEach(item => sum += item)
  // sum 10
  

• every()
  every() 方法用于检测数组所有元素是否都符合指定条件。
  注意： every() 方法使用指定函数检测数组中的所有元素：

   如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
   如果所有元素都满足条件，则返回 true。
  

  every() 不会对空数组进行检测。
  every() 不会改变原始数组。

  语法: array.every(function(currentValue,index,arr), thisValue)

  示例：

  const arr = [1,2,3,4]
  arr.every(item => item > 1)
  // false
  arr.every(item => item > 0)
  // true
  

• find()
  find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
  注意： find() 方法为数组中的每个元素都调用一次函数执行：

   当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
   如果没有符合条件的元素返回 undefined。
  

  find() 对于空数组是不会执行的。
  find() 并没有改变数组的原始值。

  语法: array.find(function(currentValue, index, arr),thisValue)

  示例：

  const arr = [1,2,3,4]
  arr.find(item => item > 1)
  // 2
  

• findIndex()
  findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
  注意： findIndex() 方法为数组中的每个元素都调用一次函数执行：

   当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
   如果没有符合条件的元素返回 -1
  

  findIndex() 对于空数组是不会执行的。
  findIndex() 不会改变原始数组。

  语法: array.findIndex(function(currentValue, index, arr),thisValue)

  示例:

  const arr = [1,2,3,4]
  arr.findIndex(item => item > 1)
  // 1
  arr.findIndex(item => item === 7)
  // -1
  

• some()
  some() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
  注意： some() 方法用于检测数组中的元素是否满足指定条件（函数提供），some() 方法会依次执行数组的每个元素：

   如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
   如果没有满足条件的元素，则返回false。
  

  some() 不会对空数组进行检测。
  some() 不会改变原始数组。

  语法: array.some(function(currentValue, index, arr),thisValue)

  示例:

  const arr = [1,2,3,4]
  arr.some(item => item > 1)
  // true
  arr.some(item => item > 5)
  // false
  

• map()
  map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
  注意：
  map() 方法按照原始数组元素顺序依次处理元素。
  map() 不会对空数组进行检测。
  map() 不会改变原始数组。

  语法: array.map(function(currentValue,index,arr), thisValue)

  示例:

  const arr = [1,2,3,4]
  const arr2 = arr.map(item => item + 1)
  // arr2
  // (4) [2, 3, 4, 5]
  

• sort()
  sort() 方法用于对数组的元素进行排序。
  排序顺序可以是字母或数字，并按升序或降序下。默认排序顺序为按字母升序。
  注意：
  当数字是按字母顺序排列时"40"将排在"5"前面。
  使用数字排序，你必须通过一个函数作为参数来调用。
  sort() 方法会改变原始数组！

  语法: array.sort(sortfunction)

  示例:

  var arr = [1,3,5,3,2];
  arr.sort(function(a,b){return a-b});
  // arr [1, 2, 3, 3, 5]
  

---

3.操作数组相关

• pop()
  pop() 方法用于删除数组的最后一个元素并返回删除的元素。
  注意： 此方法会改变数组的长度！

  语法: array.pop()

  示例:

  const arr = [1,2,3,4]
  arr.pop()
  // 4
  // arr [1, 2, 3]
  

• push()
  push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
  注意： 新元素将添加在数组的末尾；此方法会改变数组的长度！

  语法: array.push(item1, item2, ..., itemX)

  示例:

  const arr = [1,2,3,4]
  arr.push(5)
  // 5
  // arr [1, 2, 3, 4, 5]
  

• shift()
  shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
  注意： 此方法会改变数组的长度！

  语法: array.shift()

  示例:

  const arr = [1,2,3,4]
  arr.shift()
  // 1
  // arr [2, 3, 4]
  

• unshift()
  unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
  注意： 该方法将改变数组的数目和长度。

  语法: array.unshift(item1,item2, ..., itemX)

  示例:

  const arr = [1,2,3,4]
  arr.unshift(3)
  // 5
  // arr [3, 1, 2, 3, 4]
  

---

4.查找数组相关

• indexOf()
  indexOf() 方法可返回数组中某个指定的元素位置。
  该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。

    如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。
    如果在数组中没找到指定元素则返回 -1。
  

  语法: array.indexOf(item,start)

  示例:

  const arr = [1,2,3,4]
  arr.indexOf(3)
  // 2
  

• lastIndexOf()
  lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。
  该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。

    如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。
    如果在数组中没找到指定元素则返回 -1。
  

  如果要检索的元素没有出现，则该方法返回 -1。

  语法: array.lastIndexOf(item,start)

  示例:

  const arr = [1,2,3,4]
  arr.lastIndexOf(1)
  // 0
  

• includes()
  includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
  注意： 使用includes() 方法查找字符串是区分大小写的。

  语法: arr.includes(searchElement, index)
  index 可选，表示从 index 索引处开始往后查找。如果为负值，表示从末尾开始往前跳 |index| 个索引，然后往后查找。默认值为0。

  示例:

  const arr = [1,2,3,4]
  arr.includes(1)
  // true
  arr.includes(1,2)
  // false
  

---

5.字符串相关

• join()
  join() 方法用于把数组中的所有元素转换一个字符串。
  元素是通过指定的分隔符进行分隔的。

  语法: array.join(separator)

  示例:

  const arr = [1,2,3,4]
  arr.join(",")
  // '1,2,3,4'
  

• toString()
  toString() 方法可把数组转换为字符串，并返回结果。
  **注意：**数组中的元素之间用逗号分隔。

  语法： array.toString()

  示例：

  const arr = [1,2,3,4]
  arr.toString()
  // '1,2,3,4'
  

---

6.计算数组相关

• reduce()
  reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
  reduce() 可以作为一个高阶函数，用于函数的 compose。
  注意： reduce() 对于空数组是不会执行回调函数的。

  语法: array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

  示例:

  const arr = [1,2,3,4]
  arr.reduce((a, b) => a + b)
  // 10
  

  实用举例：
  （1）计算数组中每个元素出现的次数

  const arr = ['name', 'age', 'long', 'short', 'name', 'long', 'name'];
  
  const arrResult = arr.reduce((prev, cur) => {
    console.log(prev, cur);
    if (cur in prev) {
      prev[cur] += 1;
    } else {
      prev[cur] = 1;
    }
    return prev;
  }, {}); // 传入函数迭代的初始值是空的object，prev的第一个值是空对象，cur此时是name
  
  console.log(arrResult, 'arrResult');
  // {} 'name'
  // {name: 1} 'age'
  // {name: 1, age: 1} 'long'
  // {name: 1, age: 1, long: 1} 'short'
  // {name: 1, age: 1, long: 1, short: 1} 'name'
  // {name: 2, age: 1, long: 1, short: 1} 'long'
  // {name: 2, age: 1, long: 2, short: 1} 'name'
  // {name: 3, age: 1, long: 2, short: 1} 'arrResult'
  

  （2）数组去重

  const arr = ['name', 'age', 'long', 'short', 'name', 'long', 'name'];
  
  const arrRepeat = arr.reduce((prev, cur) => {
  	if (!prev.includes(cur)) {
  	  prev.push(cur);
  	}
  	return prev;
  }, []); // 传入函数迭代的初始值是空arr，prev第一个值就是空数组, 迭代开始去判断当前元素是不是已经存在这个数组中，如果没有就 push 到这个数组里面。
  
  console.log(arrRepeat, 'arrRepeat');
  // (4) ['name', 'age', 'long', 'short'] 'arrRepeat'
  

  （3）对象进行分类

   const person = [
  	{ name: 'Alice', age: 1 },
  	{ name: 'Blice', age: 1 },
  	{ name: 'Ylice', age: 2 },
  	{ name: 'Max', age: 3 },
  	{ name: 'Min', age: 3 },
   ];
  	 
  const arrResult = person.reduce((prev, cur) => {
    if (!prev[cur.age]) {
      prev[cur.age] = [];
    }
    prev[cur.age].push(cur);
    return prev;
  }, {});
  
  console.log(arrResult, 'arrResult');
  

  
  （4）扁平数组
  将二维数组转化为一维：

  let arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
   
  let arrResult = arr.reduce((pre, cur) => {
      return pre.concat(cur)
  },[]);
   
  console.log(arrResult)  // [1, 2, 8, 3, 4, 9, 5, 6, 10]
  

  将多维数组转化为一维：

  let arr = [[1, [2, 8]], [3, 4, 9], [5, [6, 10]]]
   
  const arrResult = ( (res) => {
     return res.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
  })
   
  console.log(arrResult(arr)); // [1, 2, 8, 3, 4, 9, 5, 6, 10]
  

• reduceRight()
  reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
  注意： reduceRight() 对于空数组是不会执行回调函数的。

  语法： array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

  示例：

  const arr = [1,2,3,4]
  arr.reduceRight((a, b) => a + b)
  // 10
  

---

7.返回可迭代对象

• entries()
  entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
  迭代对象中数组的索引值作为 key， 数组元素作为 value。

  语法: array.entries()

  示例:

  const arr = [1,2,3,4]
  arr.entries()
  // Array Iterator {}
  // [0, 1]
  // [1, 2]
  // [2, 3]
  // [3, 4]
  
  let obj = {
    name: "leo",
    age: 18,
    like: "music"
  };
  console.log(Object.entries(obj));
  // [ [ 'name', 'leo' ], [ 'age', 18 ], [ 'like', 'music' ] 
  

  扩展：
  fromEntries() 方法和entries() 是相对的，是把键值对列表转换为一个对象（逆操作）。

  let arr = [ ['a', 1], ['b', 2] ];
  let obj = Object.fromEntries(arr);
  console.log(obj);   // {a: 1, b: 2}
  

• keys()
  keys() 方法用于从数组创建一个包含数组键的可迭代对象。
  如果对象是数组返回 true，否则返回 false。

  语法: array.keys()

  示例:

  const arr = [1,2,3,4]
  arr.keys()
  // Array Iterator {}
  
  let obj = {
    name: "leo",
    age: 18,
    like: "music"
  };
  console.log(Object.keys(obj));
  // [ 'name', 'age', 'like' ]
  // 注意：如果传入的参数是数组，则返回的是所有可遍历的索引。
  

---

四、字符串的一些实用操作

• padStart() 和 padEnd()
  padStart() 把指定字符串填充到字符串头部，返回新字符串。
  padEnd() 把指定字符串填充到字符串尾部，返回新字符串。

  语法：
  str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])
  targetLength：当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。
  padString：可选，如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。默认值为 " "。

  示例：

  'abc'.padStart(10);   // "       abc"，填充默认值"" 
  'abc'.padStart(10, "*");   // "*******abc"
  'abc'.padStart(6,"123465");   // "123abc" 
  'abc'.padStart(1);   // "abc"
  
  'abc'.padEnd(10);   // "abc       "，填充默认值""
  'abc'.padEnd(10, "*");   // "abc*******"
  'abc'.padEnd(6, "123456");   // "abc123"
  'abc'.padEnd(1);   // "abc"
  

  举例：
  （1）日期格式化：yyyy-mm-dd的格式

  let date = new Date();
  let year = date.getFullYear();
  // 月日如果是一位前面给它填充一个0
  let month = (date.getMonth() + 1).toString().padStart(2, '0');
  let day = (date.getDate()).toString().padStart(2, '0');
  console.log( `${year}-${month}-${day}` );   // 2022-01-09
  

  （2）数字替换(手机号，银行卡号等）

  let tel = '18937640746'
  let newTel = tel.slice(-4).padStart(tel.length, '*')
  console.log(newTel) // *******0746
  

• flat()
  flat() 会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回（数组扁平化）。

  语法：let newArr = arr.flat(depth)
  depth可选，指提取嵌套数组的结构深度，默认值为 1。

  示例：

  let arr1 = [0, 1, 2, [3, 4]];
  console.log(arr1.flat());   // [0, 1, 2, 3, 4]
  
  let arr2 = [0, 1, 2, [[[3, 4]]]];
  console.log(arr2.flat(2));  // [0, 1, 2, [3, 4]]
  console.log(arr2.flat(3));  // [0, 1, 2, 3, 4]
  
  //使用 Infinity，可展开任意深度的嵌套数组
  let arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
  arr3.flat(Infinity);   // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  
  // flat()方法会移除数组中的空项
  let arr5 = [1, 2, , , 4, 5];
  arr5.flat();   // [1, 2, 4, 5]
  

• flatMap()
  flatMap() 首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。顾名思义，它包含两部分功能一个是 map，一个是 flat（深度为1）。

  语法： let newArr = arr.flatMap(function callback(currentValue[, index[, array]]) {返回新数组的元素}[, thisArg]);
  currentValue，当前正在数组中处理的元素。
  index可选，数组中正在处理的当前元素的索引。
  array可选，被调用的 map 数组。
  thisArg，执行callback函数时 使用的this值。

  示例：

  let numbers = [1, 2, 3];
  numbers.map(x => [x * 2]);   // [[2], [4], [6]]
  numbers.flatMap(x => [x * 2]);   // [2, 4, 6]
  
  let arr = ['leo', '', '早上好']
  arr.map(s => s.split(''));   //[["l", "e", "o"],[""],["早", "上", "好"]]
  arr.flatMap(s => s.split(''));   // ["l", "e", "o", "", "早", "上", "好"]
  

• trimStart() 和 trimEnd()
  trimStart() 从字符串的开头删除空格，trimLeft() 是它的别名。
  trimEnd() 从一个字符串的末尾删除空格，trimRight() 是它的别名。

  示例：

  let str = '   leo';
  console.log(str.length);   // 6
  str = str.trimStart();   // 或str.trimLeft()
  console.log(str.length);   // 3
  
  let str = 'leo   ';
  console.log(str.length);   // 6
  str = str.trimEnd();   // 或str.trimRight()
  console.log(str.length);   // 3