JavaScript-ES5和ES6基础讲解(上）

ES5 : ECMAScript 5

ES5的严格模式：即更严格的模式 在这种模式下执行，浏览器会对JS的要求更苛刻，语法格式要求更细致，更符合逻辑。

怪异模式：就是我们之前一直使用的开发模式，就叫怪异模式。

声明严格模式："use strict";

"use strict";     //声明严格模式
    n=123
    console.log(n);   //这里面代码打印会直接报错，采用了严格模式后对应的内容需要更加规范，不支持8进制

eslint 代码检查器

设立严格格式的原因：

1.消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

2.代码运行的一些不安全之处，保证代码运行的安全；

3.提高编译器效率，增加运行速度；

严格模式注意几点：

1.不可以省略var声明变量；

2.禁止函数使用this关键字指向全局变量；

3.禁止使用八进制方法；

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

5.严格模式下，arguments变量，形参是不会变（不同步）；

ES5的bind：

绑定一个新对象， 让函数中的this指向该对象

var user = {
    username:'张三'
}
function hello(){
    console.log(this);     //指向user
}
​
//bind将这个函数绑定给一个对象，那么这个函数里面的this就会指向对应的对象
​

函数对象 . bind(绑定的对象)（）

var obj = {
    print:function(){
        console.log(this.username)
    }
}
obj.print.bind(user)()    //一般我们绑定的this都是函数里面的 bind绑定对象，一般常用于定时器

ES5的数组高阶函数

高阶函数：以函数作为参数的函数

forEach 遍历 (不支持IE8及以下)

map 遍历 (不支持IE8及以下)

filter 过滤

reduce 计算

reduceRigth 从右到左计算

every 是否每一个都符合条件

some 是否存在符合条件的

var arr = ['a','b','c','d']
console.log(Array.isArray(arr));   //判断是否是一个数组，返回为布尔类型的值

forEach 遍历的函数，没有返回值，不影响原数组

arr.forEach(function(value,index,array){
    //第一个value表示值；（是只读属性）
    //第二个index表示下标；
    //第三个array表示你遍历的数组
})

map 遍历的函数 有返回值，返回数组，数组的长度和我们原本的数组长度一致

var newArr = arr.map(function(value,index,array){
    if(value!='a'){        //当为a的时候不返回，a位置的结果为undefined
        return value+value
    }
})
console.log(newArr.length);    //返回值为 4
console.log(arr);               //返回值为'a' 'b' 'c' 'd'
console.log(newArr);            //返回值为undefined 'bb' 'cc' 'dd'

filter 过滤 过滤出数组中你想要的元素， 不改变原数组

var arrs = [10,15,12,13,11]
var newArr = arrs.filter(function(value,index,array){
    if(value>=12){
        return value
    }
})
console.log(newArr);  //返回值为 15 12 13

reduce 计算方法 计算总和（从左到右）

var arrs = [1,2,3,4]
var sum = arrs.reduce(function(preValue,currentValue,currentIndex,arr){
    return preValue+currentValue
})
console.log(sum)    //返回值为10
​
//  preValue：表示上一个值；
//  currentValue：表示当前值；
//  currentIndex：表示当前下标；
//  arr：表示遍历的数组；

reduceRigth 计算方法（从右到左）

var strArr3 = ['A','B','C']
var str1 = strArr3.reduce(function(preValue,currentValue,currentIndex,arr){
     return preValue+currentValue
})
​
var str2 = strArr3.reduceRight(function(preValue,currentValue,currentIndex,arr){
    return preValue+currentValue
}) 
console.log(str1);     //返回值为  ABC
console.log(str2);      //返回值为  CBA

every 遍历每一个是否都符合条件，返回布尔类型的值，都符合条件返回true，有一个不符合返回false

var numberArr = [1,20,15,30]
var isTrue = numberArr.every(function(v,i,arr){
    return v<30
})
console.log(isTrue);    //返回值为 false

some 是否存在符合条件的，有一个就返回true，都没有就返回false

var isTrue  = numberArr.some(function(v,i,arr){
    return v<0
})
console.log(isTrue);    //返回值为  false

es5新增的其他内容

针对日期：新增方法 now() 静态方法，获取当前日期离1970年1月1日0时0分0秒的毫秒值（事件戳）

var n = Date.now()   //这个比较常用

字符串模板

对于对象来说提供 get及 set

 var user = {
      username:'张三',
     name:{
         get name(){   //获取会自动调用
             return this.username
         }，
         set name(username){   //设置会自动调用
            this.username = username
        }
     }

ES6介绍

ecmascript的第六个版本 他是再es5之上做了功能添加

变量命名

var 命名的是伪全局作用域，var 命名可以重复

let关键词：不能重复命名（同一作用域的情况，不同作用域是可以的）

let关键词：是声明块状作用域，也就是说他的作用方法只在模块里面（建议使用）

const关键词：声明常量，就是不能变的量，使用const修饰的不能二次赋值，不能重复命名

箭头函数（没有this）

var fn = (参数)=>{
    函数代码块
}
（参数）=>{代码块}，如果里面只有一个参数可以省略()，只有一句代码执行的话，可以省略{}
​
 var fn = name=>console.log(name+'你在干嘛');
fn('张三')