文章目录
- 函数参数的默认值
- rest 参数
- spread 扩展运算符
- Symbol
-
- Symbol 基本使用
- Symbol的内置属性
- 迭代器
函数参数的默认值 ES6 允许给函数参数赋值初始值
例如：
>
//ES6 允许给函数参数赋值初始值
//1. 形参初始值 具有默认值的参数, 一般位置要靠后(潜规则)
// function add(a,c=10,b) {
//return a + b + c;
// }
// let result = add(1,2);
// console.log(result);
//2. 与解构赋值结合
function connect({host="127.0.0.1", username,password, port}){
console.log(host)
console.log(username)
console.log(password)
console.log(port)
}
connect({
host: 'atguigu.com',
username: 'root',
password: 'root',
port: 3306
})
rest 参数 ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
它们的区别在于：
- rest返回的是一个数组，它可以使用数组的api
- arguments返回的是一个对象
rest必须要放到形参的最后例如：
>
// ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments
// ES5 获取实参的方式
// function date(){
//console.log(arguments);
// }
// date('白芷','阿娇','思慧');
// rest 参数
// function date(...args){
//console.log(args);
// filter some every map
// }
// date('阿娇','柏芝','思慧');
// rest 参数必须要放到参数最后
// function fn(a,b,...args){
//console.log(a);
//console.log(b);
//console.log(args);
// }
// fn(1,2,3,4,5,6);
spread 扩展运算符 扩展运算符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将
一个数组转为用逗号分隔的参数序列，对数组进行解包(rest更类似于打包)。
例如：
>
// 『...』 扩展运算符能将『数组』转换为逗号分隔的『参数序列』
//声明一个数组 ...
const tfboys = ['易烊千玺','王源','王俊凯'];
// => '易烊千玺','王源','王俊凯'// 声明一个函数
function chunwan(){
console.log(arguments);
}chunwan(...tfboys);
// chunwan('易烊千玺','王源','王俊凯')
应用：
- 数组的合并
- 数组的克隆
- 伪数组转化为真正的数组
>
//1. 数组的合并 情圣误杀唐探
// const kuaizi = ['王太利','肖央'];
// const fenghuang = ['曾毅','玲花'];
// // const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
// const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];
// console.log(zuixuanxiaopingguo);
//2. 数组的克隆
// const sanzhihua = ['E','G','M'];
// const sanyecao = [...sanzhihua];
//['E','G','M']
// console.log(sanyecao);
//3. 将伪数组转为真正的数组
const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr);
// arguments
Symbol Symbol 基本使用 ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是
JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol 特点
- Symbol 的值是唯一的，用来解决命名冲突的问题
- Symbol 值不能与其他数据进行运算
- Symbol 定义 的 对象属 性 不能 使 用 for…in 循 环遍 历 ，但 是可 以 使 用Reflect.ownKeys 来获取对象的所有键名
此处可参考js权威指南，讲得非常的详细
注: 遇到唯一性的场景时要想到 Symbol,对一个对象进行改造的时候用symbol不会造成冲突，高效且安全！例如：
>
//创建Symbol
let s = Symbol();
// console.log(s, typeof s);
let s2 = Symbol('NEFU');
let s3 = Symbol('NEFU');
//Symbol.for 创建
//这里s4和s5是严格相等的
let s4 = Symbol.for('NEFU');
let s5 = Symbol.for('NEFU');
//不能与其他数据进行运算
//let result = s + 100;
//let result = s > 100;
//let result = s + s;
//
// USONByou are so niubility
// uundefined
// sstringsymbol
// oobject
// nnull number
// bboolean
截止目前的其中数据类型总结:应用：用symbol创造对象属性
USONB – you are so niubility
u: undefined
s: string symbol
o: object
n: null number
b: boolean
>
//向对象中添加方法 up down
let game = {
name:'俄罗斯方块',
up: function(){},
down: function(){}
};
//声明一个对象
// let methods = {
//up: Symbol(),
//down: Symbol()
// };
// game[methods.up] = function(){
//console.log("我可以改变形状");
// }// game[methods.down] = function(){
//console.log("我可以快速下降!!");
// }// console.log(game);
//
let youxi = {
name:"狼人杀",
[Symbol('say')]: function(){
console.log("我可以发言")
},
[Symbol('zibao')]: function(){
console.log('我可以自爆');
}
}console.log(youxi)
因为Symbol()是一个动态的值，故不能直接作为属性名，所以此处要加一个中括号括起来。Symbol的内置属性 除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。
它的作用就是改变对象在特定场景下的表现，从而达到拓展对象功能的作用！
- Symbol.hasInstance：当其他对象使用 instanceof 运算符，判断是否为该对象的实例时，会调用这个方法
- Symbol.isConcatSpreadable：对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值，表示该对象用于 Array.prototype.concat()时，是否可以展开。
- Symbol.species：创建衍生对象时，会使用该属性
- Symbol.match ：当执行 str.match(myObject) 时，如果该属性存在，会调用它，返回该方法的返回值。
- Symbol.replace：当该对象被 str.replace(myObject)方法调用时，会返回该方法的返回值。
- Symbol.search ：当该对象被 str.search (myObject)方法调用时，会返回该方法的返回值。
- Symbol.split：当该对象被 str.split(myObject)方法调用时，会返回该方法的返回值。
- Symbol.iterator：对象进行 for…of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器
- Symbol.toPrimitive ：该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
- Symbol. toStringTag：在该对象上面调用 toString 方法时，返回该方法的返回值
- Symbol. unscopables：该对象指定了使用 with 关键字时，哪些属性会被with环境排除。
>
// class Person{
//static [Symbol.hasInstance](param){
//console.log(param);
//console.log("我被用来检测类型了");
//return false;
//}
// }// let o = {};
// console.log(o instanceof Person);
// const arr = [1,2,3];
// const arr2 = [4,5,6];
// arr2[Symbol.isConcatSpreadable] = false;
// console.log(arr.concat(arr2));
迭代器 遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提
供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。
- ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费
- 原生具备 iterator 接口的数据(可用 for of 遍历)
b) Arguments
c) Set
d) Map
e) String
f) TypedArray
g) NodeList
- 工作原理
a) 创建一个指针对象，指向当前数据结构的起始位置
b) 第一次调用对象的 next 方法(这个方法放在对象的Symbol.iterator属性中)，指针自动指向数据结构的第一个成员
c) 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
d) 每调用 next 方法返回一个包含 value 和 done 属性的对象
注: 需要自定义遍历数据的时候，要想到迭代器。【ES6|ES6新特性②】例如：
>
//声明一个对象
const banji = {
name: "终极一班",
stus: [
'xiaoming',
'xiaoning',
'xiaotian',
'knight'
],
[Symbol.iterator]() {
//索引变量
let index = 0;
//因为放在了return中调用者不再是banji，则在return外取得。
let _this = this;
//Symbol.iterator：对象进行 for...of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器
//返回的是迭代器(遍历器)
return {
next: function () {
if (index < _this.stus.length) {
const result = { value: _this.stus[index], done: false };
//下标自增
index++;
//返回结果
return result;
}else{
return {value: undefined, done: true};
}
}
};
}
}//遍历这个对象
for (let v of banji) {
console.log(v);
}
推荐阅读
- 项目开发|用node+WebSocket+MySQL+vue仿做学习通的一些功能（二）（主页的展示）
- 前端|js和vue如何调用百度地图
- Typescript 学习笔记
- Webpack|一份不可多得的 Webpack 学习指南（共10k字）
- 开发工具|小马带你认识前端开发神器WebStorm（WebStorm及Git的相关配置与使用）
- Web 性能权威指南
- 前端工程师经常上哪些网站学习最新技术?
- 融合通信常见问题3月刊 | 云信小课堂
- xterm.js+react的综合使用（onKey以及onData的区别使用导致的光标串行问题）