Skip to main content

3 posts tagged with "Frontend"

View All Tags

  • alert 弹窗提醒一段文本
  • a = prompt("input desc")  接收输入，并把内容赋值给 a
  • confirm 弹出确认窗口，让用户确认，这是给出的结果就是 yes/no
  • console.log('AAS') 输出一段日志
  • let a = 1  声明 变量 a=1，number 类型
  • const ABB = 123 声明一个常量 ABB, 不可以重新赋值
  • undefined 和 null 都是空的意思，但是这两个又不相同
  • a ?? "hello" ;  ?? 叫做 空值运算符，指当 a 未被赋值时，将 hello 赋值给 a，如果 a 已经被赋值了，则不变 ; a 需要被声明，在 JavaScript 中 声明 和 赋值 是两件事情

js 的数据类型​

  • js 是弱类型语言，1 == '1' => true; 但是  1 === '1' => false；   6 / "2" => 3, typeof is number

支持判断​

if  /elif else

支持的循环方式​

do {
    // Hello
} whIle ()

for (a=1;a<10;a+=2) {
 // Hello
}

a = 100;
switch (a) {
    case (a = 100):{
        //Hello
        break;
    }
    default:
        alert(a);
}

函数声明​

必须要使用 function


function showMessage() {
    alert('Hello Javascript !');
}
  • 函数中变量的作用域：这部分与 Python 和 C 一致，分别为 内部变量 和 外部变量；关系存在在继承的概念
  • 函数的参数，入参定义在 () 内，当函数声明了入参后，在对应调用时，就需要传递符合条件的参数
    • 支持函数的默认值的设定
  • 函数的返回值，同样使用 return 作为返回值处理
  • 函数 function is  an action, 所以函数的命名通常是 使用动词；javascipt 的命名方式 官方建议为 驼峰的方式

函数的特殊部分

  • 函数表达式   let  sayHi = function () { alert('Hi')}  利用声明 let 创建了一个函数，并把他赋值给了变量 sayHi
  • 回调函数

[ ] 今天学习的内容到此 回调函数  https://zh.javascript.info/function-expressions

严格模式​

  • 三连表达式     cond ? resultA : resultB   //  1 > 0 ? alert(true) : alert(false)   cond 为真展示 resultA, 反之展示 resultB
  • 空值运算符     a ?? b       =>  a ?? b 的结果是 a，除非 a 为 null/undefined，这时结果是 b

开发行为规范​

BDD

在 BDD 中，规范先行，实现在后。最后我们同时拥有了规范和代码。

规范有三种使用方式：

  • 作为 测试 —— 保证代码正确工作。
  • 作为 文档 —— describe 和 it 的标题告诉我们函数做了什么。
  • 作为 案例 —— 测试实际工作的例子展示了一个函数可以被怎样使用。

有了规范，我们可以安全地改进、修改甚至重写函数，并确保它仍然正确地工作。

这在一个函数会被用在多个地方的大型项目中尤其重要。当我们改变这样一个函数时，没有办法手动检查每个使用它们的地方是否仍旧正确。

如果没有测试，一般有两个办法：

  • 展示修改，无论修改了什么。然后我们的用户遇到了 bug，这应该是我们没有手动完成某些检查。
  • 如果对出错的惩罚比较严重，并且没有测试，那么大家会很害怕修改这样的函数，然后这些代码就会越来越陈旧，没有人会想接触它。这很不利于发展。自动化测试则有助于避免这样的问题！

如果这个项目被测试代码覆盖了，就不会出现这种问题。在任何修改之后，我们都可以运行测试，并在几秒钟内看到大量的检查。

另外，一个经过良好测试的代码通常都有更好的架构。

当然，这是因为覆盖了自动化测试的代码更容易修改和改进。但还有另一个原因。

要编写测试，代码的组织方式应确保每个函数都有一个清晰描述的任务、定义良好的输入和输出。这意味着从一开始就有一个好的架构。

在实际开发中有时候可能并不容易，有时很难在写实际代码之前编写规范，因为还不清楚它应该如何表现。但一般来说，编写测试使得开发更快更稳定。

Object 对象的基础知识​

在 js 中 对象可以说非常常见的用到，所以相对来讲 定义一个对象也是非常的方便

let user = new Object();   构造函数 的语法
let user = {}     构造 "字面量的语法"

在对象中，包含的是 一个个属性，这些属性又以 键值对 的形式出现在 中

  • 定义一个有属性的对象  let user = {name:'alex', age: 18}
    • 增加属性 user.city = 'Shanghai'  =>   user['love package'] = 'Apple'
    • 删除一个属性 delete user.age
  • 计算属性  ：当创建一个对象时，我可以在对象字面量中使用方括号，这叫做计算属性；计算属性的含义是 [fruit] 是从 变量 fruit 中获取的
  • 判断一个 属性是否在对象中    "key" in Object  ，这里的 key 需要时一个值，否则会被认为一个变量
  • 遍历一个对象采用的方式是  for  (let key in Object) : 这里的做法是 声明[let] 变量 key，并且把 Object 中的每一个 key 的值遍历赋予 key
  • 取出对象中一个 key 的值可以采用的方式 Object[key] 或者 Object.key；但是 Object.key 会出现对 多词属性
    • 单词属性   name , age
    • 多词属性   "like birds" ，这时使用 Object.key 的方式就不可行了

JavaScirpt 中的垃圾回收机制

当一个对象中的属性被建立后，如果这些属性被多个对象引用时，其他一个对象被重新赋值了，那么这些属性还是可以被访问的；但是当所有对象被重置后，这些无法被访问的属性 就变得不可以，这也会占用我们内存，而这类也会被 回收。

对象的方法 this​

this 是用来标识当前对象的，这个对象可以是个函数 ; 为了访问该对象，方法中可以使用 this 关键字。

this 设计到编程的一种形式： **面向对象编程** OOP ; 当我们在代码中用对象表示实体时，就是所谓的 面向对象编程，简称为“OOP”。
  • this 的优势：在 JavaScript 中，this 关键字与其他大多数编程语言中的不同。JavaScript 中的 this 可以用于任何函数，即使它不是对象的方法。
  • this 的值是在代码运行时计算出来的，它取决于代码上下文。不用函数调用 this 时的到结果不一致的
  • 箭头函数   function sum (a,b) => a*b；这类箭头函数是没有自己的 this，如果在箭头函数中使用 this，会把 this 当成一个真正的对象去处理，这不好

在 JavaScript 中，this 是“自由”的，它的值是在调用时计算出来的，它的值并不取决于方法声明的位置，而是取决于在“点符号前”的是什么对象。在运行时对 this 求值的这个概念既有优点也有缺点。一方面，函数可以被重用于不同的对象。另一方面，更大的灵活性造成了更大的出错的可能。这里我们的立场并不是要评判编程语言的这个设计是好是坏。而是要了解怎样使用它，如何趋利避害。

对象的 构造和操作符 new​

  • 构造函数在技术上，也是属于常规函数，不过有 2 个约定：
    • 命名以大写字母开头，这是一个共同的约定，用来标明一个函数将被使用 new 来运行
    • 他们只能有 new 操作符来执行

构造器不能被再次调用，因为他保存在任何地址，知识被创建后 后续 调用使用；所以 构造函数的封装一个 单一对象的代码，而无需将来重用

JavaScript  ?. 可选链​

可选链 ?. 语法有三种形式：

  • obj?.prop —— 如果 obj 存在则返回 obj.prop，否则返回 undefined。
  • obj?.[prop] —— 如果 obj 存在则返回 obj[prop]，否则返回 undefined。
  • obj.method?.() —— 如果 obj.method 存在则调用 obj.method()，否则返回 undefined。

正如我们所看到的，这些语法形式用起来都很简单直接。?. 检查左边部分是否为 null/undefined，如果不是则继续运算。 ?. 链使我们能够安全地访问嵌套属性。但是，我们应该谨慎地使用 ?.，仅在当左边部分不存在也没问题的情况下使用为宜。以保证在代码中有编程上的错误出现时，也不会对我们隐藏。

Symbol  类型​

根据规范，Obj 的属性键 只能是 字符串类型或者 Symbol 类型；不能是 Number，也不能是 Boolean。

Symbol 值 表示 唯一的标识符，现在可以通过 Symbol() 来创建这种类型的值；Symbol 的特性是唯一，即使我们创建了相同描述的 Symbol，他们的值不相同的；比如以下：

let id1 = Symbol('id')
let id2 = Symbol('id')

id1 == id2   // 结果是 false

Symbol 的另外一个特性是不会被自动转化为字符串；其实在 javascript 中大多数的数值都是可以进行字符串的 隐式转换 ，但是使用 Symbol() 定义的一个字符，是不能够直接转化为 字符串的，可以使用 Symbol('id').toString() 来输出字符串。

原始类型的方法​

在 JavaScript 中有 7 种原始类型：string，number，bigint，boolean，symbol，null 和 undefined。

  • 字符串处理方法
  • Number 的处理方法

数组方法的备忘笔记​

数组方法备忘单：

  • 添加/删除元素：

    • push(...items) —— 向尾端添加元素
    • pop() —— 从尾端提取一个元素
    • shift() —— 从首端提取一个元素
    • unshift(...items) —— 向首端添加元素
    • splice(pos, deleteCount, ...items) 从 pos 开始删除 deleteCount 个元素，并插入 items。 用来控制数组的增删改查
    • slice(start, end) —— 创建一个新数组，将从索引 start 到索引 end（但不包括 end）的元素复制进去 取出部分数组的内容产生新数组
    • concat(...items) —— 返回一个新数组：复制当前数组的所有元素，并向其中添加 items。如果 items 中的任意一项是一个数组，那么就取其元素。 拼接多个数组，产生一个新的数组

  • 搜索元素：

  • indexOf/lastIndexOf(item, pos) —— 从索引 pos 开始搜索 item，搜索到则返回该项的索引，否则返回 -1。

  • includes(value) —— 如果数组有 value，则返回 true，否则返回 false。

  • find/filter(func) —— 通过 func 过滤元素，返回使 func 返回 true 的第一个值/所有值。

  • findIndex 和 find 类似，但返回索引而不是值。

  • 遍历元素：

    • forEach(func) —— 对每个元素都调用 func，不返回任何内容。

let fruits = ['Apple', 'Orage','Prism']

for ( let fruit of fruits ) \{alert(fruit); \}
// 遍历数组 使用 for .. of 不能获取到当前元素的索引，知识获取到元素的值；但是大多数情况下是够用的，而且这样些代码更短，质量会高一些

for (let i = 0; i <= fruits.length; i++ ) \{alert(fruits[i])\}
// 这个方式就是标准的通过遍历元素的索引，然后通过索引获取到对应的数组元素的值
  • 转换数组：
    • map(func) —— 根据对每个元素调用 func 的结果创建一个新数组。
    • sort(func) —— 对数组进行原位（in-place）排序，然后返回它。
    • reverse() —— 原位（in-place）反转数组，然后返回它。
    • split/join —— 将字符串转换为数组并返回。
    • reduce/reduceRight(func, initial) —— 通过对每个元素调用 func 计算数组上的单个值，并在调用之间传递中间结果。
  • 其他：
    • Array.isArray(arr) 检查 arr 是否是一个数组。

请注意，sort，reverse 和 splice 方法修改的是数组本身；这些是最常用的方法，它们覆盖 99％ 的用例。但是还有其他几个：

  • arr.some(fn)/arr.every(fn) 检查数组。

与 map 类似，对数组的每个元素调用函数 fn。如果任何/所有结果为 true，则返回 true，否则返回 false。

这两个方法的行为类似于 || 和 && 运算符：如果 fn 返回一个真值，arr.some() 立即返回 true 并停止迭代其余数组项；如果 fn 返回一个假值，arr.every() 立即返回 false 并停止对其余数组项的迭代。

我们可以使用 every 来比较数组：

function arraysEqual(arr1, arr2) {
  return arr1.length === arr2.length && arr1.every((value, index) => value === arr2[index]);
}

alert( arraysEqual([1, 2], [1, 2])); // true
  • arr.fill(value, start, end) —— 从索引 start 到 end，用重复的 value 填充数组。
  • arr.copyWithin(target, start, end) —— 将从位置 start 到 end 的所有元素复制到 自身 的 target 位置（覆盖现有元素）。
  • arr.flat(depth)/arr.flatMap(fn) 从多维数组创建一个新的扁平数组。
  • Array.of(element0[, element1[, …[, elementN]]]) 基于可变数量的参数创建一个新的 Array 实例，而不需要考虑参数的数量或类型。