javascript入学篇，请大佬们指教一下还有什么没学到的重要东西

javascript

javascript是一门什么语言

• javascript原名是livescript ----->花费10天时间
• 创始人：布兰登.艾奇
• 是一门基于对象的语言
• 是一门弱类型语言
• 是一门脚本语言
• 是一门动态类型的语言
• 是一门解释性语言

javascript分三个部分

• ECMAScript js基础语法
• BOM browser object model 浏览器对象模型
• DOM document object model 文档对象模型

js中的变量

• js中定义变量都用 var
• 变量值可以用单一号或者双引号括起来
• 变量声明,没有赋值 var str;
• 变量初始化,有赋值 var str=‘hello’
• 声明变量,一个一个赋值 var str=‘hello’ var num1,num2 num1=num2=10
• 声明变量 var num1=10,num2=20
• 变量名如果重复,代码从上到下执行,上面的代码会覆盖下面的代码
  var num=10; var num=20; 最后结果只会取20

js中注释

• 单行注释 //
• 多行注释 /**/

js六大基础类型

• Number 数字类型
• String 字符串类型
• Object 对象类型
• Boolean 布尔类型 true和false
• null 空类型
• undefined 未定义类型

js代码遵循驼峰命名

• 第二个字母的首字母要大写 var bigNumber=10; var minString=‘hello’

js中判断某个变量是不是属性这个类型,或者是属于哪个类型

• 变量名字 instanceOf 基础类型名字 判断是不是属于这个类型
• typeof(变量名字) 判断属于哪个类型 —>推荐用
• inNaN(变量名字) 判断这个变量是不是非数字类型的变量

js中的数字类型Number常用方法以及特性

js中的字符串类型String常用方法以及特性

• 字符串的长度用length去获取 从1开始 var str=‘hello’ str.length=5
• 字符串通过下标/索引来获取 从0开始 var str=‘wo’ str[0]=‘w’
• 字符串具有不可变性,字符串的值是不能改变的,如果字符串的值发生了变化,是因为字符串的指向发生了改变,并不是值发生了改变
• 通过for循环来遍历,获取所有字符串的值
• 字符串可以看成是多个字符组成的数组
• 字符串可以用单引号或者双引号括起来
• str.length 字符串的长度
• str.concat(‘字符串1’,‘字符串2’,…) 组成一个新的字符串
• str.charAt(索引值)
  返回值就是指定的索引值对应的那个字符串,超出索引,那么就是空字符串
• str.toLowerCase() 转小写
• str.toUpperCase() 转大写
• str.trim() 干掉字符串两端的空格
• str.split(‘要干掉的字符串’,切割留下的个数)
  切割字符串,返回的就是留下后的字符串
• str.slice(开始的索引,结束的索引)
  从开始的索引提取,到结束的索引为止的字符串,返回的就是这个提取后的字符串
• str.replace(‘原来的字符串’,‘新的字符串’) 替换字符串中的值
• str.indexOf(要找的字符串,从某个位置开始的索引)
  返回的就是这个字符串的索引值,没找到就返回-1
• str.fromCharCode(数字1,数组2) 返回的是ASCII码对应的值
• str.join(值) 加入一个值

js中三大类型互相转换

• 其它类型转数字类型parseInt()转整数 parseFloat转小数 Number()转数字类型
• 其它类型转字符串类型 .toString()有意义 .String()没有意义
• 其他类型转布尔类型 Boolean()

js中的运算符

• 加减乘除取余数 + - * / %
• 一元运算符 ++ – num++先计算num,在加1 ++num先自身加1,在计算num
  关系元算法 大于> 小于< 等于== 赋值=
  严格模式等于=== 不严格模式等于== 不等于/去反 !
  逻辑运算符 并且&& 或者|| 取反! 质疑?
  三元表达式 num>0?num:-num 如果num大于0就是num,num不大于0就是-num

js中的分支语句和循环语句

• if(true){代码块} 如果条件为真,就执行代码块
• if(){‘1’}else{‘2’} 如果条件为真,就执行1,如果条件为假,就执行2
  switch(表达式){case1:1;case2:2;default:3} 通常都会加一个break
  如果表达式为case1就执行1,如果表达式为case2就执行2,如果都不是就执行default
• while(条件){循环体}
  先执行条件,如果满足条件,就执行循环体,如果不满足,就不执行循环体
• do{循环体}while(条件)
  先执行循环体,如果循环体满足条件,继续执行循环体,直到不满足条件就不执行循环体
  +for(表达式1,表达式2,…){循环体}
  如果满足多个表达式,就执行一次循环体
  for(var i=0;i++;i<6){循环体} 执行六次循环体,从0开始计算

js中的特殊关键字

• continue continue前面的语句为真,就继续执行下一个语句
• break 如果break前面的语句为真,就不执行下面的语句,如果break前面的语句为假,就继续执行下面的语句,知道语句为真以后才结束
• return 返回/输出上一个语句,不再执行下面的语句/函数

js中的内置对象Array的特性和常用方法 数组对象

• 是一组有序的数据
• 创建方式
  1.通过构造函数创建 var 数组名字=new Array()—>不传值就是空数组
  2.通过字面量创建 var 数组名字=[] —>不传值就是空数组 —>推荐用
• 通过下标/索引来访问,从0开始计算
  var arr=[10,20] arr[0]=10 arr[1]=20
  var arr=new Array(10,20) arr[0]=10 arr[1]=20
• arr.isArray(对象) 判断这个对象是不是数组
• arr.concat(数组1,数组2,数组3,…) 拼接数组,最后返回一个新的数组
• arr.push(值) 把这个值追加到数组中,并且加到数组的最后面
• arr.pop() 删除数组中最后一个值,返回值就是这个删除的值
• arr.reverse() 反转数组
• arr.sort() 排序数组,从大到小排列,或者从小到大排列,不稳定,去mdn查找解决
• arr.forEach(函数) 循环遍历数组中的函数
• arr.indexof(元素值) 返回的是索引/下标 如果不存在,那么就是返回-1
• arr.shift(值) 删除数组中第一个值,返回值就是这个删除的值
• arr.unshift(值)
  向数组中插入一个值,并且插入到数组的最前面,返回值就是这个插入的值
• arr.filter(值) 返回的是数组中每一个值都符合这个值,组成一个新的数组
• arr.join(值) 返回的是一个插入这个值的字符串
• arr.every(函数)
  返回值是布尔类型,函数作为参数使用,函数中有三个参数
  第一个参数是元素的值,第二个参数是索引值,第三个参数就是原来的数组
• arr.splice(开始的位置,要删除的个数,替换的元素的值)
  一般用于删除数组中的元素,或者替换元素,或者插入元素
• arr.slice(开始的索引值,结束的索引值)
  把截取的数组的值放在一个新的数组中,但是不包含结束的索引对应的元素值
• 通过length来获取数组长度 var arr=[1,2,3] arr.length=3
• 通过for循环变量 for(var i=0;i<数组名字.length;i++){}
• 数组中有函数用forEach来遍历
  var arr=[function(){},function(){}]
  arr.forEach(function(ele){ele();})
• Math.abs(x) x取绝对值 Math.abs(-5.5) 输出的就是5.5
• Math.ceil(x) x向上取整 Math.ceil(4.5) 输出的就是5
• Math.floor(x) x向下取整 Math.floor(4.5) 输出的就是4
• Math.max([x]) 数组中,x是最大值 Math.max([1,2,3]) 这个数组的最大值是3
• Math.min([x]) 数组中,x是最小值 Math.min([1,2,3]) 这个数组的最小值是1
• Math.random() 随机数[0-1) 0-1之间的随机数 包括0,不包括1
• Math.sqrt(x) x开平方根 Math.sqrt(64) 输出的就是8

js中的函数Function的特性

• 概念： 把重复的代码封装在函数里,通过函数名字就可以调用这些代码
• 命名函数 function 函数名(){} ----->函数声明
• 匿名函数 function(){} ---->函数声明
• 一个函数最好只要有一个功能
• 函数表达式 var 变量名字=function(){} var 变量名=function 函数名(){}
• 注意：尽量用函数表达式,在ie8中用函数声明可能会报错
• 函数调用 function 函数名(){} —>调用 函数名()
• var 变量名=function(){} —>调用 变量名() -->此时这个变量也是一个函数
• 形参 定义时候的参数 function(x1,x2){}
• 实参 调用时候的参数 function f1(x,y){} f1(2,3)
  注意： 形参定义,实参赋值
  注意： 形参可以是对象,可以是值,可以是变量
  实参可以是值,可以是变量
• 如果一个函数里面的形参定义了,没有赋值,那这个函数就是undefined
  如果一个函数定义了,没有返回值return,那这个函数也是undefined
• 函数作为返回值使用 function f1(){return fn()} -->fn为一个函数
• 函数作为一个参数使用 function f1(fn){ fn()} —>fn也为一个函数
  注意：函数作为参数使用时,不需要那个小括号()
• 函数如果作为参数使用,那这个函数就是回调函数
• 判断是不是一个函数类型 (函数名字 typeof Function)
• 任何的function都是Function(大函数)的实例对象
• 通过arguments来循环变量函数中的参数 -->argument也是一个伪数组---->伪数组也是数组,也能调用数组的方法和属性
• 如果函数有明确的返回值return,一定要用一个变量去接收
  function f1(){return 20;} var ff=f1();
• 一个函数可以调用多次,函数内部的代码只是相当一个工具,可以供多人使用这个工具

js中的全局变量和局部变量

• 写在函数外面的叫全局变量,全局变量具有全局作用域,不能被删除
• 写在函数里面有var的叫局部变量,局部变量具有局部作用域,能被删除
• 写在函数里面没有var的叫隐式全局变量,具有全局作用域,能被删除
• 全局变量：页面不关闭,这个变量就一直占用内存
• 局部变量：只有等你用到这个变量的时候,这个变量才加载,不同的时候,默认删除
• 隐式全局变量：等你用到这个变量的时候,这个变量才加载
• var num=10; 全局变量
• function(){var num=10;} 局部变量
• function(){num=10;} 隐式全局变量
• 隐式全局变量：等你用到这个变量的时候,这个变量才加载

js中的预解析：提前解析代码

• 概念：先调用,在写函数
• 把变量的声明提前—>提前到当前所在的作用域最上面
• 把函数的声明提前—>提前到的当前所在的作用域的最上面

js中创建对象Object的三种方式以及对象的几种特性

• 对象概念: 特指的事物具有属性和方法,是一组无序属性的集合,不能通过for循环遍历,
  只能通过for-in循环遍历
  for(var key in object) console.log(key+’----’+object[key])

1. 通过自定义构造函数创建对象(函数名字首字母大写)
   写法：var obj=new Person(){} obj是实例对象 function Person(){}
   特性： this.属性名字=属性名字; this.方法名字=function(){}
   做了几件事： 1. 在内存中开辟(申请一块空闲的空间),存储创建的新的对象
   2. 把this设置为当前的对象
   3. 设置对象的属性和方法的值
   4. 把this这个对象返回
   调用： this.属性名字; this.方法名字();
2. 通过系统的构造函数创建对象
   写法: var obj=new Object() obj是实例对象
   特性： obj.属性名字=‘属性值’; obj.方法名字=function(){}
   调用： obj.属性名字; obj.方法名字();
3. 通过字面量的方式创建对象
   写法：var obj={} obj是实例对象
   特性： obj.属性名字=‘属性值’; obj.方法名字=function(){}
   调用： obj.属性名字; obj.方法名字();

• 在js中,只要是对象object,只要是对象.出来的都是有意义的,也可以写成对象[]
  案例： obj.name—>obj[name] obj.方法名字()----->obj方法名字

js中的json格式的数据----->json其实也是一个对象

写法： 键:值 ‘key’:‘json[key]’
案例： ‘name’:‘张三’
特性：用冒号:隔开用逗号,结尾 ‘name’;‘张三’,‘age’:10,…
遍历: 通过for-in的方法循环遍历对象中的所有属性和方法,不能用for循环遍历
关于服务端传递json数据格式<以字符串形式的对象> JSON.parse(字符串) 把这个字符串形式的对象转换成一个对象
JSON.stringify(对象) 把这个对象转换为json格式的对象

js中的简单类型和复杂类型以及空类型

• 简单类型：也叫做值类型 Number String Boolean
  值类型的值在栈上存储,值类型的地址也在栈上存储,值类型传递的是值
  var num=10 10是值在栈上存储 num是地址也在栈上存储
• 复杂类型：也叫做引用类型 Object
  引用类型的对象在堆上存储,引用类型的地址在栈上存储,引用类型传递的是地址
  var obj={} {}是对象在堆上存储 obj是地址在栈上存储
• 空类型：null

js是一个单线程运行语言以及js异步加载方法

异步加载： 给script标签加上一个defer="defer"属性 —>只有ie浏览器能用----->标签里面能写js代码
给script标签加上一个async="async"属性 —>除了ie9以下浏览器不能用,其他浏览器都可以使用 ----->标签里面不能写js代码
异步加载： 兼容所有浏览器：动态的给document添加一个script标签,
let script=document.createElement(‘script’) //动态的去加载一个文件
script.type=“texe/javascript”;
script.src=“代码文件名字.js”;
document.head.appendChild(script) //动态的去下载这个文件,需要用到这个文件的时候,这个文件才会下载下来
script.function(){调用代码文件.js里面的函数方法} //确保下载完了以后能调用这些方法 //除了ie浏览器
script.onreadyStateChange=function(){
if(script.readyState==“complete”)||script.readyState==“loaded”{调用代码文件.js里面的函数方法} //ie浏览器
}
if(ie){执行ie的方法}else{执行onload的方法} //兼容所有浏览器

js中的内置对象Date创建方法以及常用的一些方法

• 创建方法： 调用系统的构造函数创建
  var dt=new Date()
• dt.getDate() 获取日期
• dt.getFullYear() 获取年份
• dt.getHours() 获取小时
• dt.getMinutes() 获取分钟
• dt.getDay() 获取星期几,从0开始计算
• dt.getMonth() 获取月份
• dt.Seconds() 获取秒数
• dt.getTime() 也是获取星期几,从0开始计算
• dt.valueOf() 获取毫秒数
• dt.toString() 把获取的时间转为字符串类型
• dt.toTimeString() 获取时间

js中的基本类型和基本包装类型

• 基本类型：没有调用属性和方法
• 基本包装类型：原本是基本类型,但是在执行代码的过程中这个变量调用了属性和方法后,就变成了基本包装类型了

判断是true还是对象

• 如果是一个对象&&true,那么结果就是true
• 如果是一个true&&对象,那么结果就是对象

js中工厂模式创建对象—开辟一块空间,创建多个对象

• function createObject(name,){var obj new Object() return obj }
  var obj1=createObject(‘zs’,15);
  var obj2=createObject(‘ls’,16);
• 工厂模式创建对象和自定义构造函数创建对象的区别：
  工厂模式创建：函数名字小写,需要new一个Object,需要return一下,this是当前实例对象
  自定义构造函数创建:函数名字大写,不需要new一个Object,不需要return一下,this就是这个实例对象

js中三个重要的方法apply() call() bind()

• apply：改变this的指向-------开辟一块空间
  写法：实例对象2.方法名字.apply(实例对象1,[实例1的形参/实参]);
  作用：实例对象1可以调用实例对象2中的这个方法
  写法：函数2.方法名字.apply(函数1,[函数1的形参/实参])
  作用：函数1可以调用函数2中的这个方法
• call:改变this的指向------开辟一块空间
  写法：实例对象2.方法名字.call(实例对象1,实例对象1的形参/实参);
  作用：实例对象1可以调用实例对象2中的这个方法
• bind：复制一份被另外一个使用者----开辟多块空间
  写法：实例对象2.方法名字.bind(实例对象1,实例1的形参/实参);
  作用： 实例对象1就有了实例对象2中的这个方法了
• 注意：以上三种方法中如果实例对象的构造函数有return返回值,需要用一个变量来接收

js中的闭包：嵌套关系的函数/对象中,里面的函数/对象能够访问外面的数据

• 模式：函数模式和对象模式
• 作用、优点、缺点：缓存数据,延长作用域链
• 写法：需要闭包的数据写在里面的函数中,外面的函数调用里面的函数,return数据
• 案例： function a(){
  var flag;
  function b(){flag=10;} b(); return flag;
  };
• 案例： function a(){
  var num=10;
  return function b(){num++; return num;}
  };

js中的沙箱或者叫做黑盒：是一种模拟现实生活的工具

• 作用：在自调用函数里面写代码,可以解决变量名相同导致数据出错的问题
• 写法：(function(){})

js中的递归思想,：自调用函数中一定要有结束条件

• 案例： var i=0;
  function f1(){
  i++;
  if(i<5){f1();} //如果没有if条件,那么这个函数会一直调用下去
  }

js中函数的三个重要成员 arguments length caller

• arguments：遍历实参的个数,遍历伪数组
• length：遍历形参的个数
• caller：调用者(f1函数在f2中调用,那么f1函数的调用者就是f2)

js中的严格模式：严格模式下的函数中的this是指向window的

• 写法： ‘use strict’
• 案例： function f1(){} window.f1(); window可以省略

js中两种编程思想

• 面向过程：自己的事情自己做,注重过程
• 面向对象：自己的事情对象做,注重结果

对象的三个特性：

1. 封装
2. 继承
3. 多态

js中自定义构造函数的prototype constructor

• prototype：自定义构造函数的原型对象---->数据共享,节省内存空间
• constructor: 自定义构造函数的构造器
• prototype指向：指向自己的实例对象中的原型对象__proto__
• constructor的指向：指向自己的构造函数
• 构造函数通过prototype来添加方法和属性
  写法：自定义构造函数名字.prototype.方法=function(){}
  自定义构造函数名字.prototype.属性=‘值’
  注意：如果添加的方法和属性写成对象{}的形式,那一定要手动添加构造器指向函数
  案例： 自定义构造函数名字.prototype={
  constructor:构造函数的名字,
  方法:function(){},
  属性:‘值’,
  }

js中实例对象__proto__

• proto：实例对象的原型对象
• proto 指向：指向自己的构造函数中的prototype原型对象,这个关系叫做原型链

js中的原型链

• 实例对象的__proto__是通过构造函数的ptototype来相互传递数据,这层关系叫做原型链

js中内置对象添加属性和方法

写法： 内置对象名字.prototype.方法名字=function(){}
内置对象名字.prototype.属性=‘值’
案例： Math.prototype.saiHi=function(){console.log(‘说’)}

js中一条很神奇的原型链

实例对象：proto+proto+proto —>
自定义构造函数：prototype+proto+proto —>
Object：proto ---->window---->null
总结：自定义构造函数中的实例对象的__proto__最终指向了null

js中原型的两个作用

• 数据共享,为了节省内存空间
• 继承,也是为了节省内存空间

js中的原型的第一个作用：数据共享,节省内存空间

• 写法：自定义构造函数名字.prototype.方法=function(){}
  自定义构造函数名字.prototype.属性=‘值’
• 注意：如果不希望某些数据共享,可以不用通过原型来添加数据,直接写在自定义构造函数内部就行了

js中实例对象赋值的一个作用域链

• 实例对象赋值的时候,如果有就用自己的,如果没有就从它的自定义构造函数中去找

js中原型的另外一个作用：继承,节省内存空间

• 原型继承–>开辟一块空间
  写法：自定义构造函数名字.prototype.方法=function(){}
  自定义构造函数名字.prototype.属性=‘值’
• 构造函数继承—>开辟多块空间
  写法：调用call,apply,bind这三种方法并且再改变原型指向的时候不传参数
  案例：function Studen(name){Person.call(this,name)}–>先改变指向
  Student.prototype=new Person() //不传值 -->再添加方法
• 组合继承：原型继承+构造函数继承---->开辟一块空间
  写法：先原型继承,再构造函数继承
• 浅拷贝继承—>开辟多块空间
  写法：先定义一个空对象,在通过for-in循环遍历另外一个对象的prototype中的方法和属性再复制一份到这个空对象中
  案例： var obj={} for(var key in Person.prototype){objp[key]=Person.prototype[key]}
• 深拷贝继承—>开辟多块空间
  写法：先创建一个空对象,通过for-in循环遍历另外一个函数中的形参,判断这个形参是对象还是数组还是普通属性,通过这种方法复制一份给这个空对象
  案例： var obj={};
  function extend(a,b){
  for(var key in a){ var item=a[key];if(item instanceof Array){
  b[key]=[]; //数组
  extend(item,b[key])
  }else if(item instanceof Object){
  b[key]={}; //对象
  extend(item,b[key])
  }else{ b[key]=item; //普通属性
  }}};

js中构造函数中的原型对象prototype的指向是可以改变的

• 写法： Student.prototype=new Person();
  Student的prototype此时是指向Person的prototype,所以Stu的实例对象可以访问Per中实例对象的方法和属性

js中构造函数想要共享另外一个构造函数中的数据,并且在给自己添加方法的时候

• 注意：一定要先改变构造函数中的this,在添加数据
  写法： Student.prototype=new Person() //改变指向
  Student.prototype.属性=‘值’ //添加属性
  Student.prototype.方法=function(){} //添加方法

js中把局部变量变成全局变量的方法

• 写法：把局部变量暴露给window成为全局变量
• 案例： (function(win){
  var num=10; //局部变量
  win.num=num; //把num赋值给win.num,最后win.num又赋值给window
  })(window); //此时这个num已经变成了全局变量了

js中正则表达式

• 元字符
  . 表示的是：除了\n以外的任意一个字符,可以是字符,数字,字母,特殊符号

• 表示的是：前面的表达式出现了0次到多次

• 表示的是：前面的表达式出现了1次到多次
  ? 表示的是：前面的表达式出现了0次到1次
  [a-z] 表示的是：小写字母中的一个
  [0-9] 表示的是：数字中的一个
  [A-Z] 表示的是：大写字母中的一个
  [0-9a-zA-Z] 表示的是：数字,字母中的一个
  {0,1} 表示的是：前面的表达式出现了0次到1次
  {1,} 表示的是：前面的表达式出现了1次到多次
  {0,} 表示的是：前面的表达式出现了0次到多次
  {n,m} 表示的是：前面的表达式出先了n次到m次
  {,n} 错误的写法
• 限定符
  | 或者,并集
  & 并且,交集
  ^ 在[]前面是以什么开始,在[]里面是取反
  案例： ¹以数字开始 [^0-9]不是数字
  () 分组,提升优先级,计算的时候先计算小括号里面的
  $ 表示必须以什么结束
  案例： [a-z]$ 表示必须以字母结尾
  ^和$ 严格模式,表示的是必须以什么开始,以什么结束
  案例： ²[a-z]$ 表示的是必须以数字开始,以字母结束
  \d 数字中的任意一个
  \D 非数字中的任意一个
  \s 空白符中的一个
  \S 非空白符中的一个
  \w 非特殊符号中的一个
  \W 特殊符号中的一个
  \b 单词的边界 ‘who are you’

js中常用的正则表达式案例以及一些方法

• 身份证案例： ([1-9][0-9]{14}|([1-9][0-9]{16}[0-9xX]))
• qq号：\d{5,11} 或者 [1-9][0-9]{4,10}
• 邮箱： [0-9a-zA-z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}
• 创建正则表达式对象的两种方法：验证字符串

1. 通过系统的构造函数创建正则表达式
   写法： var reg=new RegExp(/这里面验证字符串/)
2. 通过字面量的方式创建正则表达式
   写法： var reg=/这里面验证字符串/

• 常用方法：
  .test() 验证正则表达式是否分配字符串
  .match() 匹配字符串中符号正则表达式
  ./\d{5}g/ g表示的是全局模式匹配
  ./\d{5}i/ i表示的是不分大小写
  .replace() 替换字符串中的某个字符
  .trim() 干掉字符串两端的空格

ES6

es6的原名

• ECMAScript2016

es6中新增的两种声明变量的方法

• let声明变量
  写法：let num=1;let str=‘hello world’;
  特点：

1. let声明的变量不能够重复(在同一个作用域内),否则会报错
   let str=‘hello’ let str=‘world’ //报错,因为变量名重复
2. let声明的变量不存在预解析
   console.log(str) let str=‘hello world’; //报错,因为变量str存在预解析
3. 默认let声明的变量存在一个块级作用域,外边不能访问这个变量
   for(let i=0;i<6;i++){} console.log(i) //报错,因为i存在块级作用域

• const声明变量
  写法： const num=1; const str=‘hello world’;
  特点：

1. const声明的变量一定是常量,并且不允许重新赋值
   const n=1; n=2; console.log(n) //报错,因为变量n重新赋值了
2. const声明的变量必须初始化
   const n; //报错,因为变量n没有初始化

es6中新增的块级作用域

• 块内部定义的变量,在外边是不可以访问的
  if(true){let flag=123} console.log(flag) //报错,不能在外边访问
• 一些分支语句中定义的变量,在外边也不可以访问
  for(let i=0;i<2;i++){}console.log(i) //报错,i存在块级作用域
• 在块级作用域内部,变量只能先声明再使用
  if(true){console.log(flag) let flag=123} //报错,不存在预解析

es6中的解构赋值

• 字符串的解构赋值
  let a=1,b=2,c=3;
• 数组的解构赋值
  let [a,b,c]=[1,2,3];
  let [a,b,c]=[1,2,]; —>这个变量c就是未初始化
  let [a=10,b,c]=[,2,3] —>这个变量a是直接赋值了,而b,c是后来才赋值的
• 对象的解构赋值
  let {obj,obj1}={obj:‘hello’,obj1:‘world’} //正序赋值
  let {obj,obj1}={obj1:‘world’,obj:‘hello’} //反序赋值
  let {name,age}=json json={name:‘zs’,age:18} //通过对象正序赋值
  let {name,age=18}=json json={name:‘zs’} //通过对象反序赋值
  let {name,age:myage}=json json={name:‘zs’,myage:18} //变量名重新赋值
  注意：对象赋值的时候,是跟先后顺序没有关系的
• 函数的解构赋值(主要针对形参)
  function({a,b=‘5’}){console.log(a,b)} //注意,这个a,b不能在外边访问

es6中的剩余运算符和函数新增的特性

• 写法： … <三个点>
• 函数中的剩余运算符： function f1(a,b,…c){} f1(1,2,3,4,5)
  此时这个c就代表3,4,5这三个实参
• 函数新增的特性： 函数的形参后面可以接一个逗号,不会报错
  function f1(a,b,){} f1(1,2)
• 对象中函数新增的特性：
  原来的写法： let obj={函数的名字:function(){}}
  es6的写法： let obj= {函数名字(){}}
• 函数新增的特性：函数里面的参数默认已经定义了,不能在使用let const去定义
• 函数新增的特性：函数的形参能够直接赋值,而不是等到调用函数的时候再去赋值

es6中的箭头函数

• 写法： 函数名字() => {返回值} 小括号里面可以传形参
  箭头函数特性1：箭头函数中的this指向的是最外面的function
  解析：这个this是定义函数时的this,而不是运行时所在的对象
  案例： function f1(){
  setInterval(function(){console.log(this)},1000)
  //这个this指的是window,而不是f1这个函数
  }
  案例： f1() => {setInterval(()=>{console.log(this)})}
  //这个this指的是f1这个函数,而不是window
  箭头函数特性2：箭头函数中不用arguments来遍历实参,而是用剩余运算符
  案例：function f1(a,b){console.log(this.arguments)} //es5
  案例：f1(a,b)=>{console.log(…args)} //es6
  箭头函数特性3：箭头函数不能当构造函数

es6中的字符串模版和拼接字符串

• 字符串模版写法： 模版内容
• 拼接字符串写法：${数据内容}
• 拼接字符串es5案例: var obj={name:‘zs’} var obj1={name:‘ls’}
  var arr=[“obj.name”+‘obj1.name’]
• 拼接字符串es6案例： let obj={name:‘zs’} let obj1={name:‘ls’}
  let arr=[$obj.name+${obj1.name}]

es6中字符串新增的一些方法和属性

• str.includes(要找的字符串) 返回值是布尔类型
  判断这个字符串中有没有这个字符串数据
• str.indexOf(要找的字符串) 有就返回对应的所引值,没有就返回-1
  判断这个str中你要找的字符串的位置在哪里
• str.starsWith(字符串)
  判断这个str是不是以这个字符串开头的
• str.endsWith(字符串)
  判断这个str是不是以这个字符串结尾的
• str.repeat(字符串,重复的次数)
  让str中的这个字符串重复多少次

es6中数组新增的一些方法和属性

• arr.forEach(function(val,index,arr){},window)
  作用：循环遍历数组中的每个值
  第一个参数是value, 数组中对应的值
  第二个参数是index,这个值在数组中的索引位置
  第三个参数是arr,arr就是原来完整的这个数组
  注意：forEach()第二个参数就是你写什么,这个this就默认是什么
  注意：forEach()没有返回值,不需要变量去接收
• arr.map(function(val,index,arr){})
  作用：当没有return的时候,就相当于forEach(),如果有return的时候,需要一个变量来接收,并且这个变量就是return后面的值组成的新的数组
  案例： let arrAr=arr.map(function(val,index,arr){return 数据})
  console.log(arrAr) //输出的是一个数组[数据,数据,数据,…]
• arr.filter(function(val,index,arr){})
  作用：过滤一些不合格的元素,如果回调函数返回true,就留下来
  案例: let arrAr=[{name:‘zs’,hot:true},{name:‘ls’,hot:false}]
  arrAr.filter((val,index,arr)=>{return arrAr.hot})
  此时输出的就是第一个对象,第二个对象会被过滤掉
• arr.some((val,index,arr)=>{return val=‘你要查找的字符串’}) 返回布尔值
  查找单个数据,数组里面某一个元素符合条件,返回true,不符合条件,就返回false
  案例： let arrAr=[‘q’,‘w’,‘e’]
  arrAr.some((val,index,arr)=>{return val=‘w’}) //输出的是true
• arr.every((val,index,arr)=>{})
  查找多个数据,数组里面多个元素符合条件,返回true,不符合条件,就返回false
  案例： let arrAr=[‘q’,‘w’,‘e’]
  arrAr.every((val,index,arr)=>{return val===‘w’&&val===‘e’})//输出true
• findInArray(数组名字,‘查找的字符串’) 返回的是一个布尔值
  案例： let arr=new Array(q,w,e)
  findInArray(arr,‘w’) //输出的是true findInArray(arr,‘r’) //输出的是falase
• 循环遍历数组中的数据可以用for–of–
  写法：for(let item of arr.keys())

1. arr.keys()数组中数据对应的索引值
2. arr.values()数组中的数据
3. arr.entries() 数组中的某一项

• Array.from(不是数组的数据)
  作用：把一个不是数组的数据转换成一个数组,从而可以调用数组中的方法
  案例： function(){console.log(arguments) let args=Array.from(arguments) args.push(6)}
  解析：本来arguments是不可以调用数组的方法,通过from把arguments转换成数组后就能调用数组的方法了
• arr.fill(‘填充的字符串’,开始位置的索引,结束位置的索引)
  填充一个字符串加入到arr中

es6中对象新增的方法

• Object.is(‘字符串’,‘字符串’)
  判断两个字符串是不是相等的关系

es6中promise对象

• 创建方法：let promise=new Promise()
• promise方法中第一个参数是resolve—>成功状态 reject—>失败状态
  案例：let romise=new Promise(function(resolve,reject){
  if(a=10){resolve(‘成功了’)}else{reject(‘失败了’)}
  })
  解析：如果条件等于10,就执行resolve方法中的内容,如果添加不等于10,就执行reject方法中的内容
• promise.then(res()=>{}) then()方法执行成功后的函数
• promise.catch(rej()=>{}) catch()方法执行失败后的函数
• promise.then(res()=>{}).catch(rej()=>{}) 可以写成连点的方式
• promise.resolve(‘执行成功后的内容’) —>相当于 .then()
• promise.reject(‘执行失败后的内容’) —>相当于 .catch()
• promise.all([数组])
  promise.all([p1,p2,p3]) 把promise打包,扔到一个数组中去,打包完,返回的还是一个promise对象,但是要确保数组中所有的数据都是发送成功(resolve)的状态
• promise.race([数组])
  promise.race([p1,p2,p3])把promise打包,扔到一个数组中去,打包完,返回的还是
  一个promise对象,只要保证数组一个数据是发送成功(resolve)的状态,如果某个数据
  是失败(reject)状态,那么这个数据是不会返回的

es6中的模块化

• 指定输入的代码写法：import ‘文件地址’ //最好是相对路径
• import {模块代码} from ‘文件地址’ //最好是相对路径
• import ‘https://code.jquery.com/jquery-3.3.1.js’ //绝对路径案例
  案例：import {a,b} from ‘index.js’ const a=1; const b=2;
  案例：import ‘index.js’
  注意：import引入的文件不管你导入几次,都只会执行一次结果
  注意：当通过script标签引入import '文件地址’的时候,一定要给script标签加一
  个 type=‘module’ 这个属性
• 指定输出的代码写法： export {模块代码}
  案例： export {a,b} const a=1; const b=2;
• 输出的代码可以重命名写法： 通过 输出变量 as 改名后变量的名字
  案例： export {a as a1,b as b1}
  import {a1,b1} from ‘index.js’
  注意：访问的时候,也就import的时候一定要通过as后面的名字来访问这个变量,
  如果通过原变量名字访问,会报错
• 关于export default的一个解释
  写法： export default 变量值; //导出
  import 自定义名字; //导入
  特点：如果用default的话,就不需要一个对象{}来定义
• import会提升代码,把代码放到最上面,并且先执行,就间接存在一个预解析
• import()方法
  作用：动态的去加载一个文件,返回值是一个promise对象
  写法：import(‘文件地址’).then(res=>{‘成功了’}).catch(rej=>{‘失败了’})

es6中 class 类的概念

• 写法1： class 自定义名字 {sayhi(){}} //对象的形式
• 写法2： class Person{sayhi(){}study(){}} //中间不同逗号隔开
  自定义构造函数案例： function Person(name){
  this.name=name;
  this.sayHi=function(){};
  this.study=function(){}}
  class 函数案例： class Person{sayHi(){}study(){}}
  //不用逗号隔开,function省略不写
• class函数中默认有一个set函数和一个get函数
  set：设置/存值一个属性或方法
  get：获取/去值一个属性或方法
  案例： class Person{
  set aa(){console.log(‘设置了一个属性1’)}
  get aa(){console.log(‘获取到了aa函数中的属性1’)}
  }
• class 类的继承
  写法：class 子类函数名字 extends 父类函数名字{super(子类中的属性)}
  写法：class 子类函数名 extends 父类函数名 {super.子类方法名()}
  //这个super就是继承子类函数中的属性和方法
  案例： class Person{ //父类 被继承
  constructor(name){
  this.name=name;
  }
  showName(){
  return 名字为:${this.name};
  }
  }
  class Student extends Person{ //Student继承Person中的方法和属性
  constructor(name,skill){
  super(name); //Student调用Person里面的name属性
  this.skill=skill; //Student自己定义的一个skill属性
  }
  showName(){
  super.showName(); Student调用Person里面的showName()方法
  }
  showSkill(){
  return 我的名字是:${this.name}; //Student自己定义的方法
  }
  }
  let stu=new Student(‘zs’,‘吃东西’); //Student的实例对象

es6中的Symbol另外一个基础类型数据---->定义的是私有的数据

• 写法：let symbol=Symbol(‘数据’) //不需要new,其他类型需要new
• 在json对象中特点：如果在json格式的数据中,symbol作为key出现,那么在for-in循环中是不能够遍历这个symbol基础类型数据的
  案例：let symbol=Symbol(‘b’);
  let json={
  a:'ls ',
  [symbol]:‘zs’ //变量作为key使用时,需要加一个中括号,里面也可以拼接
  }
  for (let item in json){console.log(item)}
  //只会输出a的值,变量symbol不会输出,因为这个变量是json这个对象私有的数据

es6中generator函数

• 写法： function * 函数名字(){yield ‘数据1’; yield ‘数据2’…}
• 调用：let gen=generator(); 这个gen就是函数名字
  gen.next() //调用数据1
  gen.next() //调用数据2
  …

es6中的async异步函数---->不需要等待执行过程,直接运行结果

• 写法：async function fnName(){
  let async=await ‘文件名字’ //执行成功状态的数据
  let async1=await ‘文件中的数据’
  throw new Error(‘字符串’) //执行失败状态的数据
• 特点：await只能放在async异步函数里面,相比generator,async函数的语义化更
  强,await后面可以是一个promise对象,也可以是任意类型的数据,async函数
  返回的是一个promise对象,只要await语句后面的promise对象中的数据变为
  reject(失败状态)那么整个async函数就会强制中断,不再执行后面的数据
  }

es6中的Set对象,类似一个数组,因为Set对象有长度length

• 写法： let set=new Set([‘数据’])//数据里面存放数据,但是返回的是一个对象
• 案例：let set =new Set([1,2,3])
• Set常用方法：

1. set.add(‘数据’) 添加一个数据到Set的实例对象中
2. set.delete(‘数据’) 在Set的实例对象中删除一个数据
3. set.clear(‘数据’) 请求所有Set的实例对象中的数据
4. set.han(‘数据’) 判断Set的实例对象中有没有这个数据
5. set.size() 判断Set中数据的个数

es6中Map对象,类似json对象,单json的key只是字符串,而Map的key可以是任意类型的数据

• 写法： let map=new Map()
• 常用方法：

1. map.set(key,value) 设置一个map对象的key和value
2. map.get(key) 获取一个map对象的key

DOM和BOM

操作dom节点

• nodeName 节点名字 1—大写的标签名字 2—属性节点 3—文本节点–#text
• nodeValue 节点的value值 1–标签节点–null 2—属性节点 3—文本节点
• nodeType 节点类型 1—标签 2—属性 3—文本
• appendChild() 追加一个子节点
• removeChild() 移除一个子节点
• replaceChild() 替换一个子节点
• insertBefore() 在指定的地方追加一个子节点
• createElement() 创建元素
• createTextNode() 创建文本节点
• createAttribute(‘名字’) 创建自定义属性
• getAttribute(‘名字’) 得到自定义属性的值
• setAttribute(‘名字’,‘值’) 设置自定义属性的值
• removeAttribute(‘名字’) 移除自定义属性(包括自身的属性)
• 节点12个单词
  parentNode–父节点
  parentElement–父元素
  childNodes–子节点
  children–子元素
  firstChild–第一个子节点 ----IE8中是第一个子元素
  firstElementChild–第一个子元素 ----ie8中是undefined
  lastChild–最后一个子节点 ----IE8中是最后一个子元素
  lastChildElement–最后一个子元素 ----ie8中是undefined
  previousSibling–前一个兄弟节点 ----IE8中是前一个子元素
  previousElementSibling–前一个兄弟元素 ----ie8中是undefined
  nextSibling–后一个兄弟节点 ----IE8中是后一个子元素
  nextElementSibling–后一个兄弟元素 ----ie8中是undefined
• 兼容代码----以第一个为例
  function getFirstElementChild(element) {
  if(element.firstElementChild){//true—>支持
  return element.firstElementChild;
  }else{
  var node=element.firstChild;//第一个节点
  while (node&&node.nodeType!=1){
  node=node.nextSibling;
  }
  return node;
  }
  }

操作dom元素的一些常用方法

• browser 浏览器
• element 元素
• document 文档
• getElementById(‘标签的id值’) 获取单个带有id值的标签
• getElementsByTagName(‘标签名’) 获取多个标签名
• getElementsByClassName(‘标签的class值’) 获取多个带有class值的标签
• getElementsByTagNameNs(‘标签的name值’) 获取多个带有name值的标签
• querySelector(‘选择器的名字/#’) 获取单个带有这个选择器的标签
• querySelectorAll(‘选择器的名字/.’) 获取多个带有这个选择器的标签

操作BOM页面的三大家族/系列

• offset系列 -----获取元素的宽高
  offsetHeight 元素的高
  offsetWidth 元素的宽
  offsetTop 元素距离页面y之间的距离/不包括元素自身的高度
  <脱标>margin+top <不脱标>margin+top+padding+border
  offsetLeft 元素距离页面x之间的距离/不包括元素自身的宽度
  <脱标>margin+left <不脱标>margin+left+padding+border
• scroll系列 -----获取元素卷曲出去的宽高
  scrollHeight 元素卷曲出去的高度
  注意：如果元素的内容小于元素的实际高度,那么就是这个值就是元素的实际高度,并且不包括元素的边框
  scrollWidth 元素卷曲出去的宽度
  注意：如果元素的内容小于元素的实际宽度,那么就是这个值就是元素的实际宽度,并且不包括元素的边框
  scrollTop 元素卷曲出去的高度与y之间的距离
  scrollLeft 元素卷曲出去的宽度与x之间的距离
• client系列 -----元素的可视区域
  clientWidth 可视区域的宽度/不包括元素的边框
  clientHeight 可视区域的高度/不包括元素的边框
  clientLeft 左边边框的宽度—谷歌,ie8支持
  clientTop 上边边框的宽度—谷歌,ie8不支持
• Browser提供的方法
  pageX 浏览器页面的横坐标—ie8不支持
  pageY 浏览器页面的纵坐标—ie8不支持

获取body,title,html标签及内容

• document.body 获取body标签
• document.title 获取页面title值
• document.title=‘值’ 修改title的值
• document.documentElement 获取html标签中内容

设置元素文本内容

• 对象.innerHTML=‘标签及内容’ ---->推荐使用 —>不会显示标签 -->都支持
• 对象.contentText=‘标签及内容’ ---->会显示标签 ---->火狐不支持
• 对象.innerText=‘标签及内容’ —>会显示标签 —>ie8不支持

改变元素属性的三种特殊情况

• 对象.selected=boolean值 true表示强制选中 false表示不选中
• 对象.disabled=boolean值 true表示强制禁用 false表示不禁用
• 对象.checked=boolean值 true表示强制选中 false表示选中

事件的三种方法

• 对象.addEventListener(‘带on事件’,‘处理函数’,false) 绑定事件–>冒泡阶段
• 对象.removeEventListener(‘事件类型’,‘事件名字’) 解绑事件
• window.cancleBubble=true 阻止事件冒泡 —>捕获阶段

• 对象.attachEvent(‘没有on事件’,‘处理函数’) 绑定事件
• 对象.datachEvent(‘没有on的事件’,‘事件名字’) 解绑事件
• event.stopPropagation 阻止事件冒泡

• 对象.on事件=处理函数 绑定事件
• 对象.on事件=null 解绑事件

• 阻止标签的默认行为,一般是阻止a标签的默认跳转
• return false
• event.preventDefault

事件的三个阶段,以及三个要素

• 捕获阶段 1 true 从外向内
• 发展阶段 2
• 冒泡阶段 3 false 从内向外
• 判断事件在哪个阶段
  event.eventPhase(‘函数名字’) —>ie8不支持
  window.event.eventPhase —>谷歌,火狐不支持
• 事件源,事件触发,事件响应

一个函数名,一个元素,注册多个不同事件

• 对象.on事件=f1,对象.on事件=f1,对象.on事件=f1,
• 利用switch(event.type){case:;case:;case:;}

元素创建的三种方式

• document.write(‘标签及代码’)
• 对象.innerHTML=‘标签及代码’ —>推荐使用 —>不显示标签
• var obj=document.createElement(‘标签及代码’)

有则创建,无则删除

• if(!对象){创建}—>推荐用
• if(对象){删除}

元素隐藏的几种方式

• 对象.style.display=‘none’ ---->不占位
• 对象.style.visibility=‘hidden’ ---->占位
• 对象.style.opacity=0 ------>占位
• 对象.style.height=‘0px’ 对象.style.border=‘0px’ ----->占位

js是一门动态类型的语言特点

• 对象.οnclick=function(){} 可以写成
  对象[‘onclick’]=function(){}或者写成对象[‘on’+‘click’]=function(){}

h5新增的四个处理类样式方法

• 对象.classList.add(‘类样式名字’) 添加一个类样式
• 对象.classList.remove(‘类样式名字’) 移除一个类样式
• 对象.classList.toggle(‘类样式名字’) 切换一个类样式
• 对象.classList.contains(‘类样式名字’) 判断有没有这个类样式

dom中一些常用的事件

• onclick 鼠标点击事件
• onmouseover 鼠标进入事件 触发多次
• onmouseout 鼠标离开事件 触发多次
• onmouseenter 鼠标进入事件 触发一次
• onmouseleave 鼠标离开事件 触发一次
• onblur 失去焦点事件
• onfocus 获得焦点事件
• onkeyup 键盘抬起事件
• onkeydown 键盘按下事件
• ondblclick 鼠标双击事件
• onload 页面加载完毕在执行里面的程序事件
• onunload 页面没有加载完毕就执行的程序事件
• onreadystatechange 状态改变---->发起ajax请求
• onscroll 监听页面滚动条发生改变事件
• onresize 监听页面尺寸/大小发生改变事件

放大镜算法

• 小图/小图中的某个点=大图/大图中的某个点

创建定时器的两种方法

• var 定时器名字=setinterval(定时器函数,定时器时间) 创建重复的定时器
• clearInterval(定时器名字) 清理重复的定时器
• var 定时器名字=setTimeout(定时器函数,定时器时间) 创建一次性的定时器
• clearTimeout(定时器名字) 清理一次性的定时器

封装动画函数

• function animate(){} 定时一个animate动画
• animate() 调用这个动画函数

js中控制台打印错误消息和正确消息以及警告消息

• console.log(‘打印正确消息’)
• console.error(‘打印错误消息’)
• console.warn(‘打印警告消息’)

---

1. 0-9 ↩︎

2. 0-9 ↩︎