ECMAScript 6的一些新特性2

看下ES6数组的一些新特性, 把类数组转换为真正的数组

    ‘use strict‘;

    var aDiv = document.getElementsByTagName(‘div‘);

    var eles = Array.from( aDiv );

    console.log( eles );

同样的方法也可以转字符串

    ‘use strict‘;

    var str = ‘abcd‘;

    var eles = Array.from( str );

    console.log( eles );

数组的实例方法arr.find()

    ‘use strict‘;

    /*
        arr.find()
        找出第一个符合条件的数组元素
        参数:
        1 回调函数
        2 回调函数内this的指向

        遍历整个数组,遍历过程中调用回调函数,如果回调函数的返回值为true,则返回当前正在遍历的元素

        如果所有元素都不符合条件则返回undefined
    */

    var arr = [1,2,3,4,5];

    var n = arr.find(function(value, index) {
        return value > 3;
    });

    console.log( n );

    // 只返回第一个符合的条件

实例方法arr.findIndex()

    ‘use strict‘;

    /*
        arr.findIndex()
        找出第一个符合条件的数组元素的位置
        参数:
        1、回调函数
        2、回调函数内this的指向

        遍历整个数组,遍历过程中调用回调函数,如果回调函数的返回值卫true,则返回该数组元素的位置

        如果所有元素都不符合条件则返回-1
    */

    var arr = [1,2,3,4,5];

    var n = arr.findIndex( function(value, index){

        return value > 2;

    } );

     console.log( n );

arr.fill();

    ‘use strict‘;

    /*
        arr.fill()

        用来填充数组
        参数:
        1、填充的内容
        2、起始位置
        3、结束位置

    */

    var arr = [1,2,3,4,5];

    arr.fill(6,2,4);

    console.log( arr );

for of 方法

/*
        for of 

        与for in类似,for in是遍历key值,for of是遍历value值

        可以遍历数组,字符串,但是不能遍历对象

    */

    var arr = [1,2,3,4,5];

    for(var value of arr){
        console.log( value );  // 1 2 3 4 5
    };

  // keys()方法

   var arr = [1,2,3,4,5];

   for(var key of arr.keys() ){
     console.log( key );
   };

   // 一起遍历(解构赋值)

   var arr = [1,2,3,4,5];

   for(var [key, value] of arr.entries() ){
     console.log( key, value );
   };

 

数组推导

    ‘use strict‘;

    /*
        数组推导

        ES6提供简洁写法,允许直接通过现有数组生成新数组,这被称为数组推导(array comprehension)

        貌似chrome不支持,用火狐就好了

    */

    var arr = [1,2,3];

    var arr2 = [for(value of arr) value * 2];

    console.log(arr2);

对象的简洁表示法

    /*
        对象的简洁表示法
    */

    function fn (x, y){

        x++;
        y++;

        return {x, y};
    };

    console.log( fn(1,2) );

  // 对象也有简洁写法

   var obj = {
     name : ‘piaomiao‘,
     getName(){
       return this.name;
     }
   };

   console.log( obj.getName() );

/*
  也可以把名字用中括号括起来
*/

var sex = ‘男‘;

var person = {
  name : ‘piaomiao‘,
  [sex] : false,
  [‘get‘+‘Name‘](){
    return this.name;
  }
};

console.log( person.getName() );

console.log( person[sex] );

对象另外的一些方法

    /*
        对象另外的一些方法
    */

    // 判断两个值是否相等 比===强大一点
  console.log( 0 === -0);  // true  console.log( Object.is(0, -0) );  // false  console.log(NaN, NaN);  // true
时间: 2024-10-25 20:09:04

ECMAScript 6的一些新特性2的相关文章

前端开发者进阶之ECMAScript新特性--Object.create

前端开发者进阶之ECMAScript新特性[一]--Object.create Object.create(prototype, descriptors) :创建一个具有指定原型且可选择性地包含指定属性的对象 参数:prototype 必需.  要用作原型的对象. 可以为 null.descriptors 可选. 包含一个或多个属性描述符的 JavaScript 对象."数据属性"是可获取且可设置值的属性. 数据属性描述符包含 value 特性,以及 writable.enumerab

Atitit js es5 es6新特性 attilax总结

1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 基本chrome ff 360se8全面支持了2 2. ECMAScript 2015(ES6)的十大特征 – WEB前端开发 - 专注前端开发,关注用户体验.html2 1.1. JavaScript发展时间轴: 1.1995:JavaScript诞生,它的初始名叫LiveScript. 2.1997:ECMAScript标准确立. 3.1999:ES3出

TypeScript系列1-1.5版本新特性

1. 简介 随着PC端快速向移动端迁移,移动(体验)优先的概念也越来越响.由于ReactJS目前移动端仅仅支持iOS,因此移动端Web开发框架只能选择: AngularJS/Angula2 + Ionic框架 + Cordova.想要学习好Angula2以及阅读其代码, 就必须了解和学习TypeScript,也因此需要学习好ES6以及Web Component.近期将开始学习TypeScript语言. 下面先看看TypeScript语言的发展: 鉴于JavaScript这种脚本语言很难应用于大规

Atitit nodejs5 nodejs6  nodejs 7.2.1  新特性attialx总结

Atitit nodejs5 nodejs6  nodejs 7.2.1  新特性attialx总结 1.1. Node.js 4.0.0 已经发布了 .这是和 io.js 合并之后的首个稳定版本,它带来了一系列的新特性,支持 ES 6的大部分特性1 1.2. 10月29日发布了Node.js 5.0,至此Node.js 4.0进入了长期服务支持阶段(LTS),5.0成为稳定版本.Node.js 5.x系列采用快速发布模式,计划1~2周完成一个发布.1 1.3. Node.js 6覆盖了93%的

ES6的新特性-让前后端差异越来越小

ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中. 潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS的风采. 1.箭头操作符 如果你会C#或者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新特性学习

ES6是ECMAScript 6的缩写简称,2015 年 6 月,ECMAScript 6 正式通过,成为国际标准.ES6带来的新功能涵盖面很广,还有很多很便利的功能.下面来记一下我接触到的几个新特性. 1.模板字符串,用反单引号包起来,可以实现字符串回车换行,也可以在字符串里拼接变量,${变量},很方便使用. var name="fanfan"; var age="20"; console.log("Hello,My name is "+nam

es2017新特性

2017年6月底es2017不期而至; 截止目前es8是ecmascript规范的第九个版本:自es2015开始ECMA协会将每年发布一个版本并将年号作为版本号:算了 直接看下es2017的新特性: 1.异步函数 ECMAScript 2017功能" 异步函数 "由Brian Terlson提出.其是Generator的语法糖,简单讲就是用async关键字代替了*,用await(只能在异步函数中使用)关键字代替了yield,并且不需要next调用直接全部执行换言之没有惰性求值如下 声明

ECMAScript各个版本简介及特性

术语 ECMAScript Sun(现在的Oracle)公司持有着"Java"和"JavaScript"的商标.这就让微软不得不把自己的JavaScript方言称之为"JScript".然后,在这门语言被标准化的时候,就必须使用一个与二者都不同的名字."ECMAScript"就这样诞生了,这个名字的来由是因为执行标准化的组织是Ecma国际.通常来说,术语"ECMAScript"和"JavaScri