• 前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS进阶（二）

    思维导图

    构造函数&数据常用函数

    一、深入对象

    1.1创建对象三种方式

    1.2 构造函数

    1.3实例成员&静态成员

    二、内置构造函数

    为什么简单数据类型也有方法?

    基本数据类型包装成复杂数据类型

    2.1 Object

    2.2 Array

    reduce()

    第二个参数（初始值）不能省略，不然自动取第一个数组对象，但要累加的是数组对象的属性。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     const arr = [{
    14.       name: '张三',
    15.       salary: 10000
    16.     }, {
    17.       name: '李四',
    18.       salary: 10000
    19.     }, {
    20.       name: '王五',
    21.       salary: 20000
    22.     },
    23.     ]
    24.     // 涨薪的钱数  10000 * 0.3 
    25.     // const money = arr.reduce(function (prev, item) {
    26.     //   return prev + item.salary * 0.3
    27.     // }, 0)
    28.     const money = arr.reduce((prev, item) => prev + item.salary * 0.3, 0)
    29.     console.log(money)
    30.   script>
    31. body>
    32.  
    33. html>

    find()

    every()

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // const arr = ['red', 'blue', 'green']
    14.     // const re = arr.find(function (item) {
    15.     //   return item === 'blue'
    16.     // })
    17.     // console.log(re)
    18.  
    19.     const arr = [
    20.       {
    21.         name: '小米',
    22.         price: 1999
    23.       },
    24.       {
    25.         name: '华为',
    26.         price: 3999
    27.       },
    28.     ]
    29.     // 找小米 这个对象，并且返回这个对象
    30.     // const mi = arr.find(function (item) {
    31.     //   // console.log(item)  //
    32.     //   // console.log(item.name)  //
    33.     //   console.log(111)
    34.     //   return item.name === '华为'
    35.     // })
    36.     // 1. find 查找
    37.     // const mi = arr.find(item => item.name === '小米')
    38.     // console.log(mi)
    39.     // 2. every 每一个是否都符合条件，如果都符合返回 true ，否则返回false
    40.     const arr1 = [10, 20, 30]
    41.     const flag = arr1.every(item => item >= 20)
    42.     console.log(flag)
    43.   script>
    44. body>
    45.  
    46. html>

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <div>div>
    13.   <script>
    14.     const spec = { size: '40cm*40cm', color: '黑色' }
    15.     //1. 所有的属性值回去过来  数组
    16.     // console.log(Object.values(spec))
    17.     // 2. 转换为字符串   数组join('/') 把数组根据分隔符转换为字符串
    18.     // console.log(Object.values(spec).join('/'))
    19.     document.querySelector('div').innerHTML = Object.values(spec).join('/')
    20.   script>
    21. body>
    22.  
    23. html>

    from()

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <ul>
    13.     <li>1li>
    14.     <li>2li>
    15.     <li>3li>
    16.   ul>
    17.   <script>
    18.     //  Array.from(lis) 把伪数组转换为真数组
    19.     const lis = document.querySelectorAll('ul li')
    20.     // console.log(lis)
    21.     // lis.pop() 报错
    22.     const liss = Array.from(lis)
    23.     liss.pop()
    24.     console.log(liss)
    25.   script>
    26. body>
    27.  
    28. html>

    2.3 String

    subString()

    startWith()

    includes()

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     //1. split 把字符串 转换为 数组  和 join() 相反
    14.     // const str = 'pink,red'
    15.     // const arr = str.split(',')
    16.     // console.log(arr)
    17.     // const str1 = '2022-4-8'
    18.     // const arr1 = str1.split('-')
    19.     // console.log(arr1)
    20.     // 2. 字符串的截取   substring(开始的索引号[， 结束的索引号])
    21.     // 2.1 如果省略 结束的索引号，默认取到最后
    22.     // 2.2 结束的索引号不包含想要截取的部分
    23.     // const str = '今天又要做核酸了'
    24.     // console.log(str.substring(5, 7))
    25.     // 3. startsWith 判断是不是以某个字符开头
    26.     // const str = 'pink老师上课中'
    27.     // console.log(str.startsWith('pink'))
    28.     // 4. includes 判断某个字符是不是包含在一个字符串里面
    29.     const str = '我是pink老师'
    30.     console.log(str.includes('pink')) // true
    31.   script>
    32. body>
    33.  
    34. html>

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <div>div>
    13.   <script>
    14.     const gift = '50g的茶叶,清洗球'
    15.     // 1. 把字符串拆分为数组
    16.     // console.log(gift.split(',')) [,]
    17.     // 2. 根据数组元素的个数，生成 对应 span标签
    18.     // const str = gift.split(',').map(function (item) {
    19.     //   return `【赠品】 ${item} 
      `
    20.     // }).join('')
    21.  
    22.     // // console.log(str)
    23.     // document.querySelector('div').innerHTML = str
    24.     document.querySelector('div').innerHTML = gift.split(',').map(item => `【赠品】 ${item} 
      `      ).join('')
    25.   script>
    26. body>
    27.  
    28. html>

    2.4 Number

    三、综合案例

    转换字符串

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     const num = 10
    14.     console.log(String(num)) 
    15.     console.log(num.toString())
    16.   script>
    17. body>
    18.  
    19. html>

  • 相关阅读:
    python中如何实现多进程，用进程的优缺点有啥?
    indexDB 本地数据库
    【ASP.NET小白零基础入门】从0部署ASP.NET开发环境，并成功运行一个汉服图片管理系统
    江苏MES
    第六章-Python数据可视化--2
    华为OD机试 - 羊、狼、农夫过河 - 逻辑分析（Java 2022 Q4 100分）
    java动态代理两种实现方式
    Unity学习笔记--使用 VisualStudio 反编译 dll 代码查看源码
    工科top1——清华大学出招生简章了，一起来看看吧
    poi+ResultSet+线程池导出数据库表结构
  • 原文地址：https://blog.csdn.net/upgrade_bro/article/details/133720496