对象的扩展
- 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) //test
let 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 3
console.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