JS高级面向对象(6)-ES6新语法

狄鸠
122 阅读5分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

ES6新语法

1，let关键字

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

  1. 在**{}中用 let 声明的变量具有块级作用域**（只有在{}里面才能访问）

    if(true) {
	let a = 10;
    var b = 20;
}
console.log(b)		// 20
console.log(a)		// 报错！！！,let定义的关键字有块级作用域，只能在{}内才能访问

  2. 防止循环变量变成全局变量

    for (var i = 0; i < 10; i++) {}
console.log(i);		// 能够访问 i，此时i已经是全局变量了

for (let i = 0; i < 10; i++) {}
console.log(i);		// 抱错，不能够访问 i，此时i已经是具有块级作用域了

  3. 没有变量提升，只能先申明在使用

    console.log(x);
let x = 10;			// 报错！！

  4. 暂时性死区

    var a = 10;
if (true) {
    console.log(a);	// 10
    console.log(b);	// 报错，出现暂时性锁区，查找b变量只会在当前作用域查找，且let没有变量提升
    let b = 20;
}
console.log(b)		// 报错，let具有块级作用域，外部不能当文
  • let关键字面试题

    先看一段代码

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

    这段代码做了以下的操作：

    1. 创建一个数组

    2. 利用for循环往数组里添加函数

    3. 最后执行数组里的函数（i的值从上级作用域也就是全局作用域里面找）

    4. 注意 ：在执行函数的时候for循环早就结束了，i的值为2

    在这里插入图片描述

    使用let定义各自i的值的块级作用域

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

    这段代码做了以下的操作：

    1. 创建一个数组
    2. 利用for循环往数组里添加函数，并生成两个块级作用域，在他们作用域内i的值分别为0和1
    3. 最后执行数组里的函数（i的值从上级作用域也就是各自的块级作用域里面找）

    在这里插入图片描述

let能做到这个功能关键的一点就是let会创建块级作用域，i的值是从上层作用域里面找的，var的上层是全局作用域，let的上层是块级作用域

2，const

作用：申明常量，常量就是值（内存地址）不能修改的量

  1. 具有块级作用域

    // 案例1
if (true) {
    const a = 10;		// 具有块级作用域
    console.log(a);		// 10
}
console.log(a);			// 报错

// 案例2
if (true) {
    const a = 10;
    if (true) {
        const a = 20;
        console.log(a);		// 20
    }
    console.log(a);			// 10
}
console.log(a);				// 报错

  2. 申明常量必须赋初始值

    const A;		// 报错

  3. 不能修改变量的内存地址，能修改内存地址里面的值

    const a = 10;
a = 20  // 报错
const b = [1, 2, 3];
b [0] = 220;    // 可以被修改
b = [4, 5, 6]   // 报错

3，对象字面量增强写法

  1. 属性增强写法

    在对象里面直接写键名，JS会自动找对应的变量，把其的值作为 value

    const a = 10;
const b = 20;
const c = 30;

const obj = {
    a: a,
    b: b,
    c: c
}

const object = {
    a,
    b,
    c
}
  2. 方法增强写法
    const obj = {
    sayHi() {
        console.log('你好');
    }
}

3，let丶const丶var区别

  1. var ：作用域为该语句所在的函数内，存变量提升

  2. let ：作用域该语句代码块内，不存变量提升

  3. const ：作用域该语句代码块内，不存变量提升，效率比var高（定义函数等不需要变化的值）

    在这里插入图片描述

4，解构赋值

  1. 数组解构

    let arr = [1, 2, 3];
let [a, b, c] = [1, 2] // []代表结构，可以从等号右边提取值，类似python的a, b, c = [1, 2, 3]
let [a, b, c] = [1, 2] // c为underfined
let [a, b, c] = [1, 2, 3, 4] // 报错
console.log(a);
console.log(b);
console.log(c);

  2. 对象解构

    用法一：

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

    用法二：

    冒号左边只用来匹配对象，冒号右边才是值的匹配

    let obj = {name: 'xyb', age: 20}
let {name: Myname, age: Myage} = obj;    // 如果左右两边匹配，将obj里面name值赋值给Myname
console.log(Myname); // 'xyb'
console.log(Myage); // 20

5，箭头函数

箭头函数是用来简化定义语法的

一，语法使用

  1. 箭头函数基本语法

    const fn = () => {
    console.log(666);
}

fn();

  2. 函数体中只有一句话，且执行结果就是返回值，可以省略大括号

    function sum(x, y) {
    return x + y
}

// 用箭头函数概括
const sum = (x, y) => x + y;

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

    function fn(x) {
	return x + 1
}

// 用箭头函数概括
const fn = x => x + 1;

二，this指向

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

    // 案例1
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
    (() => {
        console.log(this);		// 当前箭头函数在btn的回调函数内，所以this为btn
    })()
})

// 案例2
let obj = {
    name: 'xyb',
    age: 20
};
function fn() {
    console.log(this);
    return () => {
        console.log(this);
    }
}
const newFn = fn.call(obj);  // 改变 fn 利的 this 的指向，箭头函数的this也会改变，他跟随的是他上下文this 的指向
newFn();

// 案例3
var obj = {
    name: 'xyb',
    age: 20,
    say1: () => {
        console.log(this); // obj里面的this是指向window的
    },
    say: function() {
        console.log(this);
    },
    this: this // obj里面的this是指向window的
}
obj.say1() // obj对象是没有作用域的，里面的say方法是被定义在全局作用域下的，所以是window
obj.say2() // obj对象调用的，所以里面的this指向obj
console.log(obj.this);

6，剩余参数

  • 箭头函数里是没有 arguments 的，得使用 ...args
const fn = (...args) => {
    console.log(args);  // args 是一个数组
}
fn(1, 2, 3)

// 案例，参数个数不同，求参数的和
const fn = (...args) => {
    var total = 0;
    args.forEach(item => total += item)
    return total
}
var res = fn(1, 2, 3);
console.log(res);

7，扩展运算符...

  1. 使用扩展运算符 ... 用来解包

    console.log(1, 2, 3);
let arr = [1, 2, 3];
console.log(...arr); // ...arr 的值为 1, 2, 3（控制台没有输出1, 2, 3是因为,被当成参数分隔符了）

  2. 使用扩展运算符 ... 来接收多余参数

    let arr = [1, 2, 3, 4];
var [b, ...a] = arr;
console.log(b); // b = 1
console.log(a); // a = [2, 3, 4]

案例1：用于数组合并

// 方法一：
let arry1 = [1, 2, 3];
let arry2 = [4, 5, 6];
console.log([...arry1, ...arry2]); // [1, 2, 3, 4, 5, 6]

// 方法二：
let arry1 = [1, 2, 3];
let arry2 = [4, 5, 6];
arry1.push(...arry2);		// push一次可以放多个
console.log(arry1);

案例2：伪数组转换正正数组

var divs = document.querySelectorAll('div');
console.log(divs); // NodeList
console.log([...divs]); // Array

8，数组对象扩展方法

  • Array.from

    将伪数组或可遍历对象转换成真正的数组

    var divs = document.querySelectorAll('div');
console.log([...divs]); // 把伪数组转换成真数组
console.log(Array.from(divs)); // 把伪数组转换成真数组
console.log(Array.from(divs, item => item.innerHTML = '666')); // 对每个值进行处理
  • Array.find

    查找数组当中第一个满足条件的值，查找不到则值为 underfined

    var ary = [{
    id: 1,
    name: 'x'
}, {
    id: 2,
    name: 'y'
}, {
    id: 3,
    name: 'z'
}]

var target = ary.find( item => {
    return item.id == 2;    // 返回id == 2 的对象
});
console.log(target);
  • Array.find

    查找第一个复合条件的数组成员的位置，找不到返回 -1

    let arr = [1, 5, 8, 4, 3, 6, 10];
var target = arr.findIndex(item => item > 5);
console.log(target);    // 2
  • Array.includes

    某个值是否出现在数组中，返回布尔值

    let arr = [1, 5, 8, 6, 'a'];
console.log(arr.includes(5)); // true
console.log(arr.includes('b')); // false
console.log(arr.includes('a')); // true

9，模板字符串

  • 模板字符串

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

    使用
    let name = `Mack`
    1. 解析变量
    // 模板字符串可以解析变量
let name = 'xyb';
let age = '20';
let go = `hello my name is ${name} and i am ${age} years old`
console.log(go); // hello my name is xyb and i am 20 years old
    2. 可以换行
    // 模板字符串可以换行
var html = document.querySelector('body');
let result = {
    name: 'xyb',
    age: 20,
    sex: '男'
}

let str = `<div>
<input type="text" value="${result.name}"> <br/>
<input type="text" value="${result.age}"> <br/>
<input type="text" value="${result.sex}"> <br/>
</div>`;
html.insertAdjacentHTML('beforeend', str)

    在这里插入图片描述

    3.可以调用函数
    const fn = () => {
    return '我是fn函数'
}
let html = `我是模板字符串 ${fn()}`;
console.log(html);	// 我是模板字符串 我是fn函数
    4.扩展方法

    1. startsWith() 判断字符串是否和元字符的头部相同，返回布尔值

    2. endsWith() 判断字符串是否和元字符的头部相同，返回布尔值

      let str = 'my name is xyb';
console.log(str.startsWith('my na')); // true
console.log(str.startsWith('mya')); // false
console.log(str.endsWith('xyb')); // true
console.log(str.endsWith('xyb3')); // false

    3. repeat() 将原字符复制n遍，并返回

      let str = 'hello';
console.log(str.repeat(5)); // hellohellohellohellohello

10，集合

  • Set

    同python中的set

    创建
    const s1 = new Set();
console.log(s1.size); // 相当于length

const s2 = new Set([1, 2, 5, 6, 4, 1, 1, 1, 1]);
console.log(s2.size); 		 // 数组去除重复
console.log(s2); 			// Set(5) {1, 2, 5, 6, 4}
console.log([...s2]); 		 // 去重之后的数组
    API

    1. add(v) 添加某个值，返回 Set 结构本身

    2. delete(v) 删除某个值，返回 布尔值，表示删除是否成功

    3. has(v) 返回布尔值，成员函数

    4. clear() 清除所有成员，没有返回值

      const s = new Set();
s.add(1).add(2).add(3) // 向set中添加值
console.log(s);
console.log(s.delete(1)); // 向set中添加值
console.log(s.has(2)); // 向set中添加值
s.clear() // 向set中添加值
console.log(s);
    遍历数组
    // Set 结构和数组一样，也有forEach方法，用于每个成员执行某种操作
const s = new Set([1, 2, 3, 4, 5, 6]);
s.forEach(item => {
    console.log(item);
})
avatar
文章
阅读
粉丝