☀ 此文章浅析了以下内容 let关键字
const关键字
解构赋值
箭头函数
剩余参数
扩展运算符
补充知识点：Array的几个方法
补充知识点：模板字符串
补充知识点：String的几个方法
浅谈JavaScript中的数据结构
Array，Set，Map的回调函数的参数
▊ let关键字
三个特点：【具有块级作用域】，【没有变量提升】，【暂时性死区】
// let声明的变量只在所处的【块级作用域】有效 (通常一个大括号{}就是一个块级作用域) // 解决了下面这种危险的情况 if(true) { var a = 233; let b = 233 } console.log(a); // 打印出233 console.log(b); // error: b is not defined // 附带的一个好处是，防止循环变量变成全局变量 for(let i = 0; i < 10; i++) {} // 使用let关键字声明的变量【没有变量提升】 // demo: console.log(a); // 不报错，打印undefined console.log(b); // 报错，b is not defined var a = 233; let b = 233; // 使用let关键字声明的变量具有【暂时性死区】 var n = 233; if(true) { console.log(n); // 这没有问题，打印出233 } if(true) { console.log(n); // 报错，n is not defined —— 这里是let引起的死区 let n = 1314; // 因为当块级作用域内出现let时，该变量与这个块级作用域绑定(binding)，在这句之前出现n都是不合法的————这段区域成为死区 } // 再例： if(true) { var a = 233; // 死区 console.log(a); // 死区 let a = 12; console.log(a); } var arr = []; for (var i = 0; i < 2; i++) { arr[i] = function() { console.log(i); } } arr[0](); arr[1](); // 结果：2, 2 // 分析：for(var i)的i实际是个全局变量，for循环产生的多个块级作用域，都在共用这个全局作用域的i // 在函数本身的块级作用域内没有找到i的定义，因此根据作用域链的就近原则，去上一级作用域(for循环产生的多个作用域)寻找i，此时全局变量i已经为2 // 题外话：之前解决类似的问题的思路是：使用立即执行函数形成闭包 for (let i = 0; i < 2; i++) { arr[i] = function() { console.log(i); } } arr[0](); arr[1](); // 结果：0, 1 // 分析：for(let i)产生多个块级作用域，每个块级作用域有一个i // 执行时，函数的块级作用域仍每找到i，去上一级作用域(for循环产生的多个作用域)寻找i，每个块级作用域都有一个自己的i // 总结：for循环都会产生多个块级作用域。但var i使得多个块级作用域共用一个全局作用域的i，let i每个块级作用域拥有一个i，全局中没有i
▊ const关键字
特点：【具有块级作用域】，【声明时必须立即赋值】，【值/内存地址不可更改】
重点：对于简单数据类型，值不可更改；对于复杂数据类型，内存地址不可更改
const a = 233; // 声时立即赋初始值 a = 1314; // error const arr = [1, 2, 3]; arr = [4, 5, 6]; // error，因为这样相当于直接改变arr的指向 arr[0] = 233; // ok const obj = { name: 'loli', age: 12 } obj['age'] = 11; // ok obj = {}; // error
▊ 解构赋值
【一一对应】，【数组解构，对象解构】
// 数组解构 let [a, b, c] = [1, 2, 3]; // 给a, b, c赋值 let [a, b] = [1, 2, 3]; // 3被忽略 let [a, b, c] = [1, 2]; // c的值为undefined // 对象解构 loli = {name: 'chino', age: 12}; let {name, age} = loli; // 获得name和age变量 let {age, name} = loli; // 顺序不一样也没事，自己会去对应 let {name: myName, age: myAge}; // 变量名不一定与属性名相同
▊ 箭头函数
基本语法：() => {} let func = () => { alert('萝莉赛高'); }; let func = (num1, num2) => num1 + num2; // 当函数体只有一句代码，大括号{}可以省略(return也能省略) let func = num => num * num; // 如果形参只有一个，小括号()可以省略 // 箭头函数不绑定this // 如果在箭头函数中使用this，this指向箭头函数定义位置的this var obj = { age: 12, bark: () => { console.log(this.age); } }; obj.bark(); // 结果：undefined. // 分析：箭头函数的this指向函数定义位置的this，对象是不产生块级作用域的，因此this指向的window，window.age自然为undefined
▊ 剩余参数
// 因为箭头函数不能使用arguments伪数组，我们可以使用与之相同效果的剩余参数(...) let sum = (...args) => { // 求任意数之和 let total = 0; args.forEach(value => total += value); // 很优雅的写法(迭代器 + 箭头函数) return total; }; // 剩余参数 + 解构，很好理解 let loli = ['chino', 'hana', 'alice']; let [a, ...b] = loli; // a = 'chino', b = ['hana', 'alice']
▊ 扩展运算符
// 扩展预算符(...)可以将数组或对象转化为用逗号分隔的参数序列(★) // 遇到这种用法，直接等价替代 let arr = [1, 2, 3]; console.log(...arr); // 打印1 2 3 // 分析: ...arr 完全等价于 1, 2, 3; // 分析： console.log时，逗号被当做分隔符了 // 【场景一】：合并数组 let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [...arr1, ...arr2]; // ...arr1换成1, 2, 3 ...arr2换成4, 5, 6；再通过两个[]转化回来 arr1.push(...arr2); // 不能直接传入arr2数组，必须先用扩展运算符拆分为参数序列———这是因为由push方法要求传入的参数决定的： // push([1, 2])，不行； push(1, 2)，行 // 【场景二】：将伪数组转化为真正的数组 var lis = document.querySelectorAll('li'); console.log(lis); // 伪数组 lis = [...lis]; // 通过中括号[]把这个扩展运算符等价的序列 转化回真正的数组 console.log(lis); // 真正的数组———可以使用数组的push pop等方法啦 ! let arr = Array.from(arrayLike); // 语法糖
▊ 补充知识点：Array的几个方法
// 【find()方法】 var arr = [{ // arr是一个内容为对象的数组 name: 'chino', age: 11 }, { name: 'alice', age: 14 }]; let target = arr.find((value, index) => value.age == 14); // 选出了第二个对象 // 可以看出，find()的参数仍旧是一个(回调)函数，之前我们常用的是function(value, index, array){}，这里使用箭头函数更加优雅 // 这个传参方式以及return 和 forEach, filter, some/every一样 // 【findIndex()方法】 let arr = [1, 3, 8, 13, 20]; let index = arr.findIndex((value, index) => value > 10); // 返回3. // find()方法返回的是内容，findIndex()返回的是下标索引 // 【includes()方法】 [1, 2, 3].includes(1); // true [1, 2, 3].includes(4); // false
▊ 补充知识点：模板字符串
// 模板字符串使用反引号 // 有以下三个特性： // 1.模板字符串内可使用 ${字符串名} 引用其他字符串 let s = '萝莉'; let sayHello = `你是一只${s}`; // 2.模板字符串内识别换行(可以进行排版) let string = ` <div> <span></span> <span></span> </div> ` // 3.模板字符串内可以调用函数(美元符$位置被函数的返回值替代) let func = () => { return '萝莉'; } let string = `你是一只${func()}`;
▊ 补充知识点：String的几个方法
let str = 'Loli!'; >>> str.startsWith('a') // 返回false >>> str.endsWith('!') // 返回true >>> str.repeat(3) // 返回一个重复后的新字符串: 'Loli!Loli!'
▊ 浅谈JavaScript中的数据结构
// 以最典型的Set、Map数据结构为例，简单看看写法———其他数据结构完全可以触类旁通 >_< const set = new Set(); const set = new Set([1, 2, 3]); // 创建时可以传参数组 set.add('a'); set.add('b').add('c'); // 添加 set.delete('a'); // 删除 set.clear(); // 清空 set.has('c'); // 是否包含(同contains) set.size; // 别加括号!!! for (var value of set) { // 遍历 console.log(value); } set.forEach((value) => { // 遍历——更好的写法 console.log(value); }) const map = new Map(); const map = new Map([['loli', 233], ['suki', 255]]); // 注意是两层[] map.set('loli', 233); map.set('suki', 255); map.get('loli'); map.delete('suki'); map.clear(); map.has('loli'); map.size; for (var item of map) { // 加强for遍历出的是整个键值对，这与其他语言是有些许区别的———一般都是遍历出key console.log(item[0] + '=>' + item[1]); } map.forEach((value, key) => { console.log(key + '=>' + value); });
▊ Array，Set，Map的回调函数的参数
// 无论是匿名函数function(){}，还是箭头函数()=>{}, 都需要写上回调函数的参数 const arr = new Array(12, 233, 255); arr.forEach(function(value, index, arr) { // 数组———依次是值value, 下标index, 数组本身arr }) const set = new Set([12, 233, 255]); set.forEach(function(value, Value2, set) { // Set———依次是值value, 还是值value2, 本身set }) const map = new Map([['loli', 233],['suki', 255]]); map.forEach(function(value, key, map) { // Map———依次是值value, 键key, 本身map }) // 注： // 1.这样记忆：对于数组和Map，本质都是"键值对"，注意参数先是"值"，再是"键" // 而Set没有键，只有值，所有前两个参数都是"值value" // 2.上面都是以匿名函数的形式举例，箭头函数的参数一样： arr.forEach((value, index, arr) => { //... })
☀ Loli & JS
♫ Suki
