做钓鱼网站判刑,从零学php网站开发,网页视频怎么下载到电脑上,做站群什么样的算是违法网站#x1f604; 19年之后由于某些原因断更了三年#xff0c;23年重新扬帆起航#xff0c;推出更多优质博文#xff0c;希望大家多多支持#xff5e; #x1f337; 古之立大事者#xff0c;不惟有超世之才#xff0c;亦必有坚忍不拔之志 #x1f390; 个人CSND主页——Mi… 19年之后由于某些原因断更了三年23年重新扬帆起航推出更多优质博文希望大家多多支持 古之立大事者不惟有超世之才亦必有坚忍不拔之志 个人CSND主页——Micro麦可乐的博客 《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程入门到实战 《RabbitMQ》本专栏主要介绍使用JAVA开发RabbitMQ的系列教程从基础知识到项目实战 《设计模式》专栏以实际的生活场景为案例进行讲解让大家对设计模式有一个更清晰的理解 《Jenkins实战》专栏主要介绍JenkinsDockerGitMaven的实战教程让你快速掌握项目CI/CD是2024年最新的实战教程 如果文章能够给大家带来一定的帮助欢迎关注、评论互动 【前端技术成长之路】 ES6介绍及语法说明 ES6介绍1、变量声明1.1 let关键字1.2 const关键字 2、箭头函数2.1 没有自己的 this 绑定2.2 没有 arguments 对象2.3 不能用作构造函数2.4 没有 prototype 属性 3、模板字符串4、解构赋值4.1 数组解构4.2 对象解构 5、默认参数6、扩展运算符6.1 数组展开6.2 对象展开6.3 字符串展开 7、模块化7.1 导出模块7.2 导入模块 8、Promise9、生成器函数总结 ES6介绍
ECMAScript 6ES6又称 ECMAScript 2015是 JavaScript 的一个重要版本引入了许多新特性使得开发者能够编写更加简洁、优雅和高效的代码。本文将介绍 ES6 的一些关键特性并通过代码示例展示其用法。
1、变量声明
在 ES6 之前JavaScript 只有 var 用于变量声明。ES6 引入了 let 和 const它们提供了块级作用域和不可变的变量。
1.1 let关键字
let关键字用于声明可变的变量它的作用范围限定在当前的块级作用域内包括花括号{}内部的任何代码块。在同一个作用域内不能重复声明同名的let变量。
在以前使用 var 声明变量会存在越域、重复声明、变量提升等问题我们来看看代码演示
跨域问题
// var 越域的问题
if (true) {var x 10;
}
console.log(x); // 输出 10变量 x 泄露到了全局作用域// let 的块级作用域
if (true) {let y 20;
}
console.log(y); // ReferenceError: y is not defined重复声明
// var 可以声明多次
// let 只能声明一次
var a 1
var a 2
let b 3
let b 4
console.log(a) // 2
console.log(b) // Identifier n has already been declared变量提升
// var 会变量提升
// let 不存在变量提升
console.log(x); // undefined
var x 10;
console.log(y); //ReferenceError: y is not defined
let y 20;1.2 const关键字
const 关键字用于声明常量它的作用范围也是在当前的块级作用域内const 声明的变量是不可变的
// 1. 声明之后不允许改变
// 2. 一但声明必须初始化否则会报错
const a 1;
a 3; //Uncaught TypeError: Assignment to constant variable.2、箭头函数
学过 java 的小伙伴一定知道 lambda 表达式与之一样箭头函数提供了一种更简洁的函数定义方式并且不会绑定自己的 this
// 传统函数
function sum(a, b) {return a b;
}// 箭头函数
const sum (a, b) a b;console.log(sum(2, 3)); // 5// 只有一个参数
const square x x * x;
console.log(square(4)); // 16// 没有参数
const greet () Hello, World!;
console.log(greet()); // Hello, World!使用箭头函数需要注意以下几点
2.1 没有自己的 this 绑定
箭头函数没有自己的 this 绑定它会捕获其所在上下文的 this 值。对于处理回调函数中的 this 问题非常有用
function Person() {this.age 0;// 传统函数需要额外绑定 thissetInterval(function growUp() {this.age;}.bind(this), 1000);
}function Person() {this.age 0;// 箭头函数自动捕获外部 thissetInterval(() {this.age;}, 1000);
}2.2 没有 arguments 对象
箭头函数没有 arguments 对象但可以使用 rest 参数...args代替
const showArgs (...args) {console.log(args);
};showArgs(1, 2, 3); // [1, 2, 3]2.3 不能用作构造函数
箭头函数不能使用 new 关键字来实例化对象因为它没有 [[Construct]] 方法
const Foo () {};
const bar new Foo(); // TypeError: Foo is not a constructor
2.4 没有 prototype 属性
箭头函数没有 prototype 属性因此不能用于定义类的方法。
const Foo () {};
console.log(Foo.prototype); // undefined3、模板字符串
模板字符串使用反引号定义可以嵌入变量和表达式。使用 ${} 语法在模板字符串中嵌入表达式或变量
const name John;
const age 25;// 普通字符串拼接
let info 你好我的名字是【name】年龄是【age】
console.log(info);// 模板字符串的写法
let info 你好我的名字是${name}年龄是${age}
console.log(info);4、解构赋值
解构赋值允许从数组或对象中提取值并赋给变量。
4.1 数组解构
let arr [1, 2, 3];
//以前获取 通过使用角标
console.log(arr[0]); // 1const [a, b] [1, 2];
console.log(a); // 1
console.log(b); // 24.2 对象解构
const person {name: jack,age: 21,hobby: [唱, 跳, rap]
}
// 解构表达式获取值将 person 里面每一个属性和左边对应赋值
const {name, age, hobby} person;
// 等价于下面
// const name person.name;
// const age person.age;
// const language person.hobby;// 可以分别打印
console.log(name);
console.log(age);
console.log(hobby);//扩展如果想要将 name 的值赋值给其他变量可以如下,nn 是新的变量名
const {name: nn, age, hobby} person;
console.log(nn);
console.log(age);
console.log(hobby);5、默认参数
默认参数允许在函数定义时为参数指定默认值这样可以简化函数的调用避免出现undefined的情况
function greet(name Guest) {return Hello, ${name}!;
}console.log(greet()); // Hello, Guest!
console.log(greet(Alice)); // Hello, Alice!//还可以使用表达式
function multiply(a, b 2 * a) {return a * b;
}console.log(multiply(5)); // 输出50
console.log(multiply(5,2)); // 输出106、扩展运算符
展开运算符...可以用来展开数组或对象主要用于将一个可迭代对象如数组、字符串或类数组对象展开成多个元素
6.1 数组展开
const arr1 [1, 2, 3];
const arr2 [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]6.2 对象展开
const obj1 { a: 1, b: 2 };
const obj2 { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }6.3 字符串展开
const str hello;
const chars [...str];
console.log(chars); // 输出[h, e, l, l, o]7、模块化
ES6 模块允许将代码分割成小块并通过 import 和 export 进行组织和重用,
7.1 导出模块
使用 export 暴露方法或变量等
// 假设我们有一个名为 math.js 的模块
export function add(a, b) {return a b;
}export const PI 3.14;7.2 导入模块
我们可以使用 import 关键字导入 math.js 模块中的函数和变量
// main.js
import { add, PI } from ./math.js;console.log(add(2, 3)); // 5
console.log(PI); // 3.148、Promise
Promise 是一种用于处理异步操作的对象类似Java中的 CompletableFuture。它可以将异步操作封装成一个 Promise 对象通过 then() 方法来添加回调函数当异步操作完成时自动执行回调函数。
const promise new Promise((resolve, reject) {setTimeout(() {resolve(Success!);}, 1000);
});promise.then((message) {console.log(message); // Success!
}).catch((error) {console.error(error);
});使用 Promise 对象可以使异步操作的代码更加清晰、简洁并且可以避免回调地狱的问题。
9、生成器函数
生成器函数使用 function* 语法可以通过 yield 关键字多次返回值
function* generator() {yield 1;yield 2;yield 3;
}const gen generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3定义了一个生成器函数 myGenerator它包含三个 yield 表达式。我们通过调用该函数得到一个迭代器对象 generator每次调用 generator.next() 都会执行一次函数体并返回一个包含 value 和 done 两个属性的对象
总结
ES6 引入了许多新特性和改进使 JavaScript 更加现代化和强大。通过使用这些特性开发者可以编写出更加简洁、高效和可维护的代码。这种变化和改进不仅提高了代码的可读性和可维护性也使得开发者能够更轻松地实现复杂的功能。通过学习和掌握这些新特性您将能够更加高效地编写 JavaScript 代码适应现代 web 开发的需求。
最后希望本文对小伙伴们了解 ES6 及其语法有所帮助 欢迎一起评论交流
