JS——基础(一)

在 HTML 中，JavaScript 代码必须位于 标签之间.

而 script 标签可放于head或body的任意地方或者进行外部引用.

输出的四种方式

• 使用 window.alert() 写入警告框
  
• 使用 document.write() 写入 HTML 输出
  仅用于测试
  
• 使用 innerHTML 写入 HTML 元素

document.getElementById(id).innerHTML = ;

• 使用 console.log() 写入浏览器控制台
  

语句规范

以分号结尾;运算符左右加空格;代码控制在80字符内,最好在运算符后折行;

var x,y,z;
x = 7;
y = 2;
z = x + y;

var 关键词 创建一个新变量,变量存储数据值

xyz 是变量的命名 记标识符,创建多个变量用逗号隔开即可

标识符对大小写十分敏感,曾有三种用于多个单词连接而成一个标识符的写法

1.a-b(均为小写) 2.a_b(均为小写)3.ab(每个单词首字母大写)

而我们更推荐ab(只b单词的首字母大写)

此外标识符的命名也有限制:

• 首字符必须是字母、下划线（-）或美元符号（$),但更推荐以字母开头
  
• 名称包含字母、数字、下划线或美元符号
  
• 保留字（比如 JavaScript 的关键词）无法用作变量名称
  

= 号用于为变量赋值

作用域

关键词：let 和 const

全局作用域

全局（在函数之外）声明的变量拥有全局作用域,可以在JavaScript 程序中的任何位置访问

函数作用域

（函数内）声明的变量拥有函数作用域,只能在它们被声明的函数内访问

块作用域

let 关键词

{ 
  let x = 10;
}
// 此处不可以使用 x
//在块 {} 内声明的变量无法从块外访问

var x = 10;
// 此处 x 为 10
{ 
  let x = 6;
  // 此处 x 为 6
}
// 此处 x 为 10

var let 混合使用,块中重新声明的变量不会重新声明块外的变量

作用域

JavaScript-------JavaScript 环境

HTML------window

关键词:var与let

var定义的全局变量 属于 window 对象

let 定义的全局变量 不属于 window 对象

重新声明

只能 var 覆盖 var或在不同作用域内通过 let 重新声明

关键词 const

通过 const 定义的变量与 let 变量类似，但不能重新赋值

const 变量必须在声明时赋值

const PI = 3.14159265359;

它没有定义常量值,它定义了对值的常量引用。

eg:

// 创建 const 对象：
const car = {type:"porsche", model:"911", color:"Black"};
// 您可以更改属性：
car.color = "White";
// 您可以添加属性：
car.owner = "Bill";
//但无法重新为常量对象赋值
car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

重新声明 只允许在不同作用域或块中重新声明

运算符的优先级

从左向右计算

*和%高于+和-

数据类型

数值

JavaScript 只有一种数值类型,小数点可有可无

精度

整数（不使用指数或科学计数法）会被精确到 15 位

小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准

var x = 0.2 + 0.1;         // x 将是 0.30000000000000004
var x = (0.2 * 10 + 0.1 * 10) / 10;       // x 将是 0.3

超大或超小的数值可以用科学计数法来写:

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

布尔值:true和false

toString() 方法

把数输出为十六进制、八进制或二进制

var myNumber = 128;
myNumber.toString(16);     // 返回 80
myNumber.toString(8);      // 返回 200
myNumber.toString(2);      // 返回 10000000

以字符串返回数值,所有数字方法可用于任意类型的数字（字面量、变量或表达式)

var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123

toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。

参数定义小数点后的字符数

toFixed() 返回字符串值，它包含了指定位数小数的数字

toPrecision() 返回字符串值，它包含了指定长度的数字

valueOf() 以数值返回数值valueOf() 方法

Number() 可用于把 JavaScript 变量转换为数值

parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字

parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字

数值属性

字符串

被单或双引号包围.

特殊字符

\作用于字符串,不会让代码折行,最好加在运算符后面

方法:

length 属性返回字符串的长度

搜素方法

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1,两种方法都接受作为检索起始位置的第二个参数

search() 方法搜索特定值的字符串，并返回匹配的位置,并且无法设置第二个开始位置参数

match() 方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为 Array 对象返回

let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/g)    // 返回数组 [ain,ain,ain]

如果字符串包含指定值，includes() 方法返回 true

如果字符串以指定值开头，则 startsWith() 方法返回 true，否则返回 false

如果字符串以指定值结尾，则 endsWith() 方法返回 true，否则返回 false

三种提取部分字符串的方法：

• slice(start, end)
  slice() 提取字符串的某个部分并在新字符串中返回被提取的部分
  该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）
  
• substring(start, end)
  substring() 类似于 slice()
  不同之处在于 substring() 无法接受负的索引
  
• substr(start, length)
  substr() 类似于 slice()
  不同之处在于第二个参数规定被提取部分的长度
  

replace() 方法用另一个值替换在字符串中指定的值

toLowerCase() 把字符串转换为小写

concat() 连接两个或多个字符串

trim() 方法删除字符串两端的空白符

charAt() 方法返回字符串中指定下标（位置）的字符串

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码

split()

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

数值和字符串相加

JavaScript 的加法和级联（concatenation）都使用 + 运算符。

数字用加法。字符串用级联。

数+数=数

字符串+字符串=字符串

数+字符串=字符串

数+数+字符串=数+字符串=字符串

字符串+数+数+数=字符串

NaN 属于 JavaScript 保留词，指示某个数不是合法数。

尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）

var x = 100 / "Apple";  // x 将是 NaN（Not a Number）
isNaN(x);               // 返回 true，因为 x 不是数
var y= 100 / "10";     // y 将是 10
var m = NaN,n = "5";
var k = m + n;         // k 将是 NaN5
var z = NaN,x = 5;
var k = z + x;         // k 将是 NaN
typeof NaN;             // 返回 "number"
typeof Infinity;        // 返回 "number"

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回

一个数除以 0（零）也会生成 Infinity

字符串模板

使用反引号 (``)

插值

模板字面量提供了一种将变量和表达式插入字符串的简单方法

${...}

数组

JavaScript 数组用方括号书写,数组的项目由逗号分隔

var cars = ["Porsche", "Volvo", "BMW"];
var cars = new Array("Saab", "Volvo", "BMW");
var name = cars[0];   //访问 cars 中的首个元素的值
cars[0] = "Opel";     //修改 cars 中的首个元素
document.getElementById("demo").innerHTML = cars;                 //引用数组名来访问完整数组
cars.push("LH");       //添加一个新元素
cars[cars.length] = "LH";//添加一个新元素
cars[3] = "LH";         //添加一个新元素

数组是特殊类型的对象,您可以在相同数组中存放不同类型的变量(函数,数组都可以)

遍历数组

for循环

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
} 

Array.foreach() 函数

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

很多编程元素支持命名索引的数组。

具有命名索引的数组被称为关联数组（或散列）。

JavaScript 不支持命名索引的数组。

在 JavaScript 中，数组只能使用数字索引

对象

JavaScript 对象用花括号来书写。

对象属性是 name:value 对，由逗号分隔。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

this 关键词

访问对象

objectName.propertyName       //访问对象属性
objectName["propertyName"]      //访问对象属性
objectName.methodName()        //访问对象方法
name = person.fullName();    //访问对象方法

typeof 运算符

typeof 运算符返回 变量或表达式 的类型:

• string
• number
• boolean
• undefined
• function(函数)
• object(对象、数组或 null)

论 Undefined 和 Null 的区别

Undefined 与 null 的值相等，但类型不相等：

typeof undefined              // undefined
typeof null                   // object
null === undefined          // false 类型不等
null == undefined             // true 值相等