ES5及ES6
ES （ESMA SCRIPT）常见的版本 ES3 (最基础的版本 所有的浏览器都能解析) ES5 （部分低版本浏览器不能解析） ES6 （大部分的不能直接解析）ES7...
ES5
es5的增强内容（2009年 12月）
严格模式 （是es5新增的一个模式）
2.函数内部this不能指向window 3.函数内容的arguments形参不同步 4.禁止在非函数代码块内 声明函数 5.禁止八进制
数组加强
indexOf 根据对应的内容找下标 从前到后 找不到返回-1 lastIndexOf 根据对应的内容找下标 从后往前 找不到返回-1
高阶函数
forEach 遍历的（遍历每个结果做相关操作） map 遍历的 return （遍历每个结果做相关操作 返回一个新的数组） some 有一些内容 返回boolean
every 所有都是 返回boolean reduce reduceRigth 计算 （遍历每个值 做相关计算 返回结果） filter 过滤 （遍历每个结果找到返回条件的结果返回数组）
bind 绑定this指向
<script>
var obj = {
name:'jack'
}
//属于window
var name = "tom"
function sayHello(){
//this指向window
console.log(this.name);
}
sayHello() //打印tom
//bind方法 属于object的方法
//把sayHello 绑定给obj sayHello里面的this 指向对应的obj
var bindFuntion = sayHello.bind(obj)
//bind的返回值也是一个对象
bindFuntion()//打印jack
</script>
apply方法
call方法
var obj = {
name:'jack'
}
//属于window
var name = "tom"
function sayHello(){
//this指向window
console.log(this.name);
}
sayHello() //打印tom
//绑定this指向 自动执行方法 第一个参数指定的this指向 第二个参数为函数需要的参数 他传递的参数为数组
sayHello.apply(obj,null)
// 第一个参数指定的this指向 第二个参数为函数需要的参数 传递的参数为一个个的元素
sayHello.call(obj,null)
ES6
es6诞生于2015年6月 （对于函数对象和string 数组做了全套加强）
<script type=‘module’> es6的代码 </script>
命名修饰符
let 块状作用域
let b = 11 //声明的是一个块状作用域 let关键词在对应的区间不能重复声明
// let b = 12
for(let i=0;i<10;i++){
}
for(let i=0;i<10;i++){
}
const 常量 （块状作用域）定义建议全大写
// const 修饰为常量 常量是不可变的 不允许二次赋值 定义的时候必须要赋值 声明的也是一个块状作用域
const HI = 10
HI = 20 //错误的
Array新增
Array.from() 将伪数组转为数组
Array.of() 将一系列的值转为数组
Array.find() 查找元素 返回对应匹配的第一个元素
Array.findIndex() 查找下标 返回对应第一个匹配的下标
//将伪数组转为数组
// nodeList htmlCollection arguments
var liList = document.querySelectorAll("li") //返回是一个伪数组
//使用Array.from 转为数组
var array = Array.from(liList) //from方法返回一个新的数组
array.forEach(function(v){
console.log(v);
})
//Array.of 将对应一组数据转为数组
var numbers = Array.of(1,2,3,4)
console.log(numbers);
//高阶函数 以函数做为参数的函数叫做高阶函数
var arr = ['a','b','c','d']
//find 查找 返回的是一个元素 只会找到匹配的第一个
var str = arr.find(function(v,index,array){
// if(v=='a'){
// return v
// }
return v>'a' //返回一个boolean表达式
})
console.log(str);
//findIndex 查询下标 返回的是一个元素 只会找到匹配的第一个
var index = arr.findIndex(function(v,index,array){
// if(v=='a'){
// return index
// }
return v=='a'
})
console.log(index);
循环的增强
for in 循环 （对象）
for of 循环 （数组）
// for in 遍历对象
// for of 遍历数组
var obj = {
name:"jack",
age:18
}
var arr = [1,2,3,4]
//原始遍历 for(var i=0;i<10;i++)
// for in
for(var item in obj){ //对于对象遍历获取是key
console.log(item);//获取的key
console.log(obj[item]); //获取的value
}
for(var item in arr){ //对于数组遍历拿到是下标 （存在一定性的问题 不建议使用）
console.log(item,arr[item]);
}
//for of 遍历数组的
for(var item of arr){ //遍历的是值
console.log(item);
}
//对于没有迭代器的对象是不能使用for of来遍历 迭代器（用于迭代的对象）
//属于对象的方法 Object
// entries() 获取每个元素 包含键和值 keys() 获取所有的键 values() 获取所有的值
for(var item of Object.keys(obj)){ //迭代对象
console.log(item);
}
for(var item of Object.values(obj)){ //迭代对象
console.log(item);
}
for(var item of Object.entries(obj)){ //迭代对象 entries 返回一个二维数组
console.log(item);
}
Object的方法
keys 获取对象的所有的key
values 获取对象的所有的值
entries 获取对象所有的键值对象（数组）
function 加强
对应默认参数 （支持没传值的时候 有一个默认值）
//后续在封装函数的时候 一定要用到的
function sayHi(name='hello',age=18){
console.log(name)
console.log(age)
}
//如果你没有传值他会有个默认值
sayHi()
//如果你传值的他就会将默认值替换
sayHi('jack') //jack 18
sayHi('jack',20) //jack 18
箭头函数 (匿名函数)
<button>按我</button>
<script>
//后续在封装函数的时候 一定要用到的
function sayHi(name='hello',age=18){
console.log(name)
console.log(age)
}
//如果你没有传值他会有个默认值
sayHi()
//如果你传值的他就会将默认值替换
sayHi('jack') //jack 18
sayHi('jack',20) //jack 18
//匿名函数
var sayHello = function(){
console.log("hello");
}
//调用匿名函数对象
sayHello()
//es6诞生了一个箭头函数 简化我们对于匿名函数的声明
var sayHello = ()=>{
console.log("hi");
}
sayHello()
//name是形参 一个形参的情况下可以省略对于的()
//当你的函数体只有一句代码 {} 也可以被省略
var sayHello = name => console.log(name);
sayHello('jack')
//当你需要return数据的时候 你当前的代码只有一句的情况下 return也可以被省略
var sayHello = name =>name //返回了对应的name
console.log(sayHello('jack'));
//箭头函数没有this 没有arguments数组 找他的父元素里面的this
var obj = {
name:'jack',
// this 这个外面的this和对应的箭头函数里面的this是同一指向
say:()=>{console.log(this);},
test:()=>{
console.log(this);//obj
setTimeout(()=>{ //属于window
console.log(this);
})
}
}
obj.test()
//this指向对应的按钮
document.querySelector("button").onclick =()=>{
console.log(this);
}
</script>
箭头函数的特性(箭头函数本身是匿名函数)
当前只有一个参数 可以省略（）
当前只有一行代码 可以省略 {}
当前如果只有一行代码 需要返回值 可以省略 ()
箭头函数里面没有this
箭头函数没有arguments
总结：箭头函数里面的this指向父元素的this
扩展运算符 *
打开对应的数组 ...
...[a,b,c] ===> a b c
解构（对象）
打开对应的对象（解除构造）提取到里面的值
//对象里面存在n个键值对象
var obj = {
name:'jack',
age:18
}
//n个obj.key
console.log(obj.name);
console.log(obj.age);
//es6新增了对应的解构 减少对应的obj.
var {name,age,sex} = obj //称为解构
//得到对应的name 去比对obj里面是否存在相同的一个属性名叫name 如果没有返回undefined 有就返回这个对应的值
console.log(name); //jack
console.log(age); //18
console.log(sex); //undefined
var {message} = {
message:"hello",
message1:"world",
}
console.log(message); //hello
ES5-ES6(下)
对象以及函数的简写
var name = "tom"
var obj = {
//第一个name为key 第二个name 指向外面的name 为value
//name:name
//当value是一个变量 key和value的变量名为一致的时候, 直接写key
name
}
函数的简写(对象里面的函数的简写)
var obj = {
/*
eat:function(){
console.log("hello")
}
*/
//简写 省略了function
eat(){
console.log("hello")
}
}
obj.eat()//打印hello
Object.is 判断两个对象是否是一个
Object.assign()将后面的内容拷贝给第一个(为浅拷贝)
//Objectis() 它是用来弥补我们==的不足 ==在对应的比较对象的时候,他不会比对象里面的东西
而是直接比较对象的栈地址的值
//Object.is()
var array1 =new Array()
var array2 =new Array()
console.log(array1==array2);//false
console.log(array1===array2);//false
//判断这两个内容是否是一个对象
console.log(Object.is(array1,array2));//false
//NAN==NAN
var number=NAN
console.log(number==NAN);//false
console.log(Object.is(number,NAN));/true
//Object.assign()复制
var obj = {
name:'李四',
age:'18',
users:{
hello:'hello'
}
}
var obj = {}
//将后面拷贝给第一个
Object,assing(obj1.obj)
ocnsole.log(obj1/users.hello);
obj1.users.hello = "你好"
console.log(obj.users.hello);//浅拷贝 也就是我们拷贝的对象只拷贝了第一层的值 第二层我是拷贝的引用
set (集合 伪数组 可以转数组)
//set的特性
元素不能重复 可以用来做数组去重 可以传参(传的参数可以迭代,) 传参为数组
set是一种数据结构 能存放数据 crud 可进行增删改查
set的forEach和数组是一回事 forEach遍历
//可以传入数组作为参数 进行迭代 传递的参数都可迭代
增删改查 add append push
//添加数据add
删除方法delete(对传入的值进行清除,返回boolean值) clear(清除所有)
修改方法 先删后加 或通过下标借助entries直接赋值进行修改
entries返回对应键值对组成set迭代器
has判断是否存在这个值, 有true ,没有false
//数组去重
//传参需要传递两个参数 一个key 一个value
var map = new Mam()
keys返回对应值组成set迭代器
values 返回对应键值对组成的set迭代器
属性
size 返回对应的长度
map(集合 伪数组 可以转数组)
构成是key , value , key是惟一的,value不是 Map是一个很大的对象 他里面可以存储任意类型的值
//传参需要传递2个参数 一个key 一个value
var map = new Map()
方法
set 设置对应的key-value
get 通过对应的key来获取value
delete 通过Key来删除
clear 清空
forEach 遍历 value key map
has 判断是否存在对应的key
entries 返回键值对 map迭代器
keys 返回key map迭代器
values 返回value map迭代器
属性
size
所有迭代器都有的方法 next
WeakSet 只能存储对象的set
所有的迭代器都有方法next
var map = new Map()
//map的构成是由key-value来构成的 key是唯一的 可以是任意类型 value也可以是任意类型
//增删改查
//添加数据 修改 set对应的值
map.set('name','jack')
map.set('name','tom')
map.set('name','lisa')
map.set('age','198')
map.set('sex','女')
//查数据 通过key来获取对应的值 get
console.log(map.get('name'));
//删除 delete 根据key来删除 清空clear
//map.delete('name')
//map.clear()
console.log(map.size);
sonsole.log(map.has('name'));
map.forEach((v,key,map)=>{
console.log(v,key);
})
//value rentries keys返回的是map的迭代器 所有迭代器都有的方法 next 下一个
console.log(map.keys());
//console.log(map.keys().next());
console.log(map.values())
console.log(map.entries())
Class类(面向对象里面的内容)
//class 类名字 首字母必须大写
class person{
//class里面的this指向new的对象实例
//构造器 构造方法的容器 new Object() 调用的就是构造方法
//匿名的构造器 调用的时候类名的他的方法名
//name age是属于构造方法的形参
constructor(name,age){
this.name=name //this指向对象new的对象
this.age=age //new的对象实例的age属性=构造函数里面传递的age的值
}
eat(){
console.log(this.name+"吃饭"); //指向对象实例
}
}
//调用构造函数来new对象
var Person = new Person('jack',18)
//调用对应的eat方法 eat来自于person这个类中
person.eat()//jack吃饭
constructor 构造器 (在继承体系中 子类可以拥有父类所有非私有属性)
在继承的关系中 如果需要在constructor 使用this那么必须先写完super() super()指向对应的父类构造
//estends 表示继承关系
class Student extends Person{
constructor(){
super()//表示的是父元素的构造方法
this.sex='男'
this.那么='张三'
}
}
var student =new Student()
console.log(student.name);//自己没有的时候找父元素 自己有先找自己 name继承于person中
student.eat() //继承于person类中 tom吃饭
console.log(student.sex); //打印自己的sex属性
extends 表示继承关系
减少冗余代码 提高代码的可阅读性及开发效率
ES6新增的基础数据类型 (值类型)
Number String boolean null undefined
新增 Biglnt 大整型 (解决数字有效范围)
//大整型
var bigInt = BigInt("1213212313131123113")
console.log(bigInt);
新增Symbol (唯一的值)
//symbol 惟一的 第一无二的值
var n=Symbol()
var m=Symbol()
var j=Symbol('hello') //hello相当于他的别名
//获取到相应的别名
console.log(j.description);
console.log(n)
//一般使用symbol来做区分 对象的key
var obj={}
obj[n]="hello"
obj[m]="hi"
console.log(obj[n]);
console.log(obj[m]);
生成器
<script>
//生成器函数是一个异步的函数 里面标注了yield 暂停执行 为了区分普通函数 他他加了*
//可以在对应的地方获取到对应的值
function* autoGenerator(x){
yield x/2
yield x/3
yield x/4
}
function* generator(x){
yield x+1
yield x+2
yield* autoGenerator(x)
yield x+4
}
var g = generator(1)
//next返回的是一个对象 里面有两个参数 value表示执行的值 done 是否已经完成
//console.log(g.next())//走的第一步2
//console.log(g.next())//第二步3
//console.log(g.next())//第三步4
//console.log(g.next())//第四步5
//console.log(g.next())//2
//console.log(g.next())//3
//console.log(g.next())//0.5
//console.log(g.next())//0.33
//console.log(g.next())//0.25
//console.log(g.next())//5
while(!g.next().done){
console.log(g.next())//3
}
</script>
