es6学习笔记一数组(中)

时间:2021-10-13 14:41:39

接着上一篇,给大家再分享一些数组的其他方法.大家也可以去点击这里学习数组更多的方法

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学习笔记一数组(中)的更多相关文章

  1. es6学习笔记一数组(上)

    最近公司没什么事情,我们老大让我看看es6,小颖就练习了下数组的各个方法,今天先给大家分享一部分.嘻嘻,希望对大家有所帮助. every方法: 概述:    every() 方法测试数组的所有元素是否 ...

  2. ES6学习笔记之数组的扩展

    ✏️1. 扩展运算符 扩展运算符(spread)是三个点(...),将一个数组转为用逗号分隔的参数序列. 普通用法 console.log(...[1,2,3]);//1 2 3 数组拷贝(普通类型深 ...

  3. ES6学习笔记之数组

    1.拓展运算符 含义 拓展运算符是三个点(...),功能是将数组或类数组对象展开成一系列用逗号隔开的值.如下面代码: console.log(...[1, 2, 3]); //1 2 3 consol ...

  4. es6学习笔记一数组(下)

    entries() 方法: 概述:    entries() 方法返回一个 Array Iterator(数组迭代) 对象,该对象包含数组中每一个索引的键值对. 示例: let arr = [&quo ...

  5. ES6学习笔记(数组)

    1.扩展运算符:, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 用于函数调用 function add(x, y) { r ...

  6. Es6学习笔记(7)----数组的扩展

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 数组的扩展 1.扩展运算符:可以将数组转化成逗号隔离的单个参数...[1,2,3] //控制台运 ...

  7. ES6学习笔记&lt&semi;四&gt&semi; default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  8. ES6学习笔记&lt&semi;二&gt&semi;arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  9. ES6学习笔记之块级作用域

    ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...

随机推荐

  1. LUA 利用&num;遍历表的问题

    tb ={ } t = { "hello", , , 'w', , tb } --~ 1 hello --~ 2 1 --~ 3 2 --~ 4 w --~ 5 4 --~ 6 t ...

  2. iOS学习之C语言数据类型

    1.进制 0 1 2 3 4 5 6 7 8 9 A B C D E F 0X123(十六进制) 0123(八进制) 位权:单位数字的基本数值 2.数据类型 关键字    说明  字节大小 char  ...

  3. leetcode:Invert Binary Tree

    Invert a binary tree. 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1即反转二叉树,代码如下: /** * Defin ...

  4. &lbrack;置顶&rsqb; gridview中嵌套gridview(并实现子gridview的数据绑定),页面传值,加密,数据绑定

    先来张效果图 gridview 中嵌套gridview的原理是这样的,在父gridview中建一个摸板列,然后再模版列当中在放入子gridview,然后再父gridview的OnRowDataBoun ...

  5. silverlight依赖属性

    依赖属性(Dependency Property)和附加属性(Attached Property) 参考 http://www.cnblogs.com/KevinYang/archive/2010/0 ...

  6. Highlight On Mouseover Effect With JQuery

    How to get the xpath by clicking an html element How to get the xpath by clicking an html element Qu ...

  7. &lowbar;&lowbar;doPostBack初识

    周五在公司看到有看到Request.Params["__EVENTARGUMENT"]的代码不解,不解遂上网查找,发现一篇文章<Understanding the JavaS ...

  8. Heap Operations(模拟题)

     Heap Operations time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  9. 开始JAVA编程的敲门砖——JAVA开发环境搭建

    从头开始的java编程--JAVA开发环境搭建 一.什么是java的开发环境? 顾名思义java的开发环境是提供并保证整个java程序开发运行的必要的环境,搭建java开发环境是开始java编程的敲门 ...

  10. vuex 改变状态值得命名问题

    今天在做vuex的状态的时候 发现了个奇葩的问题,后面解决了,在改变状态的值得时候 传值的名称 不要和定义的状态的名称值相同,要不然会报错,如图所示 也就是password的名称不能相同,要不监测不到 ...