this关键字和ES6

<script>
    var date = new Date()
    var arr = []
    var obj = {}
    Math
    //类型检测 - typeof == 输出的对象类型太单一,不能很直观的看到对象具体是干什么用的
    //  console.log(typeof date);
    //  console.log(typeof arr);
    //  console.log(typeof obj);
    //  console.log(typeof Math);

    console.log({}.toString.call(date));
    console.log({}.toString.call(arr));
    console.log({}.toString.call(obj));
    console.log({}.toString.call(Math));


    console.log({}.toString.apply(date));
    console.log({}.toString.apply(arr));
    console.log({}.toString.apply(obj));
    console.log({}.toString.apply(Math));
   
</script>

2.场景2:把伪数组转成数组

2.用apply -- 改this

(1).语法:函数.apply(新的this含义)

能调用函数

(2).语法:函数.apply(新的this含义, [实参1, 实参2, ...])

apply给函数传递实参，是将所有实参组成一个数组,作为apply的第二个参数传递的

(3).使用场景同call一样

3.用bind -- 改this

(1).语法:函数.bind(改变后的this含义)

复制一个新函数,并改变新函数中的this

复制出来的新函数和原本的函数一模一样，但不是同一个。

(2).bind使用场景

<body>
<button>按钮</button>
</body>
<script>
    //bind使用场景
    document.querySelector('button').onclick = function () {

        setTimeout((function(){
            //改变btn的背景颜色
            // document.querySelector('button')
            this.style.backgroundColor = 'red'
            // console.log(this);
        }).bind(this),500)
    }
</script>

ES6

1.变量

1.let是es6新增的用于定义变量的关键字 - 使用方式跟var是一样的

let定义变量没有预解析

let不允许重复定义

let定义的变量会自带块级作用域(全局定义的变量不在window中)

2.const - 定义常量 - 使用方式跟var是一样的

跟let不一样的地方: 定义就必须赋值

总结:

let具有的特性const都有

定义就必须赋值

值不可以改

let其实还是会提前解析到，只是解析后也不能使用

例:

 var a = 10
 function fn() {
     // 暂时性死区
     a = 20
     console.log(a);
     // let其实还是会提前解析到，只是解析后也不能使用
     let a = 30
 }
 fn()
 console.log(a);

2.箭头函数

es6中提供的新的定义函数的语法

其实是对以前函数定义的一种简写 - 只能简写匿名函数

1.语法：(形参) => {代码段}

let fn = function(){
console.log(111);
}

使用箭头函数简写

let fn = () => {console.log(111)}

2.带参数的写法

let fn = function(a,b){
console.log(a+b);
}

使用箭头函数简写

let fn = (a,b) => {console.log(a+b);}

fn(3,4)

注意：如果只有一个形参的时候，小括号可以省略：

var add = function(a) {

console.log(a + 6);

}

使用箭头函数简写

var add = a => { console.log(a + 6); }

add(2)

注意:当大括号中只有一行代码的话，就可以省略大括号

使用箭头函数简写

var add = a => console.log(a + 6);

add(2)

当箭头函数省略大括号后，如果这行代码中有return关键字，return关键字必须省略

var add = function(a) {

return a + 3

}

使用箭头函数简写

var add = a => a + 3

var sum = add(4)

console.log(sum);

3.使用场景：通常在数组方法中使用

map - return的是新元素

filter - return的是条件

every - return的是条件

some - return的是条件

find -return的是条件

findIndex - return的是条件

数组.方法(function(v) {

return 内容

})

数组.方法(v => 内容)

4.箭头函数中没有this关键字

可以说箭头函数中的this代表的是箭头函数所在作用域中的this

箭头函数定义好了就已经知道this代表什么了

箭头函数中的this不能修改

3.形参默认值

函数调用有一个参数为0的情况比较多，我希望调用的时候能简便一点

当需要让一个形参变成可选项，可传递实参也可以不传递的时候，es6中新语法，快速实现需求

function getRandom(a, b = 0) { // 形参可以有默认值

return Math.floor(Math.random() * Math.abs(a - b)) + Math.min(a, b)

}

注意：带有默认值的形参，必须放在所有形参的末尾

4.模板字符串

es6提供的一种新的定义字符串的语法

语法：var str= `字符`

一个字符串可以多行定义---在控制台就可以多行显示

字符串内部通过${变量}可以直接解析变量，省略拼接

模板字符串不屑于拼接，在模板字符串中可以直接解析变量

5.解构赋值

解构赋值：是快速的方便的批量的把对象或数组中的多个值赋值给多个变量

1.解构对象

语法:var {属性名, 属性名, ..} = 对象

var {属性名: 新的变量名} = 对象

var {属性名: {属性名}} = 对象

2.解构数组

语法:var [变量名, 变量名, ..] = 数组

var [变量名, [变量名]] = 数组

var [ __,__,变量名, [变量名]] = 数组 -- 用下划线表示这个变量我不用

最简短的交换两个变量的值的代码

var a = 1
var b = 2
var [a, b] = [b, a]
console.log(a, b);

6.展开合并运算符

1.将对象展开成多个键值对

语法： ...对象 - 将对象展开成多个键值对

2.数组展开 - 将数组展开成多个值

语法： ...数组

3.数组合并

语法： ...数组名将多个值收集在一个数组中

7.对象简写

属性:

当对象的属性名和对应的值所使用的变量名同名了，就可以简写了

var obj = {name, // 代表的是键值对

age,

sex

}

方法:

当对象的方法的值是一个匿名函数的时候，方法可以简写

var obj = {

eat( ) { }

}

8.Map方法

Map:这是一种es6新提供的一种对象数据(是一个键值对，类型是object)

Map数据其实是一种键值对

object的键必须是字符串，如果给的不是字符串，会转成字符串作为对象的键

Map的键，可以是任意数据类型跟之前学习的object的区别是键可以是任意类型的数据,不会被覆盖

定义:

var m = new Map()

var m = new Map([['键1', '值'], ['键2', '值']])

方法:

1.设置键值对 - set

map.set(键, 值) - 如果map中已经有了当前指定的键，后面的值会覆盖前面的值。

2.根据键获取值 - get

map.get(键) - 返回获取到的值。如果获取一个map中不存在的键，返回undefined。

3.删除键值对 - delete

map.delete(键) - 返回布尔值，代表是否删除成功。删除map中不存在的键，返回false。

4.判断map中是否包含某个键值对 - has

map.has(键) - 返回布尔值

5.清空map中的数据 - clear

map.clear() - 没有返回值，

6.获取所有键的集合 - keys

map.keys() - 返回一个集合

7.获取所有值的集合 - values

map.values() - 返回一个集合

8.遍历map - forEach

map.forEach((item, key) => {})

属性:

获取map中键值对的数量 - size

map.size - 返回数字

9.Set方法

es6提供的一种新的对象类型的数据 - Set

官方：Set是所有键的集合

我们语言：新型的数组，数组中不能有重复的元素

定义

var s = new Set()

实现数组去重

var arr = [1,1,2,2,2,3,3,4]

console.log ( [...new Set(arr) ] ); // [1,2,3,4]

方法:

1.添加一个元素

set.add(值) - 返回添加后的新set。如果添加的数据在set中存在，则添加不进去

2.删除一个元素

set.delete(元素) - 返回布尔值，表示是否删除成功

3.查看set中数据长度

set.size -- 返回数字

4.判段set中是否有某个数据

set.has(数据) -- 返回布尔值

5.清空set中的数据

set.clear() - 没有返回值

6.遍历

set.forEach(item => {} )

10.for...of

es6提供了一种新的遍历语法(直接遍历到值的一种方式)

语法：

for(var a of 数组/字符串) {

}

用于遍历值的一种遍历方式，不能遍历对象

可以遍历数组、字符串、map、set

Komorebi_r

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫