ES6对象及数组扩展

最新推荐文章于 2024-09-17 14:37:45 发布
最新推荐文章于 2024-09-17 14:37:45 发布
阅读量801 收藏 16
点赞数 15
文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kang_k/article/details/136786562
版权

数组扩展

一、创建数组

ES 6 之前：
1、通过数组字面量创建： let arr = ['a', 'b'];
2、通过构造函数创建：let arr = new Array();

let arr = new Array(2);   （含义：创建一个长度为2的空数组）
console.log(arr.length);  // 3
console.log(arr[0]); //   undefined
console.log(arr[1]); //   undefined

let arr = new Array('2');  （含义：创建只有一个元素为 '2' 的数组）
console.log(arr.length);  // 1 
console.log(arr[0]);  // '2'

ES 6:
Array.of() 与Array 构造函数的工作机智类似，只是不存在单一数值型参数值的特例。无论有多少参数，无论参数是什么类型的， Array.of() 方法总会创建一个包含所有参数的数组。

let arr = Array.of(2);
console.log(arr.length);  // 1
console.log(arr[0]);   // 2 

let arr = Array.of('2');
console.log(arr.length);  // 1
console.log(arr[0]);   // '2'

eg:

function createArray (arrayCreator, value) {
    return arrayCreator(value);
}
let arr = createArray(Array.of, value);
function createArray (arrayCreator, value) {
    return arrayCreator(value);
}
let val = ['z','d','c'];
let arr = createArray(Array.of, val.toString());
console.log(arr); // ["z,d,c"]

二、Array.from() 方法可以接受 可迭代对象 或 类数组对象 作为第一个参数，返回值为一个新数组。

function doSomething () {
     var args = Array.from(arguments); // 类数组对象转化为准数组
}
/* Array.form() 方法也是通过this来确定返回数组的类型的 */

1、Array.from(arg, fun, obj)

{可迭代对象 | 类数组对象} arg
{Function} fun (可选)
{this} obj (可选，表示映射函数的this值)

function translate () {
    return Array.from(arguments, (value => value + 1))
}

let nums = translate(1,2,3,4);
console.log(nums); // [2, 3, 4, 5]
let helper = {
     diff: 'a',
     add (value) {
          return value + this.diff;   
     }
}
function translate () {
    return Array.from(arguments, helper.add, helper);   
}
let nums = translate(1, 2, 3, 4); // ["1a", "2a", "3a", "4a"]

/* 示例 translate 方法内传入 helper.add 作为转换用的映射函数，由于该方法使用来this.diff属性，因此需要为Array.from()方法提供第三个参数来指定this的值，从而无须通过调用bind()方法或其他方式来指定this的值了。 */

let helper = {
     diff: 'a',
     add (value) {
          return value + this.diff;   
     }
}
function translate () {
    return Array.from(arguments, helper.add);  // 如果没有映射函数的对象，会报下面的  [NaN, NaN, NaN, NaN]
}

let nums = translate(1, 2, 3, 4); // [NaN, NaN, NaN, NaN]

用 Array.from() 转换可迭代对象

let numbers = {
    *[Symbol.iterator]() {
        yield 1;
        yield 2;
        yield 3;
    }
}
let newNums = Array.from(numbers, (value) => value + 1);
console.log(newNums);  // 2, 3, 4

###三、find() 方法 和 findIndex() 方法 VS indexOf() 方法和lastIndexOf()方法

以上两个方法都接受两个参数：
1、一个是回调函数；
执行回调函数时可以传人 3 个参数。与传人 map() 和 forEach() 方法的参数相同。回调函数应返回 true，一旦回调函数返回true，find() 方法和 findIndex() 方法都会立即停止搜索数组剩余的部分。
a、数组中的某个元素
b、该元素在数组的索引index
c、数组本身
2、另一个是可选参数，用于指定回调函数中的 this 的值。

let arr = [2, 4, 6, 8, 10];
console.log(arr.find(value => value > 6))
console.log(arr.findIndex((value, index) => value > 2 && index > 2))  // index 为遍历到当前值的索引

四、fill() 方法

fill(val, startIndex, endIndex)
{value} val (必选，要填充的值)
{Number} startIndex (可选，开始索引)
{Number} endIndex (可选，结束索引，但不包括结束索引的值)

fill() 方法可以用指定的值填充一至多个数组元素。
1、fill(val) 当传人一个值时，fill() 方法会用这个值重写数组中的所有值。
2、fill(val, startIndex, endIndex)
1、eg:

let arr = [2, 4, 6, 8, 10];
arr.fill(1);
console.log(arr); // [1, 1, 1, 1, 1]
arr.fill('a');
console.log(arr); // ["a", "a", "a", "a", "a"]

2、eg:

let arr = [2, 4, 6, 8, 10];
arr.fill('q', 2);
console.log(arr); // [2, 4, "q", "q", "q"]
arr.fill('aa', 3, 4);
console.log(arr); // [2, 4, "q", "aa", "q"]

3、eg:

let arr = [2, 4, 6, 8, 10];
arr.fill('ccc', -3, -1);
console.log(arr); [2, 4, "ccc", "ccc", 10]
/* 如果startIndex 或者 endIndex为负值， 那么这些值会与数组的length属性 相加 来作为最终的索引位置。
   eg: 如果 startIndex 为 -1，那么索引的值实际为 arr.length-1。 */

五、copyWithin() 方法，从数组中复制元素的值。可以同时改变数组中的多个元素。

copyWithin(startFillIndex, startCopyIndex, stopCopyIndex)
{ Number } startPasteIndex (必选，开始填充的索引)
{Number} startCopyIndex (可选，开始复制的索引)
{Number} endCopyIndex (可选，停止复制的索引，但不包括结束索引的值)

1、eg:

let arr = ['aa', 'bb', 'cc', 'dd', 'ee'];
arr.copyWithin(1);
console.log(arr);  // ["aa", "aa", "bb", "cc", "dd"]

2、eg:

let arr = ['aa', 'bb', 'cc', 'dd', 'ee'];
arr.copyWithin(1, 2);
console.log(arr); // ["aa", "cc", "dd", "ee", "ee"]

3、eg:

let arr = ['aa', 'bb', 'cc', 'dd', 'ee'];
arr.copyWithin(1, 2, 4);
console.log(arr); // ["aa", "cc", "dd", "dd", "ee"]

4、eg:

let arr = ['aa', 'bb', 'cc', 'dd', 'ee'];
arr.copyWithin(1, -3, -1);
console.log(arr); // ["aa", "cc", "dd", "dd", "ee"]
/* 如果startCopyIndex 或者 endCopyIndex为负值， 那么这些值会与数组的length属性 相加 来作为最终的索引位置。eg: 如果 startCopyIndex 为 -1，那么索引的值实际为 arr.length-1。 */

对象扩展

对象的类别：
1、普通对象 具有JavaScript对象所有的默认内部行为
2、特异对象 具有某些与默认行为不符的内部行为
3、标准对象 Array、Date等。标准对象既可以是普通对象，也可以是特异对象。
4、内建对象 脚本开始执行时存在于JavaScript执行环境中的对象，所有标准对象都是内建对象

对象属性的简写：
ECMAScript 5 及更早的版本

function creatPerson (name, sex) {
    return {
       name: name,
        sex: sex
    }
}

ECMAScript 6 版本

function creatPerson (name, sex) {
    return {
       name，
        sex
    }
}

一、可计算属性名

let name = 'name'
let obj = {

    ['first' + name]: '郭',
    ['last' + name]: '志鹏'   
}
console.log(obj.firstname) // 郭
console.log(obj['first'+name]) // 郭

对象方法的简写：
ECMAScript 5 及更早的版本
（字面量对象写法）

let person = {
    name: '悟空',
    say: function () {
        console.log('打妖精！')
    }
}

ECMAScript 6
（字面量对象写法）

let person = {
    name: '悟空',
    say () {
        console.log('打妖精！')
    }
}

二、Object.is() 方法来弥补全等运算符的不准确运算。这个方法接受两个参数，如果这两个参数类型相同且具有相同的值，则返回true。

相等操作符（==）、不相等操作符（!=） 这两个操作符都会先转换操作数（称为 强制转型），然后再比较他们的相等性。
转换不同的数据类型时规则：

a、如果有一个操作数为 布尔值，比较前先将 布尔值 转换为 数值： false —> 0； true —> 1；
eg: false == 0; // true true == 1; // true true == 2; // false

b、如果有一个操作数为 字符串，另一个操作数为 数值，比较前先将 字符串—>数值。
eg: ‘2’ == 2; // true
c、如果有一个操作数为 对象，另一个操作数不是，则调用对象的 valueOf() 方法，用得到的基本类型值按照前面的规则进行比较。

d、null 和 undefined 是相等的。（要比较相等性之前，不能将 null 和 undefined 转换成其他的任何值）
eg: null == undefined; // true
e、如果有一个操作数是NaN，则相等操作符返回 false，不相等操作符返回 true。
eg: 5 == NaN; // false 5 != NaN; // true
f、即使两个操作数都是NaN，相等操作符返回 false。
eg: NaN == NaN // false NaN != NaN; // true ‘NaN’ == NaN; // false
g、如果两个操作数都是 对象，则比较他们是不是同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回 true；否则返回 false。

全等操作符（=）、不全等操作符（!） 不会进行转换操作数（称为 强制转型）后，再比较相等。

console.log(+0 == -0); // true  
console.log(+0 === -0); // true
console.log(Object.is(+0, -0)); // false

console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true

console.log(4 == 4); // true
console.log(4 === 4); // true
console.log(Object.is(4, 4)); // true

console.log(4 == '4'); // true
console.log(4 === '4'); // flase
console.log(Object.is(4, '4')); // false

三、Object.assign() 方法，一个对象接收来自另一个对象的属性和方法。 接受任意数量的对象，并按指定的顺序将 属性 复制到接收对象中。如果多个源对象有同名属性，则排位靠后的源对象会覆盖靠前的对象。

1、eg:

let receiver = {};
Object.assign(receiver, {
    type: 'js',
    name: 'javascript.js'
}, {
    type: 'java'
})
console.log(receiver.type); // java

2-1、eg:

let receiver = {
    age: 10
};
let obj = {
    type: 'as',
    name: 'action script'
}
Object.assign(receiver, obj)
console.log(receiver.type); // as
receiver.type = 'test';
console.log(obj.type); // "as"
console.log(receiver.type); // "test"

2-2、

let receiver = {
    age: 10
};
let obj = {
    type: 'as',
    name: 'action script'
}
let newObj = Object.assign({}, receiver, obj); /* 以空对象{}开头，可以避免更改 receiver 对象。 */
console.log(newObj);  // {age: 10, type: "as", name: "action script"}
console.log(receiver.type); // undefined
receiver.type = 'test';
console.log(obj.type); // "as"
console.log(receiver.type); // "test"

3、eg:

let obj = Object.assign({}, (function () { return {name: 'aaa', age: 34}} ()) );
console.log(obj);  //  {name: "aaa", age: 34}

4、eg:

let arr1 = [1, 2, 3]
let arr2 = ['name', 'age']
let obj = Object.assign([], arr1, arr2)
console.log(obj) // ["name", "age", 3]

5、eg:

let arr1 = [1, 2, 3]
let arr2 = ['name', 'age']
let obj = Object.assign({}, arr1, arr2)
console.log(obj) // {0: "name", 1: "age", 2: 3}

6、eg:

let obj1 = {name: 'admin', age: 13}
let obj2 = {name: 'zhangsan', sex: '男'}
let obj = Object.assign([], obj1, obj2)
console.log(obj) // [name: "zhangsan", age: 13, sex: "男"]
console.log(obj.length) // 0
obj.forEach(item => {
  console.log(item.name)  // 无法遍历出来
})

四、自有属性枚举顺序。ES 6 严格规定来对象的自有属性被枚举时的返回顺序，这会影响到 Object.getOwnPropertyNames() 方法及 Reflect.ownKeys 返回属性的方式，Object.assign() 方法处理属性的顺序也将随之改变。

自有属性枚举顺序的基本规则
    1、所有数字键按升序排序。
    2、所有字符串键按照他们被加入对象的顺序排序。
    3、所有 symbol 键按照他们被加入对象的顺序排序。

let obj = {

    a: 1,
    0: 1,
    c: 1,
    2: 1,
    b: 1,
    1: 1
};
​
obj.d = 1;
console.log(Object.getOwnPropertyNames(obj));  // ["0", "1", "2", "a", "c", "b", "d"]
console.log(Object.getOwnPropertyNames(obj).join('')); // 012acbd        (字符串)

提示：for-in 、 Object.keys() 方法和 JSON.stringify() 方法枚举的顺序是无序的。

五、增强对象原型

原型在对象创建时被指定的两种方法：（对象原型在实例化后保持不变）
1、通过构造函数创建对象
2、通过Object.create() 方法创建对象
ES 5：Object.getPrototypeOf() 方法来返回任意指定对象的原型，但缺少对象在实例化后改变原型的标准方法。
ES 6: Object.setPrototypeOf(objA, objB) 方法可以改变任意指定对象的原型。
objA: 被改变原型的对象
objB：替代第一个参数（objA）原型的对象

let person = {
    getGreeting () {
        return 'hello';
    }   
};
let dog = {
    getGreeting () {
        return 'this is a dog';
    }
}
// 以 person 对象为原型
let friend = Object.create(person);
console.log(friend.getGreeting()); // hello
console.log(Object.getPrototypeOf(friend) === person); // true

// 原型设置为 dog
Object.setPrototypeOf(friend, dog); /* friend: 被改变原型的对象     dog: 替代第一个参数（objA）原型的对象 */
console.log(friend.getGreeting()); // this is a dog
console.log(Object.getPrototypeOf(friend) === dog); // true

六、简化原型访问的 Super 引用：可以更便捷地访问 对象原型。

使用环境：既想重写 对象实例的方法，又需要调用与该对象实例方法同名的原型方法。

kang_k
关注
es6对象内嵌套数组解构
seimeii的博客
10-13 313
es6对象内嵌套数组解构
ES6之对象的扩展
BradenHan的专栏
05-19 1078
TOC?/TOC。
【前端】ES6：数值扩展、对象扩展、函数扩展
最新发布
weixin_45980065的博客
09-17 940
但是 fun 因为是箭头函数，所以 this 不指向 obj，而是指向 fun 的外层，就是 window。按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。按照我们之前的 this 指向来判断，两个都应该指向 obj。使用自己想要的参数替换原数组内容，但是会改变原来的数组。箭头函数是 ES6 里面一个简写函数的语法方式。将一组值转化为数组，即新建数组。方法判断两个值是否是相同的值。将类数组对象转换为真正数组。
ES6扩展
weixin_44898295的博客
05-08 194
ES6扩展 方法 说明 Number.isFinite() 判断一个值是不是有限的 Number.isNan() 判断一个值是不是NaN Number() 类型转换 Numbar.parseInt() 将字符串转化为整数 Numbar.parseFloat() 将字符串转化为小数 Numbar.isInteger() 判断一个数是不是一个整数 Number....
ES6的扩展
weixin_51331510的博客
01-06 263
1.ES6介绍？ ECMAScript和JavaScript： ECMA是标准，JS是实现； 类似于HTML5是标准，IE10、Chrome、FF都是实现； 换句话说，将来也能有其他XXXScript来实现ECMA； ECMAScript简称ECMA或ES； 目前版本： - 低级浏览器主要支持ES 3.1 - 高级浏览器正在从ES 5过渡到ES 6 es6： ECMAScript 6.0 的简称 ECMA-2015，是 JavaScript 语言的下一代标准。 ECMAScript： ECMA 是制
ES6对象的扩展及新增方法
hellogril前端库
01-11 264
1.属性的简洁表示法 ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。 const foo = 'bar'; const baz = {foo}; baz//{foo:'bar'} //等同于 const baz = {foo:foo} 上面代码表明，ES6允许在对象之中，直接写变量。这时，属性名为变量名，属性值为变量的值。下面是另一个例子。 function f(...
ES6中的数组扩展方法
09-01
在JavaScript的ES6版本中，引入了一系列增强数组处理的新特性，其中包括了“数组扩展方法”。这些方法极大地提高了数组操作的便捷性和灵活性，使得开发者能够更加高效地处理数组数据。本篇文章将深入探讨其中的两个...
ES5与ES6中的数组方法
qq_53277007的博客
07-12 387
目录ES5： 数组方法：ES6：数组创建：数组扩展方法：扩展运算符： ... concat（）：该方法不改变原数组
ES6 数组、对象的扩展
-ELZ-
02-04 336
数组的扩展 Array.from()：将类数组对象或可迭代对象转化为数组。 let allList = document.querySelectorAll('li'); console.log(allList); //NodeList(4)[li, li, li, li] console.log(Array.isArray(allList)); ...
新方法 ES6对象方法 es6数组常用的方法
weixin_70140069的博客
08-24 453
10、includes( )：数组原型的方法,查找一个数值是否在数组中，只能判断一些简单类型的数据，对于复杂类型的数据无法判断。filter()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素（注意：它不会对空数组检测，它不会改变原数组）5、findIndex( )：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。3、copyWithin(target，start(可选)，end(可选))：数组内数据的复制替换。9、entries( )：对键值对的遍历。
es6数组、对象的扩展
X_W123的博客
07-18 208
一、数组的扩展 ①Array.from() 用于将俩类对象转为真正的数组：类似数组的对象和可遍历的对象包括es6新增的数据结构Set和Map （1）类对相 ②Array.find() 数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。 ③Array.findIndex()数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是
ES6 — 对象扩展
webxiaoma
07-12 1518
今天来总结一下es6的对象扩展，最近一直在看es6, 感觉es6真的很好用，不过也看到过网上一些反面语言，可能因人而异，es6 的发展前景让我们拭目以待。一、对象属性和方法1.简写// 属性简写 var a = "first"; var b = {a}; console.log(b) // {a:"first"}//方法简写 var obj = { method (){ retrun
ES6对象的扩展
qq_31805885的博客
12-21 259
1. 属性名的简介表示法const foo = 'bar'; const baz = { foo, hello(){ console.log(this.foo); } }; baz.hello();//bar上面分别是对对象的属性和方法的2.属性名表达式const foo = ‘bar’; const baz = { [foo]:’foo’,
es6（数值的扩展）
可芭乐的博客
01-09 390
二进制和八进制表示法 二进制表达法 0b/0B 八进制表达法 0o/0O 以0b/0o为前缀的字符串，必须使用Number方法 Number.isFinite(), Number.isNaN() 返回值 ：true/false Number.isFinite()：检验 数值 是否为有限数 Number.isNaN()：检查 数值 是否为NaN Number.isFinite(0....
【ES6】对象的扩展
青山野火
02-26 1056
文章目录一、对象的扩展二、用法详解1. 属性的简洁表示2. 属性名表达式3. Object.is()4. 扩展运算符与Object.assign()5. in6.对象的遍历方式 一、对象的扩展 属性的简洁表示法 属性名表达式 Object.is() 扩展运算符与Object.assign() in 对象的遍历方式 二、用法详解 1. 属性的简洁表示 let name = 'kakaDorothy' let age = 20 let s = 'school' let obj = { // ES5中需..
es6 -- 语法(扩展)
维克多噗噗的博客
05-07 498
变量的扩展/* * 变量的扩展 * 1. let 在es6新的声明变量的关键字 * 特性: 1.没有与解析 * 2. 不允许重复声明 * 3. 块级作用域 {} 称之为代码块 * 2. const * 1. 常量 固定的值 不能被修改 * 2. 对象obj 属性可以修改的 * */ <!DOCTYPE htm
ES6语法——数组新增操作
weixin_51405694的博客
06-27 974
ES6语法——数组新增操作
ES6中的数组及对象扩展
Mean
11-02 391
一、 数组扩展 1. Array.from 作用：将类数组对象转换为数组 参数：类数组对象或可遍历对象(iterable) 返回：数组 Tips：参数一定要有length参数，否则会得到空数组 let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; // ES5转换 let arr1 = [].slice...
ES6(函数扩展、数组扩展)
weixin_57920269的博客
04-11 508
函数扩展、数组扩展
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值