ES6+新增常用内容总结(一)

347 阅读2分钟

这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战

ES6+ 新增对象方法

Object.assign

Object.assign(target, ...sources) 将所有可枚举属性的值从一个或多个源对象复制到目标对象
参数:
    target:目标对象
    sources:源对象
返回值:
    目标对象

Object.is

Object.is(value1, value2) 判断两个值是否是相同的值。 
规则:
    两个值都是 undefined
    两个值都是 null
    两个值都是 true 或者都是 false
    两个值是由相同个数的字符按照相同的顺序组成的字符串
    两个值指向同一个对象
    两个值都是数字并且
        都是正零 +0
        都是负零 -0
        都是 NaN

对象简洁表示法

ES6 允许直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。

  var foo = 'bar';
  var baz = {foo};
  baz // {foo: "bar"}
     // 等同于
  var baz = {foo: foo};

上面代码表明, ES6 允许在对象之中,只写属性名,不写属性值。这时,属性值等于属性名所代表的变量。下面是另一个例子。

    function f(x, y) {
      return {x, y};
    }
    // 等同于
    function f(x, y) {
     return {x: x, y: y};
    }
    f(1, 2) // Object {x: 1, y: 2}

除了属性可以简写,方法也可以简写

var o = {
  method() {
     return "Hello!";
  }
};
 // 等同于
 var o = {
  method: function() {
     return "Hello!";
     }
 };

属性名表达式

实际开发中,我们有时候需要使用变量作为对象属性名来拼接属性名或者获取对象动态变化的属性名的属性值,这时候就需要用到表达式作为属性名这种方式了

    let obj = {};
let str = "One";
obj.food = "apple";  //使用标识符作为属性名
obj["color" + str] = "red"; //使用表达式作为属性名,必须使用方括号
console.log(obj); // {food: "apple", colorOne: "red"}


let propKey = "foo";
//这种使用字面量方式定义对象(就是写在大括号内),用表达式作为对象的属性名是es6新增的写法
let obj2 = {
    [propKey] :true,
    ["color" + "Two"]:"white"
};
console.log(obj2); //{foo: true, colorTwo: "white"}

模板字符串

模板字符串是ES6中增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量,在模板字符串中嵌入变量,需要将变量写在${}中


// 普通模板字符串
let str =  `In JavaScript '\n' is a line-feed`;
// 多行模板字符串
let newStr = `In JavaScript '\n'
is a line-feed`;
// 字符串中嵌入变量
let lang = 'JavaScript',
let content = 'line-feed';
let str1 = `In ${lang} '\n' is a ${content}`;

模板字符串是包含在反引号中的,如果字符串中需要有反引号,则在其前面要用反斜杠转义

let str = `Hello `world`!`; // "Hello `world`!"

如果使用模板字符串表示多行字符串,所有的空格和缩进都会保留在输出中,如果不想要头尾的空白符,可以使用trim方法消除。

let str = ` <ul><li>1<li></ul> `.trim();

模板字符串的大括号里可以放入任意的javaScript表达式,可以进行运算,以及引用对象属性,还可以调用函数。

function fn(){
    return 1 + 2;
}
let str = `the return of fn() is ${fn()}`; // the return of fn() is 3

如果大括号中的值不是字符串,将按照一般的规则转为字符串,比如,大括号中是一个对象,将默认调用对象的toString方法

 let obj = {
    toString:function(){
        return 'is obj'
    }
}
let str = `${obj}`
console.log(str)  // is obj

如果需要引用模板字符串本身,可以像下面写

let str = "`hello world`",
    fn = "(name) => `Hello ${name}`";