Javascript 1.5/1.6 新特性

一、const 常量

  • 声明创建了一个常量并要求有初始值
  • 这个常量不能重写，也不能重新声明，它所在的作用域内不能声明与其名称相同的其他变量或函数
  • 这个常量拥有块作用域

二、let 变量

  • let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。

let绑定不受变量提升的约束，这意味着 let 声明不会被提升到当前执行上下文的顶部。

function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError: foo is not defined
  var bar = 1;
  let foo = 2;
}

三、解构赋值

  • 是一个Javascript表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。

数组——基本变量赋值

var foo = ["one", "two", "three"];
var [one, two, three] = foo;

数组——声明赋值分离

var a, b;
[a, b] = [1, 2];

数组——默认值

var a, b;
[a=5, b=7] = [1];

数组——交换变量

var a = 1;
var b = 3;
[a, b] = [b, a];

数组——解析一个从函数返回的数组

function f() {
  return [1, 2];
}

var a, b;
[a, b] = f();

数组——忽略某些返回值

function f() {
  return [1, 2, 3];
}

var [a, , b] = f();

数组——将剩余数组赋值给一个变量

var [a, ...b] = [1, 2, 3];

数组——用正则表达式匹配提取值

var url = "https://developer.mozilla.org/en-US/Web/JavaScript";

var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript", index: 0, input: "https://developer.mozilla.org/en-US/Web/JavaScript"]

var [, protocol, fullhost, fullpath] = parsedURL;

对象——简单示例

var o = {p: 42, q: true};
var {p, q} = o;

或是用新变量赋值

var {p: foo, q: bar} = o

对象——无声明赋值

var a, b;
({a, b} = {a: 1, b: 2});//相当于var {a, b} = {a: 1, b: 2}

对象——默认值

var {a = 10, b = 5} = {a: 3};

对象——函数参数默认值(火狐测试失败)

function drawES6Chart({size = ‘big‘, cords = { x: 0, y: 0 }, radius = 25} = {})
{
  console.log(size, cords, radius);
  // do some chart drawing
}
drawES6Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

对象——加载模块

const { Loader, main } = require(‘toolkit/loader‘);

解构嵌套对象和数组

var metadata = {
    title: "Scratchpad",
    translations: [
       {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

For of 迭代和解构

var people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith"
    },
    age: 35
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones"
    },
    age: 25
  }
];

for (var {name: n, family: { father: f } } of people) {
  console.log("Name: " + n + ", Father: " + f);
}

从作为参数实参的对象中提取数据

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

四、class 类表达式

类表达式是用来定义类的一种语法；它的大部分功能，es5都可以做到，新的class写法只是让对象原型的写法更清晰，更像面向对象编程的语法。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;
};

等同于

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return ‘(‘ + this.x + ‘, ‘ + this.y + ‘)‘;
  }
}

创建一个新的类——declaration-form

class Polygon {
  // ..and an (optional) custom class constructor. If one is
  // not supplied, a default constructor is used instead:
  // constructor() { }
  constructor(height, width) {
    this.name = ‘Polygon‘;
    this.height = height;
    this.width = width;
  }

  // Simple class instance methods using short-hand method
  // declaration
  sayName() {
    ChromeSamples.log(‘Hi, I am a ‘, this.name + ‘.‘);
  }

  sayHistory() {
    ChromeSamples.log(‘"Polygon" is derived from the Greek polus (many) ‘ +
      ‘and gonia (angle).‘);
  }

  // We will look at static and subclassed methods shortly
}

创建一个新的类——expression-form

const MyPoly = class Poly {
  getPolyName() {
    ChromeSamples.log(‘Hi. I was created with a Class expression. My name is ‘ +
      Poly.name);
  }
};

继承一个已存在的类 Extending an existing class

子类没有自己的this对象，而是继承父类的this对象，然后对其加工。super代表了父类构造函数。如果需要在构造函数中使用this，则必须在使用之前调用super

class Square extends Polygon {
  constructor(length) {
    // The reserved ‘super‘ keyword is for making super-constructor
    // calls and allows access to parent methods.
    //
    // Here, it will call the parent class‘ constructor with lengths
    // provided for the Polygon‘s width and height
    super(length, length);
    // Note: In derived classes, super() must be called before you
    // can use ‘this‘. Leaving this out will cause a reference error.
    this.name = ‘Square‘;
  }

  // Getter/setter methods are supported in classes,
  // similar to their ES5 equivalents
  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  }
}

this指向子组将，相当于

Component.prototype.constructor.call(this,props)。

覆盖父组件的方法 Subclassing methods of a parent class

class Rectangle extends Polygon {
  constructor(height, width) {
    super(height, width);
    this.name = ‘Rectangle‘;
  }
  // Here, sayName() is a subclassed method which
  // overrides their superclass method of the same name.
  sayName() {
    ChromeSamples.log(‘Sup! My name is ‘, this.name + ‘.‘);
    super.sayHistory();
  }
}

定义一个静态方法 Defining static methods

// Classes support static members which can be accessed without an
// instance being present.
class Triple {
  // Using the ‘static‘ keyword creates a method which is associated
  // with a class, but not with an instance of the class.
  static triple(n) {
    n = n || 1;
    return n * 3;
  }
}
// super.prop in this example is used for accessing super-properties from
// a parent class. This works fine in static methods too:
class BiggerTriple extends Triple {
  static triple(n) {
    return super.triple(n) * super.triple(n);
  }
}

类支持一个静态成员能在不被实例化的状态下调用

Triple.triple();
Triple.triple(6);
BiggerTriple.triple(3);

扩展浏览器的内置对象和DOM

class MyDate extends Date {
  constructor() {
    super();
  }

  getFormattedDate() {
    var months = [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘, ‘Jul‘, ‘Aug‘, ‘Sep‘,
      ‘Oct‘, ‘Nov‘, ‘Dec‘];
    return this.getDate() + ‘-‘ + months[this.getMonth()] + ‘-‘ +
      this.getFullYear();
  }
}
class MyAudio extends Audio {
  constructor() {
    super();
    this._lyrics = ‘‘;
  }

  get lyrics() {
    return this._lyrics;
  }

  set lyrics(str) {
    this._lyrics = str;
  }
}

var player = new MyAudio();
player.controls = true;
player.lyrics = ‘Never gonna give you up‘;
document.querySelector(‘body‘).appendChild(player);
ChromeSamples.log(player.lyrics);

五、数值扩展

Number的扩展

  • Number.isFinite()
  • Number.isNaN()
  • Number.parseInt()
  • Number.parseFloat()
  • Number.isInteger()
  • Number.MAX_SAFE_INTEGER
  • Number.MIN_SAFE_INTEGER

Math对象扩展

Math.trunc():去除一个数的小数部分，返回整数部分。

Math.trunc(4.1) // 4
Math.trunc(4.9) // 4
Math.trunc(-4.1) // -4
Math.trunc(-4.9) // -4

Math.sign方法用来判断一个数到底是正数、负数、还是零。

Math.sign(-5) // -1
Math.sign(5) // +1
Math.sign(0) // +0
Math.sign(-) // -0
Math.sign(NaN) // NaN

六、数组扩展

Array.prototype.indexOf()

  • indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
  • indexOf使用strict equality进行判断 searchElement与数组中包含的元素之间的关系。

语法：

arr.indexOf(searchvalue,fromindex)

Array.prototype.lastIndexOf()

  • lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

语法：

arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

Array.prototype.every()

  • every()方法测试数组的所有元素是否都通过了指定函数的测试。返回Boolean类型值。
  • callback被调用时传入三个参数：元素值，元素的索引，原数组。
  • every 遍历的元素范围在第一次调用 callback 之前就已确定了。在调用 every 之后添加到数组中的元素不会被 callback 访问到。

语法：

arr.every(callback[, thisArg])

Array.prototype.filter()

  • filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
  • callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。
  • filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。

语法：

var new_array = arr.filter(callback[, thisArg])

Array.prototype.forEach()

  • forEach() 方法对数组的每个元素执行一次提供的函数。
  • forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。
  • forEach 方法按升序(索引)为数组中含有效值的每一项执行一次callback 函数，那些已删除（使用delete方法等情况）或者未初始化的项将被跳过（但不包括那些值为 undefined 的项）（例如在稀疏数组上）。
  • forEach() 为每个数组元素执行callback函数；不像map() 或者reduce() ，它总是返回 undefined值，并且不可链式调用。
  • 没有办法中止或者跳出 forEach 循环，除了抛出一个异常。如果你需要这样，使用forEach()方法是错误的，你可以用一个简单的循环作为替代。如果您正在测试一个数组里的元素是否符合某条件，且需要返回一个布尔值，那么可使用 Array.every 或 Array.some。如果可用，新方法 find() 或者findIndex() 也可被用于真值测试的提早终止。

语法：

array.forEach(callback[, thisArg])

Array.prototype.map()

  • map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
  • 使用 map 方法处理数组时，数组元素的范围是在 callback 方法第一次调用之前就已经确定了。

语法：

var new_array = arr.map(function callback(currentValue, index, array) { // Return element for new_array }[, thisArg])

Array.prototype.some()

  • some() 方法测试数组中的某些元素是否通过由提供的函数实现的测试。

语法：

arr.some(callback[, thisArg])

Array.from()

  • Array.from() 方法从一个类似数组或可迭代的对象中创建一个新的数组实例。
const bar = ["a", "b", "c"];
Array.from(bar);

Array.from(‘foo‘);

let s = new Set([‘foo‘, window]);
Array.from(s); 

let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m); 

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

Array.from([1, 2, 3], x => x + x);

Array.of()

  • Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.fill()

  • fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。

语法：

arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)

示例：

[1, 2, 3].fill(4)            // [4, 4, 4]
[1, 2, 3].fill(4, 1)         // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2)      // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1)      // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2)    // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN)  // [1, 2, 3]
Array(3).fill(4);            // [4, 4, 4]
[].fill.call({length: 3}, 4) // {0: 4, 1: 4, 2: 4, length: 3}

Array.find()

  • compared with Array.filter()

七、Promise

  • Promise 对象表示一个异步操作的最终完成（或失败）情况。

太抽象，先找篇文章看看：http://www.cnblogs.com/lvdabao/p/es6-promise-1.html，直接从使用的角度出发。

首先，new 一个Promise

function runAsync(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log(‘执行完成‘);
            resolve(‘随便什么数据‘);
        }, 2000);
    });
    return p;
}
runAsync()

例一：

//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
            resolve(img);
        }
        img.src = ‘xxxxxx‘;
    });
    return p;
}

//延时函数，用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject(‘图片请求超时‘);
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

解析：requestImg函数会异步请求一张图片，我把地址写为"xxxxxx"，所以肯定是无法成功请求到的。timeout函数是一个延时5秒的异步操作。我们把这两个返回Promise对象的函数放进race，于是他俩就会赛跑，如果5秒之内图片请求成功了，那么遍进入then方法，执行正常的流程。如果5秒钟图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。

例二：

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
    console.log(results);
});

解析：用Promise.all来执行，all接收一个数组参数，里面的值最终都算返回Promise对象。这样，三个异步操作的并行执行的，等到它们都执行完后才会进到then里面。那么，三个异步操作返回的数据哪里去了呢？都在then里面呢，all会把所有异步操作的结果放进一个数组中传给then，就是上面的results。当页面有个需求，需要同时完成2个以上的ajax请求，就可以这样。

例三：

runAsync1()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return ‘直接返回数据‘;  //这里直接返回数据
})
.then(function(data){
    console.log(data);
});

解析：用维护状态、传递状态的方式来使得回调函数能够及时调用

消化了上边的内容后我又看了 http://www.cnblogs.com/lvdabao/p/5320705.html  此文乃Promise规范，略晦涩。

不定时更新

时间： 2024-11-25 15:56:42

Javascript 1.5/1.6 新特性的相关文章

Java SE 8 新特性之旅 : Java开发世界的大变动

我很自豪的成为了adopt-OpenJDK的一员,像其他专业团队成员一样,但是我只刚加入了8个月,我们一同经历了Java SE 8 的开发.编译.编码.讨论--等等,直到JDK上线.Java SE 8发布于2014年3月18日,现在可供下载使用. 我很高兴发布这一系列"Java SE 8 新特性之旅",我会写一些例子来简化Java SE 8知识的获取.开发经验.新特性和API,然后 利用你的知识,提高你的编码能力,同时提高你的生产力.我希望你能像我写文章一样享受它. 我们将游览Java

ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 诸君,我喜欢嫩的--呸呸呸 诸君,我喜欢3D咋了?新事物会替代旧事物不是~ ArcGIS API for JavaScript 4.2概述 AJS 4.2,即ArcGIS API for JavaScript 4.2,是美国ESRI公司针对WebGIS市场推出的.利用JavaScript和Dojo开发的一款产品,它在2016年12月发布.而AJS 4.0 beta则在一年前就发布了. 关于AJS3和AJS4选择的问题,

ES6:JavaScript 新特性

5月14日,国务院发布了<国务院关于同意建立深化收入分配制度改革部际联席会议制度的批复>,同意建立由发改委牵头的深化收入分配制度改革部际联席会议制度.这是对政府一年多前首次发布的关于收入分配制度改革若干意见的落实,标志着中国收入分配改革迈出了实质性一步.根据批复,联席会议由国家发改委.财政部.人力资源和社会保障部等21个部门和单位组成.发改委主任徐绍史担任联席会议召集人,其他成员单位有关负责人为联席会议成员. 国务院下发的文件显示,部际联席会议制度的主要职责包括:在国务院领导下,统筹协调做好深

用ScriptEngine在java中和javascript交互的例子（JDK6新特性）

1. [代码][Java]代码     package demo7; import java.util.Arrays;import java.util.List; import javax.script.Invocable;import javax.script.ScriptEngine;import javax.script.ScriptEngineManager; public class ScriptEngineTest {     public static void main(Stri

ArcGIS API For Javascript新版本3.11中的新特性

ArcGIS API For Javascript新版本3.11中的新特性: 更简短的引用URL:如果你正在将用以前的版本的程序更新到新版本的话,这是很重要的. To update your code for version 3.11 references, replace the following URLs accordingly: /3.10/js/dojo/ should now read /3.11/ (note the dropped "/js/dojo") 将你的源码更新

JavaScript学习--Item24 ES6新特性概览

ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中.要查看ES6的支持情况请点此. 目前想要

ES2019 中的 JavaScript 新特性

JavaScript 从成立之初就已经走了很长一段路,提供了许多新的功能,这些功能是专门设计来使该语言更加人性化和提升效率.以下是我最近发现的一些有趣的JavaScript 新增内容.其中一些功能已在 Node,Chrome,Firefox 和 Safari 中可用,而其他功能仍处于建议阶段. Optional chaining (可选链) Optional chaining 可选链使用 ?. 操作符来表示,Optional Chaining 使我们能检查一个对象上面是否存在某属性.其它一些语言

javascript新特性

让我们看看javascript中的一些新特性.本文将介绍它们的语法和相关链接,以帮助读者及时了解它们的进展.我们将通过编写一个小测试项目来演示如何快速使用这些新功能! 关于提案 提案分为五个阶段.有关详细信息,请参阅介绍文档https://tc39.github.io/process-document/.每项提案最初都以“斯特劳曼”或第0阶段休闲鹿提出,在这一阶段,它们要么没有提交给技术委员会,要么没有被否决,但尚未进入下一阶段. 作为个人建议,读者应避免在处于不稳定阶段的生产环境中使用阶段0建

javascript新特性let,function*,yield,promise

自从去了百度就好久没有更新博客了,看了以前写的东东,以前在小公司还是比较闲啊.讽刺的是这次又要换工作去小公司,才想起写篇博... 去了百度后先学了python,然后前面的GG走了,我也不想用python了,就全力转用nodejs了. 越来越喜欢上JS家族了,最近看了一下ECMA6的新特性,着实又增强了JS的生命力啊.看国外ASMJS大牛的视频说,JS的作者只用了10天就创造了这门语言. 所以希望ECMA能够继续进步. 废话多了些.下面干货来了.注意一下代码要用node --harmony执行,代