1.this
概念: 每一个函数内部都有一个关键字 this
this 的值, 之和 函数的调用有关, 与函数书写无关
- 一个普通的全局函数, 在正常调用的情况下, this === window
- 如果将函数放置到对象, 通过对象的语法去获取到并调用, 那么 this === 对象
- 如果将函数作为 事件处理函数, 那么触发的时候, 内部的 this 指向了 事件源
- 如果将函数作为定时器执行时的函数, 那么触发的时候, 内部的 this 指向了 全局对象 window
function fn() {
console.log(this) // 这一行不能决定 this 的值, 想要知道他的值是什么, 需要调用函数的时候才能确定
}
// 1. 普通调用方式
fn() // this === window
// 2. 将函数 fn 赋值给 对象obj的c属性 fn 和 obj.c 是一个引用地址
var obj = {
a: 1,
b: '我是对象obj的属性B',
c: fn
}
obj.c() // this === obj this 指向了 调用者
// 3. 事件的方式触发
var box = document.getElementById('box')
box.onclick = fn // this === box this 指向了 事件源
// 4. 倒计时器
setTimeout(fn, 0) // this === window
setInterval(fn, 1000) // this === window
2.改变this指向
1.call( )
语法：函数.call(this指向谁，参数1，参数2，参数3...) 第二个位置的参数 会传递到函数中
var obj = {
a: 1,
b: 2,
c: '我是对象obj的属性c'
}
function fn(x, y) {
console.log(this, x, y)
}
fn.call(obj, 300, 400)
2.apply( )
语法：函数.apply(this指向谁, [参数1, 参数2, 参数3]) 第二个位置的数组内数据, 会传递到函数内部
var obj = {
a: 1,
b: 2,
c: '我是对象obj的属性c'
}
function fn(x, y) {
console.log(this, x, y)
}
fn.apply(obj, [500, 600])
3.bind
语法：函数.bind(this指向谁, 参数1, 参数2, 参数3...) 第二个位置的参数开始, 会传递到函数中
注意: bind 方法不会立即执行函数, 他会返回一个 内部 this 修改完毕的 新函数
var obj = {
a: 1,
b: 2,
c: '我是对象obj的属性c'
}
function fn(x, y) {
console.log(this, x, y)
}
var newFn = fn.bind(obj, 700, 800)
newFn()
3.ES6新增的两种变量声明
1.let 变量名=值
2.const 变量名=值
3.let/const 与 var 的差异：
- let/const 声明的变量 不允许出现重复的
- let/const 声明的变量没有变量提升（不能提前输出）
- let/const 声明的变量 会受限于 所有的 {}
4.let 与 const 的差异
- let 声明的叫做变量(后续可以修改内部的值)
- const 声明的叫做常量(后续不能修改内部的值, 也不能修改内部的引用地址)
- 因为 let 后续可以修改变量的值, 所以他首次定义时, 可以不赋值;
- 但是 const 声明的时常量, 后续不能重新修改他的值, 所以首次定义时, 必须赋值
4.箭头函数
1.普通写法：(书写形参) => {书写函数调用时执行的代码}
const fn2 = () => {
console.log('我是 fn2 箭头函数')
}
2.箭头函数的优化：
-
箭头函数如果只有一个形参的时候, 可以不写前边的小括号(除此之外, 必写)
const fn3 = a => { console.log(a) }
-
如果箭头函数的函数体, 只有一行代码, 那么可以省略 大括号(并且会默认将这行代码 return)
const fn5 = (a, b) => a + b let sum = fn5(100, 200) console.log(sum)
5.箭头函数与普通函数的区别
- 箭头函数内部没有 this; 所以他的 this 取决于 书写的时候
-
箭头函数内部没有 arguments 对象
function fn(a, b, c, d, e) { console.log(arguments) } fn(1, 2, 3, 400, 500)
6.ES6解构赋值
1.ES6 解构赋值, 解构数组时, 赋值号左边必须写 中括号, 代表数组的解构赋值
var arr = [1, 2]
let [num1, num2, num3] = arr
console.log(num1, num2, num3)
2.ES6 解构赋值, 解构对象时, 赋值号左边 必须写大括号, 代表对象的解构赋值
大括号内部必须书写对象的 key
var obj = {
a: 11,
b: 21,
c: 31
}
let { a, b, c } = obj
console.log(a, b, c)
7.展开运算符
1.语法: ...数组(对象)
作用: 展开数组或者对象
数组：
var arr = [1, 2, 3]
console.log(arr)
console.log(...arr)
对象：
var obj = {
a: 1,
b: 2
}
var obj1 = {
...obj,
c: 3,
d: 4
}
console.log(obj1)
8.Set
1.set类似于数组的一种数据结构 内部按照索引下标排序（但是不能通过索引取值）
2.语法：let 变量名=new Set([数据1，数据2，数据3...])
3.特点：不支持重复数据
let s = new Set([3, 4, 5, 5, 5, 4, 4, 3])
console.log('原始数据结构', s)
Set的各种语法：
1.size (类似数组的 length); 作用: 获取到当前数据结构中 数据的数量
console.log(s.size)
- add 方法; 作用: 向当前数据结构中 新增数据
s.add(100)
3.has() 作用: 查询当前数据结构中是否拥有该数据; 找到的时候, 返回 true, 否则返回false
console.log(s.has(100))
4.delete(数据) 作用: 将当前数据结构中的 这个数据删掉
s.delete(5)
5.clear() 作用: 清空当前数据结构
s.clear()
6.forEach 作用: 遍历数据结构, 拿到数据结构的每一项
s.forEach(function (item, key, origin) {
// set 数据结构是没有 key 所以 item 和 key 打印出来的值都一样
console.log(item, key, origin)
})
9.Map
1.类似于 对象的 一种数据结构
2.语法: var 变量名 = new Map([key, value])
var arr = [1, 2, 3]
var arr1 = [4, 5, 6]
var m = new Map([[[500], [600]], [arr, arr1], ['arr123', arr1]])
Map的各种语法：
1.size 作用: 返回当前数据结构的 数据长度(多少个)
console.log(m.size)
2.set() 作用: 向当前数据结构中, 新增数据
m.set('newKey', [1, 2, 3, 4, 5])
3.get(key) 作用: 获取到指定key 对应的 value
console.log(m.get(arr))
console.log(m.get('newKey'))
4.has(key) 作用: 查询数据结构中是否存在当前 key; 存在返回一个 true ,否则返回一个 false
console.log(m.has('12345')) console.log(m.has('newKey'))
5.delete 作用: 删除当前数据结构对应的 key
m.delete('newKey')
6.clear 作用: 清空当前数据结构
m.clear()
7.forEach
m.forEach(function (item, key, origin) {
/**
* item: 对应的 value
* key: 对应的 key
* origin: 对应的原始数据结构
*/
console.log(item, key, origin)
})
