前端学习之ES6+

news/2024/11/14 18:10:04/

1.ES6是什么

ES6，全称是ECMAScript 6，是JavaScript语言的下一代标准，由ECMA国际组织在2015年6月正式发布。ES6也被称作ECMAScript 2015，从这个版本开始，ECMA组织决定每年发布一个新的ECMAScript版本，以使JavaScript语言能够持续发展和进化。

ES6引入了许多新特性，这些特性旨在提高JavaScript语言的编程效率、代码的可读性和可维护性。以下是一些ES6中的重要特性：

  1. 箭头函数（Arrow functions）：提供了一种更简洁的函数书写方式。

    const sum = (a, b) => a + b;

  2. 类（Classes）：引入了类的概念，尽管JavaScript仍然是基于原型的，但类的语法更接近传统的面向对象语言。

    class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}

  3. 模块化（Modules）：通过import和export关键字，支持模块的导入和导出，使得代码组织更加清晰。

    // 导出
export const myFunction = () => {};
// 导入
import { myFunction } from './myModule';

  4. 模板字符串（Template literals）：允许使用反引号（`）创建字符串，并提供字符串插值功能。

    const message = `Hello, ${name}!`;

  5. 解构赋值（Destructuring assignment）：允许从数组或对象中提取数据，并赋值给变量。

    const [a, b] = [1, 2];
const { x, y } = { x: 1, y: 2 };

  6. let和const：引入了let和const关键字用于声明变量，解决了var的一些问题，如变量提升和作用域问题。

  7. Promise：用于更优雅地处理异步操作，替代了传统的回调函数模式。

  8. 默认参数（Default parameters）：允许在函数定义时为参数设置默认值。

  9. 展开运算符（Spread operator）：允许在函数调用或数组字面量中展开数组或对象。

  10. Set和Map：引入了新的数据结构Set和Map，提供了更丰富的集合操作。

ES6的这些新特性极大地推动了JavaScript的发展，使得这门语言更适合大型应用的开发，并且更加现代化和高效。随着现代浏览器的支持，ES6已经成为现代前端开发的标配。

ES与JavaScript的关系

2.let和const的简介

在JavaScript中，let、var 和 const 都是用来声明变量的关键字，但它们之间有几个关键的区别：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>let、const 与 var 的区别</title></head><body><script>// 1.重复声明// 已经存在的变量或常量，又声明了一遍// var 允许重复声明，let、const 不允许// let a = 1;// // ...// let a = 2;// console.log(a);// function func(a) {//   let a = 1;// }// func();// 2.变量提升// var 会提升变量的声明到当前作用域的顶部// console.log(a);// console.log(a);// var a = 1;// 相当于// var a;// console.log(a);// a = 1;// console.log(a);// let、const 不存在变量提升// console.log(a);// let a = 1;// 养成良好的编程习惯，对于所有的变量或常量，做到先声明，后使用// 3.暂时性死区// 只要作用域内存在 let、const，它们所声明的变量或常量就自动“绑定”这个区域，不再受到外部作用域的影响// let、const 存在暂时性死区// let a = 2;// let b = 1;// function func() {//   console.log(b);//   // console.log(a);//   // let a = 1;// }// func();// 养成良好的编程习惯，对于所有的变量或常量，做到先声明，后使用// 4.window 对象的属性和方法// 全局作用域中，var 声明的变量，通过 function 声明的函数，会自动变成 window 对象的属性或方法// let、const 不会// var/function// var age = 18;// function add() {}// console.log(window.age);// console.log(window.add === add);// let/const// let age = 18;// const add = function () {};// console.log(window.age);// console.log(window.add === add);// 5.块级作用域</script></body>
</html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>let、const 与 var 的区别</title></head><body><script>// 块级作用域// 1.什么是块级作用域// var 没有块级作用域// for (var i = 0; i < 3; i++) {//   // console.log(i);// }// console.log(i);// let/const 有块级作用域// for (let i = 0; i < 3; i++) {//   // i = i+1//   // console.log(i);// }// console.log(i);// 2.作用域链// function func() {//   for (let i = 0; i < 3; i++) {//     // console.log(i);//   }// }// func();// console.log(i);// 作用域链：内层作用域->外层作用域->...->全局作用域// 3.有哪些块级作用域// {}// {//   let age = 18;//   // console.log(age);// }// console.log(age);// {}// for(){}// while(){}// do{}while()// if(){}// switch(){}// function(){}// const person = {//   getAge: function () {}// };</script></body>
</html>

 1.作用域（Scope）:
        var 声明的变量拥有函数作用域（function scope），这意味着如果 var 变量在函数外部声明，它将是一个全局变量；如果在函数内部声明，它只能在那个函数内部被访问。
        let 和 const 声明的变量拥有块作用域（block scope），这意味着它们的作用域限定在它们被声明的块（如一个花括号 {} 内部的区域）中。

2.变量提升（Hoisting）:
        var 声明的变量会被提升到其作用域的顶部，但在初始化之前不能使用，访问未初始化的变量会得到 undefined。
        let 和 const 也会被提升，但是它们不允许在声明之前被访问，如果尝试这样做将会导致一个引用错误（ReferenceError）。

3.重复声明（Re-declaration）:
        在同一个作用域内，var 允许重复声明同一个变量。
        let 和 const 不允许在同一个作用域内重复声明同一个变量。

4.重新赋值（Re-assignment）:
        使用 var 和 let 声明的变量可以被重新赋值。
        使用 const 声明的变量必须在声明时初始化，并且一旦被赋值，其引用就不能再被改变。需要注意的是，const 保证的是变量引用的不可变性，而不是变量的值不可变。例如，如果 const 变量引用的是一个对象，那么对象的属性是可以被修改的。

5.window 对象的属性和方法
全局作用域中，var 声明的变量，通过 function 声明的函数，会自动变成 window 对象的属性或方法。let、const 不会

// 2.2.const 声明的常量，允许在不重新赋值的情况下修改它的值

// 基本数据类型

// const sex = 'male';

// sex = 'female'; //会报错

// 引用数据类型

// const person = { username: 'Alex' };

// // person = {};

// person.username = 'ZhangSan'; //通过.直接修改值，而不是复制操作，是可以的。

// console.log(person);

不知道用什么的时候先用const，也就是说不确定需求的时候用const，因为如果需要修改会报错，方便查找。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>const</title></head><body><script>// 1.为什么需要 const// let// let sex = 'male';// // ...// sex = 'female';// console.log(sex);// const// const sex = 'male';// // ...// sex = 'female';// console.log(sex);// const 就是为了那些一旦初始化就不希望重新赋值的情况设计的// 2.const 的注意事项// 2.1.使用 const 声明常量，一旦声明，就必须立即初始化，不能留到以后赋值// const sex;// sex='male'// const sex = 'male';// 2.2.const 声明的常量，允许在不重新赋值的情况下修改它的值// 基本数据类型// const sex = 'male';// sex = 'female';// 引用数据类型// const person = { username: 'Alex' };// // person = {};// person.username = 'ZhangSan';// console.log(person);// 3.什么时候用 const，什么时候用 let// var// for (let i = 0; i < 3; i++) {}// const username = 'Alex';// // ...// username = 'ZhangSan';</script></body>
</html>

以下是这些关键字的简单比较：

    var 是ES5及之前版本中的标准声明方式，现在一般不推荐使用，因为它的作用域和提升行为可能会导致代码中的意外行为。
    let 是ES6（ECMAScript 2015）中引入的，用于声明块作用域的变量，通常在需要重新赋值的情况下使用。
    const 也是ES6中引入的，用于声明块作用域的常量，当你不希望变量的引用改变时使用。

总结来说，现代JavaScript编程中推荐尽可能使用 const，只在变量需要被重新赋值时使用 let。这样做可以提高代码的可读性和可维护性。

3.模版字符串

（1）是什么

模板字符串（Template Literals）是ES6（ECMAScript 2015）中引入的一种新的字符串表示法，它允许开发者以更简单、更直观的方式创建和维护字符串。模板字符串使用反引号（`）而不是单引号（'）或双引号（"）来定义字符串。

以下是模板字符串的一些主要特点和用法：

  1. 多行字符串：模板字符串可以跨越多行，不需要使用反斜杠（\）来换行。

    const multiLineString = `This is a string
that spans multiple lines.`;

  2. 字符串插值：可以在模板字符串中嵌入变量和表达式，这些变量和表达式会被解析并转换为字符串的一部分。插入变量或表达式时，需要使用${expression}的语法。

    const name = 'Alice';
const age = 30;
const greeting = `Hello, my name is ${name} and I am${age} years old.`;

  3. 标签模板（Tagged Templates）：模板字符串可以与一个函数一起使用，这种用法称为标签模板。函数的第一个参数是一个字符串数组，其余的参数对应于模板字符串中的插值表达式。

    function myTag(strings, ...values) {// strings 是一个包含模板字符串中静态部分的数组// values 是一个包含模板字符串中动态部分（即插值表达式）的数组return strings.reduce((acc, str, i) => {return acc + str + (values[i] || '');}, '');
}const result = myTag`Hello ${name}, how are you?`;

  4. 原始字符串：模板字符串可以创建原始字符串，即字符串中的转义序列不会被特殊处理。这可以通过在模板字符串前加上String.raw来实现。

    const rawString = String.raw`This is a raw string: \n and \t are not special characters.`;

模板字符串因其灵活性和易读性，在现代JavaScript开发中被广泛使用。它们提供了一种简洁的方式来构建包含变量和表达式的大型字符串，而无需使用字符串连接或格式化函数。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>模板字符串是什么</title></head><body><script>// 1.认识模板字符串// const username1 = 'alex';// // "alex"// const username2 = `alex`;// console.log(username1, username2, username1 === username2);// 2.模板字符串与一般字符串的区别const person = {username: 'Alex',age: 18,sex: 'male'};// const info =//   '我的名字是：' +//   person.username +//   ', 性别：' +//   person.sex +//   ', 今年' +//   person.age +//   '岁了';// console.log(info);// const info = `我的名字是：${person.username}, 性别：${person.sex}, 今年${person.age}岁了`;// console.log(info);// 和其他东西一起使用的时候，使用模板字符串，方便注入// 其他情况下使用模板字符串或一般字符串都行</script></body>
</html>

 （2）模版字符串的注意事项

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>模板字符串的注意事项</title></head><body><script>// 1.输出多行字符串// 一般字符串// const info = '第1行\n第2行';// console.log(info);// 模板字符串// const info = `第1行\n第2行`;//       const info = `第1行// 第2行`;//       console.log(info);// 模板字符串中，所有的空格、换行或缩进都会被保留在输出之中// 2.输出 ` 和 \ 等特殊字符// const info = `'\`\\`;// console.log(info);// 3.模板字符串的注入// ${}// const username = 'alex';// const person = { age: 18, sex: 'male' };// const getSex = function (sex) {//   return sex === 'male' ? '男' : '女';// };// const info = `${username}, ${person.age + 2}, ${getSex(person.sex)}`;// console.log(info);// 只要最终可以得出一个值的就可以通过 ${} 注入到模板字符串中</script></body>
</html>

（3） 应用

javascript"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>模板字符串的应用</title><style>body {padding: 50px 0 0 300px;font-size: 22px;}ul {padding: 0;}p {margin-bottom: 10px;}</style></head><body><p>学生信息表</p><ul id="list"><li style="list-style: none;">信息加载中……</li></ul><script>// 数据const students = [{username: 'Alex',age: 18,sex: 'male'},{username: 'ZhangSan',age: 28,sex: 'male'},{username: 'LiSi',age: 20,sex: 'female'}];const list = document.getElementById('list');let html = '';for (let i = 0; i < students.length; i++) {html += `<li>我的名字是：${students[i].username},${students[i].sex},${students[i].age}</li>`;}// console.log(html);list.innerHTML = html;</script></body>
</html>

4.箭头函数

（1）是什么

<script>// 1.认识箭头函数// const add = (x, y) => {//   return x + y;// };// console.log(add(1, 1));// 2.箭头函数的结构// const/let 函数名 = 参数 => 函数体// 3.如何将一般函数改写成箭头函数// 声明形式// function add() {}// 声明形式->函数表达式形式// const add = function () {};// 函数表达式形式->箭头函数const add = () => {};</script>

（2）注意事项

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>箭头函数的注意事项</title></head><body><script>// 1.单个参数// 单个参数可以省略圆括号// const add = x => {//   return x + 1;// };// console.log(add(1));// 无参数或多个参数不能省略圆括号// const add = () => {//   return 1 + 1;// };// const add = (x, y) => {//   return x + y;// };// console.log(add(1, 1));// 2.单行函数体// 单行函数体可以同时省略 {} 和 return// const add = (x, y) => {//   return x + y;// };// const add = (x, y) => x + y;// console.log(add(1, 1));// 多行函数体不能再化简了// const add = (x, y) => {//   const sum = x + y;//   return sum;// };// 3.单行对象// const add = (x, y) => {//   return {//     value: x + y//   };// };// const add = (x, y) => ({//   value: x + y// });// 如果箭头函数返回单行对象，可以在 {} 外面加上 ()，让浏览器不再认为那是函数体的花括号// const add = (x, y) => [x, y];// console.log(add(1, 1));</script></body>
</html>

（3）非箭头函数中this指向

在JavaScript中，this关键字的行为取决于函数的调用方式。在非箭头函数（即传统的函数表达式或函数声明）中，this的指向通常不是在函数定义时确定的，而是在函数被调用时确定的。以下是几种常见的函数调用场景及其对应的this指向：

  1. 作为对象的方法调用： 当一个函数作为对象的方法被调用时，this指向该对象。

    const obj = {method: function() {return this; // 这里的this指向obj对象}
};
obj.method(); // 返回obj对象

  2. 独立函数调用： 当函数不是作为对象的方法调用时（即独立调用），在非严格模式下，this指向全局对象（在浏览器中通常是window对象），而在严格模式下，this是undefined。

    function func() {return this; // 非严格模式：指向全局对象，严格模式：undefined
}
func(); // 非严格模式返回全局对象，严格模式抛出TypeError

  3. 构造函数调用： 当使用new关键字调用一个函数时，this指向新创建的对象。

    function Constructor() {this.prop = 'value'; // 这里的this指向新创建的对象
}
const instance = new Constructor();
instance.prop; // 'value'

  4. 使用call、apply或bind方法调用： Function.prototype.call、Function.prototype.apply和Function.prototype.bind方法可以显式地设置函数调用时this的值。

    function func() {return this;
}
const context = { value: 'custom context' };
func.call(context); // 返回{ value: 'custom context' }
func.apply(context); // 同上
const boundFunc = func.bind(context);
boundFunc(); // 同上

  5. 作为DOM事件处理函数： 当函数作为DOM事件处理程序被调用时，this通常指向触发事件的元素。

    document.getElementById('button').addEventListener('click', function() {console.log(this); // 指向button元素
});

理解this的工作原理对于编写JavaScript代码至关重要，因为它经常会导致混淆和错误。记住，this的值是在函数被调用时确定的，而不是在函数定义时。

javascript"><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>非箭头函数中的 this 指向</title></head><body><script>// 1.全局作用域中的 this 指向// console.log(this); // window// 2.一般函数（非箭头函数）中的 this 指向// 'use strict';function add() {console.log(this);}// 严格模式就指向 undefined// add(); // undefined->window（非严格模式下）// window.add();// const calc = {//   add: add// };// // calc.add(); // calc// const adder = calc.add;// adder(); // undefined->window（非严格模式下）// document.onclick = function () {//   console.log(this);// };// document.onclick();// function Person(username) {//   this.username = username;//   console.log(this);// }// const p = new Person('Alex');// 只有在函数调用的时候 this 指向才确定，不调用的时候，不知道指向谁// this 指向和函数在哪儿调用没关系，只和谁在调用有关// 没有具体调用对象的话，this 指向 undefined，在非严格模式下，转向 window</script></body>
</html>

（4）箭头函数中this指向

箭头函数（Arrow Functions）在JavaScript中的this绑定规则与传统的函数表达式或函数声明不同。箭头函数不绑定自己的this，而是继承其所在上下文的this值。这意味着箭头函数中的this值由其外围最近一层非箭头函数决定。

以下是箭头函数中this指向的一些关键点：

  1. 继承上下文的this： 箭头函数不定义自己的this值，它会捕获其所在上下文的this值，即定义时的词法作用域中的this。

    const obj = {method: function() {setTimeout(() => {console.log(this); // 这里的this指向obj对象}, 1000);}
};
obj.method(); // 打印obj对象

  2. this不会随调用方式改变： 由于箭头函数不绑定自己的this，所以即使使用call、apply或bind方法，也无法改变箭头函数中的this值。

    const arrowFunc = () => this;
const context = { value: 'custom context' };
arrowFunc.call(context); // 这里的this不会改变，仍然指向定义时的上下文

  3. 没有自己的arguments对象： 箭头函数没有自己的arguments对象，但是可以访问外围函数的arguments对象。

    const arrowFunc = () => arguments[0];
function outerFunc() {return arrowFunc(5); // 这里的arguments是outerFunc的
}
outerFunc(10); // 返回10，因为箭头函数使用的是outerFunc的arguments

  4. 不能用作构造函数： 由于箭头函数没有自己的this，因此它们不能用作构造函数，尝试使用new关键字会抛出错误。

    const ArrowFunc = () => {};
const instance = new ArrowFunc(); // 抛出TypeError

  5. 没有prototype属性： 箭头函数没有prototype属性，因此也不能使用new.target来检测函数是否被用作构造函数。

理解箭头函数的this绑定规则对于避免常见的JavaScript错误非常有帮助，尤其是在处理异步代码和回调函数时。由于箭头函数的this值是固定的，它们在处理事件处理器和定时器时特别有用，因为这些情况下传统函数的this值可能会意外地改变。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>箭头函数中的 this 指向</title></head><body><script>// 1.箭头函数中的 this 指向// 箭头函数没有自己的 this// const calc = {//   add: () => {//     console.log(this);//   }// };// calc.add(); // window// 2.练习// 'use strict';const calc = {add: function () {// thisconst adder = () => {console.log(this);};adder();}};// calc.add(); // calcconst addFn = calc.add;addFn(); // undefined->window</script></body>
</html>

（5）不适用箭头函数的场景

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>不适用箭头函数的场景</title></head><body><script>// 1.作为构造函数// 箭头函数没有 this// const Person = () => {};// new Person();// 2.需要 this 指向调用对象的时候// document.onclick = function () {//   console.log(this);// };// document.addEventListener(//   'click',//   () => {//     console.log(this); //window//   },//   false// );// 3.需要使用 arguments 的时候// 箭头函数中没有 arguments// function add() {//   console.log(arguments);// }// add(1, 2,3,4,5);// const add = () => console.log(arguments);// add();// 剩余参数</script></body>
</html>

（6）箭头函数的应用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>箭头函数的应用</title><style>body {padding: 50px 0 0 250px;font-size: 30px;}#btn {width: 100px;height: 100px;margin-right: 20px;font-size: 30px;cursor: pointer;}</style></head><body><button id="btn">开始</button><span id="result">0</span><script>const btn = document.getElementById('btn');const result = document.getElementById('result');// const timer = {//   time: 0,//   start: function () {//     // this//     var that = this;//     // var self = this;//     btn.addEventListener(//       'click',//       function () {//         setInterval(function () {//           console.log(this);//           // this.time++;//           // result.innerHTML = this.time;//           that.time++;//           result.innerHTML = that.time;//         }, 1000);//       },//       false//     );//   }// };const timer = {time: 0,start: function () {// thisbtn.addEventListener('click',() => {// thissetInterval(() => {console.log(this);this.time++;result.innerHTML = this.time;}, 1000);},false);}};timer.start();</script></body>
</html>


http://www.ppmy.cn/news/1546194.html

相关文章

Hive面试题-- 查询各类型专利 top10 申请人及专利申请数

Hive面试题-- 查询各类型专利 top10 申请人及专利申请数

在数据处理中&#xff0c;尤其是涉及到专利信息等复杂数据时&#xff0c;Hive 是一个强大的工具。本文将详细介绍如何使用 Hive 查询语句来获取各类型专利 top10 申请人以及他们对应的专利申请数&#xff0c;以下是基于给定的 t_patent_detail 表结构的分析和查询步骤。 建表语…
阅读更多...
Spring Boot 3中基于纯MyBatis的CURD开发实例

Spring Boot 3中基于纯MyBatis的CURD开发实例

项目整理目录结构&#xff1a; └── aiosms├── pom.xml└── src├── main│ ├── java│ │ └── com │ │ └── ivandu│ │ └── aiosms│ │ ├── Aiosms.java│ │ ├── controll…
阅读更多...
【C#】C# .NET中的Func、Predicate和Expression详解

【C#】C# .NET中的Func、Predicate和Expression详解

在C# .NET中，Func、Predicate和Expression是三种常用的委托和表达式类型，它们在编写灵活、可重用的代码时非常有用。本文将详细介绍这三种类型，并提供多个实例来说明它们的用法和区别。 1. Func<T, TResult> Func是一个通用委托，它可以接受零个或多个输入参数，并返回…
阅读更多...
hive切换表底层文件类型以及分隔符

hive切换表底层文件类型以及分隔符

1、改底层文件存储类型&#xff0c;但是一般只会在数据文件与期望类型一致的时候使用&#xff0c;比如load等方式时发现建表时没指定对这样的&#xff0c;因为这个语句不会更改具体的底层文件内容&#xff0c;只改元数据 ALTER TABLE 表名 SET FILEFORMAT 希望类型;2、更改数据…
阅读更多...
【MySQL】深度学习与解析 : 库的操作知识整合

【MySQL】深度学习与解析 : 库的操作知识整合

MySQL是一种开源的关系型数据库管理系统&#xff0c;被广泛应用于各种应用软件中。在深度学习中&#xff0c;MySQL可以用于存储和管理大量的数据&#xff0c;如训练数据、模型参数等。以下整理了一些MySQL库的操作知识&#xff1a; 1. 创建数据库&#xff1a; CREATE DATABA…
阅读更多...
《Linux服务与安全管理》| 文件权限管理操作

《Linux服务与安全管理》| 文件权限管理操作

《Linux服务与安全管理》| 文件权限管理操作 目录 《Linux服务与安全管理》| 文件权限管理操作 &#xff08;1&#xff09; 在/root下创建文件eg1&#xff0c;修改文件权限为所有者可读可写可执行&#xff0c;用户组可读可写不可执行&#xff0c;其他用户可读不可写不可执行&…
阅读更多...
Linux下的 MySQL 中添加用户并设置远程访问

Linux下的 MySQL 中添加用户并设置远程访问

Linux 下的 MySQL 中添加用户并设置远程访问 在 Linux 系统中&#xff0c;MySQL 是一个非常流行的数据库管理系统。本文将详细介绍如何在 Linux 下的 MySQL 中添加一个用户并设置远程访问权限。通过本文&#xff0c;你将学会如何创建用户、授予权限以及配置 MySQL 服务器以允许…
阅读更多...
香港服务器怎么搭建docker加速器

香港服务器怎么搭建docker加速器

在香港服务器上搭建 Docker 加速器&#xff0c;主要是为了解决因网络问题导致的 Docker 镜像拉取缓慢或失败的问题。以下是在香港服务器上搭建 Docker 加速器的步骤&#xff1a; 1. 选择一个Docker加速器服务 你可以选择一个公共的 Docker 加速器服务&#xff0c;如 Docker Hub…
阅读更多...
最新文章

Copyright @ 2022~2023