ECMASCRIPT - 技术教程文章
ECMAScript6函数默认参数_javascript技巧
语言更新时每一个新增的特性都是从千百万开发者需求里提取过来的，规范采用后能减少程序员的痛苦，带来便捷。 我们经常会这么写function calc(x, y) {x = x || 0;y = y || 0;// to do with x, y// return x/y }简单说就是x，y提供了一个默认值为0，不传时x, y以值0来运算。传了就以实际值计算。 又如定义一个ajaxfunction ajax(url, async, dataType) {async = async !== falsedataType = dataType || 'JSON'// ... }自己用原生JS封...
ECMAScript6块级作用域及新变量声明（let）_javascript技巧
很多语言中都有块级作用域，但JS没有，它使用var声明变量，以function来划分作用域，大括号“{}” 却限定不了var的作用域。用var声明的变量具有变量提升（declaration hoisting）的效果。 ES6里增加了一个let，可以在{}， if， for里声明。用法同var，但作用域限定在块级，let声明的变量不存在变量提升。 示例1: 块级作用域 iffunction getVal(boo) {if (boo) {var val = 'red'// ...return val} else {// 这里可以访问 valreturn ...
ECMAScript6函数剩余参数（RestParameters）_javascript技巧【图】
我们知道JS函数内部有个arguments对象，可以拿到全部实参。现在ES6给我们带来了一个新的对象，可以拿到除开始参数外的参数，即剩余参数（废话好多 O(∩_∩)O~）。 这个新的对象和arguments不一样，它是程序员自定义的一个普通标识符，只是需要在前面加上三个点：...function func(a, ...rest) {console.log(a)console.log(rest) } func(1) func(1, 2, 3, 4)注意func的第二个参数rest，前面有三个点。定义好后调用了两次，结果分别如...
ECMAScript6新增值比较函数Object.is_javascript技巧【图】
在这之前我们比较值使用两等号 “==” 或 三等号“===”， 三等号更加严格，只要比较两方类型不同立即返回false。 另外，有且只有一个值不和自己相等，它是NaN现在ES6又加了一个Object.is，让比较运算的江湖更加混乱。多数情况下Object.is等价于“===”，如下1 === 1 // true Object.is(1, 1) // true'a' === 'a' // true Object.is('a', 'a') // truetrue === true // true Object.is(true, true) // truenull === null // true O...
ECMAScript6中Set/WeakSet详解_javascript技巧【图】
ES6里加入了一个新数据解构Set，和Java的Set一样，它里面不存放重复的元素。Set实现为一个类，使用时需要先new。var s1 = new Set() s1.add(1) s1.add(2) s1.add(3) s1.add(1)var s2 = new Set() s2.add('a') s2.add('a')// 输出1，2, 3 for (var i of s1 ) {console.log(i) } // 输出a for (var i of s2 ) {console.log(i) } 上面用Set的add方法添加元素，重复添加的，不会存进去。 Set构造器还可以接受数组作为参数传入var s3 = ...
ECMAScript6中Map/WeakMap详解_javascript技巧【图】
JS的对象本身就是个键值结构，ES6为什么还需要加Map呢，它与普通的JS对象有何区别？ 一、Map 1. Map构造器 先看Map的简单用法// 字符串作为key， 和JS对象类似 var map = new Map() // set map.set('name', 'John') map.set('age', 29) // get map.get('name') // John map.get('age') // 29这么对代码，看起来确实没有JS对象简洁 但Map的强大之处在于它的key可以是任意类型// 对象作为key演示 var xy = {x: 10, y: 20} // 坐标 v...
浅谈ECMAScript 中的Array类型【图】
前言 Array 类型是除了 Object 类型之外又是一个特别经常用的一个类型了，当然数组在其他的语言中都是不可缺少的属性，我们都知道不管 js 还是其他类的语言的数组都是数据的有序列表，但是在 javaScript 中的数组是有一定的区别的，具体的区别就是： js 中的数组保存的数据可以是任何类型的数据，比如，我可以在第一个位置来保存数字，第二个位置保存字符串，第三和第四保存一个对象都完全OK，同时我还可以非常方便的操作数组的大小...
详解ECMAScript typeof用法
typeof 返回变量的类型字符串值 、其中包括 “object”、“number”、“string”、“undefined”、“boolean”、 1、在变量只声明、却不初始化值 Or 在变量没有声明时 返回 “undefined” > var b undefined > typeof(b) undefined > typeof e undefined >2、所有引用对象，返回”object“ > var a = new Object() undefined > typeof a object > var b = new String("str") undefined > typeof b object > var c = new Boolean(...
JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）【图】
一、JavaScript简介 JavaScript是一种解释执行的脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型，它遵循ECMAScript标准。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，主要用来给HTML增加动态功能。 几乎所有主流的语言都可以编译为JavaScript，进而能够在所有平台上的浏览器中执行，这也体现了JavaScript的强大性和在Web开发中的重要性。如Blade：一个Visual Studio扩展，可以...
ECMAScript6变量的解构赋值实例详解
数组的解构赋值 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring） var [a, b, c] = [1, 2, 3];这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。 下面是一些使用嵌套数组进行解构的例子 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3]; x...
ECMAscript 变量作用域总结概括【图】
使用var操作符声明的变量与未使用var操作符声明的变量区别 Javascript是遵循ECMAScript标准下的一个产物，自然ECMAScript的标准其要遵循 ECMAScript的变量是松散类型的,即可以用来保存任何类型的数据(未经初始化的变量，会保存一个特殊值undefined). 未使用var操作符声明function test() {message=hi;console.log(message);}console.log(message);未使用var操作符声明的变量message为全局变量，未调用test()方法， message就属于未...
详解ECMAScript6入门--Class对象
面向对象的语言有一个标志，那就是他们都有类的概念，通过类可以创建任意多个具有相同属性和方法的对象。 ECMAScript5中没有类的概念，因此它的对象和基于类的语言中的对象有所不同。 Javascript生成对象的传统方法是通过构造函数来实现的 function Person(name, age){this.name = name;this.age = age;this.sayHello = function(){return "Hello "+ this.name;} }var person = new Person("dahan",18); person.sayHello(); //Hell...
ES6(ECMAScript 6)新特性之模板字符串用法分析
本文实例讲述了ES6(ECMAScript 6)新特性之模板字符串用法。分享给大家供大家参考，具体如下： ES6引入了一种新型的字符串字面量语法，我们称之为模板字符串（template strings）。除了使用反撇号字符 ` 代替普通字符串的引号 或 " 外，它们看起来与普通字符串并无二致。在最简单的情况下，它们与普通字符串的表现一致： context.fillText(`Ceci nest pas une cha?ne.`, x, y);但我们不能说：“原来只是被反撇号括起来的普通字符串...
JS模拟实现ECMAScript5新增的数组方法
ECMAScript5 新增了十个数组方法，这些方法只有在ie9及以上浏览器中可以被使用，下面是对于这些方法的模拟实现。 一、Array.isArray(element)该方法用于判断传入的对象是否为数组类型，返回true和false。 Array.newIsArray = function(element){return Object.prototype.toString.call(element).slice(8,-1).toLocaleLowerCase() === array; }二、.indexOf(element)该方法用于查找传入对象在数组中的位置，并返回该位置，若没有找到...
ECMAScript6轮播图实践知识总结
模板字符串 这是我非常喜欢的ES6的特点之一，非常直观的反应出变量和字符串之间的关系，在ES5中，如果我们想在字符串中添加变量，需要用如下写法： animate(box, translate(- + itemWidth * num + px,0), 1000, function () {box.style.transitionDuration = ;box.style.transform = translate(-800px,0);flag = true; });现在用ES6的模板字符串，可以直接把字符串和变量相结合，更加易懂。 animate(box, `translate(-${itemWidth*...
ECMAScript6快速入手攻略
简介 ECMAScript 6 是JavaScript的下一个标准，正处在快速开发之中，ECMAScript 6 的目标，是使得JavaScript可以用来编写复杂的应用程序、函数库和代码的自动生成器（code generator）。最新的浏览器已经部分支持ECMAScript 6 的语法，ECMAScript 6 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。 1. let、co...
深入理解ECMAScript的几个关键语句
写在前面 在这一章中我们聊一聊ECMAScript中的几个关键语句switch、for-in、label等语句，加深我们对它们的理解和认识。首先从最常见的说起。 while和for while和for是很常规的语句，无论是在JavaScript还是C还是其他编程语言中。而且在编程中我们较常用的也是for，for用起来更灵活，更简单，所以有些人可能就会产生这样一种误解： for比while更强大，能做到while做不到的一些事情。 其实我们稍微想想while和for语句的语法应用，我...
实例详解ECMAScript5中新增的Array方法
ECMAScript5 给出了一系列新的API接口，这些接口在新的浏览器中大部分是被支持的，IE9，Chrome，FirFor都支持，也有少量API不是所有浏览器都支持，以下内容仅介绍大部分被支持的API。利用新的API我们可以设计出非常靠谱的类，而且还能保持原有的javaScript的风格。 ECMAScript5标准发布于2009年12月3日，它带来了一些新的，改善现有的Array数组操作的方法。（注意兼容性）在ES5中，一共有9个Array方法：http://kangax.github.io/co...
ECMAScript6块级作用域及新变量声明（let）
很多语言中都有块级作用域，但JS没有，它使用var声明变量，以function来划分作用域，大括号“{}” 却限定不了var的作用域。用var声明的变量具有变量提升（declaration hoisting）的效果。 ES6里增加了一个let，可以在{}， if， for里声明。用法同var，但作用域限定在块级，let声明的变量不存在变量提升。 示例1: 块级作用域 if function getVal(boo) {if (boo) {var val = red// ...return val} else {// 这里可以访问 valreturn n...
ECMAScript6中Set/WeakSet详解【图】
ES6里加入了一个新数据解构Set，和Java的Set一样，它里面不存放重复的元素。Set实现为一个类，使用时需要先new。 var s1 = new Set() s1.add(1) s1.add(2) s1.add(3) s1.add(1)var s2 = new Set() s2.add(a) s2.add(a)// 输出1，2, 3 for (var i of s1 ) {console.log(i) } // 输出a for (var i of s2 ) {console.log(i) }上面用Set的add方法添加元素，重复添加的，不会存进去。 Set构造器还可以接受数组作为参数传入 var s3 = new...
ECMAScript6新增值比较函数Object.is【图】
在这之前我们比较值使用两等号 “==” 或 三等号“===”， 三等号更加严格，只要比较两方类型不同立即返回false。 另外，有且只有一个值不和自己相等，它是NaN现在ES6又加了一个Object.is，让比较运算的江湖更加混乱。多数情况下Object.is等价于“===”，如下 1 === 1 // true Object.is(1, 1) // truea === a // true Object.is(a, a) // truetrue === true // true Object.is(true, true) // truenull === null // true Object.i...
ECMAScript6中Map/WeakMap详解【图】
JS的对象本身就是个键值结构，ES6为什么还需要加Map呢，它与普通的JS对象有何区别？ 一、Map 1. Map构造器 先看Map的简单用法 // 字符串作为key， 和JS对象类似 var map = new Map() // set map.set(name, John) map.set(age, 29) // get map.get(name) // John map.get(age) // 29 这么对代码，看起来确实没有JS对象简洁 但Map的强大之处在于它的key可以是任意类型 // 对象作为key演示 var xy = {x: 10, y: 20} // 坐标 var wh =...
ECMAScript中函数function类型
说起来ECMAScript中上面最有意思，我想那莫过于函数了，有意思的根源，则在于函数实际上是对象。每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。函数通常是使用函数声明语法定义的，如下例子：代码如下: function sum(num1,num2) { return num1+num2; }这与下面使用函数表达式定义函数的方式几乎相差无几。代...
ECMAScript5(ES5)中bind方法使用小结
一直以来对和this有关的东西模糊不清，譬如call、apply等等。这次看到一个和bind有关的笔试题，故记此文以备忘。bind和call以及apply一样，都是可以改变上下文的this指向的。不同的是，call和apply一样，直接引用在方法上，而bind绑定this后返回一个方法，但内部核心还是apply。 直接看例子：代码如下: var obj = { a: 1, b: 2, getCount: function(c, d) { return this.a + this.b + c + d; } }; window.a = window...
ECMAScript 5中的属性描述符详解
属性描述符是ES5中新增的概念，其作用是给对象的属性增加更多的控制。 Object.defineProperty 要研究属性描述符，首先要谈谈 Object.defineProperty 方法。这个方法的作用是给对象定义新属性或修改已存在的属性。其原型如下：代码如下: Object.defineProperty(obj, prop, descriptor)使用示例：代码如下: var obj = { }; Object.defineProperty(obj, attr, { value: 1 });上面一段代码给obj对象增加了一个名为attr的属性，值为1。相...
ECMAScript 5严格模式（Strict Mode）介绍
严格模式（Strict Mode）是ECMAScript 5的新特性，它允许你把整个程序，或者某个函数，放置在“严格”的操作语境中。这种严格的语境会防止某些特定的操作并抛出更多的异常。 虽然ECMAScript 5对ECMAScript 3是向下兼容的，但是在严格模式下，所有在ECMAScript 3中不赞成使用的特性都被禁用（或抛出错误）而不是兼容。 启用严格模式有以下好处： 1.捕获一些编程错误，并抛出异常。 2.阻止进行一些相对“不安全”的操作（例如访问全局...
ECMAScript 6即将带给我们新的数组操作方法前瞻
本文介绍ECMAScript 6即将带给我们新的数组操作方法，以及在怎样在现有浏览器应用这些新的数组特性。 Note: 我将使用交替使用构造器(constructor)和类(class)两个术语。 类方法 数组(Array)自身所拥有的方法。 Array.from(arrayLike, mapFunc?, thisArg?) Array.from()的基本功能是，转换两种类型的对象成数组。 类数组对象(Array-like objects) 该类对象有长度与索引的属性。DOM操作符的结果即属于该类，如document.getElementsBy...
在NodeJS中启用ECMAScript 6小结（windos以及Linux）
在NodeJS中启用ES6 (harmony) 版本： 开始吧， Linux下启用 来源： http://h3manth.com/new/blog/2013/es6-on-nodejs/ Node version : v0.11.6 先来看一看版本 harm ;) : $ node --v8-options | grep harm--harmony_typeof (enable harmony semantics for typeof)--harmony_scoping (enable harmony block scoping)--harmony_modules (enable harmony modules (implies block scoping))--harmony_symbols (enable harmony symbols ...
ECMAScript6的新特性箭头函数（Arrow Function）详细介绍
箭头函数是ECMAScript 6最受关注的更新内容之一。它引入了一种用「箭头」（=>）来定义函数的新语法，它…它碉堡了~。箭头函数与传统的JavaScript函数主要区别在于以下几点：1.对 this 的关联。函数内置 this 的值，取决于箭头函数在哪儿定义，而非箭头函数执行的上下文环境。2.new 不可用。箭头函数不能使用 new 关键字来实例化对象，不然会报错。3.this 不可变。函数内置 this 不可变，在函数体内整个执行环境中为常量。4.没有arg...
你的 mixin 真的兼容 ECMAScript 5 吗?
我最近在与客户合作的项目中，需要充分利用的 ECMAScript 5，在此我遇到一个非常有趣的问题。 该问题源于一个非常常见的模式： mixin ， 也就是在 JavaScript 中把一个对象的属性或者方法 mixin 到另一个。 大多数 mixin 的功能看起来像这样：代码如下:function mixin(receiver, supplier) { for (var property in supplier) { if (supplier.hasOwnProperty(property)) { receiver[property] = supplier[prop...