【2022】学习、巩固、keep learning

悄咪咪记录自己的学习情况~快来一起学习呀

---

2022.9.11

1. 对象的拼接

• 扩展运算符...
  • 用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
  • 因为数据是特殊的对象，所以对象的扩展运算符也可以用于数组

  let obj1 = {a:3,b:4}
  let obj2 = {...obj1}
  console.log(obj2)   // { a: 3, b: 4 }
  
  // [...arr1 , ...arr2 , ...arr3];
  

• Object.assign(target, source1, source2)
  • 用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）
  • 第一个参数是目标对象，后面的参数都是源对象
  • 注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
  • 等同于扩展运算符...

  const target = { a: 1 }
  const source1= {b:2 }
  const source2 = {c:3}
  Object.assign(target, source1, source2)
  target // {a:1, b:2, c:3}
  

2. null的判断

• if(value===null)
• if(!null) （推荐）

3. Array.isArray()

• Array.isArray(value)
• 用于确定传递的值是否是一个数组
• 返回true（为数组），false（不是数组）

4. lodash get方法

• _.get(object,path,[defaultValue])
  • object (Object): 要检索的对象
  • path (Array|string): 要获取属性的路径
  • [defaultValue] (*): 如果解析的值是 undefined ，这个默认值会被返回
    • 获取对象n级路径下的值，如果中间路径值为空，返回默认值
    • .get(object, ‘a[0].c’, ‘default’)，避免直接使用a[0].c时因a[0]为undefind造成undefind.c报错

let obj = { 'a': [{ 'b': { 'c': 3 } }] }
_.get(obj,'a[0].b.c')    // 3
_.get(obj, ['a', '0', 'b', 'c'])    //3
_.get(obj,'a.b.c','default')    // default

• get
  • 判断了对象为null，则返回undefined
  • baseGet，实际实现在baseGet中
  • 第三个参数defaullt，即result为undefined时的默认值

lodash库_.get方法的实现走读

5. ??、.?、??=
   -可选链（ .?）

let tom;
let jerry;
if(!!tom){    //只有当tom存在的时候，我们才会去访问tom的name属性
	jerry=tom.name
}else{
	jerry=undefined
}

let tom;
//只有tom存在，同时tom具有name属性的时候，才会把值赋给jerry，否则就会将undefined复制给jerry
let jerry=tom?.name    

• 空值合并运算符（ ??）

//判断一个值存在，并且该值为0的时候，也认为它存在

// if-else实现
let tom = 0;
let jerry ;
let who='someone'
if(!!tom||tom===0){
	jerry=tom
}else {
	jerry=who
}

// ??实现
let tom = 0;
let jerry ;
let who='someone'

jerry=tom??who    

/**1.当tom为undefined、null时，jerry等于who
   2. 当tom为除undefined、null之外的其他值时，jerry于tom
**/

• 空值赋值运算符（ ??=）
  • 当??=左侧的值为null、undefined时，才会将右侧变量的值赋给左侧变量
  • 当??=左侧的值为其他值时，不会进行赋值

let a = 0
let b = 'hello'
let c = null
let d = '111'

 b??=a    // b="hello"
 c??=d    // c= "111"

6. !、!!

• !
  • 逻辑与运算，并且可以与任何变量进行逻辑与操作，将其转化为布尔值
  • 可将变量转换成boolean类型，null、undefined和空字符串取反都为true，其余都是false

!null=true;
!undefined=true;
!''=true;

!1=false;
!'jerry'=false;

• !!
  • 逻辑与的取反
  • 用来做类型判断，分为两步，第一步——!(变量），第二步——取反。!!value ，先将value转成取反的布尔值（!value），再将得到的布尔值再次取反（!!value）

let val;
if(val!=null&&typeof(val)!=undefined&&val!=''){
//只有a有内容才执行代码
}

//等价于
if(!!val){
}

2022.9.13

1. 判断null和undefined

• 通过if(tmpundefined)或 if(tmpnull) 无法区分null、undefined

function isUndefined(tmp){
	if(tmp==undefined) {
		console.log("tmp为undefined")
	}
}

function isNull(tmp){
	if(tmp==undefined) {
		console.log("tmp为null")
	}
}

var tmp1 = undefined
var tmp2 = null

isUndefined(tmp1)    // tmp为undefined
isUndefined(tmp2)    // tmp为undefined

isNull(tmp1)     // tmp为null
isNull(tmp2)     // tmp为null

• 通过typeof()判断

var tmp1 = undefined
var tmp2 = null


if (typeof(tmp1) == "undefined")
{
    console.log("tmp为undefined")    // tmp为undefined
}

if (typeof(tmp2) == "undefined")
{
    console.log("tmp为undefined")    // 
}

2022.9.15

1. 阻止鼠标的默认点击事件

• e.preventDefault()

function(e) {
	 e.preventDefault()
}

• return false

function(){
	return false
}

2. git 重命名分支
   （1）重命名远程分支对应的本地分支

     git branch -m oldName newName
   

   （2）删除远程分支

    	git push --delete origin oldName
   

   （3）上传新命名的本地分支

    git push origin newName
   

   （4）修改本地分支和远程分支的关联

    git branch --set-upstream-to origin/newName
   

3. cherry-pick

• 将指定的提交（commit）应用于其他分支
• git cherry-pick <commitHsh>

2022.9.16

1. vue动态组件 component is
   动态组件 <component>用于实现在指定的位置上，通过is绑定你要加载的组件，进而动态加载不同的组件。

<component :is="componentName"></component>

<!---componentName为你要加载的组件--!>

data() {
	return {
		componentName:'',   
		// componentName为自定义的变量，可以将需要加载的组件名赋给它，即可实现在<component>标签出现的位置，渲染该组件
	}
}

2022.9.17

1. JS数组的includes方法

• 用于判断一个数组中是否包含某个元素，并返回true或false

['tom','jerry','who'].includes('jerry')     // true

['tom','jerry','who'].includes(6)    // false

• 可以包含两个参数，第二个参数表示判断的起始位置

['tom','jerry','who'].includes('jerry',2)     // false

['tom','jerry','who'].includes('jerry',1)     // true

2. vue的.stop修饰符

• 用来阻止冒泡事件发生

<a @click.stop="doThis"></a>

2022.9.18

1. 根据返回值，选择渲染不同的组件

2022.9.26

1. Object.keys()、Object.values()
Object.keys()

• 介绍：Object.keys()返回一个由给定对象的可枚举属性组成的数组（字符串数组）
  • 数组中属性名的排列顺序和正常循环该对象返回的顺序一致
• 语法： Object.keys(obj)
  • obj表示要操作的对象
  • 返回值：由该对象可枚举的属性组成的字符串数组

// 对象：返回对象的key值组成的字符串数组
let obj = {
	name:'jerry',
	age:'3',
	hobby:'sleeping'
}
Object.keys(obj)   //['name','age','hobby']

//数组/字符串：返回数组/字符串索引值组成的字符串数组
let arr = [11,22,,33,44,55]
Object.keys(arr)    //['0', '1', '2','3','4']

• 注意：当传入的对象的属性值（key）是整数类型的时候，Object.keys()会返回有序的值

let obj = {
	60:'jerry',
	30:'3',
	50:'sleeping'
}
Object.keys(obj)   //['30','50','60']

/**
60:'jerry'
50:'sleeping'
30:'3'
**/

---

Object.values()

• 介绍：Object.values()返回对象可枚举属性值的数组
  • 值的顺序与使用for in循环的顺序相同
  • 区别：for in可以循环枚举原型链上的属性
• 语法：Object.values(obj)
  • obj为操作的对象
  • 返回值：包含对象可枚举属性值的数组

//对象：返回对象可枚举属性值组成的数组
let tom = {
	name:'Tom',
	age:2,
	hobby:'jerry'
}
Object.values(tom)   //['Tom',2,'jerry']

// 数组/字符串
let arr = [7,12,15];
Object.values(arr)   //[ 7, 12, 15 ]

let str =  "hello"
Object.values(str)   //[ 'h', 'e', 'l', 'l', 'o' ]

2022.9.27

1. forEach()、map()

forEach()和map()的异同：

同：

• 循环遍历数组的每一项
• 每次执行匿名函数都支持三个参数
  • 第一个参数：item（当前遍历的数组的项）
  • 第二个参数：index（索引值）
  • 第三参数：arr（原数组）
• 匿名函数的this指向windows
• 只能遍历数组

---

异：

• map()返回一个新的数组，数组中的元素为原始数组调用函数后得到的值
  • map()不会对空数组进行检测
  • 不会改变原数组
• forEach()按照顺序把数组中的元素传给匿名函数使用
  • 对于空数组不会调用回调函数
  • 没有返回值，不会返回新的数组
  • 不会改变原数组
  • 不支持continue、break关键字
  • 应用：为一些相同的元素，绑定事件

2. lodash noop()
   Lodash是一个JS库，帮助处理数组、字符串、对象等。
   lodash._noop()方法用于返回undefined，与传递给它的参数无关

• 用法：_.noop()
• 参数：可以带任意类型的可选参数
• 返回值：undefined

Lodash.noop