ES6数组和对象的扩展

es6数组的扩展

  1. 扩展运算符

扩展运算符是对具有Iterator 接口的对象,都可以使用扩展运算符

  1. Array.from()

用于将两类对象转化为真正的数组 1.类似数组的对象(只要据有length属性, 都可以被转化为数组) 2.可遍历(iterable)的对象

  1. Array.of()

将一组值转化为数组

  1. find和findIndex

find方法,用于找出第一个符合条件的数组成员,没有找到会返回undefiend,findIndex方法返回的是第一个符合条件成员的位置, 如果找不到返回-1, find和findIndex都可以接受第二个参数,用来绑定回调函数的this

  1. 数组实例的fill()

fill方法使用给定值,填充一个数组。用于初始化数组值,接受第二个和第三个参数,用于指定开始和结束位置

  1. 数组实例的方法entries() keys()和values()

这三个方法提供新的方法,用于遍历数组, 都返回一个遍历器对象,可以用for..of循环进行遍历 keys是对键名的遍历,values是对键值的遍历 entries是对键值对的遍历

  1. 数组实例的includes()

表示某个数组是否包含给定的值, 返回true,否则返回false

Object对象的新增方法

  1. 属性的简洁表示

es6允许直接写入变量和函数,最为对象的属性和方法 主要使用: 1.函数返回值, 2. module.exports导出 3. 属性的setter和getter

var obj = {
 foo, // 属性
 methods() { // 方法
 }
}

  

  1. 属性的遍历

es6一共5种方法可以遍历对象的属性

  • for..in: 循环遍历对象自身和继承的可枚举变量 (不含Symbol属性)
  • Object.keys(obj): 返回一个数组,包含对象自身所有可枚举属性的键名
  • Object.getOwnPropertyNames(obj): 返回一个数组,包含对象自身的所有属性的键名
  • Object.getOwnPropertySymbols(obj): 返回一个数组,包含自身所有的symbol属性的键名
  • Reflect.ownKeys(): 返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举
  1. super关键字

js中this的关键字总是指向函数所在的当前对象,es6新增了另一个类似的关键字super,指向当前对象的原型对象,super只能用在对象的方法中,而且是方法的简写属性

 const proto = {
   foo: ‘hello‘
  }
  const obj = {
   foo: ‘world‘,
   find() {
    return super.foo  // 访问obj的原型属性的foo属性
   }
  }
 Object.setPrototypeOf(obj, proto) // 设置obj的原型为proto
 obj.find() // ‘hello‘

  

  1. 对象的新增方法

同值相等的算法, 用来比较两个值严格相等 Object.is(‘foo‘, ‘foo‘) // true Object.is({}, {}) // false

  • Object.assign(target, source)

对象的合并,将原对象所有的可枚举属性,复制到目标对象上

  • 常见用途

    • 为对象添加属性
    class point {
       constructor (x, y) {
        Object.assign(this, {x, y})  // 将属性x和y添加Point类的对象实例上
       }
      }
    

      

    • 为对象添加方法
     Object.assign(SomeClass.prototype, {  // 为对象原型上添加方法
      someMethod(arg1, arg2){}
      antherMethod() {}
     })
    

      

    • 克隆对象
    function clone(origin) {
       return Object.assign({}, origin)
      }
      function clone(origin) {
         let originProto = Object.getPrototypeOf(origin);
         return Object.assign(Object.create(originProto), origin);
       }
    

      

    • 合并多个对象 const merge = (target, ...sources) => Object.assign(target, ...sources)
  1. __proto__属性,Object.setPrototypeOf() Object.getPrototypeOf()

js语言对象继承是通过原型链实现的,ES6提供了更多的原型链方法 __proto__属性,Object.getPrototypeOf() 获取原型prototype属性 Object.setPrototypeOf(obj, proto), Object.create() 设置原型属性

  1. Object.keys() Object.Values() Object.entries()

返回对象属性组成的数组

原文地址:https://www.cnblogs.com/kuishen/p/11113189.html

时间: 2024-11-05 23:34:12

ES6数组和对象的扩展的相关文章

ES6中对对象的扩展

ES6允许直接写入变量和函数作为对象的属性和方法.这样的书写更加简洁. ES6允许在对象中只写属性名,不写属性值.这时,属性值等于属性名所代表的变量. function f(x , y){ return {x ,y}; } f(1,2)// Object {x:1,y:2} function getPoint(){ var x=1; var y=10; return {x,y}; } getPoint()//{x:1,y:10} js语言定义对象的属性有两种方法.obj.foo=true;obj

ES6——内置对象的扩展

字符串的扩展 //模版字符串 let flag=true; let hml=`<ul> <li> <span></span> <span></span> <span class="${flag?'show':'hide'}"></span> </li> </ul>`; console.log(html); 1.repeat let str1="a"

ES6 之 Math对象的扩展

ES5 http://www.w3school.com.cn/jsref/jsref_obj_math.asp ES6 Math.trunc() - 取整 console.log(Math.trunc(3.5)); // 3 console.log(Math.trunc(-3.5)); // -3 // 对于非数值,Math.trunc() 内部使用Number()方法咸江奇转化为数值 console.log(Math.trunc('123.456')); //123 console.log(M

ES6 入门系列 - 函数的扩展

1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello World 上面代码检查函数log的参数y有没有赋值,如果没有,则指定默认值为World.这种写法的

ES6 常用总结——第三章(数组、函数、对象的扩展)

1.1. Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map). 下面是一个类似数组的对象,Array.from将它转为真正的数组. let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3}; // ES5的写法var arr1 = [].slice.call(arrayLike);

ES6 - Note3:数组、对象与函数的扩展

一.数组的扩展,ES6在数组扩展了一些API,以实现更多的功能 1.Array.from:可以将类数组和可遍历的数据结构转换成真正的数组,如下所示 var a = { '0':1,'1':1,length:2 }; var arr = Array.from(a); console.log(arr) Array [ 1, 1 ] ---------------ES5的实现----------- var arr = [].slice.call(a); console.log(arr) Array [

ES6数组扩展

前面的话 数组是一种基础的JS对象,随着时间推进,JS中的其他部分一直在演进,而直到ES5标准才为数组对象引入一些新方法来简化使用.ES6标准继续改进数组,添加了很多新功能.本文将详细介绍ES6数组扩展 创建数组 在ES6以前,创建数组的方式主要有两种,一种是调用Array构造函数,另一种是用数组字面量语法,这两种方法均需列举数组中的元素,功能非常受限.如果想将一个类数组对象(具有数值型索引和length属性的对象)转换为数组,可选的方法也十分有限,经常需要编写额外的代码.为了进一步简化JS数组

数组的复制及ES6数组的扩展

一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只能用变通方法来复制数组. const a1 = [1, 2]; const a2 = a1.concat(); a2[0] = 2; a1 // [1, 2] //使用ES6语法会防止这种现象出现 const a1 = [1, 2]; // 写法一 const a2 = [...a1]; // 写法

web前端之es6对象的扩展

1.属性的简洁表示法 2.属性名表达式 表达式作为对象的属性名 3.方法的 name 属性 例如:函数的name 属性,返回函数名. 4.Object.is() ES 比较两个值是否相等,只有两个运算符,相等运算符,相等运算符(==) 和严格相等运算符(===) 5.Object.assign() Object.assign 方法用于对象的合并,将源对象的所有的可枚举属性,赋值到目标对象 例如; 6.属性的可枚举行和遍历 可枚举性 描述对象的enumerable 属性,称为“可枚举属性” 如果该