0


20分钟上手ES6,不会ES6好意思说自己会JS ?

✍🏼作者:周棋洛,大二计算机学生
♉星座:金牛座
🏠主页:点击查看更多
🌐关键:

ES6
javascript
前端

在这里插入图片描述

文章目录

理解ES6

ECMAScript

,是由网景公司制定的一种

脚本语言的标准化规范

;最初命名为

Mocha

,后来改名为

LiveScript

,最后重命名为

JavaScript

ECMAScript 2015(ES2015),第 6 版,最早被称作 ECMAScript 6(

ES6

),添加了新的特性

这篇文章就是带大家学习ES6新增特性的,加油哦

在这里插入图片描述

ES6 块级作用域 let

首先,什么是作用域?作用域简单讲就是声明一个变量,这个变量的有效范围,在

let

没来之前。js 只有

var

全局作用域

函数作用域

ES6

为 js 带来了

块级作用域

在这里插入图片描述

{var a ="🍉";let b ="⛳";}
console.log(a);
console.log(b);
🍉
Uncaught ReferenceError: b is not defined

可以看到,我们使用 var 关键字在块中定义了变量 a,其实全局可以访问到,所以说,

var声明的变量是全局的

,但我们想让变量就在块中生效,出了块就访问不了了,这时就可以使用

ES6 

新增的块级作用域关键字

let

来声明这个变量 a,当我再次访问,报错了,说

a is not defined

,a 没有定义

在这里插入图片描述

ES6 解构数组

如下所示,首先定义了一个函数,返回一个数组,在未使用解构数组前,调用数组并把返回值赋值给 temp ,然后打印 temp 数组,使用了

解构数组

后,直接定义一个数组变量,然后将函数返回值指向该变量,他会自动把第一项的值赋值给第一个数组变量,第二项赋值给第二个数组变量,以此类推,最后打印三个变量,看到没有问题

functionbreakfast(){return['🍉','🍔','🍕'];}var temp =breakfast();
console.log(temp[0], temp[1], temp[2]);let[a, b, c]=breakfast();
console.log(a, b, c);
🍉 🍔 🍕
🍉 🍔 🍕

在这里插入图片描述

ES6 解构对象

首先

breakfast

函数返回一个

对象

,使用

解构对象

,定义对象,键值对中键表示映射的实际对象的键名,值就是自定义变量,解构完成,会自动完成赋值,然后调用 breakfast 函数,返回对象,随后打印变量 a,b,c ,可以看到没问题

functionbreakfast(){return{a:'🍉',b:'🍕',c:'🍔'}}let{a: a,b: b,c: c }=breakfast();
console.log(a, b, c);
🍉 🍕 🍔

在这里插入图片描述

ES6 模板字符串

在使用模板字符串前,我们拼接字符串变量使用 +

使用 ES6 提供的模板字符串,首先使用 `` 把字符串包起来,当要使用变量时 ,使用

${变量}
let a ='🍉',
    b ='🖼️';let c ='今天吃'+ a +'吃完看'+ b;
console.log(c);let d =`今天吃 ${a} 吃完看 ${b}`;
console.log(d);
今天吃🍉吃完看🖼️
今天吃 🍉 吃完看 🖼️

在这里插入图片描述

ES6 判断字符串里是否包含其他字符串

使用这些函数,可以轻松的完成是不是以什么开头的字符串,是不是以什么结尾的字符串,是不是包含了什么字符串等的操作

let str ='你好,我是小周 ❤️';
console.log(str.startsWith('你好'));
console.log(str.endsWith('❤️'));
console.log(str.endsWith('你好'));
console.log(str.includes(" "));
true
true
false
true

在这里插入图片描述

ES6 默认参数

ES6里,可以使用默认参数,当调用函数时,没有给参数进行赋值时,就使用设置的默认参数执行,当给参数赋值时,就会使用新赋的值执行,覆盖默认值,使用如下:

functionsay(str){
    console.log(str);}functionsay1(str ='嘿嘿'){
    console.log(str);}say();say1();say1('❤️');
undefined
嘿嘿
❤️

在这里插入图片描述

ES6 展开操作符

使用

...

可以展开元素,方便操作,使用如下:

let arr =['❤️','😊','😍'];
console.log(arr);
console.log(...arr);let brr =['王子',...arr];
console.log(brr);
console.log(...brr);
[ '❤️', '😊', '😍' ]
❤️ 😊 😍
[ '王子', '❤️', '😊', '😍' ]
王子 ❤️ 😊 😍

在这里插入图片描述

ES6 剩余操作符

...

操作符用在函数参数上,接收一个参数数组,使用如下:

functionf1(a, b,...c){
    console.log(a, b, c);
    console.log(a, b,...c);}f1('🍎','🌈','☃️','㊙️');
🍎 🌈 [ '☃️', '㊙️' ]
🍎 🌈 ☃️ ㊙️

在这里插入图片描述

ES6 函数名字

使用

.name

可以获取函数的名字,具体使用如下:

functionf1(){}
console.log(f1.name);letf2=function(){};
console.log(f2.name);letf3=functionf4(){};
console.log(f3.name);
f1
f2
f4

在这里插入图片描述

ES6 箭头函数

使用箭头函数可以让代码更简洁,但是也要注意箭头函数的局限性,以及箭头函数中自身没有 this,this指向父级

letf1=a=> a;letf2=(a, b)=>{return a + b;}

console.log(f1(10));
console.log(f2(10,10));
10
20

在这里插入图片描述

ES6 对象表达式

使用es6的对象表达式,如果对象属性和值一样,可以省略值,函数写法可以省去

function

,用法如下:

let a ='㊙️';let b ='☃️';const obj ={a: a,b: b,say:function(){}}const es6obj ={
    a,
    b,say(){}}

console.log(obj);
console.log(es6obj);
{ a: '㊙️', b: '☃️', say: [Function: say] }
{ a: '㊙️', b: '☃️', say: [Function: say] }

在这里插入图片描述

ES6 恒量

使用

const

关键字定义衡量,

const

限制的是给衡量分配值的动作,并不限制衡量中的值,使用如下:

const app =['☃️','🌈'];
console.log(...app);
app.push('🤣');
console.log(...app);
app =10;

可以看到当再次给衡量分配值就报错了

☃️ 🌈
☃️ 🌈 🤣
app = 10;
    ^
TypeError: Assignment to constant variable.

在这里插入图片描述

ES6 对象属性名

使用点定义对象属性时,如果属性名中含有空格字符,是不合法的,语法通不过的,使用

[属性名]

可以完美解决,并且不仅可以直接写明属性名,还可以使用变量来指定,具体使用如下:

let obj ={};let a ='little name';
obj.name ='王子';// 使用点定义属性中间有空格是不合法的// obj.little name = '小王子';
obj[a]='小王子';
console.log(obj);
{ name: '王子', 'little name': '小王子' }

在这里插入图片描述

ES6 判断两个值是否相等

一些特殊值使用

===

== 

进行比较的结果,可能不满足你的需求,这是你可以使用

Object.is(第一个值,第二个值)

来进行判断,可能你就开心的笑了

console.log(NaN==NaN);
console.log(+0==-0);
console.log(Object.is(NaN,NaN));
console.log(Object.is(+0,-0));
false
true
true
false

在这里插入图片描述

ES6 复制对象

使用

Object.assign()

可以把一个对象复制到另一个对象,使用如下:

let obj ={};
Object.assign(// 源
    obj,// 复制目标对象{a:'☃️'});
console.log(obj);
{ a: '☃️' }

在这里插入图片描述

ES6 设置对象的 prototype

使用es6可以设置对象的 prototype,使用如下:

let obj1 ={get(){return1;}}let obj2 ={a:10,get(){return2;}}let test = Object.create(obj1);
console.log(test.get());
console.log(Object.getPrototypeOf(test)=== obj1);
Object.setPrototypeOf(test, obj2);
console.log(test.get());
console.log(Object.getPrototypeOf(test)=== obj2);
1
true
2
true

在这里插入图片描述

ES6 proto

let obj1 ={get(){return1;}}let obj2 ={a:10,get(){return2;}}let test ={__proto__: obj1
}
console.log(test.get());
console.log(Object.getPrototypeOf(test)=== obj1);
test.__proto__ = obj2;
console.log(test.get());
console.log(Object.getPrototypeOf(test)=== obj2);
1
true
2
true

在这里插入图片描述

ES6 super

let obj1 ={get(){return1;}}let test ={__proto__: obj1,get(){returnsuper.get()+' ☃️';}}
console.log(test.get());
1 ☃️

在这里插入图片描述

ES6 生成迭代器

在学习前,先首写一个迭代器

functiondie(arr){let i =0;return{next(){let done =(i >= arr.length);let value =!done ? arr[i++]:undefined;return{value: value,done: done
            }}}}let arr =['☃️','🤣','🌈'];let dieArr =die(arr);
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
console.log(dieArr.next());
{ value: '☃️', done: false }
{ value: '🤣', done: false }
{ value: '🌈', done: false }
{ value: undefined, done: true }

OK,看看简化的生成器

function*die(arr){for(let i =0; i < arr.length; i++){yield arr[i];}}let test =die(['🌈','☃️']);
console.log(test.next());
console.log(test.next());
console.log(test.next());
{ value: '🌈', done: false }
{ value: '☃️', done: false }
{ value: undefined, done: true }

在这里插入图片描述

ES6 类

使用es6可以快速方便的构建类,好耶

classstu{constructor(name){this.name = name;}say(){returnthis.name +'说奥里给';}}let xiaoming =newstu("小明");
console.log(xiaoming.say());
小明说奥里给

在这里插入图片描述

ES6 get set

定义get/set方法,用于获取或者修改类的属性

classstu{constructor(name){this.name = name;}get(){returnthis.name;}set(newStr){this.name = newStr;}}let xiaoming =newstu("小明");
console.log(xiaoming.get());
xiaoming.set("大明")
console.log(xiaoming.get());
小明
大明

在这里插入图片描述

ES6 static

使用static关键字修饰的方法,不用实例化对象也可以直接使用

classstu{staticsay(str){
        console.log(str);}}
stu.say("奥里给 静态方法");
奥里给 静态方法

在这里插入图片描述

ES6 extends

使用继承,可以减少代码冗余,比如:

classPerson{constructor(name, bir){this.name = name;this.bir = bir;}showInfo(){return'姓名:'+this.name +'生日:'+this.bir;}}classAextendsPerson{constructor(name, bir){super(name, bir);}}let zhouql =newA("周棋洛","2002-06-01");// 周棋洛本身是没有showInfo方法的,是继承自Person的
console.log(zhouql.showInfo());
姓名:周棋洛生日:2002-06-01

在这里插入图片描述

ES6 Set

Set 集合,与数组不同,Set 集合中不允许有重复元素

// 创建Set集合let food =newSet('🍎🥪');// 重复添加,只有一个能进去
food.add('🍉');
food.add('🍉');

console.log(food);// 当前集合大小
console.log(food.size);// 判断集合中是否存在某一元素
console.log(food.has('🍉'));// 删除集合中某一元素
food.delete('🥪');
console.log(food);// 循环遍历集合
food.forEach(f=>{
    console.log(f);});// 清空集合
food.clear();
console.log(food);
Set(3) { '🍎', '🥪', '🍉' }
3
true
Set(2) { '🍎', '🍉' }
🍎
🍉
Set(0) {}

在这里插入图片描述

ES6 Map

Map结合存储键值对

let food =newMap();let a ={},b=function(){}, c ="name";

food.set(a,'🍉');
food.set(b,'🥪');
food.set(b,'🥪');
food.set(c,'米饭');

console.log(food);
console.log(food.size);
console.log(food.get(a));
food.delete(c);
console.log(food);
console.log(food.has(a));

food.forEach((v, k)=>{
    console.log(`${k} + ${v}`);});
food.clear();
console.log(food);
Map(3) { {} => '🍉', [Function: b] => '🥪', 'name' => '米饭' }
3
🍉
Map(2) { {} => '🍉', [Function: b] => '🥪' }
true
[object Object] + 🍉
function () { } + 🥪
Map(0) {}

在这里插入图片描述

ES6 模块化

使用模块化开发,es6可以方便的导入和导出一些内容,还有默认导出等等细节

let a ='🍉';letf1=function(str ='你丫的写参数'){
    console.log(str);}export{ a, f1 };
import{a, f1}from'./27模块测试.js';
console.log(a);f1();f1('知道了');

在这里插入图片描述

恭喜你,读完了本篇文章,能力 + 100 ,颜值 + 10,欢迎下次再来。👋 先别走,如果觉得文章写的不错,还请点赞,收藏,关注帅气的博主啊,手动狗头,我会继续努力,原创不易,你的支持就是小周的动力 ☃️

标签: javascript es6 前端

本文转载自: https://blog.csdn.net/m0_53321320/article/details/125251036
版权归原作者 王子周棋洛 所有, 如有侵权,请联系我们删除。

“20分钟上手ES6,不会ES6好意思说自己会JS ?”的评论:

还没有评论