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

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

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

文章目录

; 理解ES6

ECMAScript ,是由网景公司制定的一种 脚本语言的标准化规范;最初命名为 Mocha ,后来改名为 LiveScript ,最后重命名为 JavaScript
ECMAScript 2015(ES2015),第 6 版,最早被称作 ECMAScript 6( ES6),添加了新的特性

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

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

ES6 块级作用域 let

首先,什么是作用域?作用域简单讲就是声明一个变量,这个变量的有效范围,在 let 没来之前。js 只有 var全局作用域函数作用域ES6 为 js 带来了 块级作用域

20分钟上手ES6,不会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 没有定义

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

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);
🍉 🍔 🍕
🍉 🍔 🍕

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

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);
🍉 🍕 🍔

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

ES6 模板字符串

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

使用 ES6 提供的模板字符串,首先使用 把字符串包起来,当要使用变量时 ,使用</code>${变量}

let a = '🍉',
    b = '🖼️';

let c = '今天吃' + a + '吃完看' + b;
console.log(c);

let d = 今天吃 ${a} 吃完看 ${b};
console.log(d);
&#x4ECA;&#x5929;&#x5403;&#x1F349;&#x5403;&#x5B8C;&#x770B;&#x1F5BC;&#xFE0F;
&#x4ECA;&#x5929;&#x5403; &#x1F349; &#x5403;&#x5B8C;&#x770B; &#x1F5BC;&#xFE0F;

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

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

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

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

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

ES6 默认参数

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

function say(str) {
    console.log(str);
}
function say1(str = '嘿嘿') {
    console.log(str);
}
say();
say1();
say1('❤️');
undefined
&#x563F;&#x563F;
&#x2764;&#xFE0F;

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

ES6 展开操作符

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

let arr = ['❤️', '😊', '😍'];
console.log(arr);
console.log(...arr);
let brr = ['王子', ...arr];
console.log(brr);
console.log(...brr);
[ '&#x2764;&#xFE0F;', '&#x1F60A;', '&#x1F60D;' ]
&#x2764;&#xFE0F; &#x1F60A; &#x1F60D;
[ '&#x738B;&#x5B50;', '&#x2764;&#xFE0F;', '&#x1F60A;', '&#x1F60D;' ]
&#x738B;&#x5B50; &#x2764;&#xFE0F; &#x1F60A; &#x1F60D;

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

ES6 剩余操作符

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

function f1(a, b, ...c) {
    console.log(a, b, c);
    console.log(a, b, ...c);
}
f1('🍎','🌈','☃️','㊙️');
&#x1F34E; &#x1F308; [ '&#x2603;&#xFE0F;', '&#x3299;&#xFE0F;' ]
&#x1F34E; &#x1F308; &#x2603;&#xFE0F; &#x3299;&#xFE0F;

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

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

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

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

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

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: '&#x3299;&#xFE0F;', b: '&#x2603;&#xFE0F;', say: [Function: say] }
{ a: '&#x3299;&#xFE0F;', b: '&#x2603;&#xFE0F;', say: [Function: say] }

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

ES6 恒量

使用 const 关键字定义衡量, const 限制的是给衡量分配值的动作,并不限制衡量中的值,使用如下:

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

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

&#x2603;&#xFE0F; &#x1F308;
&#x2603;&#xFE0F; &#x1F308; &#x1F923;
app = 10;
    ^
TypeError: Assignment to constant variable.

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

ES6 对象属性名

使用点定义对象属性时,如果属性名中含有空格字符,是不合法的,语法通不过的,使用 [&#x5C5E;&#x6027;&#x540D;] 可以完美解决,并且不仅可以直接写明属性名,还可以使用变量来指定,具体使用如下:

let obj = {};
let a = 'little name';
obj.name = '王子';

obj[a] = '小王子';
console.log(obj);
{ name: '&#x738B;&#x5B50;', 'little name': '&#x5C0F;&#x738B;&#x5B50;' }

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

ES6 判断两个值是否相等

一些特殊值使用 =====进行比较的结果,可能不满足你的需求,这是你可以使用 Object.is(&#x7B2C;&#x4E00;&#x4E2A;&#x503C;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x503C;) 来进行判断,可能你就开心的笑了

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

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

ES6 复制对象

使用 Object.assign() 可以把一个对象复制到另一个对象,使用如下:

let obj = {};
Object.assign(

    obj,

    { a: '☃️' }
);
console.log(obj);
{ a: '&#x2603;&#xFE0F;' }

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

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

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

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

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

ES6 super

let obj1 = {
    get() {
        return 1;
    }
}
let test = {
    __proto__: obj1,
    get() {
        return super.get() + ' ☃️';
    }
}
console.log(test.get());
1 &#x2603;&#xFE0F;

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

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: '&#x2603;&#xFE0F;', done: false }
{ value: '&#x1F923;', done: false }
{ value: '&#x1F308;', 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: '&#x1F308;', done: false }
{ value: '&#x2603;&#xFE0F;', done: false }
{ value: undefined, done: true }

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

ES6 类

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

class stu {
    constructor(name) {
        this.name = name;
    }
    say() {
        return this.name + '说奥里给';
    }
}
let xiaoming = new stu("小明");
console.log(xiaoming.say());
&#x5C0F;&#x660E;&#x8BF4;&#x5965;&#x91CC;&#x7ED9;

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

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());
&#x5C0F;&#x660E;
&#x5927;&#x660E;

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

ES6 static

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

class stu {
    static say(str) {
        console.log(str);
    }
}
stu.say("奥里给 静态方法");
&#x5965;&#x91CC;&#x7ED9; &#x9759;&#x6001;&#x65B9;&#x6CD5;

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

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");

console.log(zhouql.showInfo());
&#x59D3;&#x540D;&#xFF1A;&#x5468;&#x68CB;&#x6D1B;&#x751F;&#x65E5;&#xFF1A;2002-06-01

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

ES6 Set

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


let food = new Set('🍎🥪');

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) { '&#x1F34E;', '&#x1F96A;', '&#x1F349;' }
3
true
Set(2) { '&#x1F34E;', '&#x1F349;' }
&#x1F34E;
&#x1F349;
Set(0) {}

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

ES6 Map

Map结合存储键值对

let food = new Map();
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) { {} => '&#x1F349;', [Function: b] => '&#x1F96A;', 'name' => '&#x7C73;&#x996D;' }
3
&#x1F349;
Map(2) { {} => '&#x1F349;', [Function: b] => '&#x1F96A;' }
true
[object Object] + &#x1F349;
function () { } + &#x1F96A;
Map(0) {}

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

ES6 模块化

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

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

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

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

Original: https://blog.csdn.net/m0_53321320/article/details/125251036
Author: 王子周棋洛
Title: 20分钟上手ES6,不会ES6好意思说自己会JS ?

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/726229/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球