专栏首页前端技术总结小结ES6基本知识点(一)
原创

小结ES6基本知识点(一)

0,本文适合人群和主要内容

ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门

老司机可以直接绕路。

主要内容

  • let、const命令
  • 解构赋值
  • 箭头函数
  • 字符串的一些扩展
  • 数组方法:map、filter、reduce
  • Module
  • Class
  • Set和Map
  • Promise
  • async和await

1.let、const

(1)let所声明的变量,只在使用let所在的代码块内有效,在代码块外调用let声明的变量则会报错

验证:

{
                var a = { name: "peter" }
                let b = { name: "lily" }
                console.log('inner a', a)//{name:"peter"}
                console.log('inner b', b)//{name:"lily"}
            }
            console.log('a', a)//a{name:"peter"}
            console.log('b', b)//Uncaught ReferenceError: b is not defined

(2)不存在变量提升,使用let命令声明的变量,只能在声明后使用,语法上称为“暂时性死区”

(3)var、let、const

定义变量

是否可以重复定义变量

是否可以修改变量

var

let

const

验证:

重复定义:

var a = 1;
var a = 2;
console.log('a',a)//a,2

let b = 1;
let b = 2;
console.log('b',b)//Uncaught SyntaxError: Identifier 'b' has already been declared

const c = 1;
const c= 2;
console.log('c',c)//Uncaught SyntaxError: Identifier 'c' has already been declared

修改变量:

var a = 1;
a = 2;
console.log('a',a)//a,2

let b = 1;
b = 2;
console.log('b',b)//b,2

const c = 1;
c= 2;
console.log('c',c)//Uncaught TypeError: Assignment to constant variable.

(4)ES65声明变量有两种方法:

var 命令和function命令

ES6声明变量有六种方法:

var命令、function命令、let命令、const命令、import命令和class命令

2.解构赋值

在ES6入门中分别介绍了:数组、对象、字符串、数值和布尔值、函数的参数的解构赋值。

先看个数组和对象的解构赋值:

数组:

let [a,b,c] = [1,2,3]
console.log(a,b,c)// [1,2,3]

对象:

let {a,b,c} = {a:1,b:2,c:3}
console.log(a,b,c) // 1,2,3

要点:

  • 等号两边结构一致
  • 定义和赋值同时完成

若等号两边结构不一致,则会报错,例如:

let [{a,b,c},d] = {a:1,b:2,c:3,d:4}
console.log(a,b,c,d) // Uncaught TypeError: {(intermediate value)(intermediate value)(intermediate value)(intermediate value)} is not iterable

若不是定义和解构同时完成,则会报错在解构声明中缺少初始化:

let [a,b,c]
[a,b,c] = [1,2,3]
console.log(a,b,c)// Uncaught SyntaxError: Missing initializer in destructuring declaration

3.箭头函数

3.1 写法

箭头函数是ES6中定义函数的新形式,以前是这样的:

function name(arg1, arg2) {
...
}

ES6的形式:

(arg1,arg2)=>{
...
}

而且还有一些简化的写法:

(1)如果只有一个参数,则()可省略:

arg1 => {
...
}

(2)如果函数体只有一句,则{}可省略:

(arg1, arg2) => 表达式

例如:

let add_salary = (salary) => { return salary + 2000};
console.log(add_salary(1000)) // 3000

上述即是只有一个参数,所以可以省略()。另外函数体也只有一句表达式,{}和return都可以省略,简化写法:

let add_salary = salary => salary + 2000;
console.log(add_salary(1000)) // 3000

3.2箭头函数的优点

(1)写起来更简洁

(2)会改变this

普通函数中[1]:

(1)谁调用this就指向谁

(2)在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指向 window

(3)在严格模式下,没有直接调用者的函数中的this是 undefined

(4)使用call,apply,bind绑定的,this指向绑定的对象

验证(1):

谁调用this就指向谁

        var obj = {
                say: function () {
                    console.log('this in js', this) // obj
                }
            }
            obj.say();

验证(2):

在默认情况(非严格模式下),没找到直接调用者,则this指向 window

            var obj = {
                say: function () {
                    setTimeout(function () {
                        console.log('this in js', this) // window
                    })
                }
            }
            obj.say();

验证(3):

在严格模式下,没有直接调用者的函数中的this是 undefined

            function test() {
                'use strict';
                console.log(this); //非严格模式下是window,严格模式下是undefined
            }
            test();

验证(4):

使用call绑定的,this指向绑定的对象

            function test() {
                console.log('this', this)
                var arr = [1, 2, 3]
                arr.map(function (item) {
                    console.log('this in js', this)
                })
            }
            test.call({ a: 4 })

结果:

箭头函数中:

this所在函数定义在哪个对象下,this就指向谁。注意this就指向定义时所作的对象,而不是使用时所在对象。

function test() {
    console.log('this', this)
    var arr = [1, 2, 3]
    arr.map(item => console.log('this in es6', this))
}
test.call({ a: 4 })

结果:

这块具体内容建议看下ES6入门,写得很清楚。

4.字符串的一些扩展

4.1 获取开头结尾包含的方法

let s = 'Hello world!';
if(s.startsWith('Hello')){
    console.log("s.startsWith('Hello')")
}
if(s.endsWith('d!')){
    console.log("s.endsWith('!')")
}
if(s.includes('o')){
    console.log("s.includes('o')")
}

4.2 模板字符串(常用)

用``,可以当普通字符串使用,也可以在字符串中嵌入变量

let [name,age] = ["Peter",10];
console.log(`my name is ${name},I'm ${age} old.`) //my name is Peter,I'm 10 old.

5.数组方法

5.1扩展运算符(...)

扩展运算符三个点(...)是将一个数组转为用逗号分隔的参数序列。

(1)可以用来复制数组

// ES5
let arr1 = [1,2,3];
let arr2 = arr1.concat();
arr2[0] = 4;
console.log('arr1',arr1) // arr1 [1,2,3]
console.log('arr2',arr2) // arr2 [4,2,3] 

ES6可以直接arr2 = [...arr1];来复制数组

// ES6
let arr1 = [1,2,3];
let arr2 = [...arr1];
arr2[0] = 4;
console.log('arr1',arr1) // arr1 [1,2,3]
console.log('arr2',arr2) // arr2 [4,2,3] 

(2)可以用来合并数组

ES5的写法:

arr1.concat(arr2);

ES6的写法:

let arr3 = [...arr1,...arr2];
//ES5
let arr1 = [1,2,3];
let arr2 = [4,5];
arr1.concat(arr2); // [1,2,3,4,5]
//ES6
let arr3 = [...arr1,...arr2]; //[1,2,3,4,5]

(3)与解构赋值结合来生成数组

这里扩展运算符必须放在参数的最后一位,否则会报错:

验证:

let [a,...args] = [1,2,3,4];
console.log('a',a) // a,1
console.log('args',args) // args,[2,3,4]

不放最后一位则会报错:

let [a,...args,b] = [1,2,3,4];
//报错:Uncaught SyntaxError: Rest element must be last element
console.log('a',a) 
console.log('args',args) 

5.2 forEach、map、filter、reduce

首先说明,forEach、map、filter、reduce都不会改变原数组

(1)forEach的作用:

单纯做遍历,没有返回值。支持三个参数:第一个是遍历的数组元素,第二个是索引,第三个是遍历的当前数组:

验证:

let arr1 = [1, 2, 3, 4];
let sum1 = 0;
let sum2 = arr1.forEach((value,index,array)=>{
    console.log('value',value)
    console.log('index',index)
    console.log('array',array)
    sum1 += value;
})
console.log('arr1',arr1) // arr1 [1, 2, 3, 4]
console.log('sum1',sum1) // sum1,10
console.log('sum2',sum2) // sum2,undefined

可以看出sum2为undefined,说明forEach就是纯粹做遍历的,没有返回值。

(2)map的作用:

遍历原数组,对每个元素处理完再放入新数组

[1,2,3].map(item => item +1); // [2,3,4]
[20,30,40,60].map(item => item > 50)// [false, false, false, true]

(3)filter的作用:

过滤,遍历原数组,将满足条件的元素放入新数组

let arr1 = [1,2,3,4];
let arr2 = arr1.filter(item => item%2 == 0);
console.log('arr1',arr1) // [1,2,3,4]
console.log('arr2',arr2) // [2,4]

(4)reduce的作用:

遍历数组元素,通过回调函数最终输出一个值

let arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sum = arr1.reduce((acc, item) => acc + item)
console.log('sum',sum) // sum,55

6.小结

本文主要是列举了ES6的一些基本知识点,并对应附带了一些验证的demo,下一篇将继续介绍后面的知识点。如有问题,欢迎指正。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小结ES6基本知识点(二)

    ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门。

    前端林子
  • 小结ES6基本知识点(四):数组的扩展

    ES6初学者,通过阅读本文可对ES6知识点有个大体的概念,强烈建议阅读阮一峰大大的ES6入门

    前端林子
  • 这次,我们聊聊ajax的创建过程

    ajax:一种客户端向服务器请求数据的方式,不需要去刷新整个页面; ajax的核心:XMLHttpRequest对象

    前端林子
  • 常用ES6语法

    允许声明在对象字面量时使用简写语法,来初始化属性变量和函数的定义方法,并且允许在对象属性中进行计算操作

    薛定喵君
  • JavaScript正则表达式(Regular Expression):RegExp对象

    第一部分:新建正则表达式 JavaScript中正则表达式是参照Perl 5(一门历史很悠久的语言,现在tiobe编程语言排行依然在10名左右)建立的。 新建正...

    用户1149564
  • CCAI 2017 | 蚂蚁金服人工智能部技术总监李小龙:蚂蚁金服智能金融实践

    用户1737318
  • 走进JavaWeb技术世界2:JSP与Servlet的曾经与现在

    本系列文章将整理到我在GitHub上的《Java面试指南》仓库,更多精彩内容请到我的仓库里查看

    Java技术江湖
  • IntelliJ IDEA神器使用技巧(基于Mac OS X 10.5+)

    位置:菜单->File->Setting->Editor->Live Templates 举例:psvm 敲出 public static void main...

    黄小怪
  • 【重磅】AI 自动研发机器学习系统,DeepMind 让算法学习强化学习(附论文)

    【新智元导读】眼下,人工智能研发的一个大方向是用AI系统来自动化开发AI系统。虽然这一目标尚未实现,但目前的进展让已足够令人人震惊。本文介绍了最新的一些进展,包...

    新智元
  • 9.java web的发展 javaweb是什么 J2EE发展历史 规范 J2EE是什么 发展背景 组件标准 J2EE好处作用 Servlet 含义 本质 发展 java在web中的发展 servl

    javaweb 本质上来说就是使用java 语言来解决企业web应用中一系列技术体系与规范;

    noteless

扫码关注云+社区

领取腾讯云代金券