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({} === {});