JS使用

内部引用：在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

外部引用：将.js文件通过src属性导入

<script src="/js/myScript1.js"></script>

JS显示

window.alert() 写入警告框
document.write() 写入 HTML 输出
innerHTML 写入 HTML 元素
console.log() 写入浏览器控制台

JS运算

取幂运算符（**）：x ** y 产生的结果与 Math.pow(x,y) 相同:

JS数据类型

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

typeof undefined                // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

typeof运算符

对简单数据返回：

string

number

boolean

undefined

对复杂数据返回：

function

object

JS事件

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

JS字符串方法

indexOf()方法返回字符串中指定文本首次出现的索引（位置）：
lastIndexOf()方法返回指定文本在字符串中最后一次出现的索引：
search()方法搜索特定值的字符串，并返回匹配的位置：
区别：search() 方法无法设置第二个开始位置参数。indexOf() 方法无法设置更强大的搜索值（正则表达式）。

slice(start, end)           //提取字符串
substring(start, end)        //无法接受负的索引
substr(start, length)         //类似于slice()
var text = "Hello".concat(" ","World!");     //concat() 连接两个或多个字符串：
text.split(",");            // 用逗号分隔,将字符串转换为数组

JS数字

NAN：指示某个数不是合法数。

var x = 100 / "Apple";  // x 将是 NaN（Not a Number）
var x = 100 / "10";     // x 将是 10

isNaN()确定某个值是否是数：

Infinity

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

while (myNumber != Infinity) {          // 执行直到 Infinity
    myNumber = myNumber * myNumber;
    myNumber.toString(8);              // 返回8进制的myNumber
}
var x =  2 / 0;          // x 将是 Infinity

toExponential() 方法

toExponential() 返回字符串值，包含已被四舍五入并使用指数计数法的数字，参数为小数点后的字符数：

var x = 9.656;
x.toExponential(2);     // 返回 9.66e+0
x.toExponential(4);     // 返回 9.6560e+0

toFixed() 方法

toFixed() 返回字符串值，指定小数的位数：

x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560

toPrecision() 方法

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

x.toPrecision(4);       // 返回 9.656

JavaScript 数组方法

join() 方法：将所有数组元素结合为一个字符串。

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");     //结果为Banana * Orange * Apple * Mango

shift() 方法：删除数组的第一个元素（并将所有其他元素“移位”到左侧）：
unshift() 方法：将新元素添加到数组的开头。
splice() 方法：用于向数组添加新项：
第一个参数（2）定义了应添加新元素的位置（拼接）。
第二个参数（0）定义应删除多少元素。
其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

删除元素：
第一个参数（0）定义新元素应该被添加（接入）的位置。
第二个参数（1）定义应该删除多个元素。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");       //结果为Banana,Orange,Lemon,Kiwi,Apple,Mango
fruits.splice(2, 2, "Lemon", "Kiwi");         //结果为Banana,Orange,Apple,Mango
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

slice() 方法：用数组的某个片段切出新数组。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(3);               //Apple,Mango
var citrus = fruits.slice(1, 3);                //Orange,Lemon

数组排序

sort() 函数按照字符串顺序对值进行排序。（"Apple" 会排在 "Banana" 之前； "25" 大于 "100"）

比值函数：定义一种排序顺序

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){return a-b}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

points.sort(function(a, b){return  a - b});     //function(40,100)，计算 40-100，然后返回 -60（负值）。排序函数将把 40 排序为比 100 更低的值。

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)，即查找数组中的最高值：
Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)，即查找数组中的最高值：

数组迭代

Array.forEach()：为每个数组元素调用一次函数（回调函数）。
Array.map()：方法通过对每个数组元素执行函数来创建新数组。（不会对没有值的数组元素执行函数；不会更改原始数组）
Array.filter()：创建一个包含通过测试的数组元素的新数组。
Array.every()：检查所有数组值是否通过测试。
Array.some()：检查某些数组值是否通过了测试。（返回boolean）
Array.find()：返回通过测试函数的第一个数组元素的值。
Array.findIndex()：返回通过测试函数的第一个数组元素的索引。
-------function myFunction(value, index, array) {}
Array.reduce()：在每个数组元素上运行函数，以生成（减少它）单个值。
Array.reduceRight()方法在每个数组元素上运行函数，以生成（减少它）单个值。
-------function myFunction(total, value, index, array) {}

var txt = "";
var numbers = [45, 4, 9, 16, 25];
var numbers1 = numbers.forEach(myFunction);
var numbers2 = numbers.map(myFunction);
var over18 = numbers.filter(myFunction);

function myFunction(value) {
  txt = txt + value + "<br>";      
}
function myFunction(value, index, array) {
  return value * 2;           //90,8,18,32,50
}
function myFunction(value) {
  return value > 18;            //45,25
}

Hoisting：在顶部声明变量！

Use Strict ：严格模式

无法在不声明变量的情况下使用变量；不允许使用为未来预留的关键词

Let关键字

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

在相同的作用域，或在相同的块中，不允许用let 重新声明变量，let 变量也不允许被重新声明：

var x = 10;       // 允许
let x = 6;       // 不允许
{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

Const关键字

没有定义常量值。定义了对值的常量引用。
因此，不能更改常量原始值，但可以更改常量对象的属性。
在不同的作用域或块中重新声明 const 是允许的：

JS调试

console.log() 可在调试窗口中显示 JavaScript 的值：
debugger关键词会停止 JavaScript 的执行，并调用（如果有）调试函数。与在调试器中设置断点的功能是一样的。
Safari Develop Menu

点击 Safari 菜单，偏好设置，高级
选中“在菜单栏中启用开发菜单”
当菜单中出现新选项“开发”时，选择“显示错误控制台”

JS最佳实践

请避免使用全局变量、new、===、eval()

JS常见错误

测试对象是否存在：if (typeof myObj !== "undefined" && myObj !== null)
JavaScript 不会为每个代码块创建新的作用域。

for (var i = 0; i < 10; i++) {
  // 代码块
}
return i;                //10

JS性能提升

减少循环中的活动
减少 DOM 访问
缩减 DOM 规模
避免不必要的变量
延迟 JavaScript 加载

JavaScript基础