记录不熟悉知识点

呆呆的嘻嘻
126 阅读11分钟

includes

如果 val 是一个空字符串或者 null，那么调用 includes(val) 方法会返回 true。这是因为在这种情况下，空字符串或 null 会被转换为字符串 "null" 或 ""，而这个空字符串 "" 是包含在任何字符串中的，所以 includes 方法会返回 true。

下面是一个示例：

javascriptCopy Code
const str = "Hello, World!";
console.log(str.includes("")); // 输出: true

const array = [1, 2, 3];
console.log(array.includes(null)); // 输出: true

在这个示例中，无论对于字符串还是数组，当传入的 val 是空的时候，includes(val) 都会返回 true。

map 和 filter 都是 JavaScript 中用于处理数组的方法。

  1. map 方法：

    • map 方法用于创建一个新数组，其结果是将原始数组中的每个元素应用某个函数后得到的值。

    • 举个例子，我们可以使用 map 方法将数组中的每个元素都加倍：

      javascriptCopy Code
const originalArray = [1, 2, 3, 4, 5];
const doubledArray = originalArray.map(num => num * 2);
// doubledArray 现在为 [2, 4, 6, 8, 10]

  2. filter 方法：

    • filter 方法用于创建一个新数组，其中包含满足某个条件的所有元素。

    • 举个例子，我们可以使用 filter 方法从数组中筛选出所有的偶数：

      javascriptCopy Code
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(num => num % 2 === 0);
// evenNumbers 现在为 [2, 4, 6, 8, 10]

总结：

  • map 用于将数组中的每个元素进行转换，生成一个新的数组。
  • filter 用于根据条件筛选数组中的元素，生成一个符合条件的新数组。

希望这个简单的解释能够帮助你理解 map 和 filter 方法。如果有其他问题，欢迎继续提问！

map 和 forEach 是 JavaScript 中用于处理数组的两种常见方法，它们有一些相似之处，但在使用场景和功能上有一些不同之处。

  1. map 方法：

    • map 方法会对数组中的每个元素都调用一个提供的函数，并且返回一个新的数组，新数组中的元素为原始数组经过该函数处理后的结果。

    • map 方法会生成一个新的数组，不会改变原始数组。

    • 举例：将数组中的每个元素都加倍并返回新数组

      javascriptCopy Code
const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(num => num * 2);
// doubledNumbers 现在为 [2, 4, 6, 8]

  2. forEach 方法：

    • forEach 方法用于对数组中的每个元素执行一次提供的函数，但它不会返回新的数组。

    • forEach 方法通常用于遍历数组并执行针对每个元素的操作，但它没有返回值。

    • 举例：遍历数组并输出每个元素的平方根

      javascriptCopy Code
const numbers = [1, 4, 9];
numbers.forEach(num => {
    console.log(Math.sqrt(num));
});
// 控制台输出 1, 2, 3

总结：

  • map 用于对数组中的每个元素进行处理，生成一个新的数组并返回。
  • forEach 用于对数组中的每个元素执行指定操作，但它没有返回值，不会生成新的数组。

希望这个简单的解释能够帮助你理解 map 和 forEach 的区别。如果有其他问题，欢迎继续提问！

querySelector('')有多个限制条件时候如何写

属性选择器 - 学习 Web 开发 | MDN (mozilla.org)

当你需要在使用 querySelector 时同时包含多个限制条件时，你可以使用 CSS 选择器的组合方式来实现。你可以将多个限制条件组合起来以选择特定的元素。以下是一些常见的组合方式：

  1. 同时满足多个条件：

    • 如果你需要选择同时满足多个条件的元素，可以将条件连接起来，例如：

      javascriptCopy Code
document.querySelector('div.className') // 选择 class 名为 className 的 div 元素

  2. 包含某个条件的子元素：

    • 如果你需要选择符合某个条件的子元素，可以使用空格分隔条件，例如：

      javascriptCopy Code
document.querySelector('div .className') // 选择 class 名为 className 的 div 元素的子元素

  3. 满足其中一个条件：

    • 如果你需要选择满足其中一个条件的元素，可以使用逗号分隔条件，例如：

      javascriptCopy Code
document.querySelector('div, p') // 选择所有的 div 元素和 p 元素
  • 当你需要选择满足 img 标签中 title 属性为 "人" 的元素时，可以使用以下方式来实现：
javascriptCopy Code
document.querySelector('img[title="人"]')

fetch("http://example.com/movies.json")
  .then((response) => response.json())
  .then((data) => console.log(data));

正则中的test和match

在正则表达式中，test()函数和match()函数都用于匹配字符串。

  • test()函数用于测试一个字符串是否匹配某个正则表达式。它返回一个布尔值，如果匹配成功，则返回true，否则返回false。
  • match()函数用于在一个字符串中查找匹配某个正则表达式的内容。它返回一个数组，包含所有匹配到的内容。如果没有匹配到任何内容，则返回null。

这两个函数的主要区别在于：

  • test()函数只返回一个布尔值，表明是否匹配成功，而不返回具体匹配到的内容。
  • match()函数返回一个数组，包含所有匹配到的内容。可以通过数组的方法来获取具体的匹配结果。

因此，如果只需要判断一个字符串是否匹配某个正则表达式，可以使用test()函数；如果需要获取具体的匹配结果，可以使用match()函数。

addEventListener


*** document.getElementById('week').addEventListener('click', week(weekX, **weekY));*
***  document.getElementById('month').addEventListener('click', month(monthX, monthY))***

})
错误，应该是
document.getElementById('week').addEventListener('click',()=> week(weekX, weekY));
document.getElementById('month').addEventListener('click',()=> month(monthX, monthY))
或者
document.getElementById('week').addEventListener('click',function(){
week(weekX, weekY)
});
function week(weekx, weeky) {
console.log("lkkk")
option.xAxis.data = weeky;
option.series[0].data = weeky;
myChart.setOption(option)
}

function month(monthx, monthy) {
console.log("month")
option.xAxis.data = monthx;
option.series[0].data = monthy;
myChart.setOption(option)
}

slice()

  • slice() 方法返回一个新的数组，包含从起始索引到结束索引（不包括结束索引）的元素，原数组不会被修改。

  • 语法：array.slice(start, end)

    • start：起始索引，包含在结果数组中。
    • end：结束索引，不包含在结果数组中。可选参数，如果不提供，将截取到数组末尾。

  • 示例：

javascriptCopy Code
const fruits = ['apple', 'banana', 'cherry', 'date'];

const slicedFruits = fruits.slice(1, 3);
// slicedFruits 等于 ['banana', 'cherry']
// fruits 数组仍然是 ['apple', 'banana', 'cherry', 'date']

splice()

  • splice() 方法用于向/从数组中添加/删除项目，并返回被删除的项目。

  • 语法：array.splice(start, deleteCount, item1, item2, ...)

    • start：必需，指定开始删除/插入的位置，可以是负数（从末尾计数）。
    • deleteCount：可选，要删除的元素数量。如果为 0，则不删除元素，仅插入。
    • item1, item2, ...：可选，要插入到数组中的元素。

  • 示例：

javascriptCopy Code
const fruits = ['apple', 'banana', 'cherry', 'date'];

fruits.splice(2, 1); // 删除 'cherry'
// fruits 现在是 ['apple', 'banana', 'date']

fruits.splice(1, 0, 'orange', 'peach'); // 在 'banana' 后面插入 'orange' 和 'peach'
// fruits 现在是 ['apple', 'orange', 'peach', 'banana', 'date']

总结：

  • slice() 返回一个新的数组，不修改原数组，常用于提取数组的一部分。
  • splice() 可以用来删除、插入或替换数组中的元素，并返回被删除的元素，会修改原数组。

splice什么时候删除，什么时候添加

2024/3/30 15:51:37

splice() 方法在使用时可以实现删除、添加和替换数组元素的功能，具体取决于传递给它的参数。下面是关于何时删除、何时添加的说明：

删除元素

如果你想要删除数组中的元素，你可以通过指定 deleteCount 参数来告诉 splice() 方法要删除多少个元素，从而实现删除操作。当 deleteCount 大于 0 时，splice() 将会删除指定数量的元素。

示例：

javascriptCopy Code
const fruits = ['apple', 'banana', 'cherry', 'date'];

fruits.splice(2, 1);
// 在索引为 2 的位置删除 1 个元素，即删除 'cherry'
// fruits 现在是 ['apple', 'banana', 'date']

添加元素

如果你想往数组中插入新的元素，你可以在 splice() 方法中指定要删除的元素数量为 0，并且在后面的参数中提供要插入到数组中的新元素。

示例：

javascriptCopy Code
const fruits = ['apple', 'banana', 'cherry', 'date'];

fruits.splice(2, 0, 'orange', 'peach');
// 在索引为 2 的位置插入 'orange' 和 'peach'
// fruits 现在是 ['apple', 'banana', 'orange', 'peach', 'cherry', 'date']

综上所述：

  • 当 deleteCount 参数为大于 0 的值时，splice() 将删除指定数量的元素。
  • 当 deleteCount 参数为 0 时，并且在后续参数中提供了新的元素，splice() 将会在指定位置插入这些新元素。

promise

防抖

节流

reduce

students.reduce((t,v)=>(t[v.class]?t[v.class].push(v):t[v.class]=[v],t),{}) 我的代码：

let ob = {}
students.forEach(item => {
  if (!ob[item.class]) {
    ob[item.class] = []
    ob[item.class].push(item)
  } else {
    console.log("你好")
    ob[item.class].push(item)
  }
})

function sums(a) {
  return a.math + a.language + a.english + a.physics + a.chemistry
}
for (let i in ob) {
  ob[i].sort((a, b) => sums(b) - sums(a))
}
return ob;

}

function orderStudentGrade(students) {
  const res = new Map()
  students.forEach(el => {
    if (!res.has(el.class)) res.set(el.class, [])
    res.get(el.class).push(el)
    res.get(el.class).sort((a, b) => {
      const zfa = a.chemistry + a.physics + a.english + a.language + a.math
      const zfb = b.chemistry + b.physics + b.english + b.language + b.math
      return zfb - zfa
    })
  })
  return Object.fromEntries(res.entries())
}

居中

top: 50%; left: 50%; transform: translate(-50%,-50%);

媒体查询

@media screen and (min-width: 600px) and (max-width: 900px) {
  /* 在宽度在600px和900px之间应用的样式 */
}

这样，当浏览器窗口的宽度在600px和900px之间时，该媒体查询所包含的 CSS 样式就会生效。

label和checked

显示在上方而不占元素

option表单

JavaScript DOM表单相关操作之获取表单数据的方式 - 知乎 (zhihu.com)

axios

const {data} = await axios.post('https://httpbin.org/post', {
    firstName: 'Fred',
    lastName: 'Flintstone',
    orders: [1, 2, 3],
    photo: document.querySelector('#fileInput').files
  }, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
)

正则表达式 /[^\dX]/g 的意思是匹配所有非数字和非大写字母 X 的字符。在这里，\d 表示匹配任意数字字符，而 X 则是大写字母 X。[^...] 表示匹配不在括号内的字符，所以 [^0-9X] 就匹配除了数字和大写字母 X 之外的所有字符。 g 表示全局匹配，即在目标字符串中寻找所有匹配项，而不仅仅是找到第一个匹配项就停止。

例如，对于正则表达式 /[^\dX]/g，它会在字符串中查找所有不是数字和大写字母 X 的字符，并进行替换或其他操作。如果不使用 g 修饰符，只会找到第一个匹配项并停止搜索。

使用正则表达式 /[^\dX]/g 来匹配所有非数字和非大写字母 X 的字符，并将其替换为空字符串，从而实现移除除了数字和大写字母 X 之外的所有字符的功能。这在处理ISBN号码时很常见，以确保格式的正确性。

let str = "978-0-486-65088-9";
let cleanedStr = str.replace(/[^\dX]/g, '');
console.log(cleanedStr); // 输出: "9780486650889

正则表达式 /^\d{9}(X|\d)$/ 的含义是：

  • ^ 表示匹配输入的开始位置。
  • \d{9} 表示匹配9个数字字符。
  • (X|\d) 表示匹配一个大写字母 X 或一个数字字符。
  • $ 表示匹配输入的结尾位置。

arr.at(-1)

后一个元素，-2 表示倒数第二个元素，以此类推。

arr.at(-1) 是 JavaScript 中用于获取数组中倒数第一个元素的方法。在传统的数组索引中，-1 表示最后一个元素，-2 表示倒数第二个元素，以此类推。

例如：

javascriptCopy Code
const arr = [1, 2, 3, 4, 5];
console.log(arr.at(-1)); // 输出：5

这将返回数组 arr 中的最后一个元素，即 5

shift 和 unshift 是 JavaScript 数组的两个方法，用于在数组的开头进行元素的添加和删除操作。

  1. shift(): 该方法用于移除数组的第一个元素，并返回被移除的元素。数组的长度减一，其他元素的索引值减一。

    javascriptCopy Code
const arr = [1, 2, 3, 4, 5];
const removedElement = arr.shift();
console.log(removedElement); // 输出：1
console.log(arr); // 输出：[2, 3, 4, 5]

  2. unshift(): 该方法用于在数组的开头添加一个或多个元素，并返回新的长度。数组中的其他元素将会向后移动以容纳新添加的元素。 res.unshift('9','7','8')

    const arr = [2, 3, 4, 5];
const newLength = arr.unshift(1);
console.log(newLength); // 输出：5
console.log(arr); // 输出：[1, 2, 3, 4, 5]

这两个方法常用于在数组的开头执行添加或删除操作，但需要注意它们会改变原始数组。

split() 和 join()

split() 和 join() 是 JavaScript 字符串方法，用于在字符串和数组之间进行转换。

  1. split(separator, limit): 这个方法将字符串分割成子字符串数组，并返回一个包含分割后的子字符串的数组。separator 参数指定了用于确定每个拆分的位置的字符串或正则表达式。可选的 limit 参数指定了返回的数组的最大长度。

    const str = "apple,banana,orange";
const arr = str.split(","); // 以逗号为分隔符分割字符串
console.log(arr); // 输出：["apple", "banana", "orange"]

  2. join(separator): 这个方法将数组中所有元素连接成一个字符串。separator 参数是可选的，指定了在连接元素之间要插入的分隔符字符串。

    const arr = ["apple", "banana", "orange"];
const str = arr.join(","); // 使用逗号作为连接符将数组中的元素连接成字符串
console.log(str); // 输出： "apple,banana,orange"

这两个方法常用于将字符串分割成数组或将数组连接成字符串。

avatar
文章
阅读
粉丝