《JS原理、方法与实践》- ES6新增语法

简介: 《JS原理、方法与实践》- ES6新增语法

#### let 和const

var定义的变量是function级的作用域,let定义的变量属于块级作用域,而const定义的是常量,也就是定义之后不可修改

代码示例:

```

function testVariable() {

var height = 172;

const name = 'zzh';

if (height === 172) {

 let height = 173;

 // name = 'zzz'; // 报错

}  

 

console.log(height); // 172

}

testVariable();

```

#### 字符串模板

自负串模板用来创建字符串的一种方式,可以在字符串中添加变量,免去了之前的使用+号拼接字符串。

语法: `${变量}`

代码示例:

```

const name = 'zzh';

const testStringTemplate = `Hello ${name}`;

console.log(testStringTemplate); // hello zzh

```

#### 函数参数默认值

函数参数默认值,就是给一个函数的参数提供一个默认值,当该参数没有传入时,便使用默认值。

语法: function functionName(parameter1, parameter2, ...parametern = 'default value')

代码示例:

```

function getPersonInfo (name, age, sex = 'male') {

console.log(`Person info: name: ${name}, age: ${age}, sex: ${sex}`);

}

getPersonInfo('zzh', 18); // Person info: name: zzh, age: 18, sex: male

```

#### 参数扩展

参数扩展时使用三个点“...”来完成,主要有两种用法:在定义函数时将传入的多个参数封装到一个数组中;调用函数时将数组中的元素扩展为多个独立的参数。

代码示例:

```

function mailToPerson (...names) {

for(let name of names) {

 console.log(`Send to ${name}`);

}

}

mailToPerson('张三','李四','王五');

/*

[object Array]

Send to 张三

Send to 李四

Send to 王五

* */

// 将数组[1,3,5]展开成1,3,5三个参数后传入max方法中

console.log(Math.max(...[1,3,5])); // 5

console.log(Math.max(1,3,5)); // 5

```

![测试结果](https://upload-images.jianshu.io/upload_images/2789632-429d951e5fea6b51.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#### 箭头函数

语法: 参数=>函数体

如果只有一个参数不需要括号,当有多个参数时,使用括号括起来,例如:(a, b)=> 函数体,当函数体只有一条语句需要reutrn时,不需要写关键字return 且不需要使用大括号{}阔起来,其他情况需要大括号,且需要return时,需要写return关键字。

代码示例:

```

getName = () => 'zzh';

console.log(`name is: ${getName()}`); // name is: zzh

printInfo = (name, age) => {

console.log(`name is: ${name}, age is: ${age}`);

}

printInfo('zzh', 18); // name is: zzh, age is: 18

```

#### for-of遍历

之前有提过for-in遍历,它可以遍历出对象的属性名。for-of遍历的结果是数组值的集合。

代码示例:

```

var person = {

name: 'zzh',

age: 18,

sex: 'male'

};

var score = [98, 99, 100];

for(let p in person) {

console.log(`for-in person: ${p}`);

}

// for(let p of person) {

//  console.log(`for-of person: ${p}`);

// } // 报错,对象不可遍历

for(var s in score) {

console.log(`for-in score: ${s}`);

}

for(var s of score) {

console.log(`for-of score: ${s}`);

}

```

![测试结果](https://upload-images.jianshu.io/upload_images/2789632-4aa40b3526023fce.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
JavaScript中的箭头函数:简洁的语法与this绑定
JavaScript中的箭头函数:简洁的语法与this绑定
323 184
|
5月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
313 69
|
5月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
4月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
362 0
|
4月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
386 80
|
4月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
186 19
|
5月前
|
JSON 前端开发 Serverless
Mock.js 语法结构全解析
Mock.js 的语法规范介绍,从数据模板定义规范和数据占位符定义规范俩部分介绍, 让你更好的使用 Mock.js 来模拟数据并提高开发效率。
|
6月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
114 13
|
8月前
|
前端开发 JavaScript
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
329 58
|
5月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。

热门文章

最新文章