JS 语句语法2

11.字符串拼接.js

// 利用+号拼接字符串
let firstName = "小";
let lastName = "王";

console.log("我的姓名是:" + firstName + lastName + "吧");

// es6提供模板字符串
console.log(`我的姓名是:${firstName},${lastName},吧`);

12.函数.js

// 具名函数: 有名字的函数
// es5的写法
function sum(a, b) {
  return a + b;
}
const res = sum(10, 20);
console.log(res);

// 匿名函数
const test = function (a) {
  console.log("test" + a);
};
test(200);

// 自调用函数
(function (a) {
  console.log("----" + a);
})(1000);

// es6的箭头函数
const sum1 = (a, b) => {
  return a * b;
};
console.log(sum1(10, 10));

// 函数参数类型: 必选参数, 可选参数(默认值参数), 剩余参数
function params(a, b = 10, ...args) {
  console.log("===", a, b, args);
  return a;
}
params(20, 100, 1, 2, 3, 4, 5);

// 字符串数组的转化
let str = "a,b,c,d";
console.log(str.split(","));
let arr = [1, 2, 3, 4, 5];
console.log(arr.join(","));

13.条件语句.js

// switch语句
// if elif...

let num = 10;
if (num < 10) console.log("小于10");
else if (num == 10) console.log("等于10");
else console.log("大于10");

if (num == 10) {
}

// 三目(元)运算符替换简单的if else语句
console.log(num == 10 ? "等于10" : "不等于10");

let sex = "a";
switch (sex) {
  case "男":
    console.log("体力活, 寿命短");
    break;
  case "女":
    console.log("寿命长");
    break;
  default:
    // 默认值, 类似于else
    console.log("不清楚");
    break;
}

setInterval(function () {
  console.log("倒计时");
}, 1000); // 时间单位是毫秒

14.案例-个税计算.js

// 税前工资
const salary = 10000;
// 计算年三险一金
const bxMoney = salary * (0.05 + 0.02 + 0.01 + 0.1) * 12;
// 计算年应纳税额
const ynMoney = salary * 12 - 5000 * 12 - bxMoney;

// 根据年应纳税额获取预扣率和扣除数
let yk = 0; // 预扣率
let kcs = 0; // 扣除数
if (ynMoney <= 36000) {
  yk = 0.03;
  kcs = 0;
} else if (ynMoney <= 144000) {
  yk = 0.1;
  kcs = 2520;
} else if (ynMoney <= 300000) {
  yk = 0.2;
  kcs = 16920;
} else if (ynMoney <= 420000) {
  yk = 0.25;
  kcs = 31920;
} else if (ynMoney <= 660000) {
  yk = 0.3;
  kcs = 52920;
} else if (ynMoney <= 960000) {
  yk = 0.35;
  kcs = 85920;
} else {
  yk = 0.45;
  kcs = 181920;
}

// 算年个人所得税
const res = ynMoney * yk - kcs;
console.log(res);

15.案例-车牌限行.js

// let code = "豫AF7D5N";

let code = prompt("输入车牌:");

// 获取车牌尾号
function getNumber() {
  let number = 0; // 记录循环期间的数字
  for (let i = 0; i < code.length; i++) {
    const char = code[i];
    if (!isNaN(char * 1)) {
      number = char * 1;
    }
  }
  return number;
}
const endNumber = getNumber();

// 判断是否限行
function isLimitRun() {
  const date = new Date();
  const weekDay = date.getDay();
  switch (weekDay) {
    case 1:
      if (endNumber == 1 || endNumber == 6) console.log("今日限行");
      else console.log("今日不限行");
      break;
    case 2:
      if (endNumber == 2 || endNumber == 7) console.log("今日限行");
      else console.log("今日不限行");
      break;
    case 3:
      if (endNumber == 3 || endNumber == 8) console.log("今日限行");
      else console.log("今日不限行");
      break;
    case 4:
      if (endNumber == 4 || endNumber == 9) console.log("今日限行");
      else console.log("今日不限行");
      break;
    case 5:
      if (endNumber == 5 || endNumber == 0) console.log("今日限行");
      else console.log("今日不限行");
      break;
    default:
      console.log("周六日不限行");
      break;
  }
}

isLimitRun();

16.案例-字符串练习.js

// 第一题
const charObj = {};
const str = "abaaaaaaccccckcaa";
for (let i = 0; i < str.length; i++) {
  const char = str[i];
  // 判断获取的char这个字符在charObj对象中是否存在键值对，不存在说明是第一次出现，存在说明之前出现过，让次数+1
  if (!charObj[char]) charObj[char] = 1; // 第一次出现这个字符
  else charObj[char] += 1; // 说明字符不是第一次出现
}
console.log(charObj);

// 第二题
let maxValue = 0;
let maxChar = "";
for (key in charObj) {
  const value = charObj[key];
  if (maxValue < value) {
    maxValue = value;
    maxChar = key;
  }
}
console.log(maxChar, maxValue);

// 第三题
const chars = {};
for (let i = 0; i < str.length; i++) {
  const char = str[i];
  if (!chars[char]) chars[char] = 1;
}
console.log(Object.keys(chars).join(""));

17.for循环.js

// for循环基本写法: 遍历字符串和数组，都是可迭代对象，都有下标的概念
const arr = ["a", "b", "c"];
for (let index = 0; index < arr.length; index++) {
  const element = arr[index];
  // console.log(element);
}
// 倒序遍历
for (let index = arr.length - 1; index >= 0; index--) {
  const element = arr[index];
  // console.log(element);
}
// for...of...遍历数组和字符串，不返回下标索引，直接就返回数组元素了。如果需要索引参与业务处理，使用普通循环
// for (const iterator of arr) {
//   console.log(iterator); // "a", "b", "c"
// }

// 遍历对象
const object = { a: 1, b: 2 };
for (const key in object) {
  const element = object[key];
  // console.log(element);
}

// es6新推出的forEach方法，它是数组的专有方法，不能用来遍历字符串。
// arr.forEach((ele, idx) => {
//   console.log(`1 ${ele} - ${idx}`);
// });
// arr.forEach(function (ele, idx) {
//   console.log(`2 ${ele} - ${idx}`);
// });

// 普通for循环(不是forEach)有break和continue两个关键字
// break：条件成立时，可以终止普通for循环，后面没有遍历的数据就不再遍历了。中断循环
// continue：条件成立时，可以跳过某次循环，本次循环中continue后面的代码不再执行，剩余数据继续循环。
// for (let index = 0; index < arr.length; index++) {
//   const element = arr[index];
//   if (index == 1) {
//     // break;
//     continue;
//   }
//   console.log(element);
// }

// forEach一旦启动，是不会停止的，因此只能通过抛出异常搭配try...catch，让整个程序中断才能阻止forEach循环。
// try...catch 拦截程序异常，防止程序因为异常而中断执行。
try {
  arr.forEach((ele, idx) => {
    if (idx == 1) {
      // throw new Error("破坏forEach"); // 类似于break
      return; // 通过return跳过某次循环，类似于continue
    }
    console.log(`1 ${ele} - ${idx}`);
  });
} catch (error) {}

console.log("forEach后面的代码");

18.数组.js

const cars = ["Tesla", "Volvo", "BMW"];
const arr = [1, 2, 3, 4];

// 1. 用法；2. 会不会影响原数组数据；

// 1. concat()	连接两个或多个数组，并返回合并后的新数组。不影响原数组数据。
console.log(cars.concat(arr));
console.log(arr.concat(cars));
console.log(cars, arr);

// 2. every()	检查数组中的每个元素是否符合条件，全都符合返回true。有一个不符合条件返回false。
// every会遍历数组每个元素，分别执行回调函数。回调函数必须返回true/false，every就判断每一次执行回调函数是否返回的都是true，如果是那every就返回true，如果其中一次回调函数返回的是false，最终every返回的就是false。
// const all = arr.every((ele, idx) => {
//   return ele % 2 === 0;
// });
const all = arr.every((ele, idx) => ele % 2 === 0);
console.log(all);

// 3. some()	检查数组中是否存在符合条件的元素，只要存在返回true。都不符合条件返回false。
const some = arr.some((ele, idx) => ele % 2 === 0);
console.log(some);

// 4. filter()	对数组元素进行条件过滤，将符合条件的元素筛选出来，放在一个新数组中并返回。它不会影响原数组数据。
const res = arr.filter((ele, idx) => ele % 2 === 0); // 过滤条件
console.log(res); // [2]

// 5. find()	从数组中查找第一个符合条件的元素值，并将这个元素值返回出来。该方法常用于在数组中查找元素。
const res1 = arr.find((ele, idx) => {
  return ele % 2 === 0; // 过滤条件
});
console.log(res1); // 2

// 6. findIndex()	返回数组中符合条件的第一个元素的索引。找不到就返回-1
const res2 = arr.findIndex((ele, idx) => {
  return ele % 2 == 0; // 过滤条件
});
console.log(res2); // -1

// 需求：找以 "V" 开头的元素索引
console.log(
  cars.findIndex((ele) => {
    const char = ele.slice(0, 1);
    return char == "B";
  })
);

// 7. indexOf() 返回数组中符合条件的第一个元素的索引。找不到就返回-1
console.log(arr.indexOf("BMW"));

// 8. map() 对数组中每一个元素进行值的统一处理，并返回一个新数组，不会影响原数组数据。
const res3 = arr.map((ele, idx) => {
  return ele * 10; // 不是写条件了，而是元素处理后的结果
});
console.log(res3); // [10,20,30,40]

// --------向数组添加元素-----------
// 9. push() 向数组默认添加一个元素
arr.push(100, 200, 300);
console.log(arr);
// 10. unshift() 向数组开头添加一个元素
arr.unshift(1000);
console.log(arr);
// 11. splice(起始索引，要删除元素个数，添加/修改元素值) 向数组指定索引位置添加元素
arr.splice(1, 0, 2000);
console.log(arr);

// --------移除数组元素-----------
// 12. pop() 从末尾移除一个元素
arr.pop();
console.log(arr);
// 13. shift() 从头部移除一个元素
arr.shift();
console.log(arr);
// 14. splice(起始索引，要删除元素个数，添加/修改元素值) 从数组指定索引位置移除元素
arr.splice(3, 2);
console.log(arr);

// --------修改数组元素-----------
arr[0] = 1000;
console.log(arr);
// 15. splice(起始索引，要删除元素个数，添加/修改元素值) 从数组指定索引位置修改元素
arr.splice(3, 1, 1000);
console.log(arr);

// 16. slice(起始索引,结束索引(不含)) 数组切片, 截取数组中的一段数据
console.log(arr.slice(0, 3));
console.log(arr.reverse()); // 反转数组中元素的顺序。
console.log(arr.includes(1000)); // 检查数组是否包含指定的元素。

19.事件.js

// 事件对象e, 包含了事件的详细信息.
function clickFunc(e) {
  console.log("点击了1", e);
}

// 获取button这个dom对象
const btn = document.getElementById("btn");
btn.style.color = "yellow";
btn.style.width = "100px";
btn.onclick = function clickFunc1(e) {
  console.log("点击了2", e);
};

// 输入框的change事件: 在输入框失去焦点时触发, 通过e.target获取目标对象
function changeFunc(e) {
  console.log("搜索", e.target.value);
}

// 输入框的input事件: 在输入框内容变化时触发, 通过e.target获取目标对象
function inputFunc(e) {
  console.log("实时搜索", e.target.value);
}

20.ajax请求.js

// 使用axios发送GET请求
// 请求头: 协议\地址\方式
// 请求体: POST\PUT请求参数
// 请求行: 请求的配置信息
// GET/POST/DELETE/PUT/OPTIONS: 查/添加/删除/更改/预请求

// HTTP协议规范:
// 1. 获取服务器数据使用GET请求, 向服务器传参数使用?拼接参数, 多个参数使用&链接;
// 2. 向服务器新增数据资源使用POST请求, 参数放在请求体中;
// 3. 修改服务器数据资源使用PUT请求, 参数放在请求体中;
// 4. 删除服务器资源使用DELETE请求, 参数放在URL地址中, 和GET类似;

// axios请求分两类: 一种是专属请求, axios.get(), axios.post(); 一种是通用请求, axios();

// axios
//   .get("https://m.bmtrip.com/api/v3/m1/theme/group?a=10&b=20", {
//     headers: {
//       token: "admin123",
//     },
//   })
//   .then((data) => {
//     console.log(data.data.data.list);
//   });

// axios({
//   // 写请求配置
//   url: "https://m.bmtrip.com/api/v3/m1/theme/group",
//   method: "GET",
//   params: {
//     a: 100,
//     b: 200,
//   }, // 用于携带GET/DELETE请求参数, axios会自动帮你拼接到url后
//   headers: {
//     token: "admin123",
//   },
// }).then((data) => {
//   console.log(data.data.data.list);
// });

// axios({
//   // 写请求配置
//   url: "https://m.bmtrip.com/api/v3/m1/theme/group",
//   method: "POST",
//   data: {
//     a: 100,
//     b: 200,
//   }, // 用于携带POST/PUT请求参数, axios会自动帮你把参数放入请求体中
//   headers: {
//     token: "admin123",
//   },
// }).then((data) => {
//   console.log(data.data.data.list);
// });

// 因为ajax请求是异步任务, 异步任务不按顺序执行, 看谁执行的快.
// 因为js有同步任务和异步任务之分, js也是单线程的. 一般耗时任务请求, 上传/下载文件等
function getLocation() {
  // let city = "";
  // 获取定位
  // axios.get("https://restapi.amap.com/v3/ip?key=e45ba07980d4a0817d2edeba0de23add")
  axios
    .get("https://restapi.amap.com/v3/ip", {
      params: {
        key: "e45ba07980d4a0817d2edeba0de23add",
      },
    })
    .then((data) => {
      console.log(data.data);
      const span = document.getElementById("city");
      span.innerText = data.data.city;
      // city = data.data.city;
      // 获取天气
      axios
        .get("https://restapi.amap.com/v3/weather/weatherInfo", {
          params: {
            key: "e45ba07980d4a0817d2edeba0de23add",
            city: data.data.city,
            extensions: "all",
          },
        })
        .then((data) => {
          console.log("天气", data.data);
        });
    });
}