ES5 和 ES6

一，ES5(ECMAscript5.0 2009 年发布)

1，ES5 的严格模式：

所谓严格模式，从字面上就很好理解，即更严格的模式在这种模式下执行，浏览器会对 JS 的要求更苛刻，语法格式要求更细致，更符合逻辑。

怪异模式：

就是我们之前一直使用的开发模式，就叫怪异模式。因为很多时候出来的结果是非常怪异的，所以才称之为怪异模式。

严格模式的不同：

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

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

3. 禁止使用八进制方法

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

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

//使用严格（全局）模式
"use strict";

//使用严格（局部）模式
function fn() {
  "use strict";
  n = 10;
  console.log(n);
}

2，ES5 – bind：绑定一个新对象，让函数中的 this 指向该对象，一般在定时器中使用较多。

//声明一个对象
var obj = {
  name: function () {
    console.log(a);
  },
};
function prin() {
  this.name();
}
//绑定对象，让函数 prin 中的this指向obj；
prin.bind(obj)();

//定时器使用bind
var id = setInterval(prin.bind(obj), 1000);

3，ES5 中的数组新增及高阶函数 7 个（高阶函数里面的参数是函数）

a，indexOf() : 判断数组中是否包含某个元素，和字符串的 indexOf 用法类似；

b，forEach() : 用来遍历数组中的每一项；这个方法执行是没有返回值的，对原来数组也没有影响；

var arr = [1, 2, 3, 4, 5];
//value代表值，index代表下标，arr代表数组；都是形参可以改为任意字母；
arr.forEach(function (value, index, arr) {
  console.log("值：" + value + ", 下标：" + index + ", 数组：" + array);
});

c，map(): 和 forEach 非常相似，都是用来遍历数组中的每一项的；

区别：

相同点：都是用来遍历数组中的每一项

不管是 forEach 还是 map 都支持第二个参数值；

不同： map 的回调函数中支持 return 返回；

第二个参数的意思是把匿名回调函数中的 this 进行修改；

var arr = [1, 2, 3, 4, 5];
arr.map(function (value, index, arr) {
  console.log("值：" + value + ", 下标：" + index + ", 数组：" + array);
});

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

//返回值为数组里面指定是一个function，返回一个数组
var arr = [1, 2, 3, 4, 5];
function fn(n) {
  return n >= 3;
}
var newArr = arr.filter(fn);
console.log(arr); //[1,2,3,4,5]
console.log(newArr); //[3,4,5]

f，reduce()：数组逐项处理方法；接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终为一个值；

//   ES5中新增的一个数组逐项处理方法；接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终为一个值；
var result = arr.reduce(function (pre, cur, index, array) {
  console.log(
    "前一个值：" +
      pre +
      "当前值：" +
      cur +
      ", 下标：" +
      index +
      ", 数组：" +
      array
  );
  return cur;
}, 10);

g，reduceRight()用法：reduce 一样，开始位置不同，从右至左计算；

var result = arr.reduceRight(function (pre, cur, index, array) {
  console.log(
    "前一个值：" +
      pre +
      "当前值：" +
      cur +
      ", 下标：" +
      index +
      ", 数组：" +
      array
  );
  return cur;
}, 10);

h，every()：判断类似 &&，执行语句是否符合条件，返回布尔值；

//every 遍历每一个是否都符合条件 返回布尔类型的值 都符合条件返回true 有一个不符合返回false
var isTrue = numberArr.every(function (v, i, arr) {
  return v < 30;
});
console.log(isTrue);

i，some（）：判断类似 ||，执行语句是否符合条件，返回布尔值；

//some 是否存在符合条件的 有一个就返回true  都没有返回false
var isTrue = numberArr.some(function (v, i, arr) {
  return v < 0;
});
console.log(isTrue);

4，其他 ES5 新增（关于对象的增强还有许多新增的方法）

a，日期 now( ) 静态方法;

//获取当前时间离1970年1月1日0时0分0秒的 毫秒值（时间戳）
var time = Date.now(); //获取当前时间,这个使用多；

b，get；set；对于对象提供的方法；

console.log(user.name); //获取name属性 默认执行get方法
user.name = "李四"; //设置name属性 默认执行set方法

二，ES6(ECMAscript6.0 2015 年发布)

1，let 关键词(块作用域修饰)

//let 是ES6中新增关键字。它的作用类似于var，用来声明变量，但是所声明的变量，只在let命令所在的代码块内有效。
let a = 10;
if (true) {
  var a = 1;
  let b = 2;
}
console.log(a); //伪全局变量  所有有效
console.log(b); // 报错：ReferenceError: b is not defined   只在代码块内生效，也就是  {}  内；

//let关键字涉及到一个概念：块级作用域

//ES6以前，只有全局作用域和函数局部作用域，ES6之后加入块级作用域，一个大括号{}我们称之为一个代码块，一个大括号{}的内部就是块级作用域

//利用块级作用域可以有效解决以下问题
//1.防止全局变量泄露
//2.防止变量提升带来的覆盖问题

2，const 关键词；声明常量（不能更改）；

//const 声明的是常量，一旦声明，值将是不可变的, const 也具有块级作用域 ,  const 不可重复声明

const PI = 3.1415;
console.log(PI);
PI = 3;
console.log(PI); //报错  不能重复声明

3，=> 箭头函数（它里面没有 this，没有 arguments；），可以简写；

//ES6允许使用“箭头”（=>）定义函数；如果参数只有一个可以省略，代码只有一行也可以省略；
var fn = (v) => v;
//上面的箭头函数等同于：
var fn = function (v) {
  return v;
};

三，ES6 其他增强

1，对 string 的增强(方法，5 个)

1.1， includes，（是否包含）

let a = "hello";
a.includes("he"); //true 查找字符串里是否有该字符串，返回布尔值；

1.2，startWidth （判断是否是开头的内容）

let str = "hello";
str.startWidth("he"); //true 是否为开始的值，返回为布尔值；
str.startWidth("el"); //false 必须为开始的值

1.3，endWidth（判断是否是结束的内容）

let str = "hello";
str.endWidth("lo"); //true 是否为结束的值，返回布尔值；
str.endWidth("el"); //false 必须为结束末尾的值

1.4，repeat（返回把内容平铺后的 string 值）

let str = "hello";
var newstr = str.repeat(2); //平铺，返回一个新string，参数是平铺个数；
console.log(newstr); //'hellohello'

1.5，字符串模板

var str = `我是一个字符串`;

2，对数组的增强（6 个）

静态方法

2.1，Array.of( )

//Array.of  将指定的元素组成一个新数组，返回新数组；
var newarr = Array.of("a", "b", "c");
console.log(newarr); //['a','b','c']

2.2，Array.from( ) 把 arrlike 类型（类数组类型）转换为数组；

//Array.from() //将对应类似数组的类型转为数组
var htmlColltion = document.getElementsByTagName("a"); //获取所有的a
var newArr2 = Array.from(htmlColltion); //将对应的ArrayLike转为array类型 返回是一个数组
console.log(newArr2); //包含了a标签
//添加第二个参数 进行map遍历
var newArr2 = Array.from(htmlColltion, function (v, i, arr) {
  var n = Number(v.innerText); //取出里面的内容
  if (n % 2 == 1) {
    //判断里面的数值是否为奇数
    v.href = "http://www.baidu.com"; //将他的href地址变成百度
  } else {
    v.href = "http://www.sohu.com"; //偶数将他的href地址变成搜狐
  }
  return v; //返回内容
});

2.3，扩展运算符：’ … ‘ 三个点，代表打开数组，获取里面的每一个内容，组合到一起；

let arr = [a,b,c]
console.log(...arr)		//a b c  ...是打开数组取出对应数组里面的数据；

2.4，find 及 findIndex

//find 查找 findIndex 查找下标
let strArr = ["a", "b", "c", "a"];

//find 找不到返回undefined 找的到返回第一个元素
var str = strArr.find(function (v, i, arr) {
  //v表示元素 i表示下标 arr表示遍历的数组
  return v > "a"; //写条件 要带return
});
console.log(str); //b

//findIndex 找不到返回-1 找的到返回第一个的下标
var index = strArr.findIndex(function (v, i, arr) {
  //v表示元素 i表示下标 arr表示遍历的数组
  return v > "a"; //写条件 要带return
});
console.log(index); //1

3，for of 数组的循环，键值对象

3.1，for of 和 for in 的区别：

相同点：1，都是循环，可以用 continue，break，return；
	   2，两者都能对数组进行遍历
区别：1，for of 只能遍历数组；for in 能遍历对象和数组，一般也用来遍历对象；
	 2，for of 里遍历的是数组的值； for in 遍历的是下标或者是键；
	 3，for of 一般遍历数组；for in 一般遍历对象；
for of 和 forEach 的区别：for of是循环； forEach是方法；

//for in和for of区别演示
var arr = ["a", "b", "c"];
var user = { name: "jack", age: 18, sex: "男" };

for (let i in arr) {
  //使用for in遍历数组的时候里面i是表示下标
  console.log(i); //0-2
  console.log(arr[i]);
}
for (let i in user) {
  //使用for in遍历对象的时候里面i是表示键
  console.log(i); //name  age  sex
  console.log(user[i]);
}

//for of es6新增的
for (let v of arr) {
  //这个v表示的是值
  console.log(v);
}

3.2，for of 的方法

1，entries（） 键值对；
2，keys（） 键；
3，values（） 值；

let arr = [1,2,3,4,5]
for(let v of arr.entries()){
    console.log(v)		//打印键值对
}
for(let v of arr.keys()){
    console.log(v)		//打印键
}
for(let v of arr.values()){
    console.log(v)		//打印值
}

3.3，entries()键值对象，key()键，values()值；

//遍历数组的时，数组的方法：entries()键值对象，key()键，values()值；
var objArr = ['a','b']
key()键
for(let k of objArr.keys()){ 	//keys抽取数组里面所有的键作为一个数组
    console.log(k); 			//取出下标0 1
}
values()值
for(let v of objArr.values()){	//values抽取数组里面所有的值作为一个数组
    console.log(v); 			//取出值 ab
}
entries()键值对象
for(let v of objArr.entries()){	//entries抽取数组里面所有的键值对作为一个数组
    console.log(v); 			//取出键值对象
}

4，对内置函数的增强及求幂的方法（两个）

4.1，可以指定函数的形参默认值

//指定参数默认值,主要用在不传参时；
var fn1 = function (name = "jack") {
  console.log(name);
};
fn1("李四"); //传参的时候 将识别你的参数 李四
fn1(); //不传参使用默认的值 jack
//箭头函数指定参数默认值 里面如果要指定参数默认值的话必须带上()
var fn = (name = "rose") => {
  console.log(name);
};
fn(); //打印默认值

4.2，求幂方的方法 **

//内置数学求幂方法
Math.pow(2, 3); //2的3次方
//es6新增 ** 求幂方
let sun = 2 ** 3; //ES6  中新增的幂方法，也是2的3次方；

5，对象新增（四个）

5.1，对象新增：属性和方法的简写

//属性和方法的简写需要写在对象中；

//方法简写
var obj = {
  fn: function () {
    console.log("hello");
  },
};
//可简写为：
var obj = {
  fn() {
    //方法简写
    console.log("hello");
  },
};

//属性简写
//对象名和属性名一致的时候，可以利用对象的名字作为属性名；
let newobject = { obj };
console.log(newobject.obj);

5.2，对象–拼接表达式

//支持内部拼接
let obj = {}
obj['a'+'b'] = 8  等同于  obj.ab = 8

//也可以写在简写方法中
obj = {
    ['say' + 'hello'](){
        console.log('hello')
    }
}

5.3，对象的静态方法：Object.is( )，判断对象是否一致（基本和 ‘===’ 一样，但有两点区别）

is方法和恒等的区别 === 和 Object.is方法的区别：
	1 NaN===NaN为false Object.is(NaN,NaN)为true
	2 +0===-0 为true Object.is(+0,-0)为false

//区别一：NaN === NaN;  返回 false；   Object.is(NaN,NaN);	 返回  true；
NaN === NaN;  		 //返回 false；
Object.is(NaN,NaN);	  //返回  true；

//区别二：-0 === +0；	返回 true；	Object.is(-0,+0);	返回  false；
-0 === +0；			//返回 true；
Object.is(-0,+0);	  //返回  false；

5.4，对象的静态方法(对象合并)：Object.assign( )，提取所有对象，合并为一个；

//Object.assign 静态方法 提取对象所有的属性及方法,方法合并为一个对象 返回一个新对象

let obj = { a: "hello" };
let objone = { b: "bob" };
var newobj = Object.saaign(obj, objone);
console.log(newobj); //返回一个新对象；{a:'hello',b:'bob'}
newobj = { a: "hello", b: "bob" };

6，新增的数据结构（对象，两个）

6.1，set（里面储存的数据值不能重复，如果有会自动去除，数组去重；）

//set 构建使用 new 关键字，里面如果需要传参，传递的是数组；
//set 有增add，删delete，改就是删后增加，查get的方法；clear()清空；
var set = new Set(); //传入的是数组  ArrayLike

//具体方法
var arr = [];
var arrset = new Set(arr); //传参
var set = new Set(); //无参

//添加方法
set.add("a");
set.add("a"); //添加的方法
set.add("a"); //第二个数据是重复的所以会被删

//size属性 个数
console.log(set.size);
//set.delete('a') //把a删除

//删除全部 清空
//set.clear() //把size里面的数据全部删除
console.log(set.size);
// set是没有下标的

// has 判断是否存在 返回booleanl类型
console.log(set.has("f"));
// set.keys()
// set.values()
// set.entries()
//ArrayLike的方法
//将set转为array类型
var setArr = Array.from(set);
console.log(setArr);
//forEach 跟数组的forEach一个样 用户遍历的方法
//键不允许重复
set.forEach((v, v1, set) => {
  //v表示的值 v1表示的键（他的键和值一样） set 指向本身遍历set
  console.log(v);
});

6.2， map（键值对，键和值都可以是任意类型）

//map 构建使用 new 关键字；
//map 有增，删，改，查的方法，同set类似；
var map = new Map();

// map在构建的时候 如果需要传递参数 那么也可以传递一个数组 但是这个数组必须是二维数组
var arr = [
  [1, 2],
  [1, 2],
  [2, 3],
];
var maparr = new Map(arr);

//map是可以转成数组的；
let maparr = Array.from(map);

7，新增–解构(打开获取里面匹配的内容)

7.1 定义：

解除构造，拿到里面的数据，结构不成功会返回 undefined；解构能够让获取对象的属性和访问数组内容变得更简单，解构将对象中的内容打开，能更直观的看到也便于我们对其进行操作；

ES6-解构赋值
//解构赋值可以有效解决以下2个问题
//1.快速提取JSON字符串
//2.交换数组中的2个元素

数组（完全对称，不完全对称）
var [a,[b,c],d]  = [1,[2,3],4]; //左边是解构,将数组打开，并与之一一对应；

对象 (属性名相同，属性名不同)
var {name,age} = {name:'zhangsan',age:19}

函数
function func([x,y]){return x - y}；
console.log( func([19,11]) );

7.2，快速提取 JSON 字符串

//快速遍历json数据
var { name } = { name: "jack", age: 18, sex: "男" }; //name是不是会匹配对应的name
console.log({ name }); //直接name:jack

7.3，交换数组中的 2 个元素

8，新增–class 类

8.1，定义

es6新增了class这个东西（类） 实质上class也是一个function
class相当于构建对象的模板 提取对象的公共内容

8.2，使用

class Student {
  constructor(name, sex) {
    //构造方法 等下在new的时候会调用这个方法
    this.name = name; //this指向对应的对象
    this.sex = sex;
  }
  eat() {
    console.log(this.name + "吃饭");
  }
}
var stu1 = new Student("张三", "男"); //通过对应的构造函数来构建对象
console.log(stu1.name); //张三  获取对应的name属性
console.log(stu1.sex); //男
stu1.eat(); //调用对象的eat方法

9，新增–继承 extends(可以继承父类的所有非私有属性)

//继承 extends  继承可以获取他的非私有内容 classStudent继承了Student的内容
class classStudent extends Student {
  constructor(name, sex) {
    super(name, sex); //指向父类的构造 super指向父类  this指向当前
  }
}
var studentSong = new classStudent("王五", "未知"); //构建对象
studentSong.eat(); //如果自己有对应的方法就调用自己的 如果自己没有继承父类的eat方法
console.log(studentSong.name); //调用父类的name属性

10，新增–值类型 Symbol

10.1，定义

a，Symbol 是 ES6 引入的一种新的数据类型，来表示独一无二的值；一般用来做枚举类型的值使用；（枚举：一一列举的值）

b，数据类型有 6 种：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）现在有 7 种了，加上 Symbol

10.2，Symbol 操作

//创建Symbol值 ，不需要new关键字；
var s1 = Symbol();
var s2 = Symbol();
s1 === s2; // false

//里面可以传参，参数是string类型或number类型；
let c = Symbol("hello"); //介绍是一样
let d = Symbol("hello"); //介绍是一样
console.log(c == d); //false

10.3，Symbol 的静态方法

//1,Symbol.for
//通过key构建一个Symbol类型，如果没有这个键的symbol他会创建一个全局变量，如果有他会找这个全局变量；
var s1 = Symbol.for("box"); //通过键构建一个Symbol类型
var s2 = Symbol.for("box");
s1 === s2; // true

//2,Symbol.keyFor	获取key
console.log(Symbol.keyFor(e)); //box

//3,Symbol.iterator  获取迭代器，可以进行数据迭代（数据遍历，常用）
console.log(Symbol.iterator);
//symbol一般用来作为枚举类型的值使用
//枚举
var sex = {
  b: "男",
  g: "女",
};

11，异常处理

1，抛出异常：throw new Error()

//在什么阶段使用让其出错，就在哪写
function sun(num) {
  if (num == null) {
    throw new Error("不能为空");
  }
}

2，捕获异常：try{}catch(){}finally{}

try：进行错误的捕获，里面填写可能出错的代码（数据请求）

cacth：进行错误的处理（处理完后是不报错的）

finally：在最后，不管是否出错都会执行的代码块

//捕获异常
//try catch会影响性能
try{
    //填写可能会出错的代码；

}catch(){
    //捕获错误，只有错误才能进入；对错误进行处理的代码；

}finally{//finall一般不用，有性能问题；
    //不管是否错误都会执行这个代码块

}

上篇ECMAScript6

下篇Git