20分钟上手ES6,不会ES6好意思说自己会JS ?
Posted 王 子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了20分钟上手ES6,不会ES6好意思说自己会JS ?相关的知识,希望对你有一定的参考价值。
✍🏼作者:周棋洛,大二计算机学生
♉星座:金牛座
🏠主页:点击查看更多
🌐关键:ES6
javascript
前端
文章目录
- 理解ES6
- ES6 块级作用域 let
- ES6 解构数组
- ES6 解构对象
- ES6 模板字符串
- ES6 判断字符串里是否包含其他字符串
- ES6 默认参数
- ES6 展开操作符
- ES6 剩余操作符
- ES6 函数名字
- ES6 箭头函数
- ES6 对象表达式
- ES6 恒量
- ES6 对象属性名
- ES6 判断两个值是否相等
- ES6 复制对象
- ES6 设置对象的 prototype
- ES6 __proto__
- ES6 super
- ES6 生成迭代器
- ES6 类
- ES6 get set
- ES6 static
- ES6 extends
- ES6 Set
- ES6 Map
- ES6 模块化
理解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 数组,使用了解构数组
后,直接定义一个数组变量,然后将函数返回值指向该变量,他会自动把第一项的值赋值给第一个数组变量,第二项赋值给第二个数组变量,以此类推,最后打印三个变量,看到没有问题
function breakfast()
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 ,可以看到没问题
function breakfast()
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里,可以使用默认参数,当调用函数时,没有给参数进行赋值时,就使用设置的默认参数执行,当给参数赋值时,就会使用新赋的值执行,覆盖默认值,使用如下:
function say(str)
console.log(str);
function say1(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 剩余操作符
...
操作符用在函数参数上,接收一个参数数组,使用如下:
function f1(a, b, ...c)
console.log(a, b, c);
console.log(a, b, ...c);
f1('🍎','🌈','☃️','㊙️');
🍎 🌈 [ '☃️', '㊙️' ]
🍎 🌈 ☃️ ㊙️
ES6 函数名字
使用 .name
可以获取函数的名字,具体使用如下:
function f1()
console.log(f1.name);
let f2 = function () ;
console.log(f2.name);
let f3 = function f4() ;
console.log(f3.name);
f1
f2
f4
ES6 箭头函数
使用箭头函数可以让代码更简洁,但是也要注意箭头函数的局限性,以及箭头函数中自身没有 this,this指向父级
let f1 = a => a;
let f2 = (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()
return 1;
let obj2 =
a: 10,
get()
return 2;
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()
return 1;
let obj2 =
a: 10,
get()
return 2;
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()
return 1;
let test =
__proto__: obj1,
get()
return super.get() + ' ☃️';
console.log(test.get());
1 ☃️
ES6 生成迭代器
在学习前,先首写一个迭代器
function die(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可以快速方便的构建类,好耶
class stu
constructor(name)
this.name = name;
say()
return this.name + '说奥里给';
let xiaoming = new stu("小明");
console.log(xiaoming.say());
小明说奥里给
ES6 get set
定义get/set方法,用于获取或者修改类的属性
class stu
constructor(name)
this.name = name;
get()
return this.name;
set(newStr)
this.name = newStr;
let xiaoming = new stu("小明");
console.log(xiaoming.get());
xiaoming.set("大明")
console.log(xiaoming.get());
小明
大明
ES6 static
使用static关键字修饰的方法,不用实例化对象也可以直接使用
class stu
static say(str)
console.log(str);
stu.say("奥里给 静态方法");
奥里给 静态方法
ES6 extends
使用继承,可以减少代码冗余,比如:
class Person
constructor(name, bir)
this.name = name;
this.bir = bir;
showInfo()
return '姓名:' + this.name + '生日:' + this.bir;
class A extends Person
constructor(name, bir)
super(name, bir);
let zhouql = new A("周棋洛", "2002-06-01");
// 周棋洛本身是没有showInfo方法的,是继承自Person的
console.log(zhouql.showInfo());
姓名:周棋洛生日:2002-06-01
ES6 Set
Set 集合,与数组不同,Set 集合中不允许有重复元素
// 创建Set集合
let food = new Set('🍎🥪');
// 重复添加,只有一个能进去
food.add('🍉');
food.add('🍉');
console.log(food);
// 当前集合大小
console.log(food.size);
// 判断集合中是否存在某一元素<以上是关于20分钟上手ES6,不会ES6好意思说自己会JS ?的主要内容,如果未能解决你的问题,请参考以下文章