ES6基础语法之数组拓展
一、Array.of()
将参数中所有值作为元素形成数组：
console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]
参数的值可以为不同的类型：
console.log(Array.of(1, '2', true)); // [1, '2', true]
参数为空时返回空数组：
console.log(Array.of()); // []
注意：
let arr1 = new Array(10); //是一个长度为10的空数组 let arr2 = Array.of(10); //长度为1,第一个元素值为10的数组
二、Array.from()
参数为数组,返回与原数组一样的数组：
console.log(Array.from([1, 2])); // [1, 2]
参数含空位：
console.log(Array.from([1, , 3])); // [1, undefined, 3]
对数组元素进行处理,形成新的数组：
let arr = Array.from([1,2,3],n=>n*2); console.log(arr); //[2,4,6]
利用函数处理数组,形成新的数组(奇数+1,偶数不变的规则)：
//方案一:
let arr1 = [1,2,3,4,5,6];
let arr2 = Array.from(arr1,function(n){
if(n%2==1)
return n+1;
else
return n;
});
console.log(arr2);
//方案二:
function f(n)
{
if(n%2==1)
return n+1;
else
return n;
}
let arr1 = [1,2,3,4,5,6];
let arr2 = Array.from(arr1,function(n){
return f(n);
});
console.log(arr2);
三、类数组对象转换
将类似数组的对象转换成真正的数组：
let arr = Array.from({
0: "jack",
1: "rose",
2: "jordan",
length: 3
});
console.log(arr); // ["jack", "rose", "jordan"]
没有 length 属性,则返回空数组：
let arr = Array.from({
0: "jack",
1: "rose",
2: "jordan",
});
console.log(arr); // []
元素属性名不为数值且无法转换为数值，返回长度为length元素值为undefined的数组：
let arr = Array.from({
a: "jack",
b: "rose",
c: "jordan",
length: 3
});
console.log(arr); // [undefined, undefined,undefined]
四、转换可迭代对象
转换map：
let map = new Map();
map.set('23', '乔丹');
map.set('33', '皮蓬');
map.set('99', '罗德曼');
console.log(Array.from(map)); //[['23','乔丹'],['33','皮蓬'],['99','罗德曼']]
转换set：
let set = new Set();
set.add("乔丹");
set.add("皮蓬");
set.add("罗德曼");
console.log(Array.from(set)); //["乔丹","皮蓬","罗德曼"]
转换字符串：
let str = "hello!"; console.log(Array.from(str)); //['h','e','l','l','o','!']
五、扩展运算符...
复制数组内容：
//方案一：复制数组内容 // let arr1 = [1,2,3,4]; // let arr2 = [...arr1]; // console.log(arr2); // console.log(arr1 === arr2); //false(arr1和arr2引用不同,只是值相同) //方案二：直接数组名赋值 // let arr1 = [1,2,3,4]; // let arr2 = arr1; // console.log(arr2); // console.log(arr1 === arr2); //true(arr1和arr2的引用相同)
合并数组：
let arr1 = [1,2,3,4]; let arr2 = [1,2,3,4]; let arr = [...arr1,...arr2]; console.log(arr);
作为函数参数(可以接受可变长度的参数)：
function Add(...items)
{
let sum = 0;
for(let item of items)
{
sum += item;
}
return sum;
}
let result1 = Add(1,2,3);
let result2 = Add(1,3,5,7,9);
console.log(result1);
console.log(result2);
六、扩展方法
查找：
//查找find()和findIndex() //find():查找数组中符合条件的元素,若有多个符合条件的元素，则返回第一个元素。 // let arr = ["乔丹","皮蓬","罗德曼"]; // let r = arr.find(item=>item == "皮蓬"); // console.log(r); //皮蓬 // let arr = ["乔丹","皮蓬","罗德曼"]; // let r = arr.find(item=>item == "姚明"); // console.log(r); //undefined // let arr = [1,2,3,4]; // console.log(arr.find(item => item > 2)); // 3 //findIndex():查找数组中符合条件的元素索引，若有多个符合条件的元素，则返回第一个元素索引。 let arr = [10,20,30,40]; console.log(arr.findIndex(item => item > 10)); // 1
填充：
//fill():将一定范围索引的数组元素内容填充为单个指定的值。 // 参数1：用来填充的值 // 参数2：被填充的起始索引 // 参数3(可选)：被填充的结束索引，默认为数组末尾 // let arr = [1,2,3,4]; // arr.fill(0,1,2); // console.log(arr); //copyWithin():将一定范围索引的数组元素修改为此数组另一指定范围索引的元素。 // 参数1：被修改的起始索引 // 参数2：被用来覆盖的数据的起始索引 // 参数3(可选)：被用来覆盖的数据的结束索引，默认为数组末尾 // let arr = [1,2,3,4]; // arr.copyWithin(0,2,4); // console.log(arr); // [3, 4, 3, 4] // let arr = [1, 2, ,4]; // arr.copyWithin(0, 2, 4); // console.log(arr); // [, 4, , 4] //第一个参数为负数表示倒数 // let arr = [1,2,3,4]; // arr.copyWithin(-2,0); // console.log(arr); // [1, 2, 1, 2]
包含：
//includes():数组是否包含指定值。 // 参数1：包含的指定值 // let arr = [1,2,3]; // let r = arr.includes(1); // true // console.log(r); // 参数2：可选，搜索的起始索引，默认为0 let arr = [1,2,3]; let r = arr.includes(1, 1); // false console.log(r);
嵌套数组转一维数组：
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]
到此这篇关于ES6基础语法之数组拓展的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
ES6新增的数组知识实例小结
本文实例讲述了ES6新增的数组知识.分享给大家供大家参考,具体如下: 1.JSON数组格式转换 JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式,json数组格式如下: let json = { '0': '男', '1': '女', length:3 } 这就是一个标准的JSON数组格式,跟普通的JSON对比是在最后多了一个length属性.只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组. 把上边的JSON代码使用Array.from(xxx)来转换成数组,
-
es6数组includes()用法实例分析
本文实例讲述了es6数组includes()用法.分享给大家供大家参考,具体如下: Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似.ES2016引入了该方法. [1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // true [1, 2, NaN].includes(NaN) // true 该方法的第二个参数表示搜索的起始位置,默认为0.如果第二个参数为负
-
es6数组的flat()，flatMap()函数用法实例分析
本文实例讲述了es6数组的flat(),flatMap()函数用法.分享给大家供大家参考,具体如下: 数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组"拉平",变成一维数组.该方法返回一个新数组,对原数据没有影响. [1, 2, [3, 4]].flat() // [1, 2, 3, 4] 上面代码中,原数组的成员里面有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置. flat()默认只会"拉平"一层,如果想要&
-
关于ES6中数组新增的方法详解
目录 在ES6之前,创建数组的方式有2种: Array.find((item,indexArr,arr)=>{}) 掌握 Array.findIndex((item, index, Arr) => {}) 掌握 Array.flat()用于拉平嵌套的数组[推荐-超级好用] Array.at()返回对应下标的值[超级好用] Array.from() [掌握] Array.of() 了解 Array.includes的使用 扩展运算符 (...) 数组的空位 总结 在ES6之前,创建数组的方式有2
-
ES6数组与对象的解构赋值详解
本文实例讲述了ES6数组与对象的解构赋值.分享给大家供大家参考,具体如下: 数组的解构赋值 基本用法 ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称之为解构(Destructuring) // 以前为变量赋值,只能直接指定值 var a = 1; var b = 2; var c = 3; // ES6允许写成这样 var [a,b,c] = [1,2,3]; 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值. 下面是一些使
-
ES6 新增的创建数组的方法(小结)
在ES6之前,创建数组的方式有2种: 一: 通过数组字面量 let array = [1,2,3]; console.log(array);//[1,2,3] 二: 通过new Array()创建数组 let array = new Array(1, 2, 3); console.log(array); //[1,2,3] 在大多数情况下new Array()运行良好: let array = new Array(1, 2); console.log(array.length); //2 con
-
es6数组之扩展运算符操作实例分析
本文实例讲述了es6数组之扩展运算符操作.分享给大家供大家参考,具体如下: 扩展运算符(spread)是三个点(-).它好比rest参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] 该运算符主要用于函数调用. function push(array, ...it
-
ES6函数和数组用法实例分析
本文实例讲述了ES6函数和数组用法.分享给大家供大家参考,具体如下: 1.对象的函数解构 ES6为我们提供了这样的解构赋值使在前后端分离时,后端返回来JSON格式的数据,前端可以直接把这个JSON格式数据当作参数,传递到函数内部进行处理.比如: let json = { a:'es6', b:'es5' } function fun({a,b='es5'}){ console.log(a);//es6 console.log(b);//es5 } fun(json); 结果为: 2.数组的函数解
-
es6 filter() 数组过滤方法总结
Array.every(x=>x)是每一个都要满足 Array.some(x=>x)是有一个满足. Array.find(findIndex),返回符合条件的第一个值. Array.filter(过滤成新的数组) 数组的方法分为两类 1)改变原数组 push,pop,shift,unshift,sort,reverse,splice 2)不改变原数组concat,join--> split,toStringpush:从数组最后一位开始加数据 pop:把数组最后一位剪切 shift:在数组
-
ES6基础语法之数组拓展
一.Array.of() 将参数中所有值作为元素形成数组: console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 参数的值可以为不同的类型: console.log(Array.of(1, '2', true)); // [1, '2', true] 参数为空时返回空数组: console.log(Array.of()); // [] 注意: let arr1 = new Array(10); //是一个长度为10的空数组 let arr2 = A
-
ES6基础语法之Map和Set对象
一.Map对象 Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. Map中的键值是有序的. let myMap = new Map(); myMap.set("23","乔丹"); myMap.set("33","皮蓬"); let name = myMap.get("33"); console.log(name); //皮蓬 let has = myMap.has("
-
ES6基础语法之对象用法
一.对象和属性和方法 JavaScript中对象: var person={name:"Jack",age:20}; 或: var name = "jack"; var age = 20; var person = {name:name,age:age}; console.log(person.age); //20 ES6中的简洁表示: let [name,age]=["jack",20]; let person = {name,age}; //
-
ES6基础语法之字符串扩展
一.字符串的遍历 JS中遍历字符串: var str = "hello,world"; for(var i = 0;i<str.length;i++) { console.log(str[i]); } ES6扩展的遍历字符串方法: let str = "hello,world"; for(let c of str) { console.log(c); } 二.字符串识别.重复.补全 字符串识别: ES6 之前判断字符串是否包含子串,用 indexOf 方法,E
-
ES6基础语法之模块化介绍
ES6 引入了模块化, ES6 的模块化分为导出(export) @与导入(import)两个模块. ES6模块化特点: (1)ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;. (2) 模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等. (3) 每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域. (4) 每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取. 一.export
-
ES6基础语法之class类介绍
一.class基本语法 JavaScript 语言中,编写一个学生类,代码如下:(prototype可以个对象添加属性和方法) function Student(stuno,stuname) { this.stuno = stuno; this.stuname = stuname; } Student.prototype.stusex = ""; Student.prototype.sayHi = function() { console.log("大家好,我是"+
-
ES6基础语法之函数介绍
一.函数参数的扩展 ES6支持参数的默认值: function fn(name,age,sex="男") { console.log(`大家好,我是${name},性别${sex},今年${age}岁!`); } fn("刘德华",45); //大家好,我是刘德华,性别男,今年45岁! 传递undefined,取默认值: function fn(name,sex="男",age) { console.log(`大家好,我是${name},性别${
-
ES6基础之数组和对象的拓展实例详解
本文实例讲述了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 a
-
ES6基础之字符串和函数的拓展详解
本文实例讲述了ES6基础之字符串和函数的拓展.分享给大家供大家参考,具体如下: 字符串的拓展 1.ES6为字符串添加了遍历器接口,因此可以使用for...of循环遍历字符串 2.字符串新增的 includes().startsWith().endsWidth() 三个方法用于判断某一字符串是否包含于另一字符串 includes():返回布尔值,表示源字符串中是否包含参数字符串. startsWith():返回布尔值,表示参数字符串是否在源字符串的头部. endsWith():返回布尔值,表示参数
-
Java基础语法之二维数组详解
一.二维数组 进入正题之前.首先为了便于大家理解,我画了一个图: xx枪战游戏中, 我是一个刚刚注册账号的小白,系统送了我两把枪,此时,我的武器库只有这么一层(可以理解为一位数组,枪就是对应的数组中对应的元素) 经过艰苦卓绝的战斗,终于有了一笔钱,现在我打算配置好的游戏装备,我现在有了一个枪柜,它可以存放三层的枪械,每一层都可以放多把武器(这个就是二维数组,有多层,每层都是一个一维数组) 随着游戏时长和我的高超技术,获取游戏装备的效率越来越高了,一个枪柜已经存不下了,于是,我就有了多个枪柜(这个