javascript学习-基础知识

数据操作常用方法

字符串

1. 把字符串转为大写：toUpperCase()
2. 把字符串转为小写：toLowerCase()

3. 搜索指定字符串出现的位置：indexOf

   
   image.png

4. substring，返回指定索引区间的子串;

   
   image.png

数组

1. 获取数组长度：length

   
   image.png
2. 获取指定元素位置： indexOf

3. 截取数组部分元素：slice()

   
   image.png
   

   如果不给slice传递参数，则复制一个相同的数组

4. 向数组末尾添加若干元素：push()
   把数组最后一个元素删掉：pop()

   
   image.png

5. 向数组头部添加元素：unshift()
   把数组第一个元素删掉：shift()

   
   image.png
6. 对数组进行排序：sort()
7. 数组元素翻转：reverse()

8. 数组元素切片，从指定的索引开始删除若干元素，然后再从该位置添加若干元素：spice()

   
   image.png

9. 把两个数组连接起来返回一个新数组：concat()

   
   image.png
   image.png

10. 将数组元素用指定字符连接起来，返回字符串：join()

    
    image.png

对象

1. 对象属性的访问：object.prop

2. 对象属性的添加和删除：

   
   image.png

3. 判断一个对象是否拥有某一属性（该属性可能是继承来的），返回true 或 false：in

   
   image.png

4. 判断一个对象是否拥有某一属性（该属性是自身拥有的，不是继承的），返回true 或 false：hasOwnProperty()

   
   image.png

map & set

1. map：是一组键值对，具有极快的查找速度

   
   image.png
   

   一个key只能对应一个value，所以多次对一个key放入value，后面的值会把前面的值冲掉

2. set：一组key的集合，不可重复

   
   image.png
   

   重复元素在set中自动过滤

   
   image.png
   add(key)方法可以添加元素到set中，delete(key)方法可以

语句

条件判断

1. if(){...}else{...}

   
   image.png

2. 多行条件判断：

   
   image.png

循环

1. for

   
   image.png

2. for...in

   
   image.png

3. while：在每次循环开始判断条件，条件满足，就不断循环，条件不满足则退出循环

   
   image.png

4. do...while：在每次循环完成时判断条件，该循环体至少执行一次

   
   image.png

函数

1. 定义
   方式一：

   
   image.png
   

   方式二：

   
   image.png
   两种定义完全等价，第二种注意函数体末尾添加分号

2. 关键字 arguments：只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数，常用来判断入参的个数

   
   image.png

3. reset 参数：只能写在最后，前面用...标识，传入的参数先绑定前面定义的参数，多余的参数以数组的形式交给变量reset

   
   image.png

4. return 语句：

   
   image.png
   

   5、变量声明：在函数内部首先申明所有变量，最常见的做法是用一个var申明内部用到的所有变量
   6、全局变量：不在任何函数内定义的变量具有全局作用域，JavaScript默认有一个全局对象wendow，全局作用域的变量实际上是被绑定到window的一个属性

   
   image.png
   image.png

5. 名字空间：全局变量会绑定到window上，不同的JavaScript文件如果使用了相同的全局变量，或定义了相同名字的顶层函数，会造成命名冲突。减少冲突的一个方法是把自己的所有变量和函数全部绑定到一个全局变量中：

   
   image.png

6. 局部作用域：在for循环等语句中是无法定义具有局部作用域的变量的，用关键字let 代替var申明一个块级作用域变量：

   
   image.png
   image.png

7. 常量关键字：const

   
   image.png

8. 方法：绑定到对象上的函数称为方法，内部使用this指向当前对象，可以拿到当前对象的属性

   
   image.png

高阶函数

1. map()：把f(x)作用在数组的每一个元素，且结果生成一个新的数组

   
   image.png

2. reduce：把一个函数作用在这个数组的[x1,x2,x3...]上，这个函数必须接收两个参数，reduce把结果和序列的下一个元素做累计计算

   
   image.png

3. filter()：用于把数组中的某些元素过滤掉，然后返回剩下的元素
   同map类似，数组的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素

   
   image.png

4. sort()：把数组中所有元素转换为String类型，再按照ASCII码排序。还可以接收一个比较函数来实现自定义的排序。
   数字大小写排序：

   
   image.png
   

   忽略大小写，按照字母序排列：

   
   image.png

对象

包装对象：

a. 用parseInt()或parseFloat()来转换任意类型到number
b. 用String()来转换任意类型到string，或者直接调用某个对象的toString()方法
c. 通常不必把任意类型转换为boolean再判断，因为可以直接写if(myVar){...}
d. typeof操作符可以判断出number、boolean、string、function和underfined
e. 判断Array要使用Array.isArray(arr)
f. 判断null要使用myVar === null
g. 判断某个全局变量是否存在用 typeof window.myVar === 'underfined' 
h. 函数内部判断某个变量是否存在用 typeof myVar === 'underfinded'

注意：
number对象调用toString()，需要特殊处理

image.png

Date：用来表示日期和时间

1. 当前时间：

   
   image.png
   

   注意：当前时间是浏览器从本机操作系统获取的时间，不一定准确，因为用户可以把当前时间设定为任何值
   注意：JavaScript的月份范围用整数表示0~11，0表示一月...

2. 创建时间：

   
   image.png

3. 时间戳：时间戳为一个自增的整数，表示从1970年1月1日零时整的GMT时区开始的那一刻，到现在的毫秒数。假设浏览器所在电脑的时间是准确的，那么世界上无论哪个时区的电脑，它们此刻产生的时间戳数字都是一样的，所以，时间戳可以精确表示一个时刻，并且与时区无关。
   获取时间戳：

   
   image.png
   image.png
   

   时间戳转换为时间：

   
   image.png

RegExp：正则表达式

1. 正则表达式基本知识
   a.
   \d，可以匹配一个数字；
   \w，可以匹配一个字母或数字；
   . 可以匹配任意字符；
   \s，可以匹配一个空格（包括Tab等空白符）
   b.
   ，表示任意个字符（包括0个）；
   +，表示至少一个字符；
   ？，表示0个或1个字符；
   {n}，表示n个字符；
   {n,m}，表示n-m个字符
   c.
   [0-9a-zA-Z_]，可以匹配一个数字、字母或者下划线；
   [0-9a-zA-Z_]+，可以匹配至少由一个数字、字母或者下划线组成的字符串；
   [a-zA-Z_$][0-9a-zA-Z_$]，可以匹配由字母或下划线、组成的字符串，也就是JavaScript允许的变量名；
   [a-zA-Z_$][0-9a-zA-Z_$]{0,19}更精确地限制了变量的长度是1-20个字符（前面1个字符，后面最多19个字符）；
   d.
   A|B，可以匹配A或B；
   ^{，表示行的开头，}\d表示必须以数字开头；
   表示必须以数字结束

2. JavaScript创建正则表达式
   a. 直接通过/正则表达式/写出来
   b. 通过new RegExp('正则表达式')创建

   
   image.png
   

   第二种写法，因为字符串转义问题，字符串的两个\实际上是一个\

3. 切分字符串

   
   image.png

4. 分组，提取子串，用（）表示的就是要提取的分组
   如果正则表达式中定义了组，就可以在RegExp对象上用exec()方法提取出子串来，exec()方法在匹配成功后，会返回一个数组，第一个元素始终是原始字符串本身，后面的字符串表示匹配成功的子串；匹配失败时返回null

   
   image.png

5. 贪婪匹配，正则匹配默认是贪婪匹配，也就是匹配尽可能多的字符；

   
   image.png
   

   非贪婪匹配，尽可能少匹配，加？

   
   image.png

6. a. 全局搜索标志：g
   全局匹配可以多次执行exec()方法来搜索一个匹配的字符串。当指定g标志后，每次运行exec()，正则表达式本身会更新lastIndex属性，表示上次匹配到的最后索引：

   
   image.png
   

   b. 标志：i，表示忽略大小写
   c. 标志：m，表示执行多行匹配

JSON（超轻量级的数据交换格式）

数据类型：

image.png

以及上面的组合。
JSON规定了字符集必须是UTF-8，字符串必须用双引号“”，Object的键也必须用双引号“”
把任何JavaScript对象变成JSON，就是把这个对象序列化成一个JSON格式的字符串；如果收到一个JSON格式的字符串，只需要把它反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象。

1. 序列化

   
   image.png
   

   按缩进输出：

   
   image.png
   结果： image.png
   

   第二个参数用户控制如何筛选对象的键值，可以只输出指定的属性，传入数组：

   
   image.png
   结果： image.png
   可以传入一个函数，这样对象的每个键值都会被函数优先处理：
   image.png

2. 反序列化
   拿到JSON格式的字符串，直接用JSON.parse()把它变成一个JavaScript对象：

   
   image.png
   

   JSON.parse()还可以接收一个函数，用来转换解析出的属性：

   
   image.png

面向对象编程

JavaScript不区分类和实例的概念，通过原型（prototype）来实现对象编程。

image.png

最后一行代码把xiaoming的原型指向了对象Student。

image.png
JavaScript的原型链和Java的Class区别就在没有“Class”的概念，所有对象都是实例，所谓的继承关系不过是把一个对象的原型指向另一个对象而已。
image.png

1. 创建对象
   

   a. 创建一个数组对象： image.png
   其原型链： image.png
   

   Array.prototype定义了indexOf()、shif()等方法，因此所有的Array对象上可以直接调用这些方法
   

   b. 创建函数时，函数也是个对象： image.png
   其原型链： image.png
   c. 构造函数
   先定义构造函数： image.png
   其原型链： image.png
   用关键字new来调用这个函数，并返回一个对象： image.png
   用new Students()创建的对象还从原型上获得了一个construction属性，指向函数Student本身
   调用构造函数时千万不能忘记写new。为了区分普通函数和构造函数，按照约定，构造函数首字符应当大写，而普通函数首字母应当小写。
   可以编写一个createStudent()函数，在内部封装所有的new操作。一个常用的编程模式：
   image.png
   这个createStudent（）函数优点：一是不需要new来调用，二是参数灵活，可以不传，也可以传。