JavaScript高级教程

JavaScript高级教程

箭头函数

• 箭头函数是匿名函数，一般做为参数传递

  //以前的函数格式
  let test = function (a,b){
       
      let sum = a + b 
      return sum
   }
   // 简写成以下格式  
   let test = (参数) => {
       函数体}
  

• 可以简记成把function变成了符号=>,然后位置放在了参数的右边

• 注意点：

  1. 如果函数体只有一句，那么可以省略{},同时默认会返回函数体的结果，不能写return

  2. 如果只有一个参数，那么可以省略()

  3. 如果没有参数，()也不能省略

• 剪头函数返回对象需要加return{},如果一定要忽略return的话，就在花括号外面加个括号({})

   const func4 = (num) => {
       
          return {
        a: 123 };
        };
   console.log(func4());
  

  const func7=(num)=>({
       a:123});
  

• 各种形式的写法

  1. 没有形参、没有返回值、业务只有一行代码 大括号都可以省略

     const func3 = () => console.log('执行业务1');
     

  2. 只有一个形参、没有返回值、业务只有一行代码

     形参只有一个的时候，括号可以省略

     const func4 = (num) => console.log(num + 1);
     const func4 = num => console.log(num + 1);
     

  3. 两个或者多个参数（括号不能省略）、没有返回值、业务只有一行代码

     const func5 = (a,b) =>console.log(a + b)
     

  4. 没有形参，有返回值 业务两行代码

     const func6 = () => {
            
           let a = 100
           return a + 10
     }
     console.log(func6())  //结果110
     

  5. 没有形参、有返回值，业务一行代码

     const func7 = () => {
            
          return 100 +200
     }
     console.log(func7());  //结果300
     

数组常见的方法

方法	描述
every()	检测数值元素的每个元素是否都符合条件。
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。
findIndex()	返回符合传入测试（函数）条件的数组元素索引。
forEach()	数组每个元素都执行一次回调函数。
includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
isArray()	判断对象是否为数组。
join()	把数组的所有元素放入一个字符串。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
reduce()	将数组元素计算为一个值（从左到右）。
reverse()	反转数组的元素顺序。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。

forEach()

• 数组每个元素都执行一次回调函数
• for循环可以通过 break来打断、 forEach不能通过break打断

forEach(数组的值，数组的下标)

function forEach() {
   
    const arr = ['a','b','c','d','e']
    //分别打印
   /* arr.forEach(function(value,index) {
        console.log(`值是：${value}  下标是:${index}`)
    })*/
   //可以简写成以下
    arr.forEach((value,index) =>
        console.log(`值是：${
     value}  下标是: ${
     index}`)   
  )
}

map()

• map 根据原来的数组 来返回新的数组
• 也会循环数组 在循环的回调函数中可以返回新的数据 组装成新的数组

const list=[10,11,12];
const newList=list.map(value=>value+1);
console.log(newList);// [11,12,13]

const objectArr=[{
   name:"悟空"},{
   name:"八戒"}];
const newObjectArr=objectArr.map(value=>{
   
    // 给对象增加属性
    value.color="red"; 
    return value
})
console.log(newObjectArr);// [{name:"悟空",color:"red"},{name:"八戒",color:"red"}]

every()

• 会返回 true或者false
• 如果数组中每一个元素都符合条件，every返回true

const arr = [1, 6, 3, 4];
// const result = arr.every((value) => {
   
//    if (value < 5) {
   
//      return true;
//    } else {
   
//      return false;
//    }
//  });
//可以简写以下格式
 const result = arr.every((value) => value < 5)
 console.log(result);  //false

• every 如果是空数组，调用every 直接返回true

let arr=[];
const result=arr.every(value=>console.log(12));
console.log(result);// result = true

some()

• 数组中只要有一个元素符合条件，some返回true

const arr = [1, 3, 4, 6, 2];
// 这个数组里面有没有元素大于6的
const result = arr.some((value) => value > 6);
console.log(result);  //false

filter()

• 过滤出满足条件的数据到新的数组

const arr = [1, 2, 3, 4, 5, 6, 7];
//筛选出奇数
const newArr = arr.filter((value) => value % 2 !== 0);
console.log(newArr);  //[ 1, 3, 5, 7 ]

set()

• 在set对象中会过滤重复的数据

const arr = ['a','b',1,2,3]
 //使用构造函数new一个set对象出来,同时传入数组数据
 const set = new Set(arr)
// 给set添加数据的时候 使用add方法,在set对象中会过滤重复的 
 set.add(1)
 set.add(2)
 set.add(4)
 // 把对象转换为数组
 let newArr = [...set] 
 console.log(newArr)

面向对象

对象在内存中的示意图

创建对象的方式

字面量

• 简单粗暴
• 不适合创建多个同样类型的对象的场景
• 不方便维护

const obj ={
    
    name:"悟空",
    height:100