【js重点案例】变量、流程控制、数组、对象和函数

day01

变量的声明和使用

let userName = "张三";
let age = 20;
console.log(userName);
console.log(age);

let uname = prompt("请输入昵称：");
document.write(uname);

交换两个变量的值

let a = 1;
let b = 2;
let temp;
temp = a;
a = b;
b = temp;
console.log(a, b);

模板字符串

let uname = prompt("请输入你的名字：");
let age = prompt("请输入你的年龄：");
document.write(`大家好，我叫${uname}，今年${age}岁了`);

day02

switch分支语句

let num = prompt("请输入一个数字");
switch (num) {
  case 1:
    alert("用户您输入的是数字1");
  case 2:
    alert("用户您输入的是数字2");
  case 3:
    alert("用户您输入的是数字3");
  default:
    alert("用户您输入的是非1、2、3的数字");
}

// 分析错误：switch使用全等比较，所以需要将用户的输入转为数值型；每个case后应该使用break结束，否则会继续执行下面的case
// 正确写法：
let num = +prompt("请输入一个数字");
switch (num) {
    case 1:
        alert("用户您输入的是数字1");
        break;
    case 2:
        alert("用户您输入的是数字2");
        break;
    case 3:
        alert("用户您输入的是数字3");
        break;
    default:
        alert("用户您输入的是非1、2、3的数字");
}

day03

数组、遍历数组、操作数组元素

数组的声明和使用

let arr = ['小明', 18, false];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

遍历数组求值

let arr = [5, 4, 3, 2, 1];
let max = arr[0];
/* 这里的最小值不能直接给0 */
let min = arr[0];
let sum = 0;
let avg = 0;

for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
    if (arr[i] > max) {
        max = arr[i];
    }
    if (arr[i] < min) {
        min = arr[i];
    }
}

avg = sum / arr.length;

console.log("sum:", sum);
console.log("max:", max);
console.log("min:", min);
console.log("avg:", avg);

使用 splice() 函数操作数组元素

let arr = ["第一项", "第二项", "第三项", "第四项"];
// 删除元素
console.log(arr.splice(1, 1));
console.log(arr);
console.log(arr.splice(1));
console.log(arr);

操作数组元素的其他方法

let names = ["小明", "小红", "小刚"];
console.log(names);

console.log(names.push("小猪猪", "小呆呆"));
console.log(names);

console.log(names.unshift("小李", "小王"));
console.log(names);

console.log(names.pop());
console.log(names);

console.log(names.shift());
console.log(names);

数组元素排序

// 升序排序
arr.sort(function (a, b) {
    return a - b;
});
// 降序排序
arr.sort(function (a, b) {
    return b - a;
});

day04

函数的基本使用、逻辑中断、默认参数

计算两数之和

// 方式一
function getSum(x = 0, y = 0) {
    return x + y;
}
console.log(getSum(1, 2));
console.log(getSum());

// 方式二
function getSum(x, y) {
    x = x || 0;
    y = y || 0;
    return x + y;
}
console.log(getSum(1, 2));
console.log(getSum());

查找元素在数组中的下标

function findIndex(ele = "", arr = []) {
    let index = -1;
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] === ele) {
            index = i;
            break;
        }
    }
    return index;
}
console.log(findIndex(1, [1, 2, 3, 4, 5]));

判断数组是否存在某个元素

function some(ele = "", arr = []) {
    let flag = false;
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] === ele) {
            flag = true;
            break;
        }
    }
    return flag;
}
console.log(some(3, [1, 2, 3, 4, 5, 6]));

求任意数组的和或平均值

// - 参数一： 接受实参传递过来的数组
// - 参数二:  如果是true或者不传递参数是求和操作;如果传递过来的参数是false则是求平均值
let handleData = function (arr = [], flag = true) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    
    return flag ? sum : sum / arr.length;
};

console.log(handleData([1, 2, 3]));
console.log(handleData([1, 2, 3, 4, 5], true));
console.log(handleData([1, 2, 3, 4, 5], false));

分析 num 变量的作用域

let num = 1;
console.log(num); //1
num = 3;
console.log(num); //3
function fn(a) {
    console.log(num); //3
    num = 2;
    console.log(num); //2
}
fn(num);
console.log(num); //2

函数表达式必须先声明再调用

fn(1);
let fn = function (a) {
    alert(a);
};

day05

对象、操作对象、遍历对象数组、内置对象Math

遍历一个对象

for (let key in pig) {
    // console.log(pig.key); //undefined，pig对象中没有一个叫key的属性
    console.log(key, typeof key);
    console.log(pig[key]);
}

遍历对象数组渲染动态页面

let students = [
    { name: "小明", age: 18, sex: "男", hometown: "河北省" },
    { name: "小红", age: 19, sex: "女", hometown: "河南省" },
    { name: "小刚", age: 17, sex: "男", hometown: "山西省" },
    { name: "小丽", age: 18, sex: "女", hometown: "山东省" },
];
let str = "";
for (let i = 0; i < students.length; i++) {
    // students[i] 数组中每一个对象
    str += `
          <tr>
            <td>${i + 1}</td>
            <td>${students[i].name}</td>
            <td>${students[i].age}</td>
            <td>${students[i].sex}</td>
            <td>${students[i].hometown}</td>
          </tr>`;
}
const tbody = document.querySelector("tbody");
tbody.innerHTML = str;

生成随机数

// 0-0.99999
console.log(Math.random());
// 生成一个 0-10之间的随机整数
console.log(Math.floor(Math.random() * (10 + 1)));
// 生成一个 5-15之间的随机整数
console.log(Math.floor(Math.random() * (10 + 1)) + 5);
// 生成一个 n-m之间的随机整数
console.log(Math.floor(Math.random() * (m - n + 1)) + n);
// 随机生成一个合法的数组索引
let random = Math.floor(Math.random() * arr.length)

随机点名案例

let arr = ["关羽", "张飞", "赵云", "马超", "黄忠"];
let random = Math.floor(Math.random() * arr.length);
document.write(arr[random]);

生成随机颜色案例

// 生成随机颜色
// 如果参数传递的是 true 或者无参数，则输出一个随机十六进制的颜色
// 如果参数传递的是 false ，则输出一个随机rgb的颜色
function getRandomColor(flag = true) {
    if (flag) {
        let arr = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
        let str = "#";
        for (let i = 0; i < 6; i++) {
            const random = Math.floor(Math.random() * arr.length);
            str += arr[random];
        }
        return str;
    } else {
        const r = Math.floor(Math.random() * 256);
        const g = Math.floor(Math.random() * 256);
        const b = Math.floor(Math.random() * 256);
        return `rgb(${r},${g},${b})`;
    }
}

console.log(getRandomColor(true)); //#7de334
console.log(getRandomColor(false)); //rgb(253,46,134)
console.log(getRandomColor()); //#525661

不同的数据类型赋值问题

// 基本数据类型赋值
let x = 10;
let y = x;
x = 20;
console.log(y); //10

// 引用数据类型赋值
let obj = {
    age: 18,
};
let obj2 = obj;
obj.age = 20;
console.log(obj2.age); //20