ES6常用语法

ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准
2015年发布,所以也叫ES2015

不是所有浏览器都支持ES6,比如说浏览器会看不懂我们写的let和const变量。那怎么办呢,还好有一些很好用的语法转换工具,比如:babel、jsx、traceur、es6-shim,可以将ES6语法降级转换成ES5。但不是支持100%的ES6新特性。

对ES6新特性最友好的是chrome和firfox浏览器。

那ES6新特性都有哪些呢,哪些又是常用又实用的呢?

JavaScript的lint也就是代码规范检测工具主要有三个JSLint、JSHint和ESLint
ES6的推广,增加了很多语法,其它两款工具都没法在短时间内提供支持,而ESLint凭借其自定义rules的特性,使得Babel为ESLint开发了babel-eslint,让ESLint成为最快的ES6语法的lint工具。
ESLint的作用是什么呢。
1.避免低级bug,找出可能发生的语法错误。
如:提示使用未声明的变量,修改const变量等等
2.提示删除多余的代码
声明而未使用的变量、重复的case等
3.确保代码遵循最佳实践
4.统一团队的代码风格

1.let和const
ES6以前,JavaScript并没有块级作用域的概念,有的是全局作用域和函数作用,而let的出现是为了打破这个局面,let是块级作用域。const是定义常量,必须在定义的时候初始化且不接改变。
用let声明的变量只能在块级作用域内使用。
2.字符串拼接
var str1 = ‘123’;
var str2 = '456';
var str3 = '789';
var str = s1+'000'+s2+'000'+s3;(ES6以前)
var str = '{s1}000{s2}000{s3}'(ES6); console.log(str); 3.解构赋值 解构指的就是解开原数组或对象的解构,给新变量赋值。 ①数组的解构赋值 let arr = [0,1,2] let [a,b,c] = arr; console.log(a) //0 console.log(b) //1 也可以设置默认值 let [a='-1',b,c]//当arr的第一个元素为空(undefined),a则为默认值。 let a = [0,1,2]; let b = [3,4,5]; let d = a; d.push(4); console.log(d);//[0,1,2,3] let e = [...a]; e.push(4) console.log(a);//[0,1,2,3,4] console.log(e);//[0,1,2,3,4,4] 由于a赋值给d,a和d指向同一个内存地址,任意变量更改都会影响到引用该内存地址的变量。 但通过e变量的解构赋值的方式,就可以把a数组赋值一份,且互不影响。 ②对象的解构赋值 对象的解构赋值和数组类似,不过数据的数组成员是有序的,对象的属性是无序的。 let name,age // 需要用圆括号,包裹起来 ({name,age} = {name:"swr",age:28}) console.log(name) // 'swr' console.log(age) // 28 4.复制数组 // 数组的浅拷贝,引用之间的拷贝,没有实现数组的真正复制 var arr1 = [1, 2, 3]; var arr2 = arr1; arr2.push(4); console.log(arr1, arr2); //[1, 2, 3, 4] [1, 2, 3, 4] //要想实现深拷贝,传统做法只能遍历赋值 for(var i=0;i<arr1.length;i++){ arr2[i] = arr1[i]; } //ES6实现数组的深拷贝方法1 var arr1 = [1, 2, 3]; var arr2 = Array.from(arr1); //ES6实现数组的深拷贝方法2 //就是上面说的解构赋值 var arr1 = [1, 2, 3]; var arr2 = [...arr1]; 5.增加了Map对象 6.for-of循环 var arr = ['红楼梦','西游记','三国演义','水浒传']; //只循环key 0 1 2 3 4 输出key值,也就是下标索引 for(var key of arr.keys()){ console.log(key); 6 } //只循环value,注意数组是没有.values() 直接 var value of arr ,输出 红楼梦,西游记,三国演义,水浒传 for(var value of arr){ console.log(value); } //循环key,value for(var [key,value] of arr.entries()){ console.log(key,value); } //如果直接循环数组 //for in循环与for of循环的区别 var arr = ['apple','banana','orange','pear']; for(var i in arr){ // i打印出来的就是arr数组对应的索引 // 0 1 2 3 console.log(i); } for(var i of arr){ // i值打印出来的就是我们想要的数组具体的值 // apple banana orange pear console.log(i); } //注意::for of不能循环json var json = {'a':'apple','b':'banana','c':'orange','d':'pear'}; 7.箭头函数 箭头函数的作用:更简短,捕获上下文的this。 var obj = { a: 10, b: () => { console.log(this.a); //undefined console.log(this); //window }, c: function() { console.log(this.a); //10 console.log(this); //obj{...} } } 8.模块化的export和import 可以直接在任何变量或函数前面加一个export关键字,就可以将其导出 在一个文件中: export const sqrt = Math.sqrt; port function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } 然后在另一个文件中这样引用: import { square, diag } from 'lib'; console.log(square(11)); // 121 console.log(diag(4, 3)); 可以一个一个的导出,也可以一起导出 //一起导出的例子 let a = 12; let b = 5; let c = function(){ 13 return 'welcome'; 14 }; export { a, b, c as cc // as是别名,使用的时候只能用别名,特别注意下 }; //导入 import { a, b, cc // cc是导出的,as别名 } from './mod1.js'; 如果export导出加上default关键字,则import导入的时候,无需知道变量名,就可以直接使用。 import mainAttr from './mod2.js'; console.log(`我的英文名是:{mainAttr.name}我的年龄是${mainAttr.age}`);
9.Promise
为什么要有Promise
写js的时候,经常会遇到异步编程,不管是Node服务端还是web前端。
那如何实现异步编程,典型的方式就是采用回调函数。
我们经常性的需要在一个异步操作后执行默写逻辑,也经常出现在回调的回调的回调。。。没完了,进入了回调地狱。这样代码维护性极差。
更好的写法就是链式调用。
Promise是异步编程的解决方案,Promise以为承诺,意思是承诺将来会执行的约定。
Promise也有一些缺点。首先,无法取消Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。第三,当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
不同于“老式”的传入回调,在使用 Promise 时,会有以下约定:
在本轮 Javascript event loop(事件循环)运行完成之前,回调函数是不会被调用的。
通过then()添加的回调函数总会被调用,即便它是在异步操作完成之后才被添加的函数。
通过多次调用then(),可以添加多个回调函数,它们会按照插入顺序一个接一个独立执行。
因此,Promise 最直接的好处就是链式调用(chaining)。
在开始使用Promise之前,我们首先需要了解Promise的三种状态:
pending: 初始状态,既不是成功,也不是失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。
下面是一个Promise对象的简单例子。
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
}).3000);
}

this.timeout(100).then((numtime) => {
console.log(value);
});

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。