JS基础(w3cschool文档整理)

关于javascript 的变量的命名规则：

构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

提示：JavaScript 标识符对大小写敏感。
关于Javascript的基本类型：
JavaScript 数据类型

JavaScript 中有五种可包含值的数据类型：

字符串（string）
数字（number）
布尔（boolean）
对象（object）
函数（function）

有三种对象类型：

对象（Object）
日期（Date）
数组（Array）

同时有两种不能包含值的数据类型：

null
undefined

javaScript 判断当前的变量是否是数组或时间函数
关键字：
constrctor
使用方法：
变量.constrctor == 类型
如： var myDate = new Date();
myDate.constructor == Date; --> 返回一个布尔值。
typeof 返回变量的类型：
例如：typeof ‘Bill’ 返回string

JavaScript 数字的方法：

1. 进制转化：
   使用的方法： toString(参数);
   var x = 32;
   x.toString(10); 32–> 表示将当前的数字变成10进制的数
   2.四舍五入：
   使用的方法：toFixed(参数);
   var x = 9.656;
   x.toFixed(2); 9.66–> 表示将当前的数字变成保留两位的四舍五入
   3.幂函数保留：
   使用的方法： toExponential(参数);
   var x = 9.656;
   x.toExponential(2); 9.66e+0 -->表示要将当前的数据使用幂指数方式表示

2. 返回指定长度的数据：
   使用的方法 :toPrecision(参数)
   var x = 9.656;
   x.toPrecision(2); 9.7 --> 表示要将当前的数据按照指定的位数四舍五入

3. 将变量转化数字：
   Number(“变量”); 返回当前的变量中的数字，如果不是数字，返回 NaN

4. 将字符串转化为数字：
   parseInt(“字符串”)； 返回字符串中首个位置的数据，如果首个位置的数据不是数字，返回 NaN

7.常用的数值属性：
MAX_VALUE 返回JavaScript 中可能的最大的数值
MIN_VALUE 返回JavaScript 中可能的最小的数值
NEGATIVE_INFINITY 表示负的无穷大
NaN 表示非数字
POSITIVE_INFINITY 表示无穷大（溢出无穷大）

使用案例：
var x = Number.MAX_VALUE;

8. JavaScript 常用的数组：
   常用案例如下：
   var cars = [ “Saab”,“Volvo”,“BMW”];
   var cars = new Array(“Saab”,“Volvo”,“BMW”);
   这两种方式的效果相同。
   获取数值的方式：
   如输出到标签

   上的案例：

如果我们用变量名，表示按照顺序全部输出，如果仅仅输出特定的位置，可以加上索引的位置字段 如：输出第一个 那么 上面cars 位置就是 cars[0];
如果我们使用的变量是json 字符串的形式保存的数据，那么可以通过Jason串的键，获取json变量的数值。案例如下：
如输出到标签

上的案例：

那么结果就是：Bill

9.数组常用的方法：

var x = cars.length; // length 属性返回元素的数量
var y = cars.sort(); // sort() 方法对数组进行排序

通常我们使用的数组的第一个下表从0开始，所以一次类推，最后一个为 cars.length - 1,如果当前的存储位置大于该值，将出现数组溢出异常。

10.数组遍历和元素添加
使用的方法： push(添加数据);
遍历方式： for 或者 forearch
案例1：

遍历当前的数组：{Banana,Orange,Apple,Mango}

案例2：

遍历当前的数组：{Banana,Orange,Apple,Mango}

11. 数组中常用的方法：
    （1）数组的输出：
    数组变量.toString() --> 输出当前的数组的数据，每个元素之间使用’,'分开，后按照存储的顺序输出。
    数组变量.join(‘字符’) --> 输出当前的数组的数据间隔符使用给定的符号分割开来后按照存储的顺序输出
    （2）数组的元素值添加，删除
    数组变量.pop() --> 从数组中删除最后一个元素。
    数组变量.push(‘添加元素’) -->在数组的最后面添加一个元素
    数组变量.shift(); --> 返回当前数组中的第一个元素，并将这个元素从数组中删除
    数组变量.unshift(‘添加元素’) --> 调用该变量可以在数组的第一个位置添加一个指定的元素。
    delete 数组名[0]; 删除当前数组中的存储元素值，当再次使用该值时会返回未定义的变量：undefined
    数组变量.splice();删除数组元素d第一个参数为新元素被加入的位置，第二个参数的意思为从指定的位置开始，删除的元素个数
    （3）数组的合并，剪切

var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
fruits.splice(2, 0, “Lemon”, “Kiwi”);

concat() --> 合并数组
案例

var arr1 = [“Cecilie”, “Lone”];
var arr2 = [“Emil”, “Tobias”, “Linus”];
var arr3 = [“Robin”, “Morgan”];
var myChildren = arr1.concat(arr2, arr3); // 将arr1、arr2 与 arr3 连接在一起

这样将会输出三个数组的内容，其中contact 中可以填数组的名，后者填数组的元素。
案例：

var arr1 = [“Cecilie”, “Lone”];
var myChildren = arr1.concat([“Emil”, “Tobias”, “Linus”]);

数组变量.slice(第一个参数,第二个参数) 从原数组中截取相应的数据，如果仅有一个参数那么该参数将数当前截取数据的开始坐标，直到数组的最后面。
案例：
var fruits = [“Banana”, “Orange”, “Lemon”, “Apple”, “Mango”];
var citrus = fruits.slice(1,3);
输出的结果：
Orange,Lemon
（4）数组排序：
sort(); --> 数据排序，如果是字母直接调用，如果是数字，如下：
案例1：
var points = [40, 100, 1, 5, 25, 10];
document.getElementById(“demo”).innerHTML = points;

function myFunction() {
points.sort(function(a, b){return a - b});
document.getElementById(“demo”).innerHTML = points;
}

案例2：
var cars = [
{type:“BMW”, year:2017},
{type:“Audi”, year:2019},
{type:“porsche”, year:2018}
];

displayCars();

function myFunction() {
cars.sort(function(a, b){return a.year - b.year});
displayCars();
}

function displayCars() {
document.getElementById(“demo”).innerHTML =
cars[0].type + " " + cars[0].year + “
” +
cars[1].type + " " + cars[1].year + “
” +
cars[2].type + " " + cars[2].year;
}
案例三：

var cars = [
{type:“BMW”, year:2017},
{type:“Audi”, year:2019},
{type:“porsche”, year:2018}
];

displayCars();

function myFunction() {
cars.sort(function(a, b){
var x = a.type.toLowerCase();
var y = b.type.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
displayCars();
}

function displayCars() {
document.getElementById(“demo”).innerHTML =
cars[0].type + " " + cars[0].year + “
” +
cars[1].type + " " + cars[1].year + “
” +
cars[2].type + " " + cars[2].year;
}

使用查找最大值和最小值：
Math.max()
案例：
var points = [40, 100, 1, 5, 25, 10];
document.getElementById(“demo”).innerHTML = myArrayMax(points);

function myArrayMax(arr) {
return Math.max.apply(null, arr);
}

Math.min()
var points = [40, 100, 1, 5, 25, 10];
document.getElementById(“demo”).innerHTML = myArrayMin(points);

function myArrayMin(arr) {
return Math.min.apply(null, arr);
}

Array.forEach()、Array.map()、Array.filter()、Array.every()、Array.some()、Array.find()、Array.findIndex()
相同点：
1.都不会改变原来数组中的数据
2.这几个方法都会遍历整个数组中的每一个元素，如果需要进行相应的运算可以创建一个局部变量存储。
3.调用的方法通常含有三个参数 value, index ,array 项目值,项目索引,数组本身
当然我们也可以仅仅写value也可以，效果一样。

不同点：
map、filter 在调用该方法后都会重新创建一个数组存储。
every 会实现一个过滤的方法，检查所有数组值是否通过测试,有一个不符合条件的就会判断测试不通过。
sone 会实现一个过滤的方法，检查所有数组值是否通过测试，有一个符合条件的就会判断测试通过
find 返回通过测试函数的第一个数组元素的值。
findIndex 返回通过测试函数的第一个数组元素的索引
下面列举一些使用案例：

案例1：
var txt = “”;
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
document.getElementById(“demo”).innerHTML = txt;

function myFunction(value) {
txt = txt + value + “
”;
}
输出值：
45
4
9
16
25

案例2：
var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

document.getElementById(“demo”).innerHTML = numbers2;

function myFunction(value) {
return value * 2;
}
输出值：
90，8，18，32，50

案例3：
var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

document.getElementById(“demo”).innerHTML = over18;

function myFunction(value, index, array) {
return value > 18;
}
输出值：
45，25

案例4：
var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

document.getElementById(“demo”).innerHTML = “所有大于 18 的是：” + allOver18;

function myFunction(value) {
return value > 18;
}
输出值：
所有大于18的是：false

案例5：
var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

document.getElementById(“demo”).innerHTML = “某些值大于 18 是：” + someOver18;

function myFunction(value, index, array) {
return value > 18;
}
某些值大于18 true

案例6：
var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

document.getElementById(“demo”).innerHTML = “大于 18 的第一个值是：” + first;

function myFunction(value, index, array) {
return value > 18;
}
输出的值：
大于18的第一个值是： 25

案例7：
var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

document.getElementById(“demo”).innerHTML = “大于 18 的第一个值的索引是：” + first;

function myFunction(value, index, array) {
return value > 18;
}
输出的值：
大于18的第一个值的索引是 3

Array.reduce()、Array.reduceRight()
1.不改变原来数组的值
2. 使用的参数相同total, value, index, array 其中后面两个参数可以省略。

总数（初始值/先前返回的值）
项目值
项目索引
数组本身

案例：
var numbers = [45, 4, 9, 16, 25];
var sum = numbers.reduceRight(myFunction);

document.getElementById(“demo”).innerHTML = “总和是：” + sum;

function myFunction(total, value, index, array) {
return total + value;
}

Array.indexOf()、Array.lastIndexOf()
参数：
item 必需。要检索的项目。
start 可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头

在数组中搜索元素值并返回其位置
注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。

案例：
var fruits = [“Apple”, “Orange”, “Apple”, “Mango”];
var a = fruits.indexOf(“Apple”);
document.getElementById(“demo”).innerHTML = “Apple 被找到的位置是：” + (a );
输出值： 0

在调用函数如果出现：
Uncaught TypeError: undefined is not a function
at Array.forEach
就要注意当前的函数在调用时调用的函数名是否正确或者调用的函数名是否习惯加了’()’,我们注意细节就好了。