js的第15天

day15 es5和es6

JavaScript的构成

DOM 操作文档的

BOM 操作浏览器

ECMAScript （基础语法）

ECMAScript

ECMAScript简称为ES，（ECMA 欧洲计算机协会），ES分为不同的版本（常用的版本 ES3(常用的所有

浏览器都支持都可以直接解析)、ES5 (大部分的高版本的浏览器都能支持)、ES6（部分浏览器支持但存

在兼容问题不能直接解析必须先编译成ES3才能解析 bable.js（es的版本编译的）、ES7...(一般把ES6

以后都称为ES6)））

ES3 (常用版本)

ES5 (更加规范化和更加简易化 2015.10)

ES6 (模块化编程基于ES5更加简易化 2016.4)

ES5新增内容

严格模式

概述：我们普通书写的js代码并没有特别多的规范，甚至在某些时候可以随意发挥，这种模式被称为怪

异模式。相对而言一种更加规范化的模式被称为严格模式。

严格模式的声明

使用 use strict 进行声明,他的声明位置必须在第一行（常用于源码书写）

严格模式的特性

声明一个变量必须具备关键词

函数内this不能指向window

函数内arguments形参和实参不同步

禁止八进制方法

函数声明必须在对应的位置进行声明

//怪异模式

// var a = 10

// b = 20

// console.log(a);

// console.log(b);

//严格模式

"

use strict"; //声明必须在第一行

//声明一个变量必须要有关键词

c = 30

console.log(c);//c没有被定义

//严格模式中函数内的this不能指向window

function fn(){

console.log(this);

}

fn()// this 是 undefined

//在严格模式中不能使用八进制相关的方法

//严格模式中argument的形参和实参不同步

//严格模式中函数只能在对应的声明函数地方进行声明

数组新增的高阶函数

高阶函数概述：

以函数作为参数的函数叫做高阶函数

新增的相关函数

遍历的函数

forEach （没有返回值）

//高阶函数

var arr = ['a','b','c']

//forEach

//传入的函数里面的三个参数分别是第一个值第二个下标第三个遍历的数组

//forEach没有返回值 js函数里面参数如果不需要可以不传

arr.forEach(function(v,i,arr){

// console.log(v); //里面值

// console.log(i); //下标

console.log(arr); //遍历的数组

})

//省略对应参数

arr.forEach(function(v){

console.log(v);

})

map （返回值是一个数组）})

//map

//map跟forEach使用是一样的但map有返回值返回一个数组

var mapArr = arr.map(function(v,i,arr){

console.log(v);

})

console.log(mapArr);//[undefined,undefined,undefined]

var mapArr = arr.map(function(v,i,arr){

console.log(v);

return v+i+'你好'

})

console.log(mapArr);

过滤和对应计算的

filter （返回一个数组）

var arr = ['abc','a','bc']

//filter 过滤传入对应的函数通过函数来返回条件进行过滤返回的值为数组

//第一个为值第二位下标第三为当前遍历的数组

var filterArr = arr.filter(function(v,i,arr){

//里面包含a返回true 里面没有a返回false

//如果返回值是false 就不会加入到对应的数组如果返回值为true就会加到对应的数组

return /a/.test(v)

})

console.log(filterArr);//包含a的一个数组 ['abc','a']

var arr = [10,9,8,23,15]

//返回所有大于10的

var filterArr = arr.filter(function(v){

return v>10

})

console.log(filterArr);//[23,15]

var arr = [10,9,8,23,15]

reduce （从前到后返回一个值）

reduceRight （从后往前返回一个值）

//reduce 计算的计算所有的和

//prev表示前面的总和第一次prev值为10 第二次为19 current默认从第二个开始

var sum = arr.reduce(function(prev,current,i,arr){

console.log(prev);

console.log(current);

console.log(i);//1

return prev+current

})

console.log(sum);

//调整到第1个开始 current的下标为0

arr.reduce(function(prev,current,i,arr){

console.log(i);//0

console.log(prev);//0

},0)

//求乘积

var v = arr.reduce(function(prev,current){

return prev * current

})

console.log(v);

//reduceRight 从右边开始从后到前 prev值就是倒数第一个 i从倒数第二个开始

arr.reduceRight(function(prev,current,i,arr){

console.log(i);

})

判断是否存在

some （只要有一个就返回true）

// 查询的相关条件在于传入的函数的返回的值

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

//根据里面返回的内容来进行判断的里面只要有true返回他就是true

var is = arr.some(function(v,i,arr){

return v>2

})

console.log(is);

every （所有都满足条件返回true 不然返回false）

//every 每一个都要满足条件

var is = arr.every(function(v,i,arr){

return v>=0

})

console.log(is);

注意事项

forEach和map的区别（forEach没有返回值 map有返回值）

reduce是用于计算的 reduce传入的函数有四个参数（前面的和（默认为第一个）当前的值（默认

是第二个开始）当前的下标（默认从1开始）

当前遍历的数组）如果需要调整在后面进行传参。

some和every的区别（some只要有一个满足条件就返回true every要每个都满足条件才返回

true）

手写实现数组的高阶函数

forEach（遍历没有返回值）

map （返回一个数组）

filter （返回数组）

reduce (返回的是值)

some （返回boolean类型有true返回true 没有返回false）

every （返回boolean类型如果有false就返回false 没有返回true）

字符串新增

字符串模板

var username ='李丹'

var str =`hello${username}`

console.log(str) //hello李丹

改变this指向新增方法

this指向

this在函数内的this指向当前函数的调用的者（全局调用的函数this指向window）

this在对应的对象内的函数指向当前的对象的

this在事件对应的函数内指向当前事件的目标元素

如果需要更改this指向那么我们可以给对应的函数调用对应的方法

相关方法

bind （手动调用）

apply （自动调用传递一个数组）（* 如果传递的是数组）

call （自动调用一个个的数据传递）（* 一般常用）

apply方法和call方法的区别

apply方法传递的参数以数组形式

call方法传递的参数以元素形式

共同点

apply方法和call方法都会自动调用对应的函数

ES6新增内容

ES6对于字符串，数组，函数，对象，循环，变量修饰关键词、基础数据类型等都有新增

字符串新增方法

startsWith 是否开头

endsWith 是否结尾

includes 是否包含

repeat 平铺

数组新增方法

普通方法

find 根据条件查找对应的值

findIndex 根据条件查找对应的下标

var arr = [1,2,3]

//普通方法(高阶函数) find findIndex

//根据条件查找返回找到的第一个内容没有找到返回undefined

//第一个是值第二个是下标第三个是数组

var value = arr.find(function(v,i,arr){

return v>1

})

console.log(value);//2

//根据条件返回找到第一次出现的下标没有找到返回-1

var index = arr.findIndex(function(v,i,arr){

return v>1

})

console.log(index);//1

手写实现find及findIndex

//find查找值根据传入函数的返回值作为条件来查找没有找到返回undefined

var arr = [1,2,3]

function myFind(fn){

//遍历调用函数

for(var i=0;i<arr.length;i++){

var flag = fn(arr[i],i,arr)

if(flag){

return arr[i]

}

}

}

//findIndex查找下标根据传入函数的返回值作为条件来查找没有找到返回-1

function myFindIndex(fn){

//遍历调用函数

for(var i=0;i<arr.length;i++){

var flag = fn(arr[i],i,arr)

if(flag){

return i

}

}

return -1

}

var value = myFind(function(v){

return v>1

})

var index = myFindIndex(function(v){

return v<1

})

console.log(value,index);

静态方法

Array.from 将对应的伪数组转为数组

Array.of 将对应的传入的元素组成一个新的数组返回

变量修饰关键词

es3存在

var 声明伪全局变量

新增的

let 声明块状作用域变量（不允许重复声明

只在当前的代码块内起作用（块级作用域））

const 声明常量（声明必须赋值

不允许修改

块级作用域）

基础数据类型

ES3的基础值类型

String

Number

Boolean

null

undefined

新增的值类型

symbol 独一无二的值

BigInt 大的整型

循环

for in（遍历对象）

for of （遍历数组的只要实现了iterator迭代器就可以用for of遍历）

函数的新增

新增函数的默认参数

// 函数新增默认参数

//默认a为0 b也为0 如果你传递了对应的参数那么默认值就会被覆盖

function fn(a=0,b=0){

console.log(a+b);

}

fn(1,3)//打印4

fn()//打印0

fn(1)//打印1

新增箭头函数

箭头函数的写法

(参数1,参数2,...参数n)=>{代码}

箭头函数的简化写法

如果当前的参数只有一个 ()可以省略的

如果当前的{}里面的代码只有一句的话 {}也可以省略

如果当前的{}里面只有一句代码且你需要返回数据的时候可以省略return

箭头函数的特性

没有this (根据作用域链向上找)

没有arguments

//箭头函数的特性

var obj = {

say:function(){

console.log(this);

console.log(arguments);

}

}

obj.say() //打印obj

var obj = {

say:()=>{

console.log(this);

console.log(arguments);

}

}

obj.say() //打印window

//箭头函数里面没有this 所以他会去上面找根据作用域链找离他最近的

//箭头函数里面没有arguments

对象新增

新增对象方法（静态方法）

Object.is 判断俩个对象是否是一个返回对应true和false

Object.assign 将后面对象的内容拷贝到前面的第一个对象

新增对象简化写法

对于对象中的函数可以省略对应的function

对于对象中value变量名和key的名字一致的时候可以省略key

解构赋值和扩展运算符

解构赋值（解除构造进行赋值）

{} 对于对象的解构（使用key来匹配）

[] 对于数组的解构

（使用下标来匹配）

扩展运算符（将内容一个个扩展出来）

//扩展运算符 ... 针对于数组的

console.log(...[1,2,3,4,5]);//1 2 3 4 5

//组成一个新的数组

console.log(Array.of(1,2,3,4,5));

console.log(Array.of(...[1,2,3,4,5]));//如果需要逗号隔开他会默认自己加上逗号

新增的集合类型（伪数组）

伪数组其实他也可以使用for of进行遍历（实现迭代器）

set

概述：set是一个不允许重复的集合

set的构建

不传参构建的是一个空的set集合

传入数组由数组里面的元素构建一个集合（数组去重）

set的方法及属性

属性

size

方法

add 添加方法

delete 删除方法

clear 清空

has 判断是否存在

forEach 遍历

keys 获取所有的key返回迭代器

values 获取所有的value返回一个迭代器

entries 获取所有的k:v键值对返回一个迭代器

weakSet 专门存储对象的set

map

概述：map他是一个key:value对 key不允许重复的 value可以重复（抽取所有的key他可以组成一个

set，所有的value抽取就是一个数组）

map的构建

无参构建

传入一个二维数组构建

map的属性及方法

属性

size

方法

set 设置

get 通过key来获取value

delete 通过key来删除

clear 清空

has 判断当前的key是否存在

keys 返回所有的key

values 返回所有的value

entires 返回所有的k:v

forEach 遍历

//相关方法

// 增 set

map.set(108,'yes')

console.log(map);

//修改就是对应的本身已经存在的key进行重新的设置

map.set('sex','girl')

console.log(map);

//删除根据key来删除

map.delete(108)

console.log(map);

//清除所有的

// map.clear()

console.log(map);

//查询

//根据key判断是否存在

console.log(map.has('sex'));

//forEach 第一个值为值第二个为键第三个当前遍历map

map.forEach((v,k,map)=>{

console.log(k);

console.log(v);

})

//keys values entries

console.log(map.keys());

console.log(map.values());

console.log(map.entries());

//通过key来获取value

console.log(map.get('sex'));

WeakMap（基于weakSet构建的map）

//weakmap 基于 weakSet之上构建也就是对应的key是对象抽取所有的key其实就是weakSet

var wm = new WeakMap()

var wm = new WeakMap([[{name:'hello'},'你好']])

console.log(wm);

// wm.delete

// wm.get

// wm.set

// wm.has

Class 类

概述：类是对象的模板，对象是类的实例。（类相当建房子的设计图，对象相当于建好的房子）

相关知识点

class是用于修饰类的

类名首字母必须大写

class里面的constructor 是一个函数他会在每次new的时候调用

class中constructor的this关键词指向当前的实例对象

extends关键词是class之间的继承的

如果使用了extends关键词，还想要在construct中使用this 那么必须先调用super方法

对应的super关键词指向父类的constructor

静态方法使用static关键词修饰，调用使用类名.方法名调用

// class是用于修饰类的类是对象的模板（设计图）

//class修饰的类名必须首字母大写

// class 类名{

// 构造器

// }

//class里面的this 指向当前构建的对象实例

class Person{

//构造器他是用于构建对象的方法

constructor(name){

this.name = name //this指向你对应构建的对象实例

this.sex = '男'

}

//静态方法使用类名. 使用static关键词修饰的方法

static say(){

console.log('hello');

}

}

//构建对象使用new关键词

//new 操作符会做那些操作开辟内存空间（建立一个对象）存放对应的对象自动执行对应的构造函数将

对应的设置设置给到当前对象然后将对象返回

var person = new Person('jack')

console.log(person);//{name:jack}

//静态方法调用

Person.say()

//继承除了私有的其他全部可以继承

// extends关键词实现class的继承

class Child extends Person{ //child这个类继承Person类

constructor(name,age){

//如果使用extends关键词那么在对应的构造器里面不能直接使用this 要调用super函数

super(name) //相当于父类的构造函数 Person.constructor

this.age = age

}

}

var child = new Child('tom',88)

console.log(child);//{name:tom,sex:男,age:88}

generator函数

//异步阻断变同步的内容

function* fn(){

yield setTimeout(()=>{console.log('你好');},2000)

yield setTimeout(()=>{console.log('你好世界');},1000)

yield setTimeout(()=>{console.log('hello');},0)

}

var a = fn()

a.next()//打印你好

a.next()//打印你好世界

a.next()//打印hello

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,053评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,527评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,779评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,685评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,699评论 5赞 366
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,609评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,989评论 3赞 396
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,654评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,890评论 1赞 298
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,634评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,716评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,394评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,976评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,950评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,191评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,849评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,458评论 2赞 342