JavaScript学习的第十五天

es5和es6

es5

严格模式

声明严格模式

'use strict'

使用严格模式要记住的几点

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

"use strict"
n = 123
console.log(n)

2. 进制函数使用this关键字指向全局变量

function fn(){
	console.log(this);
}

3. 禁止使用八进制方法

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

不知道是不是对的，我运行的时候是可以的

if(true){
    function fn(){
    	console.log('hello');
    }
    fn()
}

5. 严格模式下,arguments变量,形参是不会变(不同步)

function fn(a){
    'use strict';
    arguments[0]=34;
    var a = 12//未定这个则输出a为23
    console.log(a);//12
    console.log(arguments[0])//34
}
fn(23)

this的bind绑定

this的指向的改变 es5的bind

格式

对象.函数.bind(要绑定的对象)

例子

var user = {
	username:'张三'
}
function hello(){
	console.log(this);//指向user
}
hello.bind(user)()
//bind将这个函数绑定给一个对象 那么这个函数里面的this就会指向对应的对象
//函数对象.bind(绑定的对象)()
var obj = {
	print:function(){
		console.log(this.username);
	}
}
obj.print.bind(user)()//一般绑定的this都是函数里面的 bind绑定对象 一般常用于定时器
setInterval(obj.print.bind(user),1000)

es5的数组高阶函数

es5判断数组的方法Array.isArray() 静态方法 返回值是布尔类型

var arr = ['a','b','c','d']
        console.log(Array.isArray(arr))

什么是高阶函数 以函数作为参数的函数叫做高阶函数

es5关于数组的高阶函数
forEach map filter reduce reduceRight every some

forEach 遍历的函数 没有返回值

第一个value表示值 第二个index表示下标 第三个array表示数组

arr.forEach(function(value,index,array){

​      console.log(value);

​      console.log(index);

​      console.log(array);

​      value = value+value //value是只读属性

​      console.log(value);

​      array[index] = value+value

​      console.log(array[index]);

​    })

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

 var newArr = arr.map(function(value,index,array){

​      if(value != 'a'){

​        return value+value

​      }

​    })

​    console.log(newArr.length);

​    console.log(arr);

​    console.log(newArr);

​    // filter 过滤 返回值为数组 里面指定是一个function

​    var arrs = [1,2,3,4,5]

​    var newArr = arrs.filter(function(value,index,array){

​      if(value>3){

​        return value

​      }

​    })

​    console.log(newArr);

​    var strArr = ['abcdde','abc','efg','abc123','cab']

​    //过滤掉 包含abc的

​    var strArr1 = strArr.filter(function(v,i,a){

​      if(!/abc/.test(v)){

​        return v

​      }

​    })

​    console.log(strArr);

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

    var arrs = [1,2,3,4]

​    // currentValue从2开始的

​    var sum = arrs.reduce(function(preValue,currentValue,currentIndex,array){

​      return preValue+currentValue

​    })

​    console.log(sum);

reduceRight 计算方法 （从右到左）

​

var arrs = ['a','b','c']

​    var total = arrs.reduceRight(function(preValue,currentValue,currentIndex,array){

​      return preValue+currentValue

​    })

​    console.log(total);

every 遍历每一个是否都符合条件 返回布尔类型 都符合条件返回true 有一个不符合就返回false 类似&&

    var str = [1,2,3,4]

​    var isTrue = str.every(function(v,i,a){

​      if(v>0){

​        return v

​      }

​    })

​    console.log(isTrue);

some 遍历每一个查看是否有符合 返回布尔类型 有一个符合的都返回true 类似||

    var str = [1,2,3,4,5]

​    var isTrue = str.some(function(v,i,a){

​      if(v>4){

​        return v

​      }

​    })

​    console.log(isTrue);

es5新增的其他内容

针对日期 新增方法 now() 静态方法 获取当前日期离1970年1月1日0时0分0秒的毫秒值（时间戳）之前使用的是getTime()但是太长了 现在这个now()简单的常用

    var n = Date.now()

​    console.log(n);

字符串模板

    var str = `${n}hello`

对于对象来说提供get及set

    var user = {

​      username:'张三',

​      name:{

​        get name(){

​          return this.user.name

​        },

​        set name(username){

​          this.username = username

​        }

​      }

​    }

​    console.log(user.name);//获取name属性 默认执行get方法

​    user.name = '李四' //设置name属性 默认执行set方法

babel.js文件专门解析es6变成es3

es6

es6介绍

​ ECMAScript第六个版本 是在es5之上做了功能添加

// 变量命名

    // var 命名的是为全局作用域 var 命名可以重复

​    var a = 1

​    var a = 2

​    //这个i会走到5

​    for(var i=0;i<10;i++){

​      document.getElementById('btn').onclick=function(){

​        console.log(i)

​      }

​    }

​    // 使用let i只会走到4

​    for(let i=0;i<10;i++){

​      document.getElementById('btn').onclick=function(){

​        console.log(i)

​      }

​    }

​    console.log(i)//这个i的作用域仅仅存在于for块中 外面不能访问

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

​    // let a = 10

​    // let a = 20

​    //var 可以声明全局变量

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

​    const a = 10 //不会局部声明 一般都在全局声明

​    // a = 20 不允许二次赋值

​    // 箭头函数 箭头函数没有this

​    function fn(){ //普通函数



​    }

箭头函数

    // var fn = (参数)=>{

​    //   函数代码块

​    // }

​    //(参数)=>{代码块} //如果只有一个参数可以省略() 只有一句代码执行的话 可以省略{}

​    var fn = name=>console.log(name+'你在干嘛');

​    //调用

​    fn('刘德华')

​    document.getElementById('btn').onclick = function(){

​      console.log(this); //里面的this会指向对应的按钮

​    }

​    document.getElementById('btn1').onclick =()=>{ //如果需要提供效率 建议使用的

​      console.log(this);//箭头函数里面的this全部是上面的this

​    }