原生JavaScript知识点整理（更新中）

什么是 JavaScript？

• JavaScript(简称 JS) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言
• JavaScript 在 1995 年由网景公司的布兰登·艾奇发明
• JavaScript 本身是作为开发 Web 页面的脚本语言而出名的，但它也被用到了很多非浏览器环境中，比如 Node.js
• JavaScript 最新的版本由 ECMA 国际组织发布的，该版本正式名称为 ECMAScript 2015，但在社区里我们通常称它为 ECMAScript 6 或者 ES6

JavaScript 的组成

• ECMAScript 描述了该语言的语法和基本对象
• BOM 浏览器对象模型
• DOM 文档对象模型

JavaScript 的特点

• 是一种解释性脚本语言（代码不进行预编译）
• 主要用来向 HTML 页面添加交互行为
• 可以直接嵌入 HTML 页面，但写成单独的 JS 文件有利于结构和行为的分离
• 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行
• JavaScript 脚本有自身的基本数据类型，表达式和算术运算符及基本框架
• JavaScript 提供了六种基本数据类型和一种复杂数据类型来处理数据和文字。
• 变量提供存放信息的地方，表达式则可以完成较为复杂的信息处理。

JavaScript 中的数据类型

• JavaScript 中共有七种内置数据类型，包括基本类型和引用类型

基本数据类型：

• String(字符串)
• Boolean(布尔值)
• Number(数字)
• Symbol(符号)
• undefined(未定义)
• null(空值)

复杂（引用）数据类型：

• Function(函数)
• Object(对象)
• Array(数组)

数组

• 是一个复杂数据类型
• 是一个有序数据的集合
• 是按照索引（下标）进行排列的
• 索引从 0 ~ 正无穷

数组的创建方法

1. 字面量创建
   • var arr = []
   • 可以在创建的时候 直接添加内容
2. 内置构造函数创建（Array）
   • var arr = new Array()
   • 内置构造函数的方式可以 使用传递参数的形式 直接写入内容

创建数组的内置构造函数的三种使用方式

1. 不传递参数
   • 得到的就是一个空数组
2. 传递一个大于 0 的整数
   • 这个数字表示数组的长度
   • 里面的每一个数据都是空的 => [empty × 传递进来的数字]
3. 传递多个参数（任意个）
   • 每一个参数就是数组里的每一个数据

操作数组的方法

• 我们的数组不好进行修改
• 需要一些方法来对数组进行操作

1. push() 向数组的末尾追加内容

• 语法：数组.push(你要添加的内容)
• 返回值：改变以后的数组的长度
• 直接改变原始数组

2. pop() 把数组的最后一个数组删除

• 语法：数组.pop()
• 返回值：被删除的那一条数据
• 直接改变原始数组

3. unshift() 向数组的最前面添加内容

• 语法：数组.unshift(你要添加的内容)
• 返回值：改变以后的数组的长度
• 直接改变原始数组

4. shift() 删除数组最前面的一个数据

• 语法：数组.shift()
• 返回值：被删除的那一条数据
• 直接改变原始数组

5. splice() 截取数组中的某些内容

• 语法：数组.splice(开始索引, 截取多少个)
• 返回值：以一个数组的形式返回被截取出来的内容
  • 直接截取一个的时候，也是以数组的形式返回
  • 一个都不截取的时候，返回的是一个空数组
• 直接改变原始数组

splice() 的第二个使用方式

• 语法：数组.splice(开始索引, 截取多少个，用什么内容替换)
  • 理论上可以传递无限个参数，从 第三个参数 开始全部是替换的新内容
  • 在替换的过程中，你从哪里开始截取，就把替换的内容填充到哪里
• 返回值：以一个数组的形式，返回被截取出来的内容

6. reverse() 用来反转数组

• 语法：数组.reverse()
• 返回值：反转过来的数组
• 直接改变原始数组

7. sort() 用来对数组进行排序的

• 语法：数组.sort()
• 返回值：排序好的数组
  • 如果你在使用 sort 方法的时候不传递参数
    • 按照一位一位来看待进行排列
  • 如果你在使用 sort 方法的时候传递参数
    • 那么会按照 从小到大 或者 从大到小 排序
• 直接改变原始数组

sort() 传递参数的语法

• 语法：数组.sort(function (a, b) {})
• 这个传递进去的函数接收两个形参
• 这个函数需要一个返回值
  • return a-b 升序
  • return b-a 降序

8. concat() 对数组进行拼接

• 把多个数组连接在一起变成数组
• 语法：数组.concat()
• 返回值：是拼接好的数组
• 不改变原始数组

9. join() 对数组进行拼接

• 把数组里面的每一项连接在一起，变成一个字符串
• 语法：数组.join(你以什么内容进行连接)
• 返回值：按照你给定的内容连接好的字符串
  • 你不传递参数的时候，默认以 , 连接
  • 你传递参数的时候，传递什么就用什么连接
• 不改变原始数组

10. slice() 对数组进行截取

• 语法：数组.slice(开始索引, 结束索引) （包前不包后）
• 返回值：以一个数组的形式返回被截取出来的字符串
• 不改变原始数组

slice() 的特殊使用方式

• 传递索引的时候，可以传递一个负整数
• 当你传递一个负整数的时候
  • 这个负整数的位置就是 这个数组 和 length 相加的结果

ES5 的数组常用方法

1. indexOf() 查询数组中是否有该数据

• 语法：数组.indexOf(你要查询的内容)
• 返回值：你要查询的数据的索引位置
  • 如果没有这个数据，就返回 -1
• indexOf(你要查询的内容, 设置一个开始的索引位置)
  • 就是限制了一个开始查询的位置

var arr = [1, 2, 3, 4, 5]

var res = arr.indexOf(6)
console.log(res) // -1

var res2 = arr.indexOf(2)
console.log(res) // 1

2. forEach() 用来遍历数组的

• 取代了 for循环 的作用
• 语法：数组.forEach(function (item, index, arr) {})
  • item：数组里面的每一项
  • index：数组里面每一项的索引
  • arr：原始数组
• 无返回值

var arr = [1, 9, 4, 6, 5, 8, 3, 2, 7]

var res = arr.forEach(function (item, index, arr) {
   
    console.log(item) // 随着循环 item 就是数组里面的每一项
    console.log(index) // 随着循环 index 就是数组里面的索引
    console.log(arr) // 每次循环的时候 arr 都是原始数组
})

console.log(res) // undefined

3. map() 用来映射数组的

• 该方法与 forEach() 相同，区别就是多了一个返回值

• 语法：数组.map(function (item, index, arr) {})

  • item：数组里面的每一项
  • index：数组里面每一项的索引
  • arr：原始数组

• 返回值：是一个数组

  • 原始数组的长度是多少，返回的数组长度就是多少
  • 返回的数组里面的数据有传递的函数的返回值决定

• map 的执行

  • 先准备一个新数组 [1, 8, 7, 3, 5, 0, 9, 6]
  • 随着循环函数每次都在执行
  • 第一次这个函数调用的时候返回值是什么，就填充在数组的第 0 项
  • 最后把这个新数组返回给你

var arr = [1, 8, 7, 3, 5, 0, 9, 6]

var res = arr.map(function (item, index, arr) {
   
    console.log(item) // 随着循环 item 就是数组里面的每一项
    console.log(index) // 随着循环 index 就是数组里面的索引
    console.log(arr) // 每次循环的时候 arr 都是原始数组

    return item * 10
})

console.log(res) // [10, 80, 70, 30, 50, 0, 90, 60]

4. filter() 用来过滤数组的

• 语法：数组.filter(function (item, index, arr) {})

  • item：数组里面的每一项
  • index：数组里面每一项的索引
  • arr：原始数组

• 返回值：是一个数组

  • 原始数组的长度是多少，返回的数组长度就是多少
  • 返回的数组里面的数据有传递的函数的返回值决定

• filter 的执行

  • 先准备一个 空数组 [1, 8, 7, 3, 5, 0, 9, 6]
  • 随着循环，如果你的函数返回的是一个 true，那么就把这一项放在新数组里面
  • 如果你的函数返回的是一个 false，那么就什么也不做
  • 最后把这个新数组给你返回

var arr = [1, 8, 7, 3, 5, 0, 9, 6]

var res = arr.filter(function (item, index, arr) {
   
    console.log(item) // 随着循环 item 就是数组里面的每一项
    console.log(index) // 随着循环 index 就是数组里面的索引
    console.log(arr) // 每次循环的时候 arr 都是原始数组
    
    return item !== 3 && item !== 8
})

console.log(res) // [1, 7, 5, 0, 9, 6]

5. every() 判断数组里面是不是每一个都满足条件

• 语法：数组.every(function (item, index, arr) {})

  • item：数组里面的每一项
  • index：数组里面每一项的索引
  • arr：原始数组

• 返回值：一个布尔值

  • 当你的数组中每一个内容都满足条件的时候，就会返回 true
  • 只要你的数组中有一个内容不满足条件，就会返回 false

• every 的执行

  • 准备一个变量是 true
  • 随着循环的的执行，只要你函数内部返回的条件是一个 false
  • 那么他就把变量改成 false
  • 如果你函数返回的是一个 true，那么它就什么都不做
  • 给你返回结果

6. some() 判断数组里面是不是有一个满足条件

• 语法：数组.some(function (item, index, arr) {})

  • item：数组里面的每一项
  • index：数组里面每一项的索引
  • arr：原始数组

• 返回值：一个布尔值

  • 数组中只要有一个满足条件的，那么就会返回 true
  • 如果数组中全都不满足条件，那么就会返回 false

• some 的执行

  • 一开始定义一个变量时 false
  • 随着循环函数的执行，只要有一个函数里面返回一个 true
  • 那么就把变量变成 true
  • 如果函数返回的是 false，那么什么都不做
  • 最后把这个变量的结果给你

for in 循环

• 也是循环的一种
• 语法：for (var key in obj) {}
  • key 对象中的每一项（key）
  • obj 要循环的那个对象
• 主要是用来循环对象的
• 但是也可以用来循环数组

冒泡排序

• 就是对数组排序的一种方法
• 循环一遍以后，得到一个结果
  • 最大的一定在数组的最后面
• 优化：两个循环
  • 使用里面循环交换变量
  • 两个循环一个减一次
  • 里面循环减去外层循环变量

var