一.ES5新增迭代API
①forEach 遍历所有数组元素
参数:forEach(回调函数)
回调函数(元素值,[元素索引],[元素所在的数组名])
返回值:无
let arr = [6,5,7,4,8,9];
function add(x,index,a){
a[index] += 10;
}
arr.forEach(add);
console.log(arr);
②map:不考虑返回值的情况下和forEach没任何区别
map有返回值,返回值是通过回调函数return的数值构成的新数组
let arr = [6,5,7,4,8,9];
function add(x,index,a){
a[index] += 10;
return a[index];
}
let arr1 = arr.map(add);
console.log(arr1);
③filter:数据过滤
参数:回调函数--->回调函数的参数都一样
返回值:满足过滤条件数组元素
let arr = [6,5,7,4,8,9];
function fun(x){
if(x%2){
return true;
}else{
return false;
}
}
let arr1 = arr.filter(fun);
console.log(arr1);
二.面向过程和面向对象的异同
①面向过程
程序 = 算法 + 语法;
算法:强调步骤,一步接一步
面向过程编程思想的缺陷:1.在简单的事情,随着问题规模的增加,项目最后都会变得无法控制2.复用 性比较差 (函数)
②面向对象
程序 = 对象1 + 对象2 + ... + 对象n;
对象:独立的包裹单位,包含了该对象相关的所有属性和方法
分析问题时:优先考虑对象 概括来说就是:万物皆为对象。
三.类和对象
①类和对象
对事物进行抽象 ,抽象->对事物进行描述的过程
抽象出属性和行为,然后将拥有相同属性和行为特征的对象归纳,这就是类
②类:拥有相同属性和行为特征的对象得集合(模板),它是一种类型,不是真正存在的
③对象:类的实例化(真实存在的)
四.ES5创建类
JS虽然使用了面向对象思想,但是没有类的概念,通过函数模拟类,被当做类的函数,也称为构造函数
①this指向
a.与事件体连用,触发该事件的元素
b.与普通函数连用(除了事件体和构造方法),调用函数的对象
c.与构造函数连用,new出来的对象
d.与箭头函数连用,(箭头函数是没有this),这里的this是他父元素的前缀
②普通函数和构造函数的区别
a.构造函数首字母建议大写
b.构造函数不能有return
c.构造函数必须和new关键字连用,代表创建对象
//在构造方法中出现的this,是new出来的对象
function Student(name,age,gender){
//定义属性:其实就是变量
this.name = name;
this.age = age;
this.gender = gender;
//定义行为:就是函数
this.eat = function(){
console.log("eat");
}
this.sleep = function(){
console.log("sleep");
}
//在一个成员的方法中,使用其他成员
this.showValue = function(){
console.log(this.name,this.age,this.gender);
this.sleep();
this.eat();
}
}
let s1 = new Student("老王",18,'M');
// console.log(s1.name,s1.age,s1.gender);
// s1.eat();
// s1.sleep();
s1.showValue();
let s2 = new Student("罗翔",48,'M');
s2.showValue();
五.ES6创建类
class 类名{
//构造方法
constructor(){
}
//其他方法
}
//==============================================================================
class Student{
//构造方法中构造属性
//constructor固定的关键字,代表构造函数
constructor(name,age){
this.name = name;
this.age = age;
}
sleep(){
console.log("sleep");
}
showValue(){
console.log(this.name,this.age);
this.sleep();
}
}
let s = new Student("9527","M");//--->调用的是constructor
s.showValue();
课堂练习
//1.有一个正立方体,边长a为10;求它的体积volume.=====================================
//a.找对象b.根据对象抽象出其属性和行为创建类c.通过类实例化对象使用
class squre {
constructor(a) {
this.a = a;
}
area() {
return Math.pow(this.a, 3);
}
}
let s = new squre(10);
console.log(s.area());
//2.编写一个分数类,数据成员包含分子与分母,实现+,-,*,/==============================
class A {
constructor(n, m) {
this.n = n;
this.m = m;
}
calc(data, op) {
switch (data, op) {
case "+":
return this.n / this.m + data.n / data.m;
case "-":
return this.n / this.m + data.n / data.m;
case "*":
return this.n / this.m + data.n / data.m;
case "/":
return this.n / this.m + data.n / data.m;
}
}
}
let x1 = new A(2, 3);
let x2 = new A(4, 5);
console.log(x1.calc(x2, "+"));
//放大镜作业===================================================================
let oLis = document.querySelectorAll("li");
let oBox = document.querySelector("#box");
for(let i=0; i<oLis.length; i++){
oLis[i].onmouseover = function(){
oBox.style.display = "block";
}
oLis[i].onmouseout = function(){
oBox.style.display = "none";
}
oLis[i].onmousemove = function(evt){
oBox.style.left = evt.pageX +10+ "px";
oBox.style.top = evt.pageY +10+ "px";
oBox.style.backgroundImage = `url(img/shirt_${i+1}_big.jpg)`;
}
}
//双色球========================================================================
function doubleColorBall(){
let blue = 0;
let redArr = [];
blue = rand(1,16);
let set = new Set();
while(true){
if(set.size == 6){
break;
}
set.add(rand(1,33))
}
redArr = Array.from(set);
console.log(redArr);
console.log(blue);
}
doubleColorBall();
function rand(min,max){
return Math.round(Math.random()*(max-min)+min);
}