精华内容
下载资源
问答
  • es6之扩展运算符 三个点(...)

    万次阅读 多人点赞 2018-09-30 19:09:23
    es6之扩展运算符 三个点(...)es6之扩展运算符 三个点(...)对象的扩展运算符数组的扩展运算符总结 es6之扩展运算符 三个点(…) 对象的扩展运算符 理解对象的扩展运算符其实很简单,只要记住一句话就可以: ...

    es6之扩展运算符 三个点(…)

    对象的扩展运算符

    理解对象的扩展运算符其实很简单,只要记住一句话就可以:

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

    let bar = { a: 1, b: 2 };
    let baz = { ...bar }; // { a: 1, b: 2 }
    

    上述方法实际上等价于:

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

    Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)

    Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。(如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性)。

    同样,如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉。

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

    利用上述特性就可以很方便的修改对象的部分属性。在redux中的reducer函数规定必须是一个纯函数(如果不是很清楚什么是纯函数的可以参考这里),reducer中的state对象要求不能直接修改,可以通过扩展运算符把修改路径的对象都复制一遍,然后产生一个新的对象返回。

    这里有点需要注意的是扩展运算符对对象实例的拷贝属于一种浅拷贝。肯定有人要问什么是浅拷贝?我们知道javascript中有两种数据类型,分别是基础数据类型引用数据类型基础数据类型是按值访问的,常见的基础数据类型NumberStringBooleanNullUndefined,这类变量的拷贝的时候会完整的复制一份;引用数据类型比如Array,在拷贝的时候拷贝的是对象的引用,当原对象发生变化的时候,拷贝对象也跟着变化,比如:

    let obj1 = { a: 1, b: 2};
    let obj2 = { ...obj1, b: '2-edited'};
    console.log(obj1); // {a: 1, b: 2}
    console.log(obj2); //  {a: 1, b: "2-edited"}
    

    上面这个例子扩展运算符拷贝的对象是基础数据类型,因此对obj2的修改并不会影响obj1,如果改成这样:

    let obj1 = { a: 1, b: 2, c: {nickName: 'd'}};
    let obj2 = { ...obj1};
    obj2.c.nickName = 'd-edited';
    console.log(obj1); // {a: 1, b: 2, c: {nickName: 'd-edited'}}
    console.log(obj2); // {a: 1, b: 2, c: {nickName: 'd-edited'}}
    

    这里可以看到,对obj2的修改影响到了被拷贝对象obj1,原因上面已经说了,因为obj1中的对象c是一个引用数据类型,拷贝的时候拷贝的是对象的引用。

    数组的扩展运算符

    扩展运算符同样可以运用在对数组的操作中。

    • 可以将数组转换为参数序列
    function add(x, y) {
      return x + y;
    }
    
    const numbers = [4, 38];
    add(...numbers) // 42
    
    • 可以复制数组

    如果直接通过下列的方式进行数组复制是不可取的:

    const arr1 = [1, 2];
    const arr2 = arr1;
    arr2[0] = 2;
    arr1 // [2, 2]
    

    原因上面已经介绍过,用扩展运算符就很方便:

    const arr1 = [1, 2];
    const arr2 = [...arr1];
    

    还是记住那句话:扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中,这里参数对象是个数组,数组里面的所有对象都是基础数据类型,将所有基础数据类型重新拷贝到新的数组中。

    • 扩展运算符可以与解构赋值结合起来,用于生成数组
    const [first, ...rest] = [1, 2, 3, 4, 5];
    first // 1
    rest  // [2, 3, 4, 5]
    

    需要注意的一点是:

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

    const [...rest, last] = [1, 2, 3, 4, 5];
    // 报错
    const [first, ...rest, last] = [1, 2, 3, 4, 5];
    // 报错
    
    • 扩展运算符还可以将字符串转为真正的数组
    [...'hello']
    // [ "h", "e", "l", "l", "o" ]
    
    • 任何 Iterator 接口的对象(参阅 Iterator 一章),都可以用扩展运算符转为真正的数组

    这点说的比较官方,大家具体可以参考阮一峰老师的ECMAScript 6入门教程

    比较常见的应用是可以将某些数据结构转为数组,比如:

    // arguments对象
    function foo() {
      const args = [...arguments];
    }
    

    用于替换es5中的Array.prototype.slice.call(arguments)写法。

    总结

    扩展运算符的用法就说到这里,介绍的不全但都是些最常见的用法。

    下面的是我的公众号二维码图片,欢迎关注。
    在这里插入图片描述

    展开全文
  • es6 扩展运算符 三个点(...)

    万次阅读 多人点赞 2016-11-29 12:55:59
    1 含义扩展运算符( spread )是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document....

    1  含义

    扩展运算符( 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')]
    // [<div>, <div>, <div>]

    该运算符主要用于函数调用。

    function push(array, ...items) {
    array.push(...items);
    }
    function add(x, y) {
    return x + y;
    }
    var numbers = [4, 38];
    add(...numbers) // 42
    上面代码中,array.push(...items)和add(...numbers)这两行,都是函数的调用,它们的都使用了扩展运算符。该运算符将一个数组,变为参数序列。

    扩展运算符与正常的函数参数可以结合使用,非常灵活。

    function f(v, w, x, y, z) { }
    var args = [0, 1];
    f(-1, ...args, 2, ...[3]);


    2  替代数组的 apply 方法

    由于扩展运算符可以展开数组,所以不再需要apply方法,将数组转为函数的参数了。

    // ES5 的写法
    function f(x, y, z) {
    // ...
    }
    var args = [0, 1, 2];
    f.apply(null, args);
    // ES6 的写法
    function f(x, y, z) {
    // ...
    }
    var args = [0, 1, 2];
    f(...args);

    下面是扩展运算符取代apply方法的一个实际的例子,应用Math.max方法,简化求出一个数组最大元素的写法。

    // ES5 的写法
    Math.max.apply(null, [14, 3, 77])
    // ES6 的写法
    Math.max(...[14, 3, 77])
    //  等同于
    Math.max(14, 3, 77);
    上面代码表示,由于 JavaScript 不提供求数组最大元素的函数,所以只能套用Math.max函数,将数组转为一个参数序列,然后求最大值。有了扩展运算符以后,就可以直接用Math.max了。

    另一个例子是通过push函数,将一个数组添加到另一个数组的尾部。

    // ES5 的写法
    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    Array.prototype.push.apply(arr1, arr2);
    // ES6 的写法
    var arr1 = [0, 1, 2];
    var arr2 = [3, 4, 5];
    arr1.push(...arr2);

    上面代码的 ES5 写法中,push方法的参数不能是数组,所以只好通过apply方法变通使用push方法。有了扩展运算符,就可以直接将数组传入push方法。
    下面是另外一个例子。

    // ES5
    new (Date.bind.apply(Date, [null, 2015, 1, 1]))
    // ES6
    new Date(...[2015, 1, 1]);


    3  扩展运算符的应用

    ( 1 )合并数组

    扩展运算符提供了数组合并的新写法。

    // ES5
    [1, 2].concat(more)
    // ES6
    [1, 2, ...more]
    var arr1 = ['a', 'b'];
    var arr2 = ['c'];
    var arr3 = ['d', 'e'];
    // ES5 的合并数组
    arr1.concat(arr2, arr3);
    // [ 'a', 'b', 'c', 'd', 'e' ]
    // ES6 的合并数组
    [...arr1, ...arr2, ...arr3]
    // [ 'a', 'b', 'c', 'd', 'e' ]


    ( 2 )与解构赋值结合

    扩展运算符可以与解构赋值结合起来,用于生成数组。

    // ES5
    a = list[0], rest = list.slice(1)
    // ES6
    [a, ...rest] = list
    下面是另外一些例子。
    const [first, ...rest] = [1, 2, 3, 4, 5];
    first // 1
    rest // [2, 3, 4, 5]
    const [first, ...rest] = [];
    first // undefined
    rest // []:
    const [first, ...rest] = ["foo"];
    first // "foo"
    rest // []
    如果将扩展运算符用于数组赋值,只能放在参数的最后一位,否则会报错。

    const [...butLast, last] = [1, 2, 3, 4, 5];
    //  报错
    const [first, ...middle, last] = [1, 2, 3, 4, 5];
    //  报错

    ( 3 )函数的返回值

    JavaScript 的函数只能返回一个值,如果需要返回多个值,只能返回数组或对象。扩展运算符提供了解决这个问题的一种变通方法。

    var dateFields = readDateFields(database);
    var d = new Date(...dateFields);
    上面代码从数据库取出一行数据,通过扩展运算符,直接将其传入构造函数Date。

    ( 4 )字符串

    扩展运算符还可以将字符串转为真正的数组。

    [...'hello']
    // [ "h", "e", "l", "l", "o" ]
    上面的写法,有一个重要的好处,那就是能够正确识别 32 位的 Unicode 字符。

    'x\uD83D\uDE80y'.length // 4
    [...'x\uD83D\uDE80y'].length // 3
    上面代码的第一种写法, JavaScript 会将 32 位 Unicode 字符,识别为 2 个字符,采用扩展运算符就没有这个问题。因此,正确返回字符串长度的函数,可以像下面这样写。

    function length(str) {
    return [...str].length;
    }
    length('x\uD83D\uDE80y') // 3
    凡是涉及到操作 32 位 Unicode 字符的函数,都有这个问题。因此,最好都用扩展运算符改写。

    let str = 'x\uD83D\uDE80y';
    str.split('').reverse().join('')
    // 'y\uDE80\uD83Dx'
    [...str].reverse().join('')
    // 'y\uD83D\uDE80x'
    上面代码中,如果不用扩展运算符,字符串的reverse操作就不正确。

    ( 5 )实现了 Iterator 接口的对象

    任何 Iterator 接口的对象,都可以用扩展运算符转为真正的数组。

    var nodeList = document.querySelectorAll('div');
    var array = [...nodeList];
    上面代码中,querySelectorAll方法返回的是一个nodeList对象。它不是数组,而是一个类似数组的对象。这时,扩展运算符可以将其转为真正的数组,原因就在于NodeList对象实现了 Iterator 接口。

    对于那些没有部署 Iterator 接口的类似数组的对象,扩展运算符就无法将其转为真正的数组。

    let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
    };
    // TypeError: Cannot spread non-iterable object.
    let arr = [...arrayLike];
    上面代码中,arrayLike是一个类似数组的对象,但是没有部署 Iterator 接口,扩展运算符就会报错。这时,可以改为使用Array.from方法将arrayLike转为真正的数组。

    ( 6 ) Map 和 Set 结构, Generator 函数

    扩展运算符内部调用的是数据结构的 Iterator 接口,因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构。

    let map = new Map([
    [1, 'one'],
    [2, 'two'],
    [3, 'three'],
    ]);
    let arr = [...map.keys()]; // [1, 2, 3]
    Generator 函数运行后,返回一个遍历器对象,因此也可以使用扩展运算符。

    var go = function*(){
    yield 1;
    yield 2;
    yield 3;
    };
    [...go()] // [1, 2, 3]
    上面代码中,变量go是一个 Generator 函数,执行后返回的是一个遍历器对象,对这个遍历器对象执行扩展运算符,就会将内部遍历得到的值,转为一个数组。
    如果对没有iterator接口的对象,使用扩展运算符,将会报错。

    var obj = {a: 1, b: 2};
    let arr = [...obj]; // TypeError: Cannot spread non-iterable object




















    展开全文
  • java中三个点的用法

    千次阅读 2015-10-14 21:21:08
    java中三个点的用法  java类型后面跟三个点是代表可以接受多个实际参数,这里的多个指的是不限个数,可以是一个、两个、三个甚至更多。java中类型后面加三个点是java1.5之后出现的新的内容,使用在函数的形参上,...

     java中三个点的用法

            java类型后面跟三个点是代表可以接受多个实际参数,这里的多个指的是不限个数,可以是一个、两个、三个甚至更多。java中类型后面加三个点是java1.5之后出现的新的内容,使用在函数的形参上,相当于一个数组,调用函数时传递多少了实际参数,都可以存储到这个形参上,需要注意的是,使用这个形参必须放在最后一位形参位置上,否则会报错!

    进过下面代码的测试得出结论:

           方法t1与t2所实现的功能都是一样的,都是打印参数,但是传值的方式不同,代码可见。



    public class Test {
    	void t1(String... a) {
    		System.out.println("t1");
    		for (String s : a)
    			System.out.printf(" " + s);
    		System.out.println();
    	}
    
    	void t2(String[] a) {
    		System.out.println("t2");
    		for (String s : a)
    			System.out.printf(" " + s);
    		System.out.println();
    	}
    
    	public static void main(String[] args) {
    		String a[] = { "a", "b", "d", "e", "f", "g" };
    		Test t = new Test();
    		t.t1(a);
    		t.t2(a);
    		// 区别
    		t.t1();// 可不传
    		// t.t2();//必须传参数,否则报错
    		t.t1("1", "2", "3", "4");// 也可以一个一个的传,t2则不可以
    	}
    }
    输出结果:
    t1
     a b d e f g
    t2
     a b d e f g
    t1

    t1
     1 2 3 4

    展开全文
  • JS中三个点(...)是什么鬼?

    万次阅读 多人点赞 2020-04-24 17:58:49
    我们在看js代码时经常会出现(...)三个点的东西,它究竟是什么意思?又有何用处? 下面我就给大家分享一下三个点的那些事 什么意思? 三个点(...)真名叫扩展运算符,是在ES6中新增加的内容,它可以在函数调用/...

    我们在看js代码时经常会出现(...)三个点的东西,它究竟是什么意思?又有何用处?
    下面我就给大家分享一下三个点的那些事

    什么意思?

    三个点(...)真名叫扩展运算符,是在ES6中新增加的内容,它可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开;还可以在构造字面量对象时将对象表达式按照key-value的方式展开

    字面量一般指[1,2,3]或者{name:'chuichui'}这种简洁的构造方式,多层嵌套的数组和对象三个点就无能为力了

    说白了就是把衣服脱了,不管是大括号([])、花括号({}),统统不在话下,全部脱掉脱掉!

    // 数组
    var number = [1,2,3,4,5,6]
    console.log(...number) //1 2 3 4 5 6
    //对象
    var man = {name:'chuichui',height:176}
    console.log({...man}) / {name:'chuichui',height:176}

    有什么用?

    它的用处很广泛,我们随处都可以看到,下面是几个常见的例子

    复制用它

    //数组的复制
    var arr1 = ['hello']
    var arr2 =[...arr1]
    arr2 // ['hello']
    //对象的复制
    var obj1 = {name:'chuichui'}
    var obj2 ={...arr}
    ob12 //  {name:'chuichui'}

    合并用它

    //数组的合并
    var arr1 = ['hello']
    var arr2 =['chuichui']
    var mergeArr = [...arr1,...arr2]
    mergeArr  // ['hello','chuichui']
    // 对象分合并
    var obj1 = {name:'chuichui'}
    var obj2 = {height:176}
    var mergeObj = {...obj1,...obj2}
    mergeObj // {name: "chuichui", height: 176}

    字符转数组用它

    var arr1 = [...'hello']
    arr1 // ["h", "e", "l", "l", "o"]

    函数传参用它

    可以和正常的函数相结合,灵活使用

    function f(v,w,x,y,z){ }
    var args = [2,3]
    f(1,...args,4,...[5])

    当我们想把数组中的元素迭代为函数参数时,用它!

    function f(x,y,z){}
    var args = [1,2,3]
    f(...args)
    
    // 以前的方法
    f.apply(null,args);
    展开全文
  • C++根据三个点坐标计算夹角

    千次阅读 2019-08-14 10:19:35
    计算角度ACB,其中C是中心点,A B C三个点的坐标为A(x1,y1),B(x2,y2),C(x3,y3)。 #include <iostream> #include <cmath> using namespace std; /* get angle ACB, point C is the center point A(x1,...
  • 很多的应用在ActionBar的右...这个三个点的设置是Activity类中一个方法,可以在想显示这个三个点的Activity类中重写这个方法,如下所示: public class LoginActivity extends Activity { @Override protected void
  • 在json文件中,主题颜色搭配不当导致的,默认的背景是白色,文本主题也是白的,因此就看不到那三个小圆点而不代表没有。解决方法就是让这两个颜色有明显色差就可以被分辨出来了,如下: { "navigationBarTextStyle...
  • 修改overflow图标 修改ActionBar的三个点的图标  使用ActionBar时,Android系统默认给overflow是三个点的图标,如果你想修改overflow的图标,变成类似于微信“+”加号或者其他图标,可这样实现:即在values/...
  • 三个点坐标为:(x1, y1),(x2, y2),(x3, y3)。外心坐标为:(a, b)。 转载于:https://www.cnblogs.com/fuzhihong0917/p/8111671.html
  • Java中 … 三个点是什么意思?

    千次阅读 2019-03-28 13:41:18
    Java中 … 三个点是什么意思? Thinking in java 4th 第五章 ”初始化与清理“ 出现了这个问题。 在形式参数里面出现,表示可变参数,即传入的参数可以随意,不论传多少个参数都被放到一个数组里面。 package learn...
  • php 三个点的用法 function fun (...$arr){}

    千次阅读 2018-08-10 16:08:29
    今天看到有朋友传递参数的时候使用了三个点“ ... ”,记录一下,方便大家了解使用方法。 详细说明 : http://nl1.php.net/manual/zh/functions.arguments.php#functions.variable-arg-list in PHP 5.6+ Example...
  • ToolBar和ActionBar右边三个点的图标替换
  • python---之三个点...

    万次阅读 2018-08-04 21:16:36
    三个点是什么鬼,凭记忆这不是可以换行的操作么,但这里不是,它是省略所有的冒号来用省略号代替,大家看这个a[:, :, None]和a[…, None]的输出是一样的,就是因为…代替了前面两个冒号。这下应该清楚了。 至于三维...
  • 已知三个点坐标求 三角形面积 设A(x1,y1),B(x2,y2),C(x3,y3) 由A-->B-->C-->A 按逆时针方向转。(行列式书写要求) 设三角形的面积为S 则S=(1/2)*(下面行列式) |x1 y1 1| |x2 y...
  • Java中的三个点"..."也就是动态参数

    万次阅读 2019-08-08 19:32:48
    在Java1.5之后在方法上传参时便出现了**"…"**,这三个点的学名叫做可变长参数,也就是相当于一个数组,能够传入0个至n个参数 public static void main(String[] args) { String[] t1 = {}; String[] t2 = {"java",...
  • 已知三个点坐标为P1(x1,y1,z1), P2(x2,y2,z2), P3(x3,y3,z3) 所以可以设方程为A(x - x1) + B(y - y1) + C(z - z1) = 0 (点法式) (也可设为过另外两个点) 核心代码: //在此之前写好录入三个三维点...
  • 在发现问题的日期2020/09/23,微信好像出现了纯H5页面在微信浏览器中打开右上角没有三个点,经过同文件更换多个服务器和域名测试,发现可能是由于打开的域名的没有备份,现在正在走备案流程,出现问题换个服务器或者...
  • 使用css使文字超出部分用省略号三个点…显示的方法 注意: 文字的父元素必须有固定的宽度 overflow: hiddren; word-break: keep-all; white-space: nowrap; text-overflow: ellipsis; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,550,166
精华内容 1,820,066
关键字:

三个点