JavaScript案例

JavaScript案例

1. 数组去重

function removeDuplicates(arr) {
  return arr.filter((item, index) => arr.indexOf(item) === index);
}

const arr = [1, 2, 3, 2, 4, 1, 5];
const newArr = removeDuplicates(arr);
console.log(newArr); // [1, 2, 3, 4, 5]

2. 数组求和

function sum(arr) {
  return arr.reduce((acc, cur) => acc + cur, 0);
}

const arr = [1, 2, 3, 4, 5];
const sum = sum(arr);
console.log(sum); // 15

3. 数组排序

function sort(arr) {
  return arr.sort((a, b) => a - b);
}

const arr = [5, 3, 1, 4, 2];
const sortedArr = sort(arr);
console.log(sortedArr); // [1, 2, 3, 4, 5]

4. 数组元素查找

function find(arr, target) {
  return arr.findIndex((item) => item === target);
}

const arr = [1, 2, 3, 4, 5];
const index = find(arr, 3);
console.log(index); // 2

5. 对象合并

function merge(obj1, obj2) {
  return {...obj1,...obj2 };
}

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = merge(obj1, obj2);
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }

6. 9x9乘法表

function printTable() {
  for (let i = 1; i <= 9; i++) {
    let row = "";
    for (let j = 1; j <= i; j++) {
      row += `${i}x${j}=${i * j} `;
    }
    console.log(row);
  }
}

printTable();

输出：

1x1=1 
1x2=2 2x2=4 
1x3=3 2x3=6 3x3=9 
1x4=4 2x4=8 3x4=12 4x4=16 
1x5=5 2x5=10 3x5=15 4x5=20 5x5=25 
1x6=6 2x6=12 3x6=18 4x6=24 5x6=30 6x6=36 
1x7=7 2x7=14 3x7=21 4x7=28 5x7=35 6x7=42 7x7=49 
1x8=8 2x8=16 3x8=24 4x8=32 5x8=40 6x8=48 7x8=56 8x8=64 
1x9=9 2x9=18 3x9=27 4x9=36 5x9=45 6x9=54 7x9=63 8x9=72 9x9=81 

7. 生成指定长度的随机字段

function generateRandomString(length) {
  const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  let result = "";
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}

const randomString = generateRandomString(32);
console.log(randomString); // nOxOkcFMIehHuDgpruQksUNd12hDMyrz

8. 数组元素计数

function count(arr) {
  const obj = {};
  for (let i = 0; i < arr.length; i++) {
    const item = arr[i];
    if (obj[item]) {
      obj[item]++;
    } else {
      obj[item] = 1;
    }
  }
  return obj;
}

const arr = [1, 2, 3, 2, 4, 1, 5];
const countObj = count(arr);
console.log(countObj); // {1: 2, 2: 2, 3: 1, 4: 1, 5: 1}

9. Array reduce() 方法的使用

const arr = [1, 2, 3, 4, 5];

// reduce() 方法接收一个函数作为累加器，数组中的每个元素（从左到右）开始合并，最终计算为一个值。
const sum = arr.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15

// reduce() 方法还可以接收第二个参数，作为初始值。
const product = arr.reduce((acc, cur) => acc * cur, 1);
console.log(product); // 120


// 数组求和
const arr1 = [1, 2, 3, 4, 5];
const sum1 = arr1.reduce((acc, cur) => acc + cur, 0);
console.log(sum1); // 15


// 数组求积
const arr2 = [1, 2, 3, 4, 5];
const product1 = arr2.reduce((acc, cur) => acc * cur, 1);
console.log(product1); // 120

10. 数组 filter() 方法的使用

const arr = [1, 2, 3, 4, 5];


// filter() 方法接收一个函数作为参数，数组中的每个元素（从左到右）依次执行该函数，返回 true 的元素组成的新数组。
const newArr = arr.filter((item) => item % 2 === 0);
console.log(newArr); // [2, 4]


// 数组去重
const arr1 = [1, 2, 3, 2, 4, 1, 5];
const newArr1 = arr1.filter((item, index) => arr1.indexOf(item) === index);
console.log(newArr1); // [1, 2, 3, 4, 5]

11. 数组 sort() 方法的使用

const arr = [5, 3, 1, 4, 2];

// sort() 方法接收一个函数作为参数，数组中的元素按照该函数的返回值进行排序。
const sortedArr = arr.sort((a, b) => a - b);
console.log(sortedArr); // [1, 2, 3, 4, 5]


// 数组反转
const arr1 = [1, 2, 3, 4, 5];
const reversedArr = arr1.sort((a, b) => b - a);
console.log(reversedArr); // [5, 4, 3, 2, 1]

12. 数组 find() 方法的使用

const arr = [1, 2, 3, 4, 5];

// find() 方法接收一个函数作为参数，数组中的每个元素（从左到右）依次执行该函数，返回第一个返回 true 的元素。
const index = arr.findIndex((item) => item === 3);
console.log(index); // 2


// 数组元素查找
const arr1 = [1, 2, 3, 4, 5];
const index1 = arr1.findIndex((item) => item === 3);
console.log(index1); // 2

13. 数组 map() 方法的使用

const arr = [1, 2, 3, 4, 5];

// map() 方法通过对每个数组元素执行函数来创建新数组
// map() 方法不会对没有值的数组元素执行函数
// map() 方法不会更改原始数组
const newArr = arr.map((item) => item * 2); // [2, 4, 6, 8, 10]
console.log(newArr);

// 数组平方
const arr1 = [1, 2, 3, 4, 5];
const newArr1 = arr1.map((item) => item * item); // [1, 4, 9, 16, 25]
console.log(newArr1);

14. 对象解构赋值

const obj = { a: 1, b: 2, c: 3 };

// 对象解构赋值
const { a, b, c } = obj;
console.log(a, b, c); // 1 2 3


// 对象合并
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = {...obj1,...obj2 };
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }

15. loop 语句的使用

// for 循环
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// for...in 循环
const obj = { a: 1, b: 2, c: 3 };
for (let key in obj) {
  console.log(key);
}

// while 循环
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

16. loop 语句的嵌套

// 嵌套 for 循环
for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    console.log(`i=${i}, j=${j}`);
  }
}

// 嵌套 while 循环
let i = 0;
while (i < 3) {
  let j = 0;
  while (j < 3) {
    console.log(`i=${i}, j=${j}`);
    j++;
  }
  i++;
}