ES6内容-解构与方法

最新推荐文章于 2024-10-02 05:39:15 发布

颖颖丫

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量116

点赞数

文章标签： javascript html5 node.js

本文链接：https://blog.csdn.net/l_y_h___/article/details/120722368

版权

本文深入介绍了ES6中的一些重要特性，包括函数的参数解构、rest参数、箭头函数，以及对象的Object.is()、Object.assign()等方法。此外，还详细阐述了数组的Array.from()、Array.of()等新方法，以及Symbol的使用，如消除魔术字符串。最后，探讨了Set和Map集合的数据结构及其操作。这些新特性极大地丰富了JavaScript的表达力和功能。

摘要由CSDN通过智能技术生成

函数功能新增

1.函数的参数解构

function add({a,b}){
    console.log(a+b)

}
var obj ={a:1,b:2}
add(obj)

function add1([a=1,b=2]){
    console.log(a+b)
}
add1([])//即使有默认值，最少也要传递解构，默认值可以被覆盖

2.rest参数

function add(a,...b){//将余下的实参保存在b中
    console.log(b)//[2,3,4,5]返回数组
    console.log(arguments)//类数组对象[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5, //'5': 6 }
}
add(1,2,3,4,5)

3.箭头函数()=>{}

没有`this`、`super`、`arguments`
不能通过`new`关键字调用（不能当构造函数）
没有原型`prototype`
不可以改变`this`指向
不支持重复的命名参数
当功能体只有一行时，会默认添加return进行返回


function fn1(){
    
}
var fn2 = ()=>{}
var obj = {};
var a1 = new fn2()//不能通过new关键字调用，不能当构造函数
console.log(dir.fn1);
console.log(dir.fn2);//没有原型prototype
fn2.call(obj)//不可以改变this指向
//当功能体只有一行时,会默认添加return进行返回
var obj1 = a=>a
var num = obj1(1)
console.log(num)//1
var obj2 = function(a){
    return a
}

对象功能新增

Object.is() 两个值是否为同一个值。返回true或者false

console.log(Object.is('1','1'))//true
console.log(Obect.is(1,'1'));//false
console.log(Object.is({},{}));//false 引用数据类型的内存地址不同

Object.assign() 将另一个对象中可枚举的属性拷贝到原对象中

var obj = {n1:'1',n2:'2'};
var obj1 = Object.assign({},obj);//深拷贝
var obj2 = Object.assign(obj,{});//浅拷贝
var obj3 = {n2:'3',n3:'4'};
console.log(Object.assign(obj,obj3));//{ n1: 1, n2: 3, n3: 4 }重复后者覆盖前者

Object.getPrototypeOf()获取一个对象的原型

var obj = {};
console.log(Object.getPrototypeOf(obj));//[Object: null prototype] {}

Object.setPrototypeOf()设置一个对象的原型

function Animal(name){
    this.name = name;

}
Animal.prototypeOf.getName = function(){//通过原型添加方法
    console.log(this.name);
}
var d1 = new Animal('xiaobai');
d1.getName();//xiaobai
var obj = {}
Object.setPrototypeOf(obj,d1);
obj.getName();//xiaobai

console.log(Object.getPrototypeOf(obj))//Animal { name: 'xiaobai' }

Object.keys()** 方法获取所有可枚举属性名
Object.values()** 方法获取所有的可枚举属性值
Object.entries()** 方法获取所有的可枚举属性名和属性值键值对

var obj = {
    name:'zhangsam',
    age:10,
    getname(){}
}
console.log(Object.keys(obj),Object.values(obj),Object.entries(obj))
//[ 'name', 'age', 'getname' ]
//[ 'zhangsam', 10, [Function: getname] ]
//[
//[ 'name', 'zhangsam' ],
//[ 'age', 10 ],
//[ 'getname', [Function: getname] ]
//]

数组功能新增

Array.from() 将类数组或可迭代对象转换为数组

var str = 'hello'
console.log(Array.from(str))//[ 'h', 'e', 'l', 'l', 'o' ]

var obj = {
    0:'h',
    1:'e',
    2:'l',
    3:'l',
    4:'o',
    length:5
}
console.log(Array.from(obj));//[ 'h', 'e', 'l', 'l', 'o' ] 不能没有length属性，要不然就不是类数组

Array.of() 创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型

var arr = new Array(1);//[ <1 empty item> ] 创建一个空数组
var arr1 = Array.of(1);//[1]

Array.prototype.find()返获取元素(只会找一个找到就停下)

var nums = [1,2,3,4];
var res = nums.find((v,k,arr)=>{
    return v>2;

})
console.log(res);//3

Array.prototype.findIndex()找到一个元素在数组中的位置,返回索引

Array.prototype.includes()方法找到一个元素是否存在于数组中

var nums = [1,2,3]
console.log(nums.includes(2))//true

Array.prototype.fill(v,start,end) 填充数组

var arr = new Array(100)//创建了长度为100的空数组
arr.fill(1,0,50);
arr.fill(2,50,100);
console.log(arr)//50个1和50个2组成的数组

for-of 遍历返回可迭代对象

var nums = [1,2,3,4];
console.log(nums.keys());//Object [Array Iterator] {}
console.log(Array.from(nums.keys()))//[1,2,3,4,]
console.log(nums.values());//Object [Array Iterator] {}
console.log(nums.entries());//Object [Array Iterator] {}

for(var v of nums.keys()){//for-of 里 v代表值
    console.log(v);
}//[1,2,3,4]

Array.prototype.keys()** 方法获取数组key
Array.prototype.values()方法获取数组元素
Array.prototype.entries()** 方法获取数组中的key、value键值对

Symbol

ES5 的对象属性名都是字符串，这容易造成属性名的冲突。

在对象中当做属性名使用，保证每个属性的名字都是独一无二的

var s1 = Symbol();
console.log(s1);//Symbol()
var s2 = Symbol();
console.log(s2 == s1);//false

var name = Symbol('name')//仅仅描述一下
console.log(name)//Symbol(name)


var obj={
    name:'zhangsan',
}
//Symbol 值作为对象属性名时，不能用点运算符，要用中括号表示法
obj[name] = 'xiaoming';
console.log(obj[name]);//'xiaoming'
console.log(obj.name);//'zhangsan'
//Symbol的name和obj的name不一样

方法：

Object.for()

obj[Symbol.for('age')]=10;
console.log(Symbol.for('age'))//10
//它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的 Symbol 值。如果有，就返回这个 Symbol 值，否则就新建一个以该字符串为名称的 Symbol 值，并将其注册到全局。

Object.getOwnPropertySymbols()方法返回一个数组，只包含symbol类型

console.log(Object.getOwnPropertySymbols(obj))//[ Symbol(name), Symbol(age) ]

Reflect.ownKeys()方法，返回所有的键数组

console.log(Reflect.ownKeys(obj))//获取对象所有的成员，包括name和symbol  [ 'nam', Symbol(name), Symbol(age) ]

Symbol.keyFor() 该方法返回一个已登记的 Symbol 类型值的key

var s5 = Symbol.for('test');
console.log(Symbol.keyFor(s5))//test 获取已经注册过的symbol的键（描述）

消除魔术字符串

var stus={
    n1:Symbol('xiaohong'),
    n2:Symbol(),
    n3:Symbol(),

}
function test(name){
    if(name == stus.n1){
        console.log('1')
    }else if(name == stus.n2){
        console.log('2')
    }else if(name == stus.n3){
        console.log('3')
    }
    
}
test(stus.n1)
//description属性：获取 Symbol 的描述

set集合

Set类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构展。Set的成员的不能通过索引的方式访问。

Set 构造函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

var arr = [1,2,3,4,3,2];
var arr1 = new Set(arr);//Set(4) { 1, 2, 3, 4 } 去重
console.log(arr1.size);//4 成员个数
arr1.add(6);//添加成员 Set(5) { 1, 2, 3, 4, 6 }
arr1.delete(1);//删除成员 Set(4) { 2, 3, 4, 6 }
arr1.clear();//清除
console.log(arr1.has(2))//true 是否含有某个元素

//set集合中键和值是一致的
console.log(arr1.keys());//[Set Iterator] { 2, 3, 4, 6 }
console.log(arr1.values());//[Set Iterator] { 2, 3, 4, 6 }
console.log(arr1.entries());//[Set Entries] { [ 2, 2 ], [ 3, 3 ], [ 4, 4 ], [ 6, 6 ] }

arr1.forEach((v)=>{//v代表值
    console.log(v) //2 3 4 6
})

Map集合

Map 对象保存键值对，并且能够记住键的原始插入顺序，任何值(对象或者原始值) 都可以作为一个键或一个值。Map类似于对象，也是键值对的集合，Map 可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。[[key,value],[key,value]]

我们在使用{}时，有可能会出现属性名和原型中的属性名一致的情况，Map不会
一个 Map的键可以是任意值，包括函数、对象或任意基本类型。
Map 中的 key 是有序的。{}无序
Map 的键值对个数可以轻易地通过size 属性获取，{}需要计算

var k = [];
var arr = [[0,'1'],[1,'2'],[k,'3'],[{},'4']];
var m = new Map(arr);
console.log(m);//Map(4) { 0 => '1', 1 => '2', [] => '3', {} => '4' }
console.log(m.get(k))//'3' get方法读取key对应的键值
m.add(3,'5');//添加
console.log(m.size)//长度
console.log(m.has(0))//查找是否含有该成员 某个键是否在当前 Map 对象之中
m.delete(0);//删除
console.log(m.keys());//[Map Iterator] { 1, [], {}, 4 }
console.log(m.values());//[Map Iterator] { '2', '3', '4', '5' }
console.log(m.entries());//[Map Entries] { [ 1, '2' ], [ [], '3' ], [ {}, '4' ], [ 4, '5' ] }
for(var k of m.keys){
    console.log(k)
}//键 1 [] {} 4
m.forEach((v,k,map)=>{
    console.log(k)//键
})