关于JS ES5的那些事，内容详细推荐收藏

最新推荐文章于 2025-04-21 16:11:52 发布

阿山同学.

最新推荐文章于 2025-04-21 16:11:52 发布

阅读量489

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_50112395/article/details/126094038

版权

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

关于JS ES5的那些事

全文总计7500字，去除代码6000字阅读预计20分钟，理解的话估计要个一两天

ES5新语法 – 2009年出品

严格模式：JS提供了更多的报错，辅助程序员写出更健康的代码

开启方式，在脚本开头书写：‘use strict’
具体功能
- 变量必须先声明
- 函数必须先声明再使用
- 函数中的this关键词：如果是window则改为undefined
对象书写的精确配置 – 菜鸟的鸡肋，高手的神器
- objecttigondedefinePrroperty
- writable 是否可重新赋值
- enumerable：是否可遍历
- configurable ：是否可重配
- value：值
- get：计算属性 – 使用时不要（）就能触发
- set：监听器
保护对象的方式
- prexxxx：阻止扩展，阻止增加新的书写
- seal：阻止增删属性
- freeze：阻止增删改

ES6新特性

2015年6约出品，属于JS的里程碑
新的作用域：把必须用let和const来声明变量
- 对应window全局作用域，用于存放自定义属性
- ES6之前：必须开机先写一个黎明函数自调用–来提供局部作用域
- 块级作用域：用{}配件二let和const使用
- 对应函数作用域，取代的黎明函数作用域，可以提供为函数提供私有的变量
let和const
- let：变化量，声明的变量后续可以重新赋值
- const：常量，声明时必须赋值，后续不可重新赋值
- 关于声明提升
- 有声明提升，暂存死区：暂时提升，存放在一个暂存死区里面，不能用，必须是执行到 let / const 代码所在行以后才能用

作者本意：为了兼容之前的依赖声明提升的代码，作者不敢删除声明提升特性，用报错强制要求用户必须先声明变量，再使用变量；如果先用变量就报错
- 模板字符串
-转为html代码拼接而生
- 支持字符串局部内容的替换 – ${}
- 支持换行操作

作用域

是什么？万物皆为对象
作用域时具有特殊功能的对象
es6之前的有两大作用域：全局作用域和局部作用域
global全局作用域：对象中存储了系统提供的API，用于操作宿主环境

宿主函数：寄生虫与数组的关系在这里就是浏览器，node与js的的关系

如果时nodejs为宿主，那全局对象就是globalThis
让雨果为浏览器的化全局对象就是window

local 局部作用域：函数被调用后的临时生成的对象，用于存储函数中声明的变量
没调用后之前就是静态

作用域链：当出现多重作用域嵌套的场景——函数中套函数

当内层函数使用一变量时会按照就近原则，从长曾作用域中查找时用最近的那个变量

声明提升：JS独有的设计 – 非常垃圾

会造成写出来的代码产生的效果和原来的不一样
声明操作：
生命操作会被js的编辑器有限阅读并提升到，所在所用与的顶部，然后再去执行调整过顺序的代码；常认为—函数的提升比var优先

function ：整体提升–函数名++函数体
var 提升声明不提升赋值

闭包：当啊函数中有一个b函数，波函数中使用了b变量

function a(){
        var c=11
        function b(){
          console.log(c);
        }
        // 由于函数作用域时临时的调用结束后会自动销毁，所以
        // b函数为了保证自己能顺利执行，所以会把外部作用与保存在兹省的scopes属性里
        // 这个被保存在scopes中的函数作用域-- 称呼闭包
      }

必报的用途：为函数制作私有的属性

var 函数 =(function(){
        var 变量=值
        return function(){

        }
      })()

闭包的缺点：

函数作用域时临时的，运行完毕之后会销毁来节省内存
闭包的话半数树作用域保存下来，不晓辉，所以会浪费内存

arguments:函数

arguments:函数中 ·隐式·带有的一个变量；保存了函数调用时收到的所有传参

用途：常用于实现实参个数不固定的函数

函数重载：
利用if判断配合arguments变量，判断实参的个数和类型不同，重新载入不同的逻辑处理

访问器语法：
对象.属性名：点语法
对象[js]：方括号语法 --由于属性名时js代码，所以比较灵活

对象是引入类型

内存分为堆内存和栈内存
栈内存：查询速度快，存放小型的数据，存基础数据类型+对象地址相当于地址目录
堆内存：存放大型数据-对象类型拥有地址内存

对象浅拷贝

·限制做一个空的对象，遍历原有的对象把其中的属性，挨个复制到新的对象里面
适用类型：如果是对象类型，则用深拷贝

函数this配合对象使用

由于this的存在函数的传参发生了变更
方案1-传统：函数通过形参来接受对象的实参，然后处理函数
方案2-新式：把函数放到对象里面，this关键词就代表函数 工作时所在的对象

构造函数

就是一个函数，单数由于工作特殊 - - 创建构造函数对象的函数
命名规范：一般使用大驼峰，用于区分
步骤
1.创建空对象
2.把收到的实参存入上面的空对象

原型概念

目的：节省内存，避免每次创建对象都重复生成相同的函数
实现：构造函数有一个prototype，其中可以存储共享的函数们
当生成对象时，吧其中的__proto__属性、链接、构造函数prototype
对象的原型连机制：当使用对象的一个属性是，如果对象没有，则自动到

new运算符__proto__中寻找

new运算符

当new元素符放在函数前，则函数会自动完成四行代码

var this
this = {}
this.__proto__ =函数.prototype
return this

新的this指向

函数()：没有前缀的就是window
对象.函数()：对象–运行时所在的对象
new函数()：构造函数
箭头函数的this的关键词：箭头函数没有this关键词
当函数中，使用滋生没有的的变量会怎么办？
出发作用域链机制：向上层作用域查找this
运行示例
在这里插入图片描述
我们发现打印出来的就是window（自己没有就往上找）

那么再函数里面的函数是？
看下面的代码

var emp ={
  ename:'qiushan',
  show(){
    const b=()=>{
      console.log('this:',this);
    }
    b()
  },
  
}
emp.show()
// show 函数中的this是其前方的emp

在这里插入图片描述

数组的高阶函数

高阶函数：函数中使用了其他函数，就叫高阶函数
ES6为数组类型新增了更多的方法
打印数组的原型可以查看这些方法

console.log(Array.prototype)

由于前后端项目的流行，在前端，利用JS处理网页数据的需求，激增
前后端分离套路：利用Ajax，请求服务器的数据，在前端（浏览器）上临时拼接为HTML代码，最后显示
// 每个用户的浏览器各自拼接–分担服务器压力
前后端不分离：后端直接把数据拼接为HTML，发个浏览器显示
// 服务器压力大，还要拼接 --大网站扛不住

服务器发送的数据通常是数组–从数据库查出来的
所以需要前端JS提高对数组的处理能力

判断下面数组里面的数据是否都大于0

<script>
  // 高阶函数：函数中使用了其他函数，就叫高阶函数
  console.log(Array.prototype);
  var nums = [12, 13, 14, 15, 16, -1, 18];
  // 判断配个元素都大于0
  var a = nums.every((value, index, array) => {
    return value > 0;
  });
  console.log('a:',a);
</script>

当都有一个是负的时候
在这里插入图片描述
反之则为true

nums中的元素依次被箭头函数检测，每个元素都要提供三个值：值，序号来自数组
箭头函数要做判断元素是否符合条件
具体看需求
修改代码：

<script>
  // 高阶函数：函数中使用了其他函数，就叫高阶函数
  console.log(Array.prototype);
  var nums = [12, 13, 14, -15, 16, -1, 18];
  // 判断配个元素都大于0
  var a = nums.every((value, index, array) => {
    console.log(value,index,array);
    return value > 0;
  });
  console.log('a:',a);
</script>

运行代码：
在这里插入图片描述
我们发现在出现负数的时候代码运行就中断了
其实every这个参数相当于只要有一个不满足要求就返回值，并且结束运行

简化函数

// 1，没有使用的形参可以不写
a = nums.every((value) => {
  console.log(value);
  return value < 0;
});
// 3，箭头函数形参只有一个省略()
a = nums.every((value) => {
  console.log(value);
  return value < 0;
});
// 4，箭头函数的函数体只有一行省略return
a = nums.every((value) => {
  value < 0;
});

练习：判断下列数组是否为偶数

var nums=[12,5,32,1231,1223,-1,123,43]

实现效果：
在这里插入图片描述

练习：判断下列数组是否又负数

var nums=[12,5,32,1231,1223,-1,123,43]

实现效果：
在这里插入图片描述

高阶函数some

some：一些，有一些满足条件的
只要有真的就行，–类似于逻辑或，又真则真

像下面：判断是否有大于500的项目

// 高阶函数some
// some：一些，有一些满足条件的
// 只要有真的就行，--类似于逻辑或，又真则真
var nums=[12,564,123,1231,5346,68456]
var mians=nums.some(value=>value>=500)
console.log(mians ? '有' : '没有');

结果：
在这里插入图片描述

过滤filter

找出所有大于30的人工资低于10000的

map映射

把数据映射为HTML代码
在这里插入图片描述

**map ：**自动便利数组，把每个元素用箭头函数处理后返回值组成新的数组

join： 默认是用逗号来间隔字符串，可以通过传参来进行传参
效果
在这里插入图片描述
练习：把下面数组里面的数据映射到网页上

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <ul id="cart">

    </ul>
    <script>
      var cars=['冬瓜','南瓜','西瓜','美离间','奇异果','西红柿','桃子']
      // 把元素放到li标签里面
    </script>
  </body>

  </html>
</body>
</html>

答案：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <ul id="cart">

    </ul>
    <script>
      var cars=['冬瓜','南瓜','西瓜','美离间','奇异果','西红柿','桃子']
      // 把元素放到li标签里面
      var car=cars.map((value)=>{
        return `<li>${value}</li>`
      })
      var a=car.join('<br/>')
      console.log(a);
      cart.innerHTML =a
    </script>
  </body>

  </html>
</body>
</html>

例如我们还可以来玩的花一点

<body>
    <ul id="list">
      <!-- 占位 -->
    </ul>
    <script>
      var stus=[
        {name:"宝宝",age:"22",color:"red"},
        {name:"山海",age:"42",color:"blue"},
        {name:"秋慧",age:"21",color:"yellow"},
        {name:"玛丽",age:"62",color:"red"},
        {name:"凯瑞",age:"82",color:"red"},
        {name:"小李",age:"21",color:"red"},
        {name:"丘丘人",age:"20",color:"skyblue"},
      ]
      var strs=stus.map((value)=>{
        return `<li style="background-color:${value.color}">${value.name}-${value.age}</li>`
      })
      str=strs.join("<br />")
      list.innerHTML=str
    </script>
  </body>

forEach

reduce

reduce捐款方式一
在这里插入图片描述
方式2

关于ES6

ES6的一些新特性

箭头函数
- 更简单的匿名函数写法
- （）=>{ } 》》》 function(){ }
- 提供了两个语法糖
- - 形参只有一个的时候，小括号可以省–x=>{ }
- - 函数体只有一行时可以省略{return}
- this指向
- - 函数()： window
- - 严格模式下时undefind
- - 对象.函数()：对象
- - new 函数 () ：构造出来的对象
- - 箭头函数() ：自身没有按照作用域链查找
数组的高阶函数
- 函数中使用了其他函数
every：每一个元素都符合要求
some：把符合条件的元素过滤出来
filter：把符合条件的元素过滤出来
map：映射·-把主句映射为HTML
- 通常配合join属性使用
forEach：遍历数组
forEach适合原型中有此方法的
- for…of:适合为元素/类数组
reduce：合并