ES6语法详解(二)

一)箭头函数

// ES5写法
    var total = function(a, b) {
        return a + b;
    }; 

    // ES6写法
    var total = (a, b) => {
        // return a + b;
    }

    console.log(total(1, 2));

this是什么?

带有this关键词的箭头函数行为不同于正常函数,在Javascript中每个函数定义了他自己的this上下文,但是箭头函数中的this则是获得最接近(enclosing 封闭者)上下文的值。

function Person() {
    		this.age = 10;
            // 箭头的this,向上找,找到非箭头函数,看一下这个非箭头函数的this是谁,那么箭头函数的
               this就是这个非箭头函数的this。
    		setInterval(()=>{
    			// window
    			this.age++;
    			console.log(this.age);
    		}, 1000);
    	}
    	var boy = new Person();

二)字符串

1)传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。

ES6又提供了三种新方法:

includes():返回布尔值,表示是否找到了参数字符串。

startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。

endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

  var string = "人民的名义";
  console.log(string.indexOf("的"));//打印 2
  console.log(string.includes('民'));// 打印 true
  console.log(string.startsWith('人', 0));//打印 true
  console.log(string.endsWith('人'));//打印 false

2)模板字符串

模板字符串中所有的空格、新行、缩进,都会原样输出在生成的字符串中

注意: 模板字符串(template string)是增强版的字符串,用反引号(`)标识,嵌入的变量名写在${}之中。

    //以前我们将变量和字符串进行连接时的写法是下面这样:
    var a = "夕阳无限好";
    var b = "只是近黄昏";
    var c = "名言:" + a + "," + b;
    console.log(c);

    //ES6为我们提供了一种更加简单的方法:模板字符串,上面的代码可以改写为:

	var c = `名言: ${a}, ${b}`;

三)对象 Object

1)对象的简洁表示法

如果你想在对象里面添加跟已定义的变量名字相同的属性的话,你可能会这样写:

var name = "lgx";
	var age = 20;
	var Person = {
		name:name,
		age: age,
		hello: function() {
			console.log("...");
		}
	}

ES6为我们提供了一种简写方法,就是在对象里面直接加上这属性,不需要再指定值,像下面这样:

var Person = {
		name,
		age, 
		hello() {
			console.log("...");
		}
	}
	console.log(Person.name);
	console.log(Person.age);

2)对象新增函数Object.is()

ES5比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。JavaScript缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。

ES6提出“Same-value equality”算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致

不同之处只有两个:

一是:+0不等于-0                  

二是:NaN等于自身

    // 从数学的角度,+0 和 -0不严格相等  
    console.log(+0 === -0);//true
	// NaN === NaN应该相同(NaN是number类型的)
	console.log(NaN === NaN);//false

    //ES6
	console.log(Object.is(+0, -0));//false
	console.log(Object.is(NaN, NaN));//true

3)对象新增函数Object.assign()

基本用法:

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

var target = {};
	var source1 = {
		a: 1
	}
	var source2 = {
		b: 2
	}
	Object.assign(target, source1, source2);
	console.log(target);//{a:1,b:2}

如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后 面的属性会覆盖前面的属性

var source1 = {
  		a: 1
  	}
  var source2 = {
  		a: 3,
  		b: 2
  }

如果只有一个参数,Object.assign会直接返回该参数。

var obj = {a: 1};
Object.assign(obj) === obj // true

如果该参数不是对象,则会先转成对象,然后返回。

typeof Object.assign(2) // "object"

由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。

    Object.assign(undefined) // 报错
    Object.assign(null) // 报错

如果非对象参数出现在源对象的位置(即非首参数),那么处理规则有所不同。首先,这些参数都会转成对象,如果无法转成对象,就会跳过。这意味着,如果undefined和null不在首参数,就不会报错。

     let obj = {a: 1};
     Object.assign(obj, undefined) === obj // true
     Object.assign(obj, null) === obj // true

其他类型的值(即数值、字符串和布尔值)不在首参数,也不会报错。但是,除了字符串会以数组形式,拷贝入目标对象,其他值都不会产生效果。
下面代码中,v1、v2、v3分别是字符串、布尔值和数值,结果只有字符串合入目标对象(以字符数组的形式),数值和布尔值都会被忽略。这是因为只有字符串的包装对象,会产生可枚举属性。

    var v1 = 'abc';
    var v2 = true;
    var v3 = 10;
    var obj = Object.assign({}, v1, v2, v3); 
    console.log(obj); // { "0": "a", "1": "b", "2": "c" }

// //Object.assign拷贝的属性是有限制的,只拷贝源对象的自身属性(不拷贝继承属性),也不拷贝不可枚举的属性(enumerable: false)。

    Object.assign({b: 'c'},
          Object.defineProperty({}, 'invisible', {
             enumerable: false,
             value: 'hello'
           })
     )
     { b: 'c' }

上面代码中,Object.assign要拷贝的对象只有一个不可枚举属性invisible,这个属性并没有被拷贝进去。
属性名为Symbol值的属性,也会被Object.assign拷贝。

    Object.assign({ a: 'b' }, { [Symbol('c')]: 'd' })
    { a: 'b', Symbol(c): 'd' }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值