对象(object) 与数组(array)

对象(object) 与数组(array)

创建对象的几种方式

//方式1: 字面量
var obj = {a:1,b:2};//这个就是对象obj 中有两个属性 a, 和b,每个属性对应的值分别为1, 2

// 方式二: 构造函数

let tmp = {b:1}
let obj2 = new Object(tmp) //传递有值的内容,返回该对象
// 如果tmp 值为null 或不传递值,则默认为空对象

// 方式三: 定制化创建对象。
// let obj3 = Object.create(null); // null 或 undefined 会返回一个新的 空对象 

// Object.create(对象,{ 属性名:属性描述器对象}) 

let obj4 = Object.create({},{ 
  	// 定制化属性 ,属性描述,其中包括,myAge这个属性对应的值,以及属性对应的属性
 	 myAge:{ 
       //writable 默认为false,此时value不可修改
    	value:35, // 不能和get/set同用 
    	writable:false, // 不能和get/set同用 
  		} 
	}); 
	console.log('obj4:',obj4) 

var age = 1; 
let obj5 = Object.create({},{ 
 
  // 定制化属性 
  	myAge:{ 
      get(){
        	console.log('get被执行了') 
        	return age; 			
      },
      set(newV){ 	// obj5.myAge = 'xxx' 
        // 数据劫持 
        	if (newV > 0 && newV < 20) { 
          	// 保存 
          	age = newV; 
        	} else { 
          		alert('去你大爷!') 
        	} 
      	} 
    } 
}); 
console.log('obj5:',obj5);
let obj6 = Object.create({},{ 
  // 定制化属性 
  myAge:{ 
    value:1,
    configurable:false, // 可配置 是否可以使用delete、能否改变特性, 能否修改访问器属性,false为不可重新定义【Object.defineProperty】 
    enumerable:true // 可枚举 是否可以枚举出内部属性for (let key in obj6) Object.keys|values
  	} 
});

// 方式4: 通过在已有对象中添加额外其他属性的方式创建对象
let obj7 = Object.assign({a:1},{b:1}); 
console.log(obj7)

// 使用构造器创建 let ooo = {a:1}; 
// 方式1 即将淘汰。
let obj8 = new ooo.constructor();
// 方式2 
let obj9 = Reflect.construct(ooo.constructor) console.log('obj8,obj9:',obj8,obj9)

操作对象中的属性

设置属性

// 设置 
var keyStr = 'mykey'; 
var obj1 = {}; // 定义一个空的对象
obj1.a = '1'; 	// 向对象中添加属性a ,value 值为 ‘1’
obj1['j-d'] = 2; // 通过字符量的形式设置属性 j-d 为2 
obj1[keyStr] = 3; // 动态的key名 获取keyStr对应的变量为mykey ,所以设置属性mykey= 3
obj1.keyStr = 4; // 设置属性keyStr = 4
console.log('obj1:', obj1);

获取属性

// 通过变量获取
obj[keyStr]   // 3
//通过加引号属性名获取
obj['j-d']  // 2

遍历对象的属性

// for in 遍历对象的属性
for(let key in obj1) { 
	console.log('key:',key); 
	console.log('value:',obj1[key]); 
}
// for  of  遍历对象的值
for(let value of obj1 ) { 
	console.log('value:',value) 
}

删除

delete obj1.key; 
// 或者 
//主流通过reflect 删除对象中的属性
Reflect.deleteProperty(obj1,'key')

添加

obj1.addKey1 = '添加的第1个key';
Object.assign(obj1,{addKey2:'添加了2个key2'});
Reflect.set(obj1,'addKey3','添加了3个key3')
console.log(obj1);

小结

  • Reflect反射类,提供了一些静态方法,类名调用方法
    • 创建对象Reflect.constrcu(构造函数,[参数])类似new构造函数
    • 设置属性Reflect.set(对象,属性,值)//三个参数
    • 删除属性Reflect.deleteProperty(对象,属性名)类似delete属性名

数组(array)

删除数组元素

array.splice(start[, deleteCount[, item1[, item2[, *...]]]]*)

可以看到splice 有三个参数,分别需要删除元素的初始下标,删除的元素个数,以及新增的元素。

arr.splice(1,2); // 删除在数组中以下标为 1的开始 元素,删除元素数量为2

修改获取数组元素

slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝

(包括 begin ,不包括 end ), 负数索引是倒取

arr[51] = 'abc'; 
// 获取 
arr[51] 
arr.slice(2,4); // 获取2和3 
arr.slice(2,-1); // 0,1,2.....50 => 2,3,4...49从下标为2的元素开始,截取到倒数第一个元素

中间插入

// 在3索引的位置删除0个,插入'AA','BB' 
arr.splice(3,0,'AA','BB')

查找

arr.find(ele=> ele === 25); // 元素:25 
arr.findIndex(ele=> ele === 25); // 索引:24

压入压出

首尾压入

// 头部压入 
arr.unshift(-1); 
// 尾部压入 
arr.push(-1);

首尾弹出

// 头部弹出 
arr.shift(); 
// 尾部弹出 
arr.pop();

遍历数组

forEach

//forEach 有三个参数,分别为item :遍历的值, 下标, 以及原数组
arr.forEach(function(item,index,arr){
  console.log('item',item);
  console.log('index',index);
  console.log('arr:',arr)
}

map返回新数组

//遍历数组中的每个数值,然后更新为返回值
//下面的例子为原数组
const newArray = arr.map(item,index,arr){
  return item
}

filter过滤

过滤出满足条件的元素

const newArr = arr.filter(function(item,index,arr){
  if(index>20) return ture;//留下元素
  else false;
})

every

判断是否每个都符合条件,全部true ,返回true ,存在false ,返回false

let flag = arr.every(function(item,index,arr){
  return item > 49
})

some

判断是否存在一个元素满足条件,存在返回true ,反之返回 false

let flag = arr.some(function(item,index,arr){
  return item < 49;
})

reduce

使用上次返回的结果与每个元素计算

let nums = [1,2,3,4,5,6,7]
let sum = nums.reduce(function(total,ele){
  console.log(ele)//ele 数组中存在的元素
  return total + n//初始total 为0 ,返回每次相加的情况。
})