简单js

1. 使用 连续 三元 ？ 来代替 if else-if

let message,
  login = "";

message =
  login === "dsfds"
    ? "dsasdas"
    : login === "dssa"
    ? "fsdfdsfs"
    : login === ""
    ? "no login"
    : "";

console.log(message); //--------no login---------

2.使用 ？ 三元 来代替 if else

let a = 2,
  b = 1;
let result = a + b < 4 ? "Blow" : "Over";
console.log(result); //-----------Blow----------

3.|| 或运算的， 有真及真，返回第一个真值，如果不存在真值，就返回该链的最后一个值。

console.log(true || true); //----true----
console.log(false || true); //----true----
console.log(true || false); //----true----
console.log(false || false); //----false----

4.&& 与运算的， 有假及假，返回第一个虚值，如果不存在虚值，就返回该链的最后一个值。

console.log(true && true); // ----true----
console.log(false && true); // ----false----
console.log(true && false); // ----false----
console.log(false && false); // ----false----

5.空值合并运算符 '??'

function fn(a, b) {
  return a + b;
}

let aa = 0,
  bb = null;
console.log(fn(aa ?? 10, bb ?? 22)); // --------22---------
// 与 || 区别
// || 返回第一个 真 值。
// ?? 返回第一个 已定义的 值。
let x = 0;
let y = "";
let z = undefined;
let n = null;
console.log(x || 20); //  -----20---------
console.log(x ?? 20); //  -----0---------
console.log(y || 30); //  -----30---------
console.log(y ?? 30); //  -----“”---------
console.log(z || 40); //  -----40---------
console.log(z ?? 40); //  -----40---------
console.log(n || 50); //  -----50---------
console.log(n ?? 50); //  -----50---------
// 可以看出 ？？ 不认为 0 或 “”为假，||会认为为假

6.内部循环变量和外部循环变量

// 内联循环变量声明，外部拿不到值
for (let i = 0; i < 3; i++) {
  console.log(i); // ------0,1,2-------
}
try {
  console.log(i);
} catch (error) {
  console.log(error); //----ReferenceError: i is not defined-----
}
//外部循环变量，外面可以拿到值
let k = 0;
for (k = 0; k < 3; k++) {
  console.log(k); // ------0,1,2---------
}
console.log(k); //--------3-------

7.if内部使用！和不使用！

// 简单一句话flag为真值就执行下面的代码，带！flag为真，即flag为假
let flag = false;
if (flag) console.log("hhaha");
if (!flag) console.log("wwawa"); //------wwawa -----

8.case连写,相当于if判断中的 ||

let browser = "Chrome";
switch (browser) {
  case "Edge":
    console.log("You've got the Edge!");
    break;
  case "Chrome":
  case "Firefox":
  case "Safari":
  case "Opera":
    console.log("Okay we support these browser too"); //---Okay we support these browser too ---
    break;
  default:
    console.log("We hope that this page looks ok!");
}
// 用if,else if ,else改写的判断
let browser2 = "Firefox";
if (browser2 === "Edge") {
  console.log("You've got the Edge!");
} else if (
  browser2 === "Chrome" ||
  browser2 === "Firefox" ||
  browser2 === "Safari" ||
  browser2 === "Opera"
) {
  console.log("Okay we support these browsers too"); //---Okay we support these browser too ---
} else {
  console.log("We hope that this page looks ok!");
}

9.为什么要使用 === 判断是否相等；

let a1 = 10;
let a2 = "10";
console.log(a1 == a2); //-----true----,我们期望得到false却得到了true

10.外部变量和内部变量，外部和内部是两个完全不一样的变量，彼此修改不会影响对方的值。

let username = "John"; //外部变量username,

function showMessage() {
  let username = "drlsxs"; //内部变量username
  username = "Bob"; // 修改内部变量，外部变量任然为John
  let message = "Hello, " + username;

  console.log(message); // ---Hello, Bob ---
}
showMessage();
console.log(username); //----John ----

11.两种写入函数默认参数的方法

//直接默认参数写入发，不会有0或“”问题
function showMessage1(from, text = "no text given1") {
  console.log(from + ": " + text);
}
showMessage1("Ann"); // Ann: no text given1
//后备默认参数写入法
function showMessage2(from, text) {
  text = text || "no text given2"; //可以使用 ？？代替 || 以防参数为“”或0
  console.log(from + ": " + text);
}
showMessage2("Ann"); // Ann: no text given2

12.一个函数 —— 一个行为
一个函数应该只包含函数名所指定的功能，而不是做更多与函数名无关的功能。
两个独立的行为通常需要两个函数，即使它们通常被一起调用（在这种情况下，我们可以创建第三个函数来调用这两个函数）。
有几个违反这一规则的例子：

• getAge —— 如果它通过 alert 将 age 显示出来，那就有问题了（只应该是获取）。
• createForm —— 如果它包含修改文档的操作，例如向文档添加一个表单，那就有问题了（只应该创建表单并返回）。
• checkPermission —— 如果它显示 access granted/denied 消息，那就有问题了（只应执行检查并返回结果）。
  这些例子假设函数名前缀具有通用的含义。你和你的团队可以自定义这些函数名前缀的含义，但是通常都没有太大的不同。无论怎样，你都应该对函数名前缀的含义、带特定前缀的函数可以做什么以及不可以做什么有深刻的了解。所有相同前缀的函数都应该遵守相同的规则。并且，团队成员应该形成共识。

如下：显示素数函数不应该去判断这个数是不是素数...

function showPrime(n) {
  nextPrime:for (let i = 2; i < n; i++) {
    for (let j = 2; j < i; j++) {
      if (i%j===0) continue nextPrime;
    }
    console.log(i);
  }

}

showPrime(100);

应该改为两个函数的形式，一个展示素数，一个去判断素数

// 展示素数函数
function showPrimes(n) {
  for (let i = 2; i < n; i++) {
    //不应该自己判断，交给函数isPrime判断
    if (isPrime(i)) continue;
    console.log(i);
  }

}

// 判断素数函数
function isPrime(i) {
  for (let j = 2; j < i; j++) {
    if ( i % j === 0) return true;
  }
  return false;
}

showPrimes(100);

13.简化函数内部的判断
如下:
基本判断

function checkAge(age) {
  if (age > 18) {
    return true
  } else {
    return `Did parents allow you?`
  }
}

使用省略else来简化if else

function checkAge(age) {
  if (age>18) return true
  return `Did parents allow you?`;
}

使用 ? 或者|| 近一步简化函数返回结果

//使用问号运算符 '?'：
function checkAge(age) {
  return (age > 18) ? true : `Did parents allow you?`;
}

//使用或运算符 ||（最短的变体）
function checkAge(age) {
  return (age > 18) || `Did parents allow you?`;
}

14.可以考虑传入对象作为函数参数, 避免对参数顺序的依赖

function getInfo(name, id, age) {
  console.log(`姓名：${name},id：${id},年龄：${age}`);
}

getInfo(1, 20,"drlsxs");    //------姓名：1,id：20,年龄：drlsxs -------

function getInfo2(userObj) {
  const {name,age,id} = userObj
  console.log(`姓名：${name},id：${id},年龄：${age}`);
}

getInfo2({age:20, id: 1, name: "drlsxs"})  //----------姓名：drlsxs,id：1,年龄：20-----------

15.简单promise，以及执行顺序

let promise = new Promise((resolve, reject) => {
  console.log(1)
  let a = 9;
  (a < 10) ? resolve(a) : reject("a is not number");
});

promise.then(res => {
  console.log(2)
}, err => {
});

console.log(3)         

//  输出顺序-----------------1,3,2--------------------//

16.可选连访问对象中不存在的属性的问题
假设我们有一个use对象存储用户信息，其中有个address属性存放地址信息，我们想要访问address里面的street,如果address是undefined我们就会得到一个错误

image.png

可选连是一种新特性，其规则如下：
value?.prop

• 如果 value 存在，则结果与 value.prop 相同，

• 否则（当 value 为 undefined/null 时）则返回 undefined。
  所以上面访问对象不存在的属性我们可以用如下方法：

  
  image.png

let user = {
name: "dsada",
}; // 一个没有 "address" 属性的 user 对象

console.log(user.address?.street); // Error!

也不用写三元表达式去判断

console.log(user.address ? user.address.street : undefined);

17.对象操作：
对象缺少数组存在的许多方法，例如 map 和 filter 等。
如果我们想应用它们，那么我们可以使用 Object.entries，然后使用 Object.fromEntries：
1.使用 Object.entries(obj) 从 obj 获取由键/值对组成的数组。
2.对该数组使用数组方法，例如 map。
3.对结果数组使用 Object.fromEntries(array) 方法，将结果转回成对象。

let prices = {
  banana: 1,
  orange: 2,
  meat: 4
};


/**
 * @param {{[p: string]: T}} price
 */
function doublePrices (price) {
  return Object.fromEntries(
    Object.entries(price).map(([key, value]) => [key, value * 2])
  );
}

console.log(doublePrices(prices)); //{ banana: 2, orange: 4, meat: 8 }

18.从数组创建键（值）对象

let users = [
  {id: 'john', name: "John Smith", age: 20},
  {id: 'ann', name: "Ann Smith", age: 24},
  {id: 'pete', name: "Pete Peterson", age: 31},
];


/**
 *
 * @description 收到数组对象，获取到该数组对象的以id作为键名的对象,方便读取数组对象中的实体
 * @param array{array}
 * @return {object}
 */
function groupById(array) {
  let obj = {};
  return array.reduce((acc, curr) => {
    obj[curr.id] = curr;
    return obj;
  }, {});

}

let usersById = groupById(users);
console.log(usersById);
console.log(usersById.ann.age); // 24

// {
//   john: { id: 'john', name: 'John Smith', age: 20 },
//   ann: { id: 'ann', name: 'Ann Smith', age: 24 },
//   pete: { id: 'pete', name: 'Pete Peterson', age: 31 }
// }