【ES6】对象、函数、数组的扩展

对象的扩展

ES6允许直接写入变量和函数，作为对象的属性和方法。这时，属性名为变量名, 属性值为变量的值。

let name = 'tom';
let age = 12;
let obj = {name,age,gender:"男",sayname(){console.log("Hello!")}
}
//等同于...
let obj = {name:'tom',age:12,gender:'男',sayname:function(){console.log("Hello!")   }
}

属性名表达式。（定义对象时，可以把表达式放在方括号内）。

let test = 'hello';
let obj = {name:'tom',test,//获取test的变量值当做属性名[test]:'123'
}
console.log(obj)    //{ name: 'tom', test: 'hello', hello: '123' }

函数的name属性，返回函数名。

function test(){ }
console.log(test.name)  //testlet p = {test(){}
}
console.log(p.test.name)  //test

Object.is(value1,value2)： 判断两个值是否相等，与===类似，但不完全相同。

console.log(Object.is(10,10))   //true
console.log(+0 === -0)          //true
console.log(Object.is(+0,-0))   //false
console.log(NaN === NaN)        //false
console.log(Object.is(NaN,NaN)) //true

Object.assign(target,o1,o2…)： 用于对象的合并，将源对象的所有可枚举属性，复制到目标对象（target）。

let obj1 = {name:'tom'
}
let obj2 = {name:'larry',age:12
}
let obj3 = {gender:'男',sayname(){console.log('hello')}
}
let target = {}
Object.assign(target,obj1,obj2,obj3)
console.log(target) //{ name: 'larry', age: 12, gender: '男', sayname: [Function: sayname] }

Object.assign方法实行的是浅拷贝，而不是深拷贝。也就是说，如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用。

我们也可以自己定义一个myAssign() 方法来实现对象的合并。

let obj1 = {name:'tom'
}
let obj2 = {name:'larry',age:12
}
let obj3 = {gender:'男',sayname(){console.log('hello')}
}
let target = {}
function myAssign(target,...temp){temp.forEach(function(item){for(var key in item){target[key] = item[key]}})return target
}
myAssign(target,obj1,obj2,obj3)
console.log(target) //{ name: 'larry', age: 12, gender: '男', sayname: [Function: sayname] }

Object.keys(obj)、Object.values(obj)、Object.entries(obj)： 分别返回由参数对象的属性名、属性值、键值对组成的数组。

let obj = {name:'tom',age:12,gender:'男'
}
console.log(Object.keys(obj))       //[ 'name', 'age', 'gender' ]
console.log(Object.values(obj))     //[ 'tom', 12, '男' ]
console.log(Object.entries(obj))    //[ [ 'name', 'tom' ], [ 'age', 12 ], [ 'gender', '男' ] ]

函数的扩展

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

function log(x,y='World') { console.log(x,y,log.length);
}
log()   //undefined World 1

通常情况下，定义了默认值的参数，应该是函数的尾参数。函数的length属性，将返回没有指定默认值的参数个数。

参数默认值可以与解构赋值的默认值，结合起来使用。

function foo({x,y=5}) { console.log(x,y);
}
foo({})          // undefined 5
foo({x:1})       // 1 5
foo({x:1,y:2})   // 1 2

箭头函数。ES6 允许使用“箭头”（=>）定义函数。

let test = (a,b)=>console.log(a+b)
//等价于...
let test = function(a,b){console.log(a+b)
}
test(1,2)   //3

箭头函数里面没有自己的this，而是引用外层的this。

let obj = {name:'tom',sayname(){console.log(this)}
}
//调用对象中的方法
obj.sayname()   //{ name: 'tom', sayname: [Function: sayname] }let obj = {name:'tom',sayname:()=>console.log(this)
}
obj.sayname()   //{}

箭头函数不能用于构造函数，没有内部属性arguments。

let test = function(){console.log(arguments)
}
test()  //[Arguments] {}let test = ()=>{console.log(arguments)
}
test()

数组的扩展

扩展运算符（…）。

let arr = [1,2,3]
console.log(...arr) //1 2 3console.log(...'hello') //h e l l o
console.log([...'hello']) //[ 'h', 'e', 'l', 'l', 'o' ]

Array.from()： 将类数组对象和可遍历的对象转化为数组。

let obj = {'0':'hello','1':'world','2':'nice',length:3}
console.log(Array.from(obj))    //[ 'hello', 'world', 'nice' ]
console.log(Array.from('hello'))    //[ 'h', 'e', 'l', 'l', 'o' ]

Array.of()： 将一组值转换为数组。

console.log(Array.of(1,2,3,4))  //[ 1, 2, 3, 4 ]
console.log(Array.of(true,false,true))  //[ true, false, true ]
console.log(Array.of('hello','world','nice'))  //[ 'hello', 'world', 'nice' ]

Array.of()方法的主要目的，是弥补数组构造函数Array()的不足——因为参数个数的不同，会导致Array()的行为有差异。

find()： 遍历数组，拿到第一个符合条件的值并返回，如果没有符合条件的值，返回undefined。

let arr = [12,3,2,4,56,7]
let res = arr.find((item,index,arr)=>{return item < 10
})
console.log(res)    //3

findIndex()： 遍历数组，拿到第一个符合条件的值的索引并返回，如果没有符合条件的值，返回-1。

let arr = [12,3,2,4,56,7]
let res = arr.findIndex((item,index,arr)=>{return item < 10
})
console.log(res)    //1

fill()： 使用固定的值填充数组。

let arr = []
arr.length = 5
let res = arr.fill(10)
console.log(res)    //[10, 10, 10, 10, 10]

entries()，keys()，values()： 遍历数组，返回一个遍历器对象，可以用for…of循环进行遍历。

let arr = [12,42,3,43,56,4]
let keys = arr.keys()
let values = arr.values()
let entries = arr.entries()
for(let key of keys){console.log(key)    //0 1 2 3 4 5
}
for(let value of values){console.log(value)   //12 42 3 43 56 4
}
for(let [key,value] of entries){console.log(key,value)
}

includes()： 判断数组中是否包含给定值，返回一个布尔值。

let arr = [1,2,3,4]
let res = arr.includes(5)
console.log(res)    //false

【ES6】对象、函数、数组的扩展相关推荐

es6 箭头函数 rest参数扩展运算符
Es6 箭头函数语法: 普通函数: fn=function(){} 箭头函数: fn=()=>{} 特性: this是静态的,this始终指向函数声明时所在作用域下的this的值(使用call ...
ES6——对象、数组、字符串、数值新增API
目录一.对象API扩展 1.Object.is() 2.Object.assign() 3.获取原型对象的方法 4.设置原型对象的方法 5.keys.values.entries.fromEntri ...
ES6(三）数组的扩展
1.Array.form ES6中,Array.from = function(items,mapfn,thisArg) { } Array.from 用于将类数组和可遍历对象(实现了It ...
VUE学习笔记——es6对象合并数组转对象
测试数据 let array = [{name: 'Conan', age: 17, gender: true}, {name: 'Ran', age: 16}, {name: 'Sherry', a ...
Es6学习笔记(7)----数组的扩展
参考书<ECMAScript 6入门> http://es6.ruanyifeng.com/ 数组的扩展 1.扩展运算符:可以将数组转化成逗号隔离的单个参数 ...[1,2,3] //控制 ...
es6-解构赋值，函数.数组.对象扩展
一.变量的解构赋值 1.对象的解构赋值 (1)属性名与变量名不一致当属性名称与变量名称不一致的,需要显式的指定属性名.这样才能把属性值给赋值到变量中. let user = {name: '小明', ...
ES6标准学习： 4、数组的扩展
数组的扩展一.类数组对象与可遍历对象转换为数组 Array.from()方法用于将类数组对象.可遍历对象转换为数组,其中可遍历对象包括es6新增的set和map结构所谓的类数组对象,本质特征是必须 ...
ES6的新特性（8）——数组的扩展
数组的扩展扩展运算符含义扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...
ES6学习笔记（六）数组的扩展
1.扩展运算符 1.1含义扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // ...

【ES6】对象、函数、数组的扩展

对象的扩展

函数的扩展

数组的扩展

【ES6】对象、函数、数组的扩展相关推荐

最新文章

热门文章