day15 es5和es6

JavaScript的构成

1.DOM操作文档

2.BOM操作浏览器

3.ECMAScript(基础语法)

ES5新增内容

严格模式：我们普通书写的js代码没有太多规范，甚至可以随意发挥，这种模式称为怪异模式，相对而言更加规范的模式称为严格模式

严格模式的声明

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

//严格模式
"use strict"; //声明必须在第一行
//声明一个变量必须要有关键词
c = 30
console.log(c);//c没有被定义
//严格模式中函数内的this不能指向window
function fn(){
    console.log(this);
}
fn()// this 是 undefined
//在严格模式中不能使用八进制相关的方法
//严格模式中argument的形参和实参不同步
//严格模式中函数只能在对应的声明函数地方进行声明

数组新增的高阶函数

高阶函数概述：

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

新增的相关函数

遍历的函数

forEach （没有返回值）
map （返回值是一个数组）

//高阶函数
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);
})

var mapArr = arr.map(function(v,i,arr){
console.log(v);
return v+i+'你好'
})
console.log(mapArr);

过滤和对应计算的

filter （返回一个数组）

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

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

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 计算的计算所有的和
//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）

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

// 查询的相关 条件在于传入的函数的返回的值
var arr = [0,1,2,3]
//根据里面返回的内容来进行判断的 里面只要有true返回 他就是true
var is = arr.some(function(v,i,arr){
    return v>2
})
console.log(is);
//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）

改变this指向新增方法

this指向

this在函数内的this指向当前函数的调用的者（全局调用的函数this指向window）
this在对应的对象内的函数指向当前的对象的
this在事件对应的函数内指向当前事件的目标元素

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

ES6新增内容

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

字符串新增方法

startsWith 是否开头
endsWith 是否结尾
includes 是否包含
repeat 平铺

var str = 'abc'
//是否开头 返回boolean类型
//是否以a开头
console.log(str.startsWith('a'));//true
// 是否结尾 返回boolean类型
//是否以a结尾
console.log(str.endsWith('a'));//false
//是否包含 返回boolean类型
//是否包含ac
console.log(str.includes('ac'));//false
//平铺 返回的是一个新的字符串
var newStr = str.repeat(2) //将对于的abc平铺俩遍
console.log(newStr);//abcabc

数组新增方法

普通方法

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

静态方法

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

//新增的俩个静态方法
//将伪数组转为数组
var btns = document.querySelectorAll('button') //NodeList 伪数组
// btns.map(function(v){
//     console.log(v);
// }) 出错 伪数组没有map方法
//转成数组以后再调用
Array.from(btns).map(function(v){
    console.log(v);
})
//将传进去的内容组成一个新的数组出来 返回对应的数组
var newArray = Array.of('a','b','c')
console.log(newArray);

变量修饰关键词

es3存在

var 声明伪全局变量

新增的

let 声明块状作用域变量（不允许重复声明只在当前的代码块内起作用（块级作用域））
const 声明常量（声明必须赋值不允许修改块级作用域）

字符串新增

字符串模板

`${}`

基础数据类型

ES3的基础值类型

String
Number
Boolean
null
undefined

新增的值类型

symbol 独一无二的值
BigInt 大的整型

// 新增的类型
//独一无二的值(栈上面)
var sym = Symbol()
var sym1 = Symbol()
console.log(sym);
console.log(sym == sym1);//false
var sym2 = Symbol('你好') //传入的参数是说明
var sym3 = Symbol('你好')
console.log(sym2 == sym3);//false
//一般用于对象的key key不能重复的
var obj = { sym:10}
console.log(obj.sym);
//获取详情
console.log(sym2.description);
//BigInt 大的整型 容纳大的数
//Number中的整型Int容纳范围是有限的 10^16
var bi = BigInt('111111111111111111111111111111111111111111111111111111111111111')
console.log(bi);

循环

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

var fn2 = arg =>arg+'你好' //当前fn2 传递一个arg 返回一个arg+你好
var result = fn2('hello')
console.log(result);

箭头函数的特性

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

对象新增

静态方法

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

console.log({} == {});//false 比较地址值
console.log({} === {});//false 比较地址值比较类型
console.log(Object.is({},{}));//false 比较地址值同时还要比较类型
//特殊值 (可以解决NaN不等于NaN问题)
console.log(NaN == NaN); //false
console.log(NaN === NaN);//false
console.log(Object.is(NaN,NaN));//true

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

//Object.assign 将后面的内容拷贝到前面 返回一个对象 而这个对象的地址和第一个对象的地址完全一
样
var obj = {name:'jack'}
var targetObj = Object.assign(obj,{age:18},{sex:'男'},{height:189})
console.log(targetObj);//{name:jack,age:18,sex:男,height:189}
console.log(targetObj == obj);//true
//只拷贝第一层的值 剩下的拷贝的是引用地址 （浅拷贝实现方式之一）
var obj1 = {age:18,arr:[1]}
var targetObj = Object.assign({name:'tom'},obj1,{sex:'男'},{height:189})
console.log(targetObj);//{name:tom,age:18,arr:[1],sex:男,height:189}
//让第二层的内容发送变化
obj1.arr[0] = 10
obj.age = 20
//原本拷贝对象的值也会变化
console.log(targetObj);//{name:tom,age:18,arr:[10],sex:男,height:189}

新增对象的简化写法

对象中的函数可以省略function

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

//简化写法
var name = 'jack'
var obj3 = {
// name:name,
//当你的key和value是一样的时候省略key value一定要是变量
name,
// say:function(){
// console.log('hello');
// }
//对象中函数的简化写法
say(){
console.log('hello');
}
}

解构赋值和扩展运算符

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

[] 对于数组的解构（使用下标来匹配）

var obj = {name:'jack',age:18,sex:'男'}
var arr = ['a1','b2','c3']
//采用解构赋值快速提取 对象
//{} 里面填写的是键 按照填写的key去匹配对象里面key取出他的值
var {name,sex,age} = obj
console.log(name,sex,age);
//[] 对于数组的解构 按照对应的顺序 下标匹配的
var [a,c,b] = arr
console.log(a);//a1
console.log(c);//b2

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

//扩展运算符 ... 针对于数组的
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键值对返回一个迭代器

//相关方法
//增加 add
set.add(22) //如果添加的是重复元素将不能添加进去
set.add('hello') //set中可以存储任意类型数据
console.log(set);
//删除 delete 传入对应的值进行删除
set.delete(22)
console.log(set);
//清空方法 clear
// set.clear()
console.log(set);
//改
// 将对应的内容删除再添加就是改
//查
//has 判断值是否存储 返回boolea类型 如果值存在返回true 不存在返回false
console.log(set.has(1));//false
//forEach 遍历的
set.forEach((v1,v2,s)=>{
//他的key就等于他的value
//v1表示key
console.log(v1);
//v2表示value
console.log(v2);
//s表示当前遍历的set
console.log(s);
})
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
//keys 获取所有的key values 获取所有的value entries获取所有的key:value键值对 返回的
iterable迭代器（数组）
console.log(set.keys());
console.log(set.values());
console.log(set.entries());//键值对

weakSet 专门存储对象的set

//专门用于存储对象的set set并不能完成对象数组的去重
//无参构建
var ws = new WeakSet()
//有参构建 传入一个只读的对象数组
var ws = new WeakSet([{name:'张三'},{name:'张三'}])
console.log(ws);
//weakSet只有三个方法 has add delete
ws.add({age:18})
console.log(ws.has({age:18}));//false
ws.delete({age:18}) //删除不了 {age:18} != {age:18} 不是一个对象
console.log(ws);

map的属性及方法

属性

size

set 设置

get 通过key来获取value

delete 通过key来删除

clear 清空

has 判断当前的key是否存在

keys 返回所有的key

values 返回所有的value

entires 返回所有的k:v

forEach 遍历

Class 类

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

公告

昵称： xiaomingff
园龄： 2年5个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

day15 es5和es6

JavaScript的构成

ES5新增内容

严格模式：我们普通书写的js代码没有太多规范，甚至可以随意发挥，这种模式称为怪异模式，相对而言更加规范的模式称为严格模式

数组新增的高阶函数

高阶函数概述：

新增的相关函数

遍历的函数

注意事项

改变this指向新增方法

this指向

相关方法

apply方法和call方法的区别

共同点

ES6新增内容

字符串新增方法

数组新增方法

普通方法

静态方法

变量修饰关键词

es3存在

新增的

字符串新增

字符串模板

基础数据类型

ES3的基础值类型

新增的值类型

循环

函数的新增

新增函数的默认参数

新增箭头函数

箭头函数的写法 (参数1,参数2,...参数n)=>{代码}

箭头函数的简化写法

箭头函数的特性

公告

搜索

常用链接

随笔档案

阅读排行榜

day15 es5和es6

JavaScript的构成

ES5新增内容

严格模式 ：我们普通书写的js代码没有太多规范，甚至可以随意发挥，这种模式称为怪异模式，相对而言更加规范的模式称为严格模式

数组新增的高阶函数

高阶函数概述：

新增的相关函数

遍历的函数

注意事项

改变this指向新增方法

this指向

相关方法

apply方法和call方法的区别

共同点

ES6新增内容

字符串新增方法

数组新增方法

普通方法

静态方法

变量修饰关键词

es3存在

新增的

字符串新增

字符串模板

基础数据类型

ES3的基础值类型

新增的值类型

循环

函数的新增

新增函数的默认参数

新增箭头函数

箭头函数的写法 (参数1,参数2,...参数n)=>{代码}

箭头函数的简化写法

箭头函数的特性

公告

搜索

常用链接

随笔档案

阅读排行榜

严格模式：我们普通书写的js代码没有太多规范，甚至可以随意发挥，这种模式称为怪异模式，相对而言更加规范的模式称为严格模式