js常用对象及解构赋值
基本类型的包装对象
“包装对象”对于每种基本类型调用都是不同的，如String, Number, Boolean 和 Symbol。因此，他们提供了不同的方法。基本类型 null 和 undefined 是个例外。他们没有相应的“包装对象”，也没有提供任何方法。
数字类型–JavaScript中所有的数字都以64位格式IEEE-754存储
<script>
let num = 255;
/* 1. 将数字转化为几进制 toString(base) */
console.log(num.toString(16));
console.log(num.toString(2));
console.log(12345..toString(36));
// 注意:数字调用时请注意 123456..toString(36) 中的两个点不是拼写错误。如果我们想直接在一个数字上调用一个方法，比如上面例子中的 toString，那么我们需要在它后面放置两个点 ..。如果我们放置一个点：123456.toString(36)，那么会出现错误，因为 JavaScript 语法暗示了第一个点之后的小数部分。如果我们再放一个点，那么 JavaScript 知道小数部分是空的，现在进入方法。
/* 2. 向下舍入 */
console.log(Math.floor(3.1));
console.log(Math.floor(3.6));
console.log(Math.floor(-1.1))
console.log(Math.floor(-1.6));
/* 3. 向上舍入 */
console.log(Math.ceil(3.1));
console.log(Math.ceil(3.6));
console.log(Math.ceil(-1.1))
console.log(Math.ceil(-1.6));
/* 4. 四舍五入 */
console.log(Math.round(3.1));
console.log(Math.round(3.6));
console.log(Math.round(-1.1))
console.log(Math.round(-1.6));
/* 5. 取整(IE不支持trunc这个方法) */
console.log(Math.trunc(3.1));
console.log(Math.trunc(3.6));
console.log(Math.trunc(-1.1))
console.log(Math.trunc(-1.6));
/* 6.测试isFinite和isNaN */
// isNaN(value) 将其参数转换为数字，然后测试它是否为 NaN：
console.log(isNaN(NaN));
console.log(NaN === NaN); //false
// isFinite(value) 将其参数转换为数字，如果是常规数字，则返回 true，(NaN / Infinity / -Infinity是非常规数字),否则返回false
alert( isFinite("15") ); // true
alert( isFinite("str") ); // false
alert( isFinite(Infinity) ); // false
</script>
可迭代对象
可迭代对象是数组的泛化,这个概念是说任何对象都可在 for…of 循环中使用。]
可迭代对象:有Symbol.iterator方法的对象
类数组对象:有索引和length属性的对象
obj[Symbol.iterator] 的结果被称为迭代器。由它处理更深入的迭代过程。
一个迭代器必须有 next() 方法，它返回一个 {done: Boolean, value: any}，这里 done:true 表明迭代结束，否则 value 就是下一个值。
<script>
/* 1. 创建一个可迭代对象
1. 为对象添加一个Symbol.iterator的方法
2. 当for..of循环开始,它就会调用这个方法,如果没有找到,就报错
3. 这个方法必须返回一个迭代器 —— 一个有 next 方法的对象。
4. 当 for..of 循环希望取得下一个数值，它就调用这个对象的 next() 方法。
5. next() 返回结果的格式必须是 {done: Boolean, value: any}，当 done=true 时，表示迭代结束，否则 value 必须是一个未被迭代的新值。
*/
let range = {
from: 1,
to: 5
};
range[Symbol.iterator] = function () {
return {
current: this.from,
last: this.to,
next() {
if (this.current <= this.last) {
return {
done: false,
value: this.current++
};
} else {
return {
done: true
};
}
}
}
}
for (let num of range) {
alert(num);
}
// 技术上说，我们可以将它们合并，用 range 自身作为迭代器来简化代码。
let range = {
from: 1,
to: 5,
[Symbol.iterator]() {
this.current = this.from;
return this;
},
next() {
if (this.current <= this.to) {
return {
done: false,
value: this.current++
};
} else {
return {
done: true
};
}
}
};
for (let num of range) {
alert(num); // 1, 然后 2, 3, 4, 5
}
// 显示调用迭代器
let string = 'Hello';
let iterator = string[Symbol.iterator]();
while (true) {
let result = iterator.next();
if (result.done)
break;
alert(result.value);
}
</script>
Map
Map 是一个键值对的集合，很像 Object。但主要的区别是，Map 允许所有数据类型作为键。
- new Map(): 创建 map。
- map.set(key, value): 根据键（key）存储值（value）。
- map.get(key): 根据键返回值，如果 map 中该键不存在，返回 undefined。
- map.has(key): 如果键存在，返回 true，否则返回 false。
- map.delete(key): 移除该键的值。- map.clear(): 清空 map
- map.size:返回当前元素个数。
Set
Set 是一个值的集合，这个集合中所有的值仅出现一次。
- new Set(iterable):创建 set，利用数组来创建是可选的（任何可迭代对象都可以）。
- set.add(value):添加值，返回 set 自身。
- set.delete(value):删除值，如果该 value 在调用方法的时候存在则返回 true ，否则返回 false。
- set.has(value):如果 set 中存在该值则返回 true ，否则返回 false。
- set.clear():清空 set。
- set.size:元素个数。
WeakSet和WeakMap
WeakSet 是一种特殊的 Set，它不会阻止 JavaScript 将它的元素从内存中移除。WeakMap 和 Map 的区别也和上述一样。
WeakMap
- 它和 Map 的第一个区别是它的键必须是对象，不能是基础类型的值
如果我们使用对象作为它的键，并且没有任何引用指向这个对象, 它将会自动被从内存中移除（也会从 map 中移除）。 - WeakMap 并不支持方法 keys()，values()，entries()，我们不能对它进行迭代。所以没有办法获取它的所有键值。方法:
weakMap.get(key)
weakMap.set(key, value)
weakMap.delete(key, value)
weakMap.has(key)
WeakSet
只能将对象添加进 WeakSet（不可以是基础类型）
仅当对象存在其他位置的引用时它才存在于 set 中。
就像 Set 一样，它支持 add，has 和 delete，不支持 size，keys()也不支持迭代器。
WeakMap/WeakSet 的主要任务 —— 作为对象的附加存储，该对象在其他位置被保存或管理。
对象的键,值,项
Object.keys(obj) // 返回一个包含该对象全部的键的数组
Object.values(obj) // 返回一个包含该对象全部的值的数组
Object.entries(obj) // 返回一个包含该对象全部[key,value]键值对的数组
Object.getOwnPropertySymbols() // 返回一个只包含Symbol类型的键的数组
Reflect.ownKey(obj); // 返回所有键
<script>
let user = {
name:'叶叶',
age : 30
};
console.log(Object.keys(user));
console.log(Object.values(user));
console.log(Object.entries(user));
console.log(Object.getOwnPropertySymbols(user));
console.log(Reflect.ownKeys(user));
</script>
JSON
JSON (JavaScript Object Notation) 是表示值和对象的通用格式。它被描述为 RFC 4627 标准。最初它是为 JavaScript 编写的，但许多其他语言也有库来处理它。
JSON 是跨语言的纯数据规范，因此一些特定于 JavaScript 的对象属性被 JSON.stringify 跳过 如：
- 函数属性（方法）。
- Symbolic 属性。
- 存储 undefined 的属性
方法:
- JSON.stringify 将对象转换为 JSON。
得到的 json 字符串是一个被称为 JSON 编码或者序列化或者字符串化或者编组的对象。我们准备好通过网线传输或存储。如果一个对象具有 toJSON()方法，那么它可被 JSON.stringify 调用。 - JSON.parse 将 JSON 转换回对象。
<script>
/* 1. stringify
JSON.stringify(value[,replacer,space]);
value 要编码的值
replacer 要编码的属性数组,或映射函数function(key,value)
space 文本添加缩进,空格和换行符
*/
let student = {
name: 'John',
age: 30,
isAdmin: false,
courses: ['html', 'css', 'js'],
wife: null
};
// 1.1 只使用第一个参数
let json = JSON.stringify(student);
alert(typeof json); //string
alert(json);
//{"name":"John","age":30,"isAdmin":false,"courses":["html","css","js"],"wife":null}
let room = {
number: 23
};
let meetup = {
title: "Conference",
participants: [{
name: "John"
}, {
name: "Alice"
}],
place: room // meetup references room
};
room.occupiedBy = meetup; // room references meetup
// 1.2 第二个参数使用数组, 如果我们需要微调替换过程，比如过滤掉循环引用，我们可以使用 JSON.stringify 的第二个参数。如果我们传递一组属性给它，只有这一组属性会被编码
json = JSON.stringify(meetup, ['title', 'participants']);
alert(json); //{"title":"Conference","participants":[{},{}]}
// 1.3 第二个参数使用映射函数: 让我们包含除了会导致循环引用的 room.occupiedBy 之外的所有属性
json = JSON.stringify(meetup, function replacer(key, value) {
alert(`${key}:${value}`);
return (key == 'occupiedBy') ? undefined : value;
});
alert(json);
// 1.4 第三个参数:格式化 所有字符串化的对象都没有缩进和额外的空格。现在，如果我们想通过网络发送一个对象。spacer 参数可以更好的输出。
/*
alert(JSON.stringify(student, null, 2)); {
"name": "John",
"age": 25,
"roles": {
"isAdmin": false,
"isEditor": true
}
}
*/
</script>
解构赋值
解构赋值是一种特殊的语法，它让我们可以将数组或对象进行“拆包”，存放到一系列的变量中，因为有时候使用变量更加方便。解构操作在那些具有很多参数和默认参数值的函数中也很奏效. 通过将结构中的各元素复制到变量中来达到“解构”的目的。但是其本身是没有被修改的。
**数组解构(实际可用于任何可迭代对象) **
let arr = ['li','叶叶'];
let [firstName,lastName] = arr;
console.log(firstName);
console.log(lastName);
// 和返回数组的函数组合使用
let [frstName, surname] = "Ilya Kantor".split(' ');
console.log(frstName);
console.log(surname);
// 忽略元素
let[,, title] = ["Julius","Caesar","Consul","of the Roman Republic"];
console.log(title);
// 用于可迭代对象
let [a,b,c] = "abc";
console.log(a);
console.log(b);
console.log(c);
// 等号左侧可以是任何可以被赋值的变量
let user ={};
[user.name,user.age] = ['李叶叶',18];
console.log(user);
// 使用Object.entries(obj)方法和解构语法来遍历一个对象的键值对
for(let [key,value] of Object.entries(user)){
console.log(`${key}:${value}`);
}
// 如果我们不仅要获得第一个值，还要将后续的所有元素也收集起来——我们可以使用三个点 "..." 加一个参数来接收“剩余的”元素：
let [name1,name2,...rest] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];
console.log(name1);
console.log(name2);
console.log(rest[0]);
console.log(rest[1]);
console.log(rest.length);
// 如果赋值语句中变量的数量多于数组中实际元素的数量，赋值不会报错。未赋值的变量被当作 undifined
let [num1,num2] = [];
console.log(num1);
console.log(num2);
// 如果我们想要提供一个“默认值”给未赋值的变量，我们可以使用 = 来提供：
let [str1='li',str2='叶叶']=["李"];
console.log(`${str1}:${str2}`);
对象解构
let {var1, var2} = {var1:…, var2…}
在等号右侧有一个已经存在的对象，我们想把它拆开到变量中。等号左侧包含了对象相应属性的一个“模式”。
let options ={
title: 'Menu',
width:100,
height: 200
};
let {title,width,height} = options;
console.log(title);
console.log(width);
console.log(height);
// 给属性和变量之间指定一个映射关系。
// { 原属性：目标变量 }
let {width: w,height:h,title} = options;
console.log(w);
console.log(h);
console.log(title);
let a,b,c;
{a,b,c} = {a:10,b : 5, c:10}; // 报错,问题在于 JavaScript 把主代码流（即不在其他表达式中）的 {...} 当做一个代码块，这样的代码块可以被用来组织语句.为了告诉 JavaScript 这不是一个代码块，我们可以把整个赋值表达式用括号 (...) 包起来：
({a,b,c} = {a:10,b : 5, c:10});
console.log(a);
console.log(b);
console.log(c);
嵌套解构
let options = {
size: {
width:100,
height:200
},
items : ['Cake','Donut'],
extra : true
};
let{
size:{
width,
height
},
items:[item1,item2],
title='Menu' // 在对象中不存在的属性(会使用默认值)
}=options;
console.log(title); // Menu
console.log(width); // 100
console.log(height); // 200
console.log(item1); // Cake
console.log(item2); // Donut