ES6, 函数的扩展（剩余参数，箭头函数），art-template，symbol, set和map数据结构
一、函数扩展:
1.剩余参数:
1) 语法：...变量名（形参名）
2) 返回值：数组
3) 注意：必须将剩余参数放到最后一个形参的位置
// function m1({x=10,y=20}){ // console.log(x,y) // } // function m2({x=10,y=20}={}){ // console.log(x,y) // } // function m3({x,y}={x:10,y:20}){ // console.log(x,y) // } // m1({}) // m2({}) // m3({}) // 剩余参数 // type number string boolean undefined function object // function fn() { // // 判断是否为一个数组 // // console.log(Array.isArray(arguments)) // // console.log(arguments instanceof Array) // // console.log(Object.prototype.toString.call(arguments)) // // 伪数组转真数组 // // ES5 // // let x = Array.prototype.slice.call(arguments) // // let x = [].slice.call(arguments) // // ES6 // // let x = Array.from(arguments) // // console.log(x) // // console.log(Array.isArray(x)) // } // fn(1, 2, 3, 4) // ...变量名 剩余参数 function fn(x, y, ...rest) { console.log(rest) console.log(Array.isArray(rest)) }； fn(1, 2, 3, 4)；
扩展运算符：
1. 数组的扩展运算符：
1）结合set 实现数组去重
let arr = [1,3,4,5,3,1,4]; let newArr = [...new Set(arr)]; console.log(newArr); // [1,3,4,5]
// 之前用的一种数组去重方法
let newArr2 = arr.filter((item,index)=>{
return arr.indexOf(item) === index;
});
console.log(newArr2);// [1,3,4,5]
2）浅拷贝
let arr1 = [1, 2, 3, [10, 20]]; let arr2 = [...arr1]; arr1[0] = "hello"; arr1[3][0] = "world"; console.log(arr1, arr2);
3）数组的拉平
// 拉平 let arr1 = [ [1, 2, 3], [4, 5, 6, [1, 2, 3, [3, 4]]] ]; let arr2 = arr1.flat(Infinity); console.log(arr2); // [1, 2, 3, 4, 5, 6, 1, 2, 3, 3, 4]
对象的扩展运算符：
1）实现浅拷贝
2）模拟vuex数据
let mapState = { userInfo: { uname: "xiaoming" } }; let mapMutations = { fn() { console.log("fn") } }; let vm = { data: {...mapState }, methods: {...mapMutations } };
2.箭头函数：
2.1 语法：
1）参数：参数为一个值的时候可以省略（）
2）函数体：函数体内只有一句话的时候，可以省略{}和return，但是要注意是对象的时候，要在对象外面加（），防止代码歧义；
// function fn(){}； // let f = function(){}； // 语法： // let f = () => {}； // 箭头的左边: // 1.没有参数 // let fn = () => { // console.log("demo") // }; // fn()； // 2.只有一个参数,可以省略（） // let fn = x => { // console.log(x) // }； // fn("hello")； // 3.多个参数不可以省略() // let fn = (x, y) => { // console.log(x, y) // }； // fn("hello", 10)； // 箭头的右边：函数体 // 1. 一句话 ,可以省略return和{};但是要注意，如果return出来的结果是对象，为了避免代码歧义，需要在对象外加（） // let fn = () => "hello"; // let fn = x => x; // let fn = () => [1, 2, 3]; // let fn = () => ({ // a: 10, // b: 20 // }); // console.log(fn())； // 2.多句话，不可以省略return和{} // let fn = x => { // if (x % 2 == 0) { // return "偶数" // } else { // return "奇数" // }； // }； // console.log(fn(9))； // arr.forEach(()=>{})； // arr.map(()=>{})； // arr.filter(()=>{})； // arr.every(()=>{})； // arr.some(()=>{})； // setInterval(()=>{},2000)；
2.2 特点：
1）this指向的是定义时所在的对象（跟着爹走）；
2）Call,apply,bind不能够改变箭头函数的this指向；
3）箭头函数中没有prototype原型
4）箭头函数没有constrcutor没有构造器
5）不能够使用new进行实例化
6）箭头函数中不能够使用arguments对象，用剩余参数来代替；
2.3 不适用场景：
1）对象函数简写不推荐使用箭头函数；
2）事件的绑定要分情况使用箭头函数；
二、art-template
-
引入art-template.js文件
-
使用script标签定义模板内容，必须id，type指定
<script id="temp" type="text/html"> {{each arr}} <li>{{$value}}---{{$index}}</li> {{/each}} </script>
3. 在js中通过template(),进行模板的查找和传递
let html = template("temp", { arr });
4.在模板引擎当中进行逻辑处理
5.追加元素；
三、Symbol第七种数据类型：基本类型
-
特点：独一无二
-
作用：从根本上防止属性名的冲突
-
Symbol()可以加字符串，但是只是标识符的作用； s1.description 获取标识符
-
Symbol.for() 可以使symbol相同
-
Symbol.keyFor(s1) 取值
<script>
// let s = Symbol();
// console.log(s); // Symbol()
// console.log(typeof s); // symbol
// let s1 = "hello";
// let s2 = "hello";
// console.log(s1 === s2); // true
// let s1 = Symbol();
// let s2 = Symbol();
// console.log(s1 == s2); // false
// let obj = {
// a: 10,
// a: 20
// };
// console.log(obj); // {a: 20}
// let obj = {
// [Symbol()]: 10,
// [Symbol()]: 20
// };
// console.log(obj); // {Symbol(): 10, Symbol(): 20}
// let s1 = Symbol("s1");
// let s2 = Symbol("s1");
// console.log(s1 == s2); // false
// console.log(s1.description); // s1
let s1 = Symbol.for("s1");
let s2 = Symbol.for("s1");
console.log(s1 === s2); // true
console.log(Symbol.keyFor(s1)); // s1
</script>
四、set和map 数据结构：
1.Set 类似数组的数据结构；不允许有重复项；
常用方法：
s.size返回的是长度
s.add() 添加内容
s.delete(删除的元素) 删除一个内容
s.has(元素) 判断一个元素是否存在
s.clear()清楚所有的成员
可以使用forEach()
// iterator let s = new Set([1, 2, 3, 1, 2, 3]); console.log(s); // Set(3) {1, 2, 3} console.log(Array.isArray(s)); // false console.log(s.size); // 3 s.add("hello"); console.log(s); // Set(4) {1, 2, 3, "hello"} s.delete(2); console.log(s); // Set(3) {1, 3, "hello"} console.log(s.has(1)); // true s.forEach(item => { console.log(item); // 1 3 hello }); s.clear(); console.log(s); // Set(0) {}
2.map 类似对象的数据结构；可以让任意类型的值，作为key
常用方法:
m.size 成员的个数
m.set([1, 2, 3], "content3") 添加一个内容
m.get(属性) 获取对应的值
m.has(属性) 判断属性是否存在
m.delete(属性) 删除属性
m.clear() 删除所有的属性
可以使用forEach循环遍历；
let m = new Map([ [true, "content1"], [ [1, 2, 3], "content2" ] ]); console.log(m.size); // 2 m.set(null, "content3"); console.log(m); // Map(3) {true => "content1", Array(3) => "content2", null => "content3"} console.log(m.get(null)); // content3 console.log(m.has(null)); // true m.delete(null); console.log(m); // Map(2) {true => "content1", Array(3) => "content2"} m.forEach(item => { console.log(item); // content1 content2 }); m.clear(); console.log(m); // Map(0) {}
