修炼js 3数据结构

这次我们来缕一缕Js的数据结构。

1、首先登场的是大家都比较熟悉的数组
接下来让我们先看看如何定义数组吧。

// 方式一
let arr1 = [];// 空数组

// 方式二
let arr2 = new Array(5);//创建长度为5的空数组,不写参数即 为没有长度的空数组
// 以上都是常见的写法,接下来是不太常见的写法

// 方式三
let arr3 = Array.of(1,2);//创建了一个长度为2数组并填充为1，2

// 方式四
let arr4 = Array(5).fill(3);//创建一个长度为5的数组并全部填充为3.

那么数组已经认识了，但是光认识还不行，接下来让我们多了解一下数组先生吧。
数组常用方法

var arr1 = [];
arr1.push(1);	// 向数组的末尾添加一个或多个元素，并返回新的数组长度.
arr1.pop();// 删除并返回数组的最后一个元素，若该数组为空，则返回undefined

arr1.unshift()//向数组的开头添加一个或多个元素，并返回新的数组长度。
arr1.shift()//删除数组的第一项，并返回第一个元素的值。若该数组为空，则返回undefined。

arr1.reverse();//将数组倒序。
arr1.sort();//对数组元素进行排序,从小到大
arr1.forEach(function)//用于调用数组的每个元素，并将元素传递给回调函数。
// 以上方法都会改变原数组
arr1.concat(arr2,arr3); //拼接两个数组生成新数组。 
arr1.join()//将数组的每一项用指定字符连接形成一个字符串。默认连接字符为 “,” 逗号。

arr1.filter(function(params){
   return params>5;
});//筛选出符合条件的元素 加入到新数组返回。

2、现在轮到“对象”了，嗯~~“对象”😏😏
先认识一下吧。

// 方式一
var obj1 = {};

// 方式二
var obj2  = new Object();

那么她/他有什么特点呢，属性描述符

var obj = {}
Object.defineProperty(obj,'attr',{
	value:'test',	// 值
	writable: false,// 可写性,为true时可对attr属性进行赋值操作
	enumerable: false,// 可枚举性,
	configurable: true,// 可配置性,为false则不能修改此属性的属性描述符
})//方法会直接在一个对象上定义一个
//新属性，或者修改一个对象的现有属性，并返回此对象。

哈哈哈，可能你突然对你的对象有了新的认识。下面来看看他/她访问描述符吧。
get set 第一种形式

var obj = {
    _attr:18,
}
Object.defineProperty(obj,'attr',{
    get:function(){
        return this.attr;
    },
    set:function(params){
        this._attr = params;
    }
})

get set 第二种形式

var obj={
    _name:'zyx',
    get name(){
        console.log("欢迎访问get")
        return this._name;
    },
    set name(name){
        this._name = name;
        console.log("欢迎访问set")
    }
}
obj.name="zs"
console.log(obj.name);
// 注意属性和方法尽量不要重名，因为方法会提升到变量之前（声明），
// 所以可能会导致set时调用再次调用get name方法 get 时调用set name方法，
// 造成栈溢出 Maximum call stack size exceeded

个人比较喜欢第二种方式，顺带一提vue2双向绑定原理就是这么实现的，通过get
和 set，data()函数返回的对象，vue会遍历该对象里面所有属性并使用 Object.defineProperty把他们转为get set。vue3的双向绑定由 Object.defineProperty实现双向绑定变为了proxy，如果有兴趣的话可以去试一试vue beta版。那么接下来我们一起来看看 他/她常用的方法吧。

obj.toString() //返回一个表示该对象的字符串
obj.isPrototypeOf()// 用于测试一个对象是否存在于另一个对象的原型链上。
obj.freeze()// 方法可以冻结一个对象。一个被冻结的对象再也不能被修改
obj.hasOwnProperty()// 返回一个布尔值，指示对象自身属性中是否具有指定的属性
Object.assign(target,source)//用于将所有可枚举属性的值从一个或多个源对象复制到
//目标对象。它将返回目标对象
Object.keys()//返回一个给定对象的自身可枚举属性组成的数组
Object.values()//能返回键基本就能返回值
Object.entries()//返回键值对组成的数组

接下来我们看看平时不太常见的 es6新增的两个数据结构吧！
3、Set Map
Set 是一个像数组的对象Set对象是值的集合，你可以按照插入的顺序迭代它的元素。 Set中的元素只会出现一次，即 Set 中的元素是唯一的。
3.1、Set
使用Set可轻松实现数组去重

let arr = new Set([1,1,2,3,3,4]);
console.log(arr.entries(),arr.keys(),Array.from(arr.values()));
// Array from类数组转数组

// 常用的方法
arr.add(params) //实例方法 params参数
arr.clear() // 移除Set中所有元素
arr.delete(params) // 删除与参数相同的 value的元素
arr.has(params) // 检查该参数是否在Set中存在 返回布尔值 

3.2、Map
map是一种键值对的结构，具有极快的查找速度。以下是map的定义及语法。

let map = new Map([["key1",2],[obj1={name:'zyx'},3]]);//你几乎可以使用类型的数据来当作map的键
// Map() 参数必须是一个可迭代的对象 也就是必须部署了 Iterable接口的对象。
map.set(arr[1,2],5)	// 设置Map对象中键的值。返回该Map对象。 //参数一为键 参数二为值
map.get(obj1); // 3 返回键对应的值，如果不存在，则返回undefined。
map.size(); // 返回map键值对数量
map.clear(); // 清空map/移除所有键值对

ok，看到这里基本上就结束了，如果想要了解set map更深入请移步至mdn。蟹蟹各位看官。