码迷,mamicode.com
首页 > 其他好文 > 详细

ecmascript

时间:2016-07-21 19:30:39      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:

编程语言JavaScript是ECMAScript的实现和扩展,由ECMA(一个类似W3C的标准组织)参与进行标准化。ECMAScript定义了:

  1. 语言语法——语法解析规则、关键字、语句、声明、运算符等。

  2. 类型——布尔型、数字、字符串、对象等。

  3. 原型和继承

  4. 内建对象和函数的标准库-json、Math、数组方法、对象自省方法等。

ecmascript不定义html和css的相关功能,也不定义类似DOM的api,这些都在独立的标准中定义。ecmascript涵盖了各种环境中js的应用场景,无论是浏览器环境还是类似nodejs的非浏览器环境。

语法糖:简单的说就是一种便捷的写法,对已有的功能进行了封装,提供给用户更好的编程方式和编码风格。
例如:

input.map(item => item + 1);

他表示的意思是

input.map(function (item) {
  return item + 1;
});

最新发布的es6新增的内容:

1. 迭代器和for-of循环
这是最简单、最直接的遍历数组元素的方法
这个方法避开了for-in循环的缺陷,
可以正确响应continue、break和return语句
使用示例:
1、遍历数组:

for (var value of myArray) {
  console.log(value);
}

2、遍历字符串

for (var chr of "") {
  alert(chr);
}
3、遍历Set对象(可以自动排除重复项)、Map对象(内含的数据由键值对组成,所以你需要使用解构(destructuring)来将键值对拆解为两个独立的变量:):
// 基于单词数组创建一个set对象
 var uniqueWords = new Set(words);
 for (var word of uniqueWords) {
   console.log(word);
}
for (var [key, value] of phoneBookMap) {
  console.log(key + "‘s phone number is: " + value);
}

2.生成器Generators
示例:

function* quips(name) {
  yield "你好 " + name + "!";
  yield "希望你能喜欢这篇介绍ES6的译文";
  if (name.startsWith("X")) {
    yield "你的名字 " + name + "  首字母是X,这很酷!";
  }
  yield "我们下次再见!";
}

这就是一个简单的生成器函数,他与普通函数有很多共同点,但是而这又有如下区别:

1、普通函数使用function声明,而生成器函数使用function*声明。
2、在生成器函数内部,有一种类似return的语法:关键字yield。二者的区别是,普通函数只可以return一次,而生成器函数可以yield多次(当然也可以只yield一次)。在生成器的执行过程中,遇到yield表达式立即暂停,后续可恢复执行状态。
这就是普通函数和生成器函数之间最大的区别:普通函数不能自暂停,生成器函数可以。

  • Default parameters(默认参数) in es6
    还记得我们以前不得不通过下面方式来定义默认参数:

var link = function (height, color, url) {
var height = height || 50;
var color = color || ‘red‘;
var url = url || ‘http://azat.co‘;
...
}

但在ES6,我们直接可以把默认值放在函数声明里:

var link = function(height = 50, color = ‘red‘, url = ‘http://azat.co‘) {  ...  }
  • Template Literals(模板对象)in es6
    在其他语言中,使用模板和插入值是在字符串里面输出变量的一种方式,因此,在es5可以这样组合一个字符串。

var name = ‘Your name is ‘ + first + ‘ ‘ + last + ‘.‘;
var url = ‘http://localhost:3000/api/messages/‘ + id;

但是在ES6中,我们可以使用使用新的语法$(NAME):

var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;
  • Multi-line Strings (多行字符串)in ES6
    ES6的多行字符串是一个非常实用的功能。在ES5中,我们不得不使用以下方法来表示多行字符串:

var roadPoem = ‘Then took the other, as just as fair,nt‘
+ ‘And having perhaps the better claimnt‘
+ ‘Because it was grassy and wanted wear,nt‘
+ ‘Though as for that the passing therent‘
+ ‘Had worn them really about the same,nt‘;
var fourAgreements = ‘You have the right to be you.n
You can only be you when you do your best.‘;

但是在ES6中,我们可以用反引号表示:

var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`;
var fourAgreements = `You have the right to be you.
You can only be you when you do your best.`;
  • Destructuring Assignment (解构赋值)in ES6
    解构可能是一个比较难以掌握的概念。先从一个简单的赋值讲起,其中house 和 mouse是key,同时house 和mouse也是一个变量,在ES5中是这样:

     var data = $(‘body‘).data(), // data has properties house and mouse
    house = data.house,
    mouse = data.mouse;
    

    以及在node.js中用ES5是这样:

 var jsonMiddleware = require(‘body-parser‘).jsonMiddleware ;
var body = req.body, // body has username and password
   username = body.username,
   password = body.password;

在ES6,我们可以使用这些语句代替上面的ES5代码:

var { house, mouse} = $(‘body‘).data(); // we‘ll get house and mouse variables
var {jsonMiddleware} = require(‘body-parser‘);
var {username, password} = req.body;

这个同样也适用于数组,非常赞的用法:

var [col1, col2]  = $(‘.column‘),
[line1, line2, line3, , line5] = file.split(‘n‘);
  • Enhanced Object Literals (增强的对象字面量)in ES6

  • Arrow Functions in(箭头函数) ES6
    以前我们使用闭包,this总是预期之外地产生改变,而箭头函数的迷人之处在于,现在你的this可以按照你的预期使用了,身处箭头函数里面,this还是原来的this。

有了箭头函数在ES6中, 我们就不必用that = this或 self = this 或 _this = this 或.bind(this)。例如,下面的代码用ES5就不是很优雅:

var _this = this;
$(‘.btn‘).click(function(event){
_this.sendData();
})

在ES6中就不需要用 _this = this:

$(‘.btn‘).click((event) =>{
this.sendData();
})

ecmascript

标签:

原文地址:http://www.cnblogs.com/qqqiangqiang/p/5692837.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!