一、关于变量
ES6新增：块级作用域变量
1、let定义块级作用域变量
- 没有变量的提升，必须先声明后使用
- let声明的变量，不能与前面的let，var，conset声明的变量重名
{ { console.log(a) // 报错 必须先声明再使用 let a = 10; // 只在当前大括号可以使用 var b = "abc"; // 全局作用域变量 console.log(a); // 10 // let a = 10 // 报错 Uncaught SyntaxError: Identifier 'a' has already been declared console.log(b); // bac } console.log(b); // abc var 存在变量提升所以不会报错 console.log(a); // 报错 let 不存在变量提升 有作用域问题 只能在大括号中使用 }
2、const 定义只读变量
- const声明变量的同时必须初始化赋值，一旦初始化完毕就不允许修改
- const声明变量也是一个块级作用域变量
- const声明的变量没有“变量的提升”，必须先声明后使用
- const声明的变量不能与前面的let， var ， const声明的变量重名
{
const CONSTANT = 100
console.log(CONSTANT) // 100 只能在括号里使用
}
console.log(CONSTANT) // CONSTANT is not defined 报错 也是作用域问题
二、关于函数
1、ES6可以给形参函数设置默认值
就是说，当我们调用函数时，如果设置了默认形参，即使没给函数传入实参，那么函数的实参就是默认形参。
function fun2(a = 1, b= 2){ console.log(a,b) // 1,2 } fun2(10,20); // 10 20 fun2(100); // 100 2 没有传参 则取初始默认值
在构造函数中也可是使用的
function Person(name, age, sex = "男"){ this.name = name; this.age = age; this.sex = sex; } var p1 = new Person("张三", 20); console.log(p1) // Person {name: "张三", age: 20, sex: "男"} var p2 = new Person("李四", 30); console.log(p2) // Person {name: "李四", age: 30, sex: "男"} var p3 = new Person("王五", 20, "女"); console.log(p3) // Person {name: "王五", age: 20, sex: "女"
2、箭头函数
// 正常函数 var fun3 = function(a){ console.log(a); } // 箭头函数 区别在于 this 的指向 开发中建议都有箭头函数 能省去很多代码 var fun3 = (a)=>{console.log(a);} fun3(999);
复习一下this的认识
1.在函数体外，this指的就是window对象
2.在函数替内，谁调用函数this就指向谁
3.在构造函数中，this指的是新创建的对象
4.在html标签中，this指的是当前的这个标签元素
5.在ES6中，对于箭头函数，它本身没有this，要看它在哪里创建的，和当前函数的作用域, 通俗说由执行上下文确定。
三、... 扩展运算符 可以将对象或者数组里面的值展开
1、对象用法
const a = [1, 2, 3]
console.log(a) // 1 2 3
const b = {a: 1, b: 2}
console.log({c: 3, ...b}) // {a: 1, b: 2, c: 3}2、在数组之前加上三个点（...）
var arr = [1,2,3,4,5]; console.log(arr); // [1, 2, 3, 4, 5] console.log(...arr) // 1 2 3 4 5
3、可以根据数组的展开运算用数组给函数批量的传参 （用的比较多）
function fun5(a,b,c,d,e,f){
console.log(a,b,c,d,e,f)
}
fun5([1,2,3,4,5]) // [1, 2, 3, 4, 5] undefined undefined undefined undefined undefine
fun5(...[11,22,33,44,55,66]) // 11 22 33 44 55 66
四、关于apply和call
apply和call，都是对象本身没有某个属性或者方法，去引用其他对象的属性或方法，也就是说两者都可以改变this的属性
不同之处
apply(this的指向，数组/arguments)
call(this的指向，参数1，参数2，参数3)
var name ="window的name"; var obj = { name:"obj的name", showName:function(v1,v2,v3){ console.log(v1,v2,v3) } } obj.showName(); obj.showName.apply(window,[10,20,30]); // 10 20 30 // apply括号里的是谁，调用的前面的函数里面的this就是谁 obj.showName.call(window,10,20,30) // 10 20 30 var color = "yellow"; function showColor(){ console.log(this.color) } var obj = { color:"red", } showColor(); // yellow showColor.apply(obj); // red showColor.call(obj); // red showColor.apply(this); // yellow showColor.call(window); // yellow
五、关于解构赋值
1、数组的解构赋值
var [a,b,c] = [11,22,33] console.log(a,b,c) // 11 22 33 var [e,[f,g],k] = [1,[2,3],5] console.log(e,f,g,k) // 1 2 3 5
2、对象的解构赋值
var{name,age}={name:"张三", age:"20"} console.log(name, age) // 张三 20
// 以前我们互换两个变量的值，需要借助第三个变量，利用解构赋值，就方便很多了 var f1 = 88; var f2 = 99; [f1,f2] = [f2 ,f1]; console.log(f1, f2) // 99 88
3、解构json
var jike = {"name":"tom","age":"23","sex":"男"};
var {name,age,sex}=jike;
console.log(name,age,sex)//tom 23 男
function cal(a,b){
var ret1 = a+b;
var ret2 = a-b;
var ret3 = a*b;
var ret4 = a/b;
return [ret1,ret2,ret3,ret4]
}
var [r1,r2,r3,r4] = cal(10,5);
console.log(r1,r2,r3,r4) // 15 5 50 2
六、创建对象
ES6中创建对象 class
class className{
// 肯定存在一个构造函数 constructor 如果不写构造函数，有一个默认的构造函数,内容为空 constructor(){} // 注意：这里不需要逗号 // 下面是函数属性 比如属性有run dark 函数和对象都可以 run(){} dark(){} }
举个例子
class Person{ // 肯定存在一个构造函数 construtor constructor(name,age,sex,nativePlace){ this.name=name; // 注意：这里是分号 this.age=age; this.sex=sex; this.nativePlace=nativePlace; } // 下面是函数属性 eat(){console.log("红烧排骨")} study(){console.log("英文")} play(){console.log("敲代码")} } var sunShine = new Person("fanfan","22","女","黑龙江"); console.log(sunShine) // Person {name: "fanfan", age: "22", sex: "女", nativePlace: "黑龙江"}
七、Promise 对象是一个构造函数，用来生成Promise实例。
const promise = new Promise(function(resolve, reject) { if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } }); // 成功 promise.then(data => { console.log(data ); }); // 错误 异常 promise.catch(error => { console.log(error ); });
八、Set（）和Map（）
set（）有序列表集合（没有重复） 数组去重利器
Set()是指有序列表集合 (set中的元素是没有重复的) set包含的方法 add()、has()、delete()、clear()等 add() 添加 var s = new Set(); s.add(1); s.add(window); s.add(true); s.add(1); console.log(s);//一共三个元素 console.log(s.size)//数组的长度是3 delete（value） 删除指定元素 //结合上栗 s.delete(window); console.log(s) //1 true console.log(s.size) //2 has( value )用来判断指定的值是否在set集合中 存在返回true 不存在返回false //结合上栗 console.log( s.has(1) )//true clear（） 同来清空set集合的 //结合上栗 s.clear() console.log(s)//此时为空 举个例子：生成10个1-20的随机数，要求不可以重复 var arr3 = new Set(); while(arr3.size<10){ var yuan = parseInt(Math.random() * (20 - 1 + 1) + 1); arr3.add(yuan); } console.log(arr3)
Map() 用来存放键值对的集合
var map = new Map(); map.set("name","张三"); map.set("age",20); console.log(map) // Map {"name" => "张三", "age" => 20} get(key)根据key值取得value console.log( map.get("name")) // 张三 has() 判断是否存在某个键值对 存在返回true 不存在返回fasle console.log( map.has("age") ) // true console.log( map.has("age1") ) // false clear() 清空集合 map.clear(); console.log(map);//Map {}
九、模板字符串
const user = { name: '张三'， age: 18 } console.log(`My name is ${user.name} and age is ${user.age}`) // My name is 张三 and age is 18
十、for of 值遍历
var someArray = [ "a", "b", "c" ]; for (v of someArray) { console.log(v); // 输出 a,b,c }
十一、Proxies Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处
// 定义被侦听的目标对象 var engineer = { name: 'Joe Sixpack', salary: 50 }; // 定义处理程序 var interceptor = { set: function (receiver, property, value) { console.log(property, 'is changed to', value); receiver[property] = value; } }; // 创建代理以进行侦听 engineer = Proxy(engineer, interceptor); // 做一些改动来触发代理 engineer.salary = 60; // 控制台输出：salary is changed to 60
十二、 简述Es7
一、异步函数（async/await） 常用利器
var fs = require('fs'); var readFile = function (fileName){
// 需要被await的话 就用promise包装 return new Promise(function (resolve, reject){ fs.readFile(fileName, function(error, data){ if (error) reject(error); resolve(data); }); }); }; // await 等待的是一个promise对象 var asyncReadFile = async function (){ // 当 f1 执行完毕后 f2 才会执行 var f1 = await readFile('/etc/fstab'); var f2 = await readFile('/etc/shells'); console.log(f1.toString()); console.log(f2.toString()); }
二 、string中加入include方法
includes("字符"); 用于判断字符串中是否包含某个字符
存在返回true 不存在返回false
includes("字符",startIndex); 用于判断字符串中下标startIndex是否是某个字符
是返回true 不是返回false
var str = "hello"; console.log( str.includes("e") ) // true console.log( str.includes("e",3) ); // false
三、求幂运算
console.log(3**2) // 9
四、Object.values/Object.entries
Object.values和 Object.entries是在ES2017规格中，它和Object.keys类似，返回数组类型，其序号和Object.keys序号对应。
Object.values,Object.entries和Object.keys各自项返回是数组，相对应包括key,value或者可枚举特定对象property/attribute
五、字符填充函数padStart 和 padEnd
console.log('0.00'.padStart(20)) // 0.00 console.log('10,000.00'.padStart(20)) // 10,000.00 console.log('250,000.00'.padStart(20)) // 250,000.00
以上只是些个人认为比较常用的欢迎指正不对不足之处， 详细的可以看看阮一峰大神的特篇 http://es6.ruanyifeng.com/