一、let、const 声明变量
-
var是允许重新赋值、重新定义的，只有global和function scope作用域，在if内无作用域 -
let、const拥有block scope作用域，有{}的时候就表明它的作用域范围 -
let、const不可重复声明一个变量，所以使用var容易不小心覆盖原来的变量 -
let可以重新赋值，const不可以重新赋值 -
const也是可以修改的，不过要是引用类型，相当于人（Person）是不可改变的，但我的年龄会随着时间改变
const person = {
name: 'Jelly', age: 20 } person.age = 21;
实在不希望改变，可以通过 Object.freeze
阻止修改现有属性的特性和值，并阻止添加新属性。
const person = {
name: 'Jelly', age: 20 } const Jelly = Object.freeze(person); person.age = 21; // 无法修改，返回值依旧是 20
应用场景
1、通过 let、const 实现私有变量
window 对象下有一个 name 属性
window.name = 'Jelly'; // 这样就影响到 window 下的 name 属性
为了保证我们不影响到 window 下的 name 属性，我们通过 IIFE（立即执行函数）去实现私有化变量，但为了这个目的而去写这个函数，不利于代码的可读性
(function() {
var name = 'Jelly'; })(); window.name // ""
有了 let、const 就可以通过它们的特性 block scope 来实现了
扫描二维码关注公众号，回复：
3747280 查看本文章
{
const name = 'Jelly'; } window.name // ""
2、for 循环应用场景
for (var i = 0; i < 10; i++) { // 每次循环都重写了 i 的值 setTimeout(function() { // 模拟 ajax 请求 console.log(`i:${i}`); // i:10（10个重复） }, 1000); } console.log(window.i); // 10
上面返回 10个 i:10 的原因就在于，在 setTimeout 1秒后执行的时候，循环已经结束
只需将 var 改为 let 声明，每次声明的都属于当前的块级作用域，setTimeout 只认这个作用域
for (var i = 0; i < 10; i++) { // 每次循环都重写了 i 的值 setTimeout(function() { // 模拟 ajax 请求 console.log(`i:${i}`); // 输出 i:0 到 i:9 }, 1000); } console.log(window.i); // 10
PS：const 不能使用，const 的值是不能重新赋值的
3、临时性死区（Temporal dead zone）
console.log(color);
var color = 'yellow'; console.log(color); // undefined
原因是变量提升（是 JS 将声明移到作用域的顶部）
相当于是：
var color;
console.log(color);
color = 'yellow';
使用 let、const 呢？
console.log(color); // ReferenceError
let color = 'yellow';
同样有变量提升，它们会存在于临时性死区，所以这个特征让我们养成在变量未声明的时候，不要使用
二、箭头函数（arrow function）
三个特点：
- 简明的语法
- 隐式返回
- 不绑定 this
简明的语法
// 传统写法
const numbers = [5, 6, 13, 5]; const double = numbers.map(function(number) { return number * 2; }) console.log(double);
// 简化
const numbers = [5, 6, 13, 5]; const double = numbers.map(number => { // 一个参数不需要括号，多个参数需要，没有参数需要保留括号 return number * 2; }) console.log(double);
隐式返回
有 return 则表示是显示返回
const numbers = [5, 6, 13, 5]; const double = numbers.map(number => number * 2); // 放在一行，在我们需要简单返回一个东西的时候特别有用 console.log(double);
不绑定 this
const Jelly = {
name: 'Jelly', hobbies: ['Coding', 'Reading', 'Sleeping'], printHobbies: function() { console.log(this); // printHobbies 的 this 指向调用它的对象 Jelly this.hobbies.map(function(hobby) { // map 函数是独立的函数，独立运行时候，没通过 call、apply、bind 来改变 this 的情况下，这个 this 则指向 window、global 或者在严格模式下指向 undefined console.log(`${this.name} loves ${hobby}`); }); } } Jelly.printHobbies(); // 打印不对，this.name 是空
老方法是通过：var self = this
新方法则通过箭头函数，箭头没有自己的 this，this 是继承父级的
this.hobbies.map(hobby => {
console.log(`${this.name} loves ${hobby}`); });
箭头函数都是匿名函数（如何使用命名函数的箭头函数）
首先了解什么是命名函数：
function greet(name) { // 在递归和解除绑定的时候特别有用
console.log(`Hello ${name}`); } greet('lth'); // Hello lth
箭头函数要写成命名函数可：
let greet = name => {console.log(`Hello ${name}`)}; greet('lth'); // Hello lth
应用场景
1、作为构造函数，一个方法需要绑定到对象
const Person = (name, points) => { this.name = name; // 这里用了箭头函数，this 并没有绑定到 Jelly 这个对象上去 this.points = points; } const Jelly = new Person('jelly', 5); // new Person 会完成四个步骤： // 生成一个新的对象、把构造函数中的 this 值指向这个新生成的对象、把这个绑定到它的原型对象、返回这个新生成的对象 Person.prototype.updatePoints = () => { this.points++; // 这里的 this 指向 window，所以要使用正常的 function，这样才能绑定到对象上去 console.log(this.points) } // 以上代码会报错 const Person = function(name, points) { this.name = name; this.points = points; } const Jelly = new Person('jelly', 5); Person.prototype.updatePoints = function() { this.points++; console.log(this.points) } Jelly // object name: 'jelly', points: 5 Jelly.updatePoints(); // 6
2、当你真的需要 this 时
const button = document.querySelector('.zoom'); button.addEventListener('click', () => { this.classList.add('in'); // 找不到绑定的对象 button，此时的 this 指向 window setTimeout(() => { this.classList.remove('in'); }, 2000) }) const button = document.querySelector('.zoom'); button.addEventListener('click', function() { this.classList.add('in'); setTimeout(() => { this.classList.remove('in'); }, 2000) })
3、需要使用 arguments 对象
// 这个功能返回所有参数的和
const sum = () => { return Array.from(arguments) // 在箭头函数中是没有 arguments 这个对象的 .reduce((prevSum, value) => prevSum + value, 0) } const sum = function() { return Array.from(arguments) // 这个 from 是将类数组对象转化为真正的数组对象 .reduce((prevSum, value) => prevSum + value, 0) }
三、参数默认值
// 老方法
function userInfo(a, b) { a = a || 5; // 参数默认声明，不需要重新声明 b = b || 6; return a * b; }
// ES6 新方法
function userInfo(a = 5, b = 6) { // 提高可读性 return a * b; } userInfo(); // 30 userInfo(4); // 24 userInfo(undefined, 5); // 25 不是第一个值的时候，传 undefined
四、模版字符串
字符串拼接可以简化，不用各种 ++++++ 了
const person = 'Jelly'; const age = 5; const sentence = `${person} is ${age} years old.`;
// 老方法
const template = [
'<div class="greet">', '<p>Hello</p>', '</div>' ].join(''); console.log(template);
// 新方法，模版字符串会保留空格
const template = ` <div class="greet"> <p>Hello</p> </div> `.trim(); console.log(template);
应用场景
1、通过模版字符串输出列表
const Jelly = {
name: 'jelly', date: '2017-05-07', todos: [ { name: 'Go to Store', completed: false }, { name: 'Watch Movie', completed: true }, { name: 'Running', completed: true } ] } const template = ` <ul> ${Jelly.todos.map(todo => ` <li> ${todo.name} ${todo.completed ? '✅' : '❌'} </li> `).join('')} </ul> ` document.body.innerHTML = template;
2、给传入的参数加标签
function highlight(strings, ...values) { // strings 是个数组表示中间的字符串，values 表示 ${} 那些值 // debugger; // 这样可以看到 highlight 的组成 const highlighted = values.map(value => `<span class="highlight">${value}</span>`); let str = ''; strings.forEach((string, i) => str += `${string}${highlighted[i] || ''}`); return str; // 上面的 for return 也可以用 reduce 来处理 // return strings.reduce((prev, curr, i) => `${prev}${cur}${highlighted[i] || ''}`, ''); } const user = 'Mary'; const topic = 'Learn to use markdown'; const sentence = highlight`${user} has commented on your topic ${topic}`;
3、过滤用户输入
防止用户在输入框的内容中，插入非法字符串或脚本来实现 XSS （跨站脚本攻击），她们可以从在实现获取 Cookie、Session、密码之类的敏感信息
使用到的库：DOMPurify.js
下面这个案例就过滤掉了内嵌的 onload 事件
function sanitize(strings, ...values) {
const dirty = strings.reduce((prev, curr, i) => `${prev}${curr}${values[i] || ''}`, ''); return DOMPurify.sanitize(dirty); } addCommentForm.addEventListener('submit', function(event) { event.preventDefault(); const newComment = textarea.value.trim(); if (newComment) { CommentDiv.innerHTML = sanitize` <div class="comment-header">${user}</div> <div class="comment-body">${textarea.value}</div> ` textarea.value = ''; } });
五、字符串新增方法
.startsWith().endsWidth().includes().repeat()
const id = '51030019800730366x'; const fan = 'I love Laravist'; id.startsWith('51'); // true // 是不是以 51 开头的 id.startsWith('1980', 6); // true // 第 6 位开始是不是以 1980 开头的 // 区分大小写 fan.startsWith('I'); // true fan.startsWith('i'); // false id.endsWith('x'); // true id.endsWith('X'); // false fan.endsWith('love', 6); // true // 在 includes 方法之前我们用 indexOf fan.indexOf('Laravist') !== -1 // true fan.includes('Laravist') // true fan.includes('Laravist', 10) // false 第十位开始有没有 Laravist '哈'.repeat(10)
应用场景
1、实现右对齐
function padder(string, length = 25) { return `${' '.repeat(Math.max(length - string.length), 0)}${string}` }
六、对象解构
const Tom = {
name: 'Tom Jones', age: 25, family: { mother: '123', father: '456', brother: '789' } } const name = ''; // 会报错！ const { name, age } = Tom; // 先声明，然后去 Tom 对象找同名的属性 console.log(name); // 'Tom Jones' console.log(age); // 25 // 如果你想自己声明的话，用一堆括号包裹 let name = ''; ({ name, age } = Tom); // 会解析成代码块，而不是对象解构的语法 console.log(name); console.log(age); // 要访问 family 也可以这么写 const { fater, mother, brother } = Tom.family;
对象解构重命名
// 如果 father 已经别人提前声明了
const { father: f, mother, brother } = Tom.family; // 讲 father 重命名为 f，但要注意的是，并没有声明 father，而是声明了 f，然后去 Tom.family 里找 father 属性 console.log(f); // 123 console.log(father); // not defined console.log(sister); // undefined
对象解构默认值
// 可设置默认值，属性值要是 undefined 的时候
const { father: f, mother, brother, sister = 'have no sister' } = Tom.family; console.log(sister); // have no sister
常用于一些库，会提供一个 options 的选项让你来自定义属性，它们会有默认值
function appendChildDiv(options = {}) {
const { parent = 'body', width = '100px', height = '80px', backgroundColor = 'pink' } = options; const div = document.createElement('div'); div.style.width = width; div.style.height = height; div.style.backgroundColor = backgroundColor; document.querySelector(parent).appendChild(div); } appendChildDiv({ parent: '.container', width: '200px', height: '150px', backgroundColor: 'blue' })
七、数组解构
const numbers = ['one', 'two', 'three', 'four']; const [one, two] = numbers; console.log(one, two); // one two // 想获取 1、3 const [one, ,three] = numbers; console.log(one, three); // one three // 获取所有 const [one, ...others] = numbers; // ...other 只能存在于最后一个，不能是 const [one, ...others, five] = numbers; console.log(one, others); // one ['two', 'three', 'four']
数组解构默认值
const details = ['JellyBool', 'laravist.com']; const [name, website, category = 'PHP'] = details; // 默认值为 undefined 时才生效 console.log(name, website, category); // JellyBool laravist.com PHP
应用场景
1、交换变量
// 老办法
let a = 10;
let b = 20; let temp; temp = a; a = b; b = temp; // 新办法 [a, b] = [b, a]
八、for-of 遍历
传统的有三种方法：for、forEach、for-in
for 在于繁琐forEach 缺点在于：不能中止 break、continue、returnfor in 在于会遍历所有可枚举的属性for-of 现在暂时不支持对象
// for-in 需要注意的是，遍历对象上可枚举的属性
friuts.describe = 'My favorite fruits'; // 或者给原型加一个方法 friuts.prototype.first = function() { return this[0]; } // 新增的属性和方法都会被遍历出来
for-of 的使用
// 只需将 for in 改为 for of 即可
for (let fruit of fruits) { // 要用 let if (fruit === 'Orange') { // 可中止 break; } console.log(fruit) }
应用场景
1、可用于可迭代对象
对象有内置了遍历器接口
fruits.entries()
// 会返回
Array Iterator{} // 这个就是它的遍历接口
const fruits = ['Apple', 'Banana', 'Orange', 'Mango']; for (let [index, fruit] of fruits.entries()) { console.log(`${fruit} ranks ${index + 1} in my favorite fruits`); } // Apple ranks 1 in my favorite fruits // Banana ranks 2 in my favorite fruits // Orange ranks 3 in my favorite fruits // Mango ranks 4 in my favorite fruits
2、转换类数组 arguments
function sum() {
let total = 0;
for (let num of arguments) { total += num; } return total; } sum(1,2,3,4,5,6,7,8,9,10); // 55
3、绑定事件
const lis = document.querySelector('li'); for (let li of lis) { li.addEventListener('click', function() { this.classList.toggle('completed'); }) }