js技术

🔷 模块化

// 单个导出
export default XXX;
import XXX from "";

// 多个导出
export { XXX1,XXX2 }
import { XXX1,XXX2 } from ''

📖 展开语法

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

✅ 异步Promise

new Promise(function (resolve, reject) {
    // 要做的事情...
    // 表示异步加载，当在加载这个函数的时候，可以执行后面或其他的函数，并不用等待
    // resolve表示成功, reject表示失败
});

// then：用于处理 Promise 成功状态的回调函数。
// catch：用于处理 Promise 失败状态的回调函数。
// finally：无论 Promise 是成功还是失败，都会执行的回调函数。

// 实例：
const name = new Promise(function (resolve, reject) {
		if (1 == 1) {
			resolve("成功！")
		} else {
			reject("失败！")
		}
	});

	name.then(res => {
		console.log(res);
	}).catch(error => {
		console.log(error);
	});

🔒 async/await

// async是声明一个异步函数，其作用和promise差不多
async function timeout() {
      return 'hello world!'
    }
    timeout().then(res => {
      console.log(res)
    })
    console.log('我虽然在后面，但是先执行')

🎉 三大循环

• 性能：for > forEach > map

map

• map会返回一个新数组,不会改变原数组
• 参数item, index, array——内容，下标，原数组

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

// map 总是返回一个新数组—— { }表示函数返回值，所以需要return返回数据
const result = numbers.map(num => {
  return num * 2; // 必须要有返回值
});
// 另一种写法 注：多行代码一定要上面那种返回值
const result = numbers.map(num => num * 2);

// 比如：
const result = numbers.map(num => {
  const doubled = num * 2;
  const squared = doubled * doubled;
  return squared;
});

// 跳过：
// 会跳过3，不执行，输出原来的数据
if(item === 3) {
        return;
    }

forEach

• forEach会改变原数组，没有返回值
• 参数item, index, array——内容，下标，原数组

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(item, index, array => {
  array[index] = item * 2;
});
console.log(numbers); // [2, 4, 6, 8, 10]


// 跳过：
// 跳过3，不执行，但是不会输出等于3的内容
if (num === 3) {
    return;
  }

for

break; // 终止函数
continue; // 跳过本次循环，继续下一次循环
return // 终止函数，并且返回return后面的值

⚙️ 数组

// 合并数组
var newArray = array1.concat(array2, array3);
// 数组变字符串
array.join()
// 删除指定元素，从索引2开始删除，删除1个元素
array.splice(2, 1)
// 在数组的末尾添加新元素
array.push("new")

筛选数组-filter

• filter() 方法筛选出符合条件的的元素
• 参数item, index, array——内容，下标，原数组

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(num => {
  return num > 3;
});
console.log(result); // [4, 5]

筛选数组-find

• find() 方法返回数组中符合条件的第一个元素
• 参数item, index, array——内容，下标，原数组

const numbers = [1, 2, 3, 4, 5];
const result = numbers.find(num => {
  return num > 3;
});
console.log(result); // 4

递归算法

• 终止条件：什么时候停止自己调用自己？（比如套娃到最小的那个）
• 递归调用：自己调用自己，但传入的参数要更接近终止条件（比如每次用更小的娃娃）
• 逻辑处理：每次调用时要做什么（比如打开当前娃娃，看看里面）