JS高级-ES6

01-ECMAScript 6.0简介

ECMAScript 6.0，简称ES6，ES6的第一个版本是在2015年6月进行发布，所以我们把它称为《ECMAScript 2015 标准》（简称 ES2015）
JavaScript是ECMAScript的一种实现，也就是说JavaScript是遵循ECMAScript标准的
现在主流浏览器已经可以完美使用ES6

02-let 和 const

概念

ES6新增了let和const来声明变量，来解决以前var声明变量所出现的问题
var存在的问题

var可以重复声明变量
var拥有变量提升
var不支持块级作用域
var不能用于定义常量

重复定义变量

案例演示

let name = '撩课学院';
let name = '撩课';
console.log(name);

注意
let和const都不支持在同一个作用域下重复定义变量

不存在变量提升

案例演示

console.log(name);
let name = '撩课学院';

补充
在使用name变量时需要先定义才能进行使用

块级作用域

概念
1）在用var定义变量的时候，变量是通过闭包进行隔离的
2）现在用了let，不仅仅可以通过闭包隔离，还增加了一些块级作用域隔离if等大括号在ES6中都成为作用于
3）块级作用域是用一组大括号定义一个块，使用 let 定义的变量在大括号的外面是访问不到的，并且let声明的变量不会污染全局作用域

案例演示

{let str = '撩课学院';}
if(true){
	let site = 'like.com';
}
console.log(str);
for (let i = 0; i < 3; i++) {
	setTimeout(function () {
	    console.log(i);
	}, 1000);
}

定义常量

案例演示

const SITE = 'itLike';
SITE = 'BaiDu';

const SITE = {name:'itLike'};
SITE.name = 'likeIt';
console.log(SITE);

在这里插入图片描述

注意
① 不能给常量重新赋值
② 如果是引用空间的话可以进行修改

03-解构赋值

概念

分解一个对象的结构

数组的解构

let arr = ['张三', '李四', '王五'];
/*let p1 = arr[0];
let p2 = arr[1];
let p3 = arr[2];*/
// 等价于
let [p1, p2, p3] = arr;
console.log(p1, p2, p3);

在这里插入图片描述

对象的解构

let { name, site } = { name: '撩课学院', site: 'itLike.com' };
console.log(name, site);

在这里插入图片描述

解构的重命名

let { name: lkName, site: lkSite } = { name: '撩课学院', site: 'itLike.com'};
console.log(lkName, lkSite);

在这里插入图片描述

多层解构

let [
    { name: lkName, site: lkSite },
    { colleges: [one, two, three] },
    pets
] = [
    { name: '撩课学院', site: 'itLike.com'},
    { colleges: ['Web', 'Java', 'Python'] },
    '小撩'
];
console.log(lkName, lkSite, one, pets);

在这里插入图片描述

默认解构

let {name = '撩课学院', site} = {site: 'itLike.com'};
console.log(name, site);
    function ajax(options) {
    var method = options.method || "get";
    var data = options.data || {};
    //.....
}
function ajax({ method = "get", data }) {
    console.log(method, data);
}
ajax({
    method: "post",
    data: { "id": "lk001" }
});

在这里插入图片描述
注意： 当对象中没有此属性值时会采用默认值

省略解构

let [,,college] = ['撩课学院', 'itLike', 'web'];
console.log(college);

在这里插入图片描述

扫描二维码关注公众号，回复： 9620967 查看本文章

解构应用

在一些函数中，用解构的方式接收参数。

function ajax({method = 'get',data,url}){
    this.method =method;
}

04-字符串操作

模板字符串

概念
模板字符串用反引号(数字1左边的那个键)包含，其中的变量用${}括起来

案例演示

let name = '小撩';
let age = 25;
let intro = `我叫${name}，今年${age}岁`;
console.log(intro);

字符串的新方法

startsWith() 判断开头

let url = 'http://www.itlike.com'; 
console.log(url.startsWith('http'));

endsWith() 判断结尾

let url = 'http://www.itlike.com';
console.log(url.endsWith('com'));

includes() 判断是否包含

let url = 'http://www.itlike.com';
console.log(url.includes('itlike'));

repeat() 替换

let xl = '小撩好美';
console.log(xl.repeat(10));

05-函数操作

设置默认参数

function ajax(method = 'get', url, dataType = "file") {
    console.log(url);
    console.log(method);
    console.log(dataType);
}
ajax();

在这里插入图片描述

剩余运算符

let log = function(name,...other){
    console.log(name,other);
};
log('小撩', 24, '女', '漂亮女孩');

在这里插入图片描述

箭头函数

概念介绍
箭头函数简化了函数的的定义方式，一般以 “=>” 操作符左边为输入的参数，而右边则是进行的操作以及返回的值inputs=>output
参数=>函数体
表现形式
```
[1,2,3].forEach(val => console.log(val));
```
输入参数如果多于一个要用()包起来，函数体如果有多条语句需要用{}包起来
注意
① 箭头函数根本没有自己的this，导致内部的this就是外层代码块的this
② 正是因为它没有this，从而避免了this指向的问题，并且箭头函数中没有arguments

案例演示

let school = {
    name:'撩课学院',
    logThis: function(){
       setTimeout(function(){console.log(this);},1000); 
       setTimeout(() => console.log(this),1000);
    }
};
school.logThis();

对象不是作用域

let site = 'itLike';
let obj = {
    site: 'itLike',
    fn: () => {
        console.log(this);
        console.log(this.site);
    }
};
obj.fn();

在这里插入图片描述
注意事项： 这里的this指代的是window，let声明的变量不会放在window上

06-展开运算符

展开数组

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

在这里插入图片描述

展开对象

let obj1 = {name: '小撩'};
let obj2 = {age: 24, phone: '1888888888'};
let result = {...obj1, ...obj2};
console.log(result);
function min() {
 console.log(Math.min(...arguments));
}
min(10, 109, 999);

在这里插入图片描述

07-对象拷贝

浅拷贝

Object.assign
对象展开

深拷贝

JSON.parse&&JSON.stringify
递归拷贝

08-对象

属性简写

如果想在对象里添加跟变量名一样的属性，并且属性的值就是变量表示的值；那么，我们就可以直接在对象里加上这些属性，对象中的函数属性可以进行简写
示例

let name = '小撩';
let sex = '女';
let person = {
    name,
    sex,
    log(){
        console.log(this.name, this.sex);
    }
};
person.log();

在这里插入图片描述

Object.is

对比两个值是否相等
示例

console.log(Object.is({},{})); 
console.log(Object.is(undefined,undefined));

在这里插入图片描述

Object.setPrototypeOf

将一个指定的对象的原型设置为另一个对象或者null
示例

let obj = { name: '小撩' };
let obj2 = {};
Object.setPrototypeOf(obj2, obj);
let obj3 = {
    __proto__: obj
};
console.log(obj2.name);
console.log(obj3.name);

在这里插入图片描述

super

通过super可以调用prototype上的属性或方法
示例

let obj = { name: '小撩' };
let obj2 = {
    __proto__: obj,
    name: '大撩',
    getName() {
        return super.name
    }
};
console.log(obj2.getName());

在这里插入图片描述

09-类

类的定义

在之前定义类是通过构造函数来定义，es6中新增了class关键字
示例

class Person {
   constructor(name) {
       this.name = name;
   }
   logName(){
       return this.name
   }
}
let p = new Person('小撩');
console.log(p.logName());

在这里插入图片描述

静态属性

类上的属性，通过类来调用
示例

class Person {
    constructor(name) {
        this.name = name;
    }
    logName(){
        return this.name
    }
    // 静态属性和方法
    static money = 10000000000;
    static logMoney(){
        console.log(this.money);
    }
}
let p = new Person('小撩');
console.log(p.logName());
console.log(Person.money);
Person.logMoney();

在这里插入图片描述

类的继承

原型链继承
示例

class Person {
        constructor(name) {
            this.name = name;
        }
        logName(){
            console.log(this.name);
        }
        // 静态属性和方法
        static money = 10000000000;
        static logMoney(){
            console.log(this.money);
        }
    }

    class Boy extends Person {
        constructor(name, age) {
            super(name);
            this.age = age
        }
        logMsg() {
            console.log(this.name, this.age);
        }
    }
    let boy = new Boy('特朗普',74);
    boy.logMsg();
    boy.logName();
    console.log(boy.money);

在这里插入图片描述

集合

Set

一个Set是一堆东西的集合，Set有点像数组,，不过跟数组不一样的是：Set里面不能有重复的内容

常用方法：
set.add()	增
set.delete()	删
set.clear()	清空
set.has()	是否有
set.size()	长度

示例

let names = new Set();
names.add('周杰伦');
names.add('周杰伦');//添加重复元素集合的元素个数不会改变
names.add('谢霆锋');
names.forEach(function(name){//循环集合
    console.log(name);
});

console.log(names.size);//集合中元数的个数
console.log(names.has('js'));//判断集合中是否有此元素
names.delete('谢霆锋');//从集合中删除此元素
console.log(names);
console.log(names.size);
console.log(names.has('谢霆锋'));

names.clear();//清空 set
console.log(names.size);

在这里插入图片描述

Map

一个Map类似于一个对象，但相对于对象更加强大，其键可以是多种类型

常用方法：
map.set() 设置
map.get() 取值
map.delete() 删除
map.keys() 取所有的键
map.values() 取所有的值
map.clear() 清空
map.size()	长度

示例

let obj1 = {a: 1}, obj2 = {b: 2};
const  map = new Map([
    ['name', '张三'],
    ['age', 18],
    ['sex', '男'],
    [obj1, '今天天气很好'],
    [obj2, '适合敲代码'],
    [[1,2], 'hhh']
]);
console.log(map);
console.log(map.size);

// set和get
map.set('friends', ['赵六', '力气']).set(['dog'], '小花');
console.log(map);
console.log(map.get('name'));
console.log(map.get(obj1));

// delete
map.delete(obj1);
console.log(map.delete('xxxx'));
console.log(map);

// has
console.log(map.has(obj1));
console.log(map.has(obj2));

// clear
map.clear();
console.log(map);

// keys() values()
console.log(map.keys());
console.log(map.values());

// 遍历
map.forEach(function (value, index) {
    console.log(index + ':' + value);
});
 // 注意事项
map.set({}, '呵呵呵呵呵');
map.set({}, '哈哈哈哈');
console.log(map);
console.log({} === {});

在这里插入图片描述

KaiSarH

发布了270 篇原创文章 · 获赞 123 · 访问量 1万+

私信关注

ES6语法简述

JS高级-ES6

01-ECMAScript 6.0简介

02-let 和 const

概念

重复定义变量

不存在变量提升

块级作用域

定义常量

03-解构赋值

概念

数组的解构

对象的解构

解构的重命名

多层解构

默认解构

省略解构

解构应用

04-字符串操作

模板字符串

字符串的新方法

05-函数操作

设置默认参数

剩余运算符

箭头函数

对象不是作用域

06-展开运算符

展开数组

展开对象

07-对象拷贝

浅拷贝

深拷贝

08-对象

属性简写

Object.is

Object.setPrototypeOf

super

09-类

类的定义

静态属性

类的继承

集合

Set

Map

猜你喜欢