0
点赞
收藏
分享

微信扫一扫

JavaScript高级教程(更新中)

徐一村 2022-04-21 阅读 80
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 ]

面向对象

对象在内存中的示意图

img

创建对象的方式

字面量

  • 简单粗暴
  • 不适合创建多个同样类型的对象的场景
  • 不方便维护
const obj ={ 
    name:"悟空",
    height:100,
    age:5000
};

工厂函数

  1. 容易理解和维护
  2. 失去血缘关系,无法简单分辨对象的特征
  3. 后期无法实现继承
function createPerson(name, age, height) {
        return {
          name: name,
          age: age,
          height: height,
        };
      }
      // 创建对象
      const obj1 = createPerson('悟空', 18, 150);
      console.log(obj1);

构造函数

  1. 可以方便的创建对象
  2. 拥有血缘关系
  3. 还有后续更多的优势
  4. 构造函数的首字母大写 - 行内编码规范
//声明函数
function createStudent(name,age) {
    //通过this赋值
    this.name = name
    this.age = age
}
//通过new来创建对象
const obj = new createStudent('佐助',19)
console.log(obj)

笔试题：

构造函数的工作原理：

  1. 开辟空间
  2. 将新的创建的对象对象构造函数中的this
  3. 为对象赋值
  4. 将创建好的对象的地址返回

构造函数的弊端

  • 同一个 say 方法占据了两份内存
    function createStudent(name, age) {
      this.name = name;
      this.age = age;
      this.say = function () {
        console.log(this.name);
      }
    }

    const obj = new createStudent("悟能", 83);
    const obj1 = new createStudent("悟能1", 84);

    console.log(obj.say === obj1.say); // false  
    //不是同一say方法 两个say 占用了两个内存空间

图示

img

解决构造函数的弊端

  • 提取同一个 say 方法
    1. 解决了浪费内存的弊端
    2. 但是造成了 污染全局变量 的问题
  • 把方法-函数写在构造函数的外面
  • 再通过this.say 指向外部的函数
// 提前将say 声明好
    function say() {  // 污染全局变量
      console.log(this.name);
    }
    function createStudent(name, age) {
      this.name = name;
      this.age = age;
      this.say = say
    }
    const obj = new createStudent("悟能", 83);
    const obj1 = new createStudent("悟能1", 84);

    console.log(obj.say === obj1.say); // true

图示：

img

原型模式

  • 在构造函数的原型上 存放函数
    1. 解决了同一个 say 浪费 内存的问题
    2. 解决了污染全局变量的问题
    function createStudent(name, age) {
      this.name = name;
      this.age = age;
    }
    // 将刚才的全局函数say 直接挂载到 构造函数的原型上 即可
    // prototype 是个对象 每一个构造函数都会内置有的. 我们称之为原型
    createStudent.prototype.say = function () {
      console.log(this.name);
    }

    const obj = new createStudent("悟能", 83);
    const obj1 = new createStudent("悟能1", 84);

    console.log(obj.say === obj1.say); // true

解释

  • 原型的单词是 prototype, 原型的这个名字是行业内共同认可的名字。
  • 原型本质是一个对象，理解为 JavaScript 自动帮我们添加的
  • 原型是 JavaScript 自动帮我们在定义构造函数的时候添加的
  • 所有构造函数的实例，共享一个原型
  • 原型上一般是挂载函数

img

举报

相关推荐

JavaScript教程（高级）

c#wordmicrosoftAspose.Words

【javascript高级教程】JavaScript Date（日期） 对象

javascript前端开发语言

JavaScript乐子大全（更新中）

javascript前端

JavaScript高级

javascript前端

JavaScript高级（十）----JavaScript中的类【重述原型链】！

kafka分布式rabbitmq中间件rocketmq

JavaScript高频面试题（更新中...）

盒模型运算符字符串Html/CSS前端开发

javascript高级进阶

数组构造函数作用域JavaScript前端开发

javaScript高级笔记

javascript前端

javaScript高级[一]

javascript

javascript高级7

javascript
0 条评论
加载失败