javascript语法规范es6-es7-es8基础

ES6

（1）数组解构

let [a,b,c] = [1,2,3]
console.log(a)    //  1
console.log(b)   // 2
console.log(c)   //3
如果解构不成功，则变量的值为undefined

(2)对象解构

let person = {name:'张三',age:'33'}
let {name,age} = person
console.log(name)   //张三
console.log(age) //33
let {name:personName,age:personAge} = person
console.log(personName)  //张三
console.log(personAge) //33

2.箭头函数
(1)定义方式

() => {} //()：代表是函数； =>：必须要的符号，指向哪一个代码块；{}：函数体
		const fn = () => {}//代表把一个函数赋值给fn

(2)省略写法
函数体中只有一句话且代码的执行结果就是返回值，可以省略大括号

 function sum(num1, num2) { 
     return num1 + num2; 
}
//es6写法
const sum = (num1, num2) => num1 + num2; 
如果形参只有一个可以省略小括号
function fun (v){
return v
}
const fun = v=>v

(3)箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this，箭头函数不能使用arguments

const obj = { name: '张三'} 
		 function fn () { 
    			 console.log(this);//this 指向 是obj对象
   			  return () => { 
         		console.log(this);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象
     			} 
 		} 
 		const resFn = fn.call(obj); 
		 resFn();

3.模板字符串
模板字符串必须用 `` 包含，变量用${xxx}

let obj = {
        name : 'anverson',
        age : 41
    };
    console.log('我叫:' + obj.name + ', 我的年龄是：' + obj.age); //我叫:anverson, 我的年龄是：41

    console.log(`我叫:${obj.name}, 我的年龄是：${obj.age}`); //我叫:anverson, 我的年龄是：41

4.let-const块级作用域的补充

const names=["abc","cba","nba"];

for(let  i=0;i<names.length;i++){ //* 这个数组的元素有三个，所以会形成3个块级作用域
  console.log(names[i]);
}

所以每个块级作用域的i都不是同一个。那使用const定义是不是可以实现呢?如果将上面的代码换一下：

const names=["abc","cba","nba"];
for(const  i=0;i<names.length;i++){ //* 这个数组的元素有三个，所以会形成3个块级作用域
  console.log(names[i]);
}

同样地，因为names有三个元素，所以还是会形成三个作用域。内部实现是这样的：

//第一个块级作用域
{
    const i=0;
    console.log(names[i]);
}
//第二个块级作用域 此时在i++的时候会报错，因为const本质是值不能改变，所以就会抛出错误
{
    //注意i++的i和const i不是同一个，js引擎会在内部做一些处理，这里为了方便让我们理解内部的实现
    将i++的结果赋值给新定义的i  //这一行就开始报错
    const i=结果
}

ES7

1.Array.prototype.includes()
includes()作用,是查找一个值在不在数组里,若是存在则返回true,不存在返回false.
(1)基本用法：
[‘a’, ‘b’, ‘c’].includes(‘a’) // true
[‘a’, ‘b’, ‘c’].includes(‘d’) // false

(2)接收俩个参数：要搜索的值和搜索的开始索引
[‘a’, ‘b’, ‘c’, ‘d’].includes(‘b’) // true
[‘a’, ‘b’, ‘c’, ‘d’].includes(1,‘b’) // true
[‘a’, ‘b’, ‘c’, ‘d’].includes(2,‘b’) // false
只能判断简单类型的数据，对于复杂类型的数据，比如对象类型的数组，二维数组，这些，是无法判断的.
2.求幂运算符
基本用法：
3 ** 2 //9
效果同
Math.pow(3, 2) //9
由于是运算符，所以可以和 +=一样的用法
var b = 3;
b **= 2;
console.log(b); //9

ES8

1.async/await的基本使用
如果某个方法的返回值是一个Promise实例对象，我们可以在它的调用的方法名前加await，最后这个方法返回值就不是Promise对象，而是一个具体的值，但是在 调用这个方法的外部函数需要加上async

import thenFs from "then-fs";
async function getFile(){
  let r1= await thenFs.readFile("./studyAsyncAwait/files/1.txt","utf8");
  console.log("r1:",r1);
  let r2= await thenFs.readFile("./studyAsyncAwait/files/2.txt","utf8");
  console.log("r2:",r2);
  let r3= await thenFs.readFile("./studyAsyncAwait/files/3.txt","utf8");
  console.log("r3:",r3);
}
getFile()

QQ交流群