「2022」手写JS

ianutt

已于 2023-02-21 22:06:45 修改

阅读量120

点赞数

文章标签： javascript

于 2022-04-21 21:34:56 首次发布

本文链接：https://blog.csdn.net/ianutt/article/details/124332311

版权

【三目运算符】判断年龄大于18的是成年人还是未成年

var age = 20;
var result = age >= 18 ? "成年人": "未成年";

【switch循环】输入节日，判断什么节日需要做什么

var holidayName = prompt("请输入节日");
switch (holidayName){
    case "情人节":
        alert("买玫瑰看电影");
        break; //不加这个会case穿透，会执行下面的语句
    case "平安夜":
        alert("买苹果吃大餐");
        break;
    case "生日会":
        alert("买蛋糕");
        break;
    default:
        alert("上班");
}

【while循环】打印0-99的数字

var i = 0;
while(i<100){
	console.log(i)
	i++
}

【for循环】打印100~1的数字

for(var i=100; i>0; i--){
	console.log(i);
}

【for循环】计算0-100奇数的和

var oddTotal = 0;
var evenTotal = 0;
for(var i=0; i<100; i++){
	//取余数为0就是偶数，否则就是奇数
	if( i % 2 === 0 ){
		evenTotal += i;
	}else{
		oddTotal += i;
	}
}
console.log(evenTotal)
console.log(oddTotal)

【for循环】正三角爱心（第一行一个，第二行二个…）

for(var i=0; i<6; i++){ 
    //循环里面每行❤的个数，不+1第一行的❤就是0个，也可以写成j<=i;
    for (var j=0; j<i+1; j++){ 
        document.write("❤ ");
    }
    document.write("<br />"); //每行结尾处换行
}

【for循环】九九乘法表

//初始化值都从1开始
for (var i = 1; i < 10; i++){
    for ( var j = 1; j <= i; j++){
        var str = j + "*" + i + "=" +  j * i + "&emsp;"
        document.write(str)
    }
    document.write("<br />");
}

【for循环】正向遍历一个数组var nums = [100, 30, 68, 96, 128, 9];

var nums = [100, 30, 68, 96, 26, 128, 9];
for(var i = 0; i < nums.length; i++){
	console.log(i);//打印索引值
	console.log(nums[i]);//打印数组内容
}

【for循环】反向遍历一个数组

//通过nums.length-1先获取最后一个元素
for(var i = nums.length-1; i >= 0; i--){
	console.log(i);//打印索引值
	console.log(nums[i]);//打印数组内容
}

【for循环】数组中元素拼接，所有的元素使用、进行分割

var msg = ""; //要有初始化值，没有赋值就会是”undefined“
for(var i = 0; i < nums.length; i++){
    //1.先把所有的数组内容拼接到msg中
 	msg += nums[i];//100306896261289
	
	//2.用-分割
	//方法一：除了最后一个元素（不等于最后一个），其他的都加“-”
	if( i !== nums.length - 1 ){
		msg += "-"
	}
	
	//方法二：如果是最后一个元素，用break跳出循环
	/*if( i === nums.length - 1 ){
		break;
	}
	msg += "-";*/
	
	//方法三：先遍历前面3个元素都加上-，最后单独拼接最后一个元素
}
console.log(msg);

【for循环】求数组的和和平均值

var total = 0; //要有初始化值，没有赋值就会是undefined
for(var i = 0; i < nums.length; i++){
	console.log(nums[i]);//确保可以获取每个数字
	total += nums[i]
}
console.log(total);//和：457
var avarage = total / nums.length;
console.log(avarage);//平均值：68.29

【for循环】求数组中的最大值

/*1.定义一个变量，变量保存第一个数字
	2.遍历所有的数字
	3.将所有遍历的数字和保存的第一个数字进行比较
      如果 遍历的数字 > 保存的第一个数字
      就将遍历的数字放到保存的变量中*/
var max = nums[0];
for (var i = 0; i < nums.length; i++){
    console.log(nums[i]); //打印遍历的数字
    if (nums[i] > max){
        max = nums[i];
    }
}
console.log("最大值"+max); //128

【for循环】数组的反转操作

//只需要遍历到数组中间进行交换
for (var i = 0; i < nums.length / 2; i++ ){
    var temp = nums[i];
    nums[i] = nums[nums.length-1-i];
    nums[nums.length-1-i] = temp;
}
console.log(nums)

【函数】冒泡排序

【函数】选择排序

let nums = [22, 10, 8, 76, 102, 2, 15];
function sortArray(arr) {
 for (var j = 0; j < arr.length; j++) {
   for (var i = j + 1; i < arr.length; i++) {
     if (arr[j] > arr[i]) {
       var temp = arr[j];
       arr[j] = arr[i];
       arr[i] = temp;
     }
   }
 }
}
sortArray(nums);
console.log(nums);

【函数】加法计算器

function sum(sum1, sum2){
    return sum1 + sum2;
}
var result1 = sum(10, 20);
console.log(result1); //10+20=30

【函数】计算矩形的面积：宽度*高度

function calcRectArea(width, height){
    return width * height;
}
var result2 = calcRectArea(10, 20);
console.log(result2);//10*20=200

【函数】计算圆型的面积：πr²

function calcCircleArea(radius){
    return Math.PI * radius * radius;
}
var result3 = calcCircleArea(10);
console.log(result3);

【函数】计算1~n数字的和

function calcNSum(n){
    var total = 0;
    for (var i = 1; i <= n; i++){
        //console.log(i); //打印1~n的值
        total += i;
    }
    return total;
}
var result4 = calcNSum(5);
console.log(result4);

【函数】数组的反转操作（如果有多个数组可以调用一个函数）

function reverseArray(arr){
    for (var i = 0; i < arr.length / 2; i++ ){
        var temp = arr[i];
        arr[i] = arr[arr.length-1-i];
        arr[arr.length-1-i] = temp;
    }
    return arr;
}

var nums1 = [100, 30, 68, 96, 26, 128, 9];
nums1 = reverseArray(nums1);
console.log(nums1);

var nums2 = [116, 3, 90, 68, 96, 26, 128, 19];
nums2 = reverseArray(nums2);
console.log(nums2);

【函数】清除字符串前后空格

注意：字符串中间的空格不会被清除

let str = ' 123  4 '
let backStr = str.trim()
consose.log(backStr)  // '123  4'

【函数】20876转换成两万零八百七十六

【函数】数组去重

// 第一种方法：使用set去重
let arr = [20, 21, 23, 25, 21, 20 ];
let item = [ ...new Set(arr)];
console.log(item);

// 第二种方法：使用for循环+indexOf去重
var arr = [1, 2, 3, 4, 4, 5, 6, 6, 6, 7]
var newArr = []
for (let i = 0; i < arr.length; i++) {
  if (newArr.indexOf(arr[i]) == -1) {
    newArr.push(arr[i])
  }
}
console.log(newArr);

// 第三种方法：使用for循环+includes去重
var arr = [1, 2, 3, 4, 4, 5, 6, 6, 6, 7]
var newArr = [];
for (var i = 0; i < arr.length; i++) {
  if (newArr.includes(arr[i]) == false) {
    newArr.push(arr[i]);
  }
}
console.log(newArr);

// 第四种方法：使用filter+indexOf去重
var arr = [1, 2, 3, 4, 4, 5, 6, 6, 6, 7]
function removeDuplicate(arr) {
  return arr.filter((item, index) => {
    return arr.indexOf(item) === index
  })
}
const result = removeDuplicate(arr)
console.log(result)

【函数】手写闭包

function f1(){
	var n = 999;
	function f2(){
		alert(n);
	}
	return f2;
}
var result = f1();
result(); // 999

【函数】手写Promise

【函数】防抖

function debounce(fn, delay) {
    let timer = null;
    return function(...args){
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay)
    }
}

【函数】节流

function throttle(fn, delay) {
    let flag = true;
    return function (...args) {
      if (!flag) return;
      flag = false;
      setTimeout(() => {
        fn.apply(this, args);
        flag = true;
      }, delay)
    }
}

【事件循环】1

定时器里面有.then会先执行里面的.then

console.log(1) // 同步
setTimeout(() => {
  console.log(2) // 异步：宏任务 setTimeout1
  Promise.resolve().then(() => { // 异步：微任务 then1
    console.log(3)
  })
});
console.log(4) // 同步
new Promise((resolve,reject) => {
  console.log(5) // 同步
  resolve()
}).then(() => { // 异步：微任务 then2
  console.log(6)
  setTimeout(() => {
    console.log(7) // 异步：宏任务 setTimeout2
  })
})
console.log(8) // 同步

【事件循环】2

console.log('start')
setTimeout(() => {
  console.log('time1');
  Promise.resolve().then(() => {
    console.log('promise1')
  })
}, 0)
setTimeout(() => {
  console.log('time2');
  Promise.resolve().then(() => {
    console.log('promise2')
  })
}, 0)
Promise.resolve().then(() => {
  console.log('promise3')
})
console.log('end')
//start end promise3 time1 promise1 time2 promise2

【面试题】事件循环

console.log(1)
setTimeout(() => {
  console.log(2)
  new Promise(resolve => {
    console.log(3)
    resolve()
  }).then(() => {
    console.log(4)
  })
  process.nextTick(() => {
    console.log(5)
  })
})
process.nextTick(() => {
  console.log(6)
})
Promise.resolve().then(() => {
  setTimeout(() => {
    console.log(7)
  })
}).then(() => {
  console.log(8)
})
setTimeout(() => {
  console.log(9)
  process.nextTick(() => {
    console.log(10)
  })
  new Promise(resolve => {
    console.log(11)
    resolve()
  }).then(() => {
    console.log(12)
  })
})
//1 6 8 2 3 5 4 9 11 10 12 7

【面试题】数组

var a = [];
var b = a;
a[2] = 2;
b[3] = 3;
console.log(a.length) //4
console.log(b.length) //4
console.log(a) //empty empty 2 3
console.log(b) //empty empty 2 3

【面试题】构造函数

function Obj() {
  this.a = 100;
}
Obj.prototype.a = 300;
Obj.a = 200;
var obj = new Obj();
console.log(obj.a); //100

【经典题】

//考点：变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级

//函数声明，声明了一个Foo函数，里面有个全局变量getName指向一个匿名函数
function Foo() {
  getName = function () {
    console.log(1)
  }
  return this;
}
//Foo函数，创建了一个静态属性getName指向一个匿名函数
Foo.getName = function () {
  console.log(2)
}
//Foo函数的原型上创建了一个getName方法
Foo.prototype.getName = function () {
  console.log(3)
}
//函数声明表达式，定义一个变量getName指向一个匿名函数 
var getName = function () {
  console.log(4)
}
//函数声明，声明了一个getName函数
function getName() {
  console.log(5)
}

Foo.getName(); //2
getName(); //4 //先函数声明提升，再变量声明提升。var getName会把function getName覆盖
Foo().getName(); //先执行Foo()，里面的getName没有var所以是归全局对象所有，
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();