ES6 之 数组的扩展
ES5
检测数组
let arr = [1,2,3,4]
Array.isArray(arr)
arr instanceof Array
转换方法
arr.toLocaleString()
arr.toString()
arr.valueOf()
栈方法(后进先出)
arr.push(item1,item2,....,itemx); // 添加元素,返回值为数组的长度,并且原数组会发生变化
arr.pop(item1,item2,....,itemx); // 删除并返回数组的最后一个元素,原数组会发生变化
队列方法(先进先出)
// 向数组的开头添加一个或更多元素,并返回新的长度。【原数组会发生变化】
数组名.unshift(newelement1,newelement2,....,newelementX);
// 删除并返回数组的第一个元素 【原数组会发生变化】
数组名.shift();
数组的重排序——反转 和 排序
// 颠倒数组中元素的顺序。返回颠倒后的数组 【原数组会发生变化】
数组名.reverse(); // 对数组的元素进行排序
数组名.sort(); // 默认排序顺序是根据字符串Unicode编码 【了解】 数组名.sort(function(a,b){ //【重点】
return a - b; // 升序(从小到大)
})
数组名.sort(function(a,b){ //【重点】
return b - a; // 降序(从大到小)
})
操作方法
// 数组拼接
arr.concat(arr01,arr02,...) // 返回新的数组 // 从已有的数组中返回选定的元素。【截取后,不会改变原数组,而是返回新的数组】
数组名.slice(start,end); // 只有start,将会截取到数组末尾
// 如果start
的值为负数,假如数组长度为length
,则表示从 length+start 的位置开始复制,此时参数 end 如果有值,只能是比 start 大的负数,否则将返回空数组。
console.log([1,2,3].slice(-1));//[3] // 向/从数组中添加/替换项目,然后返回被替换出来的项目。【原数组会发生变化】
数组名.splice(index,howmany,item1,.....,itemX)
参数:
index 从哪个索引位置开始删 数字
howmany 替换几个 数字
item1,.....,itemX 替换的数据(可以是多个) 可选
位置方法
// 返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1
数组名.indexOf(searchElement); 【用的较多】
// 返回指定元素在数组中的最后一个的索引,如果不存在则返回 -1。从数组的后面向前查找
数组名.lastIndexOf(searchElement);
数组元素的拼接
// 用于把数组中的所有元素放入一个字符串。
数组名.join(separator);
var arr = [ 1, 2, 4, 90, 67, 5, 434, 64];
var str = arr.join('❤');
console.log( typeof arr);//object类型
console.log( str);
迭代方法
// 数组遍历
数组名.forEach(function(value,index,currentArray){
console.log(value);
});
/*第一个参数是遍历的数组内容
第二个参数是对应的索引
第三个参数数数组本身 */ // 过滤出符合筛选条件的元素,返回一个新的数组
数组名.filter(function(value,index,currentArray){
return 条件; // 如:return value >= 1000;
}); // 验证数组中的每一个元素是否都符合指定的条件,返回布尔值
数组名.every(function(value,index,currentArray){
return 条件; // 如:return value >= 1000;
}); // 验证数组中的元素,是否有符合指定条件的,返回布尔值
数组名.some(function(value,index,currentArray){
return 条件; // 如:return value >= 1000;
}); // 遍历数组中的每一个元素,更改后存入一个新的数组中,返回一个新的数组
数组名.map(function(value,index,currentArray){
return 操作; // 如:return value * 2;
});
缩小方法
// reduce() 和 reduceRight()
// 这俩个方法都会迭代数组的所有项,然后构建一个最终返回的值
// reduce() 从数组的第一项开始,逐个遍历,reduceRight()从数组的最后一项开始,逐个遍历
arr = [1, 2, 3, 4, 5]
/*
prev, 前一项
cur, 当前项
index, 索引
array 当前数组
*/
arr.reduce(function(prev, cur, index, array) {
return prev + cur;
}) // 15 原数组不发生改变 arr.reduceRight(function(prev, cur, index, array) {
return prev + cur;
}) // 15 原数组不发生改变
ES6
扩展运算符 ...
let arr = [1, 9, 3, 4, 5, 7];
console.log(...arr); // 讲一个数组转化为用逗号分隔的参数序列
// 替代apply方法
Math.max.apply(null,arr)
console.log(Math.max.apply(null,arr));
Math.max(...arr)
console.log(Math.max(...arr));
copyWithin() 复制数组项
// 数组实例的copyWithin()
// 数组实例的copyWithin()方法会在当前数组内部将指定位置的成员复制到其他位置(会覆盖原理成员)
// 然后返回新数组,也就是说,使用这个方法会改变修改当前数组
// Array.prototype.copyWithin(target, start = 0, end = this.length)
// target 可选,从该位置替换数据
// start可选,从该位置读取数据,默认是0
// end 可选,到该位置前停止读取数据,默认等于数组长度。如果是负值,表示倒数 console.log([1,2,3,4,5,6].copyWithin(0, 4)); // 5 6 覆盖 1 2 => [5, 6, 3, 4, 5, 6]
找到符合条件的数组项 find() findIndex()
// 数组实例的find() 和 findIndex()
// .find() 找出第一个符合条件的数组成员,参数是一个回调函数
// 所有数组成员一次执行该回调函数,直到找到第一个返回为true的成员,然后返回该成员
// 如果么有符合从条件的成员,则返回undefined。 findIndex() 返回 索引
let arr11 = [1, 9, 3, 4, 5, 7];
let a = arr11.find( (n) => n > 8)
console.log(a); //
let b = arr11.findIndex( (n) => n > 8)
console.log(b); //
数组实例的fill() 给定值 填充到一个数组中,返回值为新数组
let c = [1, 2, 6].fill('aaa')
console.log(c); // ["aaa", "aaa", "aaa"]
数组实例的 entries() keys() values() -- 用于遍历数组
// 他们三个都返回一个遍历器,for ··· of ··· 循环遍历
// entries() 遍历 键值对
// keys() 遍历 键
// values() 遍历 值
let arr22 = [1, 9, 7];
for(let index of arr22.keys() ) {
console.log(index);
}
for(let value of arr22.values() ) {
console.log(value);
}
for(let entry of arr22.entries() ) {
console.log(entry); // [0, 1] 键和值组成数组
}
数组实例的includes()
// Array.prototype.includes() 方法返回的是一个布尔值,表示数组是否包含给定的值
console.log([1, 2, 3].includes(2)); // true
console.log([1, 2, NaN].includes(NaN)); // true
数组的空位
// 空位不是undefined
console.log(Array(3)); // [empty × 3] // forEach(),filter(),every()和some() 都会跳过空位
// map() 会跳过空位,但是会保留这个值
// join() 和 toString() 会将空位视为undefined
// 而undefined 和 null 会被处理成空字符串
// ES6 明确将空位转化为 undefined
迭代方法
// 数组遍历
数组名.forEach(function(value,index,currentArray){
console.log(value);
});
/*第一个参数是遍历的数组内容
第二个参数是对应的索引
第三个参数数数组本身 */
let arr = [1,2,3,4,5,6,5,4];
var everyResult = arr.every(function(item,index,array){
return (item > 2)
})
// 判断数组中的每一项都符合return后的条件,返回 true & false
console.log(everyResult) var someResult = arr.some(function(item,index,array){
return (item > 2)
})
// 判断数组中的每一项只要有一项符合return后的条件,返回 true & false
console.log(someResult) var filterResult = arr.filter(function(item,index,array){
return (item > 2)
})
// 判断数组中的项符合条件,符合的项组成一个新的数组
console.log(filterResult) var mapResult = arr.map(function(item,index,array){
return (item - 2)
})
// 对数组的每一项进行相同的计算,返回新数组
console.log(mapResult)
Array
Array.from() 将类数组对象转化为真正的数组
Array.of() 将一组值转化为数组
//类似数组的对象 和 可遍历数组对象
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
'3': 'd',
'length': 4
}
var arr1 = [].slice.call(arrayLike)
console.log(arr1); // ["a", "b", "c", "d"]
var arr2 = Array.from(arrayLike)
console.log(arr2); // ["a", "b", "c", "d"] // Array.of() 将一组值转化为数组
let arr3 = Array.of(1, 5, 5, 8)
console.log(arr3); // [1, 5, 5, 8]
ES6 之 数组的扩展的更多相关文章
- ES6对数组的扩展(简要总结)
文章目录 数组的扩展(ES6) 1. 扩展运算符 2. Array.from 3. Array.of() 4. copyWithin() 5. find() 和 findIndex() 6. fill ...
- ES6对数组的扩展
ECMAScript6对数组进行了扩展,为数组Array构造函数添加了from().of()等静态方法,也为数组实例添加了find().findIndex()等方法.下面一起来看一下这些方法的用法. ...
- 【ES6】数组的扩展——扩展运算符
1.扩展运算符[三个点(...)将一个数组转为用逗号分隔的参数序列] 作用:用于函数调用 function add(x, y) { return x + y; } const numbers = [2 ...
- 【ES6】数组的扩展
1.Array.from(): 将伪数组对象和遍历的对象转为真数组 如果一个对象的键都是正整数或者0,并且有 Length属性,那么这个对象很想数组,称它为伪数组. 伪数组: let obj = { ...
- 数组的复制及ES6数组的扩展
一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只 ...
- es6数组的扩展
数组扩展运算符 ...(三个点) const demoArr=[0,1,2,3,4] console.log(...demoArr) // 0 1 2 3 4 // 他把一个数组用逗号分隔了出来 // ...
- ES6的新特性(8)——数组的扩展
数组的扩展 扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...
- ES6学习(三):数组的扩展
chapter08 数组的扩展 8.1 扩展运算符 8.1.1 扩展运算符的含义 ... 如同rest运算符的逆运算,将一个数组转换为用逗号分隔的参数序列. console.log(...[1, 2, ...
- Es6学习笔记(7)----数组的扩展
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 数组的扩展 1.扩展运算符:可以将数组转化成逗号隔离的单个参数...[1,2,3] //控制台运 ...
随机推荐
- crashpad 应用程序异常解决方案
衡量某个应用程序的稳定性的一个重要指标即它自身的崩溃率的统计,但是如何判断应用程序崩溃,且上报崩溃产生的dmp文件进行分析? google提供了一套开源的系统 Crashpad,详细了解参见 http ...
- Linux间传输文件 scp
scp scp使用ssh来传输数据,使用相同的认证方式,所以配置好ssh后,根据用户名和密码来读写远程文件.基本命令如下,输完命令,回车,输入远程用户对应的密码: 从本机复制到远程: 文件:scp F ...
- leetcode1302 Deepest Leaves Sum
""" Given a binary tree, return the sum of values of its deepest leaves. Example 1: I ...
- C# 控制台应用程序从外部传参运行和调试
参考:/*十有三博客*/ 新建一个用于演示的控制台应用程序项目,然后在Program.cs的入口Main方法里编写如下代码 foreach (var arg in args) { Console.Wr ...
- Django(七)模型:字段属性、字段选项(参数)
一.模型类属性命名限制 参考:https://docs.djangoproject.com/zh-hans/3.0/topics/db/models/ 1)不能是python的保留关键字. 2)不允许 ...
- 2.15 使用web 编写一个简单记事本
首先陈列问题 (等待解决): 1. 界面是使用 H5 iframe 标签合并而成的,当窗口化之后点击任务栏,显示的内容会在任务栏的下边 希望可以找其他方式替代 (其他方法不熟练,不能应用) 如图 ...
- 141-PHP类的抽象方法和继承实例(一)
<?php abstract class ren{ //定义人类 //定义成员属性 protected $name=''; protected $age=0; //定义成员方法 public f ...
- 097-PHP循环使用next取数组元素二
<?php function return_item($arr, $num = 0) { //定义函数 if ($num < 0) { end($arr); //将数组指针指向最后一个元素 ...
- javaweb利用ajax使登录窗口不跳转页面实现对账号密码的判断
和上一篇判断用户名是否被占用不跳转页面类似!利用ajax实现跳转,要导入jquery文件库!具体代码我会贴出来,注释在里面!!可以观摩一手!(代码我也留下链接,如果失效,评论补发,代码可能导入也无法使 ...
- Sklearn K均值聚类
## 版权所有,转帖注明出处 章节 SciKit-Learn 加载数据集 SciKit-Learn 数据集基本信息 SciKit-Learn 使用matplotlib可视化数据 SciKit-Lear ...