1. API de nueva iteración de ES5
①forEach atraviesa todos los elementos de la matriz
Parámetro: forEach (función de devolución de llamada)
Función de devolución de llamada (valor de elemento, [índice de elemento], [nombre de matriz donde se encuentra el elemento])
valor de retorno: ninguno
let arr = [6,5,7,4,8,9];
function add(x,index,a){
a[index] += 10;
}
arr.forEach(add);
console.log(arr);②mapa: no hay diferencia entre forEach y forEach sin considerar el valor de retorno
map tiene un valor devuelto, y el valor devuelto es una nueva matriz formada por el valor devuelto por la función de devolución de llamada
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);③filtro: filtrado de datos
Parámetros: función de devolución de llamada ---> los parámetros de la función de devolución de llamada son los mismos
Valor de retorno: elemento de matriz que satisface la condición de filtro
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);2. Similitudes y diferencias entre la orientación a procesos y la orientación a objetos
① orientado al proceso
programa = algoritmo + sintaxis;
Algoritmos: énfasis en los pasos, paso a paso
Defectos del pensamiento de programación orientado a procesos: 1. Para cosas simples, a medida que aumenta la escala del problema, el proyecto eventualmente se volverá incontrolable 2. La reutilización es relativamente pobre (función)
② Orientado a objetos
programa = objeto1 + objeto2 + ... + objeton;
Objeto: una unidad de paquete independiente, que incluye todas las propiedades y métodos relacionados con el objeto
Al analizar problemas: dar prioridad a los objetos.En pocas palabras: todo es un objeto.
3. Clases y Objetos
① clase y objeto
El proceso de abstraer cosas, abstraer -> describir cosas
Abstraer atributos y comportamientos, y luego resumir objetos con los mismos atributos y características de comportamiento, esta es la clase
②Clase: una colección (plantilla) de objetos con los mismos atributos y características de comportamiento, es un tipo, no existe realmente
③ Objeto: instanciación de la clase (existencia real)
4. Clase de creación ES5
Aunque JS utiliza el pensamiento orientado a objetos, no tiene el concepto de clases, simula clases a través de funciones y se considera como funciones de clases, también conocidas como constructoras.
①esta orientación
a. Utilizado junto con el cuerpo del evento, el elemento que desencadena el evento
b. Usado junto con funciones ordinarias (excepto para cuerpos de eventos y constructores), llamar al objeto de la función
c. Usado junto con el constructor, el nuevo objeto
d. Se usa junto con la función de flecha (la función de flecha no tiene esto), donde este es el prefijo de su elemento principal
②La diferencia entre funciones ordinarias y constructores
a. Se recomienda escribir en mayúscula la primera letra del constructor
b.El constructor no puede tener retorno
c. El constructor debe usarse junto con la nueva palabra clave, lo que significa crear un objeto
//在构造方法中出现的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();5. Clase de creación 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();ejercicios de aula
//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);
}