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）数字替换(手机号，yhk号等）

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