JavaScript 基础

JavaScript 是什么

• 一门语言
• 一门脚本语言
• 一门运行在浏览器中由浏览器解释执行的语言

JavaScript 语法特性

基于对象和事件驱动的解释型松散型语言

• 基于对象：我们在js当中要操作的一切的目标（字符串、数组、浏览器、div…）都是以对象的方式存在的
• 事件驱动：js的执行是靠内部的事件循环来驱动的
• 解释型：由浏览器解释执行的
• 松散型（弱类型）:对于数据类型的区分是弱化的（TypeScript–js的强类型实现）

JavaScript 历史

• 1995年由网景（Netscape）公司的布兰登·艾奇 【liveScript sun java JavaScript Windows Jscript Cenvil】
• 1997年 JavaScript1.1提交ECMA（欧洲计算机制造的协会） 类似ISO是一个标准制定的组织 ECMAScript定义了js基本的语法规范 JavaScript是基于ECMAScript的浏览器实现 类似的还有FLASH的 actionScript基于ECMAScript的实现 nodejs基于ECMAScript服务器端的实现
• 1999年 ECMAScript 3.0
• 2007年 ECMAScript 4.0 分歧 没有发布 ECMAScript 3.1
• 2009年 3.1-5
• 2015年 ECMAScript 2015 …2018 ES6

JavaScript

• ECMAScript 语法核心（变量 数据类型 运算符 流程控制 函数 数组 对象）
• BOM（Browser Object Model【浏览器对象模型】） 定义了如何通过js来操作浏览器（浏览器本身 地址栏 历史记录 窗口…）
• DOM（Document Object Model【文档对象模型】） 定义了如何通过js来操作界面中的元素（body div a…）

JavaScript 执行方式

1. 在进行重定向的位置执行js代码
2. 通过script标签嵌入执行
3. 通过script的src属性引入执行
4. 在标签中通过添加事件执行

嵌入和引入不能在同一个标签中使用 虽然执行方式不同但是他们最终还是在一个环境中解释执行的

JavaScript 输出方式

1. alert(); 警告框  阻止代码的执行，点击确定按钮会继续执行
2. prompt(); 带输入控件的弹出框 阻止代码的执行，可以进行输入
3. console.log(); 在浏览器控制台输出和代码的执行是相互独立的
4. document.write(); 在文档中写入内容

JavaScript 注释

1. // 表示注释掉当前行的内容
2. /\* 注释某一个代码块 \*/

JavaScript 变量

• 变量 存储数据的容器
• 声明 赋值
• var 关键字（关键字：被js赋予特定的含义某些单词 保留字：可能会被js赋予特定含义的某些单词）

声明赋值的四种方式

1. 先声明后赋值
2. 声明赋值同时进行
3. 同时声明多个变量后赋值
4. 同时声明多个变量并赋值

声明变量要注意的一些问题

1. 如果变量声明后没有赋值会被自动赋值为undefined
2. 如果没有声明变量直接使用会报引用错误
3. var变量的声明会提升到当前的代码块的开始位置去执行
4. var重新声明或重新赋值都可以将变量的旧值覆盖

关于变量名命名的规范

1. 必须以字母、下划线或者$开始，后续可以跟字母、数字、下划线、$；
2. 严格区分大小写
3. 不能使用关键字和保留字作为变量名 【关键字：if for else switch case break class function】 【保留字：int float 】
4. JS本身的命名习惯、风格
   * 类 首字母大写 Object Math Array
   * 组合单词 驼峰命名法 getElementsByClassName forEach getComputedStyle array_filter
5. 变量名一定要有意义

引用方式

变量：存储数据的容器

• let的基本用法
  • 声明变量
  • 所声明的变量，只在let命令所在的代码块内有效
  • 不存在变量提升
  • 在相同作用域内，不允许重复声明变量
  • 暂时性死区
• const
  • 声明常量
  • 块级作用域
  • 不可以重复声明
• const对象
  • const person = {}
  • const对象冻结
    • const person = Object.freeze({name:“zhangSan”,age:19})

let 和 const

1. 用let声明变量不会有变量提升
2. 用let是不能重复声明变量的
3. 用let声明的变量是识别块级作用域的
4. 用let声明的变量不会识别window的属性
5. const是用来声明常量的，只有一种声明方式，就是声明的时候直接赋值，常量一般全部大写的

变量的解构赋值

• 数组的解构赋值

   var [a,b,c] = [1,2,3]
   console.log(a)  // 1
   console.log(b)  // 2
   console.log(c)  // 3
  

• 不完全解构

    var [a,b] = [1,2,3]
    console.log(a)  // 1
    console.log(b)  // 2
  

• 制定默认值

    var [a='string'] = []
    console.log(a)  // string
    var [b,c='aaa'] = ['bbb']
    console.log(b)  // bbb
    console.log(c)  // aaa
    var [d='aaa',e] = ['bbb']
    console.log(d)  // bbb
    console.log(e)  // undefined
    var [m='aaa',n='ccc'] = ['bbb',undefined]
    console.log(d)  // bbb
    console.log(e)  // ccc
  

• let const命令
  • iterator(迭代器)接口

      let [a,b,c] = new Set(['a','b','c'])
      console.log(a)  // a
      console.log(b)  // b
      console.log(c)  // c
    

• 对象的解构赋值
  • 可以不用按照顺序

      let {name,age,id} = {id:'007',name:'zhangsan',age:18}
      console.log(name)  // zhangsan
      console.log(age)  // 18
      console.log(id)  // 007
    

  • 变量名和属性名不一致

      let {person_name,person_age,person_id} = {id:'007',name:'zhangsan',age:18}
      console.log(person_name)  // undefined
      console.log(person_age)  // undefined
      console.log(person_id)  // undefined
    

  • 解决方法

      let {name:person_name,age:person_age,id:person_id} = {id:'007',name:'zhangsan',age:18}
      console.log(person_name)  // zhangsan
      console.log(person_age)  // 18
      console.log(person_id)  // 007
    

  • 指定默认值
• 字符串的解构赋值
• 函数参数的解构赋值

JavaScript 数据类型

初始类型

• 数值 number 1 -1 1.5 2e+3（科学计数法）0x11(0x十六进制) 0o11(八进制) 0b11(二进制)
• 字符串 string “asd” ‘asd’ asd[母版字符串（ document.write(
• ${i}
); //反引号用法）]注意嵌套问题
• undefined
• 布尔值 boolean 真true 假false
• null 空 一个占位符 一般释放对象的引用
• Symbol ES6里新增的类型，用来表示一个唯一值

引用类型

• 对象 Object （数组、函数）

为什么要分成这两种类型

* 内存当中保存方式的不同  初始类型保存在栈区，引用类型保存在堆区，在栈区只保存一个地址
* 初始类型传值，引用类型传地址

undefined null 区别

• undefined 一个特殊值 在js中 所有我们期望能得到一个值但是得不到的情况下，js就会把这个值赋值为undefined
• null 表示空值是一个占位符 一般用它来清空对象（解除对象的引用关系）
• null==undefined true
• 获取变量的数据类型 typeof number string boolean undefined object function symbol

JavaScript 运算符

算术运算符

+ - * / %(取余) ++ – **(幂运算)

• val++ 先赋值，后自加 ++val 先自加，后赋值

• 除了+以外的其它运算符在使用的时候会隐式将运算符两端的运算元转化为数值类型；如果转化不了就得到一个NaN（Not a Number）；
• 如果在 + 两端有一端是字符串，那么结果就是两端拼接起来的字符串

关系运算符（比较）

> < >= <= == != === !==

• 运算结果一定是一个布尔值
• 一个字符串和一个数值进行比较 隐式的将字符串转化为数值进行比较，如果转换不了结果就是false
• === 在比较大小的时候是不会进行类型转换的
• 两个字符串进行比较 会从左往右依次按照当前对位字符的Unicode编码进行比较，如果能够比较出大小就停止

赋值运算符

= += -= *= /= %=

• num=num+10; num+=10;

逻辑运算符

&&(与<并且>) ||(或<或者>) !(非<除了>)

• 布尔值或者能够得到布尔值的表达式
  • && 同真则为真 [运算时，两个都为真，取第二个值]
  • || 有真则为真 [运算时，两个都为真，取第一个值]
  • ！ 取反 [运算结果仍旧为布尔值]
• 其他驱动类型，在进行运算的时候，会先转换为布尔值，然后再做运算

false: 0 NaN “” undefined null false（六个假值）

• 与运算 &&
  • 全都为真值，运算结果为最后一个值
  • 只要有假值，运算结果为第一个假值
• 或运算 ||
  • 全都为假值，运算结果为最后一个假值
  • 只要有真值，运算结果为第一个真值
• 非运算 ！
  • 假值取反得到true，真值取反得到false

一元运算符

运算元|运算元素|操作数

• 一元运算符 ：++ – +（正） -（负） typeof new delete

数据类型	typeof结果
数值	number
字符串	string
布尔值	boolean
undefined	undefined
null	object
symbol	symbol
对象	object

三元运算符 三元运算表达式

表达式1？表达式2:表达式3 （所有可以被求值或者本身就是一个值的代码结构 1 1+1 10>5 10||5） 根据表达式1的真假决定最终整体表达式的值，如果是真，最终为表达式2的值，如果为假，就是表达式3的值

特殊运算符

• ()
  • 算数优先级
  • 调用函数
• 分割符 ,

扩展运算符

…(运算符) 对于数组进行运算。将数组内容变成序列化的语句结构

• [1,2,3] 1,2,3 fn(1,2,3) [2,1,1]

流程控制

1. break / continue
2. while(){} / do()while()

解构赋值 ES6

对于数组内容进行解构

• let [a,b,c] = [1,2,3];
• let [a,b,c,d] = [1,2,3]; d = undefined;
• let [a,b,c] = [1,2,3,4]; 4会被忽略掉
• let [a,b,…c] = [1,2,3,4]; a=1;b=2;c=[3,4]; 这里的…叫做剩余运算符
• 用法
  • 值交换 [a,b] = [b,a];
  • 函数参数 解构传参 function fn([a,b]){} fn([1,2]);
  • 函数返回值 解构接收返回值 function fn(){ return [1,2,3]} let [r1,r2,r3] = fn();

解构对象

• let {a,b,c} = {a:1,b:2,c:3};
• let {a} = {a:1,b:2,c:3};
• let {a,b,c,d} = {a:1,b:2,c:3};
• let {a:b} = {a:1}; b = 1; a没被定义

对象

• 可以用一个变量直接替换属性名和属性值
• 方法 fn:function(){} => fn(){}

函数

1. 创建一个函数

• function fn(){}
• 匿名函数
  • var fn = function(){}
  • setInterval(function(){},1000)
  • div.οnclick=function(){}
  • {name:“zhangsan”,fn:function(){}}
  • [function(){},function(){}]
• new Function();

2. 函数的调用

• fn() obj.fn(); 函数()
• 通过事件触发
• 自调用 (function(){})()

3. 函数的参数

• 形参和实参
• 参数默认值处理 3种方式
• arguments 用来保存所有实参信息的对象
  • arguments.length arguments[0]
  • 模拟函数重载 是可以依靠于arguments对象实现 【根据函数个数类型的不同写不同的函数体】
  • return 之后是什么 就表示当前函数的运算结果是什么
  • return 之后的其它代码都不再执行

数据类型 Symbol

初始类型中的一种，表示的唯一值

• 必须Symbol() 才能得到Symbol值
• typeof 的结果 Symbol 字符串
  • number string undefined boolean object function symbol
• Symbol()函数可以有参数 参数的作用只在于在控制台便于区分
• Symbol可以作为对象的属性使用（必须放到方括号中），可以实现属性的私有化
• Symbol可以用于函数的参数解耦（耦合）

作用域

• 全局作用域
• 局部作用域
• 块级作用域
• 作用域链
• 预解析顺序

对象

• js本身就是基于对象

数组 函数 日期 正则…内置功能都是通过对象实现的bom和dom的使用方式也都是考对象实现的。

• 定义
  • 属性的无序集合体
  • 细分属性和方法
  • 面向对象-> 是编写程序的思路或者方式 -> 以创建一个对象的方式实现程序的编写。
  • 类
    • 具有相同或者相似属性的对象的抽象描述
    • class Human{} Human 就是一个类 new Human() 就可以得到一个对象
    • 在ES6之前是没有class这种定义方式的 只能通过构造函数function Human(){}实现类的效果
  • 对象操作
    • 创建一个对象
      1. 字面量方式
      2. 实例化一个类
      3. Object.create()
    • 对象属性的定义和添加
      • 无论是定义这个对象或者是类的时候，还是得到这个对象之后都可以添加属性。
    • 属性的访问
      • obj.name let arr = “name” obj[arr]
    • 删除对象的属性
      • delete obj.name
    • 遍历一个对象
      • for(let i in obj);
    • obj=null;
  • 原型、继承
    • 继承
      • ES6之前
        • 基于prototype实现
        • call/apply实现
      • ES6之后
        • class Student extends Human{}
    • 原型链
      • arr.push();

this如果在构造函数中，表示的就是当前构造函数要实例化的对象
this如果通过call或者apply来调用当前函数当前函数的this就是通过call/apply传入的参数

Set

特殊的数组 保存不重复的值

// 去重
       let arr = [1,1,2,2,3,3,4,4,5,6,7,8,9];
       let newArr = [...new Set(arr)];
        console.log(newArr);

• new Set();
  • add(); 添加 返回值还是set对象
  • delete(); 删除 返回值就是是否删除对象 布尔值
  • has(); 判断 返回值是否包含某个值 布尔值
  • forEach() 遍历 回调函数中的参数，是set结构中的每一个值 有值无键
  • clear(); 清除

Map

特殊的对象 可以将任意的数据类型设置为属性名（键）

• new Map();
  • set(); 添加 返回值还是map对象
  • delete(); 删除 返回值是否删除成功
  • has(); 判断 返回值是否包含某个值
  • forEach(); 遍历 回调函数中的参数，是set结构中的每一个值 有值有键
  • clear(); 清除

Iterator 和 for of 结构

遍历器接口 js统一提供进行数据遍历的方式

• 数组 字符串 类数组（argument） Map SRT NodeList都被默认部署了Iterator接口
• Symbol.iterator 是一个函数 会返回一个遍历器对象

• 遍历器对象当中有一个方法next();
• next方法调用之后会返回一个对象，对象当中包含两个值 ,当前遍历的值,当前遍历的状态
• 只要对象有iterator的接口就可以使用for…of进行遍历