JS基础3--数组和错误处理

目录

JS数组

数组的创建方法

1. 使用数组字面量

2. 使用Array构造函数

3. 使用Array.of()方法

4. 使用Array.from()方法

获取数组中的数据，数组的遍历

1. 直接通过索引访问

2. find()

3. findIndex()

4. filter()

5. map()

6. forEach()

7. reduce()

8. slice()

9. for 循环

10. for...of 循环

数组去重

数组转换为字符串

增加数组

数组操作

数组索引方法 

JavaScript 错误 

1.JavaScript try 和 catch语法、

2.Promise 错误处理 

3. 错误事件 

4.错误对象

---

---

JS数组

数组的创建方法

1. 使用数组字面量

let fruits = ["Apple", "Banana", "Cherry"];

2. 使用Array构造函数

let numbers = new Array(3); // 创建一个包含3个undefined元素的数组  
// numbers: [undefined, undefined, undefined]  // 直接在构造函数中提供数组元素  
let daysOfWeek = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");

3. 使用Array.of()方法

let numbers = Array.of(1, 2, 3); // [1, 2, 3]

4. 使用Array.from()方法

Array.from()方法从一个类似数组或可迭代的对象中创建一个新的、浅拷贝的数组实例

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 };  // 不使用Array.from()  
let arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']  // 使用Array.from()  
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']  // 也可以从字符串或Set中创建数组  
let string = 'hello';  
let stringArr = Array.from(string); // ['h', 'e', 'l', 'l', 'o']  let set = new Set([1, 2, 3, 4, 5]);  
let setArr = Array.from(set); // [1, 2, 3, 4, 5]

获取数组中的数据，数组的遍历

1. 直接通过索引访问

let arr = [1, 2, 3, 4, 5];  
console.log(arr[2]); // 输出: 3

2. find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

let arr = [5, 12, 8, 130, 44];  
let found = arr.find(element => element > 10);  
console.log(found); // 输出: 12

3. findIndex()

与 find() 类似，但 findIndex() 返回的是元素的索引，而不是元素本身

let arr = [5, 12, 8, 130, 44];  
let index = arr.findIndex(element => element > 10);  
console.log(index); // 输出: 1

4. filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

let arr = [5, 12, 8, 130, 44];  
let filtered = arr.filter(element => element > 10);  
console.log(filtered); // 输出: [12, 130, 44]

5. map()

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

let arr = [1, 2, 3, 4];  
let doubled = arr.map(element => element * 2);  
console.log(doubled); // 输出: [2, 4, 6, 8]

6. forEach()

forEach() 方法对数组的每个元素执行一次提供的函数。

let arr = [1, 2, 3, 4, 5];  
arr.forEach(function(element) {  console.log(element);  
});  // 使用箭头函数  
arr.forEach(element => console.log(element));

7. reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

let arr = [1, 2, 3, 4];  
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);  
console.log(sum); // 输出: 10

8. slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 到 end（不包括 end）选择的数组的部分浅拷贝。

let arr = [1, 2, 3, 4, 5];  
let sliced = arr.slice(1, 4);  
console.log(sliced); // 输出: [2, 3, 4]

9. for 循环

let arr = [1, 2, 3, 4, 5];  
for (let i = 0; i < arr.length; i++) {  console.log(arr[i]);  
}

10. for...of 循环

for...of 循环在ES6中被引入，它用于遍历可迭代的对象（包括Array, Map, Set, arguments等）

let arr = [1, 2, 3, 4, 5];  
for (let value of arr) {  console.log(value);  
}

数组去重

创建一个新数组来存储没有重复的元素

利用新数组indexof数组元组，如果返回-1就说明新数组里面没有修改元素

封装一个去重函数

   //数组去重function uniqueArray(arr) {var newArr=[];for(var i=0;i<arr.length;i++){if(newArr.indexOf(arr[i])==-1){newArr.push(arr[i]);}}return newArr;}var uniqueArr=[1,2,3,4,5,6,5,4,3,2,1];console.log(uniqueArray(uniqueArr));

数组转换为字符串

方法：

1.toString;把数组转化成字符串，逗号分隔每一项

2.join('分隔符')：用于把数组中的所有元素转换成字符串

3.concat：连接两个或者多个数组，不影响原数组

4.slice:数组截取slice(begin,end)

5.数组删除splice(第几个开始，要删除个数)

增加数组

1.push（参数1，参数2，……）：在数组末尾增加一个或者多个元素

2.unshift(参数1，参数2，……)：在数组开头添加一个或者多个元素

3.pop（）：删除数组的最后一个元素

4.shift()：删除数组的第一个元素，数组长度减1，无参数修改原数组

数组操作

 //数组翻转function reverseArray(arr) {return arr.reverse();}var reverseArr=[1,2,3,4,5];console.log(reverseArray(reverseArr));//数组拼接function concatArray(arr1,arr2) {return arr1.concat(arr2);}var concatArr1=[1,2,3];var concatArr2=[4,5,6];console.log(concatArray(concatArr1,concatArr2));//数组求和function sumArray(arr) {return arr.reduce(function(a,b){return a+b});}var sumArr=[1,2,3,4,5];console.log(sumArray(sumArr));//数组求平均function averageArray(arr) {return sumArray(arr)/arr.length;}var averageArr=[1,2,3,4,5];console.log(averageArray(averageArr));//数组排序var sortArr=[3,1,4,1,5,9,2,6,5,3,5];console.log(sortArr.sort(function(a,b){return a-b}));//数组查找var searchArr=[1,2,3,4,5,6,7,8,9,10];console.log(searchArr.indexOf(5)); // 4console.log(searchArr.includes(5)); // true

数组索引方法 

1. indexOf()
indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

let arr = [2, 5, 9];  
console.log(arr.indexOf(2)); // 输出: 0  
console.log(arr.indexOf(7)); // 输出: -1

2. lastIndexOf()
lastIndexOf()方法返回指定元素在数组中的最后一个索引，如果不存在，则返回-1。

let arr = [2, 5, 9, 5];  
console.log(arr.lastIndexOf(5)); // 输出: 3

JavaScript 错误 

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。

1.JavaScript try 和 catch语法、

try {  // 尝试执行的代码  
} catch (error) {  // 处理错误的代码  
} finally {  // 无论是否发生错误都会执行的代码  console.log('清理工作');  
}

2.Promise 错误处理 

在使用 Promise 时，你可以使用 .catch() 方法来处理异步操作中的错误。

fetch('https://example.com/data.json')  .then(response => response.json())  .catch(error => console.error('处理数据时出错:', error));

3. 错误事件 

在浏览器环境中，某些全局错误（如脚本执行错误）可能不会通过普通的 try...catch 捕获。在这种情况下，可以使用 window.onerror 事件处理器来捕获和处理这些错误。

window.onerror = function(message, source, lineno, colno, error) {  console.error('捕获到全局错误:', message, '在', source, '的', lineno, '行', colno, '列', error);  return true; // 阻止错误信息的默认行为（如显示在控制台）  
};

4.错误对象

当 JavaScript 运行时遇到错误时，它会创建一个包含错误信息的对象。这个对象会被 throw 操作抛出，并由 catch 子句捕获。Error 对象是 JavaScript 中所有错误类型的原型，但你可以根据需要创建自定义错误类型

class MyCustomError extends Error {  constructor(message) {  super(message);  this.name = "MyCustomError";  }  
}  throw new MyCustomError('发生了自定义错误！');