--- JavaScript 的一些常用语法总结 ---

  • JavaScript

    • 变量和常量

      • let修饰变量

      • const修饰常量

    • 模板字符串

      • 使用''定义字符串,可以在符号中使用${}来表示需要动态添加的元素,还可以使用lambda表达式
    • 对象

      • 使用{}来定义对象,字段用k v表示,key:value,如果value为变量,那么可以省略key

      • 值的获取,obj.key 或者 obj[key] 获取,如果key是一个变量,那么只能使用obj[key]来获取 比如x=key 可以obj[x] 但是不能obj.x

    • 解构赋值

      • 对数组,使用[xx,xx]来对数组进行复制,方括号中的元素和数组中元素位置一一对应

        • let arr = [5,6,7] [a,b,c] = arr 也可以 [,a,b] = arr 还可以[a,...b] = arr 这样a取剩下的元素就全给b了
      • 对对象,使用{}来对对象进行结构赋值

        • let obj = { name = "hhh",age = 18} 在获取其元素 {name,age} = obj, 完整写法是{name:name1,age:age1} = obj 从obj中去到name赋给name1 也可以使用...来讲剩下的元素合并复制了 {name,...age1} = obj
    • 箭头函数

      • 使用()=> {} 来表示一个函数表达式,(a,b)=> { return a - b} 如果返回值只有一行的话 可以省略{},同时return也要省略, (a,b)=> a - b, 如果只有一个人参数,小括号也能省略 a => a * 2
    • 数组的重要方法

      • 遍历foreach

        • foreach (item,index,array){ item 当前遍历到的元素 index 当前元素下标 array 数组 }
      • 过滤filter

        • filter(a,b)=> { return true :false} 如果是false就过滤这个元素
      • 映射 map 在原来数组的基础上创建一个新的数组,这个新的数组元素可以和旧数组元素一一映射上

        • map((item,index,array)=>{return xx})这个xx就代表了返回的数组映射的元素
      • 尾插 push

      • 头插 unshift

      • 尾删 poll

      • 头删 shift

      • 任意位置的删除splice

        • splice(index,delcount,additem,additem,...)在index这个位置开始,删除delcount个元素,之后的是在这个位置添加元素
      • 检查元素是否存在 includes

      • 检测数据中的所有元素是否满足要求 every

        • every((item,index,array)=> { return Boolean})如果是false说明有一个元素不符合要求,于是方法退出并返回false
      • reduce 汇总 计算整个数组元素

        • reduce((prev,item,index,array)=>{},prev),第一个是一个函数表达式,在这个函数表达式中就可以进行一些对数组参数的计算,他的返回值会给到prev这个参数,最后reduce就返回的是prev这个参数
    • 类的重要方法

      • 对象的key keys

        • Object.keys(obj) 放回的是对象的所有key
    • 扩张运算符

      • 语法 ...

        • 复制合并数组

          • arr = [...arr1] 复制数组 合并数组 arr = [...arr1, ...arr2]
        • 复制合并对象

          • obj = {...obj1} 复制一个obj1 obj= {...obj1, ...obj2} 和并obj1 obj2的k v 对于相同的key obj2会覆盖obj1
    • 序列化和反序列化

      • 序列化JSON.stringify 反序列化JSON.parse
    • web 储存

      • localStorage 本地储存不会过期 只有js自己删除或者是清除本地缓存 sessionStorage 会话储存在浏览器未关闭之前不会过期,页面的关闭和恢复都还会有效

        • 储存 localStorage.setItem(key, value) 删 localStorage.removeItem(key) 查 localStorage.getItem(key)
    • 解决回调地狱

      • promise

        • 通过将异步代码封装,简化调用

          • let po = new Promise((resolve, reject)=>{ //Promise中的箭头函数由俩个参数 //resolve 表示异步代码执行成功 //reject 表示执行失败 }) // 返回一个对象,通过调用then来知道当前promise的执行状况 成功执 //行第一个回调函数 失败执行第二个 po.then(()=>{}, ()=>{})
      • await async

        • 通过在Promise类前面加上await修饰 他直接返回的是promise 的resolve函数的参数,那么就可以根据获取到的参数来决定执行逻辑了,然后await必须要在async修饰的方法中运行,async会让所有修饰了await的异步代码变为串行执行

          • async functon fn(n){ let po = await Promise((resolve)=>{setTimeout(()=>{ resolve(n); }, 1000)); console.log(po) let po1 = await Promise((resolve)=>{setTimeout(()=>{ resolve(n); }, 1000)}) console.log(po) }
    • 模块化

      • 对JavaScript的功能分模块,更加方便管理和开发

        • 使用npm init 初始化项目获取获取到一个package.json 的文件,创建index.js来作为代码的入口 使用 node .\index/js 来运行代码

          • 默认导入和导出 导出 export default fn(){} default只能有一个 导入 import xx form package.js 这个xx就对应了default字段修饰的元素

          • 按需导入和导出 导出 export fn(){} 导出 import {fn, xx} from package.js fn这些名字都是一一对应的

相关推荐
彭于晏爱编程1 小时前
🍭🍭🍭升级 AntD 6:做第一个吃螃蟹的人
前端
掘金一周2 小时前
大部分人都错了!这才是chrome插件多脚本通信的正确姿势 | 掘金一周 11.27
前端·人工智能·后端
懂得节能嘛.2 小时前
【Java动态线程池】Redis监控+动态调参
java·开发语言·redis
豆奶特浓62 小时前
Java面试模拟:当搞笑程序员谢飞机遇到电商秒杀与AIGC客服场景
java·spring boot·微服务·面试·aigc·高并发·电商
明洞日记2 小时前
【设计模式手册013】命令模式 - 请求封装的优雅之道
java·设计模式·命令模式
方白羽2 小时前
Android多层嵌套RecyclerView滚动
android·java·kotlin
jason_yang2 小时前
vue3中createApp多个实例共享状态
javascript·vue.js
_瑶瑶_2 小时前
浅记一下ElementPlus中的虚拟化表格(el-table-v2)的简单使用
前端·javascript
Drift_Dream2 小时前
ResizeObserver:轻松监听元素尺寸变化
前端