JavaScript进阶编程笔记

函数

动态参数

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, '李小龙'}