ES6基础之数组和对象的拓展实例详解

网络编程 2024/11/16 佚名

3 1 2

本文实例讲述了ES6基础之数组和对象的拓展。分享给大家供大家参考，具体如下：

数组的扩展

1.拓展运算符（'...'），它相当于rest参数的逆运算，用于将一个数组转换为用逗号分隔的参数序列；

console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

2.如果扩展运算符后面是一个空数组，则不产生任何效果；

[...[], 1]
// [1]

3.常见的拓展运算符的应用：

//合并数组
let arr1 = [1,2];
let arr2 = [3,4];
let arr3 = [5,6];
let newArr = [...arr1 , ...arr2 , ...arr3]; //等同于ES5 [].concat( arr1 , arr2 , arr3 )
// [1,2,3,4,5,6]
//与解构赋值结合（用于生成数组）
const [ val , ...rest] = [1, 2, 3, 4, 5];
val // 1
rest // [2, 3, 4, 5]
//将字符串转为真正的数组
let str = 'mine';
[...str] // ["m","i","n","e"]
//可以将类数组转化成正真的数组
 let arrayLike = {
  0 : 'div.class1' ,
  1 : 'div.class2' ,
  2 : 'div.class3' ,
  length : 3
}
console.log([...arrayLike]) // ["div.class1","div.class2","div.class3"]

4.新增 Array.from 方法，可以将类似数组的对象（array-like object）和可遍历（iterable）的对象转化成真正的数组；该方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组；

let arr = [ 1 , 2 , 3];
arr.map( x => x * x);
// [ 1 , 4 , 9 ]
Array.from(arr, (x) => x * x)
// [ 1 , 4 , 9 ]

5.新增 Array.of 方法，用于将一组值，转换为数组（该方法基本上可以用来替代Array()或new Array()，避免出现参数不同而导致的重载）；

//传统Array
Array() // []
Array(3) // [, , ,]
Array(1, 2, 3) // [1, 2, 3]
//Array.of
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

6.数组实例方法 find() 用于找出第一个符合条件的数组成员，该方法的参数是一个回调函数，该回调函数可以接收三个参数，依次是当前元素，当前元素索引，数组本身；如果查找成功，返回符合条件的第一个成员，如果没有符合条件的成员，则返回undefined；

var arr = [1, 2, 4, 5];
var r = arr.find(function( element , index , self ){
  return element % 2 == 0;
})
r // 2

7.数组实例方法 findIndex() , 该方法的参数与 find() 一样，不同的是该方法返回的是第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1;

var arr = [1, 2, 4, 5];
var r = arr.find(function( element , index , self ){
  return element % 2 == 0;
})
r // 1

ps：find() 和 findIndex() 这两个方法都可以发现NaN，弥补了数组的IndexOf方法的不足。

8.数组实例方法 includes() , 方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似;该方法接收两个参数，第一个参数是要查找的成员，第二个参数表示搜索的起始位置（如果为负数，则表示倒数的位置，如果大于数组长度，则会重置为从0开始）

[1, 2, 3].includes(2)   // true
[1, 2, 3].includes(4)   // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true

对象的拓展

1.ES6 允许直接写入变量和函数，作为对象的属性和方法(在对象中，直接写变量时，属性名为变量名, 属性值为变量的值)

//属性简写
var foo = 'bar';
var obj = {foo};
obj // { foo : "bar" }
//变量简写
var mine = {
  foo ,
  method(){
    //to do
  }
}

2.ES6 允许字面量定义对象时，用表达式作为对象的属性名或者方法名，即把表达式放在方括号内;

let propKey = 'foo';
let obj = {
 [propKey]: true,
 ['a' + 'bc']: 123,
 ['s' + 'ay'](){
  console.log('hello world')
 }
}
obj // {"foo":true,"abc":123}
obj.say() // 'hello world'

3.新增 Object.is() 方法，用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致，不同之处在于一是+0不等于-0，二是NaN等于自身。

+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

4.新增 Object.assign 方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target），第一个参数是目标对象，后面的参数都是源对象；

var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

ps:如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

该方法不能用于目标对象是 undefined 和 null 上，会报错；

5.Object.assign 方法实行的是浅拷贝，而不是深拷贝。如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用，修改会对原对象造成影响；

var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b   // 2

6.Object.assign 方法常用于以下几个方面

为对象添加属性

var _this = {};
Object.assign( _this , { name : 'mine' } );
_this // { name : 'mine' }

为对象添加方法

var _this = {};
Object.assign( _this , { func(){ console.log('hello world') } } );
_this.func() // hello world

克隆对象

var _this = { name : 'mine' };
Object.assign( {} , _this );

合并多个对象

var _this = {};
var source1 = { name : 'mine' };
var source2 = { mail : 'your' };
Object.assign( _this , source1 , source2 );
_this // {"name":"mine","mail":"your"}

为属性指定默认值

var default = { name : 'mine' , mail : 'your' }
function processContent(options) {
options = Object.assign({}, default , options);
// to do
}

7.Object.setPrototypeOf方法的作用与_proto_相同，用来设置一个对象的prototype对象，返回参数对象本身。它是 ES6 正式推荐的设置原型对象的方法。

let proto = {};
let obj = { x: 10 };
Object.setPrototypeOf(obj, proto);
proto.y = 20;
proto.z = 40;
obj.x // 10
obj.y // 20
obj.z // 40

8.Object.getPrototypeOf()方法，该方法与Object.setPrototypeOf方法配套，用于读取一个对象的原型对象。

9.Object.keys()，Object.values()，Object.entries() 除第一个外，后面两个是ES6新增的方法，用于遍历对象，返回都是数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键、值和键值对数组。

let obj = { a : 1 , b : 'hello' }
Object.keys( obj );   // ["a","b"]
Object.values( obj );  // [1,"hello"]
Object.entries( obj ); // [["a",1],["b","hello"]]

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

ES6,数组,对象,拓展

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“ES6基础之数组和对象的拓展实例详解”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

ES6基础之数组和对象的拓展实例详解

ES6基础之 Promise 对象用法实例详解

node express使用HTML模板的方法示例

评论“ES6基础之数组和对象的拓展实例详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

ES6基础之数组和对象的拓展实例详解

ES6基础之 Promise 对象用法实例详解

node express使用HTML模板的方法示例

评论“ES6基础之数组和对象的拓展实例详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存