目录
①全局下声明 注意写法 多一个空格都不行 'use strict';
二:用Object.create()方法可以指定对象为原型创建新的对象，同时可以为新的对象设置属性, 并对属性进行描述 ，有两种方法:
1.普通版:var P2 = Object.create(P1,{age:{value:18},{name:{value:'杨'}},...})
②.此时我们创建一个新的对象P2,不仅继承P1的属性方法,还额外添加属于自己的方法,用Object.create(),具体写法:
①get是获得属性的一种方法，负责查询，不带任何参数，一般是得到，需要返回有return
②set是设置属性的一种方法，负责设置修改，是通过参数的形式传递。set是创建，不需要返回。
三：Object.defineProperties()方法：直接在一个对象上定义新的属性或修改现有属性，除了第一个参数和create不一样，其余都一样，get和set也一样
forEach里面的return true无效，不会终止整个循环，只会跳出当次循环（filter和forEach一样）
some只要找到了元素就终止整体循环，前提要加上return true
一:严格模式:
1.声明方法:
①全局下声明 注意写法 多一个空格都不行 'use strict';
②函数内声明 在函数里写'use strict'
2. 严格模式特性
①不允许使用未声明的变量
比如：如果没有全局声明严格模式，正常输出，如果有报错
②函数内this指向：
无论函数内外,只要声明了严格模式：函数内的this不指向window了，指向undefined。是为了防止我们误操作，修改了window本身的某个属性。
③eval作用域
作用域有全局，局部，eval是第三个，只有在严格模式下才有,eval本身是一个函数，接收字符串参数，然后对字符串进行语法解析并运行
④⑤⑥:
二:用Object.create()方法可以指定对象为原型创建新的对象，同时可以为新的对象设置属性, 并对属性进行描述 ，有两种方法:
1.普通版:var P2 = Object.create(P1,{age:{value:18},{name:{value:'杨'}},...})
①.原对象P1
②.此时我们创建一个新的对象P2,不仅继承P1的属性方法,还额外添加属于自己的方法,用Object.create(),具体写法:
var P2 = Object.create(P1, {
//这个属性有特定的写法并且里面有特定的属性
age: {
// 属性值
value: 18,
// 属性值是否可以修被改
writable: false,
// 属性是否可被删除
configurable: false,
// 属性是否可以遍历（枚举）
enumerable: false
},
sex: {
//属性值
value: '女'
}
})
P1.eat()
P2.eat()
console.log(P2.sex)
P2.age = 10;//fasle为18，true为10
// 删除属性的方法：
delete P2.age //configurable为trueP2.age输出 undefined
console.log(P2.age)
console.log('——————————————')
for (var i in P2) { //新增属性age不可被遍历enumerable: false
console.log(i)
}③.新属性里面的属性大全:
2.getset版:var P2 = Object.create(P1,{age{get:function(){},set:function(){}},...})用楼上图片get ,set两个方法获取P2的value值，此两种方法不得与其他四个属性同用
①get是获得属性的一种方法，负责查询，不带任何参数，一般是得到，需要返回有return
②set是设置属性的一种方法，负责设置修改，是通过参数的形式传递。set是创建，不需要返回。
③get和set是方法，所以可以进行判断。
④每一个对象都有一个get和set方法。
⑤如果调用对象内部的属性约定的命名方式是_age
<script>
var P1 = {
name: '杨',
eat: function () {
console.log('我爱吃')
}
}
var P2 = Object.create(P1, {
age: {
value: 18
},
play: {
// get让我们的方法无需手动调用：当我们获取该属性时
get: function () {
console.log('我爱玩')
return 1000
},
// set用来修改value值，下面括号里可以传递参数value，传的就是下面重新赋值的值
// 当我们修改P2.paly的值时set方法有效
set: function (value) {
console.log('我的值被修改成了2000')
console.log(value) //2000
this.wan = value //this指向P2 作为属性
}
}
})
P1.eat() //我爱吃
P2.eat() //我爱吃
console.log(P2.age) //18
// 内部用get方法的属性名，直接调用，调用时不加括号
// 没有return的话不光输出我爱玩，还输出undefined，
console.log(P2.play) //我爱玩 同时有return输出1000
// 当我们修改P2.paly的值时set方法有效
P2.play = 2000 //第22行：我的值被修改成了2000
console.log(P2.wan) //第23行：2000 第38行2000
</script>
三：Object.defineProperties()方法：直接在一个对象上定义新的属性或修改现有属性，除了第一个参数和create不一样，其余都一样，get和set也一样
1.原始添加属性方法
2.升级版
四：要求添加 total 属性, 获得班级的总分数
Object.defineProperties(banji, {
total: { //总成绩
get: function () {
var tt = 0
for (var i = 0; i < this.scores.length; i++) {
tt += this.scores[i].score
}
return tt
}
},
pingjun: { //平均成绩
get: function () {
return this.total / this.scores.length
}
}
})
console.log(banji.total)
console.log(banji.pingjun)五：数组方法
遍历数组的方法：forEach()、map()、filter()、some()、every();
1.forEach()
2.map() 和 forEach() 一样
3.filter()
4.some()
5.every() 和 some() 一样
6.filter 和 some 的区别
7.案例：查询商品的案例
<!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>
.head {
width: 600px;
margin: 20px auto;
}
input {
width: 50px;
}
table {
width: 400px;
text-align: center;
}
</style>
</head>
<body>
<div class="head">
按照价格查询:
<input type="number" id="start"> - <input type="number" id="end">
<button id="button1">搜索</button>
按照商品名称查询:
<input type="text" id="namesearch">
<button id="button2">查询</button>
<button id="button3">全部</button>
</div>
<table border='1' cellspacing='0' align="center">
<thead>
<tr>
<th>id</th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var phones = [
{
id: 1,
name: '小米',
price: 3999
},
{
id: 2,
name: 'oppo',
price: 899
},
{
id: 3,
name: '荣耀',
price: 1299
},
{
id: 4,
name: '华为',
price: 1999
},
]
var tbody = document.getElementsByTagName('tbody')[0]
fn(phones)
// 1.渲染初始数据
function fn(Arr) {
// 先清空原来tbody 里面的数据
tbody.innerHTML = ''
Arr.forEach(function (value) {
let tr = document.createElement('tr')
/* <tr>
<td>1</td>
<td>小米</td>
<td>3999</td>
</tr> */
tr.innerHTML = `<tr>
<td>${value.id}</td>
<td>${value.name}</td>
<td>${value.price}</td>
</tr> `
tbody.appendChild(tr)
})
}
let button1 = document.getElementById('button1')
let start = document.getElementById('start')
let end = document.getElementById('end')
// 2.点击搜索时获取价格区间
button1.addEventListener('click', function () {
console.log(start.value) //0
console.log(end.value) //1000
//filter筛选出符合价格的数组
let newphones = phones.filter(function (value) {
return value.price >= start.value && value.price <= end.value;
})
console.log(newphones)
// 把符合的数组渲染到页面中
fn(newphones)
})
// 3.根据商品名筛选
let button2 = document.getElementById('button2')
let namesearch = document.getElementById('namesearch')
button2.addEventListener('click', function () {
let namephones = phones.filter(function (value) {
return value.name === namesearch.value
})
// console.log(namephones)
// 把符合的数组渲染到页面中
fn(namephones)
})
// 4.返回全部
let button3 = document.getElementById('button3')
button3.addEventListener('click', function () {
fn(phones)
})
</script>
</body>
</html>8.forEach和filter和some的区别：
forEach里面的return true无效，不会终止整个循环，只会跳出当次循环（filter和forEach一样）
some只要找到了元素就终止整体循环，前提要加上return true
六：创建函数的三种方式
// 1.命名函数
// 2.匿名函数
// 3. new Function() 构造函数 括号里的参数必须是字符串格式
// 效率低,了解即可
var fn = new Function('a', 'b', 'console.log(a + b)')
fn(1, 2) //3
// 4.所有函数都是 Function 的实例(对象)
// 5.函数也是对象
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
