- 对象的扩展
1-1 属性的简洁表示法
//es5
var nick = "张三";
var obj = {
name: nick
}
console.log(obj);
//es6
let name = "小黑";
let stu = {
name
}
console.log(stu);
1-2 es6 对象中函数的简写
let a = 0;
let b = 10;
let stus = {
//es5 函数写法
sleep: function () {
},
//es6函数简写
eat() {
return {
a, b
}
}
}
1-3 es6 里面的getter setter 访问器 针对属性 获取或者设置
let animal = {
_name: '',
set name(n) {
console.log("设置_name");
this._name = n;
},
get name() {
console.log("获取属性_name");
return this._name
}
}
console.log(animal);
animal.name = "小黑";
console.log(animal.name);
1-4对象获取值的方式 2 对象点属性 对象[key]
let s = {
a: 1 }
console.log(s.a);
console.log(s['a']);
1-5对象的常规属性定义
let o = {
};
o.age = 20;
o['sex'] = "男";
console.log(o);
1-6对象的属性可以接入字面量的方式定义
//(对象的属性可以是变量 通过解析变量产生对象的属性)
let proresn = "name";
let prorex = "eat";
1-7解析属性变量使用[] 包变量
let list = {
[proresn]: "",
[prorex]() {
console.log('执行字面量函数');
}
}
console.log(list);
//如何使用
console.log(list[prorex]());
//对象属性上的name属性
//获取的是函数名称
//没用不用记
console.log(list[prorex].name)
1-8如何获取get set访问器的name属性
let f = {
set age(n) {
this._age = n;
},
get age() {
return this._age;
}
}
//下面报错 get set 访问器的name属性不能直接获取
//console.log(f.age.name);
//得先获取到整个访问器
let descript = Object.getOwnPropertyDescriptor(f, 'age');
console.log(descript);
console.log(descript.get.name);
console.log(descript.set.name);
//获取对象属性的一些配置参数
let people = {
name: "小花",
age: 20
}
1-9获取people对象name属性的相关配置
var desc = Object.getOwnPropertyDescriptor(people, 'name');
console.log(desc);
//设置对象属性的相关配置
Object.defineProperty(people, 'name', {
enumerable: false
});
var desc1 = Object.getOwnPropertyDescriptor(people, 'name');
console.log(desc1);
1-10不可枚举的属性 有以下几种情况忽略改属性
for (let key in people) {
console.log(key);
}
//configurable 默认true 允许删除对象属性 false不允许
delete people.age;
console.log(people);
1-11 es6 对象的遍历
//对对象的属性设置不可枚举 不能获取到
let qw = {
name: "xiao",
age: 10,
sex: '女',
[Symbol('age')]() {
console.log("第一无二的方法");
}
}
for (let key in qw) {
console.log(key);
}
//Object.keys(); 返回所有key集合
console.log(Object.keys(qw));
console.log(Object.getOwnPropertyNames(qw));
//返回symbol数据类型的key值
console.log(Object.getOwnPropertySymbols(qw));
- symbol 定义第一无二变量，通过symbol函数方式产生变量，增的数据类型
-原因是对象的属性名称可能会冲突 引入了symbol数据类型
–对象的属性名可能存在两种类型
// 1.直接是字符串 2.symbol类型的名称
//通过symbol函数产生的变量
2-1不能直接转化成字符串，如果symbol函数的参数不是字符串 会默认执行toString() 获取字符串
let s3 = Symbol(str);
console.log(s3);//Symbol(abc)
console.log(s3.toString()); //"symbol(abc)"
2-2 //es9 更新了一个属性 描述唯一变量
//description 在 Symbol.prototype.description 原型上面
console.log(s7.description); //直接获取字符串值
2-3 symbol变量也可以作为对象的属性
let aa=Symbol();
let objstu={
[aa]:'aaa'
}
console.log(objstu);
console.log(objstu[aa]);//undefined
2-4 创建两个空的symbol() 变量两个是不恒等的
// let k1=Symbol();
// let k2=Symbol();
// k1===k2 //false
2-5 想要使用同一个symbol值 true，使用Symbol.for() 返回同一个symbol值
let k2=Symbol.for('abc');
let k3=Symbol.for('abc');
console.log(k2===k3);//true
2-6symbol.keyFor() 获取登记过的symbol变量值
let k4=Symbol('abc');
let k5=Symbol.for('abc');
//console.log(k4===k5);//false
symbol.for() 使用同一个symbol变量
使用该方法 会去symbol的注册表住一个key值 在去声明的时候 会去找对应的key 如果没有重新生成
console.log(Symbol.keyFor(k4));//undefined 直接生成一个对应的symbol变量
console.log(Symbol.keyFor(k5));//abc 返回的就是key 原始字符串
- 对象的新增方法，
3-1Object.is();
es5 判断两个值相等 == ===
//检测的变量存在值类型和引用类型
//这个方法内部使用的是===
console.log(Object.is(10, '10'));
console.log(Object.is({
}, {
}));//false
3-2对象合并 Object.assign(); //1. 合并之后的目标 2. 合并对象之一 3.合并对象之一
//不同属性叠加 相同属性 后 覆盖 前
let h1 = {
a: 1, b: 2 };
let h2 = {
a: 2, c: 3 };
let target = {
};
console.log(Object.assign(target, h1, h2));//返回值是合并之后的对象
console.log(target);
浅拷贝
const obj1 = {
a: 1, b: {
c: 1 } };
const obj2 = Object.assign({
}, obj1);
obj1.b.c = 2;
console.log(obj2.b.c)
object.assign 对象替换
let o1 = {
a: 1, b: 2, c: 3 };
let o2 = {
a: 'abc', b: 'def' };
console.log(Object.assign(o1, o2));
数据合并是按照索引合并的
let o3 = [1, 2, 3];
let o4 = [4, 5];
console.log(Object.assign(o3, o4));
使用
对象添加属性
let work = {
};
console.log(Object.assign(work, {
a: 1, b: 2 }));
使用object.assign 给原型对象上添加
let p={
};
p.sort=function (){
}
Array.prototype.mySort = function () {
}
console.log(Array.prototype)
Object.assign(Array.prototype,{
myPai:function (){
}
});
console.log([]);
//Object.keys() 获取所有的key
//Object.values() 获取所有的值
//Object.entries() 获取键值的
let km={
a:1,b:2,c:3}
//比较常用
console.log(Object.keys(km));//返回的是key的集合
console.log(Object.values(km))//返回值的集合
console.log(Object.entries(km));//返回的是二位数组 key：value的集合
- set 数据结构 类似数组 要求是内部的值不能重复 是唯一的，Set 是构造函数，使用的时候 new，
//数组去重
let a=[1,1,2,3,3,2,5,4,6,5,4];
let arr=new Set(a);
console.log(arr);
//遍历 for of forEach
//不能使用
// arr.map((it,index)=>{
// console.log(it);
// });
//无长度属性
// console.log(arr.length);//undefined
// for(var i=0;i<arr.length;i++)
// {
// console.log(arr[i]);
// }
// console.log(arr.entries())
// for(let kay in arr.entries())
// {
// console.log(kay);
// }
//可以遍历
// for(let value of arr)
// {
// console.log(value);
// }
//可以遍历
arr.forEach((item)=>{
console.log(item);
});
//size 返回集合大小
console.log(arr.size);
//set 集合原型对象上的方法
//add delete clear has
let sets=new Set([1,2,3,4,5]);
sets.add('a');//添加元素
console.log(sets.has('a'));//检测 返回true false
console.log(sets.delete('a'));//删除某个元素 返回bool
//清除整个集合
sets.clear();
console.log(sets);
//set 集合遍历的几个方法
//keys() 返回集合所有键的 遍历器
let setarr=new Set([1,2,3,4,5]);
//返回集合的key
console.log(setarr.keys())
for(let key of setarr.keys())
{
console.log(key)//值
}
//values() 返回集合所有的值
console.log(setarr.values());
//注意： set集合 应为是类数组 所以keys values 返回一致
for(let key of setarr.values())
{
console.log(key)//值
}
//entries() 方法 返回集合的key:value值
console.log(setarr.entries());
for(let key of setarr.entries())
{
console.log(key)//值
}
//set集合使用扩展运算符
console.log(...setarr);
//数组去重
let m=[11,1,1,1,2,3,2,4];
let m1=[...new Set(m)];
console.log(m1);
//weakSet 类似set 也是不能重复的
//区别 ：weakSet 不能放值 只能放对象
let h=[[1,2],[3,4]];
let weak=new WeakSet(h);
//weakSet 三个操作方法
//add has delete
weak.add({});
weak.add([5,6]);
let so={};
weak.add(so);
console.log({}==={});
console.log(weak.has([5,6]));
console.log(weak.has(so));
console.log(weak);
//weakSet不能遍历
// for(let key of weak)
// {
// console.log(key);
// }
//map 数据结构
//存储的是对象解构 以键值对的方式存储
//用法类似set
//创建map结构
//map是构造函数 传递参数只能是数组类型的键值形式
let so1=[
["name","xiaoxiao"],
["sex","男"]
]
let maparr=new Map(so1);
//size
console.log(maparr.size);
//set 给map集合添加键值
maparr.set("age",20);
maparr.set("address",123);
//get 通过键获取值
console.log(maparr.get("name"));
//检测是否存在
console.log(maparr.has("sex"));
//delete 根据键删除值
console.log(maparr.delete("address"));
//全部清除
//maparr.clear();
console.log(maparr);
//map集合的遍历
for(let item of maparr)
{
console.log(item);// 集合型的键值对
}
//keys values entries
console.log(maparr.keys());
for(let key of maparr.keys()){
console.log(maparr.get(key));
}
console.log(maparr.values());
for(let value of maparr.values()){
console.log(value);
}
console.log(maparr.entries());
for(let item of maparr.entries()){
console.log(item);
}
maparr.forEach((item)=>{
console.log(item);//值
});
//map集合转化为数组 使用...
console.log(...maparr);
//map转对象
let mapobj={};
for(let item of maparr)
{
mapobj[item[0]]=item[1];
}
console.log(mapobj);
console.log(Object.entries(mapobj));
//map转json 先将map转为对象 在转json
console.log(maparr);
console.log(JSON.stringify(mapobj));
let json={"a":"1","b":"2"};
let ay=[];
for(let key in json)
{
console.log(key);
ay.push([key,json[key]]);
}
//[['a',1],['b',2]]
console.log(new Map(ay));
//weakmap 类似map
//weakmap中的key只能是对象（除过null）
//key对象不能被默认回收
let weakmap=new WeakMap();
console.log(weakmap);
总结:1.backgroud-position
2.jquery 的dom获取是静态的
3. get set访问器
4.js里面存在7个数据类型
6. 自己实现Object.is()方法的内部原理
// Object.prototype.myis=function (x,y){
// console.log('执行');
// if(x===y)
// {
// return true;
// }
// else{
// return false;
// }
// }
// Object.myis({
},{
});
// Object.defineProperty(Object, 'is', {
// value: function (x, y) {
// console.log(111);
// if (x === y) {
// return true;
// }
// else {
// return false;
// }
// }
// });
// console.log(Object.is({
},{
}));
console.log(Object.is(NaN, NaN));