劳动节，简单总结下ES6基础知识

ES6

ES全称是ECMAScript，它是由ECMA国际标准化组织制定的一项脚本语言的规范化标准

年份 版本
2015年6月 ES2015
2016年6月 ES2016
2017年6月 ES2017
2018年6月 ES2018
... ...

ES6其实是一个泛指，泛指ES2015及后续的版本

为什么使用ES6？

每一次标准的诞生都意味着语言的完善，功能的加强，JavaScript语言本身也有一些令人不满意的地方

  • 变量提升特性增加了程序运行时的不可预测性
  • 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

let

ES6中新增的用于声明变量的关键字

  • 使用let声明的变量具有块级作用域(一对{}产生的作用域)
    • 使用let声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性
if(true) {
    let a = 0;
}
console.log(a); // 报错：a is not defined

/* 防止循环变量成为全局变量 */
for(var i = 0; i < 10; i++) {}
console.log(i); // 10

for(let j = 0; j < 10; j++) {}
console.log(j); // 报错：j is not defined
  • 使用let声明的变量不存在变量提升
    • 只能先声明再使用
console.log(a); // 报错：a is not defined
let a = 100;
  • 使用let声明的变量具有暂时性死区特性
var tmp = 123;
if(true) {
    console.log(tmp); // 报错：tmp is not defined
    let tmp = 20;
}

====================
经典面试题

var arr = [];
for(var i = 0; i < 2; i++) {
    arr[i] = function () {
        console.log(i);
    }
}
arr[0]();
arr[1]();
// 此题关键点在于变量i是全局的，函数执行时输出的都是全局作用域下i的值

let arr = [];
for(let i = 0; i < 2; i++) {
    arr[i] = function () {
        console.log(i);
    }
}
arr[0]();
arr[1]();
// 此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级(循环产生的块级作用域)作用域下i的值

const

作用：声明常量，常量就是值(内存地址)不能变的量

  • 使用const声明常量具有块级作用域
if (true) {
    const a = 10;
    if (true) {
        const a = 20;
        console.log(a); // 20
    }
    console.log(a); // 10
}
console.log(a); // a is not defined
  • 使用const声明常量必须赋值(声明常量时必须赋初始值)
const a; // Missing initializer in const declaration
  • 使用const声明常量，常量赋值后，值不能被修改
    • 如果值是基本数据类型，是不可更改的
    • 如果值是引用数据类型，虽然不能重新赋值，但可以更改数据结构内部的值
const a = 100;
a = 200; // Assignment to constant variable

const ary = [100,200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']
ary = ['a', 'b']; // Assignment to constant variable

let、const、var的区别

  1. 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
  2. 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
  3. 使用const声明的是常量，在后面出现的代码中不能再修改该常量的值
var let const
函数级作用域 块级作用域 块级作用域
变量提升 不存在变量提升 不存在变量提升
值可更改 值可更改 值不可更改

解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构

数组解构

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

数组解构允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量，如果解构不成功，变量的值为undefined

let [foo] = [0]; // foo => undefined
let [bae, foo] = [1]; // bae => 1   foo => undefined

对象解构

let person = { name:'张三', age:20 };
let { name, age } = person;
console.log(name); // '张三'
console.log(age); // 20

对象解构允许我们使用变量的名字匹配对象的属性，匹配成功将对象属性的值赋值给变量

let person = { name:'张三', age:20 };
let { name: myName, age: myAge} = person; // myName myAge 属于别名
console.log(myName); // '张三'
console.log(myAge); // 20

箭头函数

ES6种新增的定义函数的方式（箭头函数是用来简化函数定义语法的）

() => {}
const fn = () => {}
  • 在箭头函数中，如果只有一句代码，且代码的执行结果就是返回值，可以省略大括号
// 传统函数定义方式
function sum(x, y) {
    return x + y;
}
const result = sum(10, 20);
console.log(result); // 30

// 箭头函数定义方式
const sum1 = () => x + y;
const result1 = sum1(10, 20);
console.log(result1); // 30
  • 在箭头函数中，如果形参只有一个，可以省略小括号
// 传统函数定义方式
function fn(x) {
    return x;
}

// 箭头函数定义方式
const fn1 = v => v;
  • 箭头函数不绑定this关键字（箭头函数没有自己的this）,箭头函数中的this指向的是函数定义位置的上下文的this 
const obj = {name: '张三' };
function fn() {
    console.log(this);
    return () => {
        console.log(this);
    }
}
const resFn = fn.call(obj);
resFn();

var age = 30;
var obj = {
    age: 20,
    say: () => {
        alert(this.age); // 30  对象是不能产生作用域的，这里的this指向window
    }
}
obj.say();

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

function sum(first, ...args) {
    console.log(first); // 10
    console.log(args); // [20, 30]
}
sum(10, 20, 30);

const sum = (...args) => {
    let total = 0;
    args.forEach(item => total += item);
    return total;
}
console.log(sum(10, 20)); // 30
console.log(sum(10, 20,30)); // 60
  • 剩余参数和解构赋值配合使用
let students = ['张三', '赵四', '王五'];
let [s1, ...s2] = students;
console.log(s1); // '张三'
console.log(s2); // ['赵四', '王五']

扩展运算符(展开语法)

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

let ary = [1, 2, 3];
// ...ary //=> 1, 2, 3
console.log(...ary); // 1 2 3
console.log(1, 2, 3); // 1 2 3

扩展运算符的应用：扩展运算符可以应用于合并数组

let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
// 方法一
let ary3 = [...ary1, ...ary2];
console.log(ary3); // [1, 2, 3, 3, 4, 5, 6]

// 方法二
ary1.push(...ary2);
console.log(ary1);

扩展运算符的应用：将类数组或者可遍历的对象转换为真正的数组

let divs = document.getElementsByTagName('div');
console.log(divs);
let ary = [...divs];
console.log(ary);

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
let arr = Array.from(arrayLink); // ['a', 'b', 'c']
// ====================================
// Array.from方法还可以接收第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
let arrayLike = {
    '0': 'a',
    '1': 'b',
    length: 2
};
let arr = Array.from(arrayLink, item => item * 2);

ES6内置对象扩展(数组的扩展方法)

  • find()方法
    • 用于找出第一个符合条件的数组成员，如果没有找到返回undefined 
let ary = [{
    id: 1,
    name: '张三'
},{
    id: 2,
    name: '李四'
}];
let target = ary.find((item,index)=>(item.id == 2));
console.log(target);
  • findIndex()方法
    • 用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1
let ary = [1, 5, 10, 15];
let index = ary.findIndex((value, index) => value > 9);
console.log(index); // 2
  • includes()方法
    • 表示某个数组是否包含给定的值，返回布尔值
[1, 2, 3].includes(2); // true
[1, 3, 5].includes(6); // false

let ary = ['a', 'b', 'c'];
let result = ary.includes('a');
console.log(result); // true
let result = ary.includes('y');
console.log(result);

模板字符串

ES6新增的创建字符串的方式，使用反引号定义

let name = `张三`;
console.log(name);
  • 模板字符串中可以解析变量
let name = '张三';
let sayHello = `hello,my name is ${name}`; // hello,my name is 张三
console.log(sayHello);
  • 模板字符串中可以换行
let result = {
    name: '张三',
    age: 30,
    sex: '男'
}
let html = `<div>
                <span>${result.name}</span>
                <span>${result.age}</span>
                <span>${result.sex}</span>
            </div>`;
console.log(html);
  • 模板字符串中可以调用函数
const sayHello = () => {
    return '呵呵';
};
let greet = `${sayHello()}嘿嘿`;
console.log(greet); // 呵呵嘿嘿

ES6内置对象扩展(String的扩展方法)

  • starsWith(): 判断字符串是否以某字符串开头，返回布尔值
  • endsWith(): 判断字符串是否以某字符串结尾，返回布尔值
let str = `hello world!`;
str.starsWith('hello'); // true
str.endsWith('!'); // true
  • repeat()方法
    • repeat()方法接收一个数字作为参数，表示将原字符串重复n次，返回一个新字符串
'x'.repeat(3); // "xxx"
'hello'.repeat(2); // "hellohello"

数据解构 Set

ES6提供了一种新的数据解构Set,它类似于数组，但是成员的值都是唯一的，没有重复的值

  • Set本身是一个构造函数，用来生成Set数据结构
const s = new Set();

// Set函数可以接收一个数组作为参数，用来初始化
const set = new Set([1, 2, 3, 'a', 5, 9]);
console.log(set.size); // => 6

// 数组去重
const se = new Set(['a', 'b', 'b', 'c']);
console.log(se.size); // 3
const ary = [...se];
console.log(ary); // ['a','b','c']

Set数据结构中的方法

  • add(value):添加某个值，返回Set结构本身
  • delete(value):删除某个值，返回一个布尔值，表示删除是否成功
  • has(value):返回一个布尔值，表示该值是否为Set成员
  • clear():清除所有成员，没有返回值
const s = new Set();
s.add(1).add(2).add(3); // 向Set结构中添加值
s.delete(2); // 删除Set结构中的2值 返回布尔值，表示是否删除成功
s.has(1); // Set结构中是否有1这个值，有返回true，没有返回false
s.clear(); // 清除Set结构中所有的值 没有返回值

遍历

Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值

s.forEach(value => console.log(value))
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,463评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,868评论 3赞 391
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 161,213评论 0赞 351
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,666评论 1赞 290
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,759评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,725评论 1赞 294
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,716评论 3赞 415
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,484评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,928评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2赞 331
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1赞 345
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,073评论 5赞 340
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,718评论 3赞 324
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2赞 352