GVKun编程网logo

带有扩展运算符的 javascript 数组和字符串及其合并行为（js扩展运算符原理）

26

在这里，我们将给大家分享关于带有扩展运算符的javascript数组和字符串及其合并行为的知识，让您更了解js扩展运算符原理的本质，同时也会涉及到如何更有效地day50javaScript数字和字符串

在这里，我们将给大家分享关于带有扩展运算符的 javascript 数组和字符串及其合并行为的知识，让您更了解js扩展运算符原理的本质，同时也会涉及到如何更有效地day50 java Script 数字和字符串 布尔值和数组 运算符 条件判断和三元运算、ECMAScript 6 学习之路 （ 六 ） 扩展运算符 和 reset 运算符、ECMASCRIPT 6 实战之 扩展运算符、javascript ES6 新特性之 扩展运算符 三个点 ...的内容。

本文目录一览：

带有扩展运算符的 javascript 数组和字符串及其合并行为（js扩展运算符原理）

带有扩展运算符的 javascript 数组和字符串及其合并行为（js扩展运算符原理）

如何解决带有扩展运算符的 javascript 数组和字符串及其合并行为？

let str = "harsh"

let strArray = [...str]

//strArray is Now [ ''h'',''a'',''r'',''s'',''h'' ]

let addEmptyArr = strArray + []

// addEmptyArr is Now ''h,a,r,s,h''

let addSameArr = strArray + strArray

// addSameArr is Now ''h,hh,h''

为什么数组和字符串合并会显示这种类型的行为

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

day50 java Script 数字和字符串 布尔值和数组 运算符 条件判断和三元运算

day50 java Script 数字和字符串 布尔值和数组 运算符 条件判断和三元运算

上节回顾：

day50

1.前情回顾

    CSS属性:
        float浮动的规则
            1. 浮动规则:
                浮动只控制自己
                如果前面的标签也是浮动的,就挨着放
                如果前面的标签不浮动,则下方摆放
                
        如果把块级标签设置成浮动,他们就能在一行显示(inline-block)
        如果把内联标签设置成浮动,他们就可以设置长和宽
        
        float清除浮动(父标签塌陷)
            clear
                none
                left
                right
                both
            
            .clearfix:after {    ******
                content: "";
                display: "block";
                clear:both;
            }
            
        定位(position)  -- 根据谁来做定位
            static
            relative(相对定位)
            
            absolute(绝对定位)
            
            fixed(固定)
            
                返回顶部
                    .returnTop {
                        position: "fixed";
                        right: 10px;
                        bottom: 10px;
                    }
                模态框(弹出框那个遮罩层)
                    .cover {
                        position: "fixed";
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        background-color: rgba(0, 0, 0, 0.3)
                    }
                
                z-index
                    
                    .modal {
                        width: 800px;
                        height: 400px
                        position: "fixed";  
                        /*固定在屏幕中间*/
                        
                        top:50%;
                        left: 50%;
                        
                        margin-top: -200px;
                        margin-left: -400px;                    
                        }
            
        display
            none         不显示
            block        当成块级标签  独占一行 可以设置长和宽
            inline       当成内联标签 可以放在一行
            inline-block 既能显示在一行又能设置长和宽 
            
        :before和:after
        border-radius   画圆(把值设置成边框的一半)
        list-style-type: none (通过设置CSS属性不显示列表自带样式)
上节回顾 课堂笔记 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>抽屉</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #eeeeee;
        }
        .head {
            height: 45px;
            width: 100%;
            background-color: #2459a2;
            position: fixed;
            top: 0;
        }
        .head-content {
            width: 1016px;
            height: 45px;
            margin: 0 auto;
        }
        
        .head-content>a {
            width: 121px;
            height: 23px;
            background: url("logo.png") no-repeat 0 0;
            float: left;
            margin-top: 11px;
        }

        .head-content ul>li {
            float: left;
            line-height: 45px;
            margin-left: 10px;
        }

        .head-content ul>li>a {
             padding: 11px;
        }

        a {
            text-decoration: none;
            color: rgb(192, 205, 223);
        }

        .head-content ul>li>a:hover {
            color: white;
            background-color: rgb(57, 107, 179);
        }

        .main {
            margin-top: 45px;
        }
        /*页面主体部分*/
        .main-content {
            width: 960px;
            height: 1000px;
            background-color: white;
            margin: 0 auto;
            padding: 5px 15px;
        }

        .content-left {
            width: 630px;
            height: 1000px;
            float: left;
        }

        .content-right {
            width: 300px;
            height: 1000px;
            background-color: green;
            float: right;
        }
        .top-left {
            padding: 15px 0;
            display: inline-block;
        }

        .top-left > a {
            display: inline-block;
            min-width: 60px;
            height: 26px;
            text-align: center;
            margin-right: 10px;
            color: rgb(51, 102, 178);
            font-weight: 700;
            line-height: 26px;
        }
        .icon {
            background: url("http://dig.chouti.com/images/tip.png?v=2.9") no-repeat 0 0 ;

        }
        .ty {
            background-position: 0 -299px;
        }
        .top {
            border-bottom: 1px solid rgb(204, 220, 239);
        }

        .top-center {
            display: inline-block;
        }
        .new-button {
            float: right;
            padding: 10px 40px;
            background-color: rgb(132, 164, 43);
            color: white;
            border: none;
            margin-top: 10px;
        }
        .new-button:hover {
            background-color: #8eb031;
        }
        .item-img {
            float: right;
            padding-top: 15px;
        }
        .item-img> img {
            width: 60px;
            height: 60px;
        }
        .item-content {
            padding-top: 15px;
        }

        .part2 span {
            display: inline-block;
            height: 18px;
            width: 18px;
            background: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13") no-repeat 0 0;
        }

        .part2 .thumb {
            background-position: 0 -40px;
        }
        .part2 .thumb:hover {
            background-position: 0 -20px;
        }
    </style>
</head>
<body>

<!--页面头部开始-->
<div class="head">
    <div class="head-content">
        <a href=""></a>
        <ul type="none">
            <li><a href="">全部</a></li>
            <li><a href="">随便</a></li>
            <li><a href="">图片</a></li>
            <li><a href="">43区</a></li>
            <li><a href="">挨踢1024</a></li>
            <li><a href="">单子</a></li>
        </ul>
    </div>
</div>
<!--页面头部结束-->

<!--页面主体开始-->
<div class="main">
    <div class="main-content">
        <!--主题内容左侧开始-->
        <div class="content-left">
            <div class="top">
                <div class="top-left">
                    <a href="" class="icon ty">最新</a>
                    <a href="" class="icon ty">最热</a>
                    <a href="" class="">最少儿不宜</a>
                </div>
                <div class="top-center">
                    <a href="">即时排序</a>
                    <a href="">24小时</a>
                    <a href="">3天</a>
                </div>
                <input class="new-button" type="button" value="+发布">
            </div>
            <div class="content-list">
                <div class="item">
                    <div class="item-img">
                        <img src="http://img3.chouti.com/CHOUTI_20171225/9F06C86505F648E6BBACED6900AC4674_W580H346=C120x120.jpg?quality=80" alt="">
                    </div>
                    <div class="item-content">
                        <div class="part1">
                            <a href="">QQ和抖音退出什么玩意儿我也写不出来了</a>
                            <div class="area-summary">
                                <span class="summary">一个大概率会发生的事情是，舞蹈将成为2018年的内容风口。</span>
                            </div>
                        </div>
                        <div class="part2">
                            <a href="">
                                <span class="thumb"></span>
                                <b>6</b>
                            </a>

                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--主题内容左侧结束-->
        <!--主题内容右侧开始-->
        <div class="content-right"></div>
        <!--主题内容右侧结束-->
    </div>
</div>
<!--页面主体结束-->
</body>
</html>
抽屉作业示例

 

今日内容：

2. 今日内容

要培养自己的自学能力(看文档的能力)

JS (JavaScript)

    一门编程语言,和 Python\Java\PHP\Go \C++\C# 类似的.
    
    
    网景
    跑在浏览器上的语言  10天
    
    node.js 可以跑在服务器上的JS

        
    ES6(EMCAScript 2016) /ES7 语法
    
    
    JS学习内容: (3天)
        1.JS语言基础:
            1.基本数据类型
            2.变量
            3.流程控制
            4.语法/注释
            
            5.函数
            6.对象
            
        2.DOM和BOM编程
        
        DOM --> Document Object Model
        BOM --> Browser  Object Model
        
        
    JS语法基础:
        语句结束之后要写分号;  *****
        $也可以做变量名
        推荐使用驼峰命名
    
    JS数据类型:
        数字类型
        
        字符串类型
            字符串自带的那些属性和方法
        字符串转数字
        
        布尔类型
        
        数组
            数组的内置属性和方法
            数组的遍历
                
        var i = 0;
        i++;    i= i+1;  --> i+=1(Python);
        
        
        对象(简单的对象)
            对象的遍历
        
        条件判断和循环
            if... else ...
            if... else if...else
            switch
                case 值1: 要做的事儿;break;
                case 值2: 要做的事儿;break;
                default: 条件都不满足默认执行的
                
            for 循环
            for (var i=0;条件;i++){
                循环要做的事儿;
            }
            
            while循环
                while (条件){
                   循环要做的事儿;
                }
                
            三元运算
                条件 ? 值1: 值2
今日内容课堂笔记

 一、CSS属性补充

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta  http-equiv="x-ua-compatible" content="IE=edge">
    <title>CSS属性补充</title>
    <style>
        .c1{
            height: 100px;
            width: 100px;
            background-color: wheat;
            overflow: auto;
        }
    </style>
    <script src="02.js"></script>
</head>
<body>
<div class="c1">
     海燕
        在苍茫的大海上,
        狂风卷积着乌云,
        在乌云和大海之间,
        海燕像黑色的闪电,
        在高傲地飞翔!
</div>
<ul type="none">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<ul style="list-style-type: none">
    <li>444</li>
    <li>555</li>
    <li>666</li>
</ul>
</body>
</html>
CSS属性补充

 

二、JS-DOM-BOM操作示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>JS-DOM-BOM操作示例</title>
    <!--<link rel="stylesheet" href="">-->
    <!--<script>-->
        <!--alert(123);-->
    <!--</script>-->
    <script src="02.js"></script>
</head>
<body>

</body>
</html>
操作示例

JavaScript引入方式

1、Script标签内写代码

<script>
  // 在这里写你的JS代码
</script>

2、引入额外的JS文件

<script src="myscript.js"></script>

JavaScript语言规范

1、注释（注释是代码之母）

// 这是单行注释

/*
这是
多行注释
*/

2、结束符

JavaScript中的语句要以分号（;）为结束符。

 

三、js 语法基础

JavaScript语言基础

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>JS语法基础</title>
    <script>
        var name;       //先声明变量
        name=''Alex'';    //赋值变量
        console.log(name);

        var name2=''Egon'';
        console.log(name2);

        var n1=1;
        var n2=1234;
        var n3=1234.12;
        var n4=123e-5;
        console.log(n1,n2,n3,n4);

//        字符串常用方法
        var name3="Alex";
        var age=18;
        console.log(name3+age);

//        字符串转数字
        var a="123";
        var ret=parseInt(a);
        console.log(ret);

        var b="123.346";
        ret=parseFloat(b);
        console.log(ret);

        var c="ABC";
        ret=parseInt(c);
        console.log(ret);
    </script>
    <script src="02.js"></script>
</head>
<body>

</body>
</html>
小练习

 

1、变量声明

  1. JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
  2. 声明变量使用 var 变量名; 的格式来进行声明
var name = "Alex";
var age = 18;

注意：

变量名是区分大小写的。

推荐使用驼峰式命名规则。

JavaScript数据类型

1、JavaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

2、数字类型

JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

常用方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

3、字符串

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法：

方法 说明 obj.length 返回长度 obj.trim() 移除空白 obj.trimLeft() 移除左边的空白 obj.trimRight() 移除右边的空白 obj.charAt(n) 返回第n个字符 obj.concat(value, ...) 拼接 obj.indexOf(substring, start) 子序列位置 obj.substring(from, to) 根据索引获取子序列 obj.slice(start, end) 切片 obj.toLowerCase() 小写 obj.toUpperCase() 大写 obj.split(delimiter, limit) 分割

拼接字符串一般使用“+”

 

 

四、运算符

1、布尔类型

区别于Python，true和false都是小写。

var a = true;
var b = false;

2、数组

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

 常用方法：

方法 说明 obj.length 数组的大小 obj.push(ele) 尾部追加元素 obj.pop() 获取尾部的元素 obj.unshift(ele) 头部插入元素 obj.shift() 头部移除元素 obj.slice() 切片 obj.reverse() 反转 obj.join(seq) 将数组元素连接成字符串 obj.concat(val, ...) 连接数组 obj.sort() 排序

遍历数组中的元素：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(i);
}

 

3、null和undefined

  • undefined表示的是当声明的变量未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
  • null表示值不存在

undefined表示声明了变量，但是还没有赋值。null声明了变量并且变量是空值。

4、类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。

 

运算符

1、算数运算符

+ - * / % ++ --

2、比较运算符

> >= < <= != == === !==

注意：

1 == “1”  // true
1 === "1"  // false

3、逻辑运算符

&& || !

4、赋值运算符

= += -= *= /=

 

 

 

五、流程控制

1、if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

2、if-else if-else 

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

3、switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

4、for

for (var i=0;i<10;i++) {
  console.log(i);
}

5、while 

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

6、三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b

 

ECMAScript 6 学习之路 （ 六 ） 扩展运算符 和 reset 运算符

ECMAScript 6 学习之路 （ 六 ） 扩展运算符 和 reset 运算符

扩展运算符和reset运算符

扩展运算符和rest运算符，它们都是...（三个点）,它们可以很好的为我们解决参数和对象数组未知情况下的编程，让我们的代码更健壮和简洁。

扩展运算符
function fun(...args){
    console.log(args[0]);
    console.log(args[1]);
    console.log(args[2]);
    console.log(args[3]);
}
fun(1,2,3);
// 1
// 2
// 3
// undefined

扩展运算符的一个用处

let arr1=[''www'',''jspang'',''com''];
let arr2=arr1; // 由于数组对象实际上是一个引用类型，因此arr2  与 arr1指向了同一处
console.log(arr2);
arr2.push(''shengHongYu''); //修改了 arr2 那么 arr1也会被修改
console.log(arr1); 

// 为了解决这个问题
let arr1 = [''11'', ''222'', ''2222''];
let arr2 = [...arr1];

console.log(arr2);
arr2.push(''shengHongYu'');
console.log(arr2);
console.log(arr1);
const [o1, ...ops] = [''one'', ''two'', ''three''];

// o1 one
// ops [''two'', ''three'']
const ops = [''one'', ''two'', ''three''];

const a = [''222'',...ops];
console.log(a);

// ["222", "one", "two", "three"]
reset运算符

如果你已经很好的掌握了对象扩展运算符，那么理解rest运算符并不困难，它们有很多相似之处，甚至很多时候你不用特意去区分。

function fun(first, ...arg) {
    console.log(arg.length);
    // 7
}

fun(0, 1, 2, 3, 4, 5, 6, 7);

输出arg内容

function jspang(first,...arg){
    for(let val of arg){
        console.log(val);
    }
}

jspang(0,1,2,3,4,5,6,7);

ECMASCRIPT 6 实战之 扩展运算符

ECMASCRIPT 6 实战之 扩展运算符

扩展运算符(spreading)是 ECMASCRIPT 6(以下简称ES 6) 中又一非常好用的实战技术, 它的写法只需要三个点(...),作用则顾名思义,用来展开你想要使用的任意变量,本质上是对所有拥有迭代器接口(Iterator)的对象进行迭代。

典型应用

  • 用于展开(迭代)数组元素
  const labels = [''ES 5'', ''ES 6'', ''React.js'', ''Vue.js'', ''Node.js''];
  console.log(''label elements: '', ...labels);
  // ES 5 ES 6 React.js Vue.js Node.js
  • 展开未使用的键值, 并放到剩余参数对象中去
    数组中的扩展剩余参数
    只取想要使用的第一个变量
    const labels = [''javascript'', ''ES 5'', ''ES 6'', ''React.js'', ''Vue.js'', ''Node.js'', ''React-Native''];
    const [main, ...rest] = labels;
    main // ''javascript''
    rest   // ["ES 5", "ES 6", "React.js", "Vue.js", "Node.js", "React-Native"];

    对象中的剩余参数
    const editor = {
      id: ''1688'',
      name: ''handome_boy'',
      age: 18,
      male: 1
    }
    只想要使用 id 字段, 其它字段需要另作它用时:
    const { id, ...rest } = editor;
    console.log(id); // 1688
    console.log(rest); 
    // {
      name: ''handome_boy'',
      age: 18,
      male: 1
    }

经典实战

  • 复制数组
    const labels = [''segementfault'', ''好看'', ''实用''];
    const copy_array = [...labels];
    把扩展后的 labels 的元素又放在一个新的数组字面量中, 即可得到一个新数组, 新数组与旧数组是使用不同的内存空间
    labels === copy_array // false
    效果类似 slice, 但用法简洁, 谁用谁喜欢 : )
  • 合并数组
    const tag1 = [''前端'', ''设计'', ''产品''];
    const tag2 = [''后端'', ''数据库'', ''缓存''];
    const merge_tags = [...tag1, ...tag2];
    console.log(merge_tags);
    // [''前端'', ''设计'', ''产品'', ''后端'', ''数据库'', ''缓存''];
    相比于 tag1.concat(tag2); 扩展运算符的用法简直简约到极致, 除了理解容易, 也具有几何的对称美
  • 合并对象
    const response = {
      itemid: 1068,
      name: ''segementfault'',
      tags: [''前端'', ''设计'', ''产品''],
      pv: 8888
    }
    const merged_response = { ...response, name: ''掘银'', tags: [''后端'', ''数据库'', ''缓存''] };
    console.log(merged_response);
    // {
        itemid: 1068,
        name: ''segementAdult'',
        tags: [''后端'', ''数据库'', ''缓存''],
        pv: 8888
      }
    效果形同 Object.assign, 也是右边的同名字段会覆盖左边的同名字段, 但谁更简洁, 一目了然
  • 合并剩余参数

  在定义函数时, 把用不到的参数合并到一个对象中, 集中管理
  const calcalute_date = (mode = ''fullDate'', ...rest) => {
    if(mode === ''timestamp'') {
      return Date.now();
    }
    return rest.join(''-'');
  }
  calcalute_date(''fullDate'', ''2019'', ''05'', ''26'');
  // 2019-05-26
  • 在 React 中 透传 props
  const Button = props => {
    const { title = ''确定'', style = {}, ...rest } = props;
    return (
      <div {...rest} style={{ ...confirmButtonStyle, ...style }}>{ title }</div>
    )
  }
  组件的某些属性不需要特意从 props 中解构出来, 那就使用 rest 从组件最外层透传进来,　例如 onClick, 或是某些自定义事件,
  这样即使组件定义 简单优雅, 也达到了支持透传任意多的属性／方法的目的
  另外本例也在style中使用扩展运算符作了 合并样式组件（style）的操作

三个小点,身材小巧,功能强大,还犹豫什么,实际开发中, 走你!!!

javascript ES6 新特性之 扩展运算符 三个点 ...

javascript ES6 新特性之 扩展运算符 三个点 ...

对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了：

 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中。

作用类似于 Object.assign() 方法，我们先来看一下 Object.assign() 方法：

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。如下：

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);

console.log(target); // { a: 1, b: 4, c: 5 }
console.log(returnedTarget); // { a: 1, b: 4, c: 5 }

语法

Object.assign(target, ...sources)

参数： target（目标对象）， sources（源对象）

返回值： 目标对象。

Object.assign() 方法中如果有相同的对象属性前面的会被后面的替换掉。

 

接下来我们看一个最简单的例子：

let bar = { a: 1, b: 2 };
let baz = { ...bar };
console.log(baz); // { a: 1, b: 2 }

从上面可以看出 ... 扩展运算符就是将一个参数对象整体遍历再拷贝到当前对象中，再看下面的例子：

let bar = {a: 1, b: 2};
let baz = {...bar, ...{a: 2, b: 4}};
console.log(bar); // { a: 1, b: 2 }
console.log(baz); // { a: 2, b: 4 }

... 扩展运算符如果有想用的对象属性，那么后者会将前者覆盖掉。同时我们也可以看出这是一个浅拷贝，并不会将源对象更改掉。

但是如果是如下代码：

let obj1 = { a: 1, b: {name: ''aaa''}};
let obj2 = { ...obj1};
obj2.a = 2;
obj2.b.name = ''bbb'';
console.log(obj1); // {a: 1, b: {name: ''bbb''}}
console.log(obj2); // {a: 2, b: {name: ''bbb''}}

从上面我们班可以看出，当 obj2 的 a 属性改变时，obj1 内的 a 属性不会跟着改变，但是当 obj2 的 b 属性改变时，obj1 内的 b 属性会跟着改变，这是由于 obj1 的 b 属性是引用数据类型，拷贝的时候拷贝的是对象的引用，但是基础数据类型会完整的复制出一份来。

 

扩展运算符也可以对数组进行运算，因为数组也属于对象的一种，如下：

var foo = function(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

var arr = [1, 2, 3];

//传统写法
foo(arr[0], arr[1], arr[2]);

//使用扩展运算符
foo(...arr);
//1
//2
//3

从上面的代码可以看出 ... 扩展运算符可以简化我们的代码。

我们再来看下面的代码：

let arr1 = [1, 2];
let arr2 = arr1;
arr2[0] = 2;
console.log(arr1); // [2, 2]

上面我们已经解释过了，arr2 其实是 arr1 的引用，如果改变 arr2 那么 arr1 也会跟着改变，但是我们不想让 arr1 跟着改变怎么办呢？用 ... 扩展运算符就不会了：

let arr1 = [1, 2];
let arr2 = [...arr1];
arr2[0] = 2;
console.log(arr1);  // [1, 2]

上面我们已经说过了，基础数据类型会重新完整的拷贝除一份来，这就完美的解决了上面的问题。

 

扩展运算符还可以将字符串转为数组，如下：

let str = "hello";
let arr = [...str];
console.log(arr); // [ ''h'', ''e'', ''l'', ''l'', ''o'' ]

 

注意：

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

如下：

let [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest);  // [2, 3, 4, 5]
let [...first, last] = [1, 2, 3, 4, 5];
console.log(first); // 报错 Rest element must be last element
console.log(last);
let [first, ...rest, last] = [1, 2, 3, 4, 5];
console.log(first); // 报错 Rest element must be last element
console.log(rest);
console.log(last);

 

原文出处：https://www.cnblogs.com/weijiutao/p/10636084.html

关于带有扩展运算符的 javascript 数组和字符串及其合并行为和js扩展运算符原理的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于day50 java Script 数字和字符串 布尔值和数组 运算符 条件判断和三元运算、ECMAScript 6 学习之路 （ 六 ） 扩展运算符 和 reset 运算符、ECMASCRIPT 6 实战之 扩展运算符、javascript ES6 新特性之 扩展运算符 三个点 ...等相关知识的信息别忘了在本站进行查找喔。

本文标签：

上一篇Javascript addEventListener() 显示标签（js append标签）

下一篇在 Vuetify 的 VAppBar 中传播元素（vue传递）

相关文章