数组和ts中的元组

一、数组

let 变量名称：类型[ ] //默认方法

let 变量名称：Array<类型> //泛型方法

let arr = string[];
let arr2 = Array<string>;

1、将数组转化为字符串

方法	作用	是否改变当前数组	返回值
toString()	把数组转化为逗号分隔的字符串	否	转化后的字符串
join("分隔字符串")	把数组转化为用自定义字符串分隔符的字符串	否	转换后的字符串

let arr:string[] = ['a','b','c']
console.log(arr.toString());//输出"a,b,c"
console.log(arr.join());//输出"a,b,c"
console.log(arr.join("-"));//输出"a-b-c"

2、添加/移除元素

方法	作用	是否改变当前数组	返回值
push("元素值")	在数组结尾添加元素(可以同时添加多个)	是	新的数组的长度
unshift("元素值")	在数组开头添加元素（可以同时添加多个）	是	新数组的长度
pop()	移除数组的最后一个元素	是	被移除的元素
shift()	移除数组的首个元素	是	被移除的元素

let arr:string[] = ['a','b','c']
arr.push("d");
arr.unshift("f");
arr.pop();
arr.shift();

3、查找元素

方法	作用	是否改变当前数组	返回值
indexOf(元素值)	从前往后在数组中搜索元素并返回其索引位置（若没有找到，则返回-1）	否	数值，元素所在索引的位置
lastIndexOf(元素值)	从后往前在数组中搜索元素并返回其索引位置（若没有找到，则返回-1）	否	数值，元素所在索引倒数位置
findIndexOf(自定义筛选函数)	返回符合筛选条件的首个元素的索引位置（若没有找到，则返回-1） 自定义筛选函数需接受以下3个参数——当前元素，当前元素索引，数组	否	数值，元素所在索引倒数位置

let arr:string[] = ['a','b','c']
console.log(arr.indexOf("c"));//输出2
console.log(arr.indexOf("d"));//输出-1
console.log(arr.lastIndexOf("c"));//输出2
console.log(arr.lastIndexOf("d"));//输出-1


//自定义函数用于判断当前元素是否大于10
function myNumebr(value,index,array){
  return value > 10
}

let number:number[] = [3,7,9,4,7,9,11,45]
let num = number.findIndexOf(myNumber)
console.log(num);//输出6

4、数组排序

方法	作用	是否改变当前数组	返回值
sort(自定义排序函数[可选参数])	将数组的元素以字母顺序排序，如果传入了自定义排序函数，则以函数排序。自定义排序函数需要接受两个参数，上一个元素值与下一个元素值。如果第一个参数小于第二个参数，则返回负值；如果相等，则返回0；否则，返回正值。	是	无
reverse()	反转数组元素的当前顺序	是	无

let arr = ["a", "g", "c"];
console.log(arr.reverse()); // ['c', 'g', 'a']
console.log(arr.sort()); //['a', 'c', 'g']   

//注意：
//sort()不能用于数字的直接排序，原因是数字会先转化为英文//
//而sort()是根据英文来排序的，故不准确。
let arr2 = [37, 6, 2, 8, 34, 12, 90];
 //升序
function myFunction(a, b) {
   return a - b;
} 
//降序
function myFunction2(a, b) {
  return b - a;
}
arr2.sort(myFunction);//[2, 6, 8, 12, 34, 37, 90]
console.log(arr2);// [90, 37, 34, 12, 8, 6, 2]

5、数组裁剪与合并

方法	作用	是否改变当前数组	返回值
splice(开始位置，删除的元素个数，并添加哪些新元素[可选参数，可传入多个])	从指定位置开始，删除指定个数的元素，并在这个位置补充指定的元素值	是	修改后的新数组
concat(另一个数组变量[可传入多个])	合并两个数组	否	合并后的新数组
slice(从第几个位置开始)	从指定位置开始，裁剪之后的元素，并返回裁剪的内容	是	裁剪后的新数组
reduce(自定义合并函数)	从左到右遍历每个元素，根据合并函数的规则将其合并为1个值。 自定义合并函数需接收以下参数——正在合并的值、当前元素数值、当前元素索引、数组本身	否	合并后的值
reduceRight(自定义合并函数)	从右到左遍历每个元素，其余同 reduce	否	合并后的值

let arrayl =【"a", "b", "e","f”];//以下语句从索引2开始,移除0个元素，并插入"c"和"d"
arrayl.splice(2,0，"c"，"d");
//以下语句输出['a'，'b','c','d'，'e'，'£']
onsole.log(array1);//以下语句从索引3开始,移除两个元素，不插入任何元素
arrayl.splice(3，2);//以下语句输出['a'，'b'，'c'，'£’]
console.log(array1);

//concat()方法
let arrayl =["a", "b"];let array2 =["c","d"];
let array3 = arrayl.concat(array2);
console.log(array1);//原来的数组不会改变，输出['a'，'b']console.log(array3);//输出['a’，'b'，c’'d']
let array4=arrayl.concat(array2,array3);console.log(array4);//輪出['a','b','c','d', 'a','b','c','d’]

//slice()方法
let arrayl =["a","b","c","d","e"];
let array2=array1.splice(1);//从索引1开始裁剪console.log(arrayl);//输出['a']console.log(array2);//输出['b'，'c'，蘢琳d''e11

//reduce0)和 reduceRight()只遍历顺序不同而已，其余规则一致，因此只介绍 reduce()即可，应用示例如下。
function myFunction(total,value,index，array){return total + value;
var array1=[5，11，23，9];
var sum =arrayl.reduce(myFunction);console.log(sum);//输出48

6、数组筛选与迭代

方法	作用	是否改变当前数组	返回值
forEach(自定义函数)	为每个数组元素调用一次函数。自定义合并函数需接收3个参数--当前元素值、当前元素索引、数组本身	否	无
map(自定义函数)	为每个数组元素调用一次函数，并返回一个新的数组。 自定义合并函数需接收3个参数--当前元素值、当前元素索引、数组本身。 同时自定义函数需要有返回值，该返回值将作为新数组的元素	否	新数组
flter(自定义筛选函数)	为每个数组元素调用一次筛选函数，筛选出符合指定条件的元素。 -当前元自定义筛选函数需接收3个参数一素值、当前元素索引、数组本身	否	新数组
find(自定义筛选函数)	返回符合筛选条件的首个元素。 自定义筛选函数的规则同 flterO)方法	否	元素值
every(自定义筛选函数)	为每个数组元素调用一次筛选函数，判定是否每个元素都符合筛选条件。 自定义筛选函数的规则同 flterO)方法	否	布尔值，表示是否符合
some(自定义筛选函数)	为每个数组元素调用一次筛选函数，判定是否至少有一个元素符合筛选条件。 自定义筛选函数的规则同 flterO)方法	否	布尔值，表示是否符合

//forEach()
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});
//将for in 改为forEach
const items = ["item1", "item2", "item3"];
const copyItems = [];
// before
for (let i = 0; i < items.length; i++) {
  copyItems.push(items[i]);
}
// after
items.forEach((item) => {
  copyItems.push(item);
});

//map()
const array1 = [1, 4, 9, 16];
const map1 = array1.map((x) => x * 2);
console.log(map1);// [2, 8, 18, 32]

//filter()
const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length > 6);
console.log(result);//["exuberant", "destruction", "present"]


function isBigEnough(value) {
  return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]


const array = [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
function isPrime(num) {
  for (let i = 2; num > i; i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return num > 1;
}
console.log(array.filter(isPrime)); // [2, 3, 5, 7, 11, 13]

const array1 = [5, 12, 8, 130, 44];
const found = array1.find((element) => element > 10);
console.log(found);//12

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


//使用箭头函数和解构赋值
const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];
const result = inventory.find(({ name }) => name === "cherries");
console.log(result); // { name: 'cherries', quantity: 5 }

const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));//true

//检查所有数组元素的大小
function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough); // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

//检查一个数组是否是另一个数组的子集
const isSubset = (array1, array2) =>
  array2.every((element) => array1.includes(element));
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 7, 6])); // true
console.log(isSubset([1, 2, 3, 4, 5, 6, 7], [5, 8, 7])); // false

const array = [1, 2, 3, 4, 5];
// Checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even));//true

//检测在数组中是否有元素大于10
function isBiggerThan10(element, index, array) {
  return element > 10;
}
[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
[2, 5, 8, 1, 4].some((x) => x > 10); // false
[12, 5, 8, 1, 4].some((x) => x > 10); // true

//检测数组中是否存在某个值
const fruits = ["apple", "banana", "mango", "guava"];
function checkAvailability(arr, val) {
  return arr.some((arrVal) => val === arrVal);
}
checkAvailability(fruits, "kela"); // false
checkAvailability(fruits, "banana"); // true

7、只读数组

关键字：readonly

出现原因：const关键字只能限定栈上的内容不可编辑，但是数组是引用类型，其数据存储在堆上，因此const关键字无法有效地限定数组为只读数组。

声明：

let array: readonly string[] = ['q','c','f']
//设置了readonly之后就不能操作数组了，比如push等

8、多维数组

ts中可以定义多为数组

let array:string[][] = [['a','b'],'c',['a','f','t']]
let array2:string[][][] = [['a','b'],'c',['a','f',['f','p']]]

二、元组

说明：元组是ts中独有的新类型，通常表示长度固定的数组。元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

//当访问一个越界的元素，会使用联合类型替代：
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型