记录自己学习的知识和相关资料，方便以后查阅学习，侵权可删！

js进阶相关知识（3）-- ES6 相关知识

ES6 简介

什么是 ES6?

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

ES6 实际上是一个泛指，泛指 ES2015及后续的版本。

let 关键字

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

● 使用 let 关键字声明的变量具有块级作用域

（let 声明的变量只在所处于的块级有效）

注意：在一个大括号中，使用 let 关键字声明的变量才具有块级作用域，使用 var 关键字声明的变量不具备块级作用域特性。（防止循环变量变成全局变量）

● 不存在变量提升

● 暂时性死区

经典面试题（一）

var arr = [];
for (var i = 0; i < 2; i++){
    arr[i] = function(){
        console.log(i);
    }
}
arr[0]();
arr[1]();

//  输出是：
//      2
//      2
//  解析：此题的关键点在于变量i是全局的，函数执行时输出的都是全局作用域下的i值。

经典面试题（二）

let arr = [];
for (var i = 0; i < 2; i++){
    arr[i] = function(){
        console.log(i);
    }
}
arr[0]();
arr[1]();

//  输出是：
//      0
//      1
//  解析：此题的关键点在于每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值。

const 关键字

作用：声明常量，常量就是值（内存地址）不能变化的量。

● 具有块级作用域

● 声明变量时必须赋值

● 常量赋值后，值不能修改

① 基本数据类型：值不能更改

② 复杂数据类型：数据结构内部的值可以更改，数据值本身不能更改。（ary[0] = 123 可行！ ary = [1, 2] 不可行！）

let、const、var 的区别

1 使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升的现象，值可更改。

2 使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升，值可更改。

3 使用const声明的是常量，其作用域为该语句所在的代码块内，在后面出现的代码中不能修改该常量的值，不存在变量提升。

存储的值不需要变化，使用 const 关键字就可以了。（效率高）

解构赋值

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

按照一定模式，从数组中或对象中提取值，将提取出来的值赋值给另外的变量。

数组解构

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

如果解构不成功(变量没有对应的值)，则变量的值为 undefined

对象解构

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

let person = { name:'zhangsan', age:20};
let { name:myName, age:myAge} = person;
console.log(myName);  //  'zhangsan'
console.log(myAge);  //  20

箭头函数

ES6 中新增的定义函数的方式。(简化函数定义语法)

() => {}

const fn = () => {}  //  变量名字就是函数名字

● 函数体只有一句代码，且代码的执行结果就是返回值，就可以省略大括号

const sum = (num1 , num2) => num1 + num2;

● 如果形参只有一个，可以省略小括号

const fn = v => v;

箭头函数中 this 关键字的指向问题

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

箭头函数的面试题

var obj = {
    age:20,
    say:() => {
        alert(this.age)
    }
}

obj.say();  //  输出：undefined

剩余参数

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

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

Array 的扩展方法

扩展运算符（展开语法）

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

let ary = [1, 2, 3];
...ary  //  1, 2, 3
console.log(...ary);  // 1 2 3  (逗号被当做了  console.log的参数分隔符)
console.log(1, 2, 3);  // 1 2 3

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

//  方法一
let ary1 = [1, 2, 3];
let ary2 = [3, 4, 5];
let ary3 = [...ary1, ...ary2];

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

将类数组或可遍历对象转换为真正的数组

let oDivs = document.getElementsByTagName('div');
oDivs = [...oDivs];

构造函数方法：Array.fom()

● 将类数组或可遍历对象转换为真正的数组

let arrayLike = {
    '0':'a',
    '1':'b',
    '2':'c'
    length:3  //  必须有  length
};
let arr2 = Array.from(arrayLike);  //  ['a', 'b', 'c ']

● 方法还可以接受第二个参数，作用类似于数组的 map 方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

let arrayLike = {
    '0':'1',
    '1':'2',
    '2':'3'
    length:3  //  必须有  length
};
let arr2 = Array.from(arrayLike, item => item * 2);
//  [2 4 6]

实例方法：find( )

用于找到第一个符合条件的数组成员，如果没有找到返回 undefined

let ary = [{
    id:1,
    name:'张三'
}，{
    id:2,
     name:'李四'
      }];
let target = ary.find((item, index) => item.id == 2);

实例方法：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, 2, 3].includes(4)  // false

Sting 的扩展方法

模板字符串

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

let name = `zhangsan`

● 模板字符串中可以解析变量。

let name = 'zhangsan'
let sayHello = `hello,my name is ${name}`;  //  hello, my name is zhangsan

● 模板字符串可以换行

let result = {
  name: 'zhangsan',
  age: 20,
  sex: '男'
}

let html = `<div>
  <span>${result.name}</span>
  <span>${result.age}</span>
  <span>${result.sex}</span>
  </div>`;

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

const sayHello = function(){
    return '哈哈哈哈  追不到我  我是谁啊';
};
let greet = `${sayHello()} 哈哈哈哈`;
console.log(greet);  //  哈哈哈哈  追不到我  我是谁啊  哈哈哈哈

实例方法：startWith( ) 和 endsWith( )

● startWith( ) : 表示参数字符串是否在原字符串的头部，返回值是布尔值

● endsWith( ) : 表示参数字符串是否在原字符串的尾部，返回值是布尔值

let str = 'Hello world!';
str.startsWith('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, 4, 4]);

利用 Set 数据结构做数组去重

实例方法

● add(value)：添加某个值，返回 Set 结构本身

● delete(value)：删除某个值，返回一个布尔值，表示删除是否成功

● has(value)：返回一个布尔值，表示该值是否为 Set 的成员

● clear()：清除所有成员，没有返回值

遍历

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

s.forEach(value => console.log(value))

js 进阶相关知识（3）