es6之前没有extends继承，我们通过构造函数+原型对象模拟实现继承，称为组合继承
call（）
调用这个函数并修改函数运行时的this指向
fun.call(thisArg,arg1.arg2,......)
// thisArg:当前使用函数this的指向对象
// arg1：传递的其他参数
thisArg:当前使用函数this的指向对象
arg1：传递的其他参数
//调用函数
function fn(){
console.log('我是帅哥');
}
fn.call();
//可以改变这个函数的this指向
//此时函数的this就指向了o这个对象
function fn(){
console.log('我是帅哥');
console.log(this)
}
var o={
name:'kyrie'
}
fn.call(o);
借用构造函数继承父类型属性
核心原理：通过call（）把父类型的this指向子类型的this这样可以实现子类型继承父类型的属性
// 父构造函数
function Father(uname, age) {
//this指向父构造函数的对象实例
this.uname = uname;
this.age = age
}
function Son(uname, age) {
//this指向子构造函数的对象实例
Father.call(this)
}
var son=new Son('ky',18)
console.log(son)
借用构造函数继承父类型方法
Son.prototype=new Father()
Son.prototype.constructor=Son;
//利用原想对象实现方法的继承
类的本质
类的本质还是一个函数，我们可以简单的认为类就是构造函数的另外一种写法
- 类有原型对象prototype
- 类原型对象prototype里面有constructor指向类本身
- 类可以通过原型对象添加方法
- 类创建的实例对象有__proto__原型指向 类的原型对象
es6的类就是语法糖
es5中的新增方法
数组方法
遍历方法：forEach（），map（），filter（），some（），every（）；
1.forEach（）
arr.forEach(function(currentValue,index,arr){
}
例子：
var arr=[1,2,3]
arr.forEach(function(currentValue,index,arr）{
console.log('每个数组的元素'+value);
console.log('每个数组的索引号'+index);
console.log('每个数组本身'+arr);
}）
2.filter（）
filter方法用于筛选数组的
-
它直接返回一个新数组
-
currentValue：数组当前项的值
-
index：数组当前索引号
-
arr；数组本身
var arr = [1, 66, 125] var newArr = arr.filter(function(Value, index) { return Value >= 20; }) console.log(newArr)
- some方法
查找数组中是否有满足条件的元素
-
返回布尔值
-
找到第一个满足条件的元素就终止循环不在继续查找
arr.some(function(currentValue,index,arr){} 例子： var arr = [1, 66, 125] var flag = arr.some(function(Value, index) { return Value >= 20; }) console.log(flag) //返回的是布尔值some方法和forEach的区别：
-
forEach里面retuen true不会终止迭代
-
some方法遇到return true就是终止迭代 迭代效率更高
数组方法查找商品案例
1.把数据渲染到页面中
2.根据价格显示数据
3.根据商品名称显示数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
margin-top: 30px;
width: 500px;
height: 300px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
text-align: center;
}
table th {
border-left: 1px solid #000000;
border-top: 1px solid #000000;
}
table td {
border-left: 1px solid #000000;
border-top: 1px solid #000000;
}
</style>
</head>
<body>
<div class="search">
根据价格查询：<input type="text" class="start">-<input type="text" class="end">
<button class="searchprice">搜索</button> 按照商品名称查找：
<input type="text" class="product">
<button class="search-pro">查询</button>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>杜兰特</td>
<td>一亿一</td>
</tr>
<tr>
<td>2</td>
<td>欧文</td>
<td>三亿一</td>
</tr>
<tr>
<td>3</td>
<td>詹姆斯</td>
<td>一百万</td>
</tr>
<tr>
<td>4</td>
<td>威少</td>
<td>三块</td>
</tr> -->
</tbody>
</table>
</body>
<script>
//利用新增数组方法操作数据
var data = [{
id: 1,
pname: '杜兰特',
price: 40000
}, {
id: 2,
pname: '欧文',
price: 50000
}, {
id: 3,
pname: '詹姆斯',
price: 100
}, {
id: 4,
pname: '字母哥',
price: 3
}, {
id: 5,
pname: '蔡徐坤',
price: 1
}, ];
//1.获取相应的元素
var tbody = document.querySelector('tbody')
var searchprice = document.querySelector('.searchprice')
var start = document.querySelector('.start')
var end = document.querySelector('.end')
var product = document.querySelector('.product')
var searchpro = document.querySelector('.search-pro')
setDate(data);
// 2.把数据渲染到页面中
function setDate(mydate) {
//先清空原来的数据
tbody.innerHTML = ''
mydate.forEach(function(value) {
//创建行
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
tbody.appendChild(tr);
})
}
//根据价格查询商品
//当我们点击按钮，就可以根据我们的的商品价格筛选数组里面的对象
searchprice.addEventListener('click', function() {
var newDate = data.filter(function(value) {
return value.price >= start.value && value.price <= end.value;
})
//把筛选完之后的对象渲染到页面当中
setDate(newDate)
})
//根据商品名称查找商品
//查询数组中唯一的元素，用some方法更合适
searchpro.addEventListener('click', function() {
var arr = [];
data.some(function(value) {
if (value.pname === product.value) {
arr.push(value)
return true;
}
})
setDate(arr)
})
</script>
</html>
字符串方法
trim（）方法会从一个字符串的两端删除空白字符
str.trim（）
并不影响原字符本身，他返回的是一个新的字符串
不会去除中间的
Object.defineProperty（）定义新属性或改变原有的属性
Object.defineProperty（obj,prop,descriptor）
obj:必需。目标对象
prop：必需。需要定义或修改的属性的名字
descriptor：必需。目标属性所拥有的特征（以对象形式书写）
-
value：设置属性的值。默认undefined
-
writable：值是否可以重写，true|false默认false
-
enumerable：目标属性是否可以被枚举 ，true|false默认为false
-
configurableL:目标属性是否可以被删除或是否可以修改特征，true|faluse默认为false
对象方法
Object.keys （）用于获取对象自身所有的属性
Object.keys（obj）
效果类似for...in
返回一个有属性名组成的数组
let关键字
let声明的变量具有块级作用域
在一个大括号中使用let关键字声明的变量才具有块级作用域var关键字是不具备这个特点的
防止循环变量变成全局变量
-
不存在变量提升
-
暂时性死区
const关键字
作用：声明常量，常量就是值不能变化的量
- const声明的常量具有块级作用域
- 声明常量时必须赋值
- 常量赋值后，值不能修改
解构赋值
es6中允许从数组中提取值按照对应位置，对变量赋值，对象也可以实现解构
数组解构
对象解构
箭头函数
es6中新增的定义函数的方法
（）=>{}
const fn=（）=>{}
Array的扩展方法
模板字符串
es6中的创建字符串的方式，使用反引号定义
let name=`zhangsan`
