【JavaScript系列九】—讲述JS学习历程的知识分享！

前言

本篇主要是讲述ES6的新增语法和相关运用

一、ES6

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

泛指2015年6月之后发布的版本

为什么使用ES6

• 语言更加完善

• 功能更加强大

• 变量提升特性增加了程序运行时的不确定性

• 语法过于松散，实现相同的功能不同的人可能会写出不同的代码

二、let和const

let

• 具有块级作用域（一对大括号产生的作用域），var 不具备此特性

• 防止循环变量变成全局变量

• let 声明的变量没有变量提升，必须先声明再使用

• 暂时性死区，就是不能在初始化之前，使用变量 num

var num = 123;
if(true) {
    // num 变量和块级整体进行了绑定
    console.log(num);
    let num = 20;
}

const

常量就是值（内存地址）不能变化的量

• 具有块级作用域

• 必须给初始值

• 常量赋值后，基本数据类型的值不能改

• 常量赋值后，复杂数据类型的地址不能改

三、解构赋值

数组解构赋值

从数组中提取值，按照对应位置，对变量进行赋值

对象解构赋值

var {name, age} = {name: 'xx', age: 18};


使用别名
var {name: myName, age: myAge} = {name: 'xx', age: 18};
console.log(myName);

四、箭头函数

基本写法

const fn = () => {};

返回值

// 函数体中只有一句代码，则代码的执行结果就是返回值，可以省略大括号
const fn = (num1, num2) => num1 + num2;
console.log(fn(3, 2));

 箭头函数中的this问题

箭头函数不绑定this，箭头函数中的this，指向的是函数定义位置的上下文this


const obj = {
    name: 'xxx'
};
function fn() {
    console.log(this);
    return () => {
        console.log(this);
    }
}
const resFn = fn.call(obj);
resFn();

五、剩余参数

可以将一个不定数量的参数表示为一个数组

注意箭头函数当中是使用不了arguments的



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

六、扩展运算符

可以将数组或者对象转为用逗号分割的参数序列

• 应用于合并数组

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6]; 
console.log([...arr1, ...arr2]);




let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6]; 
arr1.push(...arr2);
console.log(arr1);

• 将类数组或可遍历对象转化为真数组

var aDivs = document.getElementsByTagName("div");
aDivs = [...aDivs];

七、数组扩展

Array.from

将类数组和可遍历对象转换为真数组

let arrLike = {
    "0": "a",
    "1": "b",
    "2": "c",
    length: 3
};
let arr = Array.from(arrLike);
console.log(arr);



// 第二个参数对每个元素进行遍历，将处理后的值返回到数组
let arr = Array.from(arrLike, item => item+"*");
console.log(arr);

Array.prototype.find

// 找出第一个符合条件的成员，没有就返回undefined
let arr = [{
    id: 1,
    name: 'a'
}, {
    id: 2,
    name: 'b'
}];
let target = arr.find((item, index) => item.id === 2);
console.log(target);

Array.prototype.findIndex

// 找出第一个符合条件成员的位置，没有就返回 -1
let arr = [1, 5, 10, 16];
let index = arr.findIndex((val, index) => val > 9);
console.log(index);// 2

Array.prototype.includes

数组中是否包含某个值，返回布尔值

八、模板字符串

• 模板字符串中可以换行，阅读性好

• 在模板字符串中可以调用函数

const sayHello = function() {
    return '哈哈哈';
};
let greet = `${sayHello()} ~~~`;
console.log(greet);

九、Set数据结构

ES6 提供的新的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值

Set 本身是一个构造函数，用来生成 Set 数据结构

接收一个数组作为参数

去重

const s = new Set([1, 1, 2, 2, 3]);
console.log([...s]); // [1,2,3]

实例方法

const s = new Set();
// 添加
s.add('a').add('b').add('c');
// 删除
s.delete('b');
// 是否有 a 这个值
console.log(s.has('a')); // true
console.log(s.has('b')); // false
// 清除所有值
s.clear();

遍历Set

const s = new Set();
// 添加
s.add('a').add('b').add('c');
s.forEach(val => console.log(val));

十、数组新增方法

forEach

var arr = ['a', 'b', 'c'];

arr.forEach(function(currentValue, index, arr) {
    console.log(currentValue); // a、b、c
});

filter

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

// 返回一个新数组
const result = words.filter(word => word.length > 6);

console.log(result)

map

var array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);

find

// 返回数组中符合条件的第一个元素
let array1 = [5, 12, 8, 130, 44];
let found = array1.find(function (element) {
    return element > 10;
});
console.log(found); // 12

有不明白的或者有其他问题的可以评论区留言噢

私信回复JS思维导图可获取完整知识导图~

今天的知识分享就到这里啦~希望大家在这能学到知识一起分享一起进步，成为更好的自己！