JavaScript进阶编程笔记

95次阅读
没有评论

共计 3781 个字符,预计需要花费 10 分钟才能阅读完成。

函数

动态参数

arguments 是函数内部内置的伪数组变量,它包含了调用函数时传入的所有实参。

function sum() {
  let s = 0
  for (let i = 0; i < arguments.length; i++) {s += arguments[i]
  }
  console.log(s)
}
sum(1, 3, 5)

剩余参数

… 是语法符号,用于获取多余的实参,是个真数组。实际开发中,推荐使用剩余参数。

function sum(a, b, ...other) {
  let s = a + b
  for (let i = 0; i < other.length; i++) {s += other[i]
  }
  console.log(s)
}
sum(1, 3, 5, 7)

箭头函数 this

箭头函数不会创建自己的 this,它只会从自己作用域链的上一层沿用 this。

如果直接在箭头后设置对象字面量为返回值时,对象字面量必须使用 () 括起来。

const fn = () => ({ name: '李小龙'})
console.log(fn())

内置构造函数

Object

const obj = {name: " 佩奇 ", age: 12}
console.log(Object.keys(obj)) //['name', 'age']
console.log(Object.values(obj)) //['佩奇', 12]

Object.assign(obj, { sex: " 女 "}) // 拷贝对象
console.log(obj) //{name: '佩奇', age: 12, sex: '女'}

Array

filter,筛选数组

const arr = [1, 4, 7, 9]
const newArr = arr.filter(function (value, index) {return value > 5})
console.log(newArr) //[7, 9]

reduce

const arr = [1, 3, 5]
const total = arr.reduce(function (prev, current) {return prev + current})
console.log(total) //9

// 有初始值
const total2 = arr.reduce(function (prev, current) {return prev + current}, 10)
console.log(total2) //19

// 箭头函数写法
const total3 = arr.reduce((prev, current) => prev + current, 10)
console.log(total3) //19

find,找到就返回。

const arr = [{ name: " 佩奇 ", age: 18},
  {name: " 乔治 ", age: 16},
]
const p = arr.find(function (item) {return item.name === " 佩奇 "})
console.log(p) //{name: '佩奇', age: 18}

findIndex()用于找出第一个符合条件的数组成员的位置,如果没有找到返回 -1。

some,有一个符合条件就返回 true,否则返回 false。

const arr = [1, 4, 7, 9]
const flag = arr.some(function (value, index) {return value > 5})
console.log(flag) //true

注意:在 some 里面遇到 return true 会终止遍历,迭代效率更高。

every,每一个是否都符合条件,都符合返回 true,否则返回 false。

const arr = [1, 5, 8]
const flag = arr.every((item) => item >= 1)
console.log(flag) //true

from,把伪数组转换为真数组。

const lst = document.querySelectorAll("ul li")
const lst2 = Array.from(lst)
console.log(lst2)

String

const str = " 佩奇, 乔治 "
const arr = str.split(",")
console.log(arr) //['佩奇', '乔治']

console.log(str.substring(2)) //, 乔治
console.log(str.substring(3, 5)) // 乔治

console.log(str.startsWith(" 佩奇 ")) //true

console.log(str.includes(" 佩奇 ")) //true

深浅拷贝

浅拷贝

如果是简单数据类型拷贝值,引用数据类型拷贝的是地址(简单理解,如果是单层对象,没问题,如果有多层就有问题)。

const obj = {
  name: " 佩奇 ",
  age: 10,
}
// 方法一
const obj2 = {...obj}
obj2.age = 12
console.log(obj.age) //10
console.log(obj2.age) //12
// 方法二
const obj3 = {}
Object.assign(obj3, obj)
obj3.age = 14
console.log(obj.age) //10
console.log(obj3.age) //14

const arr = [{age: 18}, {age: 20}]
const arr2 = arr.slice() // 浅拷贝
const arr3 = structuredClone(arr) // 深拷贝
console.log(arr2[0] === arr[0]) //true
console.log(arr3[0] === arr[0]) //false

深拷贝

方法一,递归实现:

const obj = {
  name: " 佩奇 ",
  age: 10,
  hobby: [" 唱歌 ", " 跳舞 "],
}
function deepCopy(newObj, oldObj) {for (let k in oldObj) {if (oldObj[k] instanceof Array) {newObj[k] = []
      deepCopy(newObj[k], oldObj[k])
    } else if (oldObj[k] instanceof Object) {newObj[k] = {}
      deepCopy(newObj[k], oldObj[k])
    } else {newObj[k] = oldObj[k]
    }
  }
}
const obj2 = {}
deepCopy(obj2, obj)
obj2.hobby[0] = " 睡觉 "
console.log(obj.hobby[0]) // 唱歌

方法二,使用 js 库 lodash 里面的 cloneDeep 实现:

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>
  const obj = {
    name: " 佩奇 ",
    age: 10,
    hobby: [" 唱歌 ", " 跳舞 "],
  }
  const obj2 = _.cloneDeep(obj)
  obj2.hobby[0] = " 睡觉 "
  console.log(obj.hobby[0]) // 唱歌
</script>

方法三,使用 JSON 字符串转换实现:

const obj = {
  name: " 佩奇 ",
  age: 10,
  hobby: [" 唱歌 ", " 跳舞 "],
}
const obj2 = JSON.parse(JSON.stringify(obj))
obj2.hobby[0] = " 睡觉 "
console.log(obj.hobby[0]) // 唱歌

Map

Map 用来存储键值对结构的数据 (key-value)。

Map 和 Object 的主要区别:

  • Object 中的属性名只能是字符串。如果传递了一个其他类型的属性名,JS 解释器会自动将其转换为字符串
  • Map 中任何类型值都可作为 key

属性和方法:

  • map.size()获取 map 中键值对的数量
  • map.set(key,value)向 map 中添加键值对
  • map.get(key)根据 key 获取值
  • map.delete(key)删除指定数据
  • map.has(key)检查 map 中是否包含指定键
  • map.clear()删除全部的键值对
const map = new Map() // 空 Map
map.set('name', '李小龙') // 添加 key-value
console.log(map.has('name')) // true 是否存在 key
map.set(NaN, '呵呵')
console.log(map.get(NaN)) // 呵呵 获取 value
map.delete(NaN) // 删除 key
console.log(map) // Map(1) {'name' => '李小龙'}

// Map 转数组
const arr = Array.from(map) // 方法一
const arr2 = [...map] // 方法二

// 数组转 Map
const map2 = new Map([['name', '猪八戒'],
  ['age', 18],
])
console.log(map2) //{'name' => '猪八戒', 'age' => 18}

Set

用来创建一个集合,功能和数组类似,不同点在于 Set 中不能存储重复数据。

方法:

  • size 获取数量
  • add()添加元素
  • has()检查元素
  • delete()删除元素
const set = new Set()
set.add(1)
set.add('李小龙')
console.log(set) //{1, '李小龙'}

正文完
 0
三毛笔记
版权声明:本站原创文章,由 三毛笔记 于2023-08-02发表,共计3781字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)