es6笔记和例子

秒¤说

已于 2023-04-07 09:08:15 修改

阅读量338

点赞数

分类专栏： javaScript 文章标签：前端 javascript 开发语言

于 2023-04-06 15:11:48 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51198547/article/details/129990098

版权

javaScript 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了ES6的多个关键特性，包括箭头函数的使用，如无this、不能作为构造函数等；解构赋值在数组和对象中的应用；模板字符串的声明和内容处理；const常量的声明规则；简化对象写法的示例；以及Promise在异步编程中的作用。此外，还提到了迭代器、扩展运算符、生成器和类的继承等相关概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

es6笔记和例子

一、箭头函数

ES6允许使用箭头（=>）定义函数，

lat a=function(){} let a=()=>{}

声明一个函数

let fn=(a,b)=>{

return a+b;

}

调用函数

let result=fn(1,2);

console.log(result);

call（）方法

call() 方法是预定义的 JavaScript 方法。

它可以用来调用所有者对象作为参数的方法。

通过 call()，您能够使用属于另一个对象的方法。

本例调用 person 的 fullName 方法，并用于 person1：

箭头函数特性

1.箭头函数没有this，他的this就是外面的this

2.不能作为实例化对象

3.不能使用arguments变量

4.箭头函数的简写

1).省略小括号，当参数只有一个时

let mys=function(n){

return n*n;

}

let add=(n)=>{

return n+n;

}

let pow=(n)=>{

return n*n;

}

let add=n=>{

return n+n;

}

2）省略花括号，当代码体只有一个时

let pow=(n)=> n*n;

二、解构赋值

ES6 允许按照一定的模式从数组和对象中提取，对变量进行赋值

这杯称为解构赋值

const zhao={

name:'赵本山',

age:'不详',

xiaopin:function(){

console.log("我可以演小品");

}

};

let {name,age,xiaopin}=zhao;

console.log(name);

console.log(age);

console.log(xiaopin);

xiaopin();

三、模板字符串

ES6 引入新的声明字符串的方式[''] '' ""

1.声明

let str='我也是一个字符串哦';

console.log(str,typeof str);

2.内容中可以直接出现换行符

let str=`<ul>

</ul>`

注意是反引可以省去加号链接

3.变量拼接

let love="赵丽颖";

let out=`${love}是我心中最美丽的演员`;

]注意反引号，${}可以把前面声明的变量直接拿来用

四、const

1.一定要赋初始值

2.一般常量使用大写

3.SCHOOL='ATG';

4.块级作用域

5.对于数组和对象的元素修改，不算做对常量的修改，不会报错

五、简化对象写法

const school={

name:name;

chang:chang;

imporve:function(){

console.log("我们可以提高你的性能");

}

可以简化为

const school={

name,

chang,

imporve(){

console.log("我们可以提高你的性能");

}

六、迭代器

1.let不能重复声明，可以防止变量被污染

2.块级作用域全局，函数，eval

只在代码块内有效,还包括if,for,else等等

3.不存在变量提升,不会再变量声明之前执行他的结果

4.不影响作用域链效果，就是前面声明后面可以找到他

for of遍历

创建一个指针对象

let iteratoe=xioo[Symbol.iterator]();

函数参数默认值

具有默认值的参数一般位置要靠后（潜规则）

默认值可以与解构赋值结合

function add(a,b,c=10){

return a+b+c;

}

八、扩展运算符

例1：

const tfbody=['aa','bb','cc'];

function chuwan(){

console.log(arguments);

}

chuwan(...tfbody);

例2：

const kuaizi=['aa','bb'];

const kuaizi01=['aa','bb','dd'];

const fenghuang=[...kuaizi,...kuaizi01]

const sss=[...kuaizi];

console.log(fenghuang);

console.log(sss);

const divs=document.querySelectorAll('div');

const divArr=[...divs];

console.log(divArr);

九、生成器

生成器其实就是一个特殊的函数

异步编程

纯回调函数 node fs ajax mongodb

需要调用next()方法才会生效

例1： function * fen(){

yield '也一直没有耳朵';

yield '也一直没有bizi';

yield '也一直没有嘴巴';

console.log("sssss");

}

let iterator=fen();

console.log(iterator);

iterator.next();

十、生成器函数

例1： function getUsers(){

setTimeout(() => {

let data = '用户数据';

iterator.next(data);

}, 1000);

}

function getOrder(){

setTimeout(() => {

let data = '订单数据';

iterator.next(data);

}, 1000);

}

function getGoods(){

setTimeout(() => {

let data = '商品数据';

iterator.next(data);

}, 1000);

}

function * gen(){

let users =yield getUsers();

console.log(users)

let oders =yield getOrder();

console.log(oders)

let goods = yield getGoods();

console.log(goods)

}

// 调用生成器函数

let iterator = gen();

iterator.next();

十一、生成器函数实例

异步编程文件操作网络操作数据库操作

1s后控制台输出111 2s后输出222 3s后输出333

例1：

setTimeout(() => {

console.log(111);

setTimeout(() => {

console.log(222);

setTimeout(() => {

console.log(333);

}, 1000);

function one(){

setTimeout(() => {

console.log(111)

iterator.next()

}, 1000);

}

function two(){

setTimeout(() => {

console.log(222)

iterator.next()

}, 2000);

}

function three(){

setTimeout(() => {

console.log(333)

iterator.next()

}, 3000);

}

function * gen(){

yield one()

yield two()

yield three()

}

let iterator = gen();

iterator.next();

十二、自定义遍历数据

例1： const banji={

name:"终极一班",

stus:[

'dd',

'dds'

[Symbol.iterator](){

let index=0;

let _this=this;

return {

next:function(){

if(index<this.stus.length){

return {value:_this.stus[i],done:false};

index++;

return result;

}else{

}

};

}

for(let v of banji ){

console.log(v);

}

十三、Promise

例1： const p= new Promise(function(resolve,reject){

setTimeout(() => {

let err='数据错误';

reject(err);

}, 1000);

});

// 调用promise的then方法

p.then(function(value){

console.log(value);

},function(reason){

console.error(reason);

})

例2： const fs= require('fs');

fs.readFile('为学.md',(err,data)=>{

if(err) throw err;

console.log(data.toString());

});

十四、rest参数

例1： function date(...args){

console.log(args);

}

date('dd','ddd','cc')

十五、symbol

不能参与运算

不能遍历

独一无二

十六、对象的继承

例1： function Phone(brand,price){

this.brand=brand;

this.price=price;

}

Phone.prototype.call=function(){

console.log("我可以打电话了");

}

function SmartPhone(brand,price,color,size){

Phone.call(this,brand,price);

this.color=color;

this.size=size;

}

// 设置子集构造函数的原型

SmartPhone.prototype=new Phone;

SmartPhone.prototype.constructor=SmartPhone;

SmartPhone.prototype.phote=function(){

console.log("我可以拍照");

}

const chuzi=new SmartPhone('锤子','234','黑色','5.5inch');

console.log(chuzi);

十七、对象方法的扩展

console.log(Object.is(NaN,NaN));

// Object.assign对象合并

const config1={

host:'localhost',

port:3306,

name1:"sss",

};

const config2={

host:'localhostee',

port:3307,

name:"misd",

};

console.log(Object.assign(config1,config2));

// Object.setPrototypeof设置原型对象

// Object.setPrototypeOf(school,city);

Object.setPrototypeOf(config1,config2);

// console.log(school);

console.log(Object.getPrototypeOf(config1));

十八、静态成员

例1：

function Phone(){

}

// 函数对象的属性和实例对象的属性不相通

Phone.name='手机';

Phone.change=function(){

console.log("我可以改变世界");

}

let nokia = new Phone();

console.log(nokia.name);

// nokia.change();

console.log("ssssssssssss"+Phone.name);

十九、类的继承

例1： class Phone{

constructor(brand,price){

this.brand=brand;

this.price=price;

}

call(){

console.log("我爱打电话");

}

class SmartPhone extends Phone{

constructor(brand,price,color,size){

super(brand,price)

this.color=color;

this.size=size;

}

photo(){

console.log("拍照");

}

playGame(){

console.log("玩游戏");

}

call(){

console.log("我可以进行视频通话 ");

}

const xiaomi=new SmartPhone('小米','大米','小的米','小啊米');

console.log(xiaomi);

// 在js中子类时不能调用父类的同名方法

xiaomi.call();

二十、类重写

例1:class Animal {

constructor(name) {

this.speed = 100;

this.name = name;

}

run(speed) {

this.speed = speed;

alert(`${this.name} runs with speed ${this.speed}.`);

}

stop() {

this.speed = 0;

alert(`${this.name} stands still.`);

}

class Rabbit extends Animal {

hide() {

alert(`${this.name} hides!`);

}

stop() {

super.stop(); // 调用父类的 stop

this.hide(); // 然后 hide

}

let rabbit = new Rabbit("White Rabbit");

rabbit.run(5);

rabbit.stop();

二十一、数值扩展

例：

let b=0b1010;

let o=0o777;

let d=100;

// 十六进制

let x=0xff;

let arr=[5,3,6,2,7];

arr.sort();

console.log(arr.toString());

console.log(Number.isNaN(123));

// parseInt()可以筛选出数值中的非数值部分

console.log(Number.parseInt('2432541love'));

// Math.sign() 检测一个数是正数还是负数

二十二、class类

例1：

// 手机类

function Phone(brand,price){

this.brand=brand;

this.price=price;

}

Phone.prototype.call=function(){

console.log("我可以打电话");

}

let Huawei=new Phone('华为',5999);

Huawei.call();

console.log(Huawei);

class Shouji{

/* constructor()这个方法zaishi */

constructor(brand,price){

this.brand=brand;

this.price=price;

}

call(){

console.log("我可以打电话了");

}

let onePluse=new Shouji("1+",1999);

console.log(onePluse);

二十三、get和set

例1： class Phone{

get price(){

console.log("大降价了");

return "iloveyou";

}

set price(newval){

console.log("我的钱没了");

}

let s=new Phone();

console.log(s.price);

s.price='free';

console.log(s.price);

二十四、Map

例1：

let m=new Map();

m.set('name','妙衣睡哦');

m.set('change',function(){

console.log("我们能改变你");

});

let key={

school:'ddd'

};

m.set(key,['北京','北京q','北京w','北京d']);

console.log(m);

for(let v of m){

console.log(v);

}

二十五、Promise封装

// 创建对象

例1：

const xhr=new XMLHttpRequest();

// 2.初始化

xhr.open("GET","https://api/sentences.top/getJoke");

// 发送

xhr.send();

// 绑定事件，处理响应结果

xhr.onreadystatechange=function(){

if(xhr.readyState===4){

// 判断响应状态码 200-299

if(xhr.status>=200&&xhr.response<300){

console.log(xhr.response);

}else{

console.error(xhr.status);

}

二十六、Set

例1： let s=new Set();

let s2=new Set(['大事','好事','q大事','a大事','s大事','大事','大d事']);

console.log(s2);

console.log(s2.has('好ss事'));

console.log(s2);

for(let v of s2){

console.log(v);

}

例2： Set并集

let arr=[1,2,3,4,5,6,7,8];

// let result=[...new Set(arr)];

// console.log(result);

let arr2=[4,5,6,7,6,10];

// 交集

let union=[...new Set([...arr,...arr2])];

// 直接在对象前面加一个[...obj]可变数组

console.log(union);

// 差集

let result02=[...new Set(arr)].filter(item=>!(new Set(arr2).has(item)));

console.log(result02);

例3： Set交集

let arr=[1,2,3,4,5,6,7,8];

// let result=[...new Set(arr)];

// console.log(result);

let arr2=[4,5,6,7,6];

// 交集

let result=[...new Set(arr)].filter(item=>{

let s2=new Set(arr2);

if(s2.has(item)){

return true;

}else{

return false;

}

});

console.log(result);

let result02=[...new Set(arr)].filter(item=>new Set(arr2).has(item));

console.log(result02);

// 差集

二十七：es6模块化语法

// 引入m1.js模块内容

// 通用方式

import * as m1 from "./m1.js";

import * as m2 from "./m2.js";

import * as m3 from "./m3.js";

console.log(m3);

m3.default.change();

es6笔记和例子

es6笔记和例子

一、箭头函数

三、模板字符串

四、const

五、简化对象写法

六、迭代器

八、扩展运算符

九、生成器

十、生成器函数

十一、 生成器函数实例

十二、自定义遍历数据

十三、Promise

十四、rest参数

十五、symbol

十六、对象的继承

十七、对象方法的扩展

十八、静态成员

十九、类的继承

二十、类重写

二十一、数值扩展

二十二、class类

二十三、get和set

二十四、Map

二十五、Promise封装

二十六、Set

二十七：es6模块化语法

十一、生成器函数实例