ES5及ES6

es表示ECMASCript ，他是从es3，es5，es6，es5是2009.12月发布的，es6是2015.6月发布的。vue2完全支持es5的（vue3完全支持es6的），react完全支持es6

es5的新特性

严格模式（对应的相反的称为怪异模式）

'use strict' //一般用于相关的设计 上面书写一个严格模式底下的代码就需要按照严格模式执行

严格模式的特性

变量必须要带修饰符

"use strict";
a = 10
console.log(a); //a is not defined

函数里面this不能指向window

function sayHello(){
    console.log(this); //undefined
}
sayHello()

不允许在非函数的代码块内声明函数

禁止八进制方法

函数的arguments数组形参和实参不同步

对于数组和字符串都进行了加强

数组的高阶函数（以函数做的参数的函数称为高阶函数）

forEach 遍历的

var arr = [1,2,3,4,5]
//forEach 遍历的 value表示里面的值 index表示里面的下标 array表示当前遍历的数组
var forEachObj = arr.forEach(function(value,index,array){
    console.log(value); //打印里面的值 1,2,3,4,5
    console.log(index) // 打印下标  0,1,2,3,4
    console.log(array) //当前遍历的数组 [1,2,3,4,5]
})

map 遍历

//map 遍历的 value表示里面的值 index表示下标 array表示当前的遍历的数组
var mapObj = arr.map(function(value,index,array){
    console.log(value); //打印里面的值 1,2,3,4,5
    console.log(index) // 打印下标  0,1,2,3,4
    console.log(array) //当前遍历的数组 [1,2,3,4,5]
    return value+1
})

forEach和map的区别

forEach没有返回值里面没有return
map有返回值所以里面可以使用return关键词他的返回值是一个数组

forEach和map的底层实现

//forEach方法实现
function forEach(fn){
    //遍历这个arr
    for(var i=0;i<arr.length;i++){
        fn(arr[i],i,arr)
    }
}
// map方法实现
function map(fn){
    var res = []
    //遍历这个arr
    for(var i=0;i<arr.length;i++){
        res.push(fn(arr[i],i,arr))
    }
    return res
}

reduce 从左到右计算的 reduceRight（从右到左计算）

//pre 前一个值 current 当前值 index 下标 array 数组
//reduce函数 利用前一个和后面值进行运算的操作 得出对应的值
var sum = arr.reduce(function(pre,current,index,arr){
    return pre+current
})
console.log(sum);

reduce底层实现

// 底层实现reduce
function reduce(fn){ 
    //如果只有一个直接返回
    if(arr.length==1) return arr[0]
    var res = arr[0]
    //如果有多个的情况
    for(var i=1;i<arr.length;i++){
        res = fn(res,arr[i],i,arr)
    }
    return res
}

filter 过滤的

//filter返回的是一个数组 value index arr
var filterArr = arr.filter(function(value,index,arr){
    return value>3
})
console.log(filterArr);

filter的底层实现

//实现filter函数
function filter(fn){
    var res = []
    //遍历数组
    for(var i=0;i<arr.length;i++){
        if(fn(arr[i],i,arr)){
            res.push(arr[i])
        }
    }
    return res
}

some 有一些满足就返回true 否则返回false

//some 一些 every 每一个
var value = arr.some(function(value,index,arr){
    return value>4
})
console.log(value);//true

every 每一个满足就返回true 否则返回false

var value = arr.every(function(value,index,arr){
    return value>4
})
console.log(value);//false

底层实现

//底层实现 some
function some(fn){
    var isTrue = false
    for(var i=0;i<arr.length;i++){
        if(fn(arr[i],i,arr)){
            isTrue = true
            break
        }
    }
    return isTrue
}
//底层实现 some
function every(fn){
    var isTrue = true
    for(var i=0;i<arr.length;i++){
        if(!fn(arr[i],i,arr)){
            isTrue = false
            break
        }
    }
    return isTrue
}

indexOf 返回对应的下标

lastIndexOf 返回对应的下标

console.log(arr.indexOf(1,2));//从下标开始找 找这个1这个数字第一次出现的位置(左到右)
console.log(arr.lastIndexOf(1,5));//从下标5开始找 找1第一个次出现的位置(右到左)

字符串加强（模板字符串）

var a = 'hello'
console.log(`${a} world`) //hello world

es5新增的改变this指向的方法

bind （不会自动执行）

function say(){
    console.log(this) //指向window
}
say() //打印window
//通过函数调用
var obj = { 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 查找下标

var li = Array.from(lis).find(function(li){
    return li.innerText == '5'
}) //找到对应匹配的元素
console.log(li);
//findIndex 查找对应的元素的下标  返回第一个找到的元素下标
var index = Array.from(lis).findIndex(function(li,index,arr){
    return li.innerText == '5'
})
console.log(index);

静态方法（使用类名.）

Array.of() 将一组数据转为数组

Array.from() 将伪数组转为数组

var array = Array.of(1,2,3,4,5)
console.log(array);
//具备某些数组的特性的对象称为伪数组 arguments NodeList HTMLCollection等
var lis = document.querySelectorAll('li')
// 伪数组是不具备数组的函数的
Array.from(lis).forEach(function(li){
    console.log(li.innerText);
})

字符的增强

includes 是否包含（包含返回true 不包含返回false）

startsWith 是否以这个字符串开头（是返回true 不是返回false）

endsWith 是否以这个字符串结尾（是返回true 不是返回false）

repeat 重复多次的去平铺对应的字符串

// indexOf的基础上增强
//是否包含 includes
console.log('abc'.includes('a')); //true
//endsWith 是否以这个字符串结尾
console.log('abc'.endsWith('abc'));//true
console.log('abc'.endsWith('c'));//true
//startsWith 是否以这个字符串开头
console.log('abc'.startsWith('a'));//true
console.log('abc'.startsWith('abc'));//true
//平铺 repeat 平铺的次数 重复多次的写个字符串
console.log('abc'.repeat(3));//将abc写3次

变量修饰符（增强）

var 关键词修饰的变量是伪全局变量（进行变量提升）

let 关键词块状作用域（变量名不能重复声明避免变量名污染）

const 关键词常量（常量不可变也不能重复声明声明一定要赋值（不能二次赋值））

var btns = document.querySelectorAll('button')
// var 关键词声明的伪全局作用域
for(var i=0;i<btns.length;i++){
    btns[i].onclick = function(){ //当前的事件是异步操作
        console.log(i); //3 异步比同步晚执行 var关键词修饰的变量是伪全局变量
    }
}
// let 块级作用域 只在当前的代码块内有用
for(let i=0;i<btns.length;i++){
    btns[i].onclick = function(){ //当前的事件是异步操作
        console.log(i); //3 异步比同步晚执行 var关键词修饰的变量是伪全局变量
    }
}
// let 在同一作用域优点不能重复命名 
let a = 10
// let a = 20 报错 不能重复声明
// 当你省略了对应的修饰符 默认就是以var关键词修饰
// const关键词 声明常量 他同样具备块级作用域 const定义的变量的不能重新赋值
// 声明的时候 必须要赋值
const a = 10
// a = 20 错误的 因为const修饰的变量不允许更改
// const b 错误的 必须要赋值
// es6 不是所有浏览器都可以直接解析的 不建议写源码的时候用let const (babel.js 解析es高版本的内容 把变成低版本的)

新增的值类型

旧有值类型

number , String , boolean , null , undefined

新增的类型

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

//如果去声明一个Symbol 
var v = Symbol() //独一无二的值
var s = Symbol('这个值很重要') //里面的参数是一个说明
var s1 = Symbol('这个值很重要') //里面的参数是一个说明
console.log(v);
console.log(s == s1);
console.log(s.description);//获取里面的详情信息 也可以设置 当前这个详情是一个只读属性 description
v.description = 'hello' //没用 他是个只读属性
//key是独一无二 当作对象的key值
var obj = {v:'hello'}
console.log(obj.v);
//bigInt 大的整型(存储number存不了的数据) 实现的方式 字符串传入实现
// 传入字符串
var str = '123456789123456789'
console.log( Number(str));
var bigNumber = BigInt(str)
console.log(bigNumber);

对象的增强

静态方法

is方法 Object.is() 判断俩个对象是否是一个（true或者false）

// NaN
console.log(NaN == NaN);//false
//Object.is 主要解决NaN和NaN的问题
console.log(Object.is(NaN,NaN));//true NaN是值类型(常量)
console.log(Object.is({},{}));//false {}对象

Object.assign 将后面对象合并当前前面返回的是合并的对象

var obj = {sex:'男'}
//assign 目标对象  来源对象 将后面的合并到前面 返回一个对象 会影响之前的对象
var res = 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省略了 加了个=>
var hello = ()=>{
    console.log('hello')
}
//调用
hello()

箭头函数的简化

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

// 简化 如果只有一个参数可以省略() 
var say = username => {
    console.log(username);
}
say('jack')

如果只有一句代码的话可以省略{}

//当你只有一句代码的时候 {} 可以省略
var world = username => console.log(username)
world('hello')

如果只有一句代码且你需要返回数据情况下可以省略对应的 retrun

//当你只有一句代码的时候 且你需要返回值 那么return可以被省略
var getUserName = username => username+'hello'
var value = getUserName('张三')
console.log(value); //张三hello
//数组的forEach方法
[1,2,3].forEach(value=>console.log(value))
// 数组的reduce方法
var sum = [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
}
var hello = ()=>{
    console.log(this);
}
hello.call({age:18}) // window

默认参数

function fn(agr1=value,arg2=value2){
    
}
// 初始化一个对象 默认值
function initObj(name,age=18,sex='男'){
    return {
        name,age,sex
    }
}
console.log(initObj('jack'));//没有传参会使用默认值
console.log(initObj('jack',19,'女'));//传了参会覆盖默认值

对象里面内容的简化

属性的简化

当你的属性值是一个变量的情况下，以及你向使用你的变量作为key的名，这个时候可以省略key

var age = 18
var username = 'jack'
//简化 使用变量做键的名 {age:age,username:username}
var obj = {age,username}

函数的简写

var obj = {
    say:function(){
        console.log('hello')
    }
}
obj.say()
//简写 省略:和function
var obj = {
    say(){
        console.log('hello')
    }
}
obj.say()

循环的加强

for in 是用于遍历对象的遍历的是对象的里面key 他也可以遍历数组（数组也是对象）
for of 是用于遍历数组的遍历的是数组里面的value 他不可以遍历对象（只有实现了迭代器的对象才可以被遍历必须具备length或者size属性）

如果要使用对应的for of来遍历对象的话怎么办！！

Object的几个方法（静态方法）可以用来实现对应的遍历

keys 拿到所有的key

values 拿到所有的值

entries 拿到所有的键值对

var obj = {age:18,name:'jack',sex:'男'}
//keys 获取所有的key 作为一个迭代对象
var k = Object.keys(obj)
console.log(k);
//values 获取所有的value
var v = Object.values(obj)
//entries 获取所有的key-value对
var e = Object.entries(obj)

新增的对应的迭代器类型（实现了迭代器）

set 元素不重复的一个集合（去重）

set声明

无参

var set = new Set() //空的集合

将数组作为参数传递

var arr = [1,1,2,2,3,3]
var set = new Set(arr) //传入数组
console.log(set) //1 2 3

属性

size 获取对应的长度

//无参的形式
var set = new Set()
//添加 add append push...
set.add(1)
set.add(2)
set.add(1)
//获取对应的set的长度 size
console.log(set.size);//2 
//删除方法 delete remove
set.delete(1) //删除1这个value值
//删除所有 清空
// set.clear()
//获取元素
var key = set.keys() //获取所有key 值既是key 又是值
var value = set.values() //获取所有的值 
var kv  = set.entries() //获取所有的键值对
console.log(kv);
console.log(key);
console.log(value);
//set里面有一个forEach方法
// 第一个是值 第二个key 第三个是遍历的set
set.forEach((v,k,set)=>{
    console.log(v);
})
//has 判断是否存在 返回true和false
console.log(set.has(2));//true

WeakSet 内容存储对应的set（只能存储对象但并不能完成去重）

var weakset = new WeakSet()
weakset.add({username:"张三"})
weakset.add({username:"张三"})
weakset.add({username:"张三"})
console.log(weakset);//里面还是存在3个

map 基于set和array之上构建的一个集合

map的声明

var map = new Map() //无参

var arr = [[1,2],[3,4]]
var map = new Map(arr) //通过二维数组构建的

map对应的方法
get 通过key来获取value
set 存入一个key-value
delete 通过key来删除
clear 清空所有
keys 获取所有的key values 获取所有的值 entries 获取所有的键值对
has 判断当前key是否存在
forEach 遍历

var map = new Map() //空的map
var arr = [[1,2],[3,4]]
var map = new Map(arr) //通过二维数组构建的
console.log(map);
//map对应的方法 增删改查
// 查询 get
console.log(map.get(1)); //通过key来获取value
// 添加的方法 set 传入key和value
map.set('hello','张三')
//属性 size属性
console.log( map.size);
//删除的方法 通过key来删除
map.delete(3)
//重新设置就是修改
map.set(1,'埃里克多')
//获取key 获取value 获取键值对
console.log(map.keys());
console.log(map.values());
console.log(map.entries());
//清空所有
map.clear()
//forEach value key map
map.forEach((value,key,map)=>{
　　console.log(value);
})
//has 判断是存在
console.log(map.has('hello'));

weakMap基于weakSet上面构建map 也就是他的key是对象只能是对象

解构

解除构造

var obj = {username:'jack',password:'123'}
// obj.username
// obj.password
//解构来取 (通过key来解构对应的obj) {key} = {key:123}
var {password,username} = obj
console.log(username);
console.log(password);
//快速提取对象里面数据
var {age} = {age:18}
console.log(age);
//解构取数组里面的内容 按照位置来取对应的值
var [o,p] = ['a','b']
console.log(o);
// 快速读取值
var {sex} = {username:'jack',password:"123",age:'18',sex:"女"}
console.log(sex);

扩展运算符

…打开数组拿出里面的内容

//扩展运算符
var arr = [1,3,5]
var arr1 = [2,4,6]
console.log(...arr); //解除数组的包装 把他暴露出来 1 3 5
//如果你的方法里面需要,隔开他会默认给你加上一个,
console.log( 'abc'.concat(1,2,3,4,5));
console.log( 'abc'.concat(...arr,...arr1)); //默认加上,

Class （类）

他是用于对象构建的（类只是一个构建对象的容器）调用这个class要使用new关键词

//类名首字母必须大写
class Person{
　　constructor(){ //构造器
　　　　//this必须在构造器里面使用
　　　　this.age = 18 //类的属性
　　　　this.sayHello = function(){ //类的方法
　　　　　　console.log('hello')
　　　　}
　　}
}
//构建对象
var person = new Person()
console.log(person.age); //18
person.sayHello() //hello
//类名首字母必须大写 class不能被重复定义
class Person1{
　　//constrctor调用 new的过程 每一次new 里面的内容都会重新声明
　　constructor(age=18,name='jack'){ //构造器
　　　　//this必须在构造器里面使用 this是指向实例化的对象
　　　　this.age = age //类的属性
　　　　this.name = name
　　　　this.sayHello = function(){ //类的方法
　　　　　　console.log('hello')
　　　　}
　　}
　　run(){//在函数里面可以访问对应的this
　　　　console.log(this.name+'跑');
　　}
}
//使用new 调用的对应构造器的时候 就是在实例化的过程 而产生的对象被称为实例化对象
var person = new Person1(18,'jack')
console.log(person); // age:18 name:jack sayHello:fn
var person1 = new Person1()
console.log(person1);
person1.run()
console.log( person1.sayHello == person.sayHello);//false
console.log( person1.run == person.run);//true

注意事项

class 修饰的类类名首字母必须大写
class 不允许重复声明
class 里面this只能存在于constructor（构造器）里面
class 里面this指向当前实例化对象
在实例化的过程 new的过程的调用的constructor函数跟其他函数无关（所以当前在constructor都会重新声明一次）

extends关键词

extends 用于继承他会拥有父类所有的非私有的属性及方法

class Person{
    constructor(){
        this.age = 18
　　}
　　run(){
　　　　console.log('跑');
　　}
}
//extends 关键词声明以后 在对应的constructor里面想要使用this 必须先写super()
class Son extends Person{
　　constructor(){
　　　　super()//指向父类Person的构造器constructor
　　　　this.name = 'jack'
　　}
}
var son = new Son()
console.log(son);//获取不到run的

注意事项

在子类构造里面如果想要使用this 必须先要使用super()
super指向父类的构造器
子类无法获取构造器之外的函数

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/280307.html

JavaScript中的es5及es6新增的内容

ES5及ES6

es5的新特性

严格模式（对应的相反的称为怪异模式）

严格模式的特性

变量必须要带修饰符

函数里面this不能指向window

不允许在非函数的代码块内声明函数

禁止八进制方法

函数的arguments数组形参和实参不同步

对于数组和字符串都进行了加强

数组的高阶函数（以函数做的参数的函数 称为高阶函数）

forEach 遍历的

map 遍历

forEach和map的区别

forEach和map的底层实现

reduce 从左到右计算的 reduceRight（从右到左计算）

reduce底层实现

filter 过滤的

filter的底层实现

some 有一些满足就返回true 否则返回false

every 每一个满足就返回true 否则返回false

底层实现

indexOf 返回对应的下标

lastIndexOf 返回对应的下标

字符串加强 （模板字符串 ）

es5新增的改变this指向的方法

bind （不会自动执行）

call （自动调用函数）

apply （自动调用函数）

call和apply的区别

es6的新特性

数组的增强

静态方法（使用类名.）

字符的增强

变量修饰符（增强）

let 关键词 块状作用域 （变量名不能重复声明 避免变量名污染）

const 关键词 常量（常量不可变 也不能重复声明 声明一定要赋值（不能二次赋值））

新增的值类型

旧有值类型

新增的类型

对象的增强

静态方法

函数增强

箭头函数

箭头函数的简化

箭头函数的特性

默认参数

对象里面内容的简化

属性的简化

函数的简写

循环的加强

新增的对应的迭代器类型（实现了迭代器）

set 元素不重复的一个集合（去重）

set声明

相关的方法（增删改查）

属性

map 基于set和array之上构建的一个集合

解构

解除构造

扩展运算符

…打开数组拿出里面的内容

Class （类）

注意事项

extends关键词

注意事项

相关推荐

发表回复

数组的高阶函数（以函数做的参数的函数称为高阶函数）

字符串加强（模板字符串）

let 关键词块状作用域（变量名不能重复声明避免变量名污染）

const 关键词常量（常量不可变也不能重复声明声明一定要赋值（不能二次赋值））