ES6-12【array、数值拓展、数组拓展、ArrayOf、ArrayFrom】

最新推荐文章于 2024-07-28 19:30:25 发布
最新推荐文章于 2024-07-28 19:30:25 发布
阅读量178 收藏
点赞数
分类专栏： ES6 文章标签： es6/es7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/110421382
版权

一.Array

es5声明数组方式

console.log(Array());//[]
console.log(Array(3));//[empty*3]
console.log(Array(3,1));//[3, 1];
console.log(new Array());[]
console.log(new Array(3))//[empty*3]

es6的新数组方法of

console.log(Array.of());//[]
console.log(Array.of());//[3]
console.log(Array.of(3, 4, 6));//[3, 4, 6]

二.ArrayForm

能把部署了类数组类型数组或者对象转成真正的数组

es5

var oList = document.querySelectorAll('p');
console.log([].slice.call(oList))//[p,p,p]

es6

console.log(Array.from(oList));//[p,p,p]

部署了iterator的接口也可以

let obj = {
    start: [12,3,4,5],
    end: [7,8,9],
    [Symbol.iterator](){
        let index = 0,
            arr = [...this.start,...this.end],
            len = arr.length;
        return {
            next(){
                if(index<len){
                    return {
                        value: arr[index++],
                        done: false
                    }
                }else{
                    return {
                        value: undefined,
                        done: true
                    }
                }
            }
        }    
    }
}
log(Array.from(obj))//[12,3,4,5,7,8,9]

三.数组拓展

(1).map

let arr = [1, 2, 3, 4]
let arr1 = arr.map(function(value){
    return value*2
})
console.log(arr1);//返回新数组 可以循环数组执行对应函数 
2 4 6 8

(2).Array.form

参数

[arrayLike, mapFn, thisArg]

得到新数组以后得到对应的值和下标，之后操作

console.log(Array.from(obj,function(val,idx){
    return val * 2
}))//[24, 6, 8, 10, 14, 16, 18]

(3).fill

通过Array.of()声明的数组可以通过fill来填充数据

arr.fill(value, start, end);

默认start = 0,如果不指定则从0开始全部替换了，且操作的是原数组

let arr1 = [1, 2, 3, 4];
var arr = arr1.fill(5);
console.log(arr1);//[5,5,5,5]
arr1.fill(5, 1)//[1,5,5,5] 左闭右开
arr1.fill(5,1,2)//[1,5,3,4] 
arr1.fill(5,1,1)//[1,2,3,4]
arr1.fill(5,-3,-2)//[1,5,3,4]
arr1.fill(5,NaN,-2)//[5,5,5,5]数字不合法当0处理，两个数组不合法直接不处理

对象也可以调用

cosole.log([].fill.call({length:3},4));
//{
    0:4,
    ...
    2:4
    length:3
}

(4).keys/values/entries

let arr = ['a', 'b', 'c'];
console.log(arr.keys()); //Array Iterator{}
console.log(arr.values());//Array Iterator{}
console.log(arr.entries());//Array Interator{}

有iterator代表可以拉取

var iter = arr.entries();
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
console.log(iter.next());
{
    value:[0,'a']
    done:false
}
{
    value:[1,'b']
    done:false
}
{
    value:[2,'c']
    done:false
}
{
    value:undefined
    done:true
}

即代表我可用for of循环取值 keys entries一致不做演示

for(let i of iter){
    console.log(i);
}// a b c

由于返回对象没有length属性，所以只能通过for of

(5).copywithin

在不操作数组长度的前提下，复制数组替换拷贝到指定位置

var arr = [1,2,3,4,5,6,7]
console.log(arr.copyWithin(2));//[1,2,1,2,3,4,5]
console.log(arr.copyWithin(-2));//[1,2,3,4,5,1,2]

第一个参数确定位置，第二个第三个位置确定要复制的值，结果不改变数组长度

var arr = [1,2,3,4,5,6,7];
console.log(arr.copyWithin(0,3))//[4,5,6,7,5,6,7]
console.log(arr.copyWithin(0,3,4))//[4,2,3,4,5,6,7]
console.log(arr.copyWithin(-2,-3,-1))//[1,2,3,4,5,5,6]

对对象的操作

了解为主

console.log([].copyWithin.call({length:5,3:1},0,3),0,3);
{
    0:1
    3:1
    length:5
}
console.log([].copyWithin.call({length:5,3:1,4:1,5:1},0,3));
{
     0:1
    1:1
    3:1
    4:1
    5:1
    length:5
}
超过长度了也会复制过去和length无关
console.log([].copyWithin.call({length:5,3:1,4:1,5:1,6:1},0,3))
{
    0:1
    1:1
    3:1
    4:1
    5:1
    6:1
    length:5
}

数组默认都有个1：1

(6).find/findex

find

返回第一个条件为true的数组成员

//基本形式
var arr = [1,2,3,4];
var arr1=arr.find(function(value,index,arr){
    return value>2
})
console.log(arr1);//3
var arr1=arr.find(function(value,index,arr){
    return index>2
})
console.log(arr1);//4
访问没有的值
var arr = [1,2,3,4];
var value = arr.find(function(value,index,arr){
    return value >5
})
console.log(index);//undefined

findexindex

var index = arr.findIndex(function(value,index,arr){
    return value >2
})
console.log(index);//2
访问没有的值
var arr = [1,2,3,4];
var value = arr.findIndex(function(value,index,arr){
    return value >5
})
console.log(index);//-1

查询不合法数字
es5
console.log([NaN].indexOf(NaN));//-1
es6
console.log([NaN].findIndex(y => Object.is(NaN,y)))//0

(7).includes

指定数值是否在数组成员中存在

console.log([1,2,3].includes(1));//true
console.log([1,2,NaN].includes(NaN));true

四.数值拓展

进制表达方式

//es5进制表达方式
console.log(Number.prototype.toString.call(503,2))//11111011 2进制
console.log(parseInt(111110111,2))//503 2进制

//es6进制表达方式
console.log(0x1f7)//16进制数表达
console.log(0o767)//8进制
console.log(0b11110111)//2进制

Number的调整

部分方法从全局挪到了Number上，这样就不会隐式转换，更加安全

console.log(isNaN("NaN"));true
console.log(Number.isNaN("NaN"))false

isFinite

判断是否为有限数

console.log(isFinite(42)); // true有限数
console.log(isFinite(Infinity))//false 无限数

NaN是无限的打印false

es6同样调到了Number上

console.log(isFinite('42'))//true 会隐式转换
console.log(Number.isFinite('42'))//false 修正了

parseFloat和parseInt也挪动到了Number上

isInteger

判断整数和浮点数

在js中判断24.0和24一致打印true

console.log(Number.isInteger(24.0)) //true
console.log(Number.isInteger(24.1)) //false

安全整数

整数处理上限

MAX_SAFE_INTEGER: 9007199254740991

2的53次方 -1

console.log(Number.MAX_SAFE_INTEGER === Math.pow(2,53)-1);//true

整数处理下限

MIN_SAFE_INTEGER: -9007199254740991

console.log(Number.MAX_SAFE_INTEGER === -Math.pow(2,53)+1);//true

判断方式

Number.isSafeInteger();

log(Number.isSafeInteger(1.1)) false

不是处理范围内的整数，是的话就为true

能够处理最大的浮点数

MAX_VALUE 正浮点

MIN_VALUE 负浮点

log(Math)就能查看Math的方法了，prototype是不行的

可通过网址查询方法：developer.mozilla.org

可乐雪碧薄荷糖
关注
专栏目录
尚硅谷 ES6-12 笔记
LiuKairui的博客
06-18 1617
文章目录ES介绍ES6新特性eval函数(ES3函数补充)let关键字const关键字变量解构赋值模板字符串简化对象写法箭头函数函数默认参数REST参数...Spread扩展运算符Symbol 数据类型迭代器生成器PromiseSetMapclass 类数值扩展对象方法的扩展模块化ES7新特性Array的includes**运算符ES8新特性async & await对象方法的扩展ES9新特性REST参数与Spread扩展正则扩展ES10新特性Object.fromEntries方法trimStar
ES6 - Array的常用对象，数组的遍历And其他方法
qq_52499703的博客
07-14 1703
本文只列举了一些常用的使用方法
ES6-ES12部分简单知识点总结，希望对大家有用~
qq_52732369的博客
03-27 1459
ES6-ES12简单知识点总结 1.ES6相关知识点 1.1.对象字面量的增强 ES6中对对象字面量的写法进行了增强，主要包含以下三个方面的增强： 属性的简写：当给对象设置属性时，如果希望变量名和属性名一样就可以直接写该变量名； 方法的简写：对象中的方法可直接写成foo() {}的形式； 计算属性名：对象的属性名可以动态传入，将变量使用[]包裹即可； const obj = { // 1.属性简写 name, age, // 2.方法简写 foo() { console.
【汇总】ES6~12的常用语法详解（上篇ES6）
weixin_50926010的博客
05-01 2187
【汇总】ES6~12的常用语法详解（上篇ES6）
ES6~ES12知识梳理以及总结
Amelian的博客
02-13 1104
1、let和const 这两个的出现，总感觉是为了开发代码规范而出现的 。我们要组件放弃var，在项目中多用let和const。 与var的区别: var有变量提升，有初始化提升，值可以变，var只有函数作用域 let有变量提升，没有初始值提升，值可以变 const有变量提升，没有初始化提升，值不可变。但如果是定义对象，则属性可变 暂时性死区问题说明：其实let和const是有变量提升的，但是没有初始化提升： var name='Amelian' function fn(){ cons
ES6-ES12所有特性详解
wang13679201813的博客
05-15 4241
文章目录第一章 ECMASript相关介绍1.1、什么是ECMA1.2、什么是ECMAScript1.3、什么是ECMA-2621.4、ECMA-262历史1.5、谁在维护ECMA-2621.6、为什么要学习ES61.7、ES6兼容性第二章 ES6特性=ES20152.1、let2.2、const2.3、变量的解构赋值2.4、模板字符串2.5、简化对象写法2.6、箭头函数2.7、rest参数2.8、扩展运算符2.9、Symbol2.10、迭代器2.11、生成器2.12、Promise2.13、Set2.14
js代码-es6-3-1 数组解析复制
07-16
在ES6中，`Array.from()`方法和扩展运算符（...）也可以用来复制数组： ```javascript let original = [1, 2, 3]; let copy1 = Array.from(original); let copy2 = [...original]; ``` 这两个方法同样创建的是浅...
es6-proxy-polyfill:ES6 Proxy polyfill，支持IE8 +，Node.js等
04-30
| 英语 ES6代理Polyfill 这是ES6 Proxy的polyfill，支持IE6 + ，Node.js等。 到目前为止，它比GoogleChrome的支持更多功能。... script src =" path/to/es6-proxy-polyfill.js " type =" text/javascript " > <
es6-promise.auto.js
10-31
<!-- Automatically provides/replaces `Promise` if missing or broken. --> [removed][removed] ...-- Minified version of `es6-promise-auto` below. --> [removed][removed] [removed][removed]
es6-12各种特性
weCat_s的博客
10-26 356
基础很好？总结了38个ES6-ES12的开发技巧，倒要看看你能拿几分？???? 前言 总结一下在工作中用过的非常实用的ES6，ES7，ES8，ES9，ES10，ES11，ES12语法。 首先说明一下：我这里只是举了最基础的例子，但是项目中要怎么去灵活运用，这个就要各位同学自己去摸索了。 ES6 1、let 和 const 这两个的出现，总感觉是为了开发的代码规范而出现的。我们要逐渐放弃var，在项目中多用let和const 与var的区别： var有变量提升，有初始化提升，值可变 let有变量提升，没有
ES6 学习文档
12-25
ES6，ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6ES6
一次性搞定JavaScript 从 ES6 到 ES12的基础框架知识
qq_41838305的博客
05-11 762
它返回一个单一的 Promise，只要 iterable 中的任何一个 Promise 完成，就会返回一个 Promise，并带有已完成的 Promise 的值。如果可迭代的实现中没有任何承诺（如果所有给定的承诺都被拒绝），则返回的承诺会被 AggregateError 拒绝，AggregateError 是 Error 的一个新子类，它将单个错误组合在一起。相反，普通（或强）引用将对象保存在内存中，当一个对象不再有任何强引用时，JavaScript 引擎的垃圾收集器可能会销毁该对象并回收其内存。
ES6总结整理
weixin_44999716的博客
01-09 261
ES6总结整理 //以下大部分内容总结自B站up主光影哔哩上传的深入解读ES6系列（全18讲），播放量较多那个 1. babel == browser.js <script arc="browser.js" charset="-8"></script> <script type=“text/babel”></script> 2. JS中，关于var：可以重复声明；无法限制修改；没有块级作用域 ES6中，let：不能重复声明；变量值可修改；有块级作用域；不存在
Array.form
weixin_34162228的博客
03-28 98
2019独角兽企业重金招聘Python工程师标准>>> ...
array.form()详解
fury的博客
09-23 2541
是 JavaScript 中的一个静态方法，用于将类数组对象或可迭代对象（比如 Set、Map 等）转换成一个新的数组。可以方便地将可迭代对象转换为数组，并且可以在转换过程中进行元素的映射操作。示例 2：将可迭代对象转为数组，并进行映射操作。javascript复制代码。javascript复制代码。javascript复制代码。示例 1：将字符串转为数组。
Array.form()方法
qq_36306659的博客
09-01 7946
该方法可以吧类数组或者可比案例对象转化为一个真正的数组  
Array.form（）的使用
最新发布
m0_63634307的博客
07-28 143
Array.from()： 是将一个伪元素（类数组对象）或自定义数组变成真的数组。
ES6 Array.from() 的使用 学习记录
weixin_33755554的博客
03-21 232
引用：https://www.cnblogs.com/jf-67/p/8440758.html Array.from() Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。 那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。 1、将类数组对象转换为真正数组 let arrayLike = { ...
Arrayform的方法(部分 , 详情请参考MDN)
m0_59628052的博客
09-13 736
1.concat()方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。 for example: let arr1 = [1, 2, 3 ] let arr2 = [4, 5, 6 ] let arr3 = arr1.concat(arr2) console.log(arr3) //输出结果是 [1, 2, 3, 4, 5, 6] 2.every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。 for example ...
ES6数组方法Array.from Array.of的区别
07-27
ES6中的`Array.from`和`Array.of`都是用于处理数组的方法，但它们有不同的功能和用途。 `Array.from`方法用于将类似数组或可迭代对象转换为新的数组实例。它接受两个参数：第一个参数是要转换的类似数组或可迭代...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值