Longstick的学习周记——ES6新特性
Longstick的学习周记——ES6新特性
- 前言
- ES6新特性
- 1. let 和 const
- let关键字
- const 关键字
- 2. 模块字符串\` \`
- 3. 解构
- 4. 函数的参数默认值
- 5. Spread / Rest操作符`...`
- 6. 箭头函数
- 7. for of
- 8. Promise 对象
- 9. Class
前言
这周感觉是非常的水逆，基本没有一件顺心的事情。考试非常糟糕、事情都没做好、工作也没找到，甚至连保底的offer都告诉我【心理测评不合格】。但是人不能就此倒地，赶紧继续向前跑，希望下周开始能有好运气，pls。
ES6新特性
面csig的时候被问到了，我竟然说不出个所以然，确实是因为之前做项目的时候其实就只查到了箭头函数属于新特性，其他的。。。。看到很多企业要求都需要了解es6，记录一下。
1. let 和 const
es6中新增了let和const关键字，在es6之前JS是没有块级作用域这种概念的，自从es6出现了let和const，JS就出现了代码块概念。
let关键字
- let声明的变量只在代码块中有效，var是在全局中有效。
{let a = 0var b = 1console.log(a) //0console.log(b) //1
}
console.log(a) //a is not defined
console.log(b) //1
- let只能声明一次，var可以重复声明。
{let a = 0let a = 1var b = 2var b = 3a //Identifier 'a' has already been declaredb //3
}
- let没有变量提升
console.log(a); //ReferenceError: a is not defined
let a = "apple";console.log(b); //undefined
var b = "banana";
//变量提升：
//var b;
//console.log(b) undefined
//var b = "banana";
变量 b 用 var 声明存在变量提升，所以当脚本开始运行的时候，b 已经存在了，但是还没有赋值，所以会输出 undefined。
变量 a 用 let 声明不存在变量提升，在声明变量 a 之前，a 不存在，所以会报错。
变量提升
- 所有的声明都会提升到作用域的最顶上去。
- 同一个变量只会声明一次，其他的会被忽略掉或者覆盖掉。
- 函数声明的优先级高于变量声明的优先级，并且函数声明和函数定义的部分一起被提升。
const 关键字
- const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。
const PI = "abc";
PI // abcconst NO; // Missing initializer in const declaration
- 暂时性死区
暂时性死区，所声明的变量或者常量会绑定到该区块，不再受外部影响。
//暂时性死区
var a=0;
for(let i=0;i<2;i++){console.log(a)//ReferenceError:const a=0
}var b=0;
for(let i=0;i<2;i++){console.log(b)//ReferenceError:let b=0
}
- const同样没有变量提升
console.log(a); //ReferenceError: a is not defined
const a = 1;
2. 模块字符串` `
在es6之前，字符串拼接只能用+或一些字符串方法，书写起来不太方便，在es6中加了反引号，可以直接输出有嵌入变量的字符串和多行字符串。
let name = hhx
let string =`Hi ${name},<div>what are u doing?</div>`
//Hi,
//what are u doing?
3. 解构
可以使用 {} 来对数组和对象进行解构。ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，称为解构。
以前变量赋值只能直接指定值
let a = 1;
let b = 2;
let c = 3;
ES6允许写成
let[a,b,c] = [1,2,3]; //
有点类似于python的写法，可以直接进行赋值，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。
4. 函数的参数默认值
函数传参可以有默认值。
function printT(text='default'){console.log(text);
}
5. Spread / Rest操作符...
扩展运算符（spread）是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3])
// 1 2 3console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
该运算符主要用于函数调用。
function push(array, ...items) {array.push(...items);
}function add(x, y) {return x + y;
}const numbers = [4, 38];
add(...numbers) // 42
6. 箭头函数
- 不需要
function关键字 - 省略
return关键字 this始终指向函数申明时所在作用域下的this值
//es5
var fun=function (a,b){return a+b;
}//es6
var function=(a,b)=>a+b;
由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。（这个在项目的时候遇到过。）
// 报错
let getTempItem = id => { id: id, name: "Temp" };// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
7. for of
ES6 借鉴 C++、Java、C# 和 Python 语言，引入了for...of循环，作为遍历所有数据结构的统一的方法。
一个数据结构只要部署了Symbol.iterator属性，就被视为具有 iterator 接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。
for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。
- for of 遍历的是键值对中的值
- for in 遍历的是键值对中的键
8. Promise 对象
Promise用于更优雅的处理异步请求。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
const promise = new Promise(function(resolve, reject) {// ... some codeif (/* 异步操作成功 */){resolve(value);} else {reject(error);}
});
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value) {// success
}, function(error) {// failure
});
then方法可以接受两个回调函数作为参数。
第一个回调函数是Promise对象的状态变为resolved时调用。第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。
9. Class
类似于C++、Java等面向对象语言，ES6 中支持 class 语法，不过，ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。
class Student {constructor() {console.log("I'm a student.");}study() {console.log('study!');}static read() {console.log("Reading Now.");}
}console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."
参考文章：
ES6新特性总结
ECMAScript 6 入门
Longstick的学习周记——ES6新特性相关推荐
- ES6新特性的学习和使用
ES6新特性的学习和使用 本文是基于Windows 10系统环境,进行ES6新特性的学习和使用 Windows 10 React 一.ES6的新语法 (1) let和const ES6之后尽量少使用v ...
- ES6新特性（函数默认参数，箭头函数）
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- lsdyna如何设置set中的node_list_如何快速掌握es6+新特性及核心语法？
国庆刚刚结束,我们开始一波新的学习进程吧. ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.作为前端必备技能,我们来快速开始吧 接 ...
- Longstick的学习周记——http协议小解
Longstick的学习周记--第十九周 前言 HTTP跟HTTPS HTTP协议简介 HTTP协议特点 HTTP工作原理 HTTP状态码 HTTP请求方法 URL(统一资源定位器) HTTPS 前言 ...
- 一文快速掌握 es6+新特性及核心语法
首先先祝各位节日快乐,好好去体验生活的快乐,在假期最后一天里,祝大家收获满满,同时抓住假期的尾巴,收割实用技能. 接下来我会总结一些工作中常用也比较核心的es6+的语法知识,后面又要慢慢开始工作之旅了 ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
- ES6新特性之了解ES6以及其发展历史
ES6 新特性 现在使用主流的前端框架中,如ReactJS.Vue.js.angularjs等,都会使用到ES6的新特性,作为一名高级工程师而言,ES6也就成为了必修课,所以本套课程先以ES6的新特性 ...
- es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构
往期回顾: 前端开发必备 - ES6 新特性之 let 和 const 命令 前端开发必备 - ES6 新特性之 变量的解构赋值 前端开发必备 - ES6 新特性之 字符串的拓展 前端开发必备 - E ...
- html5 跳转参数不显示_HTML5、CSS3、ES6新特性总结
前言:HTML5.CSS3.ES6新特性,可以说是基础前端的面试的必考题了,以下是关于新特性的基本总结. HTML5: 语义化的区块和段落元素:<section>,<article& ...
最新文章
- R语言生存分析COX回归分析实战：放疗是否会延长胰脏癌症患者的生存时间
- 图像纹理合成及纹理传输算法学习（附源码）。
- Php中的强制转换详解
- Java基础篇：equals()方法与==的区别
- 现代浏览器的工作原理
- [VMware WorkStation]虚拟机网络
- find command基本使用
- CocoaPods学习系列5——错误集锦
- CFile::Open
- Cowrie 部署 SSH 蜜罐
- 【监听文件 多线程】使用java--WatchService监听文件 开启多线程copy文件
- 篮球战术谈之经典配合
- 25款实用的桌面版博客编辑器
- RAC知识更新之-RAC单节点启动（摘自文平书）
- 2013年台式计算机型号,2013cpu天梯图，台式机处理器天梯图
- 手机/笔记本电脑看电视直播
- https://juejin.im/post/5ae081aaf265da0b767d263a
- 计算机组成原理——输入/输出系统（I/O接口外设中断）
- php 五舍六入,四舍五入计算器 四舍五入、四舍六入五取偶(双)算法 - 数学公式 - 房贷计算器...
- Google Voice 虚拟号码