Day15 ES6基础

this的应用及指向问题

this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是调用函数的那个对象。
this的使用情况:
1、作为普通函数调用,这时函数属于全局性调用,因此this就代表全局对象window。
2、作为对象方法的调用,这时this就指这个当前对象。(事件处理函数同理)
3、作为构造函数调用,所谓构造函数,就是通过这个函数生成一个新对象(实例)。这时,this就指这个新对象(实例)。
4、apply 、 call 、bind的介绍(函数的方法)
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;第一个参数都是this要指向的对象,也就是想指定的上下文;从第二个参数开始,就是函数的本身的参数;
但bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。
5、应用总结
我们都知道定时器的匿名函数里不能写this,它会指向window,但有了bind方法以后,我们可以随意设定this 的指向。
利用变量赋值改变(将正确的this存储下来)。

JSON

JSON 是一种轻量级的数据交换格式。它是基于 ECMAScript的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

JSON字符串和对象直接的转换

1、JSON.parse 函数
作用:将 JavaScript 对象表示法 (JSON) 字符串转换为对象,具有json格式检测功能。
2、JSON.stringify()函数
作用:将 JavaScript 值转换为 JavaScript 对象表示法 (JSON) 字符串
3、eval()函数---性能不及JSON.parse(),安全性不好。
作用:eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
eval()在解析代码时还要用一对圆括号将字符串包起来。其目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式转化为对象,而不是作为语句来执行。
例如:eval("{}") 和 eval('('+'{}'+')')
eval比JSON.parse()要早。

let和const关键字( http://es6.ruanyifeng.com/

ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

不存在变量提升

只要块级作用域内存在let命令,它所声明的变量就“绑定”这个区域,不再受外部的影响。

let不允许在相同作用域内,重复声明同一个变量。

ES6允许块级作用域的任意嵌套,外层无法读取内层作用域的变量,反之可以

允许在块级作用域内声明函数

const声明一个只读的常量。一旦声明,常量的值就不能改变。

const声明的常量,也与let一样不可重复声明。

const的作用域与let命令相同:只在声明所在的块级作用域内有效。

变量的解构赋值

ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.
解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用arr[x]或者obj[key]等传统方式进行赋值

数组的解构赋值

对象的解构赋值

字符串的解构赋值。

函数参数的解构赋值(利用数组和对象解构传参赋值)

扩展运算符

扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列值

rest运算符

rest运算符也是三个点号,不过其功能与扩展运算符恰好相反,把逗号隔开的值序列组合成一个数组

字符串扩展

模板字符串

模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

repeat(n)方法返回一个新字符串,表示将原字符串重复n次。

includes():返回布尔值,表示是否找到了参数字符串。

startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。

endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

=>函数

函数默认值

箭头函数有几个使用注意点。

1、函数体内this对象,就是定义时所在的对象,而不是使用时所在的对象。This不会改变了。
2、不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
3、不可以使用arguments对象,该对象在函数体内不存在。
4、箭头函数一定是匿名函数。
5、箭头函数应用总结:

箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下,例如用在map、reduce、filter的回调函数定义中;

不要在最外层定义箭头函数,因为在函数内部操作this会很容易污染全局作用域。最起码在箭头函数外部包一层普通函数,将this控制在可见的范围内;

箭头函数最吸引人的地方是简洁。在有多层函数嵌套的情况下,箭头函数的简洁性并没有很大的提升,反而影响了函数的作用范围的识别度,这种情况不建议使用箭头函数。

Symbol类型

symbol--表示独一无二的值,它是js中的第七种数据类型。

基本数据类型:null undefined number boolean string symbol
引用数据类型:object
Symbol():首字母大写。
symbol 函数前不能使用new,否则会报错,原因在于symbol是一个原始类型的值,不是对象。
1、symbol函数接收一个字符串作为参数,表示对symbol的描述,主要是为了在控制台显示,或者转为字符串的时候,比较容易区分。描述的内容相同仅仅表示的是描述,不代表其他的意义。
2、symbol数据类型转换。
symbol可以利用String()、toString()转换成字符串
利用Boolean()或者!转换成布尔值(只有true值)
不能转换成数字。
不能使用任何运算符进行运算。
3、作为对象的属性名。
4、注意事项
不能直接使用[symbol()]作为键值,最好添加对应的参数进行区分,而且也不能被for...in遍历出来。但可以通过Object.getOwnPropertySymbols(obj)方法获取一个对象所有的symbol属性。

Set(array)和Map(object)结构

ES6提供了数据结构set. 它类似于数组,但是成员的值都是唯一的,没有重复的值。
Set 本身是一个构造函数,用来生成 Set 数据结构,数组作为参数。
每一项即是键也是值。
1、创建一个Set;
2、Set类的属性--size
3、Set类的方法
Set.add(value) 添加一个数据,返回Set结构本身,允许进行链式操作。
Set.delete(value) 删除指定数据,返回一个布尔值,表示删除是否成功。
Set.has(value) 判断该值是否为Set的成员,返回一个布尔值。
Set.clear() 清除所有的数据,没有返回值。
forEach():使用回调函数遍历每个成员

数据结构--map

JavaScript 的对象(Object),只能用字符串当作键。这给它的使用带来了很大的限制。ES6 提供了 Map 数据结构。它类似于对象,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
1、创建一个map
2、map类的属性--size
3、map类的方法
map.set(key,value) :设置键名key对应的键值value,然后返回整个map结构,如果key已经有值,则键值会被更新,否则就生成该键,可以链式操作。
map.get(key) get方法读取key对应的键值,如果找不到key,返回undefined
map.delete(key) 删除某个键,返回true.如果删除失败,返回false.
map.has(key) 方法返回一个布尔值,表示某个键是否在当前map对象之中。
map.clear() 清除所有数据,没有返回值
map.keys() 返回键名的遍历器
map.values() 返回键名/键值的遍历器
map.entries() 返回键值对的遍历器
map.forEach() 使用回调函数遍历每个成员。

数组和对象的扩展

数组的扩展方法

1、Array.from()方法用于将对象转为真正的数组(类数组转数组)
2、Array.of()方法用于将一组值,转换为数组。
3、fill()方法使用给定值,填充一个数组。

对象的扩展方法

1、对象的简洁表示法
2、object.assign()用于对象的合并,将源对象的所有可枚举属性,复制到目标对象。

掌握class的写法及继承

应用

1.了解class面向对象编程
2.掌握es6语法的灵活运用

综合应用

3.封装拖拽效果
4.封装常见兼容

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容