js高级第一天

1.箭头函数

箭头函数的传参:

如果只传递一个参数,小括号可以省略

如果没有参数或者参数大于1个,小括号不能省略

箭头函数的返回值:

如果函数只有一行代码,则大括号可以不写同时这一行代码运行结果将被直接返回,大括号不写,则不要换行

const fun1 = (a) => a + 1;
console.log(fun1(5));

箭头函数返回对象:

箭头函数省略大括号情况下返回一个对象,需添加一个小括号

const fun1 = () => ({
   username: '悟空',
   age: 20,
   password:'845353935'
});
console.log(fun1());

形参默认值写法:

如果调用函数的时候没有传递参数,就使用默认值参数

如果传递了参数,就会使用传递的参数而不会使用默认值

const func1 = (msg = '大家好') => {
  console.log(msg);
};

func1("你好"); // '你好'
func1();   //'大家好'

2.解构

数组解构:注重顺序

const arr = [1, 2, 3, 4];
const [num1, num2] = arr;
console.log(num1, num2);//1 2

对象解构:注重属性名

const obj = {
   name: '老王',
   age: 18,
   skill: '翻墙'
};

const { name, skill } = obj;
console.log(name, skill);//'老王' '翻墙'

交换变量:

let a = 100;
let b = 200;
[a, b] = [b, a];
console.log(a, b);

3.对象的简写

对象属性名和变量名一致时可以简写

对象方法可以省略冒号及function

const username = '悟空';
const skill = '72变';

const obj = {
   username,  //等价于username:username
   skill,      //等价于skill:skill
   say(){
     console.log('耍金箍棒');  // 等价于 say:function(){console.log('耍金箍棒')} 
   }
};

4.剩余运算符

获取剩余数据:

剩余运算符是一种比较方便我们获取剩余数据的方式

const arr = [1, 2, 3, 4, 5];
const [letter1, letter2, ...list] = arr;
console.log(list);//[3,4,5]
    
const obj = { a: 1, b: 2, c: 3, d: 4 };
const { a, b, ...obj1 } = obj;
console.log(obj1);//{c:3,d:4}

获取所有参数:

利用剩余运算符获取到所有传递给calc的参数封装到params数组中

calc(1, 2, 3);

function calc(...params) {
  console.log(params);  //[1, 2, 3]
}

复制引用类型:

相当于复制了一份引用类型的值不再是同一个了变成独立的个体

const obj = { username: '悟空', age: 1080 };
const newObj = { ...obj };
newObj.username = '八戒';
console.log(obj);//{username: '悟空', age: 1080}
console.log(newObj);//{username: '八戒', age: 1080}


const arr = [1, 2, 3, 4];
const newArr = [...arr];
newArr.push(5);
console.log(arr);// [1, 2, 3, 4]
console.log(newArr);// [1, 2, 3, 4, 5]

5.数组方法

map

用于数据的改造

 const arr = [1, 2, 3, 4];
 const newArr = arr.map(item => item * 2);
 console.log(newArr);//[2, 4, 6, 8]

filter

用于数据的查询和删除

可以遍历指定数组,每次遍历给回调函数传入参数,value 及 index

执行回调函数,如果回调函数的返回结果是true,就将元素存储到filter内部数组

最后将内部数组返回

const arr = [1, 2, 3, 4, 5, 6];
const newArr = arr.filter(item => item > 3);
console.log(newArr); //[4,5,6]

forEach

单纯数组遍历

every

检测数组元素的每个元素是否都符合条件全符合则返回true 否则返回false

对于空数组会直接返回true 不会去管判断条件

const arr = ['葫芦娃', '狗腿子', '萝卜', '丸子'];
const res = arr.every(item => item.length > 2);
console.log(res);	//flase

some

检测数组元素只要有一个元素满足条件就返回true

const arr = [
  '健康',
  '健康',
  '健康',
  '中招',
  '健康',
  '健康',
  '健康',
  '健康',
  '健康',
  '健康',
];
const result = arr.some((value) => value === '中招');//true

js高级第二天

1.数组方法

find

找满足条件的数组中第一个元素找到了之后不会再继续往下遍历

const arr = [
  { username: '悟空', height: 70 },
  { username: '八戒', height: 60 },
  { username: '龙马', height: 30 },
  { username: '龙马', height: 30 }
]
const obj = arr.find((value) => value.height === 60);
console.log(obj);//{ username: '八戒', height: 60 }

findIndex

找符合条件的第一个元素的下标找到返回这个元素的下标没找到返回-1

const index = arr.findIndex((value) => value.height === 660);
console.log(index);//-1

includes

判断一个数组是否包含一个指定的值

const arr = ['a', 'b', 'c', 'd'];

const result = arr.includes('e');
console.log(result);//false

indexOf

搜索数组中的元素并返回某个数据在数组中的位置找到了就返回这个元素的下标没有找到则返回 -1

const arr = ['a', 'b', 'c', 'd'];
const index = arr.indexOf('h');

console.log(index);

join

将数组元素串联成一个字符串

参数可选不写参数或传入undefined,则使用逗号作为分隔符

const arr = ['a', 'b', 'c'].map((value) => `<li>${value}</li>`);
// const arr = ['<li>a</li>', '<li>b</li>', '<li>c</li>'];
const result = arr.join('');
console.log(result);//<li>a</li><li>b</li><li>c</li>

2.Set对象

Set本身是一个对象存放数据数据永远不会重复将Set当成是一个数组处理

把Set转成真正数组:const arr=[...set] 再使用map find findIdex等方法

数组转Set对象:const set=new Set([1,2,3,4])

Set对象添加数据方法:使用add方法一次添加一个数据

set.add(1)

set.add(2)

set.add(3)

const list = [1, 4, 5, 8];
// Set对象需要new出来使用
const set = new Set(list);
console.log(set);
set.add(2)//一次只能添加一个数据
console.log(set);

3.构造函数

构造函数定义

本质是一个函数

作用用来创建对象

规范首字母大写

常见构造函数:Set Array Object String Number Boolean Date

只要它被new 它就是构造函数

被new出来的对象叫实例

构造函数的this

构造函数默认情况下就是返回了 this

this 指向new出来的实例

只要给构造函数中的this添加属性或者方法那么实例自然拥有对应的属性和方法

构造函数的原型

原型本质是一个对象

当我们在创建一个构造函数的时候原型也被创建

如果我们在原型对象上增加一个属性或者方法那么实例也拥有了所增加的属性或方法

使用面向对象的方式来创建对象:构造函数内部定义非函数类型的属性原型来定义函数类型的属性

function Person() {
  this.hair = 100;
}
// 原型
Person.prototype.decrease=function(){
  this.hair--;
}

面向对象思维---点击按钮使图片放大

<button>放大</button>
<script>
  function MyImg(src) {
    // body标签上能出现一张图片
    const img = document.createElement('img');
    img.style.transition = '2s';
    // 设置 图片地址
    img.src = src;
    // 在body标签上看见这一张图片
    document.body.append(img);

    this.abc = img;
  }

  // 原型上写一写函数
  MyImg.prototype.scale = function (num) {
    // 获取到 构造函数中 创建的  img dom元素 - 提前把img dom  添加到 this的属性中
    this.abc.style.transform = `scale(${num})`;
  };
  const myImg = new MyImg('./images/1.png'); // body标签上能出现一张图片
  const myImg2=new MyImg("./images/1.png");
  const button = document.querySelector('button');

  button.addEventListener('click', function () {
    // myImg.scale(2);// 
    myImg.scale(3); //  3 倍
    myImg2.scale(5);
  });
</script>