JS高级（含ES6）
目录
1、ES6中的类和对象
2、构造函数和原型
2.1构造函数
2.2原型
2.2.1对象原型__proto__
2.2.2constructor构造函数
2.2.2构造函数、实例、原型对象关系
2.2.3原型链
2.2.4成员查找机制
3、ES5新增方法
3.1forEach 遍历数组
3.2filter 筛选数组
3.3 some 检测数组中是否满足指定条件
3.4字符串方法（trim）
3.5对象方法
4、函数进阶
4.1、定义
4.2、函数的调用
4.3函数this指向
4.3.1改变函数this指向
4.4严格模式
4.4.1什么是严格模式
4.4.2开启严格模式
4.4.3严格模式的变化
4.5高阶函数
4.6闭包
4.7递归
4.8拷贝
5 正则表达式
5.1概述
5.2特点
5.3 使用
5.4特殊字符
5.4.1边界符
5.4.2字符类
5.4.3量词符
5.4.4括号总结
5.5.5预定义类
5.5.6替换
6、ES6
6.1let关键字（声明变量）
6.2const关键字（声明常量）
let、const、var区别
6.3解构赋值
6.3.1数组解构
6.3.2对象解构
6.4箭头函数
6.4.1定义
6.4.2不绑定this关键字
6.5剩余参数
6.6扩展运算符
6.6.1扩展运算符应用
6.6.2构造函数方法Array.form()
6.6.3实例方法方法find()
6.6.4实例方法方法findIndex()
6.6.5实例方法方法includes()
6.7模板字符串
6.8String的扩展方法
6.9Set数据结构
面向对象和面向过程对比
1、ES6中的类和对象
创建类和对象
类中添加方法
eg：
class car {
constructor(uname,age) {
this.uname=uname;
this.age=age;
}
sing(s) {
console.log(s);
}
}
var fa=new car("li",12);
console.log(fa.uname);
fa.sing('a'); 继承（extends）
class father {
constructor(x,y) {
this.x=x;
this.y=y;
}
sum(x,y) {
console.log(this.x+this.y);
}
}
class Son extends father {
constructor(x,y) {
super(x,y);//调用父类的构造函数
}
}
var son=new Son(1,2);
var son1=new Son(11,22);
son.sum();
son1.sum();super关键字
注：
子类继承父级同时扩展自己的方法
class father {
constructor(x,y) {
this.x=x;
this.y=y;
}
sub() {
console.log(this.x+this.y);
}
}
// var s=new father(3,2);
// s.sub();
class son extends father {
constructor(x,y) {
// 利用super调用父类函数
// super必须在子类this之前调用
super(x,y);
this.x=x;
this.y=y;
}
subs() {
console.log(this.x-this.y);
}
}
var sona=new son(4,3);
sona.sub();
sona.subs();注意：1、ES6中没有变量提升，必须先定义类才能实例化对象
2、类中里面的共有的属性和方法一定要加this使用
3、this指向问题（constructor指向的是实例化对象，方法里面的指方法调用者）
2、构造函数和原型
2.1构造函数
eg:
// 1. 利用 new Object() 创建对象
var obj1 = new Object();
// 2. 利用 对象字面量创建对象
var obj2 = {};
// 3. 利用构造函数创建对象
function Star(uname, age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log('我会唱歌');
}
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
console.log(ldh);
ldh.sing();
zxy.sing();静态成员和实例成员
eg：
// 构造函数中的属性和方法我们称为成员, 成员可以添加
function Star(uname, age) {
this.uname = uname;
this.age = age;
this.sing = function() {
console.log('我会唱歌');
}
}
var ldh = new Star('刘德华', 18);
// 1.实例成员就是构造函数内部通过this添加的成员 uname age sing 就是实例成员
// 实例成员只能通过实例化的对象来访问
console.log(ldh.uname);
ldh.sing();
// console.log(Star.uname); // 不可以通过构造函数来访问实例成员
// 2. 静态成员 在构造函数本身上添加的成员 sex 就是静态成员
Star.sex = '男';
// 静态成员只能通过构造函数来访问
console.log(Star.sex);2.2原型
eg：
2.2.1对象原型__proto__
eg:
2.2.2constructor构造函数
eg：
2.2.2构造函数、实例、原型对象关系
2.2.3原型链
2.2.4成员查找机制
3、ES5新增方法
3.1forEach 遍历数组
eg：
3.2filter 筛选数组
eg：
3.3 some 检测数组中是否满足指定条件
eg：
3.4字符串方法（trim）
eg：
3.5对象方法
1、keys
eg：
script>
// 用于获取对象自身所有的属性
var obj = {
id: 1,
pname: '小米',
price: 1999,
num: 2000
};
var arr = Object.keys(obj);
console.log(arr);
arr.forEach(function(value) {
console.log(value);
})
2、defineProperty
eg：
4、函数进阶
4.1、定义
eg：
4.2、函数的调用
4.3函数this指向
eg：
4.3.1改变函数this指向
eg
:
eg:
call、apply、bind总结
4.4严格模式
4.4.1什么是严格模式
4.4.2开启严格模式
4.4.3严格模式的变化
4.5高阶函数
4.6闭包
eg;
4.7递归
eg：
4.8拷贝
浅拷贝
深拷贝
5 正则表达式
5.1概述
5.2特点
5.3 使用
eg：
5.4特殊字符
5.4.1边界符
5.4.2字符类
5.4.3量词符
eg：
5.4.4括号总结
5.5.5预定义类
5.5.6替换
6、ES6
6.1let关键字（声明变量）
6.2const关键字（声明常量）
注：对应的内存地址不能更改
let、const、var区别
6.3解构赋值
6.3.1数组解构
eg：
6.3.2对象解构
第一种：
第二种：
eg：
6.4箭头函数
6.4.1定义
6.4.2不绑定this关键字
头函数不绑定this 箭头函数没有自己的this关键字 如果在箭头函数中使用this this关键字将指向箭头函数定义位置中的this
function fn () {
console.log(this);
return () => {
console.log(this)
}
}
const obj = {name: 'zhangsan'};
const resFn = fn.call(obj);
resFn();6.5剩余参数
6.6扩展运算符
6.6.1扩展运算符应用
1合并数组
扩展运算符应用于数组合并
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
// ...ary1 // 1, 2, 3
// ...ary1 // 4, 5, 6
let ary3 = [...ary1, ...ary2];
console.log(ary3)
合并数组的第二种方法
let ary1 = [1, 2, 3];
let ary2 = [4, 5, 6];
ary1.push(...ary2);
console.log(ary1)2.将类数组或可遍历对象转换为真正得到数组
eg：
// 利用扩展运算符将伪数组转换为真正的数组
var oDivs = document.getElementsByTagName('div');
console.log(oDivs)
var ary = [...oDivs];
ary.push('a');
console.log(ary);6.6.2构造函数方法Array.form()
1.将类数组或可遍历对象转换为真正得到数组
2.接受第二个参数，作为类似数组map方法，用于对每个元素处理后放入返回数组
6.6.3实例方法方法find()
6.6.4实例方法方法findIndex()
6.6.5实例方法方法includes()
6.7模板字符串
//模板字符串（ES6）的使用
//语法：var str = `es6的字符串`； 反单引号表示
//用${}在字符串中嵌入变量表达式，
var username = "张三";
var str1 = `我的名字是${username}`;
var str2 = `1+1的结果是${1+1}`;
document.write(str1); //输出结果为我的名字是username
document.write(str2); //输出结果为1+1的结果为26.8String的扩展方法
1、startsWith（）和endsWith（）
2、repeat（）
6.9Set数据结构
const s1 = new Set();
console.log(s1.size)//0
const s2 = new Set(["a", "b"]);
console.log(s2.size)//2
// 去重
const s3 = new Set(["a","a","b","b"]);
console.log(s3.size)//2
const ary = [...s3];
console.log(ary)//含a，b的数组Set数据结构方法
eg：
const s4 = new Set();
// 向set结构中添加值 使用add方法
s4.add('a').add('b');
console.log(s4.size)
// 从set结构中删除值 用到的方法是delete
const r1 = s4.delete('c');
console.log(s4.size)
console.log(r1);
// 判断某一个值是否是set数据结构中的成员 使用has
const r2 = s4.has('d');
console.log(r2)
// 清空set数据结构中的值 使用clear方法
s4.clear();
console.log(s4.size);
// 遍历set数据结构 从中取值
const s5 = new Set(['a', 'b', 'c']);
s5.forEach(value => {
console.log(value)
})