30-Days-Of-Javascript 笔记（个人向）

前言

https://github.com/Asabeneh/30-Days-Of-JavaScript/

js学的依托，这个项目觉得蛮好的，刚好最近只在看书，做点习题复健

随便记一点笔记

day6

拷贝数组的方式

const countries = [
  "Albania",
  "Bolivia",
  "Canada",
  "Denmark",
  "Ethiopia",
  "Finland",
  "Germany",
  "Hungary",
  "Ireland",
  "Japan",
  "Kenya",
];

const arr = countries.slice()
const arr = [...countries]
const arr = Array.prototype.concat(countries)
const arr = Array.from(countries)
const arr = countries.map((a) => a);

day7

Write a function name showDateTime which shows time in this format: 08/01/2020 04:08 using the Date object.

记录一下toLocaleDateString的api，可以先看看能不能使用这个配置然后做简单处理，至少写的比逐个提取简单

function showDateTime(){
  let date = new Date()
  let localDate = date.toLocaleDateString('en-US',{
    month:'2-digit',
    day:'2-digit',
    year:'numeric',
    hour:'2-digit',
    minute:'2-digit',
    hour12:false
  })

  let endDate = localDate.replace(',','')
  console.log(endDate);
}

showDateTime()

Call your function shuffleArray, it takes an array as a parameter and it returns a shuffled array

利用sort的简易写法

function shuffleArray(arr) {
  if (Array.isArray(arr)) {
    arr.sort(() => 0.5 - Math.random());
  }
  return arr;
}

forEach不能提前退出

day8

Find people who are MERN stack developer from the users object

记这个只是因为卡了很久（
也可以用indexOf的返回值来做匹配，记得+1（从0开始计数，-1没找到）

const users = {
  Alex: {
    email: "alex@alex.com",
    skills: ["HTML", "CSS", "JavaScript"],
    age: 20,
    isLoggedIn: false,
    points: 30,
  },
  Asab: {
    email: "asab@asab.com",
    skills: [
      "HTML",
      "CSS",
      "JavaScript",
      "Redux",
      "MongoDB",
      "Express",
      "React",
      "Node",
    ],
    age: 25,
    isLoggedIn: false,
    points: 50,
  },
  Brook: {
    email: "daniel@daniel.com",
    skills: ["HTML", "CSS", "JavaScript", "React", "Redux"],
    age: 30,
    isLoggedIn: true,
    points: 50,
  },
  Daniel: {
    email: "daniel@alex.com",
    skills: ["HTML", "CSS", "JavaScript", "Python"],
    age: 20,
    isLoggedIn: false,
    points: 40,
  },
  John: {
    email: "john@john.com",
    skills: ["HTML", "CSS", "JavaScript", "React", "Redux", "Node.js"],
    age: 20,
    isLoggedIn: true,
    points: 50,
  },
  Thomas: {
    email: "thomas@thomas.com",
    skills: ["HTML", "CSS", "JavaScript", "React"],
    age: 20,
    isLoggedIn: false,
    points: 40,
  },
  Paul: {
    email: "paul@paul.com",
    skills: [
      "HTML",
      "CSS",
      "JavaScript",
      "MongoDB",
      "Express",
      "React",
      "Node",
    ],
    age: 20,
    isLoggedIn: false,
    points: 40,
  },
};

let mern = ["MongoDB", "Express", "React", "Node"];
let mernPerson = [];

for (let key in users) {
  const person = users[key];
  const arr = person.skills;
  let count = 0;
  arr.forEach((element) => {
    if (mern.indexOf(element) + 1) count++;
  });
  if (count === 4) mernPerson.push(key);
}

console.log(mernPerson);

偷的优美代码
思路：
先调entries把对象转数组，然后对skills数组中同时包含MERN的情况，调map返回这个user

Object.entries(users).filter(user => 
	user[1].skills.includes("MongoDB") && user[1].skills.includes("Express") && user[1].skills.includes("React") && user[1].skills.includes("Node")
  ).map(user => user[0])

https://github.com/moisesrm/30-days-of-javascript-solutions/blob/master/Day%208/main.js

day10

set和map用过stl就不会陌生

Use the countries data to find the 10 most spoken languages

国家数组就不贴了，有兴趣可以去看看原项目，数据有点太长了

let test = new Map();
countries.forEach((item) =>
  item.languages.forEach((lang) => {
    test.set(lang, test.get(lang) + 1 || 1);
  })
);

console.log(Array.from(test.entries()).sort((a, b) => b[1] - a[1]).slice(0,10));

该说不说，链式写法写的是真爽（反正不考虑复杂度

还是偷的代码：
https://github.com/HamzaMateen/30DaysOfJavaScript-Solutions/blob/main/Day10_Maps_Sets/level3.js

这老哥是真喜欢压行，可读性依托答辩
但是用的确实帅

let mostSpoken = new Set(Object.entries(countries.reduce((arr, obj) => (arr = arr.concat(obj.languages)), []).reduce((obj, name) => {
   obj[name] = (obj[name] || 0) +1;
   return obj;
}, {}))); 

day12

Write a function called tenMostFrequentWords which get the ten most frequent word from a string

记一个键值对数组转对象的技巧
.map(([word, count]) => ({ word, count }));

 let paragraph = `I love teaching. If you do not love teaching what else can you love. I love Python if you do not love something which can give you all the capabilities to develop an application what else can you love.`;
function tenMostFrequentWords(paragraph) {
  let pattern = /[A-Za-z]+/g;

  let arr = Array.from(paragraph.match(pattern));

  let map = new Map();

  arr.forEach((word) => {
    map.set(word, map.get(word) + 1 || 1);
  });

  let end = Array.from(map.entries())
    .sort((a, b) => b[1] - a[1])
    .slice(0, 10)
    .map(([word, count]) => ({ word, count }));

  return end
}

console.log(tenMostFrequentWords(paragraph));

这里的map完全没有必要使用，用reduce可以更好看一点

function tenMostFrequentWords(paragraph) {
  let pattern = /[A-Za-z]+/g;

  return Object.entries(
    Array.from(paragraph.match(pattern)).reduce((dict, word) => {
      dict[word] = dict[word] + 1 || 1;
      return dict;
    }, {})
  )
    .sort((a, b) => {
      return b[1] - a[1];
    })
    .slice(0, 10)
    .map(([word, count]) => ({ word, count }));
}

console.log(tenMostFrequentWords(paragraph));

day23

Generating numbers and marking evens, odds and prime numbers with three different colors. See the image below.

一些api使用，然后考虑各种情况

index.html

<!DOCTYPE html>
  <head>

  </head>
  <body>
    <p></p>
    输入：<input type="text" placeholder="generate number">
    <button id="btn" click="">生成</button>
    <div></div>
    <script src="a.js"></script>
  </body>

  <style>
    div{
      display:flex;
      flex-wrap: wrap;
      justify-content: left;
    }

    div div{
      justify-content: center;
      width: 100px;
      height: 100px;
      display: flex;
      margin: 2px;
      text-align: center;
      align-items: center;
    }


  </style>
</html>

a.js

function isPrime(num) {
  if (num < 2) {
    return false;
  }
  for (let i = 2; i < num; i++) {
    if (num % i == 0) {
      return false;
    }
  }
  return true;
}

function generate(num) {
  let div = document.querySelector("div");
  if (num === 0) {
    let box = document.createElement("div");
    box.innerHTML = `<div style="background-color:lightgreen">0</div>`;
    div.appendChild(box);
    return;
  }
  for (let i = 0; i < num; i++) {
    let box = document.createElement("div");
    box.innerText = i;
    if (i % 2 == 0) {
      box.style.backgroundColor = "lightgreen";
    } else {
      box.style.backgroundColor = "yellow";
    }

    if (isPrime(i)) {
      box.style.backgroundColor = "pink";
    }

    div.appendChild(box);
  }
}

function work() {
  let context = input.value;
  let num = Number(context);
  console.log(num);

  if (context === "") {
    p.textContent = "请输入内容";
    return;
  }

  if (isNaN(num)) {
    p.textContent = "请输入数字";
    return;
  }

  if (div.childNodes.length > 0) {
    div.innerHTML = "";
  }
  if (p.textContent) {
    p.textContent = "";
  }

  generate(num);
}

let input = document.querySelector("input");
let div = document.querySelector("div");
let btn = document.querySelector("#btn");
let p = document.querySelector("p");
window.onload = function () {
  generate(50);
};

btn.addEventListener("click", work);

end

后面的都是一些项目demo，就这样，完结撒花^^
总体来说这个项目还是不错的，满分五分的话给四分吧，扣一分在没有中文上
如果你是想要入门js的初学者，又或者是复习一些js语法技巧，这个项目应该很适合，这里的api都是讲的最重要的一部分，在写的时候也可以参照文档或者其他资料，把这部分知识补全