JavaScript学习总结

1 对象

1.1 JavaScript创建对象

1.1.1 字面量方式

1、直接通过new object()创建：

var person = new object()
person.name = '张三'
person.age = 18

person.sayName = function() {
    console.log(this.name)
}

2、通过简写形式对象字面量来创建：

var person = {
    name: '张三'
    age: 18
    sayName: function() {
        console.log(this.name)
    }
}

1.1.2 工厂函数

function createPerson(name, age) {
    return {
        name: name,
        age: age,
        sayName: function() {
            console.log(this.name)
        }
    }
}

生成实例对象：

var p1 = createPerson('张三', 18)
p1.sayName()

1.1.3 构造函数

function Person(name, age) {
    this.name = name
    this.age = age
    this.sayName = function() {
        console.log(this.name)
    }
}

生成实例对象：

var p1 = new Person('张三', 18)
p1.sayName()

1.1.4 原型：prototype

JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。 这个对象的所有属性和方法，都会被构造函数的实例继承。

这也就意味着，我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。

// 私有成员（一般就是非函数成员）放到构造函数中
function Person(name, age) {
    this.name = name
    this.age = age
}

// 共享成员（一般就是函数）放到原型对象中
Person.prototype = {
    constructor: Person,  // 手动将 constructor 指向正确的构造函数
    type: '学生',
    sayHello: function() {
        console.log('我叫' + this.name + '，今年' + this.age + '岁。')
    }
}

1.2 ES6中的类和对象

1.2.1 类：class

在 ES6 中新增加了类的概念，可以使用 class 关键字声明—个类，之后以这个类来实例化对象。

• 类 抽象了对象的公共部分，它泛指某一大类（class）
• 对象 特指某一个，通过类实例化一个具体的对象

面向对象的思维特点：

• 抽取(抽象)对象共用的属性和行为组织(封装)成—个类（模板）
• 对类进行实例化,获取类的对象

1.2.2 对象：object

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的：

• 属性：事物的 特征，在对象中用 属性 来表示（常用名词）
• 方法：事物的 行为，在对象中用 方法 来表示（常用动词）

1.2.3 创建类和对象

// 声明一个类
class ClassName {
    // class body
}

// 创建实例
let obj = new ClassName();

1.2.4 类 constructor 构造函数

constructor() 方法是类的构造函数(默认方法)，用于传递参数,返回实例对象，通过 new 命令生成对象实例时，自动调用该方法。如果没有显示定义, 类内部会自动给我们创建一个constructor()

class Person {
    constructor(name, age) {  // constructor 构造方法或者构造函数
        this.name = name;
        this.age = age;
    }
    sayName() {
        console.log('我叫' + this.name);
    }
}

// 创建实例
let zhs = new Person('张三', 18);
zhs.sayName();

注意：

• 通过 class 关键字创建类, 类名我们还是习惯性定义首字母大写
• 类里面有个 constructor 函数,可以接受传递过来的参数,同时返回实例对象
• constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数，类也会自动生成这个函数
• 生成实例 new 不能省略
• 最后注意语法规范, 创建类：类名后面不要加小括号。生成实例：类名后面加小括号, 构造函数不需要加 function
• 方法之间不能加逗号分隔，同时方法不需要添加 function 关键字。

1.2.5 类的继承

1.2.5.1 继承

程序中的继承：子类可以继承父类的一些属性和方法。

// 父类
class Father {  
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log('我叫' + this.name);
    }
}

// 子类继承父类
class Son extends Father {
    // 继承了父类的属性和方法
}

// 实例化子类
var zhs = new Son('张三')；
zhs.sayName();

1.2.5.2 super关键字

super 关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数，也可以调用父类的普通函数

// 父类
class Father {  
    constructor(name) {
        this.name = name;
    }
    sayName() {
        console.log('我叫' + this.name);
    }
}

// 子类继承父类
class Son extends Father {
    constructor(name, myname) {
        this.myname = myname;
    }
    sayMyname() {
        console.log('我叫' + this.myname + '，是' + super(name) + '的儿子');
    }
}

// 实例化子类
var zhs = new Son('张三')；
zhs.sayName();
zhs.sayMyname();

2 基本操作

2.1 number（数值）

js不区分小数和整数，Number

123        // 整数123
123.1      // 浮点数123.1
1.123e3    // 科学计数法
-99        // 负数
NaN	       // not a number
Infinity   // 表示无限大

2.2 字符串

'abcd'   // 单引号
"abcd"   // 双引号

2.3 布尔型

true
false

2.4 逻辑运算

&&  // 两个都为真，结果为真
||  // 一个为真，结果为真
! 	// 真即假，假即真

2.5 比较运算符

=   // 
1   // "1"
==  // 等于（类型不一样，值一样，也会判断为true）
=== // 绝对等于（类型一样，值一样，结果为true）

这是一个JS的缺陷，坚持不要使用 == 比较

注意：

• NaN === NaN，这个与所有的数值都不相等，包括自己
• 只能通过isNaN（NaN）来判断这个数是否是NaN

2.6 浮点数问题

尽量避免使用浮点数进行运算，存在精度问题

2.7 null 和 undefined

null  // 空
undefined  // 未定义

2.8 数组

Java的数组必须是相同类型的对象~，JS中不需要这样

// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
// 第二种定义方法
new Array(1,2,3,4,5,'hello');

注意：取数字下标：如果越界了，就会 报undefined

2.9 对象

对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个属性不需要逗号

// 创建对象
var person = {
	name:'Tom',
	age:3,
	tags:['js','java','web','...']
}
// 取对象值
person.name
> "Tom"
person.age
> 3

2.10 use strict（严格检查格式）

// 'use strict'严格检查模式，预防JavaScript随意性导致的一些问题
// 必须写在JavaScript的第一行
'use strict'

• 局部变量建议使用let去定义

3 数据类型

3.1 字符串

3.1.1 字符串定义

// 方式一(推荐):  
var str = ‘hello’；    //基本类型 定义了一个字符串变量str，内容为'hello'

// 方式二: 
var str = new String(“hello”);       //引用类型 定义一个字符串变量str，内容为hello，
// 注意: 此刻str为引用类型(object对象)用new产生的变量都是引用类型的变量，也叫对象
 
// 方式三: 
var str = String(‘hello’);
// 基本类型: string, number, boolean, undefined,null等 引用类型/对象: Array , Date, Object, String, Function等

3.1.2 字符串对象属性

属性	描述
constructor	对创建该对象的函数的引用
length	字符串的长度
prototype	允许您向对象添加属性和方法

3.1.3 字符串对象方法

方法	描述
anchor()	创建 HTML 锚
big()	用大号字体显示字符串
blink()	显示闪动字符串
blod()	使用粗体显示字符串
charAt()	返回在指定位置的字符
charCodeAt()	返回在指定的位置的字符的 Unicode 编码
concat()	连接字符串
fixed()	以打字机文本显示字符串
fontcolor()	使用指定的颜色来显示字符串
fontsize()	使用指定的尺寸来显示字符串
fromCharCode()	从字符编码创建一个字符串
indexOf()	检索字符串
italics()	使用斜体显示字符串
lastIndexOf()	从后向前检索字符串
link()	将字符串显示为链接
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式匹配的值
slice()	提取字符串的片段，并在新的字符串中返回被提取的部分
small()	使用小字号显示字符串
split()	把字符串分割为字符串数组
strike()	使用删除线显示字符串
sub()	把字符串显示为下标
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
sup()	把字符串显示为上标
toLocaleLowerCase()	把字符串转换为小写
toLocaleUpperCase()	把字符串转换为大写
toLowerCase()	把字符串转换为小写
toUpperCase()	把字符串转换为大写
toSource()	代表对象的源代码
toString()	返回字符串
valueOf()	返回某个字符串对象的原始值

3.1.4 常用方法

1、字符串长度

// length 属性返回字符串的长度
var str = 'hello';
var len = str.length;

2、字符串查找

// 1、indexOf() 返回字符串中指定文本首次出现的索引，如果没找到就返回-1
// JavaScript 中索引从零计算位置
var str = 'hello world,hello tomorrow';
var pos = str.indexOf('hello');

// 2、lastIndexOf() 返回指定文本在字符串中最后一次出现的索引，如果没找到则返回-1
var str = 'hello world,hello tomorrow';
var pos = str.lastIndexOf();

// 3、search() 检索指定值的字符串，并返回匹配的位置
var str = 'hello world,hello tomorrow';
var pos = str.search('world');

3、提取部分字符串

// 字符串的提取有三种方法
// start：起始位置 end：结束位置 length：截取长度
var str = 'hello world,hello tomorrow';

// 1、slice()
slice(start,end)     
var res = str.slice(6,11)     // res为world
// 如果某个参数为负数，则从字符串的结尾开始计数
var res = str.slice(-11,-6)   // res为world

// 2、substring()
substring(start,end) 
// substring() 方法类似于 slice()，区别在于 substring() 无法接受负的索引
var res = str.substring(6,11)  // res为world
// 注: 如果只有一个参数, 则表示到字符串最后
var res = str.substring(6)  // res为world,hello tomorrow

// 3、substr()
substr(start,length)
// substr() 方法类似于 slice()，区别在于第二个参数规定提取部分的长度;如果首个参数为负，则从字符串的结尾计算位置
var res = str.substr(6,5)     // res为world
// 如果首个参数为负，则从字符串的结尾计算位置，第二个参数不能为负，因为它定义的是长度。
var res = str.substr(-8)     // res为tomorrow

// 4、charAt() 方法返回字符串中指定下标（位置）的字符串
var s = str.charAt(1)     // s为'e'

4、字符串替换

// replace() 用另一个值替换在字符串中指定的值
var str = 'hello world,hello tomorrow';

// replace() 方法不会改变调用它的字符串。它返回的是新字符串。
var newStr = str.replace('hello','你好')  // newStr为'你好 world,hello tomorrow'

// replace() 默认只替换首个匹配项，如需替换所有匹配项，应使用正则表达式 /g
var newStr = str.replace(/hello/g,'你好')  // newStr为'你好 world,你好 tomorrow'

// replace() 对大小写敏感，如需执行大小写不敏感的替换，应使用正则表达式 /i
var newStr = str.replace(/Hello/i,'你好')  // newStr为'你好 world,你好 tomorrow'

5、大小写转换

// 1、toUpperCase() 将字符串转换为大写
var text1 = "Hello World!";     
var text2 = text1.toUpperCase(); // text2为"HELLO WORLD!"

// 2、toLowerCase() 将字符串转换为小写
var text1 = "Hello World!";    
var text2 = text1.toLowerCase();  // text2为"hello world!"

6、连接字符串

var text1 = "Hello";
var text2 = "World!";
text3 = text1.concat(" ",text2); // text3为"Hello World!"

// concat() 方法可用于代替加运算符。下面两行是等效的：
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

7、删除字符串两端空白符

// trim() 方法删除字符串两端的空白符
var str = "       Hello World!        ";
var newStr = str.trim(); // newStr为"Hello World!"

8、把字符串转换为数组

// split() 将字符串转换为数组

3.1.5 转义字符

\'
\n
\t
\u4e2d   // \u##### Unicode字符

\x41	// Ascall字符

3.1.6 多行字符串编写

//tab 上面 esc下面
var msg =
      'hello
       world
       你好呀
       nihao'

3.1.7 模板字符串

//tab 上面 esc下面
 'use strict'
        let name='zs';
        let age=15;
        let msg=`你哈呀${name},你的年龄是${age}`

3.2 数组

3.2.1 定义

Array可以包含任意的数据类型

// 1、使用Array构造函数
var arr = new Array();

// 2、使用数组字面量
var arr = [];

3.2.2 常用方法

1、数组的长度

// length  数组的长度
var arr = ['a', 'b', 'c', 'd'];
var len = arr.length;  // len为4

2、数组转字符串

// join()  将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。
var arr = ['a', 'b', 'c', 'd'];
var str = arr.join()   // str为'a,b,c,d'
var str = arr.join('-')   // str为'a-b-c-d'

3、数组首尾元素操作

// 1、push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。 
var arr = ['a', 'b', 'c', 'd'];
var len = arr.push('e')  // arr为['a', 'b', 'c', 'd', 'e'], len为5

// 2、pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
var item = arr.pop();  // arr为['a', 'b', 'c'], item为'd'
// 注意：pop（）里面没有参数，及时有参数，也是删除最后一项。

// 3、shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。 
var item = arr.shift() // arr为['b', 'c', 'd'], item为'a'

// 4、unshift():将参数添加到原数组开头，并返回数组的长度 。
var len = arr.unshift('e') // arr为['e', 'a', 'b', 'c', 'd'], len为5

4、升序排列数组

// sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
var arr1 = ['d', 'b', 'c', 'a'];
arr1.sort()  // 结果为['a', 'b', 'c', 'd']
// 在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：
var arr2 = [10, 7, 34, 55];
arr2.sort();   // 结果为[10, 7, 34, 55]

5、反转数组顺序

// reverse()：反转数组项的顺序。
var arr = ['a', 'b', 'c', 'd'];
arr.reverse();  // 结果为['d', 'c', 'b', 'a']

6、提取部分数组元素

// slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置slice(start,end)。在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
var arr = ['a', 'b', 'c', 'd'];
var subArr1 = arr.slice(1); // subArr1为['b', 'c', 'd']
var subArr2 = arr.slice(1,3); // subArr2为['b', 'c']
var subArr3 = arr.slice(1,-1); // subArr3为['b', 'c']
var subArr4 = arr.slice(-3,-1); // subArr4为['b', 'c']

7、查找数组

// 1、indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。 在没找到的情况下返回-1
var arr = ['a', 'b', 'b', 'd'];
var pos = arr.indexOf('b')  // pos为1

// 2、lastIndexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。在没找到的情况下返回-1
var arr = ['a', 'b', 'b', 'd'];
var pos = arr.lastIndexOf('b')  // pos为2

8、遍历数组

// 1、普通for循环
var arr = ['a', 'b', 'b', 'd'];
for (i=0; i<arr.length; i++) {
    console.log(arr[i])
}

for (var i in arr) {
    console.log(arr[i])
}

// 2、foreach循环 forEach() 对数组的每一项运行给定函数，该方法没有返回值
arr.foreach(function(e){
	console.log(e)
});

// 3、filter()方法 
var a = arr.filter(function(value){
   console.log(value)
});

// 4、map() ：对数组的每一项运行给定函数，返回每次函数调用结果所组成的数组
var a = arr.map(function(value){
   console.log(value)
});

3.3 Map

3.3.1 简介

1. Map是一个类似于对象的数据类型
2. 与常规对象和Array不同的是，它是“键控集合“
3. 它的行为有稍许不同，并且在特定的上下文中使用，它可以提供相当大的性能优势
4. Map更像是以空间为代价，换取速度上的提升。那么对于空间和速度的衡量，必然存在一个阈值。在数据量比较少时，相比与速度的提升，其牺牲的空间代价更大，此时显然是不适合使用Map；当数据量足够大时，此时空间的代价影响更小。所以，看开发者如何衡量两者之间的关系，选择最优解。

3.3.2 定义

// 语法形式1：构造函数形式 — 在声明时,同时赋值
var m = new Map([ ['name','张三'] , ['age',18] ]);

// 语法形式2: 构造函数声明之后再赋值
var m = new Map();   //声明构造函数
m.set(name , '张三');  //赋值

3.3.3 使用

1、获取Map数据类型中的数据

// Map数据类型.get(‘键名’) ------> m.get(‘name’)
var m = new Map([ ['name','张三'] , ['age',18] ]);
console.log(m.get('name'));  //获取Map数据类型并在控制台打印

2、删除Map数据类型中,指定的键名

// Map数据类型.delete(‘键名’) ------> m.delete(‘name’);
var m = new Map([ ['name','张三'] , ['age',18] ]);
console.log(m.delete('name'));

4、清除Map数据类型中,所有的键名和数据

// Map数据类型.clear()
var m = new Map([ ['name','张三'] , ['age',18] ]);
console.log(m.clear());

5、判断是否是Map的成员

// Map数据类型.has(‘键名’)
var m = new Map([ ['name','张三'] , ['age',18] ]);
console.log(m.has('name'));

6、循环遍历

// 使用forEach() 语法,循环遍历 Map 数据类型
var m = new Map([['name','张三'], ['age',18]]);
m.forEach(function(item, key) {
    console.log(item,key)
});

3.4 Set

3.4.1 定义

Set 与数组类似， Set 集合中的元素不重复。

查找元素： 在数组中使用 indexOf() 或 includes() 检查元素是否存在比较慢。
删除元素： 在 Set 中，可以通过值删除元素。即在数组中，基于索引的splice() 功能。
插入元素： 在 Set 中添加元素比在数组中通过 push()、 unshift() 或其他同类操作要快。
去重： Set 对象仅能存储不同的值。

// new Set()方式创建
let s = new Set()

// 通过传入数组方式创建
let s = new Set([1,2,3,3,5])

3.4.2 常用操作方法

方法/属性	功能介绍
size	获取当前Set对象的长度
add(value)	向当前Set对象中添加一个值，返回的是Set对象，所以支持链式写法
delete(value)	删除当前Set对象中的一个值，返回一个布尔值，表示是否删除成功
has(value)	检测这个value是否是当前Set对象的一个元素，通过返回的布尔值表示
clear()	清除当前Set对象所有元素，没有返回值

3.4.3 遍历方法

方法/属性	功能介绍
keys()	返回该Set对象键名的遍历器，等同values()
values()	返回该Set对象键值的遍历器，等同keys()
entries()	返回该Set对象键值对的遍历器
forEach()	使用回调函数遍历该Set对象的每个元素