es6 对象的扩展

一、现在还有很多浏览器不能直接使用es6语法。特别是手机端的一些低版本的浏览器。都需要用bale转换一下。

但是目前流行的框架中(vue,react,angular)。都有自己的脚手架,都能用webpack转换下。或者直接自己配置webpack , fis3,nowa 等转换。

照样不是美滋滋。

二、属性的简洁写法 

//1.属性简洁表示语法
        var foo = ‘bar‘;
        var obj = {foo};
        console.log(obj);
        //创建对象的函数
        function createOjb(x = 1,y = 1){  //x = 1, y = 1; 参数的默认值
            return {
                x,y
            }
        }
        var newObj = createOjb();
        console.log(newObj); //{x:1,y:1}
        var birthDate = ‘2017/8/12‘
        //2 方法的简写
        var person = {
            name:‘绿巨人‘,
            age:‘200岁‘,
            birthDate,
            say(){
                console.log(this.name);  //等同于  say:function(){ console.log(this.name)};
            }
        }
        person.say();  // 绿巨人
        //in  方法
         var msg = {
            hello:‘helloValue‘,
            world:‘worldValue‘
         }
         console.log(‘hello‘ in msg,‘helloValue‘ in msg);
         // true,false; => 判断某个键值是在某个对象里面
         //commonJS 模块化输出
         function Obj(methods){
            this.methods = methods || {};
         }
         Obj.prototype.getItem = function(key){
            return key in this.methods ? methods[key] : null;
         }
         Obj.prototype.setItem = function(key,value){
            this.methods[key] = value;
         }
         var obj = new Obj();
         //module.exports = {obj};
         //4.注意点  :简洁写法的属性名总是字符串,这会导致一些看上去比较奇怪的结果。

三、属性表达式

//属性名表达式
         // 1. 对象添加属性的两种方式
         var newObj = new Object();
         newObj.name = ‘html‘;
         newObj[‘age‘] = ‘20岁‘;
         //对象字面量的方式  se5 中字面量方式下 属性名字只能用 字符串形式。不能用 [‘name‘]
         var newObj1 = {
            name:‘css‘,
            age:‘30岁‘
         }
         //SE6
         var newObj2 = {
            [‘name‘]:‘js‘,
            [‘a‘ + ‘ge‘]:‘40岁‘,
            [‘hello world‘]:‘say hello world‘,
            [‘say‘ + ‘ hi‘](){
                console.log(this[‘hello world‘])
            }
         }
         console.log(newObj2.name); // jss
         console.log(newObj2[‘hello world‘]);  // say hello world
         newObj2[‘say hi‘](); // say hello world
         //!!!注意  属性名表达式是不能喝属性简写一起使用的
         var objKey = {a:1};
         var newObj3 = {
            [objKey]:‘我是一个对象‘
         }
         console.log(newObj3);  // {[object object]:‘我是一对象‘}
         console.log(newObj3[{a:1}]); // 我是一个对象
         console.log(newObj3[‘object object‘]); // undefined  是不是很奇怪啊
时间: 2024-10-11 00:58:06

es6 对象的扩展的相关文章

web前端之es6对象的扩展

1.属性的简洁表示法 2.属性名表达式 表达式作为对象的属性名 3.方法的 name 属性 例如:函数的name 属性,返回函数名. 4.Object.is() ES 比较两个值是否相等,只有两个运算符,相等运算符,相等运算符(==) 和严格相等运算符(===) 5.Object.assign() Object.assign 方法用于对象的合并,将源对象的所有的可枚举属性,赋值到目标对象 例如; 6.属性的可枚举行和遍历 可枚举性 描述对象的enumerable 属性,称为“可枚举属性” 如果该

ES6对象的扩展

1.属性简写表示      2.方法简写表示     属性与方法简写: 3.属性名表达式 ES6允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内. 4.Object.is()比较两个值是否严格相等

ES6对象扩展

前面的话 随着JS应用复杂度的不断增加,开发者在程序中使用对象的数量也在持续增长,因此对象使用效率的提升就变得至关重要.ES6通过多种方式来加强对象的使用,通过简单的语法扩展,提供更多操作对象及与对象交互的方法.本章将详细介绍ES6对象扩展 对象类别 在浏览器这样的执行环境中,对象没有统一的标准,在标准中又使用不同的术语描述对象,ES6规范清晰定义了每一个类别的对象,对象的类别如下 1.普通(Ordinary)对象 具有JS对象所有的默认内部行为 2.特异(Exotic)对象 具有某些与默认行为

ES6 常用总结——第三章(数组、函数、对象的扩展)

1.1. Array.from() Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map). 下面是一个类似数组的对象,Array.from将它转为真正的数组. let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3}; // ES5的写法var arr1 = [].slice.call(arrayLike);

ES6中对对象的扩展

ES6允许直接写入变量和函数作为对象的属性和方法.这样的书写更加简洁. ES6允许在对象中只写属性名,不写属性值.这时,属性值等于属性名所代表的变量. function f(x , y){ return {x ,y}; } f(1,2)// Object {x:1,y:2} function getPoint(){ var x=1; var y=10; return {x,y}; } getPoint()//{x:1,y:10} js语言定义对象的属性有两种方法.obj.foo=true;obj

ES6数组和对象的扩展

es6数组的扩展 扩展运算符 扩展运算符是对具有Iterator 接口的对象,都可以使用扩展运算符 Array.from() 用于将两类对象转化为真正的数组 1.类似数组的对象(只要据有length属性, 都可以被转化为数组) 2.可遍历(iterable)的对象 Array.of() 将一组值转化为数组 find和findIndex find方法,用于找出第一个符合条件的数组成员,没有找到会返回undefiend,findIndex方法返回的是第一个符合条件成员的位置, 如果找不到返回-1,

ES6知识点-对象的扩展

3.6对象的扩展 3.6.1属性的简洁表示法 ES6允许直接写入变量和函数,作为对象的属性和方法. var foo = 'bar'; var baz = {foo}; console.log( baz ) // { foo: 'bar' } //等同于 var foo = 'bar'; var baz={ foo:foo}; console.log( baz ) // { foo: 'bar' } var func= { method() { return "这里是ES6方法简写!";

ES6 - 对象扩展(增强字面量)

/** * 对象的扩展 * * 增强对象字面量 * * 解决问题:缩减代码 */ { /** * 1.属性简表示法 * 变量foo直接写在大括号里面.这时,属性名就是变量名, 属性值就是变量值 */ const foo = 'bar'; const baz = { foo }; // baz // {foo: "bar"} // 等同于 // const baz = { foo: foo }; /** * 方法简写 */ const o1 = { method() { return &

ES6之字符串扩展方法(常用)

es6这个String对象倒是扩展了不少方法,但是很多都是跟字符编码相关,个人选了几个感觉比较常用的方法: includes 搜索字符的神器 还记得我们之前如何判断某个字符串对象是否包含特地字符的吗? var str='google'; if(str.indexOf('o')>-1){ console.log('yes'); }else{ console.log('no'); } indexOf本来只是一个获取字符对应位置的方法,因为找到不到会返回-1这个值,就成了判断是否包含的方法,inclu