ES6-12 array/数值拓展、ArrayOf、ArrayFrom

要使用…须有迭代器接口

数组方法

在这里插入图片描述

构造器上的方法

Array.of()声明数组

  • 替代new Array()的方式声明数组
  • new Array()不传参数返回空数组,只传1个参数时,代表数组长度,内容用empty填充,传多个参数,则代表数组内容,容易有歧义
console.log(new Array()) // []
console.log(new Array(1)) // [empty]
console.log(new Array(1, 2, 3)) // [1, 2, 3]
console.log(Array()) // 不写new 效果相同 []
console.log(Array(1)) // [empty]
console.log(Array.of()) // []
console.log(Array.of(1)) // [1]
console.log(Array.of(1, 2, 3)) // [1, 2, 3]

Array.from() 转换为真正的数组

  • Array.from() 方法从一个类似数组或可迭代对象创建一个新的,浅拷贝的数组实例

  • 语法 Array.from(arrayLike[, mapFn[, thisArg]])
    mapFn 可选:如果指定了该参数,新数组中的每个元素会执行该回调函数。
    thisArg 可选:可选参数,执行回调函数 mapFn 时 this 对象。

  • 类数组,打印出来和数组没什么区别,但不是数组

在这里插入图片描述

let obj = {start: [1, 3, 2, 4],end: [5, 7, 6],[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}}}}}
}
console.log(Array.from(obj)) //  [1, 3, 2, 4, 5, 7, 6]
console.log(Array.from(obj,function (val,idx) {return `第${idx}个:${val}`
}))
// ["第0个:1", "第1个:3", "第2个:2", "第3个:4", "第4个:5", "第5个:7", "第6个:6"]

原型上的方法

ES6新增有:[].fill() copyWithin() keys() / values() / entries() includes() find() / findIndex()

arr.fill() 左闭右开

  • fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。[ , )
  • 修改原数组
  • 如果start和end索引相同/或者是非数,则不操作
  • 不写end/end超出长度,就填充直到结束
[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
// 需要注意如果fill的参数为引用类型,会导致都执行都一个引用类型
// 如 arr[0] === arr[1] 为true
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

keys() / values() / entries()

  • 返回值是迭代器对象
  • 迭代器对象的原型上有next方法
  • 迭代器对象没有length属性,不能用for循环遍历
const arr = [1, 2, 3]
const itKeys = arr.keys()
const itVals = arr.values()
const itEntries = arr.entries()
console.log(itKeys)
console.log(itVals)
console.log(itEntries)
console.log(itKeys.next())
console.log(itKeys.next())
console.log(itKeys.next())
console.log(itKeys.next())
console.log('剩余运算符展开',[...arr.keys()])console.log(itVals.next())
console.log(itVals.next())
console.log(itVals.next())
console.log(itVals.next())
console.log('剩余运算符展开',[...arr.values()])console.log(itEntries.next())
console.log(itEntries.next())
console.log(itEntries.next())
console.log(itEntries.next())
console.log('剩余运算符展开',[...arr.entries()])

在这里插入图片描述

在这里插入图片描述

copyWithin

  • 浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。
  • copyWithin(target,start,end)
  • target从哪里开始被替换
  • start原数组从哪开始
  • end原数组到哪结束
const arr = [1, 2, 3, 4]
console.log(arr.copyWithin(2, 0)) // [1,2,1,2]

在这里插入图片描述

console.log([].copyWithin.call({ length: 5, 3: 1 }, 0, 3))
// 没有用undefined进行填充,没有对没有的index进行填充

在这里插入图片描述

console.log([].copyWithin.call({ length: 5, 3: 1, 4: 1}, 0, 3))

在这里插入图片描述

ES6解决了NaN本身不相等而影响判断结果的问题

find/findIndex

  • find返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
  • findIndex返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
  • 接收参数:callback(val,idx,arr),[thisArg]
const arr = [NaN]
console.log(arr.indexOf(NaN)) // -1 找不到,NaN与自身也不相等
console.log(arr.findIndex((val) => Object.is(val, NaN))) // 0 找到
console.log(arr.findIndex((val) => isNaN(val))) // 0 找到

includes

  • 判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回false。
const arr = [NaN]
console.log(arr.includes(NaN)) // true

数值拓展

  • 二进制binary
  • 八进制Octal
  • 十六进制 hex
  • 新增二进制/八进制表示方法
  • 二进制0b开头,八进制0O开头
// 十进制16转为二进制 
console.log((16).toString(2)) // 10000
// 直接表示这个二进制数
console.log(0b10000) // 16 打印结果是十进制的
// 十进制16转为八进制 
console.log((16).toString(8)) // 20
// 直接表示这个八进制数
console.log(0O20) // 16 打印结果是十进制的
  • ES5就有的十六进制是0x开头的
  • 都不区分大小写
  • parseInt、isNaN等方法在ES5中是定义在全局的,ES6中在Number的构造器上可看到这些方法的定义,也解决了全局方法的一些问题
    在这里插入图片描述

isNaN 隐式转换

console.log(isNaN('NaN')) // true,隐式转换,得到了不符合预期的结果
console.log(Number.isNaN('NaN')) // false

isFinite是有限的

console.log(isFinite(NaN)) // false
console.log(isFinite(Infinity)) // false
console.log(isFinite('42')) // true 隐式转换
console.log(Number.isFinite('42')) // false

isInteger是整数

console.log(Number.isInteger(24)) // true
console.log(Number.isInteger(24.0)) // true js认为这是整数
console.log(Number.isInteger(24.1)) // false

isSafeInteger 安全整数

  • 安全整数的范围
console.log(Number.MAX_SAFE_INTEGER === Math.pow(2, 53) - 1) // 2的53次方 true
console.log(Number.MIN_SAFE_INTEGER === -Math.pow(2, 53) + 1) // true

Math对象

  • 内置对象Math没有prototype
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251003.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

React01

目录 React-day01 入门知识React介绍官网React开发环境初始化 SPA脚手架初始化项目&#xff08;方便&#xff0c;稳定&#xff09;*通过webpack进行初始化配置镜像地址开发工具配置元素渲染组件及组件状态函数定义组件(无状态)类定义组件(有状态)*组合组件Props属性*State状态*…

算法 --- 反转数组

几个注意点: 1.输出的时候,也要做数字超出处理 2.js中可以使用 str -0 将字符串类型转换成数字类型 ( 注意不是 0) 3.可以使用 num ‘’ 将数字类型转换成字符串类型 4.使用str.split(’’) 可以将字符串转换成数组 5.使用arr.join(’’) 可以将数组转换成字符串 6.JS中2的31次…

ES6-13 正则方法、修饰符yus、UTF_16编码方式

修饰符 m multiLine 对于str中含\n的情况g globali ignoreCase 元字符 反斜杠加转义 元字符含义简写\w匹配字母、数字、下划线。等价于’[A-Za-z0-9_]’。word\W匹配非字母、数字、下划线。等价于 ‘[^A-Za-z0-9_]’。\s匹配任何空白字符&#xff0c;包括空格、制表符、换页…

svn文件大小类型限制,提交必须加多少字的说明

#!/bin/shREPOS"$1" TXN"$2" #此处更改大小限制&#xff0c;这里是5M MAX_SIZE5242880 #此处增加限制文件后缀名 FILTER\.(zip|rar|o|obj|tar|gz)$SVNLOOK/usr/bin/svnlookLOGMSG$SVNLOOK log -t "$TXN" "$REPOS" | wc -cif [ "$…

cmd窗口快速定位到具体文件夹方法

在用Python进行机器实战时&#xff0c;打开cmd窗口后&#xff0c;总是到定位到kNN.py所在文件夹才能Python&#xff08;否则import kNN失败&#xff09;&#xff0c;每次都要输入地址非常麻烦 这里介绍一个cmd窗口快速定位到具体文件夹方法&#xff1a; 按住Shift键右击鼠标打开…

算法 --- 罗马数字转整数

解体思路: 1.写一个对象trans用于保存罗马和数字之间的映射关系 2.重点在于当数值小的出现在数值大的左边时,会减去该数,出现在右边时会加上该数,因此需要与后面的进行比较 3.在得到s时,首先给它转换成字符串,并在末位加一个0 /*** param {string} s* return {number}*/ var r…

正则 - 阮一峰

学习地址 一 正则实例方法 1. test 正则实例.test返回布尔值 var r /x/g; var s _x_x;r.lastIndex // 0 r.test(s) // truer.lastIndex // 2 r.test(s) // truer.lastIndex // 4 r.test(s) // false死循环&#xff0c;因为while循环的每次匹配条件都是一个新的正则表达式…

LintCode 6.合并排序数组 ||

import org.junit.Test;import java.util.Arrays;public class MergeSort {/*** param A: sorted integer array A* param B: sorted integer array B* return: A new sorted integer array* <p>* 合并排序数组 II* 合并两个排序的整数数组A和B变成一个新的数组。* <p…

算法 --- 有效的括号

解题思路: 1.对括号分别赋值(左括号大于0,右括号小于0),方便后期比较 2.使用栈,对于大于0的字符串入栈,对于小于0的字符串,检查栈中是否有元素,若没有返回false,否则拿出栈顶的一个元素,和现在的元素进行比较 /** * param {string} s * return {boolean} */ var isValid func…

ES6-14 Unicode表示法、字符串方法、模板字符串

Unicode表示法 本身能正常识别的&#xff0c;加{}也能识别&#xff0c;花括号内的内容表示码点 parseInt(0061,16) // 十进制的97&#xff0c;97在ASCII码中对应a console.log(\u0061) // a console.log(\u{0061}) // a console.log(\u{61}) // a原型上方法 codePointAt(十进…

对 js 高程 Preflighted Reqeusts 的理解

看JS高程遇到 Preflighted Reqeusts不大理解&#xff0c;遂百度下&#xff1a;转自&#xff1a;http://todoit.me/ajax-preflight/最近在做一个 VUE 的项目的时候, 和后端的小伙伴对接口, 想方便开发, 于是要求后端的小伙伴在所有的接口都加上跨域的许可 (Access-Control-Allow…

算法 --- 删除数组中重复项

解题思路: 如果输入的数组长度为1,则返回该数组否则(len>2),使用i记录当前待插入的位置,j记录下一个与nums[i]不相等的位置,leng为待返回数组的长度当nums[i] ! nums[j]时,把j位置的值nums[j]放在i1位置.同时i,j /*** param {number[]} nums* return {number}*/ var remov…

如何理解 Linux 中的 load averages

原文&#xff1a;https://mp.weixin.qq.com/s?src11&timestamp1533697106&ver1047&signaturepoqrJFfcNABv4biKKpa4mZdIW7No2Wo1F5sbZL7ggoVS2GqcSqwQQ8hMulAmezT*zL*klB-eE5BeMyNuyjuIH7YgkBAN25i6*ahhEpWyxqx6vPct-Vr7q7AU0YGe-F*l&new1 http://blog.scoutap…

Jsp+Servlet+MYSQL注册登录案例(界面难看,ε=(´ο`*)))唉)

注册登录界面尤为常见&#xff0c;我的界面尤为难看&#xff0c;勉为其难的写吧&#xff0c;前端不熟就是这样。。。 这个案例运用到了: 1.Jsp动态页面--->动态页面 2.Servlet逻辑判断后台---->实现界面与数据库/业务的连接&#xff0c;简而言之&#xff0c;起承转合。PS…

ES6-15 map与set

Promise、Proxy、Map、Set这些ES6新增的api无法用babel实现语法降级&#xff0c;需要使用到polyfill Set 成员是唯一的&#xff0c;不能重复有iterator接口&#xff0c;可迭代具有iterator接口的所有类型&#xff0c;都能作为new Set()的参数&#xff0c;如类数组、数组 con…

jquery --- DOM操作、表单元素的初始化

1.获取ul里第2个li节点: var $li_two $("ul li:eq(1)"); // 获取该节点的内容 var $li_two_txt $li_two.text();2.获取p元素节点的title属性: var $para $("p"); var p_title $para.attr("title");3.创建2个li节点,并添加道ul中: var $li…

Jquery中post与get之间的区别详细介绍

1:GET访问浏览器认为是等幂的 GET访问浏览器认为是等幂的&#xff0c;就是一个相同的URL只有一个结果&#xff0c;相同是指整个URL字符串完全匹配。所以&#xff0c;第二次访问的时候&#xff0c;如果URL字符串没变化 浏览器是直接拿出了第一次访问的结果&#xff1b; POST则认…

LeetCode 424. Longest Repeating Character Replacement

原题链接在这里&#xff1a;https://leetcode.com/problems/longest-repeating-character-replacement/description/ 题目&#xff1a; Given a string that consists of only uppercase English letters, you can replace any letter in the string with another letter at mo…

ES6-16 WeakMap与WeakSet、proxy与reflect

WeakMap/WeakSet 原型上不存在遍历方法(没有部署iterator接口)成员只能是对象垃圾回收机制不考虑对成员对象的应用 WeakSet/WeakMap 中的对象都是弱引用&#xff0c;即垃圾回收机制不考虑 WeakSet 对该对象的引用&#xff0c;也就是说&#xff0c;如果其他对象都不再引用该对象…

jquery--- 属性和样式的操作 设置和获取HTML、文本和值、焦点事件

1.获取p元素的title属性: var title $("p").attr("title");2.给p元素加title属性(值为:栗子)和date属性(值为:2019/7/15): $("p").attr("title":"栗子", "date":"2019/7/15");3.删除p中的title属性:…