ES5及ES6的新增特性
介绍es表示ECMASCript，他是从es3，es5，es6，es5是2009.12月发布的，es6是2015.6月发布的。vue2完全支持es5的（vue3完全支持
介绍 es表示ECMASCript ，他是从es3，es5，es6，es5是2009.12月发布的，es6是2015.6月发布的。vue2完全支持es5的（vue3完全支持es6的），react完全支持es6 es5的新特性 严格模式（对应的相反的称为怪异模式） use strict //一般用 ...
介绍
es表示ECMASCript ，他是从es3，es5，es6，es5是2009.12月发布的，es6是2015.6月发布的。vue2完全支持es5的（vue3完全支持es6的），react完全支持es6
es5的新特性
严格模式（对应的相反的称为怪异模式）严格模式的特性变量必须要带修饰符"use strict";a=10console.log(a);//a is not defined
函数里面this不能指向windowfunctionsayHello(){console.log(this);//undefined}sayHello()
不允许在非函数的代码块内声明函数禁止八进制方法函数的arguments数组形参和实参不同步对于数组和字符串都进行了加强数组的高阶函数（以函数做的参数的函数 称为高阶函数）forEach 遍历的vararr=[1,2,3,4,5]//forEach 遍历的 value表示里面的值 index表示里面的下标 array表示当前遍历的数组varforEachObj=arr.forEach(function(value,index,array){console.log(value);//打印里面的值 1,2,3,4,5console.log(index)//打印下标 0,1,2,3,4console.log(array)//当前遍历的数组 [1,2,3,4,5]})
map 遍历//map 遍历的 value表示里面的值 index表示下标 array表示当前的遍历的数组varmapObj=arr.map(function(value,index,array){console.log(value);//打印里面的值 1,2,3,4,5console.log(index)//打印下标 0,1,2,3,4console.log(array)//当前遍历的数组 [1,2,3,4,5]returnvalue+1})
forEach和map的区别forEach没有返回值 里面没有returnmap有返回值 所以里面可以使用return关键词他的返回值是一个数组forEach和map的底层实现//forEach方法实现functionforEach(fn){//遍历这个arrfor(vari=0;i<arr.length;i++){fn(arr[i],i,arr)}}//map方法实现functionmap(fn){varres=[]//遍历这个arrfor(vari=0;i<arr.length;i++){res.push(fn(arr[i],i,arr))}returnres}
reduce 从左到右计算的 reduceRight（从右到左计算）//pre 前一个值 current 当前值 index 下标 array 数组//reduce函数 利用前一个和后面值进行运算的操作 得出对应的值varsum=arr.reduce(function(pre,current,index,arr){returnpre+current})console.log(sum);
reduce底层实现//底层实现reducefunctionreduce(fn){//如果只有一个直接返回if(arr.length==1)returnarr[0]varres=arr[0]//如果有多个的情况for(vari=1;i<arr.length;i++){res=fn(res,arr[i],i,arr)}returnres}
filter 过滤的//filter返回的是一个数组 value index arrvarfilterArr=arr.filter(function(value,index,arr){returnvalue>3})console.log(filterArr);
filter的底层实现//实现filter函数functionfilter(fn){varres=[]//遍历数组for(vari=0;i<arr.length;i++){if(fn(arr[i],i,arr)){res.push(arr[i])}}returnres}
some 有一些满足就返回true 否则返回false//some 一些 every 每一个varvalue=arr.some(function(value,index,arr){returnvalue>4})console.log(value);//true
every 每一个满足就返回true 否则返回falsevarvalue=arr.every(function(value,index,arr){returnvalue>4})console.log(value);//false
底层实现//底层实现 somefunctionsome(fn){varisTrue=falsefor(vari=0;i<arr.length;i++){if(fn(arr[i],i,arr)){isTrue=truebreak}}returnisTrue}//底层实现 somefunctionevery(fn){varisTrue=truefor(vari=0;i<arr.length;i++){if(!fn(arr[i],i,arr)){isTrue=falsebreak}
indexOf 返回对应的下标lastIndexOf 返回对应的下标console.log(arr.indexOf(1,2));//从下标开始找 找这个1这个数字第一次出现的位置(左到右)console.log(arr.lastIndexOf(1,5));//从下标5开始找 找1第一个次出现的位置(右到左)
字符串加强 （模板字符串 ）vara=helloconsole.log(`${a} world`)//hello world
es5新增的改变this指向的方法bind （不会自动执行）functionsay(){console.log(this)//指向window}say()//打印window//通过函数调用varobj={username:"jack"}say.bind(obj)()//打印的this指向obj
call （自动调用函数）//call 将this指向和某个内容联系在一块 自动调用 传参一个个用,隔开say.call(obj,tom,456)
apply （自动调用函数）//apply 将this指向重新指向给对应的某个内容 自动调用 数组传递say.apply(obj,[刘德华,123])
call和apply的区别call传递的参数是一个个的内容，使用,隔开apply传递的参数是一个整个数组es6的新特性
概述：es6对应数组 字符串 对象及函数以及循环,值类型，修饰符等都有加强（es6以后的内容都称为es6的内容）
数组的增强find 查找
findIndex 查找下标
varli=Array.from(lis).find(function(li){returnli.innerText==5})//找到对应匹配的元素console.log(li);//findIndex 查找对应的元素的下标 返回第一个找到的元素下标varindex=Array.from(lis).findIndex(function(li,index,arr){returnli.innerText==5})console.log(index);
静态方法（使用类名.）
Array.of() 将一组数据转为数组
Array.from() 将伪数组转为数组
vararray=Array.of(1,2,3,4,5)console.log(array);//具备某些数组的特性的对象称为伪数组 arguments NodeList HTMLCollection等varlis=document.querySelectorAll(li)//伪数组是不具备数组的函数的Array.from(lis).forEach(function(li){console.log(li.innerText);})
字符的增强includes 是否包含 （包含返回true 不包含返回false）
startsWith 是否以这个字符串开头 （是返回true 不是返回false）
endsWith 是否以这个字符串结尾 （是返回true 不是返回false）
repeat 重复多次的去平铺对应的字符串
//indexOf的基础上增强//是否包含 includesconsole.log(abc.includes(a));//true//endsWith 是否以这个字符串结尾console.log(abc.endsWith(abc));//trueconsole.log(abc.endsWith(c));//true//startsWith 是否以这个字符串开头console.log(abc.startsWith(a));//trueconsole.log(abc.startsWith(abc));//true//平铺 repeat 平铺的次数 重复多次的写个字符串console.log(abc.repeat(3));//将abc写3次
变量修饰符（增强）var 关键词修饰的变量是伪全局变量（进行变量提升）
let 关键词 块状作用域 （变量名不能重复声明 避免变量名污染）const 关键词 常量（常量不可变 也不能重复声明 声明一定要赋值（不能二次赋值））varbtns=document.querySelectorAll(button)//var 关键词声明的伪全局作用域for(vari=0;i<btns.length;i++){btns[i].onclick=function(){//当前的事件是异步操作console.log(i);//3 异步比同步晚执行 var关键词修饰的变量是伪全局变量}}//let 块级作用域 只在当前的代码块内有用for(leti=0;i<btns.length;i++){btns[i].onclick=function(){//当前的事件是异步操作console.log(i);//3 异步比同步晚执行 var关键词修饰的变量是伪全局变量}}//let 在同一作用域优点不能重复命名leta=10//let a = 20 报错 不能重复声明//当你省略了对应的修饰符 默认就是以var关键词修饰//const关键词 声明常量 他同样具备块级作用域 const定义的变量的不能重新赋值//声明的时候 必须要赋值consta=10//a = 20 错误的 因为const修饰的变量不允许更改//const b 错误的 必须要赋值//es6 不是所有浏览器都可以直接解析的 不建议写源码的时候用let const (babel.js 解析es高版本的内容把变成低版本的)
新增的值类型旧有值类型number , String , boolean , null , undefined新增的类型symbol 独一无二的值 bigInt 大的整型
//如果去声明一个Symbolvarv=Symbol()//独一无二的值vars=Symbol(这个值很重要)//里面的参数是一个说明vars1=Symbol(这个值很重要)//里面的参数是一个说明console.log(v);console.log(s==s1);console.log(s.description);//获取里面的详情信息 也可以设置 当前这个详情是一个只读属性descriptionv.description=hello//没用 他是个只读属性//key是独一无二 当作对象的key值varobj={v:hello}console.log(obj.v);//bigInt 大的整型(存储number存不了的数据) 实现的方式 字符串传入实现//传入字符串varstr=123456789123456789console.log(Number(str));varbigNumber=BigInt(str)console.log(bigNumber);
对象的增强静态方法is方法 Object.is() 判断俩个对象是否是一个（true或者false）//NaNconsole.log(NaN==NaN);//false//Object.is 主要解决NaN和NaN的问题console.log(Object.is(NaN,NaN));//true NaN是值类型(常量)console.log(Object.is({},{}));//false {}对象
Object.assign 将后面对象合并当前前面 返回的是合并的对象
varobj={sex:男}//assign 目标对象 来源对象 将后面的合并到前面 返回一个对象 会影响之前的对象varres=Object.assign(obj,{name:张三,age:18})console.log(obj);console.log(res);console.log(Object.is(obj,res));//true 浅拷贝( Object.assign)
函数增强箭头函数////箭头函数一般都是匿名函数//var hello = function(){ //之前的写法//}//箭头函数的写法 ()形参 {}代码块 把function省略了 加了个=>varhello=()=>{console.log(hello)}//调用hello()
箭头函数的简化如果只有一个参数 可以省略()//简化 如果只有一个参数可以省略()varsay=username=>{console.log(username);}say(jack)
如果只有一句代码的话 可以省略{}//当你只有一句代码的时候 {} 可以省略varworld=username=>console.log(username)world(hello)
如果只有一句代码 且你需要返回数据情况下 可以省略对应的 retrun//当你只有一句代码的时候 且你需要返回值 那么return可以被省略vargetUserName=username=>username+hellovarvalue=getUserName(张三)console.log(value);//张三hello//数组的forEach方法[1,2,3].forEach(value=>console.log(value))//数组的reduce方法varsum=[1,2,3].reduce((pre,current)=>pre+current)console.log(sum);
箭头函数的特性箭头函数里面没有this（根据作用域链向上查找对应的this）//this谁调用 this指向谁 是在对应的普通函数的情况下//document.querySelector(button).onclick = function(){//console.log(this);//指向当前按钮//}//箭头函数document.querySelector(button).onclick=()=>{console.log(this);//箭头函数里面没有this 根据作用域链的情况 向上找 window}varhello=()=>{console.log(this);}hello.call({age:18})//window
默认参数functionfn(agr1=value,arg2=value2){}//初始化一个对象 默认值functioninitObj(name,age=18,sex=男){return{name,age,sex}}console.log(initObj(jack));//没有传参会使用默认值console.log(initObj(jack,19,女));//传了参会覆盖默认值
对象里面内容的简化属性的简化当你的属性值是一个变量的情况下，以及你向使用你的变量作为key的名，这个时候可以省略key
varage=18varusername=jack//简化 使用变量做键的名 {age:age,username:username}varobj={age,username}
函数的简写varobj={say:function(){console.log(hello)}}obj.say()//简写 省略:和functionvarobj={say(){console.log(hello)}}obj.say()
循环的加强for in 是用于遍历对象的 遍历的是对象的里面key 他也可以遍历数组（数组也是对象）for of 是用于遍历数组的 遍历的是数组里面的value 他不可以遍历对象（只有实现了迭代器的对象才可以被遍历 必须具备length或者size属性）如果要使用对应的for of来遍历对象的话 怎么办！！
Object的几个方法（静态方法） 可以用来实现对应的遍历
keys 拿到所有的key
values 拿到所有的值
entries 拿到所有的键值对
varobj={age:18,name:jack,sex:男}//keys 获取所有的key 作为一个迭代对象vark=Object.keys(obj)console.log(k);//values 获取所有的valuevarv=Object.values(obj)//entries 获取所有的key-value对vare=Object.entries(obj)
新增的对应的迭代器类型（实现了迭代器）set 元素不重复的一个集合（去重）set声明
无参
varset=newSet()//空的集合
将数组作为参数传递
vararr=[1,1,2,2,3,3]varset=newSet(arr)//传入数组console.log(set)//1 2 3
相关的方法（增删改查）
add 添加delete 删除clear 清空keys 获取keyvalues 获取值entries 获取键值对象forEach 遍历（三个参数分别是value,key,set）has 判断是否存在 （返回的是boolean类型）属性size 获取对应的长度
//无参的形式varset=newSet()//添加 add append push...set.add(1)set.add(2)set.add(1)//获取对应的set的长度 sizeconsole.log(set.size);//2//删除方法 delete removeset.delete(1)//删除1这个value值//删除所有 清空//set.clear()//获取元素varkey=set.keys()//获取所有key 值既是key 又是值varvalue=set.values()//获取所有的值varkv=set.entries()//获取所有的键值对console.log(kv);console.log(key);console.log(value);//set里面有一个forEach方法//第一个是值 第二个key 第三个是遍历的setset.forEach((v,k,set)=>{console.log(v);})//has 判断是否存在 返回true和falseconsole.log(set.has(2));//true
WeakSet 内容存储对应的set（只能存储对象 但并不能完成去重）varweakset=newWeakSet()weakset.add({username:"张三"})weakset.add({username:"张三"})weakset.add({username:"张三"})console.log(weakset);//里面还是存在3个
map 基于set和array之上构建的一个集合声明：本站所有文章，如无特殊说明或标注，均为爬虫抓取以及网友投稿，版权归原作者所有。
