ES6的新特性
来源:互联网 发布:求二叉树的深度java 编辑:程序博客网 时间:2024/05/01 17:58
1. 设置对象变量键值的语法
JavaScript开发者的烦恼之一是不能在对象字面量里设置变量键值——必须要在初始化后对象后增加变量键/值:
// *Very* reduced example
let myKey = 'key3';
let obj = {
key1: 'One',
key2: 'Two'
};
obj[myKey] = 'Three';
这个烦恼说好一点是不方便,说差一点是难以阅读以及丑陋无比。ES6给开发者们提供了一个解决方法:
let myKey = 'variableKey';
let obj = {
key1: 'One',
key2: 'Two',
[myKey]:'Three' /* yay! */
};
加上一层[],程序员们就可以在一条对象字面量定义语句就做完所有的事情。
2. 箭头函数
不用了解ES6带来的改变,你也早就知道箭头函数了——它已经是许多话题的中心,给JavaScript程序员造成了一些困扰(至少在开始的时候是这样的)。我可以写出好几篇博客来解释箭头函数的方方面面,但是我最想告诉大家的是,箭头函数是如何压缩简单函数的代码量的:
// Adds a 10% tax to total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11
// Cancel an event -- another tiny task
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click',brickEvent);
不用写function和return这两个关键词,有时候甚至不需要写(),箭头函数是简单函数非常好的一个快捷写法。
3. find/findIndex
JavaScript提供了Array.prototype.indexOf方法,用来获取一个元素在数组中的索引,但是indexOf方法不能计算目标元素的查找条件。有时候你还会想获取满足查找条件的那个元素本身。输入find和findIndex吧——这两个方法可以在一个数组搜索出第一个满足条件的值。
let ages = [12, 19, 6, 4];
let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >=18); // 1
find和findIndex允许搜索一个计算后的值,也防止了一些不必要的副作用和循环产生的不确定值。
4. 扩展运算符:
扩展运算符表示一个数组或者一个可迭代的对象可以在一次调用中将它们的内容分割为独立的参数。比如:
// Pass to function that expects separate multiplearguments
// Much like Function.prototype.apply() does
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
// Convert NodeList to Array
let divsArray = [...document.querySelectorAll('div')];
// Convert Arguments to Array
let argsArray = [...arguments];
这个神奇的运算符带来的附加好处是能够把可迭代对象(NodeList, arguments等等)转化为真正的数组——一直以来我们都用Array.from 或其它的hack方法。
5. 模板字符串
在JavaScript中,我们用连接符或者在一行字符的末尾增加\来创建多行字符串 ,这两种方法都难以维护。许多开发者和框架都开始滥用标签来封装多行字符串模板,其它的则通过DOM和outerHTML来获取元素的HTML作为一个字符串。
ES6给我们提供了模板字符串,你可以用它和重音符一起轻松的写多行字符串。
// Multiline String
let myString = `Hello
I'm a new line`; // No error!
// Basic interpolation
let obj = { x: 1, y: 2 };
console.log(`Your total is: ${obj.x + obj.y}`); // Yourtotal is: 3
当然,除了多行字符串,模板字符串还有其它的能力,比如说简单或者高级的插值。不过,仅仅是优雅的写多行字符串这件事情,已经让我十分欣慰了。
6. 默认参数值
许多服务端语言可以在函数声明中定义默认参数值,比如python和PHP,现在JavaScript也可以了。
// Basic usage
function greet(name = 'Anon') {
console.log(`Hello ${name}!`);
}
greet(); // Hello Anon!
// You can have a function too!
function greet(name = 'Anon', callback = function(){}) {
console.log(`Hello ${name}!`);
// No more"callback && callback()" (no conditional)
callback();
}
// Only set a default for one parameter
function greet(name, callback = function(){}) {}
如果没有传递无默认值的参数,其它的语言可能会报错,但是JavaScript会将它们设为undefined。
这六个特性只是ES6中的沧海一粟,却是我们会不假思索的、频繁使用的特性。这些微小的新特性往往得不到人们的关注,却是代码中的核心部分。
- 【ES6】ES6的新特性
- ES6的新特性
- ES6的新特性
- ES6的新特性
- ES6的新特性
- ES6的一些新特性
- ES6新特性的总结
- ES6的十个新特性
- ES6语法的新特性
- Node.js 4.0 的 ES6 新特性
- es6的新特性(一)
- 总结ES6常用的新特性
- ES6新特性 Class的实现
- 总结ES6常用的新特性
- 总结常见的ES6新语法特性
- ES5-ES6的部分新特性
- ES6之-字符串的新特性
- 经常用到的 ES6/7 新特性
- 误提交到no branch之后再merge
- 微信支付,异步通知
- 计算机图形学中的Mesh数据结构
- webstorm 2017 激活破解
- 从现在开始
- ES6的新特性
- 杂货铺(便捷过渡动画,模拟人手触摸控件,layout_margin失效等等)
- 优维科技携手AWS,解读企业上云之路
- Android性能优化第(一)篇---基本概念
- 正则表达式:Pattern类与Matcher类详解
- 写作八式,让简历百发百中!
- 全民K歌React Native实践与优化
- document.write()会清空原来的内容原因
- zookeeper 安装 windows环境