ES6 语法糖（一）

一、为什么要学习ES6？

ES6是JavaScript的下一代标准，解决了es5中存在的问题。

二、语法

1、let const

let 1、只在所处的块级有效，而var 不具有块级作用域，防止循环变量变成全局变量，

2、不存在变量提升，只能先声明再使用

3、具有暂时性死区，不会在上一级中查找

const 作用：用于声明变量，就是内存（地址）不变的量

具有块级作用域

使用时必须赋初值

2、解构赋值

数组解构 es6允许从数组中提取值，按照对应位置，对变量赋值

 <script>// ES6中允许从数组中提取值，按照对应位置，对变量赋值let ary = [1,2,3];let [a,b,c] = ary  //a b c 与ary中的值一一对应</script>

对象解构使用变量的名字匹配对象的属性匹配成功将对象属性的值赋值给变量

 <script>// let person = {name:'lisi',age:20,sex:'nan'}// 如果我们要把里面的值取出来// person.name   per.age  person.sex  需要重复声明三个变量let {name , age , sex} = personconsole.log(name);let {name:myname} = person;  //name 只是用来匹配属性的，真正的值是mynameconsole.log(myname);</script>

3、箭头函数

箭头函数是用来简化函数定义语法的

用法：（参数1，参数2，参数3...）=>{函数体}

注意：

1、如果只有一个参数，可以省略小括号

2、函数体中只有一句代码，且代码执行的解构就是返回值，就省略大括号

const sum = (num1,num2) => num1+num2

3、箭头函数不绑定this关键字，箭头函数的this指向要根据上下文来确定；

如果箭头函数被定义在普通函数 fn这个区域中，那么this指向就是fn 这个区域中的this;

如果函数被定义在定时器函数中，由于定时器this指向windows，那么这里的箭头函数this也是指向windows

4、剩余参数

此语法允许在传递参数时将一个不定数量的参数表示为一个数组用...args来表示

<script>const sum = (...args)=>{let total = 0;
// forEach是遍历数组的，item是数组中的每一项args.forEach(item =>total += item)return total;}console.log(sum(10,20,30));console.log( sum(1,2,3,4,5,6));
// 配合数组解构使用let ary1 = ['pink','blue','pure'];let [s1,...s2] = ary1;console.log(s1);console.log(s2);  //['blue','pure']
</script>

三、ES6中数组扩展方法以及新增API

1、扩展运算符

可以将数组或者对象转为用逗号隔开的参数序列
用于合并数组

<script>
// 方法1  将两个数组都使用扩展运算符转换为逗号隔开的序列，再整合一个数组let ary1 = [1,2,3];let ary2 = [4,5,6];//...ary1   // 1,2,3// ...ary2   // 4,5,6ary3 = [...ary1,...ary2]console.log(ary3);// 方法2  利用push方法，Push方法实际上可以接收多个参数ary1.push(...ary2)console.log(ary1);
</script>

将伪数组或可遍历对象转换为真正的数组用于什么？只有真正的数组才可以使用push.pop.filter.forEach等所有操作数组的方法

<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
<script>
//利用扩展运算符将伪数组转换为真正的数组var oDivs = document.getElementsByTagName('div')console.log(oDivs);var ary4 = [...oDivs];  // 这是一个真正的数组，可以使用数组的push pop 等方法// console.log(ary4);ary4.push('a');console.log(ary4);</script>

2、Array.from方法

将伪数组转换为真正的数组

用法：Array.from(参数1，参数2) 参数1-待转换的伪数组参数2-对转换后的数组进行操作，通常是一个函数

<script>var arrayLike = {'0':'jerry','1':'tom','2':'lisa','length':3}// 此方法接收一个伪数组作为参数，返回一个真正的数组var ary = Array.from(arrayLike);console.log(ary);// 此方法还可以接收第二个参数，作为类似于数组的map方法，用来对转换后的数组成员进行处理，将处理后的值放入返回的数组var arrayLike2 = {'0':'1','1':'2',length:2}var ary2 = Array.from(arrayLike2,item =>item * 2)console.log(ary2); // [2,4]</script>

3、新增API

.find() 用于找出第一个符合条件的数组成员，如果没有找到就返回undefined
```
<script>var ary = [{id:1,name:'jerry'},{id:2,name:'lisa'}];let target= ary.find(item =>item.id ==2)console.log(target);
</script>
```
返回的是符合条件的数组成员

.findIndex() 用于找出第一个符合条件的数组成员的位置，如果没有找到就返回-1
<script>let  ary = [5,9,10,16];let index = ary.findIndex(value=>value >9)console.log(index);  // 2 10是第一个满足要求的成员
</script>
返回的是这个成员位置的索引号

.includes() 表示某个数组是否包含给定的值
<script>let ary = ['a','b','c'];console.log(ary.includes('a'));   //trueconsole.log(ary.includes('e'));   //false
</script>
返回的是布尔值

四、字符串

1、模板字符串

ES6中的模板字符串是用反问号定义的

特点可以解析变量用于拼接i字符串

可以实现换行

可以调用函数

2、扩展方法

startsWith 表示参数字符串是否在原字符串的头部，返回布尔值

endsWith 表示参数字符串是否在原字符串的尾部，返回布尔值

ES6 语法糖（一）相关推荐

分分钟带你欣赏ES6语法糖
let , const关键字 var 看习惯了java, 看js真的是忍不住想笑,比如说这个var,它太自由了,自由到{}根本限制不住它的生命周期 js的var关键字,无论在何处声明,都会被视为声明在 ...
python数列求和-加强版_ES6深入浅出-3 三个点运算新版字符串-1.函数与对象的语法糖...
主要讲的内容时间充裕的话就讲,模板字面量默认参数值首先讲es6之前,我们是怎么做的.例如我们要写一个求和的函数, 请两个参数的和,但是如果有的人就是穿一个参数呢? 那么b没有传值,b的值是多少呢 ...
ES6新特性_ES6语法糖class介绍与初体验_就是个语法糖而已---JavaScript_ECMAScript_ES6-ES11新特性工作笔记033
然后我们看es6中的class,es6中引入这个class这个概念,为了让js的写法更加的面向对象,写起来方便好理解一些. 其实就是个语法糖而已,他的这个功能,es5的语法都能实现. . 可以看看e ...
为什么说ES6的class是语法糖?
0. 前言我们带着问题去阅读本文: 为什么说ES6的class是语法糖? class是原型的语法糖吗? 那又是如何使用原型来实现class这一语法糖的呢? 1. 基于Prototype的OOP 先来 ...
JavaScript 精选：哪些能提高开发效率的es6 新语法糖
文章目录一 ECMAScript 相关介绍 1 什么是 ECMA 2 什么是 ECMAScript 3 什么是 ECMA-262 4 谁在维护 ECMA-262 5 为什么要学习 ES6 6 ES6 ...
语法糖是什么？（ES6的一些小笔记）
专业的解释在计算机科学中,语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法,它可以使程序员更加容易去使用这门语言:操作可以变得更加清晰.方便,或者更加符合程序员的 ...
ES6常用语法糖(附Babel配置使用方法)
获取数据: 解构赋值解构赋值 <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
ES6语法~解构赋值、箭头函数、class类继承及属性方法、map、set、symbol、rest、new.target、 Object.entries......
2015年6月17日 ECMAScript 6发布正式版本前面介绍基本语法, 后面为class用法及属性方法.set.symbol.rest等语法. 一.基本语法: 1. 定义变 ...
“约见”面试官系列之常见面试题第三篇说说常用的es6语法（建议收藏）
目录 1. let.const 和 block 作用域 2. 箭头函数(Arrow Functions) 3. 函数参数默认值 4. Spread / Rest 操作符 5. 对象词法扩展 6. 二进 ...