Javascript基础介绍与arguments对象,console对象，json对象详述

Javascript基础

前言介绍与引用

参考资料：javascript-维基百科

• JavaScript（通常缩写为JS）是一种高级的、解释型的运行在客户端的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象程序设计，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。
• JavaScript与Java在名字或语法上都有很多相似性，但这两门编程语言从设计之初就有很大的不同，JavaScript的语言设计主要受到了Self（一种基于原型的编程语言）和Scheme（一门函数式编程语言）的影响。在语法结构上它又与C语言有很多相似（例如if条件语句、switch语句、while循环、do-while循环等）。
• 一般来说，完整的JavaScript包括以下几个部分：
  ECMAScript，描述了该语言的语法和基本对象
  文档对象模型（DOM），描述处理网页内容的方法和接口
  浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口
• JavaScript的基本特点如下：
  是一种解释性脚本语言（代码不进行预编译）。
  主要用来向HTML页面添加交互行为。
  可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
• JavaScript常用来完成以下任务：
  嵌入动态文本于HTML页面
  对浏览器事件作出响应
  读写HTML元素
  在数据被提交到服务器之前验证数据
  检测访客的浏览器信息
  控制cookies，包括创建和修改等

基础语法

• 执行单位是行，每一行都是一条单独的语句，执行也是一行一行执行。
  语句和表达式的区别主要在于表达式是为了达到返回值，而语句是为了执行某项操作。语句以分号结尾，表达式不需要分号结尾。（分号其实可选，但建议采用，否则可能被javascript搞错结束位置）
• 注释：和C语言一行，有//(单行)和/…/多行两种。其实也可以兼容HTML代码的注释。<!--...-->
• 标识符：标识符是在Jacascript中扮演各种语法的名称，比如变量的名称、函数的名称、属性的名称、参数等。标识符对大小写敏感。
  定义范围和可以是任意unicode字符，但第一个字符必然不能是数字及其他除_和$的特殊字符。
• 变量：变量是对值的引用。变量名：为这个引用起的名字， 声明变量：为变量取名字的过程。使用var定义变量(varity)
  Javascript是一种动态类型的语言，变量的类型是没有限制的，也不需要提前声明变量是什么类型的,变量也可以随时改变类型。
• 变量的类别：全局和局部变量。全局变量用var来声明，局部变量不需要var.
• 变量提升:变量还存在变量提升，Javascript引擎会先解析代码，获取所有被声明的变量，然后再一行一行的运行，这个就意味着，声明变量之前访问该变量是可以访问的也不会报错，但是该变量只是被先声明了，但并没有赋值。

基础逻辑控制语句

• 条件语句/循环语句与C语言相通。
• 标签：Javascript允许语句前面有标签label，标签相当于定位符，可以配合语句进行跳转，跳转的不止是循环，也可以是代码块等。

数据类型

Javascript中数据类型分为两种类型的值，分别为原始值和对象，其中原始值可以称为不可变值。对象类型又被称为集合类型或者引用类型，可以包含所有类型的值。

• 原始数据类型：数值number
  字符串string
  布尔值boolean：只有两种值，即true和false，表示真假
  undefined：表示未定义和没有价值的意思，当定义了一个变量但是未赋值的时候，这个变量的值就等于undefined表示没有价值
  null：表示一个空对象，或者空值。
  undefined和null的区分:当一个函数传递参数需要两个值时，只一个null作为参数，则实际上另一个参数是undefined，表示未定义。
• 对象类型：对象类型又被称为集合类型或者引用类型，因为对象类型可以包含所有类型的值。在Javascript中对象类型分为三种，分别为：
  对象object
  数组array
  函数function
• 用\符号进行转义
  同时在单引号中用双引号和双引号中用单引号都是没有问题的，如果必须要在单引号中用单引号或者双引号中用双引号，可以通过在引号前面用\符号进行转义。
  注意：关于引号的使用规范：由于HTML属性值使用的是双引号，再加上很多项目都规定使用单引号，所以建议使用单引号，当然使用双引号也可以，但请不要在代码中使用单引号的同时又在使用双引号。
• 创建字符串/创建数值：有两种方式，分别为字面量和构造函数。
  ‘hello’：字面量
  new String(‘hello’)：构造函数
  123：字面量
  new Number(123)：构造函数
  常用的都是通过字面量来进行定义，但是这里需要注意的是通过构造函数返回的字符串/数值是一个对象，即一种字符串对象/数值对象，这样的字符串对象/数值对象可以当字符串原始值/数值原始值使用，但是它不是一个原始值，而是一个对象值。
• 访问字符串
  字符串的访问可以通过[]方括号访问。如果当访问的数量大于所有的字符长度，将会返回undefined。
• 获取字符串长度：用a.length-1得到。
• 字符串的编码：在字符串的内部还有一部分转义的字符，除了普通的可打印字符以外，一些特殊有特殊功能的字符可以通过转义字符的形式放入字符串，转义字符需要用\进行转义。如转义字符\n含义是换行，unicode编码是\u000A。
• Base64编码：Base64编码是可以将任意值转成为0～9、A～Z、a～z、+、-这个64个字符组成的可打印字符，这个编码的主要目的不是为了加密，而是为了不让特殊字符出现。

btoa('...')用于编码
atob('...')用于解码

• URL编码:URL编码可以将utf-8的字符编码为ASCII编码支持的范围内。

encodeURIComponent('...')用于编码
decodeURIComponent('...')用于解码。

• 数值：Javascript内部所有的数值都是以双精确度64位浮点数进行储存的。
• 特殊值：有几个特殊的数字值：
  两个错误值：NaN和Infinity，这个两个特殊值都是number类型。
  两个零：+0和-0
  NaN(Not a Number)是一个特殊的错误值，属于number类型，NaN表示不是一个数值，一般由以下几种操作的时候会返回NaN：
  无法解析为数字：如Number('javascript')
  操作失败：如Math.acos(2)
  其中一个数为NaN的运算：如NaN + 1
• lnfinity
  infinity也有正负之分，Infinity表示正无穷，而-Infinity表示负无穷.lnfinity大于一切数值（除了NaN），-lnfinity小于一切数值（除了NaN）。(两者比较会返回false)
• 全局函数isFinite：全局函数isFinite允许检查值是否是实际数字（既不是Infinity的也不是NaN，两者会返回false）。
• 布尔值（Boolean）
  Javascript某个运算的预期位置的值应该是布尔值，那么Javascript会自动转为布尔值，下列中的值都会转换为false，其他的任何值会被转换为true。undefined
  null
  false
  0
  NaN
  " "或’ '（空字符串）
  包括空数组[]和空对象{}都会被转换为true，因为按照对象结构来说，即使是内部没有值，但这个对象确实存在的，所以它们被转换为true。
• 创建布尔值。方法同于创建字符串和数值。

对象

Javascript的基本类型有数值Number、字符串String、布尔值Boolean、null、undefined五种类型，其他的值都是对象。
Javascript中的对象是属于无类型的，意思是无限制的，如对象里面放对象，对象里面放数组、函数等，除此之外，Javascript对象还包含一种原型链的特性，允许对象继承另一个对象的属性。
对象表达式：通过{}大括号直接可以创建一个空对象
构造函数：Object构造函数为给定值创建一个对象包装器。如果给定值是 null或 undefined以及空，将会创建并返回一个空对象，否则，将返回一个与给定值对应类型的对象。

• 键名
  对象是一种键值对的无序数据结构，对象的每个键值对之间用逗号,分隔，每个属性与值之间用分号:分隔，最后一个键值对可以加逗号也可以不加逗号，对象的所有键名都是字符串。
  所有的字符都会被转换为字符串，包括数值。实际上键名都是字符串
  对象里面将键值对分为两类：

属性与方法的区别

属性：值可以为任何的数据类型（除函数）
方法：值为一个函数

• 读取对象
  通过方括号[]运算符，使用方括号[]运算符需要将字符串用引号包裹，如果不包裹的话，Javascript引擎会将该字符认为是变量，然后再用变量的值来访问对象。给数值加引号和不加引号是相等的。
• 属性赋值
  如果要对一个属性进行赋值，有三个方式，分别为初始化赋值、方括号[]运算符赋值、点.运算符赋值。
• 对象的引用
  一个变量的值是对象的话可以称为这个变量引用了这个对象，那么多个变量都引用这个对象，那么它们都是相等的。因而当引用该对象的变量更改了这个对象，也会影响到所有引用该对象的变量

var a = {};
var b = a;
a === b // true

数组

• 数组的介绍：数组是按次序排列的一组值，用方括号包裹所有值，每个值都有一个编号，编号从0开始
• 创建数组
  创建数组的方式有两种：
  通过数组表达式：通过[]方括号直接可以创建一个空数组
  通过构造函数：通过Array构造函数创建一个数组，Array构造函数接受多个参数，这些参数会将作为新数组的每一个值。如果没有参数则返回一个空数组，即一个值都没有。如果只有一个参数，这个参数的值代表创建有多少个值的数组，每个值都为空（而不是创建了一个参数数值的单元素数组）。
• 数组Array
  数组Array是一个特殊的对象，typeof操作符返回的也是object类型，因为数组的编号是从0访问的，这个编号也可以认为是属性。
  数组是一个特殊的对象，通过方括号进行访问，如果是能转换为数值并且在正确的表示范围内就是访问的数组的数据结构数据，如果不能够转换，比如超过了数值的最大表示范围就会自动转换为字符串而访问属性、方法。
• Object.keys方法也可以来查看数组有哪些属性，这里返回的是数组的索引加属性。
  数组中的length属性可以查询数组中含有多少个值，不包含属性。
• 查询遍历
  数组同样支持for…in，但是这个遍历还是基于键名，如果是数组相当于返回的索引值，例：数组有五个成员，那么就有五个键，为0-4，并且for…in还会返回可遍历的属性或者方法。

函数

JavaScript中的函数实际也是对象，和数组一样都是一种特殊的对象，只是函数内部存储的是一块代码，同样有属性和方法。

典例：setTimeout()

参考：for(var i=0;i<5;i++){ setTimeout(function(){ console.log(i); },1000)-作者：huakaiwuxing
定义和用法
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
提示： 1000 毫秒= 1 秒。
提示： 如果你只想重复执行可以使用 setInterval() 方法。
提示： 使用 clearTimeout() 方法来阻止函数的执行

• 典例：for(var i=0;i<5;i++){ setTimeout(function(){ console.log(i); },1000)
setTimeout是异步执行的，1000毫秒后向任务队列里添加一个任务，只有主线上的全部执行完才会执行任务队列里的任务，所以当主线程for循环执行完之后 i 的值为5，这个时候再去任务队列中执行任务，已经被放入5个function()函数，而且i全部为5，故输出5个5；
  特别地：假如把var换成let，那么输出结果为0,1,2,3,4；
  因为let i 的是区块变量，每个i只能存活到大括号结束，并不会把后面的for循环的 i 值赋给前面的setTimeout中的i；而var i 则是局部变量，这个 i 的生命周期不受for循环的大括号限制；

函数声明、构建、作用域

• 声明函数
  有三种方法，分别为：
  function命令创建：function命令创建函数是通过function命令，然后后面跟着函数名以及圆括号()然后是大括号{}，圆括号是定义参数，每个参数用逗号分隔，而大括号就是定义函数的执行代码，称为函数体。
  函数表达式创建：函数表达式也可以创建带有函数名的函数，但是加上了函数名过后，该函数名只有在函数体内部有效，而在外部是无效的。function a() {...}
  构造函数创建
• 函数的返回值以及函数提升
  每个函数都有返回值，当没有用return指明返回值时，默认返回 undefined。而return是当场返回的，后面函数体不会执行。
  函数提升就是指：可以在定义函数之前调用函数。这与先声明函数，后调用本质是一样的。但如果采用函数表达式赋值给变量，则函数无法提升，但是变量会提升。
• 函数的作用域
  作用域主要指的是变量存在的范围。JSES5版本中中规定了两个作用域，一个是全局作用域一个是函数作用域，其他都不是作用域。注意：变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。如果全局变量中有相同名字的变量则会覆盖全局变量。
• 函数的参数
  与C语言定义函数参数一样，用’,'分隔。如果没有参数，则默认等于undefined。而且函数的传递方式是按值传递的，原始值是直接复制一份的，故在函数体内部操作原始值不影响外部的。
• 闭包
  代码函数内访问变量是属于链式查找，比如当前函数作用域没有这个变量，那么就继续查找包裹他的函数有不有这个变量，一直查找到全局作用域，而上面的代码中f函数不能够访问x函数，因为链式查找只能从下到上，从内到外，而不能反向。
  而闭包就是利用了这样的特性，已知的是一个函数内部的变量是无法在外部进行访问、赋值的，那么在内部再定义一个函数，然后将此函数作为返回值返回，就可以操作这个函数内的变量了。

类型转换

javascript是动态类型的语言，所有的变量不需要像其他语言一样声明变量是什么类型的，所以可以随意给变量赋值，导致了很多值只能在程序运行的阶段才知道到底是什么值。

• 检查数据类型（三种方法）

typeof 运算符（实际上typeof运算符是将函数、数组、对象均看作是对象类型，返回的也是object类型）
instanceof 运算符(只能针对于对象类型的检测,标准语句a instnaceof type，返回true or false)
Object.prototype.toString 方法(能完美的返回所有的类型，包括null,如返回object NULL)

• 转换(分强制和自动两种)
• 强制转换
  Number()
String()
Boolean()
• Number函数
  对于原始值的转换有以下几种规则：
  数值：直接返回该值
  字符串：如果被解析为数值，则转换为相应的值，比如’123’。如果字符串中出现了不能转换的值则返回NaN，比如’123d’
  空字符串和空值：转换为0
  布尔值：true转换为1，false转换为0
  undefined：转换为Nan
  null：转换为0
  对对象的转换分三步：调用对象自身的valueOf方法，返回的若是对象，则改为调用对象自身的toString方法，再不行则报错。
• string函数
  toString()的作用：
  1、toString() : 把对象转成字符串

	var arr = [1,2,3];
    alert( typeof arr.toString() ); //类型被转为string类型了
    alert( arr.toString() ); // '1,2,3'

2、有的时候我们想按照自己的方式将变量转成字符串，但又不行遵守他的规则，我们可以自己写
3、toString()应用，进位制转换
4、做类型判断

• Boolean函数
  Boolean函数对于所有的对象都返回true。以下的五个值为false：1. undefined 2. null 3. -0和+04. NaN 5. 空字符串和空值

温习对象概念

• JavaScript 对象:JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…此外，JavaScript 允许自定义对象。对象只是一种特殊的数据。对象拥有属性和方法。JavaScript 对象就是一个 name:value 集合。属性：值可以为任何的数据类型（除函数）
  方法：值为一个函数或者说是附加在对象上的函数。
• 所有事物都是对象的含义：
  JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。
• 访问对象的属性
  属性是与对象相关的值。访问对象属性的语法是：objectName.propertyName
  例如：使用了 String 对象的 length 属性来获得字符串的长度：

var message="Hello World!";
var x=message.length;

在以上代码执行后，x 的值将是：12

• 访问对象的方法
  方法是能够在对象上执行的动作。可以通过以下语法来调用方法：objectName.methodName()
  比如：使用了 String 对象的 toUpperCase() 方法来将文本转换为大写：

var message="Hello world!";
var x=message.toUpperCase();

在以上代码执行后，x 的值将是：

HELLO WORLD!

arguments(隐式参数)对象

JavaScript 函数有个内置的对象 arguments 对象。argument 对象包含了函数调用的参数数组。函数隐式参数在函数调用时传递给函数真正的值。JavaScript 函数对隐式参数没有进行类型检测。
JavaScript 函数对隐式参数的个数没有进行检测。

• 通过值传递参数
  在函数中调用的参数是函数的隐式参数。
  JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。
  如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。
  隐式参数的改变在函数外是不可见的。
• 通过对象传递参数
  在JavaScript中，可以引用对象的值。
  因此我们在函数内部修改对象的属性就会修改其初始的值。
  修改对象属性可作用于函数外部（全局变量）。
  修改对象属性在函数外是可见的。
• 具备[]索引和length属性

console对象

介绍与参考

参考：菜鸟教程
Console 对象用于 JavaScript 调试。
JavaScript 原生中默认是没有 Console 对象,这是宿主对象（也就是游览器）提供的内置对象。 用于访问调试控制台, 在不同的浏览器里效果可能不同。

• Console 对象常见的两个用途：
  1.显示网页代码运行时的错误信息。
  2.提供了一个命令行接口，用来与网页代码互动。（比如谷歌浏览器f12调出开发者模式）
• DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
  HTML DOM 定义了访问和操作 HTML 文档的标准方法。
  DOM 以树结构表达 HTML 文档。
  

Console对象方法

调用方法都是console.functionname()

• assert(),assert方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。
  clear(),清除当前控制台的所有输出，将光标回置到第一行。
  error(),输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈。
  group(),用于将显示的信息分组，可以把信息进行折叠和展开。
  info(), console.log 的别名，输出信息
  log(),输出信息（最常用）
  table(),将复合类型的数据转为表格显示。
  time(),计时开始
  timeEnd(),计时结束
  trace(),追踪函数的调用过程
  warn(),输出警告信息

常用 Console 调试命令

console.log('hello');
console.info('信息');
console.error('错误');
console.warn('警告');

• 支持的占位符有：
  字符串（%s）
  整数（%d或%i）
  浮点数（%f）
  对象（%o（可展开的DOM）/%O（列出DOM的属性））
  %c（根据提供的css样式格式化字符串，对应的后面的参数必须是 CSS 语句，用来对输出内容进行 CSS 渲染。常见的输出方式有两种：文字样式、图片输出。）

信息分组

console.group("第一组信息");
console.log("第一组第一条");
console.log("第一组第二条");
console.groupEnd();
  
console.group("第二组信息");
console.log("第二组第一条");
console.log("第二组第二条");
console.groupEnd();

查看对象的信息

console.dir(info);

显示某个节点的内容

console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是 console.profile()。

json对象

介绍与参考

参考：菜鸟教程
JSON 英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式，JSON格式仅仅是一个文本，可被任何编程语言读取作为数据格式传递。
JSON是独立的语言 。
JSON 易于理解。
JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据 。

实例

以下 JSON 语法定义了 sites 对象: 3 条网站信息（对象）的数组:

{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

• JSON 格式化后为 JavaScript 对象

语法规则

• JSON对类型和值有着严格的要求：

1. 复合类型的值只有数组和对象，不能是函数、正则表达式、日期对象
2. 原始类型的值只有四种：字符串、数值(必须十进制)、布尔值和null
3. 字符串必须使用双引号，不能使用单引号
4. 对象的键名必须放在双引号里面
5. 数组和对象最后一个成员的后面不能添加逗号

数据为 键/值 对。
数据由逗号分隔。
大括号保存对象。
方括号保存数组。
键/值对包括:字段名称（在双引号中），后面一个冒号，然后是值.

"name":"xinlang"

• JSON 对象:JSON 对象保存在大括号内。
• JSON 数组:JSON 数组保存在中括号内。

"sites":[
    {"name":"Xinlang", "url":"www.xinlang.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]

在以上实例中，对象 “sites” 是一个数组，包含了三个对象。
每个对象为站点的信息（网站名和网站地址）。

• JSON 字符串转换为 JavaScript 对象
  首先，创建 JavaScript 字符串，字符串为 JSON 格式的数据
  然后，使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象。
  最后，在你的页面中使用新的 JavaScript 对象。

• 将Javascript中的值转换为JSON对象
  stringify方法
  stringify方法用于将Javascript中的值转换为JSON对象，并且会将所有的单引号转换为双引号。

 JSON.stringify({a: 1})//"{"a":1}"