文案推广发布网站大全,asp网站作业下载,线上报名小程序怎么做,手机软件上传网站目录 前言let 和 const块级作用域模板字符串一.模板字符串是什么二.模板字符串的注意事项三. 模板字符串的应用 箭头函数一.箭头函数是什么二.普通函数与箭头函数的转换三.this指向1. 全局作用域中的 this 指向2. 一般函数#xff08;非箭头函数#xff09;中的this指向3.箭头… 目录 前言let 和 const块级作用域模板字符串一.模板字符串是什么二.模板字符串的注意事项三. 模板字符串的应用 箭头函数一.箭头函数是什么二.普通函数与箭头函数的转换三.this指向1. 全局作用域中的 this 指向2. 一般函数非箭头函数中的this指向3.箭头函数中this指向 四.不适用箭头函数的场景五.箭头函数的应用 解构赋值一. 数组的解构赋值二. 对象的解构赋值三. 其他数据类型的解构赋值 对象字面量的增强一.属性和方法的简洁表示法二.方括号表示法 函数参数的默认值 前言
ES6ECMAScript 6也被称为ES2015是JavaScript的第六个版本.它于2015年发布并在现代JavaScript开发中扮演了重要的角色.
学习方法:
看千遍不如自己动手写一遍遇到问题不要怕微笑着面对它记笔记 let 和 const
const和let是在ES6中引入的两个新的变量声明关键字用于声明变量的作用域。 constconst用于声明一个常量其值在声明后不能被修改。常量必须在声明时进行初始化而且不能再次赋值。例如 const PI 3.14159;
PI 3.14; // 报错常量不能再次赋值常量适合用于保存不可变的值如数学常数、配置项等。 letlet用于声明块级作用域的变量它与var相比具有更小的作用域范围。在块级作用域内部声明的变量只在该块级作用域内有效而且不会被提升到函数作用域。例如 function example() {let x 10;if (true) {let x 20;console.log(x); // 输出 20}console.log(x); // 输出 10
}在使用块级作用域时可以避免变量之间的命名冲突和问题。 varvar是ES5中使用的变量声明关键字它存在一些作用域上的问题。var声明的变量属于函数作用域或全局作用域而不是块级作用域因此在循环或条件语句中声明的变量会被提升到外部函数作用域。 function example() {var x 10;if (true) {var x 20;console.log(x); // 输出 20}console.log(x); // 输出 20而不是 10
}var声明的变量存在变量提升的问题在变量声明之前就可以访问到变量可能导致意外的结果。 块级作用域 块级作用域指的是在代码中由花括号{}包围的部分这个部分内部声明的变量只在该块级作用域内有效超出该作用域范围就无法访问。在ES6之前JavaScript只有全局作用域和函数作用域没有块级作用域。 使用块级作用域可以提供更细粒度的变量作用范围避免变量的冲突和污染。块级作用域可以用于if语句、for循环、while循环等语句中的代码块以及函数中的代码块。 模板字符串
一.模板字符串是什么
模板字符串是在JavaScript中使用的一种特殊字符串语法。它使用反引号包围并允许在字符串中插入变量、表达式和换行符等。以下是一些模板字符串的特性 插入变量通过${}语法可以在字符串中插入变量。变量会被解析并替换为实际的值。示例代码如下 const name Alice;
const message Hello, ${name}!;
console.log(message); // 输出 Hello, Alice!执行表达式在${}中除了可以插入变量外还可以执行表达式。这样可以在字符串中进行复杂的运算或逻辑操作。示例代码如下 const a 10;
const b 5;
const result The sum of ${a} and ${b} is ${a b}.;
console.log(result); // 输出 The sum of 10 and 5 is 15.多行字符串在模板字符串中可以直接使用换行符以方便创建多行文本。示例代码如下 const multiLine This is a
multi-line
string.;
console.log(multiLine);
// 输出
// This is a
// multi-line
// string.模板字符串更加灵活且易读使得处理字符串的操作更加方便。它在与变量和表达式的结合使用时特别有用。
二.模板字符串的注意事项 反引号包围模板字符串必须使用反引号而不是单引号或双引号来包围。 字符串中的插入项使用${}来包裹要插入的变量或表达式。注意在${}中可以使用任何有效的JavaScript表达式。但是要注意不要在其中放置具有副作用的代码以免产生意想不到的结果。 转义字符如果字符串中需要使用反引号则需要使用转义字符\进行转义。 换行字符模板字符串中的换行字符会被保留。如果希望字符串换行可使用显式的换行符\n。 嵌套模板字符串模板字符串可以嵌套在彼此之内以创建更复杂的字符串结构。 兼容性模板字符串是ES6中引入的特性因此在较旧的浏览器或环境中可能不被完全支持。为了兼容性考虑可以使用转译工具如Babel将模板字符串转换为普通字符串。
三. 模板字符串的应用 字符串拼接使用模板字符串可以更方便地进行字符串拼接特别是需要插入变量或执行表达式时。相比传统的字符串拼接方法使用加号或concat函数模板字符串更简洁易读。 动态HTML生成通过将变量或表达式插入模板字符串中可以动态生成包含动态数据的HTML片段。这对于基于数据生成复杂的HTML结构、动态更新网页内容等非常有用。 URL拼接构建URL时模板字符串可以方便地插入参数值以生成完整的URL。 多语言支持在多语言环境中可以使用模板字符串来创建多语言文本模板并根据需要插入对应语言的翻译。 格式化输出通过在模板字符串中使用占位符和格式化规则可以实现对输出结果的格式化控制如日期格式化、货币格式化等。 生成代码在某些情况下可以使用模板字符串来生成动态的JavaScript代码。例如根据用户输入生成动态的函数定义。 箭头函数
一.箭头函数是什么 概念: 箭头函数是在ES6ECMAScript 2015中引入的一种新的函数声明语法。它提供了一种更简洁、更清晰的函数定义方式。 语法
(argument1, argument2, ...) {// 函数体
}其中参数列表由圆括号包围后面跟着一个箭头然后是函数体可以是一个代码块或一个表达式。 箭头函数的特点 简洁的语法相对于常规函数箭头函数提供了更简洁的语法形式减少了冗余的代码。 没有自己的this值箭头函数没有自己的this上下文继承了父级作用域的this值。这解决了常规函数中this指向的问题使得箭头函数更易于理解和使用。 没有自己的arguments对象箭头函数也没有自己的arguments对象但可以通过使用rest参数...args来获取传递给函数的所有参数。 没有Constructor由于没有自己的this值箭头函数不能用作构造函数来创建对象实例即无法使用new关键字调用箭头函数。 示例 const add (a, b) { //或者const add (a, b) a b ;return a b;
};const greet name Hello, ${name}!;const numbers [1, 2, 3, 4];
const doubled numbers.map(num num * 2);二.普通函数与箭头函数的转换 判断函数是否有参数。如果有参数需要使用小括号包裹参数列表。如果只有一个参数则可以省略小括号。 // 普通函数
function sum(a, b) {return a b;
}// 转换为箭头函数
const sum (a, b) a b;移除function关键字并在参数和箭头之间添加一个箭头。 // 普通函数
function sayHello() {console.log(Hello!);
}// 转换为箭头函数
const sayHello () {console.log(Hello!);
};如果函数体只有一行代码并且它是一个表达式可以省略大括号和return关键字并将该表达式放在箭头后面。 // 普通函数
function square(x) {return x * x;
}// 转换为箭头函数
const square (x) x * x;如果函数只有一个返回值并且没有参数可以使用隐式返回即省略大括号和return关键字并且将返回值放在箭头后面。 // 普通函数
function getPi() {return 3.14;
}// 转换为箭头函数
const getPi () 3.14;注意: 箭头函数没有自己的this绑定它会捕获外部作用域中的this值因此在转换函数时请特别留意函数内部是否使用了this关键字。 在一些特殊情况下如果需要更复杂的函数体或需要使用 arguments 对象那么箭头函数可能不适合转换因为它们缺少常规函数的一些特性。
三.this指向
1. 全局作用域中的 this 指向 在严格模式下全局作用域中的 this 的值是 undefined。在非严格模式下它会指向全局对象浏览器中是 window 对象Node.js 中是 global 对象。 使用严格模式可以通过在脚本文件或函数体的开头添加 use strict; 来启用。以下示例演示了在严格模式下全局作用域中的 this 的行为 use strict;console.log(this); // undefined在非严格模式下则会输出全局对象 console.log(this); // 全局对象浏览器中是window对象Node.js中是global对象2. 一般函数非箭头函数中的this指向 在对象的方法中即使在严格模式下方法中的 this 仍然会指向调用该方法的对象。严格模式主要影响到全局作用域下的 this 值的行为。 use strict;const obj {name: Alice,sayHello: function() {console.log(this); // 指向obj对象}
};obj.sayHello();如果通过构造函数创建对象时this 在严格模式下指向新创建的对象。但在非严格模式下如果构造函数内部没有显式设置 this 的值则 this 可能会指向全局对象。
3.箭头函数中this指向 在箭头函数中this的值是由定义箭头函数的词法作用域决定的而不是根据函数调用方式或绑定调用者来改变。 换句话说箭头函数没有自己的 this 绑定它会捕获其外部的词法作用域中的 this 值并沿用该值。因此在箭头函数内部this 的指向是固定的指向定义箭头函数时所在的作用域中的 this。 示例: 对象方法 const obj {name: Alice,sayHello: () {console.log(this.name); // 箭头函数没有自己的 this沿用外部作用域中的 this这里指向全局对象浏览器中是 windowNode.js 中是 global}
};回调函数中的 this 绑定 const button document.querySelector(button);
button.addEventListener(click, () {console.log(this); // 箭头函数没有自己的 this沿用外部作用域中的 this取决于事件处理函数所在的上下文
});四.不适用箭头函数的场景 作为构造函数 由于箭头函数没有自己的 this 绑定它无法通过 new 关键字创建实例对象。箭头函数的 this 始终指向其外部词法作用域中的 this 值而不会根据调用方式或绑定调用者来改变。 // 错误示例
const Person () {this.name Alice; // 错误箭头函数不能用作构造函数
};const person new Person();需要 this 指向调用对象的情况 对象方法当需要在对象中定义方法并且需要通过 this 来引用对象自身时箭头函数不适用。箭头函数的 this 始终继承自外部词法作用域无法根据调用方式来动态绑定。 const obj {name: Alice,sayHello: () {console.log(Hello, ${this.name}!); // 错误箭头函数的 this 不是指向 obj}
}; 动态绑定 this如果需要根据调用方式动态绑定 this 的值例如通过 call()、apply() 或 bind() 显式改变其 this 值那么箭头函数就不适合使用。箭头函数的 this 始终保持不变。
const greet () {console.log(Hello, ${this.name}!); // 错误箭头函数的 this 不会被显式绑定
};const person {name: Alice
};greet.call(person); // 错误this 在箭头函数中不会改变
需要使用函数的 arguments 对象 箭头函数没有自己的 arguments 对象无法访问传递给函数的参数集合。 const sum () {console.log(arguments); // 错误箭头函数没有自己的 arguments 对象
};sum(1, 2, 3); // 错误无法在箭头函数中访问 arguments五.箭头函数的应用 简化函数表达式箭头函数提供了一种更简洁的函数表达式语法特别适用于传递匿名函数或回调函数。 // 传统函数表达式
const sum function(a, b) {return a b;
};// 箭头函数
const sum (a, b) a b;数组遍历与转换结合数组的map()、filter()和reduce()等方法可以使用箭头函数对数组进行快速遍历、筛选和转换操作。 const numbers [1, 2, 3, 4, 5];const doubled numbers.map(num num * 2);const evenNumbers numbers.filter(num num % 2 0);const sum numbers.reduce((total, num) total num, 0);箭头函数作为回调函数由于箭头函数没有自己的this值因此常用于解决回调函数中this指向的问题。 const obj {name: Alice,sayHello: function() {setTimeout(() {console.log(Hello, ${this.name}!); // this指向obj对象}, 1000);}
};obj.sayHello();更简洁的函数嵌套当需要在一个函数内部定义另一个函数时可以使用箭头函数来简化语法。 function foo() {return (a, b) a b;
}const add foo();
console.log(add(2, 3)); // 5对象方法的简洁定义当定义对象方法时可以使用箭头函数来简化语法。 const obj {name: Alice,sayHello: () {console.log(Hello, ${this.name}!); // this指向全局对象}
};obj.sayHello();解构赋值
解构赋值是一种从数组或对象中提取值并将其赋给变量的方式。
一. 数组的解构赋值
原理 数组解构赋值通过模式匹配按照索引位置进行赋值。当进行解构赋值时可以直接将一个数组[]赋给等号左侧的模式。可以使用默认值来指定缺失的元素取值。 示例代码// 基本用法
const [a, b, c] [1, 2, 3];
console.log(a); // 输出: 1
console.log(b); // 输出: 2
console.log(c); // 输出: 3// 使用默认值
const [x, y, z 0] [4, 5];
console.log(x); // 输出: 4
console.log(y); // 输出: 5
console.log(z); // 输出: 0默认值二. 对象的解构赋值 原理 对象解构赋值通过模式匹配按照属性名称进行赋值。当进行解构赋值时可以直接将一个对象{}赋给等号左侧的模式。可以使用默认值来指定缺失的属性取值。 示例代码 // 基本用法
const {name, age} {name: Alice, age: 20};
console.log(name); // 输出: Alice
console.log(age); // 输出: 20// 使用别名
const {name: personName, age: personAge} {name: Bob, age: 25};
console.log(personName); // 输出: Bob
console.log(personAge); // 输出: 25// 使用默认值
const {firstName Unknown, lastName Unknown} {firstName: Charlie};
console.log(firstName); // 输出: Charlie
console.log(lastName); // 输出: Unknown默认值注意事项: 将一个已经声明的变量用于解构赋值整个赋值需在圆括号中进行 因为 JavaScript 解析器会将以左花括号 { 开始的语句解析为一个代码块而不是对象字面量。为了避免这种歧义可以将解构赋值表达式放在圆括号中明确告诉解析器这是一个赋值表达式。 let x, y;// 错误的写法解析为代码块
{x, y} {x: 1, y: 2};// 正确的写法圆括号中进行解构赋值
({x, y} {x: 1, y: 2});console.log(x,y); // 输出: 1 2 对象的解构赋值可以取到继承的属性或方法 当进行对象解构赋值时如果目标对象的属性并不存在解构赋值表达式会继续向上查找该属性如果目标对象的属性在原型链中存在则可以成功提取到该属性的值。 function Person(name) {this.name name;
}Person.prototype.sayHello function() {console.log(Hello, ${this.name}!);
};function Student(name, grade) {Person.call(this, name);this.grade grade;
}Student.prototype Object.create(Person.prototype);
Student.prototype.constructor Student;
Student.prototype.study function() {console.log(${this.name} is studying in grade ${this.grade}.);
};const student new Student(Alice, 10);// 对象解构赋值取到继承的属性
const { name, grade } student;
console.log(name); // 输出: Alice
console.log(grade); // 输出: 10// 解构赋值取到继承的方法
const { sayHello, study } student;
sayHello(); // 输出: Hello, Alice!
study(); // 输出: Alice is studying in grade 10.三. 其他数据类型的解构赋值 字符串的解构赋值可以将字符串按照字符进行解构赋值。 const [a, b, c] abc;
console.log(a); // 输出: a
console.log(b); // 输出: b
console.log(c); // 输出: c数值和布尔值的解构赋值会先将数值和布尔值转换为对应的包装对象类型Number、Boolean然后再进行解构赋值。 示例代码 const {toString: numToString} 123;
console.log(numToString Number.prototype.toString); // 输出: trueconst {valueOf: boolValueOf} true;
console.log(boolValueOf Boolean.prototype.valueOf); // 输出: trueundefined 和 null 的解构赋值在解构赋值时如果源值是 undefined 或者 null则会使用默认值。 示例代码 const [x 0, y] [undefined, 2];
console.log(x); // 输出: 0默认值
console.log(y); // 输出: 2const {z default} {z: null};
console.log(z); // 输出: null原始值注意: 在解构赋值中如果目标没有对应的值则可以使用默认值来指定默认取值。而 undefined 和 null 是不能进行解构赋值的 . 对象字面量的增强
一.属性和方法的简洁表示法 对象字面量: 一种创建和初始化对象的方式使用花括号 {} 来定义一个对象并通过键值对来指定对象的属性和方法。 属性的简洁表示法当属性的键名与变量名相同时可以使用简洁表示法来定义属性。简洁表示法直接将变量名作为属性名并自动将变量的值作为属性值。 const name Alice;
const age 25;const person {name, //使用简洁表示法将变量 name 和 age 直接作为对象 person 的属性age
};console.log(person.name); // 输出: Alice
console.log(person.age); // 输出: 25方法的简洁表示法在对象字面量中可以使用函数字面量来定义一个对象的方法。使用简洁表示法时可以省略冒号和 function 关键字直接将函数体作为方法的值。示例代码如下 const person {name: Alice,sayHello() {console.log(Hello, my name is ${this.name});}
};person.sayHello(); // 输出: Hello, my name is Alice二.方括号表示法 方括号表示法是访问对象属性的一种语法使用方括号 [] 来引用属性名或计算属性。这种表示法可以动态地获取和设置对象的属性。 用法 属性访问通过方括号表示法可以使用变量或表达式作为属性名从而动态地获取对象的属性值。示例代码如下 const obj {name: Alice,age: 25
};const propertyName name;console.log(obj[propertyName]); // 输出: Alice动态属性名方括号表示法还可以用于动态地设置对象的属性名即使属性名是通过变量或表达式计算得到的。 const obj {};const propertyName name;obj[propertyName] Alice;console.log(obj.name); // 输出: Alice注意: 在使用方括号表示法访问属性时属性名可以是任何字符串或能够被转换为字符串的表达式。方括号内的属性名会被解析为字符串以便与对象的属性进行匹配。 函数参数的默认值 概念: 在定义函数时为参数提供一个默认的初始值。这样在调用函数时如果没有传递相应参数的值就可以使用默认值作为参数的值。 用法: 函数参数的默认值可以在函数定义的括号内直接设置使用 运算符来指定默认值。示例如下 function greet(name Alice) {console.log(Hello, name);
}greet(); // 输出: Hello, Alice
greet(Bob); // 输出: Hello, Bob注意: 参数的默认值的应用是惰性求值的即默认值在函数每次调用时都会被重新计算。 默认值的生效条件 默认值只会在参数值为 undefined 时生效。如果传递了参数但不为 undefined例如 null、空字符串等则默认值不会生效。当没有传递对应的参数即没有提供参数值时默认值会生效。 function greet(name Alice) {console.log(Hello, name);
}greet(); // 默认值生效输出: Hello, Alice
greet(undefined); // 默认值生效输出: Hello, Alice
greet(null); // 默认值不生效输出: Hello, null
greet(Bob); // 默认值不生效输出: Hello, Bob默认值表达式 默认值可以是任何合法的表达式包括调用函数、三元运算符、数学运算等。默认值表达式在定义函数时就会被计算而不是在每次函数调用时计算。 function getDefaultValue() {console.log(Calculating default value...);return Default Value;
}function func(param getDefaultValue()) {console.log(Param:, param);
}// 只有没有传递参数时才会计算默认值
func(); // 输出: Calculating default value...Param: Default Value// 传递参数时不计算默认值
func(Custom Value); // 输出: Param: Custom Value设置默认值的小技巧 函数参数的默认值最好从参数列表的右边开始设置 默认值可以使用函数参数的默认值或其他局部变量。 可以通过使用逻辑运算符如 ||来提供默认值如果左侧操作数为 undefined那么返回右侧操作数。 // 使用其他局部变量作为默认值
function combineStrings(str1, str2 ) {const combinedString str1 str2;console.log(combinedString);
}combineStrings(Hello); // 输出: Hello
combineStrings(Hello, world!); // 输出: Hello world!// 使用逻辑运算符设置默认值
function greet(name) {name name || Anonymous;console.log(Hello, name);
}greet(); // 输出: Hello, Anonymous
greet(Alice); // 输出: Hello, Alice函数参数的默认值的应用 // 接收一个对象作为参数const logUser ({usename zhangsan,age 0,sex male}{})console.log(usename,age,sex);logUser(); // 输出: zhangsan 0 male
