【翻译】ES6新特性

ES6 写的更少,做的更多 本文为意译,原文链接 JavaScript ES6 带来了一些新语法和一些很棒的新特性,这使你的代码更现代化更具可读性。 它可以让你写很少的代码实现更多的功能。ES6介绍了大量的新特性,比如:箭头函数、模板字符串,类、模块化等等,来看一下吧。 const 和 let const 是ES6中声明变量的一个新的关键字,const比var更强大,一旦使用,变量不能被重新赋值,也就是说,这是一个不可变的变量除非你用它声明object。 这在定位选择器的时候非常有用,比如,有个button按钮要触发事件,而你想用JavaScript选中那个html 元素时,你最好用const代替var,因为var存在变量提升,当不需要重新赋值变量时最好使用const。 // ES5 var MyBtn = document.getElementById('mybtn'); // ES6 const MyBtn = document.getElementById('mybtn'); 在上面的代码中,const不会改变也不能被重新赋值,如果你想给它一个新值,将会报错。 let name = "Said"; name = "Rick"; console.log(name);// Rick let可以被重新赋值并获得新值,它创建的是可变变量。let 和const一样都是块级范围的,即变量只在声明它们的范围内有效。 箭头函数 箭头函数非常赞,它让你的代码更具可读性,更有条理性,并且看起来更现代化。 // ES5 functionmyFunc(name) { return 'hello' + name; } console.log(myFunc('said')); // hello said //ES6 const myFunc = name => { return `Hi ${name}`; } console.log(myFunc('said')); // Hi said // 或者直接用箭头函数但不用return const myFunc = name => `Hi ${name}`; console.log(myFunc('said')); // Hi said 如你所见,箭头函数看起来更具可读性更简洁,你不需要再使用老语法;另外,你可以用箭头函数使用map,filter,reduce等内置函数; //ES5 const myArray = ['tony', 'sara', 'said', 5]; let Arr1 = myArray.map(function(item){ return item; }) console.log(Arr1); //ES6 let Arr2 = myArray.map(item => item) console.log(Arr2); 使用了箭头函数的map比ES5的写法更简洁可读,用ES6你可以编写更精简的代码,filter和reduce也是同样的用法。 模板字面量 模板字面量和模板字符串简直了好麽,当我们想在字符中间使用一个变量的时候我们不必再使用 '+'号来连接字符串 旧语法: // ES5 function myFunc1(name, age) { return 'Hi' + name + 'Your age is' + age + 'year old!'; } console.log(myFunc1('Said', 1)) // 用ES6新语法 const myFunc1 = (name, age) => { return `Hi ${name} Your age is ${age} year old!`; } console.log(myFunc1('Said', 1)) 很简单吧!ES6和旧语法的区别很大,当操作字符串的时候,ES6的文字字符串比ES5看起来更有组织性,更结构化! 默认参数 当我用PHP的时候,我经常使用默认参数,这让你可以提前定义一个参数。所以,当你忘记传参数的时候,不会返回undefined的错误,因为参数早已默认定义好了,当你运行一个函数而忘记传参时,它会使用默认的参数,并不会报错。 看下面这个例子 // 不带默认参数 const myFunc = (name, age) => { return `hello ${name} your age is ${age} year old?`; } console.log(myFunc('said)); // hello said your age is undefined year old? 上面这个函数返回了undefined错误,因为我们忘记传第二个参数age。 但如果我们使用默认参数,就不会返回undefined,当我们忘记传参时函数会使用默认的参数值。 // 带默认参数 const myFunc = (name, age = 22) => { return `hello ${name} your age is ${age} year old?`; } console.log(myFunc('said)); // hello said your age is 22 year old? 如你所见,即使我们没传第二个参数该函数也返回了一个值,现在用默认参数就可以提前避免报错。 数组和对象解构 解构使得将数组或对象的值赋给新变量更加简单 旧语法: // ES5 const contacts = { name: 'said', familyName: 'Hayani', age: 22 } let name = contacts.name; let familyName = contacts.familyName; let age = contacts.age; console.log(name); // said console.log(familyName ); // Hayani console.log(age ); // 22 ES6语法: const contacts = { name: 'said', familyName: 'Hayani', age: 22 } let {username, familyName,age} = contacts; console.log(username); // undefined console.log(familyName ); // Hayani console.log(age ); // 22 在ES5中,我们必须把每个值分配给每个变量;而用ES6,我们只用把变量名放在大括号里来获取对象中的值; 注意:如果你定义的变量名称与对象中的属性名不一致会返回undefined。比如属性名是name而我们定义一个username的变量名,就会返回undefined(如上面代码所示) 我们必须将变量名命名的和属性名一样才可以获取到值,那万一我们需要重命名怎么办呢,可以用 : 实现。 const contacts = { name: 'said', familyName: 'Hayani', age: 22 } let {name: username, familyName,age} = contacts; console.log(username); // said 对于数组可以使用跟对象一样的语法,只需要把大括号{ }换成方括号[ ]。 const arr = ['Lionel', 'John', 'Layla', 20]; let [value1, value2, value3] = arr; console.log(value1); // Lionel console.log(value2); // John console.log(value3); // Layla import 与export 在JavaScript应用中使用import 和 export使其更强大,它们可以让你创建独立可复用的组件。 如果你熟悉任何一款JavaScript的MVC框架,你就知道这些框架经常会使用import和export来操作组件。那它们的工作原理是怎样的呢? 很简单!export允许你导出一个模块应用在其他的JavaScript组件中,然后在需要使用该模块的组件中用import导入它。 比如,我有两个文件,第一个是detailComponent.js另一个是homeComponent.js,在detailComponent.js中我们导出一个detail函数。 // ES6 export default function detail(name, age) { return `hello ${name} your age is ${age} year old?`; } 如果想在homeComponent.js中使用这个函数,只要用import导入就可以了 import detail form './detailComponent'; console.log(detail('said', 20)); // hello said your age is 20 year old? 如果我们想导入多个模块,只需要把它们放入大括号中。 import {detail, userProfile, getPosts} from './detailComponent'; console.log(detail('said', 20)); console.log(userProfile); console.log(getPosts); 挺棒的对吧?! Promises Promises是ES6的新特性,它是一个实现异步代码的函数,它可以在获取API数据的时候使用,也可以在某些需要一定时间才能执行完成的函数中使用,Promises使得解决这些问题更加容易,来创建第一个Promise。 const myPromise = () => { return new Promist((resolve, reject) => { resolve('Hi the promise execute successfully'); }) } console.log(myPromise()); // Promise{: "Hi the promise execute successfully"}; 打印console,会返回一个promise。如果我们想在获取到数据之后执行一个函数,就可以用Promise,Promise接受两个参数:resolve和reject来处理预期的错误。 注意:fetch函数返回的是Promise函数本身 const url='https://jsonplaceholder.typicode.com/posts'; const getData=(url) => { return fetch(url); } getData(url).then(data => data.json()).then(result=> console.log(result)); 在浏览器控制面板中打印上述代码,会返回一个数组。 rest参数和扩展运算符 rest参数用来获取数组值,然后返回一个新数组。 const arr = ['said', 20, 'JavaScript enthusiast', 'Hi', 'said', 'how are you?']; // 用解构获取值 const [val1, val2, val3, ...rest]= arr; const func = (restOfArr) => { return restOfArr.filter(item=>{return item}).join(" "); } console.log(func(rest)); // Hi said how are you? 扩展运算符和rest参数有相同的语法,但是扩展运算符作用的是数组本身而不仅仅是arguments,我们可以用扩展运算符获取数组中的值,而不是用for循环或其他的方法。 const arr = ['said', 20, 'JavaScript enthusiast', 'Hi', 'said', 'how are you?']; const func = (...anArray) => { return anArray; } console.log(func(arr)); // ['said', 20, 'JavaScript enthusiast', 'Hi', 'said', 'how are you?'] 类 类是面向对象编程的核心,它让你的代码更安全、更具有封装性,使用类可以让代码有一个良好的架构并且保持继承性。 class myClass{ constructor() {} } 用class关键字紧跟着类名和一对大括号{}就可以创建一个类 class myClass{ constructor(name, age) { this.name = name; this.age = age; } } 现在可以用new关键字创建一个对象来访问类中的方法和属性 const user = new myClass('said', 22); console.log(user.name); // said console.log(user.age); // 22 为了继承其他的类,可以用extends关键字后面跟你想继承的类名。 class myClass{ constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`Hi${this.name} your age is ${this.age}`); } } class UserProfile extends myClass{ username() { console.log(this.name); } } const profile = new UserProfile('said', 22); profile.sayHello(); // Hi said your age is 22 profile.username(); // said 可以点击这里学习更多有关类的知识点。 ES6还有其他很赞的特性——可以点击这里探索更多

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):