ES6语法详解(一)

wendux 发布于2019-08-26 11:53 / 2989人阅读

摘要：冻结对象可以使用方法。对象的解构赋值必须要属性名相同，顺序毫无影响。数组解构赋值默认值，当等号右边的值时，默认值生效。

let变量

let声明的变量在let命令所在的代码块中有效。不存在变量提升，只能先声明后使用。

暂存死区

如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量。

var a = 1;
{
    a = 2;           //ReferenceError
    let a = "a";
    console.log(a);  //"a";
}

在相同块级作用域中，不能用let重复声明同一变量。即使已存在的变量是通过var声明的。

let a = 1;  let a = 2;   //报错
let a = 1;  var a = 2;   //报错，var声明有变量提升作用

块级作用域和函数声明

在块级作用域中，用let声明的变量只在当前作用域中有效，且不会受到外部的影响，所以块级作用域可以替代自执行函数表达式。

理论上，函数在块级作用域中声明行为和let类似，但在es6浏览器环境中，为了兼容老版本，函数声明与var声明变量类似，会提升到全局作用域头部，和当前块级作用域的头部，为了避免差异，可以将函数声明写成函数表达式。

let fn = function () {};    //函数表达式

const常量

声明常量必须马上赋值且不能再改变。const和let有类似的特点：在块级作用域内有效，声明不提升，存在暂存死区，不可重复声明。

复合型数据如object，声明后不可在重新赋值，但可以修改这个值本身，比如修改属性和新增属性。冻结对象可以使用Object.freeze方法。

const json = Object.freeze({});
//常规模式下修改json无效，严格模式下报错

顶层变量

javascript的顶层对象是window，node的顶层对象是global，ES6规定用let const class声明的变量不在是顶层对象的属性。

let a = 1;
window.a   //undefined

解构赋值

从数组和对象中提取值，对变量进行赋值，称为解构（destructuring）

数组的解构赋值，按照对应的顺序赋值，如果值数量超出则多余的值被抛弃，如果值不够则为undefined。

let arr = [1, [2, 3]];
let [a, [b, c]] = arr;

对象的解构赋值必须要属性名相同，顺序毫无影响。如果属性名不同，需要写成如下形式。

let {a: b} = {c: 1};
b //1

实际上对象解构赋值的是后者。

let {a} = {a: 1}     //简写 
let {a: a} = {a: 1}  //全写

字符串解构赋值和数组类似。

let [a, b, c] = "hello";
console.log(a,b,c)  //h,e,l

数组解构赋值默认值，当等号右边的值 === undefined时，默认值生效。

let [a = 1, b = 2] = [undefined, null];
console.log(a, b);  //1 null

以上代码逻辑是：

if ([undifined, null][0] === undefined) {
    a = 1;
} else {
    a = [undifined, null][0]
}

对象解构赋值默认值，当对象属性值严格等于undefined时。

let {a, b=2} = {1, undefined}
a,b //1,2

let {a: b=1} = {a: undefined}
b //1

事实上，只要某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值。

函数参数的解构赋值，传入的参数不是数组或对象，而是变量。

let fn = ( [a, b] ) => {
    return a + b;
};
fn ([1, 2]); //3

[[1,2],[3,4]].map([a,b]=> a+b);
//[3,7]

函数参数也可使用默认值

let fn({a=1, b=2} = {}) { return [a,b]}
fn({a:10})  // [10,2]

等号右边如果不是对象，会先转成对象，转换失败则报错。

let {toString: s} = 123;
s === Number.prototype.toString

let {toString: s} = true;
s === Blooean.prototype.toString

undefined null不能转成对象，结构赋值报错。

let {a} = undefined;   //TypeError
let {b} = null;        //TypeError

解构赋值应用:

//交换变量的值
let a = 1, b = 2;
[a,b] = [b, a];

//函数返回多个值
let fn = () => {x: 1, y: 2}

//提取json数据
let {a, b} = obj;

字符串扩展

ES6提供for...of方法遍历字符串。

新增的其他方法：startsWidth() endsWidth() includes()。

let s = "hello word!";
s.startsWith("hello");     //true
s.endsWidth("word");       //true
s.includes("o");           //true

charAt() 用于返回给定位置的字符，对于编码大于0xFFFF的字符用at()方法。

"ab".charAt(0)  //"a"
"

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107758.html

Es6 写的文件import 起来解决方案详解

摘要：解决方法经过查阅资料，发现可以通过打包工具来将依赖合并成一个文件，然后引入中。感谢阅读，希望能帮助到大家，谢谢大家对本站的支持这段时间，学习了一点关于es6新规范的知识，然后心血来潮，想尝试一下用ES6编写的代码在浏览器中跑起来。说干就干，先说下我的实现步骤（没想到有坑！） 1.把ES6代码转译成ES5;2.html文件引入转译后的ES5;3.然后在浏览器环境中运行;4.在node...

tinylcy 2019-08-20 16:33 评论0 收藏0
Es6 写的文件import 起来解决方案详解

摘要：解决方法经过查阅资料，发现可以通过打包工具来将依赖合并成一个文件，然后引入中。感谢阅读，希望能帮助到大家，谢谢大家对本站的支持这段时间，学习了一点关于es6新规范的知识，然后心血来潮，想尝试一下用ES6编写的代码在浏览器中跑起来。说干就干，先说下我的实现步骤（没想到有坑！） 1.把ES6代码转译成ES5;2.html文件引入转译后的ES5;3.然后在浏览器环境中运行;4.在node...

Markxu 2019-08-01 16:50 评论0 收藏0
前端基础进阶（十五）：详解 ES6 Modules

摘要：下载地址安装一个好用的命令行工具在环境下，系统默认的非常难用，所以我个人比较推荐大家使用或者。下载地址安装在命令行工具中使用查看版本的方式确保与都安装好之后，我们就可以安装了。前端基础进阶系列目录 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 对于新人朋友来说，想要自己去搞定一个E...

Lowky 2019-08-21 18:31 评论0 收藏0
ES6-7

摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版）超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 评论0 收藏0
ES6的Iterator对象详解

摘要：实现原理创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。具体来说，就是返回一个包含和两个属性的对象。接口部署在对象的属性上可以调用这个属性，就得到遍历器对象。 Iterator实现原理创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。第一次调用指针对象的next方法，可以将指针指向数据结构的第一...

KoreyLee 2019-08-19 18:34 评论0 收藏0