js基础

JavaScript简介

名字、版本

• 标准名称：ECMAScript （ES）
• TC39 - 负责制定ECMAScript语言标准
• W3C - 推动整个web技术的发展和标准化
• 标准划分
  • ES6之前
  • ES6之后

宿主环境

• 浏览器
• node

词法结构

• 注释
• 字面量 - 直接出现在程序中的数据值
• 标识符和保留字
  • 标识符 - 必须以字母下划线或者$开头
• unicode
  • UTF-32 固定四个字节
  • UTF-16 - 2、4个字节
  • UTF-8 - 1-4个字节
• 可选的分号

数据类型

• 原始类型

  • number - 无法精确表示浮点数
  • 字符串
  • 布尔

• 引用类型

  • 对象

• 空类型

  • undefined - 未定义 数值没有

    变量不赋值默认为undefined

    typeof undefined === undefined

  • null 对象没有

    typeof null === object

• es6新类型

  • Symbol - 唯一的值

    Symbol('a') === Symbol('a') \\ flase

  • BigInt

    为大数字后+n

    只能是整数

    不能和number类型做算数运算

检测数据类型

• typeof

  判断基本数据类型使用

表达式与操作符

表达式

• 主表达式

  独立存在，不再包含更简单表达式的表达式

• 对象和数组初始化程序

  值为新创建的对象或数组

• 函数定义式表达式

  其值为新定义的函数

• 属性访问表达式

  对象属性或数组元素的值

• 调用表达式

  调用或执行函数

• 对象创建表达式

  创建一个新对象并用构造函数初始化

操作符

• 条件式调用

  obj?.name 如果obj为假性值，返回undefined

• in操作符

  let point = {x : 1, y : -1};
  "x" in point //true
  "z" in point //false
  "toString" in point //true 对象继承了这个方法
  
  let data = [7,8,9];
  "0" in data //true 这里检测的是索引
  1 in data //true 数值被转化为字符串
  3 in data // false

• instanceof

  左侧是否为右侧的实例

• typeof

  判断一个值的类型

• delete

  删除对象的属性

  删除数组的元素，但不改变数组长度

• 赋值操作符

  == 与 === != !==

  == 数值相等

  === 强等 数据类型也要相同

• eval()

  参数非字符串 返回该值

  参数字符串，将字符串作为js代码解析，解析失败抛出SyntaxError

• ？？先定义操作符

  let max = maxWidth ?? p.width ?? 500

  第一个没有定义则用下一个

• void 操作符

  返回空

• await 操作符

  异步变同步

语句

• 表达式语句

• 复合语句与空语句

• 条件语句

• 循环语句

  • while

  • do/while

  • for

  • for/of

    不能循环对象，可以循环数组和Map

  • for/in

    可以循环对象

  • for/await 与异步迭代

• 跳转语句

  • break
  • continue
  • return
  • yield - 配合生成器函数
  • throw
  • try/catch/finally

• 其他语句

  • with

    接受一个参数，运行一个代码块，代码块中的代码自动沿用参数的作用域

  • debugger

    断点

  • “use strict”

    开启严格模式

• 非正式语句

字符串

属性

• length

方法

• charAt()

  返回制定位置的字符

  var str = "123456";
  str.charAt(2); // 3

• concat()

  连接字符串

  可以接受多个参数，参数会自动转换为字符串

  var str1 = "123";
  var str2 = "456";
  var result = str1.concat(str2); //123456

• substring()

  截取字符串

  开始位置，结束位置（不包含）

  var str = "qwerty";
  str.substring(0,2);//qw

• substr()

  截取字符串

  开始位置，长度

• indexOf()

  用于确定一个字符串在另一个字符串中出现的位置，-1表示没找到。第二个参数表示搜索开始的地方。

• trim()

  用于去除字符串两端的空格

  • trimStart() 去掉头部
  • trimEnd() 去掉尾部

• split()

  按照规则分割字符串，返回由子字符串组成的数组 ，第二个参数限定返回数组的最大成员数

数组

数组简介

数组是值的有序集合，其中的值叫做元素，每个元素有一个数值表示位置，叫做索引

创建数组

• 数组字面量
• 扩展操作符…
• Array()构造函数
• 工厂方法
  • Array.of()
  • Array.from() - 把类数组转化为真实数组

读取数组

稀疏数组

数组长度

添加和删除

• 添加

  push

  unshift

• 删除

  pop

  shift

  delete

迭代数组

• for
• forEach()

多维数组

类数组对象

• 数组特性

  • length会自动更新
  • 设置length为更小值会截断数组
  • 数组从Array.prototype继承有用方法
  • Array.isArray() 返回true

• 类数组

  不具备以上特性

方法

• isArray() 判断是不是数组

  var arr = [10, 20, 30];
  Array.isArray(arr); // true

• push() / pop()

  • push() 在数组末端加入一个或多个元素，并返回长度
  • pop() 在数组末端删除一个元素，并返回该元素

• shift() / unshift()

  • shift() 在数组前端删除一个元素，并返回该元素
  • unshift() 在数组前端加入一个或多个元素，并返回长度

• join()

  以指定参数作为分割符将所有数组成员连接为一个字符串返回，默认参数为逗号

• concat()

  将新数组添加到原数组后，将返回新数组，原数组不变

• reverse()

  颠倒数组，返回改变后数组，改变原数组

• indexOf()

  查找固定元素在数组中第一次出现的位置，没有返回-1，第二个参数表示搜索开始的地方

函数

函数提升优于变量提升

函数简介

函数是一个JS代码块，定义后可以多次执行或调用

定义函数

• 函数声明
• 函数表达式
• 箭头函数

调用函数

• 函数调用

• 方法调用

• 构造函数调用

• 间接调用

• 隐式函数调用

  get set标记

函数的实参和形参

• 默认参数

• …获取剩下参数

• arguments对象

• 实参解构成形参

闭包

能访问其他函数作用域中变量的函数

函数属性、方法与构造函数

• 属性

  • length - 形参个数
  • name - 定义函数时使用的名字
  • prototype - 获取原型对象

• 方法

  • call()、 apply()

    允许间接调用一个函数，就像这个函数是某个其他对象的方法一样

  • bind()

    在函数f上调用bind()方法并传入对象o，则这个方法会返回一个新函数

  • toString()

    返回一个符合函数声明语句的字符串

  • Function() 构造函数

高阶函数

接受一个函数作为参数并返回一个函数

对象

对象的属性值还是对象，形成链式引用

对象简介

对象是一个属性的无序集合，每个属性都有名字和值

创建对象

• 对象字面量

  const obj = {name : 'zhangsan'}

• new 创建

  const obj = new Object

• 原型创建

  const obj = Object.create({name: 'zhangsan'})

查询和设置属性

• . 操作符
• [key]

删除属性

delete

测试属性

• in

  继承属性和自有属性都是true

• hasOwnproperty方法

  继承属性会返回false

• propertyisEnumerable方法

  是否为可枚举属性

扩展对象

• Object.assign()

  将所有可枚举的自有属性从一个或多个源对象复制到目标对象，并返回修改后的对象

• … 扩展操作符

序列化对象

• JSON.stringify()

  对象转化成字符串

  localstorage 存储

  对象深拷贝

• JSON.parse()

  反之

对象字面量扩展语法

• 简写属性

  key和value 相同

• 计算的属性名

  [变量名]

• 简写方法

• 属性获取和设置方法

Math 对象

提供数学功能

• Math.abs()

• Math.max()

• Math.min()

• Math.floor()： 向下取整

• Math.ceil()： 向上取整

• Math.random()

  返回[0,1)的伪随机数

  function getRandomnumber(min, max){
    return Math.random() * (max - min) + min;
  }

Date 对象

以1970年1月1日00:00:00作为时间零点 （北京时间08时）

• Data.now() 返回时间戳

  console.log(new Date());
  console.loh(new Data(Data.now()));
  var date = new Date();

• getDate() 几号

• getDay() 星期

• getYear() 距离1970几年

• getFullYear() 目前几年

• getMonth() 0 - 11

• getHours() 0 -23

• getMilliseconds()

• getMinutes() 0 - 59

• getSeconds() 0 - 59

• getTime() 返回时间戳

DOM 对象

节点

DOM的最小组成单位叫做节点

节点的类型

• Document： 整个文档树的顶层节点
• DocumentType： doctype标签
• Element： 网页的各种HTML标签
• Attribute： 网页元素的属性 （class）
• Text： 标签之间或标签包含的文本
• Comment： 注释
• DocumentFragment： 文档的片段

节点树

• node.nodeType();

document 对象

获取元素

• document.getElementsByTagName()

  document.getElementsByTagName("div") 

• document.getElementsByID()

• document.getElementsByClassName()

• document.getElementsByName()

• document.querySelector()

  接受一个CSS选择器作为参数，返回匹配该选择器的元素节点，如果有多个节点满足匹配条件，则返回第一个匹配的节点，如果没有发现匹配的节点，则返回null

• document.querySelectorAll()

  返回一个nodeList对象，包含全部。

创建元素

• document,createElement()

  用来生成元素节点，并返回该节点

• document.createTextNode()

  生成文本节点，并返回该节点，参数为文本节点内容

  appendChild()

• document.createAttribute()

  生成属性节点，并返回

  setAttributeNode()

  var text = document.createElement("p");
  var content = document.createTextNode("文本");
  var id = document.createAttribute("id");
  id.value = "root";
  text.appendChild(content);
  text.setAttributeNode(id);
  //<p id = "root"> 文本 </p>

Element 对象

属性

• id

• className

• classList

  方法

  • add()
  • remove()
  • contains()：是否包含某个class
  • toggle()：将某个class 移入或移出

• innerHTML 可以识别标签

• innerText

• clientHeight

  返回整数，包括padding

  document.body.clientHeight 网页实际高度

  document.documentElement.clientHeight 当前窗口高度

• clientWidth

• scrollHeight

  包括溢出部分

• scrollWidth

• scrollLeft

  元素水平滚动条向右滚动的像素数量

• scrollTop

  元素水平滚动条向下滚动的像素数量

• offsetHeight

  CSS垂直高度 包括本身高度 padding border

• offsetWidth

• offsetLeft

  到定位父级左边界的间距

• offsetTop

操作CSS

• setAttribute()

  xx.setAttribute("style", "值")

• 设置style属性

  xx.style.width = 100px;

• CSS text

  xx.style.cssText = "width: 100px";

事件

事件处理

HTML事件

缺点： HTML和JS没有分开

DOM0级事件

缺点： 无法同时添加多个事件

btu.onclick = function(){};

DOM2级事件

btu.addEventListener("click", function(){console.log(1)});
btu.addEventListener("click", function(){console.log(1)});

鼠标事件

• click

• dbclick

• mousedown： 鼠标按下

• mouseup

• mousemove： 鼠标在节点内移动

• mouseenter：鼠标进入一个节点，子节点不算

• mouseleave：鼠标离开节点，离开父节点不算

• mouseover

• mouseout

• wheel：鼠标滚动

键盘事件

• keydown：按下键盘
• keypress：按下有值的键触发（先触发keydown）
• keyup：松开键盘

表单事件

• input： 值发生变化
• select： 选中文本触发
• change： 值发生变化 不会连续触发（失去焦点 ）
• reset：重置表单
• submit：提交数据

Event 事件对象

事件发生以后会产生一个事件对象，作为参数传给监听函数。

属性

• target： 返回触发事件的节点
• type：事件类型
• keyCode：键盘事件中代表每个按键的唯一标识

方法

• preventDefault()： 阻止默认事件
• stopPropagation(): 阻止事件冒泡

事件代理

通过父元素控制子元素的事件

定时器 timer

• setTimeout()：指定某段代码在多少毫秒后执行

  在setTimeout 中 this 指向全局

  方法返回定时器编号

  通过clearTimeout() 取消定时器

• setInterval()： 每间隔多久执行一次

  clearInterval()

防抖

在短时间内连续触发的事件，让他在某个时间期限内只执行最后一次触发

function debounce(fn, delay){
  let timer = null;
  return function(){
    if(timer){
      clearTimeout(timer);
    }
    timer = setTimeout(fn, delay);
  }
};
 window.onscroll = debounce(scrollHandle, 200);

function scrollHandle(){
  let scollTop = document.documentElement.scollTop;
  console.log(scollTop);
}

节流

在短时间内只执行一次

function throttle(fn, delay){
  let valid = true;
  return function(){
    if(!valid){
      return false;
    }
    valid = true;
    setTimeout(function(){
      fn();
      valid = true;
    }, delay);
  };
}

类

类意味着一组对象从同一个原型对象继承属性

es5

es6

• class

• extends

• static

• 为已有类添加方法

  js基于原型的继承机制是动态的

ES6

Babel 转码器

将ES6转换为ES5

let

var 函数级作用域

let 块级作用域

let不存在变量提升

const

常量，声明后不可改变，声明必须立刻初始化

块级作用域

不存在变量提升

对象解构赋值

let {name, age} = {name: "111", age: "22"};

与次序无关，要同名

字符串扩展

• 新的遍历

for..of 

• 模版字符串

  在字符串中嵌入变量 反引号

  `<a href = "${href}">${text}</a>`

• 新的方法

  • includes()： 返回bool 表示是否找到
  • startsWith()：是否在头部
  • endsWith()：是否在尾部
  • repeat(n): 返回新字符串，将原字符串重复n次
  • padStart(n, ‘ab’)：如果字符串不够长，用ab在头部填充
  • padEnd()
  • at(): 返回参数指定位位置的字符，支持负索引（倒数 -1 开始）

数组扩展

• … 扩展运算符
  • 替换apply
  • 合并数组

• 新增方法

  • Array.from()

    将类数组转换为数组

    类数组（arguments，元素集合，伪数组的对象），只能使用数组读取方式和length，不能使用数组方法（push）

  • Array.of()

    将一组数转换为数组

对象的扩展

• 属性简写

• 方法简写

• 属性名表达式

  let propkey = "name"
  let people = {
  	[prokey]: "zhangsan",
  	['a' + 'ge']: 12
  }

• 对象的扩展运算符

函数扩展_箭头函数

不改变this指向

Set

• add()

• delete()

  返回bool

• has()

  返回bool

• clear()

Promise对象

异步编程的解决方案

简单的说，是一个容器，里面保存着某个未来才会结束的事件。从语法上说，他是一个对象，从它可以获取异步操作的消息

可以将异步操作以同步操作的流程表达出来，比避免了层层嵌套的回调函数。

Promise 是一个构造函数，用来生成Promise实例

const promise = new Promise(function(resolve, reject){
  if(success){
    resolve(value);
  }else{
    reject(error);
  }
})
promise.then(function(value){
  //success
}, function(error){
  //failure
});

Async

使异步操作更加方便

将异步操作变为同步操作

放在函数前方

在异步操作前加入 await

Class

静态方法包含this，this指向类而不是实例

静态属性

module

export 输出代码

import 导入代码