JavaScript初恋我来给你划重点 03

JavaScript

JavaScript高级程序设计是入门web前端开发的神级书籍，简称小红书。由于公司业务的发展，我不得不从iOS转向前端开发。目前已上线一款小程序《熊猫超级名片》，在开发过程中，也感受到了一个半吊子前端的困惑和无奈。所以想要从基础开始，打好底子，往后才会事半功倍。

JS = JavaScript , ES = EMACScript， AS = ActionScript

第5章

引用类型的值是引用类型的一个实例。在ES中，引用类型是一种数据结构，用于将数据和功能组织在一起，通常也被称为类，但是它不具备通常的面向对象的类的接口等基本结构，引用类型有时候也被称为对象定义，因为它描述的是一类对象所具有的属性和方法

Object类型

创建Object实例的方式有两种。

使用new操作符后跟Object构造函数：

var person = new Object();
person.name = "hellolad"
person.age = "27"

另一种凡是是使用对象字面量表示法:(不会调用Object的构造函数)
(简化创建包含大量属性的对象的过程)

var person = {
  name: "hellolad",
  age: 27
}

Array类型

ES中的数组和其他的语言的数组都是数据的有序列表，不同的是ES数组的每一项可以保存任何类型的数据，ES数组的大小是可以动态调整的。
创建Array的基本方式有两种:

使用Array的构造函数:

var array = new Array();
// 如果预先知道数组需要存储的数量
var array = new Array(20);
// 也可以向Array的构造函数中预先设置元素
var array = new Array("hell0lad", 27, "js");
// 也可以省略new关键字
var array = Array(3);

使用字面量:(不会调用Array的构造函数)

var colors = ["red", "orange", "blue"];
// 创建一个空数组
var names = [];

Array的length不是只读的，所有你可以设置length的长度来移除最后一位元素，或其他操作

var names = ["h", "z", "b"]
console.log(names[2]);
names.length = 2;
console.log(names[2]);
// 输出:
b
undefined

检测数组

// 1.使用instanceof(在假定只有一个全局执行环境下使用起来没有问题)
if (value instanceof Array) {
}
// 2.使用 isArray
if (Array.isArray(value)) {
}

栈方法(LIFO)：
使用push方法添加一个元素到末尾，使用pop方法取最后一位元素(同时删除原数组中的元素)

var names = ["h", "z"]
names.push("x");
console.log(names);
names.pop();
console.log(names);

// 输出:
[ 'h', 'z', 'x' ]
[ 'h', 'z' ]

队列方法(FIFO)：
使用push方法添加一个元素到末尾，使用shift方法取最第一位元素(同时删除原数组中的元素)

var names = ["h", "z"]
names.push("x");
console.log(names);
names.shift();
console.log(names);

// 输出:
[ 'h', 'z', 'x' ]
[ 'z', 'x' ]

Array还有一个方法：unshift 和shift的作用相反，在第一位添加一个元素

var names = ["h", "z"]
names.unshift("a")
console.log(names)

// 输入：
[ 'a', 'h', 'z' ]

操作方法
concat

// concat基于当前的数组，重新构建一个新的数组（不会更改原数组）
// 在没有传递给改方法参数的时候，该方法只是复制了当前数组的一个复制品。
// 如果给该方法传递了一个参数，或者一个数组，则该方法会把传递进来的参数放到改数组的后面形成一个新的数组。
var names = ["h", "z"]
const tempNames = names.concat()
console.log(tempNames)
const names2 =  names.concat("a")
console.log(names2)
const names3 = names.concat("b", ["3", "1"])
console.log(names3)

// 输出:
[ 'h', 'z' ]
[ 'h', 'z', 'a' ]
[ 'h', 'z', 'b', '3', '1' ]

slice

// 接受两个参数，起始位置和结束位置（不包含结束位置的元素）
// 如果只传第一个参数位置则从起始位置开始一直复制到最后一个元素为止，生成一个新数组
var names = ["h", "z", "b"]
const slicenames = names.slice(1)
console.log(slicenames)
const slicenames2 = names.slice(1, 2)
console.log(slicenames2)

// 输出
[ 'z', 'b' ]
[ 'z' ]

splice 最全面的方法(会修改原数组)

删除:可以删除任意数量的项，只需指定 2 个参数:要删除的第一项的位置和要删除的项数。例如，splice(0,2)会删除数组中的前两项。
插入:可以向指定位置插入任意数量的项，只需提供 3 个参数:起始位置、0(要删除的项数) 和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如， splice(2,0,"red","green")会从当前数组的位置 2 开始插入字符串"red"和"green"
替换:可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数:起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如， splice (2,1,"red","green")会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串 "red"和"green"。

Date类型

比较简单
W3CSHOOL: http://www.w3school.com.cn/js/jsref_obj_date.asp

扫描二维码关注公众号，回复： 5208042 查看本文章

RegExp类型

g：表示全局模式，模式将会被应用于所有字符串，而非在发现第一匹配项时立即停止
i：表示区分大写，在确定匹配项时忽略模式与字符串的大小写。
m：表示多行模式，达到一行文本的末尾会继续查找下一行中是否存在与模式匹配的项。

// 匹配所有包含·at·的实例
const pattern = /at/g
// 匹配第 一个是·bat· 或者 ·cat·的实例
const pattern = /[bc]at/i
// 匹配与·.at·结尾的三个字符，不区分大小写
const pattern = /.at/gi

// 使用构造函数初始化一个正则表达式实例
const pattern = new RegExp("[bc]at", "i");

exec
RegExp的主要方法是exec，该方法是专为捕获组而设计的。

const pattern = new RegExp("[bc]at", "i") 
const matches = pattern.exec("bat")
console.log(matches)

// 输出
[ 'bat', index: 0, input: 'bat', groups: undefined ]

/** 非全局模式匹配 */
var matches = pattern1.exec(test)
console.log(matches.index)  // 0
console.log(matches[0])  // cat
console.log(pattern1.lastIndex) // 0

matches = pattern1.exec(test)
console.log(matches.index)  // 0
console.log(matches[0])  // cat
console.log(pattern1.lastIndex) // 0


// 全局模式匹配
const pattern2 = /.at/g
var matches = pattern2.exec(test);
console.log(matches.index)  // 0
console.log(matches[0])    // cat
console.log(pattern2.lastIndex)  // 3

matches = pattern2.exec(test);
console.log(matches.index)  // 5
console.log(matches[0])  // bat
console.log(pattern2.lastIndex)  // 8

test 方法
接受一个字符串参数。在模式与改参数匹配的情况下返回true; 否则，返回false。test方法被经常运用在if语句中。

const phone = "000-00-0000"
const pattern = /\d{3}-\d{2}-\d{4}/
if (pattern.test(phone)) {
  console.log("匹配通过")
} else {
  console.log("匹配失败")
}
// 匹配通过

Functinon 类型

函数实际上是对象，每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数式对象，因此函数名实际上是一个指向函数对象的指针，不会与某一个函数绑定。

// 函数声明语法
function sum (num1, num2) {
  return num1 + num2;
}

// 函数表达式定义函数
var sum = function (num1, num2) {
  return num1 + num2;
}

// 使用Function的构造方法，Function构造函数可以接受任意数量的参数，但最后一个参数始终被看成是一个函数体。
var sum = Function("num1", "num2", "return num1 + num2");
console.log(sum(1, 2))  // 3

没有重载

function addSomeNumber (num) {
  return num + 100;
}

function addSomeNumber (num) {
  return num + 200;
}

console.log(addSomeNumber(100))  // 300

上面的例子声明了两个同名函数，而结果则是后面的函数覆盖了前面的函数。

函数声明和函数表达式

console.log(sum(1, 2))
function sum (num1, num2) {
  return num1 + num2;
}

以上代码完全可以正常运行，在代码开始执行之前，解析器就已经通过一个名为函数声明提升的过程。读取并将函数声明添加到执行环境中。对代码求值时，JS引擎在第一遍会声明函数并将它们放到源代码树的顶部，所以，即使声明函数的代码在调用它的代码后面，JS引擎也能把函数声明提升到顶部。

console.log(take(1, 2))
var take = function (num1, num2) {
  return num1 + num2;
}

以上代码会在运行期间产生错误，在执行函数所在的语句之前，变量sum中不会保存有对函数的引用。

作为值得函数
因为ES中的函数名本身就是变量，所以函数也可以作为值来使用。也就是说，不仅可以像函数一样把一个函数传递给另一个函数，而且可以讲一个函数作为另一个函数的结果返回。

// 函数作为参数
function callSomeFunction(someFunction, someArgument) {
  return someFunction(someArgument);
}
function add10(num) {
  return num + 10;
}
console.log(callSomeFunction(add10, 10))  // 20 

// 闭包
const result = callSomeFunction(function(num) {
  return num + 10;
}, 12)
console.log(result)  // 22