JS——基础(一)

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() 解析一段字符串并返回数值。允许空格。只返回首个数字

数值属性

MAX_VALUE	返回 JavaScript 中可能的最大数。
MIN_VALUE	返回 JavaScript 中可能的最小数。
NEGATIVE_INFINITY	表示负的无穷大（溢出返回）。
NaN	表示非数字值（“Not-a-Number”）。
POSITIVE_INFINITY	表示无穷大（溢出返回）。

字符串

被单或双引号包围.

特殊字符

’	’	单引号
"	"	双引号
\	\	反斜杠

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

方法:

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 值相等