《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)

目录
相关文章
|
16天前
|
存储 JavaScript 对象存储
js检测数据类型有那些方法
js检测数据类型有那些方法
130 59
|
16天前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
6天前
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
25 9
|
10天前
|
JavaScript 前端开发 API
javaScript中常用的String方法以及注意点总结
本文总结了JavaScript中常用的String对象的方法及其注意事项,包括大小写转换、字符获取、子字符串截取、字符串拼接、去除空格、替换、分割以及查找字符串中字符的索引等操作。提供了每种方法的使用示例代码,帮助理解它们的具体用法和差异。
25 2
|
11天前
|
前端开发 JavaScript
ES6新标准下JS异步编程Promise解读
ES6新标准下JS异步编程Promise解读
19 3
|
11天前
|
JavaScript 安全
ES6中JS类实现的解读
ES6中JS类实现的解读
15 2
|
12天前
|
前端开发 JavaScript Java
JavaScript的运行原理
JavaScript 的运行原理包括代码输入、解析、编译、执行、内存管理和与浏览器交互几个步骤。当打开网页时,浏览器加载 HTML、CSS 和 JavaScript 文件,并通过 JavaScript 引擎将其解析为抽象语法树(AST)。接着,引擎将 AST 编译成字节码或机器码,并在执行阶段利用事件循环机制处理异步操作,确保单线程的 JavaScript 能够高效运行。同时,JavaScript 引擎还负责内存管理和垃圾回收,以减少内存泄漏。通过与 DOM 的交互,JavaScript 实现了动态网页效果,提供了灵活且高效的开发体验。
|
11天前
|
JavaScript 前端开发
JS之concat方法
本文介绍了JavaScript中`concat`方法的使用,展示了如何利用该方法来合并数组,包括与字符串、数字、对象等类型的拼接,以及使用扩展运算符进行合并的示例。
10 0
JS之concat方法
|
16天前
|
JavaScript 前端开发
JavaScript 中的新 Set 方法
JavaScript 中的新 Set 方法
|
17天前
|
存储 JavaScript
js切割截取字符串方法
js切割截取字符串方法