ES6常用特性

最新推荐文章于 2022-02-13 13:11:56 发布
最新推荐文章于 2022-02-13 13:11:56 发布
阅读量190 收藏
点赞数
分类专栏： js es6 笔记 文章标签： es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ANNENBERG/article/details/87525400
版权
js 同时被 3 个专栏收录
35 篇文章 0 订阅
订阅专栏
笔记
13 篇文章 0 订阅
订阅专栏
es6
9 篇文章 0 订阅
订阅专栏

<!DOCTYPE html>

//1.var let const声明变量

//var会变量提升，let就不会被变量提升

//var内层变量覆盖外层变量,let所声明的变量，只在let命令所在的代码块内有效（新增块级作用域）

//var用来计数的循环变量泄露为全局变量(循环结束为最后一轮i的值，新值覆盖旧值)；let不会

//const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。

 

//2.set map array增删改查对比

// let map = new Map();

// let set = new Set();

// let array = [];

// 增

// map.set('t', 1);

// set.add( { t : 1 } );

// array.push( { t:1 } );

// console.info( map, set, array ); // Map { 't' => 1 } Set { { t: 1 } } [ { t: 1 } ]

// 查

// let map_exist = map.has( 't' );

// let set_exist = set.has( {t:1} );

// let array_exist = array.find(item => item.t)

// console.info(map_exist, set_exist, array_exist); //true false { t: 1 }

// 改

// map.set('t', 2);

// set.forEach(item => item.t ? item.t = 2:'');

// array.forEach(item => item.t ? item.t = 2:'');

// console.info(map, set, array); // Map { 't' => 2 } Set { { t: 2 } } [ { t: 2 } ]

// 删

// map.delete('t');

// set.forEach(item => item.t ? set.delete(item):'');

// let index = array.findIndex(item => item.t);

// array.splice(index,1);

// console.info(map, set, array); // Map {} Set {} []

 

//3.class extends super 类 继承 指代父类实例

/*class Human {

constructor(name) {

this.name = name;

}

sleep() {

console.log(this.name + " is sleeping");

}

}

let man = new Human("Davis");

man.sleep(); //Davis is sleeping

class Boy extends Human {

constructor(name, age) {

super()

this.name = name;

this.age = age;

}

info(){

console.log(this.name + 'is ' + this.age + 'years old');

}

}

let son = new Boy('Faker','8');

son.sleep(); // Faker is sleeping

son.info(); // Faker is 8 years old

上面代码首先用class定义了一个“类”，可以看到里面有一个constructor方法，这就是构造方法，而this关键字则代表实例对象。简单地说，constructor内定义的方法和属性是实例对象自己的，而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承，这比ES5的通过修改原型链实现继承，要清晰和方便很多。上面定义了一个Boy类，该类通过extends关键字，继承了Human类的所有属性和方法。

super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6的继承机制，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。*/

 

//4.arrow function 箭头函数

/*ES6中新增的箭头操作符 => 简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值，

可以说是 ES6 最最常用的一个新特性了，看下面的实例:*/

//ES5

let arr1 = [1, 3, 5, 7, 9];

arr1.forEach (function(val, key) { return console.log(val, key); });

//ES6

let arr = [1, 3, 5, 7, 9];

arr.forEach(

(val,key)=>console.log(val,key)

);

//箭头函数this的方便性

//JavaScript语言的this对象指向是一个头疼的问题，在对象方法中使用this，必须非常小心。

//class Human {

// constructor(name) { this.name = name; }

// sleep() { setTimeout(function(){ console.log(this.name + " is sleeping"); }, 1000) }

//}

// let man = new Human("Davis");

// man.sleep(); // is sleeping 输出 Davis，这是因为setTimeout中的this指向的是全局对象

//解决方法有两种：

// 第一种，将this传给self,再用self来指代this

//sleep() { var self = this; setTimeout(function(){ console.log(self.name + " is sleeping"); }, 1000)

// 第二种，是用bind(this)

//sleep() { setTimeout(function(){ console.log(self.name + " is sleeping") }.bind(this), 1000)

//使用=>箭头函数，非常方便：

class Human {

constructor(name){ this.name = name; }

sleep() { setTimeout( () => { console.log(this.name + "is sleeping"); }, 1000) }

}

let man = new Human("Davis");

man.sleep(); // Davis is sleeping

//当我们使用箭头函数时，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

//并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，

//因此内部的this就是外层代码块的this。

 

//5.template string 模板字符串

//ES6中允许使用反引号 ` 来创建字符串，创建的字符串里面可以包含变量${vraible}

let num = Math.random(); console.log(` num is ${num}`);

$("#main").html(` <h1>今天天气很好！</h1> <p>产生一个随机数${num}</p> `);

 

//6.destructuring 解构

//ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

//用途一，交换变量的值，不再需要中间变量

let a = 1; let b = 2;

[a, b] = [b, a];

console.log(a, b); // 2 1

//用途二，提取JSON数据

let jsonData = { id: 1, title: "OK", data: [5, 6] };

let {id, title, data:number} = jsonData;

console.log(id, title, number); // 1, "OK", [5, 6]

//用途三，函数参数的定义

// 参数是一组有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]);

// 参数是一组无次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});

 

//7.default默认参数(指定参数的默认值)

// 传统指定默认参数

function say1(name) {

var name = name || 'Faker';

console.log( 'Hello ' + name );

}

// ES6默认参数

function say2(name='Davis') { //say2(name='Davis')这里的等号，指的是没有传这个参数，则设置默认值Davis，而不是给参数赋值

console.log(`Hello ${name}`);

}

say1(); // Hello Faker

say1('Tom'); // Hello tom

say2(); //Hello Davis

say2('Bob'); // Hello Bob

 

//8.rest参数

//rest参数只包括那些没有给出名称的参数；

//rest参数是Array的实例，可以直接应用sort, map, forEach, pop等方法；

//rest参数之后不能再有其它参数（即，只能是最后一个参数）；

//函数的length属性，不包括rest参数；

function fn(x, y, ...rest){

console.log(rest)

}

fn(1, "cat", "dog", 2); //rest ["dog", 2]

console.log(fn.length); //2 [1,cat]

 

//9.Proxy 代理

//Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。

//让我们对一个对象有了很强的追踪能力，同时在数据绑定方面也很有用处。

//定义被监听的目标对象

let man1 = { name: 'Davis', age: 21 };

//定义处理程序

let handle = {

set(receiver, property, value) {

console.log(property, 'is changed to', value);

receiver[property] = value;

};

//创建代理以进行侦听

man1 = new Proxy(man, handle);

//做一些改动来触发代理

man1.age = 22; //age is change to 22

man1.name = "Faker"; // name is change to Faker

 

//10.Promise对象状态

//Promise/A+规范, 规定Promise对象是一个有限状态机。它三个状态：pending（执行中）Resolved（已完成）Rejected（已失败）

//其中pending为初始状态，Resolved和rejected为结束状态（表示promise的生命周期已结束）。

let val = 1;

// 我们假设step1, step2, step3都是ajax调用后端或者是在Node.js上查询数据库的异步操作

// 每个步骤都有对应的失败和成功处理回调

// step1、step2、step3必须按顺序执行

function step1(resolve, reject) {

console.log('步骤一：执行');

if (val >= 1) {

resolve('Hello I am No.1');

} else if (val === 0) {

reject(val);

}

}

function step2(resolve, reject) {

console.log('步骤二：执行');

if (val === 1) {

resolve('Hello I am No.2');

} else if (val === 0) {

reject(val);

}

}

function step3(resolve, reject) {

console.log('步骤三：执行');

if (val === 1) {

resolve('Hello I am No.3');

} else if (val === 0) {

reject(val);

}

}

new Promise(step1).then(function(val){

console.info(val);

return new Promise(step2);

}).then(function(val){

console.info(val);

return new Promise(step3);

}).then(function(val){

console.info(val);

return val;

}).then(function(val){

console.info(val);

return val;

});

// 执行之后将会打印

//步骤一：执行

//Hello I am No.1

//步骤二：执行

//Hello I am No.2

//步骤三：执行

//Hello I am No.3

//Hello I am No.3

//常用关键点：

//在Promise定义时，函数已经执行了；Promise构造函数只接受一个参数，即带有异步逻辑的函数。这个函数在 new Promise 时已经执行了。只不过在没有调用 then 之前不会 resolve 或 reject。

//在then方法中通常传递两个参数，一个 resolve 函数，一个 reject 函数。reject就是出错的时候运行的函数。resolve 函数必须返回一个值才能把链式调用进行下去。

//resolve 返回一个新 Promise

//返回一个新Promise之后再调用的then就是新Promise中的逻辑了。

//resolve 返回一个值

//返回一个值会传递到下一个then的resolve方法参数中。

 

//11.Generator

//Generator函数跟普通函数的写法有非常大的区别：

//function关键字与函数名之间有一个 *；

//函数体内部使用yield语句，定义不同的内部状态；

function* f() { yield 'a'; yield 'b'; yield 'c'; return 'ending'; }

let fn = f();

console.log(fn.next()); // { value: 'a', done: false }

console.log(fn.next()); // { value: 'b', done: false }

console.log(fn.next()); // { value: 'c', done: false }

console.log(fn.next()); // { value: 'ending', done: true }

//第一次输出fn.next()返回一个简单的对象{value: "a", done: false}，'a'就是f函数执行到第一个yield语句之后得到的值，false表示f函数还没有执行完，只是在这暂停。

//第二次，返回的就是{value: "b", done: false}，说明f函数运行到了第二个yield语句，返回的是该yield语句的返回值'b'。返回之后依然是暂停。

//第三次，第四次同理，这样整个f函数就运行完毕了。

//只有当yield后面跟的函数先执行完，无论执行体里面有多少异步回调，都要等所有回调先执行完，才会执行等号赋值，以及再后面的操作。这也是yield最大的特性

function req(url) { $.get(url, function(res){ it.next(res); }); }

// 生成器函数

function* ajaxs() { console.log(yield req('a.html'));

console.log(yield req('b.html'));

console.log(yield req('c.html'));

}

var it = ajaxs(); // 遍历器对象 it.next();

// a.html

// b.html

// c.html

 

//12.export、import

//export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口；

//import用于在一个模块中加载另一个含有export接口的模块。

//导出一组对象

导出模块文件app.js：

class Human{

constructor(name) {

this.name = name;

}

sleep() {

console.log(this.name + " is sleeping");

}

}

function walk() {

console.log('i am walking');

}

function play() {

console.log('i am playing');

}

export { Human, walk }

//模块导出了两个对象：Human类和walk函数，能被其他文件使用。而play函数没有导出，为此模块私有，不能被其他文件使用。

//main.js导入app.js模块

import { Human, walk } from 'app.js';

 

//13.Default导出

//使用关键字default，可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。

//... //类，函数等

export default App;

//main.js导入app.js模块

import App from 'app.js';​​​​

ANNENBERG
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6常见的10个新特性
weixin_42247274的博客
11-11 1882
1.let和const let:用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，即let声明的是一个块作用域内的变量。 const:声明一个只读的常量。一旦声明，常量的值就不能改变。const实际上保证的是变量指向的那个内存地址所保存的数据不得更改。对于简单的数据（数值、字符串、布尔值）值就保存在变量指向的那个内存地址，等同于常量，但对于复合类型的数据（主要是对象和数组）变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的，至于它指向的数据结构
ES6新特性之字符串的扩展实例分析
08-30
下面将详细阐述这些新特性，包括ES6中字符串函数的扩展、新增的常用函数以及模板字符串的使用。 首先，我们来看看ES5中的一些基本字符串函数： 1. `concat()`：这个函数用于合并两个或多个字符串，返回一个新的...
es 6 精简
pingping260687005的博客
05-30 398
接下来我们就聊聊ES6那些可爱的新特性吧。1.变量声明const和let在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如: function aa() { if(bool) { var test = 'hello man' } else { con...
ES6的常用特性
qq_44428688的博客
02-13 2412
1.不一样的变量声明：const let 和 var const let var 作用域 有 有 无 是否是变量 是常量 变量 变量 var 无论声明在何处，都会被视为声明在函数的最顶部， const声明的值是常量，常量的值被设置完成以后是不可以改变的，但是如果const声明的是一个对象，对象所包含的值是可以修改的。抽象一点说就是对象指向的地址没有变就行。 2.模板字符串 基本的字符串格式化，将表达式嵌入字符串中进行拼接用${}来界
JavaScript ES6常用基础知识总结
12-07
以下是一些ES6中常用的基础知识，特别是关于`let`和`const`以及块级作用域的相关内容。 1. **块级作用域**：在ES6之前，JavaScript只有函数作用域和全局作用域，没有真正的块级作用域。ES6引入了`let`和`const`...
ES6语法规范.docx
08-14
ES6（ECMAScript 6）是一种新的JavaScript语法规范，相比于之前的ES5，ES6带来了许多新的特性和改进。下面将对ES6中的let命令、const命令、解构赋值、Symbol、Set等知识点进行详细的介绍。 一、let命令 let命令是...
最常用的ES6特性
jinxu的博客
01-21 269
概述 let const class extends super arrow function template string destructuring default rest import export 传统的写法 ES6 module的其他高级用法 修改变量名 模块的整体加载 终极秘籍 概述 let, const, class, extends, super, ar
ES6 常用的特性整理
a_靖的博客
03-22 601
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 1.默认参数 2.模板对象-反引号 3.多行字符串-反引号 4.解构赋值-对象，数组 5.增强的对象字面量- 直接给对象里面的属性赋值给变量 6.给对象的属性赋值的时候可以直接给一个参数， 7.箭头函数 8.promises 9.let const 解决了一个es5中变量溢出的bug ...
一些ES6的常用特性
贺知叶的博客
03-11 181
1、let 和 const： ​ let为声明变量，const为声明常量。 块级作用域： ​ let的用法类似于var但他只能在声明的代码块里面使用，称之为：块级作用域 ​ const为一个只读的常量，且常量的值无法改变，作用域也在声明的代码块里，是块级作用域 暂时性死区 TDZ： ​ 当let以及const在代码块里面声明以后就绑定在这，无法在当前块级外面使用，并且JS编译是从上往下编译，所以只能在当前声明行一下调用 if (true) { console.log(MAX);
ES6 编程风格
abc20140818的博客
03-29 158
块级作用域 （1）let 取代 var ES6 提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。 'use strict'; if (true) { let x = 'hello';} for (let i = 0; i < 10; i++) { console.log(...
ES6常用特性总结
wenqi
01-21 661
ES6常用的特性总结： let&const let类似于var，用来声明一个变量。 var 声明的变量往往会有越域 let声明的变量有严格局部作用域 var a = 1; let b = 2; //console.log(a); //1 //console.log(b); //ReferenceError: b is not defined var 可以声明多次，但let只能声明一次 var m = 1; var m = 2; let n = 3; let n = 4; //c
ES6特性
阳光下的冷静的博客
06-11 1195
ES6特性
find和findIndex用法
qq_32184753的博客
06-30 300
var arrDemo = [{ name:"xiaohong", age:10 },{ name:"xiaoli", age:11 },{ name:"xiaomei", age:12 },{ name:"xiaogao", age:13 },{ name:"xiaozhao", age:14
vue中的find()函数的用法与扩展用法
热门推荐
weixin_44281416的博客
10-27 3万+
find函数基本格式：let obj=this.list.find(item=>item.code===val) 首先在这里我们要知道的两个基础知识 一、find是一个查找函数。 二、箭头函数find(item=>item.code===val)相当于find(item){item.code===val} 其中list是数组，this.list.find()是指在list数组中找某样东西，item是find()函数的寻找某样东西的根据，也可以说是id或者是主键。后面item.code===val
ES6新特性详解：从let到Module
ES6，全称ECMAScript 2015，是JavaScript语言的一个重要更新版本，引入了许多新的语法特性，极大地提高了开发效率和代码可读性。以下将对其中的一些关键特性进行详细介绍。 1. **let命令**：let关键字用于声明变量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值