js基础知识点

1.var变量

a.变量就是一个用来存储数据的容器。

b.声明变量使用var关键字

c.变量的声明

代码： var name = '右侧叫表达式';
          // var 是声明变量的关键字
          // name 是变量的名字
          // = 赋值运算符
          // =右边 表达式

e.var提升变量，只是把变量提升到作用域的最顶层，变量的赋值不会提升，依然保留在原始位置。

2.内存分配

a.内存中的栈【有序存储】：存储基础数据类型的数据【字符串，数字，布尔值】

b.内存中的堆【无序存储】：存储的是复杂/引用类型的数据【对象，数组】

3.变量命名规范

a.【重点】变量名不可以是js的关键字或保留字

b.变量的名字不可以用数字开头、其他非英文字母的字符，虽然可以用中文做变量名字，但是一般不这样写。

c.变量可以使用$、_、英文字母做变量名

e.命名的时候应该遵循语义化规则：让变量有实际的含义，实在不行可以使用拼音【不推荐】

f.对于多个单词拼接的变量名应该使用驼峰命名法：

        (1).大驼峰命名法：myname => MyName; 每个单词的首字母大写

        (2).小驼峰命名法：myname => myName：除了第一个单词，剩下的单词首字母大写

g.变量的首字母应该对应着数据类型

        (1).字符串：var s_name

        (2).数字: var n_count

4.作用域

a.定义：程序生效的空间

b.全局的作用域：script【脚本】

        (1).顶级对象：window、document

        (2).window又叫BOM

        (3).document又叫DOM

        (4).BOM包含着DOM

c.局部的作用域：function【函数】、module【es6】

        (1).顶级对象：this

        (2).内部声明的变量

        (3).声明在局部作用域中的变量不可以在外部使用，但是如果不使用关键字声明的变量，

                则会被提升到全局作用域中。

        (4).函数天生有返回值，返回值默认是undefined

5.数据类型

a.基本数据类型【内存的栈里面存储】

• 数字

• 字符串

• 布尔值

• 空值 null

• 未定义 undefined

• 不是数字 nan

b.引用数据类型【内存的堆里面存储】

• 对象

• 数组

• 函数

• 正则

6.基本数据类型和引用数据类型【区别】

a.基本数据类型在赋值的时候是在栈里面开一个新的空间存储，多个变量使用同一个值也是对值得深拷贝，每个值拥有独立得存储空间。

b.引用数据类型在赋值得时候是在堆里面开一个空间，把存储空间得标识码赋给了变量，多个变量赋值为同一个对象得时候，只是简单得复用了标识码得引用，俗称浅拷贝。

7.类型转换

1. 字符串->数组

2. 字符串->数字

3. 所有得数据互相之间都可以转换

8.类型转换

1. 字符串->数组

2. 字符串->数字

3. 所有得数据互相之间都可以转换

a.显式转换

很直观的从代码上可以看出来是在转换数据类型。

1. 使用数据的构造函数：String(),Number(),Array()

2. 使用方法，比如转成字符串可以使用 toString 方法

b.隐式转换

1. if的表达式可以隐式转换

2. +任何值和字符串加，都会被转成字符串

3. 除了+，其他的减乘除都是尝试把数据转成数字进行计算。

4. 逻辑运算符也会隐式转换数据

数据类型检测

1. typeof：对基本数据类型检测好用，对于引用数据类型全都是object

2. instanceof：检测一个值是不是属于一个数据原型上的，对于引用数据很精准，对于基本数据类型不精准。

3. constructor：可以检测基本数据和引用数据类型，但是对于空置类型，不能检测出来，因为空值类型没有构造函数

4. Object.prototype.toString.call()：可以检测所有的数据类型

常用的方法【es5】

字符串常用方法

• 合并 除了+号，concat()才是正经的合并字符串的方法

• 复制 repeat(n)

• 查找

  1. indexOf() 找到了返回字符所在的下标，找到第一个匹配的字符串，找不到返回-1

  2. lastIndexOf() 取最后一个匹配字符串下标，也是从左向右

• 删除和修改

  1. replace(target,value) 只能修改匹配到的第一个

  2. replaceAll(target, value) 修改匹配到的所有的字符

• 切割

  1. split('条件') 根据条件进行切割

• 转数组

  1. split('') 传入一个空字符串转成数组

• 截取

  1. slice(开始的下标，结束的下标) 根据下标进行截取

数组的方法

1. 合并

• concat() 可以合并多个数组，不会修改原始数组，会返回一个新数组

1. 查找

• indexOf() 等价于字符串同等方法

• lastIndexOf() 等价于字符串同等方法

1. 去重

• 新创建一个空数组，遍历目标数组，在for中使用新数组indexOf判断包含目标组件的当前项，如果返回-1则把当前项插入到新数组中，如果返回不是-1说明新数组中已经有相同内容了，则不插入。最后新数组的每一项都是不同的，从而实现了数组的去重。

1. 删除和修改

• delete 关键字可以删除某一项元素

• splice(位置下标,删除长度) 删除指定位置的长度

• splice(第几位，0，...插入的值) 指定位置的后面插入元素,个数不限

1. 创建数组

• var arr = [] 字面量形式

• var arr = new Array() 实例化数组

1. 其他的es5里的数组方法

• push 尾部添加，修改原始数据，返回新数组的长度

• pop 尾部删除，并返回删除掉的元素，改变原始数据

• shift 从头部删除元素

• unshift 向头部添加元素

• for 在所有的循环遍历中，只有for是执行最快的。

  • 终止循环 break

  • 跳过本次循环进入下一次循环 continue

• forEach 它没有返回值,但是可以使用return来终止循环

• sort 正序排序

• reverse 倒序排序

• some 只要有一个符合就返回true

• every 必须每一个都符合才返回true，只要有一个不符合就返回false

1. 数组转字符串

• join('') 如果需要转成的字符串有符号连接，可以join('符号')

1. 数组转对象

• 遍历，然后把每一个放在对象里去

对象

1. 合并对象 遍历对象，把对象的属性名和属性值依次按顺序赋给一个新的对象。

2. 其他

• Object.defineProperty 监听对象属性发生改变的方法，也是vue2的数据双向响应的底层原理

• toString 转成字符串

• ofValue 转成字符串

递归

1. 函数自我调用

2. 递归的三大条件：

• 数据结构必须是一致的

• 必须要有结束的判断

• 数据的嵌套层级不固定

一同源策略

a.同源策略是什么？

        （1）同源策略是一种约定，它是浏览器最核心也最基本的安全功能
如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。
可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
它是一个安全策略。所有支持JavaScript的浏览器都会使用这个策略

满足同源的三个条件：
所谓同源是指，域名、协议、端口相同。

b.为什么要同源限制？

同源策略存在的意义： 非同源下的 cookie 等隐私数据可以被随意获取 非同源下的 DOM 可以的随意操作 ajax 可以任意请求的话，用户的各种隐私肯定会泄露，对用户造成不同程度的损失

c.同源策略的限制范围？

不能获取不同源的 cookie，LocalStorage 和 indexDB 不能获取不同源的 DOM() 不能发送不同源的 ajax 请求 （可以向不同源的服务器发起请求，但是返回的数据会被浏览器拦截）

二懒加载

a.什么是懒加载？

懒加载 (Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

2.为什么要用懒加载
能提升用户的体验，不妨设想下，用户打开像手机淘宝长页面的时候，如果页面上所有的图片都需要加载，由于图片数目较大，等待时间很长，用户难免会心生抱怨，这就严重影响用户体验。
减少无效资源的加载，这样能明显减少了服务器的压力和流量，也能够减小浏览器的负担。
防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。
3.懒加载的原理
首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中， 当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

工厂函数和class类

工厂函数

将一系列的属性和方法封装成一个构造函数，使用的时候需要使用new关键字来调用构造函数，目的是为了得到一个独立的实例对象 -js里有内置的构造函数

var obj=new Object()

1.当使用new调用函数之后发生了什么？ -第一步在函数中创建一个对象 -第步函数中的this指向该对象 -第三步把函数中的this返回出去 -第四步使用变量接收构造函数的返回值---实例对象 2.工厂函数优势 -独立的作用域，不会污染全局 -实力出来的对象都是互相独立，互不影响的 3.工厂函数的缺点 -每次实例化都会在内存中开一个新的对象存储，如果大量实例化会占用内容

对象，原型，原型链和构造函数之间的关系

1.对象就是使用构造函数new出来的 2.原型是构造函数的proptotype对象，这里只有function函数才有原型对象。基于它可以实现对象的继承 3.原型链指的是实例对象的本身--proto--对象，--proto--指向的是构造函数的prototype对象，当我们使用对象点一个属性的时候，这个查找属性的过程称为原型链，程序会沿着对象的--proto--对象一直找的过程叫原型链 4.构造函数是new的函数，也是实例对象的--proto--下面的constructor

改变this指向的三种方式

【注意】修改this指向的函数，必须是function函数，因为这些方法来自于prototype对象上的，而箭头函数没有原型对象，所以箭头函数不能改变this

call

1.第一个参数是对象，后面的参数都是独立传入的 2.一旦使用则会立即调用函数

apply

1.第一个参数是对象,后面的参数放在数组里 2.一旦使用则会立即调用函数

bind[es6]

1.第一个参数是对象，后面的参数可以是任意 2.不会立即调用函数，而是返回一个修改了this之后的新函数

class类【es6】

-类的概念：基于面向对象的概念实现的封装。特点是：封装，多态，继承

1.父类不能使用子类的属性，子类可以使用父类的属性

2.子类是通过exends继承父类的属性

3.都有construction

类的底层原理

-es6的类还是基于函数的prototype封装的，他只是工厂函数的语法糖，其底层还是基于函数的封装 -因为是基于prototype对象实现的class，在严格意义上它属于伪类

类的继承

-子类继承于父类使用关键字extends -当使用NEW调用子类的时候，程序会先从子类自身初始化所有的属性和方法，其次猜沿着原型对象找到父类获取父类的属性和方法，如果父类和子类都有相同的属性或方法则使用子类代替父类的。