Web前端笔记-9、JS基础-一些对象、JS进阶

一些对象

window

定时器-延迟函数

setTimeout(()=>{}, 2000)

location

navigator

history

本地存储

map&join

字符串拼接的方法。效果好，开发常用

利用map()和join()数组方法实现字符串拼接

map：迭代数组，可以遍历数组处理数据，并且返回新的数组

map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。

map重点在于有返回值(迭代每次return后面的内容会返回)，forEach没有返回值（undefined）

const arr = ['aaa', 'bbb', 'ccc']
// arr.map(function(数组每一项， 数组索引){ })
const newArr = arr.map(function(ele, index){
  return ele
})

join将数组进行分割并组合成一个字符串，默认分割符是','

const arr = ['aaa', 'bbb', 'ccc']
dq('ul').innerHTML = arr.map(ele => {
  return `<li>${ele}</li>`
}).join('')

正则表达式、插件

JS进阶

垃圾回收机制

闭包

变量提升

函数提升

函数参数-arguments对象

函数参数-剩余参数

展开运算符

箭头函数

对象属性和方法的简写

数组解构

解构赋值：可以将数组中的值或对象的属性取出，赋值给其他变量

解构：其实就是把一个事物的结构进行拆解

const [max, min, avg] = [100, 60, 80]

const arr = ['1', '2', '3']
const [uname, age, gender] = arr
// 常用场景：交换变量值
let a = 10
let b = 20
;[b, a] = [a, b]  // 两侧都是数组，前面加个分号

js前加分号：小括号开头：如立即执行函数；中括号开头。
数组解构注意点：

1. 变量多值少的情况，多出来的变量默认赋值为 undefined
2. 防止有undefined传递值的情况，可以设置默认值
3. 变量少值多的情况
4. 利用剩余参数解决变量少值多的情况 const [a, b, ...c] = [1, 2, 3, 4, 5], c为[3, 4, 5]。
5. 按需导入，忽略某些值

多维数组

const arr = [1, 2, 3, [4, 5, 6]]

const [a, b, c, [d, e, f]] = arr

对象解构

对象解构赋值：可以将对象的属性取出，赋值给其他变量。

右侧对象的属性值将被赋值给左侧的同名变量

const user = {
  uname: 'good',
  age: 18,
  gender: '男'
}

const {uname, age, gender} = user

1. 对象的属性名一定要和变量名相同
2. 变量名如果没有和对象属性名相同的则默认是 undefined
3. 注意解构的变量名不要和外面的变量名冲突否则报错
4. 对象的解构和顺序无关

针对第三点：

更改解构变量名：可以从一个对象中提取变量并同时修改新的变量名。

格式: 变量名: 新变量名

const uname = 'bad'
const user = {
  uname: 'good',
  age: 18,
  gender: '男'
}

const {uname: name, age, gender} = user

对象数组的解构

const pig = [
  {
    name: 'good',
    age: 6
  },
  {
    name: 'bad',
    age: 7
  }
]

cosnt [{uname, age}, { uname: uname1, age: age1}] = pig

多级对象解构

const pig = {
  name: 'good',
  family: {
    mother: 'mom',
    father: 'dad',
    sister: 'bad'
  },
  age: 6
}

const {name, family: {mother, father, sister}} = pig

/////////////////常用
function render({data: mydata}) {
  console.log(mydata)
}
render(msg)

数组方法-filter

创建对象的三种方法

原型对象，原型链

浅拷贝

深拷贝-JSON序列化方式、loadash库方式