目录
ES5:5个基本数据类型:number boolean string null undefined
ES6:新增1个基本数据类型:symbol (独一无二的)它是一个内置全局函数,生成一个独一无二的数据
var re = Symbol("hello") var re2 = Symbol("hello") console.log(re,re2,re == re2) //Symbol(hello) Symbol(hello) false console.log(typeof re) //symbol
内置对象
浏览器提供的引用数据: document window Image
ES5提供的: Date Math Array ReExp Object
ES6提供的: Map Set
1、Map与Set
(1)Map
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
Map没有语法糖,Map很像一个对象
Map特点:有序、键值对(键可以是任意类型)、键名不能重复(如果重复,那么覆盖)
Map和Object的区别:
- 一个 Object 的键只能是字符串或者 Symbols,但一个 Map 的键可以是任意值。 - Map 中的键值是有序的(FIFO 原则),而添加到对象中的键则不是。 - Map 的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算。 - Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。
Map中的key
key是字符串
var myMap = new Map(); var keyString = "a string"; myMap.set(keyString, "和键'a string'关联的值"); myMap.get(keyString); // "和键'a string'关联的值" myMap.get("a string"); // "和键'a string'关联的值" // 因为 keyString === 'a string'
key是对象 (key是一个引用数据,所以需要用变量保存这个引用数据,才是取到了同一个引用,否则就是两个空间,就算写的和它一样,也不是一个空间,就会是und)
var myMap = new Map(); var keyObj = {}, myMap.set(keyObj, "和键 keyObj 关联的值"); myMap.get(keyObj); // "和键 keyObj 关联的值" myMap.get({}); // undefined, 因为 keyObj !== {} //不是同一个空间
key是函数
var myMap = new Map(); var keyFunc = function () {}, // 函数 myMap.set(keyFunc, "和键 keyObj 关联的值"); myMap.get(keyFunc); // "和键 keyFunc 关联的值" myMap.get(function() {}) // undefined, 因为 keyFunc !== function () {}
key是NaN
var myMap = new Map(); myMap.set(NaN, "not a number"); console.log(myMap.get(NaN)) // "not a number" var otherNaN = Number("foo"); myMap.get(otherNaN); console.log(myMap.get(otherNaN)) // "not a number"
Map的迭代:对Map进行遍历
for...of
var myMap = new Map(); myMap.set(0, "zero"); myMap.set(1, "one"); // 将会显示两个 log。 一个是 "0 = zero" 另一个是 "1 = one" //for...of遍历Map对象,取出每个键值对的键key和值value for (var [key, value] of myMap) { console.log(key + " = " + value); } /* 这个 entries 方法返回一个新的 Iterator 对象,它按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组。 */ for (var [key, value] of myMap.entries()) { console.log(key + " = " + value); } /* 这个 keys 方法返回一个新的 Iterator 对象, 它按插入顺序包含了 Map 对象中每个元素的键。 */ for (var key of myMap.keys()) { console.log(key); } /* 这个 values 方法返回一个新的 Iterator 对象,它按插入顺序包含了 Map 对象中每个元素的值。 */ for (var value of myMap.values()) { console.log(value); }
forEach()
var myMap = new Map(); myMap.set(0, "zero"); myMap.set(1, "one"); myMap.forEach(function (value, key) { console.log(key + " = " + value); }, myMap) //0 = zero 1 = one
Map对象的操作
Map 与 Array的转换
(数组==》转Map:直接将数组写在Map后面的括号里) 必须是二维数组
(Map==》转数组:使用静态函数 Array.from)
var kvArray = [["key1", "value1"], ["key2", "value2"]]; //二维数组 // Map 构造函数可以将一个 二维 键值对数组转换成一个 Map 对象 var myMap = new Map(kvArray); console.log(myMap); //Map(2) {"key1" => "value1", "key2" => "value2"} // 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组 var outArray = Array.from(myMap); console.log(outArray); //[["key1", "value1"], ["key2", "value2"]]
Map的克隆
var myMap1 = new Map([["key1", "value1"], ["key2", "value2"]]); var myMap2 = new Map(myMap1); console.log(myMap1 === myMap2); // 打印 false。 Map 对象构造函数生成实例,迭代出新的对象。
Map的合并
var first = new Map([[1, 'one'], [2, 'two'], [3, 'three']]); var second = new Map([[1, 'uno'], [2, 'dos']]); // 合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的,对应值即 uno,dos, three var merged = new Map([...first, ...second]); console.log(merged) //Map(3) {1 => 'uno', 2 => 'dos', 3 => 'three'}
...a ==> 就是将一个数据容器(可以是 集合、Map、数组等)的元素全部取出来装在数组中
//没有创建的语法糖 var a=["key"] var m1=new Map([["age",100],[20,"hello"],[["key"],90],[a,90]])//初始化 //取数据get var re1=m1.get("age") var re2=m1.get(20) var re3=m1.get(["key"]) //因为["key"]是一个数组引用数据,这里取得不是上面得存储空间,所以需要用变量a将其保存起来 var re4=m1.get(a) console.log(re1,re2,re3,re4) //100 'hello' undefined 90 //存数据set m1.set("life",1)//新增 m1.set("age",1)//覆盖 console.log(m1) //Map(5) {'age' => 1, 20 => 'hello', Array(1) => 90, Array(1) => 90, 'life' => 1} console.log(m1.size) //5 //删除delete m1.delete(20) var re5=m1.delete("age") var re6=m1.delete("age") console.log(m1,re5,re6) //Map(3) {Array(1) => 90, Array(1) => 90, 'life' => 1} true false //全部清空clear m1.clear() console.log(m1) //Map(0) {size: 0}
购物车的设计:
//现在没有页面设计 可以用打印代替 //购物车 //后端取出来的额数据 要先解析然后保存到前端的某个数据容器中 var mycar = { data: new Map(), clear:function(){ this.data.clear() }, jianshao:function(id){ let obj=this.data.get(id) if(obj){ obj.count-- if(obj.count<=0){ this.data.delete(id) } } }, add: function(id) { let obj = this.data.get(id) if (obj) { // console.log(obj) obj.count++ this.data.set(id, obj) } }, total: function() { var result = 0; this.data.forEach(function(el) { console.log(el) result += el.count * el.price }) return result }, network: function() { var jiashuju = [{ id: 435123, title: "鱼香肉丝", price: 18, count: 1 }, { id: 435124, title: "东坡肉", price: 28, count: 1 }, { id: 435125, title: "米饭", price: 2, count: 2 }]; // this.data.set(jiashuju[0].id,jiashuju[0]) // this.data.set(jiashuju[1].id,jiashuju[1]) // this.data.set(jiashuju[2].id,jiashuju[2]) var self = this jiashuju.map(function(el) { self.data.set(el.id, el) }) } } mycar.network() mycar.add(435123) mycar.add(435125) mycar.add(435125) mycar.add(435125) mycar.add(435125) mycar.add(435125) mycar.jianshao(435124) console.log(mycar.data) var re1 = mycar.total() console.log(re1) mycar.clear() console.log(mycar.data)
(2)Set
Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。
set很像数组,它是一个集合。
Set集合和数组的区别: 1、Set集合不能重复元素 2、Set取数据不是用下标取,而是用遍历取 3、存数据用add()函数存,没有先后顺序 4、集合是size,数组是length
Set中的特殊值
Set 对象存储的值总是唯一的,所以需要判断两个值是否恒等。有几个特殊值需要特殊对待:
+0 与 -0 在存储判断唯一性的时候是恒等的,所以不重复; undefined 与 undefined 是恒等的,所以不重复; NaN 与 NaN 是不恒等的,但是在 Set 中只能存一个,不重复。let mySet = new Set(); mySet.add(1); // Set(1) {1} mySet.add(5); // Set(2) {1, 5} mySet.add(5); // Set(2) {1, 5} 这里体现了值的唯一性 mySet.add("some text"); // Set(3) {1, 5, "some text"} 这里体现了类型的多样性 var o = {a: 1, b: 2}; mySet.add(o); mySet.add({a: 1, b: 2}); // Set(5) {1, 5, "some text", {…}, {…}} // 这里体现了对象之间引用不同不恒等,即使值相同,Set 也能存储 //集合取数据,用forEach去遍历 mySet.forEach(function(el) { console.log(el) }) //1 5 some text {a: 1, b: 2} {a: 1, b: 2}
类型转换
Array
// Array 转 Set var mySet = new Set(["value1", "value2", "value3"]); console.log(mySet) // 用...操作符,将 Set 转 Array var myArray = [...mySet]; console.log(myArray) //var arr=Array.from(mySet)
String
// String 转 Set var mySet = new Set('hello'); console.log(mySet);// Set(4) {"h", "e", "l", "o"} // 注:Set 中 toString 方法是不能将 Set 转换成 String
Set==》转数组:使用静态函数 Array.from(mySet)
Set对象作用
数组去重 (三种方法)
//方法一: var mySet = new Set([1, 2, 3, 4, 4]); [...mySet]; // [1, 2, 3, 4] //方法二: var arr=[10,203,40,10] var s1=new Set(arr) var arr2=Array.from(s1) console.log(arr2) //(3) [10, 203, 40] //方法三: 根据对象中属性名不能重复 obj={age:20,age:30}==>obj={age:30} //前面的会被覆盖 就是创建一个对象,对象里的属性名是数组的元素:使用for遍历==》obj[arr[i]]=随便写一个数 然后用Object.keys() ==> 对象的所有属性名,返回一个数组 //方法三: var arr = [2, 3, 4, 4, 6, 7, 8, 4, 9, 7] console.log(arr) var obj = {} for (var i = 0; i < arr.length; i++) { obj[arr[i]] = "11" } var re = Object.keys(obj) console.log(re) var arr2=[] for(var j=0;j<re.length;j++) { arr2.push(parseInt(re[j])) } console.log(arr2)
并集
var a = new Set([1, 2, 3]); var b = new Set([4, 3, 2]); var union = new Set([...a, ...b]); // {1, 2, 3, 4}
交集
var a = new Set([1, 2, 3]); var b = new Set([4, 3, 2]); // var intersect = new Set([...a].filter(x => b.has(x))); // {2, 3} //上面一行代码等同于下面的代码 var arr=[...a] var arr2=[...b] var arr3=arr.filter(function(el) { return arr2.has(el) //就是看arr里面的每一个元素在不在arr2中,在就是true,filter会在返回值是true的时候,就把元素放进arr3中 })
差集
var a = new Set([1, 2, 3]); var b = new Set([4, 3, 2]); var difference = new Set([...a].filter(x => !b.has(x))); // {1}
...
2、字符串
(1)子串的识别
ES6 之前判断字符串是否包含子串,用 indexOf 方法,ES6 新增了子串的识别方法
includes():返回布尔值,判断是否找到参数字符串。
startsWith():返回布尔值,判断参数字符串是否在原字符串的头部。
endsWith():返回布尔值,判断参数字符串是否在原字符串的尾部。
以上三个方法都可以接受两个参数,需要搜索的字符串,和可选的搜索起始位置索引
let string = "apple,banana,orange"; string.includes("banana"); // true string.startsWith("apple"); // true string.endsWith("apple"); // false string.startsWith("banana",6) // true
注意:
这三个方法只返回布尔值,如果需要知道子串的位置,还是得用 indexOf 和 lastIndexOf 。
这三个方法如果传入了正则表达式而不是字符串,会抛出错误。而 indexOf 和 lastIndexOf 这两个方法,它们会将正则表达式转换为字符串并搜索它。
(2)字符串重复
repeat():返回新的字符串,表示将字符串重复指定次数返回。
console.log("Hello,".repeat(2)); // "Hello,Hello,"如果参数是小数,向下取整
console.log("Hello,".repeat(3.2)); // "Hello,Hello,Hello,"如果参数是 0 至 -1 之间的小数,会进行取整运算,0 至 -1 之间的小数取整得到 -0 ,等同于 repeat 零次
console.log("Hello,".repeat(-0.5)); // ""如果参数是 NaN,等同于 repeat 零次
console.log("Hello,".repeat(NaN)); // ""如果参数是负数或者 Infinity ,会报错:
console.log("Hello,".repeat(-1)); // RangeError: Invalid count value console.log("Hello,".repeat(Infinity)); // RangeError: Invalid count value如果传入的参数是字符串,则会先将字符串转化为数字
console.log("Hello,".repeat("hh")); // "" console.log("Hello,".repeat("2")); // "Hello,Hello,"(3)字符串补全
padStart:返回新的字符串,表示用参数字符串从头部补全原字符串。
padEnd:返回新的字符串,表示用参数字符串从尾部补全原字符串。
以上两个方法接受两个参数,第一个参数是指定生成的字符串的最小长度,第二个参数是用来补全的字符串。如果没有指定第二个参数,默认用空格填充。
console.log("h".padStart(5,"o")); // "ooooh" console.log("h".padEnd(5,"o")); // "hoooo" console.log("h".padStart(5)); // " h"
如果指定的长度小于或等于原字符串的长度,则返回原字符串:
console.log("hello".padStart(5,"A")); // "hello"如果原字符串加上补全字符串长度大于指定长度,则截去超出位数的补全字符串:
console.log("hello".padEnd(10,",world!")); // "hello,worl"常用于补全位数:
console.log("123".padStart(10,"0")); // "0000000123"(4)模板字符串
模板字符串相当于加强版的字符串,用反引号 `,
除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式。
注意:模板字符串中的换行和空格都是会被保留的。
//普通字符串 let string = `Hello'\n'world`; console.log(string); //Hello' //'world //多行字符串 let string1 = `Hey, can you stop angry now?`; console.log(string1); //Hey, //can you stop angry now? //变量名写在 ${} 中,${} 中可以放入 JavaScript 表达式。 let name = "Mike"; let age = 27; let info = `My Name is ${name},I am ${age+1} years old next year.` console.log(info); //My Name is Mike,I am 28 years old next year. //字符串中调用函数 function f(){ return "have fun!"; } let string2= `Game start,${f()}`; console.log(string2); // Game start,have fun!
(5)标签模板
标签模板,是一个函数的调用,其中调用的参数是模板字符串。
alert`Hello world!`; // 等价于 alert('Hello world!');应用:过滤 HTML 字符串,防止用户输入恶意内容。
function f(stringArr,...values){ let result = ""; for (let i = 0; i < stringArr.length; i++) { values[i] = stringArr[i]; if (values[i]) { result += String(values[i]).replace(/&/g, "&") .replace(/</g, "<") .replace(/>/g, ">"); } } return result; } var name = f('<Amy&MIke>'); element.innerHTML = `<p>Hi, ${name}.I would like send you some message.</p>`;
3、数值
(1)数值的表示
二进制表示法新写法: 前缀 0b 或 0B 。
console.log(0b11 === 3); // true console.log(0B11 === 3); // true
八进制表示法新写法: 前缀 0o 或 0O 。
console.log(0o11 === 9); // true console.log(0O11 === 9); // true(2)方法
Number.isFinite():用于检查一个数值是否为有限的( finite ),即不是 Infinity
console.log( Number.isFinite(1)); // true console.log( Number.isFinite(0.1)); // true // NaN 不是有限的 console.log( Number.isFinite(NaN)); // false console.log( Number.isFinite(Infinity)); // false console.log( Number.isFinite(-Infinity)); // false // Number.isFinate 没有隐式的 Number() 类型转换,所有非数值都返回 false console.log( Number.isFinite('foo')); // false console.log( Number.isFinite('15')); // false console.log( Number.isFinite(true)); // false Number.isNaN() 用于检查一个值是否为 NaN 。 console.log(Number.isNaN(NaN)); // true console.log(Number.isNaN('true'/0)); // true // 在全局的 isNaN() 中,以下皆返回 true,因为在判断前会将非数值向数值转换 // 而 Number.isNaN() 不存在隐式的 Number() 类型转换,非 NaN 全部返回 false Number.isNaN("NaN"); // false Number.isNaN(undefined); // false Number.isNaN({}); // false Number.isNaN("true"); // false
Number.parseInt():从全局移植到 Number 对象的方法,逐步减少全局方法,用于全局变量的模块化。方法的行为没有发生改变。
// 不指定进制时默认为 10 进制 Number.parseInt('12.34'); // 12 Number.parseInt(12.34); // 12 // 指定进制 Number.parseInt('0011',2); // 3 // 与全局的 parseInt() 函数是同一个函数 Number.parseInt === parseInt; // true Number.parseFloat() 用于把一个字符串解析成浮点数。 Number.parseFloat('123.45') // 123.45 Number.parseFloat('123.45abc') // 123.45 // 无法被解析成浮点数,则返回 NaN Number.parseFloat('abc') // NaN // 与全局的 parseFloat() 方法是同一个方法 Number.parseFloat === parseFloat // true Number.isInteger() 用于判断给定的参数是否为整数。 Number.isInteger(value) Number.isInteger(0); // true // JavaScript 内部,整数和浮点数采用的是同样的储存方法,因此 1 与 1.0 被视为相同的值 Number.isInteger(1); // true Number.isInteger(1.0); // true Number.isInteger(1.1); // false Number.isInteger(Math.PI); // false // NaN 和正负 Infinity 不是整数 Number.isInteger(NaN); // false Number.isInteger(Infinity); // false Number.isInteger(-Infinity); // false Number.isInteger("10"); // false Number.isInteger(true); // false Number.isInteger(false); // false Number.isInteger([1]); // false // 数值的精度超过 53 个二进制位时,由于第 54 位及后面的位被丢弃,会产生误判 Number.isInteger(1.0000000000000001) // true // 一个数值的绝对值小于 Number.MIN_VALUE(5E-324),即小于 JavaScript 能够分辨 // 的最小值,会被自动转为 0,也会产生误判 Number.isInteger(5E-324); // false Number.isInteger(5E-325); // true Number.isSafeInteger() 用于判断数值是否在安全范围内。 Number.isSafeInteger(Number.MIN_SAFE_INTEGER - 1); // false Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1); // false
(3)Math对象的扩展
ES6 在 Math 对象上新增了 17 个数学相关的静态方法,这些方法只能在 Math 中调用。
Math.cbrt():用于计算一个数的立方根。
Math.cbrt(1); // 1 Math.cbrt(0); // 0 Math.cbrt(-1); // -1 // 会对非数值进行转换 Math.cbrt('1'); // 1 // 非数值且无法转换为数值时返回 NaN Math.cbrt('hhh'); // NaN
Math.imul():两个数以 32 位带符号整数形式相乘的结果,返回的也是一个 32 位的带符号整数。
// 大多数情况下,结果与 a * b 相同 Math.imul(1, 2); // 2
Math.hypot():用于计算所有参数的平方和的平方根。勾股定理
Math.hypot(3, 4); // 54、对象
(1)对象字面量
属性的简洁表示法:ES6允许对象的属性直接写变量,这时候属性名是变量名,属性值是变量值。
const age = 12; const name = "Amy"; const person = {age, name}; console.log(person); //{age: 12, name: "Amy"}
方法也可以简写:
const person = { sayHi(){ console.log("Hi"); } } person.sayHi(); //"Hi"
属性名表达式:ES6允许用表达式作为属性名,但是一定要将表达式放在方括号内。
const obj = { ["he"+"llo"](){ return "Hi"; } } obj.hello(); //"Hi"
注意点:属性的简洁表示法 和 属性名表达式 不能同时使用,否则会报错。
const hello = "Hello"; const obj = { [hello] }; console.log(obj); //SyntaxError: Unexpected token } const hello = "Hello"; const obj = { [hello+"2"]:"world" }; console.log(obj); //{Hello2: "world"}
(2)对象的扩展运算符
拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。
(... 可以取出数组、对象、集合、Map、形参中的所有元素)
1、基本用法 (不是深拷贝,是浅拷贝,当对象中有引用数据的时候,是同一个空间)
let person = {name: "Amy", age: 15,arr:[1,2]}; let someone = { ...person }; console.log(someone,person.arr===someone.arr); //{name: 'Amy', age: 15, arr: Array(2)} true
2、可用于合并两个对象。同样适用于数组
let age = {age: 15}; let name = {name: "Amy"}; let person = {...age, ...name,n:100}; console.log(person); //{age: 15, name: "Amy",n:100} //属性名相同会覆盖 //对象的合并还可以用for循环来遍历,取key和value... var arr=[1,2,3] var arr2=[...arr] var arr3=[...arr,...arr2] console.log(arr3) //(6) [1, 2, 3, 1, 2, 3] //数组合并还可以用concat来合并==> arr.concat(arr1)
- 3、多个参数
//多个参数用arg来代表 // Function.prototype.mycall=function(self,...arg) { //self代表的是第一个参数,arg代表的是剩余的参数 // this() // } // obj.say.mycall(1,2,3) // obj2.tool.mycall(2) function fn(...arg) { console.log(arg) } fn(1,2,3) //(3) [1, 2, 3]
注意:自定义的属性和拓展运算符对象里面属性的相同的时候
- 自定义的属性在拓展运算符后面,则拓展运算符对象内部同名的属性将被覆盖掉。
let person = {name: "Amy", age: 15}; let someone = { ...person, name: "Mike", age: 17}; console.log(someone); //{name: "Mike", age: 17}
2.自定义的属性在拓展运算度前面,则变成设置新对象默认属性值。
let person = {name: "Amy", age: 15}; let someone = {name: "Mike", age: 17, ...person}; console.log(someone); //{name: "Amy", age: 15}
3.拓展运算符后面是空对象,没有任何效果也不会报错。
let a = {...{}, a: 1, b: 2}; console.log(a); //{a: 1, b: 2}
4.拓展运算符后面是null或者undefined,没有效果也不会报错。
let b = {...null, ...undefined, a: 1, b: 2}; console.log(b); //{a: 1, b: 2}
(3)对象的新方法
Object.is(value1, value2):用来比较两个值是否严格相等,与(===)基本类似。
Object.is("q","q"); // true Object.is(1,1); // true Object.is([1],[1]); // false Object.is({q:1},{q:1}); // false
与===的区别
//一是+0不等于-0 Object.is(+0,-0); //false +0 === -0 //true //二是NaN等于本身 Object.is(NaN,NaN); //true NaN === NaN //false
5、数组
工厂函数:不用new,就返回一个对象
(1)数组创建
Array.of():
将参数中所有值作为元素形成数组。
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] console.log(Array.of(4)); //[4] 不是length,而是数组里的值 // 参数值可为不同类型 console.log(Array.of(1, '2', true)); // [1, '2', true] // 参数为空时返回空数组 console.log(Array.of()); // []
Array.from():
将类数组对象或可迭代对象转化为数组。
// 参数为数组,返回与原数组一样的数组 console.log(Array.from([1, 2])); // [1, 2] // 参数含空位 console.log(Array.from([1, , 3])); // [1, undefined, 3]
参数说明 (这些参数一般不用,可了解):Array.from(arrayLike[, mapFn[, thisArg]])
arrayLike:想要转换的类数组对象或可迭代对象。
console.log(Array.from([1, 2, 3])); // [1, 2, 3]
mapFn:可选,map 函数,用于对每个元素进行处理,放入数组的是处理后的元素。
console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6]
thisArg:可选,用于指定 map 函数执行时的 this 对象。
let map = { do: function(n) { return n * 2; } } let arrayLike = [1, 2, 3]; console.log(Array.from(arrayLike, function (n){ return this.do(n); }, map)); // [2, 4, 6]
类数组对象:
一个类数组对象必须含有 length 属性,且元素属性名必须是数值或者可转换为数值的字符。
let arr = Array.from({ 0: '1', 1: '2', 2: 3, length: 3 }); console.log(); // ['1', '2', 3] // 没有 length 属性,则返回空数组 let array = Array.from({ 0: '1', 1: '2', 2: 3, }); console.log(array); // []
// 元素属性名不为数值且无法转换为数值,返回长度为 length 元素值为 undefined 的数组let array1 = Array.from({ a: 1, b: 2, length: 2 }); console.log(array1); // [undefined, undefined]
转换可迭代对象:
转换map
let map = new Map(); map.set('key0', 'value0'); map.set('key1', 'value1'); console.log(Array.from(map)); // [['key0', 'value0'],['key1','value1']]
转换set
let arr = [1, 2, 3]; let set = new Set(arr); console.log(Array.from(set)); // [1, 2, 3]
转换字符串 (字符串取里面的子串,一般用charAt)
let str = 'abc'; console.log(Array.from(str)); // ["a", "b", "c"]
(2)扩展的方法
查找:
find():查找数组中符合条件的元素,若有多个符合条件的元素,则返回第一个元素。
let arr = Array.of(1, 2, 3, 4); console.log(arr.find(item => item > 2)); // 3 // 数组空位处理为 undefined console.log([, 1].find(n => true)); // undefined
findIndex():查找数组中符合条件的元素索引,若有多个符合条件的元素,则返回第一个元素索引。
let arr = Array.of(1, 2, 1, 3); // 参数1:回调函数 // 参数2(可选):指定回调函数中的 this 值 console.log(arr.findIndex(item => item = 1)); // 0 // 数组空位处理为 undefined console.log([, 1].findIndex(n => true)); //0
填充:
fill():将一定范围索引的数组元素内容填充为单个指定的值。
let arr = Array.of(1, 2, 3, 4); // 参数1:用来填充的值 // 参数2:被填充的起始索引 // 参数3(可选):被填充的结束索引,默认为数组末尾 console.log(arr.fill(0,1,2)); // [1, 0, 3, 4]
遍历:
entrys():遍历键值对。 一般不用这个,一般用Object.keys()
for(let [key, value] of ['a', 'b'].entries()){ console.log(key, value); } // 0 "a" // 1 "b" // 不使用 for... of 循环 let entries = ['a', 'b'].entries(); console.log(entries.next().value); // [0, "a"] console.log(entries.next().value); // [1, "b"] // 数组含空位 console.log([...[,'a'].entries()]); // [[0, undefined], [1, "a"]]
keys():遍历键名。
for(let key of ['a', 'b'].keys()){ console.log(key); } // 0 // 1 // 数组含空位 console.log([...[,'a'].keys()]); // [0, 1]
values():遍历键值
for(let value of ['a', 'b'].values()){ console.log(value); } // "a" // "b" // 数组含空位 console.log([...[,'a'].values()]); // [undefined, "a"]
包含:
includes():数组是否包含指定值。注意:与 Set 和 Map 的 has 方法区分;Set 的 has 方法用于查找值;Map 的 has 方法用于查找键名。
// 参数1:包含的指定值 [1, 2, 3].includes(1); // true // 参数2:可选,搜索的起始索引,默认为0 [1, 2, 3].includes(1, 2); // false // NaN 的包含判断 [1, NaN, 3].includes(NaN); // true
嵌套数组转一维数组:
flat()
console.log([1 ,[2, 3]].flat()); // [1, 2, 3] // 指定转换的嵌套层数 console.log([1, [2, [3, [4, 5]]]].flat(2)); // [1, 2, 3, [4, 5]] // 不管潜逃多少层 console.log([1, [2, [3, [4, 5]]]].flat(Infinity)); // [1, 2, 3, 4, 5] // 自动跳过空位 console.log([1, [2, , 3]].flat());<p> // [1, 2, 3]
自己设置flat自调用函数 , 实现将数组的元素取出
var arr=[[10,20,30],40,50,[[60,70],80,[90,[110],100]]] Array.prototype.myflat=function(count=Infinity){ var arr=[] for(var i=0;i<this.length;i++){ // arr.push(this[i]) if(this[i].constructor==Array&&count>0){ // for(var j=0;j<this[i].length;j++){ // arr.push(this[i][j]) // } var newarr=this[i].myflat(count-1) for(var j=0;j<newarr.length;j++){ arr.push(newarr[j]) } }else{ arr.push(this[i]) } } return arr } var re2=arr.myflat(1) console.log(re2)
(3)扩展运算符(...)
复制数组:
let arr = [1, 2], arr1 = [...arr]; console.log(arr1,arr===arr1); // [1, 2] false // 数组含空位 let arr2 = [1, , 3], arr3 = [...arr2]; console.log(arr3,arr2===arr3); //[1, undefined, 3] false
合并数组: (数组相同的不会覆盖)
console.log([...[1, 2, 3],...[3, 4]]); //(5) [1, 2, 3, 3, 4]