es6学习笔记一数组(中)
接着上一篇,给大家再分享一些数组的其他方法.大家也可以去点击这里学习数组更多的方法
concat方法:
概述: concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回.
参数:
valueN:需要与原数组合并的数组或非数组值。
描述:
concat 方法将创建一个新的数组,然后将调用它的对象(this 指向的对象)中的元素以及所有参数中的数组类型的参数中的元素以及非数组类型的参数本身按照顺序放入这个新数组,并返回该数组.
concat方法并不修改调用它的对象(this 指向的对象) 和参数中的各个数组本身的值,而是将他们的每个元素拷贝一份放在组合成的新数组中.原数组中的元素有两种被拷贝的方式:
- 对象引用(非对象直接量):
concat方法会复制对象引用放到组合的新数组里,原数组和新数组中的对象引用都指向同一个实际的对象,所以,当实际的对象被修改时,两个数组也同时会被修改.
- 字符串和数字(是原始值,而不是包装原始值的 String 和Number 对象):
concat方法会复制字符串和数字的值放到新数组里.
示例:
var num1 = [1, 2, 3];
var num2 = [4, 5, 6];
var num3 = [7, 8, 9];
console.log(num1.concat(num2, num3));//组成新数组[1, 2, 3, 4, 5, 6, 7, 8, 9]; 原数组 num1, num2, num3 未被修改
console.log(num1);//[1, 2, 3]
console.log(num2);//[4, 5, 6]
console.log(num3);//[7, 8, 9]
console.log(num1.concat(null, [1,'a','b',,'f'])+'concat方法');//1,2,3,,1,a,b,,fconcat方法
通过以上代码,大家会发现concat不会改变调用该方法的数组,并且会被没有值的索引调用.
splice()方法:
概述: splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
参数:
start:从数组的哪一位开始修改内容。如果超出了数组的长度,则从数组末尾开始添加内容;如果是负值,则表示从数组末位开始的第几位。
deleteCount:整数,表示要移除的数组元素的个数。如果 deleteCount 是 0,则不移除元素。这种情况下,至少应添加一个新元素。如果 deleteCount大于start 之后的元素的总数,则从 start 后面的元素都将被删除(含第 start 位)。
itemN:要添加进数组的元素。如果不指定,则 splice() 只删除数组元素。
描述:
如果添加进数组的元素个数不等于被删除的元素个数,数组的长度会发生相应的改变。
示例:
示例1:
var num1 = [1, 2, 3];
var num2 = [4, 5, 6];
var num3 = [7,,9,10,11];
console.log(num1.splice(1,0,'4'));//[]
console.log(num1);//[1, "4", 2, 3]
console.log(num2.splice(1,1,'y'));//[5]
console.log(num2);//[4, "y", 6]
console.log(num3.splice(1,0,8));//[]
console.log(num3);//[7, 8, 3: 9, 4: 10, 5: 11]
示例2:
var num1 = [1, 2, 3];
var num2 = [4, 5, 6];
var num3 = [7,,9,10,11];
console.log(num1.splice(-1,0,'4'));//[]
console.log(num1);//[1, 2, "4", 3]
console.log(num2.splice(-1,1,'y'));//[5]
console.log(num2);//[4, "y", 6]
console.log(num3.splice(-1,0,8));//[]
console.log(num3);//[7, 8, 3: 9, 4: 10, 5: 11]
unshift方法:
概述: unshift() 方法在数组的开头添加一个或者多个元素,并返回数组新的 length 值。
参数:
element1, ..., elementN:要添加到数组开头的元素。
描述:
unshift 方法会在调用它的类数组(array-like)对象的开始位置插入给定的参数。
示例:
var num1 = [1, 2, 3];
var num2 = [4, 5, 6];
console.log(num1.unshift(1,'4'));//
console.log(num1);//[1, "4", 1, 2, 3]
console.log(num2.unshift(1,1,'4'));//
console.log(num2);//[1, 1, "4", 4, 5, 6]
push方法:
概述: push() 方法添加一个或多个元素到数组的末尾,并返回数组新的长度(length 属性值)。
描述:
elementN:被添加到数组末尾的元素。
示例:
示例1:
var num1 = [1, 2, 3];
var num2 = [4, 5, 6];
var num3 = [7, 8, 9,,11];
console.log(num1.push(num2));//4
console.log(num1+'push方法');//1,2,3,4,5,6push方法
console.log(num2);//[4, 5, 6]
console.log(num2.push(num3));//4
console.log(num2+'push方法');//4,5,6,7,8,9,,11push方法
console.log(num3);//[7, 8, 9, 4: 11]
示例2:
var num1 = [1, 2, 3];
var num2 = [4, 5, 6];
var num3 = [7, 8, 9,,11];
console.log(num3.push(num2));//6
console.log(num3+'push方法');//7,8,9,,11,4,5,6push方法
shift方法:
概述: shift() 方法删除数组的 第一个 元素,并返回这个元素。该方法会改变数组的长度。
描述:
shift 方法移除索引为 0 的元素(即第一个元素),并返回被移除的元素,其他元素的索引值随之减 1。如果length 属性的值为 0 (长度为 0),则返回 undefined。
shift 方法并不局限于数组:该方法亦可通过 call 或 apply 作用于对象上。对于不包含 length 属性的对象,将添加一个值为 0 的 length 属性。
示例:
var num1 = [1, 2, 3];
console.log(num1.shift());//
console.log(num1);//[2, 3]
pop方法:
概述: pop() 方法删除一个数组中的最后的一个元素,并且返回这个元素。
描述:
pop 方法删除一个数组中的最后一个元素,并且把这个删除掉的元素返回给调用者。
pop 被有意设计成具有通用性,该方法可以通过 call 或 apply 方法应用于一个类数组(array-like)对象上。
示例:
var num1 = [1, 2, 3];
console.log(num1.pop());//3
console.log(num1);//[1, 2]
copyWithin方法:
概述: copyWithin() 方法会浅拷贝数组的部分元素到同一数组的不同位置,且不改变数组的大小,返回该数组。
参数:
target:0 为基底的索引,复制序列到该位置。如果是负数,target 将从末尾开始计算。如果 target 大于等于 arr.length,将会不发生拷贝。如果 target 在 start 之后,复制的序列将被修改以符合 arr.length。
start:0 为基底的索引,开始复制元素的起始位置。如果是负数,start 将从末尾开始计算。如果 start 被忽略,copyWithin 将会从0开始复制。
end:0 为基底的索引,开始复制元素的结束位置。copyWithin 将会拷贝到该位置,但不包括 end 这个位置的元素。如果是负数, end 将从末尾开始计算。如果 end 被忽略,copyWithin 将会复制到 arr.length。
描述:
参数target,start和end 必须为整数。
如果start为负,则其指定的索引位置等同于length+start,length为数组的长度。end也是如此。
copyWithin方法不要求其this值必须是一个数组对象;除此之外,copyWithin是一个可变方法,它可以改变this对象本身,并且返回它,而不仅仅是它的拷贝。
copyWithin 就像 C 和 C++ 的 memcpy 函数一样,且它是用来移动 Array 或者 TypedArray 数据的一个高性能的方法。复制以及粘贴序列这两者是为一体的操作;即使复制和粘贴区域重叠,粘贴的序列也会有拷贝来的值。
copyWithin 函数是设计为通用的,其不要求其 this 值必须是一个数组对象。
The copyWithin 是一个可变方法,它不会改变 this 的 length,但是会改变 this 本身的内容,且需要时会创建新的属性。
示例:
console.log(['a','b','d','f'].copyWithin(-1));//["a", "b", "d", "a"]
console.log(['a','b','d','f'].copyWithin(-2));//["a", "b", "a", "b"]
console.log(['a','b','d','f'].copyWithin(-3));//["a", "a", "b", "d"]
console.log('俩参数');
console.log(['a','b','d','f','g'].copyWithin(0,-1));//["g", "b", "d", "f", "g"]
console.log(['a','b','d','f','g'].copyWithin(0,-2,-1));//["f", "b", "d", "f", "g"]
console.log(['a','b','d','f','g'].copyWithin(0,-3,-1));//["d", "f", "d", "f", "g"]
console.log(['a','b','d','f','g','e'].copyWithin(0,-5,-1));//["b", "d", "f", "g", "g", "e"]
//总结每当copy后的数组大于本数组的长度时,该数组的值=copy-1,原数据删除中间多余的
//例如 ['a','b','d','f','g','e'].copyWithin(0,-5,-1) 执行本应是(-5,-1) :b,d,f,g原来的数:b,d,f,g,e
//由于超出原来数组的长度删除 b,d,f,
//所以最终结果为:b,d,f,g,g,e
console.log('参数为正整数');
console.log(['a','b','d','f','g','e'].copyWithin(1,1,3));//["a", "b", "d", "f", "g", "e"]
console.log(['a','b','d','f','g','e'].copyWithin(2,1,5));//["a", "b", "b", "d", "f", "g"]
console.log(['a','b','d','f','g','e'].copyWithin(2,1,5));//["a", "b", "b", "d", "f", "g"]
console.log('哈哈哈222');
console.log(['a','b','d','f'].copyWithin(1,-1,-3));//["a", "b", "d", "f"]
es6学习笔记一数组(中)的更多相关文章
- es6学习笔记一数组(上)
最近公司没什么事情,我们老大让我看看es6,小颖就练习了下数组的各个方法,今天先给大家分享一部分.嘻嘻,希望对大家有所帮助. every方法: 概述: every() 方法测试数组的所有元素是否 ...
- ES6学习笔记之数组的扩展
✏️1. 扩展运算符 扩展运算符(spread)是三个点(...),将一个数组转为用逗号分隔的参数序列. 普通用法 console.log(...[1,2,3]);//1 2 3 数组拷贝(普通类型深 ...
- ES6学习笔记之数组
1.拓展运算符 含义 拓展运算符是三个点(...),功能是将数组或类数组对象展开成一系列用逗号隔开的值.如下面代码: console.log(...[1, 2, 3]); //1 2 3 consol ...
- es6学习笔记一数组(下)
entries() 方法: 概述: entries() 方法返回一个 Array Iterator(数组迭代) 对象,该对象包含数组中每一个索引的键值对. 示例: let arr = [&quo ...
- ES6学习笔记(数组)
1.扩展运算符:, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 用于函数调用 function add(x, y) { r ...
- Es6学习笔记(7)----数组的扩展
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 数组的扩展 1.扩展运算符:可以将数组转化成逗号隔离的单个参数...[1,2,3] //控制台运 ...
- ES6学习笔记<四> default、rest、Multi-line Strings
default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- ES6学习笔记之块级作用域
ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...
随机推荐
- 伪Textatea的构建(div+table),以及相应的滚动条问题与safari上的优化
在页面中创建一个不可编辑的文本块,并且文本块的篇幅较大,第一反应是创建一个textarea,并将它的disabled="disabled",并设置相应的scroll属性,就可以构建 ...
- topcoder SRM 628 DIV2 BishopMove
题目比较简单. 注意看测试用例2,给的提示 Please note that this is the largest possible return value: whenever there is ...
- PHP_SELF、 SCRIPT_NAME、 REQUEST_URI区别
$_SERVER[PHP_SELF], $_SERVER[SCRIPT_NAME], $_SERVER['REQUEST_URI'] 在用法上是非常相似的,他们返回的都是与当前正在使用的页面地址有关的 ...
- swift初体验
swift是一门类型安全的语言,同样也是基于c语言 那么c语言的一些类型也是实用的,不同的是:swift声明变量和常量是不一样的 let:用来修饰常量:var用来修饰变量 e.g: let num=1 ...
- CSS常用布局学习笔记
水平居中-行内元素 如果是文字和图片这类的行内元素,则在其父级元素上加上样式:text-align:center; 水平居中-定宽块元素 div{ width:100px; margin:0 auto ...
- JS /JQuery 获取变量为数字时 容易出错 可能不是数字类型
Javascript内置函数,原型为parseInt ( String s , [ int radix ] ),用于解析一个字符串,并返回一个整数. var $prod_kucun=$(this).n ...
- 移动端常用的meta
1. 禁止缩放:<meta name="viewport" content="width=device-width, initial-scale=1.0, maxi ...
- node、npm、gulp、bower、ionic下载及安装
node: http://nodejs.cn/ npm: 随node一起安装了 gulp: http://www.gulpjs.com.cn/docs/getting-started/ bower: ...
- CYQ.Data V4系列全面开源(2013-08-04)
致各位.NET开发者: 考虑到本人开源作品太多,个人维护力度有限,故自2013-08-04开始,开放原本需要授权使用的V4系列的最高版本V4.55的框架源码,同时也开放相对应的辅助工具源码,自此,V4 ...
- 微软“.Net社区虚拟大会”dotnetConf2015 第二天 无处不在的Xamarin
今天,微软召开了“.Net 社区虚拟大会”(dotnetConf),包括微软的 Scott Hanselman 和 Xamarin 的 Miguel De Icaza 在内的知名人士,都将在 Chan ...