JavaScript基础知识与操作-CSDN博客

var a =1;
// var a;声明
// a=1;初始化 赋值
console.log(a);

var b ="csdn";
console.log(b);

// JS的变量都是弱类型
a="C1";
console.log(a);

// 编译前进行数据确定
// int a =1;


// 强类型：编译前进行数据类型的确定
// 弱类型：编译后确定数据类型

2、数据类型

2.1、六种数据类型

// 六种数据类型
//   数字型
var n1=100;
var pi=3.1415926;

console.log(typeof(pi))

// 2.字符串 String
var str1="字符串1";
var str2="字符串2";

console.log(typeof str1)

// 3、布尔类型 Boolean
var is1=true;
var is2=false;
console.log(typeof is1)

// 4、未定义Undefined
// 只声明 不定义 缺省
var aa;
console.log(aa)

// 5、空 Null
var timer=null;
console.log(typeof timer)

// 6、特殊类型 对象类型 Object
// 标签 数组 对象 Math Date 函数

2.2、数字类型—NaN

var n=NaN;
//NaN:not a number

3、运算符

3.1、算数运算符

// 算数运算符
//  +  —  *  /  %
var n1=100;
var n2=200;
console.log(n1+n2);
console.log(n1-n2);
console.log(n1*n2);
console.log(n1/n2);
console.log(n1%n2);

n1=n1+1;
console.log(n1);//101

//n1++
//++n1
ni=++n1;
console.log(n1);//101

n1=n1++;
console.log(n1);//100


//n2--
//--n2
n2=n2-1;
console.log(n2);

++或者--，参与到表达式中，

若++，--在前面，先自增或自减，再赋值；

若++，--在后边，先赋值，后自增或自减1；

3.2、赋值运算

<script> 
   // 赋值运算
//  = +=  -=  *=  /=  %=
var a=1;
var b=2;
//a=a+b;
a+=b;
console.log(a);//3
</script>

3.3、比较运算符

假定num=5

运算符	描述	示例	结果
==	等于	num == 6	false
===	值相等且类型相等	num === "5"	false
!=	不等于	num != 7	true
!==	值不相等或类型不相等	num !== 5	false
>	大于	num > 9	false
<	小于	num < 9	true
>=	大于或等于	num >= 8	false
<=	小于或等于	num <= 7	true

3.4、逻辑运算符

假定num=5;

运算符	描述	示例	结果
`&&`	与	(num%2==1 && num>1)	true
\|\|	或	(num%2==0 \|\| num>1)	true
`!`	非	!(num%2==0)	true

4、数据类型装换及Math

4.1、隐式转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型转换</title>

</head>
<body>
  
</body>
<script> 
   //隐式转换
   //数字 字符串
   var a=1;
   var b="1";
   console.log(a+b,typeof(a+b));
//    数字与字符串进行四则运算，+：转字符串类型，其余都是数字类型
   console.log(a-b,typeof(a-b));
   console.log(a*b,typeof(a*b));
   console.log(a/b,typeof(a/b));
  
// 转布尔类型
if(true){
    console.log("JS学习")
}
</script>
</html>

非0即为真，非空即为真

<script> 
   //隐式转换
   //数字 字符串
   var a=1;
   var b="1";
//    console.log(a+b,typeof(a+b));
//     数字与字符串进行四则运算，+：转字符串类型，其余都是数字类型
//    console.log(a-b,typeof(a-b));
//    console.log(a*b,typeof(a*b));
//    console.log(a/b,typeof(a/b));
  
// 转布尔类型
//n=1.1或1，等同于true,都会打印          非0即为真，非空即为真
//n=0时，等同于false,不会打印结果
// var str="";   //Uncaught ReferenceError: n is not defined
// var a; //输出JS学习
var a=null;//无输出
if(a){
    console.log("JS学习")
}
</script>
</html>

4.1.1、字符串和数字进行加运算

字符串和数字进行加运算时，会将数字转换成字符串，然后和另一个字符串进行拼接

var num1 = '123' 
var num2 = 12 
var num3 = num1 + num2 
console.log(num3) // 预期输出：'12312'

4.1.2、字符串和数字进行减、乘、除运算，以及大小比较

会将字符串转换成数字，再和另一个数字进行运算或比较

var num1 = '123' 
var num2 = 12 
var num3 = num1 - num2 
console.log(num3) // 预期输出：111 
var num1 = '123' 
var num2 = 12 
var num3 = num1 * num2 
console.log(num3) // 预期输出：1476 
var num1 = '123' 
var num2 = 12 
var num3 = num1 / num2 
console.log(num3) // 预期输出：10.25 
var num1 = '123' 
var num2 = 15 
var t = num1 > num2 
console.log(t) // 预期输出：true

4.2、强制转换

4.2.1、字符串类型强制转换为数字类型

<script> 
   //强制类型转换
//    NaN
// var str ="abc123";//输出NaN
var str ="123";//输出123
var n =Number(str);//本身是字符串类型，强制转换成数字类型
console.log(n)
</script>

isNaN

用来确定一个值是否为NaN。NaN表示不是一个数字。如果isNaN函数的参数不是Number类型， isNaN函数会首先尝试将这个参数转换为数值，然后才会对转换后的结果是否是NaN进行判断。

因此，对于能被强制转换为有效的非NaN数值来说（空字符串和布尔值分别会被强制转换为数值0和1），返回false值也许会让人感觉莫名其妙。比如说，空字符串就明显“不是数值（not a number）”。这种怪异行为起源于："不是数值（not a number）"在基于IEEE-754数值的浮点计算体制中代表了一种特定的含义。isNaN函数其实等同于回答了这样一个问题：被测试的值在被强制转换成数值时会不会返回IEEE-754中所谓的“不是数值（not a number）”。

isNaN('abc') // 返回值：true 因为字符串'abc'不是一个数字 
isNaN('12.23') // 返回值：false 因为字符串'12.23'是一个数字 

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // true

isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false

// strings
isNaN("37");      // false: 可以被转换成数值37
isNaN("37.37");   // false: 可以被转换成数值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN("");        // false: 空字符串被转换成0
isNaN(" ");       // false: 包含空格的字符串被转换成0

// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true

isNaN("blabla")   // true: "blabla"不能转换成数值
                  // 转换成数值失败， 返回NaN

4.2.2、字符串转数字（parseInt parseFloat ）

parseInt //转为 int类型
parseFloat //转为 float类型

<script> 
// parseInt   //强制转为 int类型
// parseFloat   //强制转为 float类型

var n="1.3";
// n=parseInt(n);//输出 1  number
n=parseFloat(n);//输出 1.3  number
console.log(n,typeof n);
</script>

4.2.3、数字类型强制转换为字符串类型

<script> 
//本身是数字类型，强制转换为字符串类型
var n=100;
n=String(n);
console.log(n,typeof n);
</script>

4.2.4、数字转数字

<script> 
var n=1.45;
n=parseInt(n);//输出 1 
console.log(parseInt(n));
</script>

4.3、Math对象

4.3.1、Math.floor 向下取整

<script> 
// 向下取整
n=4.55;
n=Math.floor(n);//输出  4
console.log(n);
</script>

4.3.2、Math.ceil 向上取整

<script> 
// 向上取整
n=4.55;
n=Math.ceil(n);//输出  5
console.log(n);
</script>

4.3.3、Math.round 四舍五入

<script> 
// 四舍五入
n=4.55;
n=Math.round(n);//输出  5
console.log(n);
</script>

4.3.4、Math.max/min() 最大值，最小值

<script> 
// n=Math.max(1,2,3,4,-2,-5);//输出  4
n=Math.min(1,2,3,4,-2,-5);//输出  -5
console.log(n);
</script>

4.3.5、Math.random() 随机数

<script> 
//随机数取值范围[0,1)  大于或等于0，小于1；
n=Math.random();
console.log(n);
</script>

4.3.6、Math.pow() 幂数

<script> 
//5的2次方；
n=Math.pow(5,2);//25
n=2**3//2的3次方  8
console.log(n);
</script>

4.3.7、Math.sqrt() 开平方

<script> 
n=Math.sqrt(25);//5
console.log(n);
</script>

4.3.8、Math.abs() 绝对值

<script> 
n=Math.abs(-25);//25
console.log(n);
</script>

4.4、各种值转换为布尔值

数字0，空字符串""，null，undefined 转成布尔值的时候都是false
非0数字，非空字符串转成布尔值的时候都是true

任何数组（即使是空数组），任何对象（即使是空对象）转成布尔值的时候都是true

var a = 0 
if (a) { 
    console.log('hello') 
} else { 
    console.log('world') 
} 
// 当a=0或""或null或undefined的时候，预期输出：world 
// 当a=[]或空对象的时候，预期输出：hello 
// 当a=-1或"abc"时候，预期输出：hello

4.5、例题

JavaScript代码运行符合预期，空格处应该填什么运算符？
var a = true 
var b = 2 
var c = a ___ b 
console.log(c) 

预期输出： 
2

b为2，1*2会得到2，或者0+2会得到2

空格处应该填*，true会被隐式转换成1参入运算

JavaScript代码运行的预期输出结果是？
var res = 567 + '1' - 89
console.log(res) 

预期输出： 

①字符串和数字进行加运算时，会将数字转换成字符串，然后和另一个字符串进行拼接

567+‘1’=5671

②字符串和数字进行减、乘、除运算，以及大小比较时，会将字符串转换成数字，再和另一个数字进行运算或比较

5671-89=5582

预期输出： 5582

JavaScript代码运行的预期输出结果是？
if (null) {
    console.log('Hello')
} else {
    console.log('World')
}

预期输出： 
____

null是JS里面一个特殊的值，表示什么都没有，在这里会被转成布尔值。转成布尔类型的话，则为false

预期输出：World

4.6、Math内置对象例题

// 要想以下JavaScript代码符合预期，空格处应该填什么？
var a = Math._____(-120.38)
console.log(a)
预期输出结果：
-121
【思路】

给出的数值-120.38 ，预期结果-121，说明是向下取整

Math.floor() 正是向下取整

// 获取一个10-50的随机整数
var num = Math.floor(Math.random()*40)+10
Math.random()*40 //获取40以内的随机数（当前还是浮点数）
【思路】

Math.random()*40；为获取一个40以内的随机数（浮点数）

Math.floor(Math.random()*40)；将这个浮点数舍1取整

在最后加10则不管随机数是最小数还是最大数，都满足要求10-50

表达式 Math.____(13.6589)计算结果为13，则空格处应该填？

小于13.6589的的最大的整数就是13，所以这儿可以使用向下取整的方法floor

要想以下JavaScript代码符合预期，空格处应该填什么(表达式除外)？（使用中文逗号「，」隔开）
var a = -14.4
var b = 10
var c = Math.____ (a*b)
var d = Math.____ (c)
console.log(d)
预期输出结果：
12
首先a*b的默认结果为-144(已是整数，取整方法不适用)，已知的Math方法里取绝对值可以将-144转为144；144的平方根正好符合答案，故使用平方根方法 abs,sqrt

要想以下JavaScript代码符合预期，空格处应该填什么整数？
console.log(Math.sqrt(____))
预期输出结果：
9
Math内置对象上的sqrt方法是开平方根的意思。 81

要想以下JavaScript代码符合预期，空格处应该填什么(表达式除外)？ max
console.log(Math.____(3, 4, 89))
预期输出结果：
89

要想以下JavaScript代码符合预期，空格处应该填什么(表达式除外)？ ceil
console.log(Math.____(8.01))
预期输出结果：
9
给Math内置对象上的一个方法传入一个8.01这个小数，得到一个整数9，是用向上取整还是向下取整，还是四舍五入还是直接去掉小数部分？

5、函数

作用：

代码更加简洁，提高重用性

<script> 
//实现两个数字的加法操作
var n1=3;
var n2=4;
console.log(n1+n2);//7

var n3=6;
var n4=1;
console.log(n3+n4);//7
</script>

<script> 
// 函数的声明
function sum(a,b){
    console.log(a+b);
}
// 函数的调用
sum(3,4);
sum(8,9);
sum(10,12);
</script>

function sum(a,b){

console.log(a+b);

}

function 函数名(一组参数){

代码体

}

一组参数：最多255个参数，也可以不写

参数：形参（声明的位置）实参（调用的位置）

<script> 
function sum(a,b){
    // console.log(1234);  把console放在前面就会执行打印
    return a+b;//返回一个值，结束函数 后面的console就不在执行打印了
    console.log(1234);
}
 var n=sum(1,5);
 console.log("n==="+n)
</script>

5.1、运用函数和Math形成随机数

5.1.1、用生成一个按钮，按一次在后台显示执行次数

<body>
  <button onclick="createNumber()">点击生成</button>
</body>
<script> 
function createNumber(){
  console.log("我被执行了")
}
</script>

我点击了7次

5.1.2、刷新形成随机数

<script> 
// 随机函数  随机产生某个范围的数字
// 5-20
function rand(min,max){
    var n = Math.random();
    n = n*(max-min); 
    n=Math.floor(n)  //Math.floor向下取整
    n+=min;
    return n;
}
   console.log(rand(5,21))
</script>

更简洁的代码

<script> 
// 随机函数  随机产生某个范围的数字
// 5-20
function rand(min,max){
return Math.floor(Math.random()*(max-min))+min;
}
   console.log(rand(1,21))
</script>

5.1.3、点击生成随机数

<body>
    <button onclick="createNumber()">点击生成</button>
  </body>
  <script> 
  function createNumber(){
    console.log(rand(0,10))
  }

  function rand(min,max){
        return Math.floor(Math.random()*(max-min))+min;
}
  </script>

6、函数作用域

作用域分成：

全局作用域
局部作用域
全局变量
局部变量

<script>
    //全局作用域
    // 在全局作用域声明的变量，称为全局变量
    var bl="javascript";

    function changeBl(){
        // 局部作用域定义的变量称为局部变量
        // 不能在全局作用域调用局部变量
        var my="小羊";
        bl="hello JS";
    }
    changeBl();
    console.log(bl)

</script>

7、流程控制语句

7.1、if分支

if (条件1) { 
    // 代码块1 
} else if (条件2) { 
    // 代码块2 
} else { 
    // 代码块3 
}

如果条件1为真就会执行代码块1。即使条件2为真也不会去执行代码块2，更不会执行代码块3

只有当条件1为假，并且条件2为真的时候，才会执行代码块2

如果条件1和条件2都为假，才会执行代码块3

else if 和 else 部分不是必需的。

可以有多个else if

示例：

var x = 20 
if (x > 5) { 
    console.log('a') 
} else if (x > 50) { 
    console.log('b') 
} else { 
    console.log('c') 
} 
// 如果x=20，上述代码预期输出：'a' 
// 如果x=100，上述代码预期输出也是：'a'

7.2、switch分支

switch (expression) { 
    case value1: 
        // 当 expression 的结果与 value1 匹配时，执行此处语句 	
        [break;] 
    case value2: 
        // 当 expression 的结果与 value2 匹配时，执行此处语句 	
        [break;] 
    ... 
    case valueN: 
        // 当 expression 的结果与 valueN 匹配时，执行此处语句 	
        [break;] 
    [default: 
        // 如果 expression 与上面的 value 值都不匹配，执行此处语句 
        [break;]] 
}

[]表示这一部分语句是可选的，并不是说正常代码中要加[]

expression和value的是进行严格模式的匹配

如果所有case都没有匹配到，将执行default分支的代码

示例：

var expr = '樱桃' 
switch (expr) { 
    case '樱桃': 
        // 代码块1
        console.log('樱桃每斤7元'); 
        break; 
    case '芒果': 
    case '木瓜': 
        // 代码块2
        console.log('芒果 和 木瓜 每斤10元'); 
        break; 
    default: 
        // 代码块3
        console.log('对不起，我们没有 ' + expr + '.'); 
} 
// 如果expr值为'樱桃'，则预期输出：'樱桃每斤7元' 
// 当expr的值为'樱桃'时就会执行代码块1，且代码块1中有break，所有不会执行其他代码块 
// 注意：如果expr匹配到某一个case，且这个case里面代码没有break，那么执行完这个代码块后，紧接着就会执行下一个case的代码，不管expr有没有匹配到下一个case的值 
// 所以当expr的值为'芒果'的时候，代码块2也将被执行

7.3、例题

以下JavaScript代码符合预期，空格处应该填什么(表达式除外)？

var expr = ____ 
switch (expr) { 
    case 1: 
        // 代码块1 
        console.log(111); 
    case 2: 
        // 代码块2 
        console.log(222); 
    case 3: 
        // 代码块3 
        console.log(333); 
        break;  
    case 5: 
        // 代码块5 
        console.log(111); 
    case 6: 
        // 代码块6 
        console.log(222); 
        break; 
    default: 
        // 代码块7 
        console.log(111); 
}
预期输出： 
111
222

如果case的代码块里面最后没有break，那么当前case被执行后，会立即执行下一个case（不管值是否匹配），直到有一个case的代码块有break为止

以此类推，只有当expr为5时，会执行代码块5、代码块6，从而打印111, 222 符合预期输出

7.4、for循环


for (语句 1; 语句 2; 语句 3) {
    要执行的代码块
}

7.4.1、for循环代码实例一（普通遍历）

for (var i = 0; i < 10; i++) {
    console.log(i)
}
// 执行结果
0 1 2 3 4 5 6 7 8 9

for (var i = 0; i < 10; i+=2) {
    console.log(i)
}
// 执行结果
0 2 4 6 8

说明：

语句1在循环之前设置一个变量(var i = 0),从0开始遍历

语句2定义运行循环的条件(i必须小于10)，当i = 10的时候不满足循环条件

语句3会在代码块每次执行之后对变量值i进行递增(i++)

语句3 (i+=2) 相当于每次循环迭代器i+2，也可以这么写（i=i+2）

7.4.2、for循环代码实例二（数组遍历）：

var arr = [11, 22, 33, 44, 55]
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i])
}
// 执行结果
11 22 33 44 55

说明：

语句1在循环之前设置一个变量(var i = 0),从0开始遍历(数组下标从0开始)

语句2定义运行循环的条件(i必须小于arr的数组长度)，当arr下标正好是0-3，4的时候不满足循环要求

语句3会在代码块每次执行之后对变量值i进行递增(i++)从arr[0]-arr[3]

7.4.3、for循环代码实例三（对象遍历）：

var obj = {name:"tom", gender:"man", age:32} 
for (var key in obj) {
    // 打印键
    console.log(key)
    // 打印值
    console.log(obj[key])
}
// 执行结果
name
tom
gender
man
age
32

说明：
JavaScript提供了一种特殊的循环（也就是for .. in循环），用来迭代对象的属性或数组的每个元素，for...in循环中的循环计数器是字符串，而不是数字。它包含当前属性的名称或当前数组元素的索引

7.4.4、输出50以内的奇数

<script>
//   写出50以内的奇数
var all = 50;
for(var i=0;i<=all;i++){
    if(i%2==1){
        console.log(i);
    }
}
// 另一种方法
for(var i=1;i<=all;i+=2){
    console.log(i)
}
</script>

7.4.5、输出100以内的斐波那契数列

<script>
// 输出100以内的斐波那契数列
// 1 1 2 3 5 8 13
var a=1;
var b=1;
console.log(a)
console.log(b)
for (var i=0;i<100;i++){
    if( i==(a+b)){
        console.log(i);
        a=b;
        b=i;
    }
}
</script>

7.4.6、输出1-100，遇到7或7的倍数，则输出，生成随机数，如果随机数是52，停止输出

<script>
// 输出1-100，遇到7或7的倍数，则输出
// 生成随机数，如果随机数是52，停止输出
for(var i=1;i<=100;i++){
    if(i%7==0){
        // 终止本次循环，进入下一次循环
        continue;
    }
    if(rand(30,55)==52){
        // 终止所有的循环
        console.log("满足条件,终止循环")
        break;
    }
    console.log("i=="+i);
}
function rand(min,max){
    return Math.round(Math.random()*(max-min)+min);
}
</script>

7.5、三目运算符

<script>
   var name="小羊"

// 判断条件 ? 对：错
// 若name相等，返回工程师，错误返回JS学习
   var str=(name=="前端")?"工程师":"JS学习"
   console.log(str)//输出JS学习
</script>




//    相当于
if (name=="小羊"){
    str="工程师"
}
else{
    str="JS学习"
}
console.log(str)//输出 工程师

7.6、while循环

while (条件)
{
    需要执行的代码
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
//    输出0~5,最原始方法
console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)


// 运用循环语句
var n=0;
while(n<=5){
    console.log(n)
    n++;
}

</script>
</html>

7.7、do/while

do
{
    需要执行的代码
}
while (条件);
//至少执行一次代码块

<script>
var n=0;
do{
    console.log(n)
}
while(n<0)

</script>
//输出0，模块至少执行一次

<script>
    //当格式是这样时，会出现死循环
while(true){
    //死循环
}

</script>

8、数组

//利用new创建数组
var 数组名 = new Array();
var arr = new Array();//创建一个新的空数组

//利用数组字面量创建数组
//1、使用数组字面量方式创建空的数组
var 数组名=[];
//2、使用数组字面量方式创建带初始值的数组
var 数组名=['小白','小黑','大黄','佩奇'];


//数组可以存放任意类型的数据，例如字符串，数字，布尔值等
var arrStus=['小白',12,true,28.9]

8.1、数组的索引

<script>
var arrStus=[1,2,3];
console.log(arrStus[1]);//输出2
</script>

8.2、遍历数组

<script>
//遍历数组，把数组中的元素从头到尾访问一次
var arr=[1,2,3,4,5,6,7,8,9,10];
for(var i=0;i<10;i++){
    console.log(arr[i]);
}
</script>

8.3、数组的长度

<script>
//遍历数组，把数组中的元素从头到尾访问一次
var arr=[1,2,3,4,5,6,7,8,9,10];
for(var i=0;i<10;i++){
    console.log(arr[i]);
}
console.log(arr.length);
</script>

<script>
//遍历数组，把数组中的元素从头到尾访问一次
var arr=[1,2,3,4,5,6,7,8,9,10];
console.log(arr.length);
for(var i=0; i<arr.length;i++){
    console.log(arr[i]);
}
</script>

//数组长度  数组名.length
//数组的长度是元素个数，不要跟索引号混淆   索引号从0开始，数组长度是元素个数
//arr.length 动态监测数组元素的个数

8.4、数组中新增元素

8.4.1、通过修改length长度来新增数组元素

8.4.2、通过修改索引号，追加数组元素

8.5、数组操作

<script>
// 数组元素的修改和访问
var books=["哈利波特","哈利波特2","哈利波特3","哈利波特4","哈利波特5"]
// 通过下标访问 修改元素
console.log(books[0])//输出哈利波特
books[3]="伏地魔";
console.log(books.length);//输出5

// push(n) 在数组最后添加一个元素n 
books.push("斯莱特林")
console.log(books);
//  ['哈利波特', '哈利波特2', '哈利波特3', '伏地魔', '哈利波特5', '斯莱特林']

// pop() 删除数组最后一个元素
books.pop();
console.log(books)
//  ['哈利波特', '哈利波特2', '哈利波特3', '伏地魔', '哈利波特5']

// unshift(n) 在数组的开头添加一个元素n
books.unshift("赫敏")
console.log(books)
// ['赫敏', '哈利波特', '哈利波特2', '哈利波特3', '伏地魔', '哈利波特5']

// shift() 删除数组的第一元素
books.shift();
console.log(books);
// ['哈利波特', '哈利波特2', '哈利波特3', '伏地魔', '哈利波特5']

// concat()  拼接数组 返回一个新的数组
var arr=["魔法石","邓布利多"]
books=books.concat(arr);
console.log(books);
// ['哈利波特', '哈利波特2', '哈利波特3', '伏地魔', '哈利波特5', '魔法石', '邓布利多']

// splice(下标，删除元素的个数，新插入的元素列表)
books.splice(1,2,"罗恩","斯内普")
console.log(books)
//  ['哈利波特', '罗恩', '斯内普', '伏地魔', '哈利波特5', '魔法石', '邓布利多']

// slice(start[, end]) 截取元素 返回一个新的数组
var a =books.slice(1,2);
console.log(a);
// ['罗恩']

// reverse()反转数组
console.log(books.reverse());
// ['邓布利多', '魔法石', '哈利波特5', '伏地魔', '斯内普', '罗恩', '哈利波特']

// join(规则)  按照规则将数组转为字符串,用逗号隔开
console.log(books.join(","));
// 邓布利多,魔法石,哈利波特5,伏地魔,斯内普,罗恩,哈利波特

// indexof(子元素)  从数组中查询子元素，返回下标，没有就返回-1
console.log(books.indexOf("小羊"))
// -1
</script>

8.6、数组常见方法

8.6.1、 forEach()

对数组的每个元素执行一次给定的函数

var array1 = ['a', 'b', 'c'] 

array1.forEach( function(element) { 
console.log(element) 
}) 
// 预期输出 
// "a" 
// "b" 
// "c"

8.6.2、indexOf()

返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'] 
console.log(beasts.indexOf('bison')) // 预期输出: 1 
// start from index 2 
console.log(beasts.indexOf('bison', 2)) // 预期输出: 4
console.log(beasts.indexOf('giraffe')) // 预期输出: -1

8.6.3、 join()

将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

var elements = ['Fire', 'Air', 'Water'] 
console.log(elements.join()) // 预期输出: "Fire,Air,Water" 
console.log(elements.join('')) // 预期输出: "FireAirWater" 
console.log(elements.join('-')) // 预期输出: "Fire-Air-Water"

8.6.4、 map()

创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

var array1 = [1, 4, 9, 16]; // 传入一个回调函数给map方法 
var map1 = array1.map(function (x) { return x * 2 });
console.log(map1); // 预期输出: Array [2, 8, 18, 32]

8.6.5、 pop()

从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']; 
console.log(plants.pop()); // 预期输出: "tomato" 
console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage", "kale"] 
plants.pop(); 
console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage"]

8.6.6、 push()

将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

var animals = ['pigs', 'goats', 'sheep']; 
var count = animals.push('cows'); 
console.log(count); // 预期输出: 4 
console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows"] 
animals.push('chickens', 'cats', 'dogs'); 
console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

8.6.7、reverse()

将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

var array1 = ['one', 'two', 'three']; 
console.log('array1:', array1); // 预期输出: "array1:" Array ["one", "two", "three"] 
var reversed = array1.reverse(); 
console.log('reversed:', reversed); // 预期输出: "reversed:" Array ["three", "two", "one"] 
// 注意：该方法会修改原数组 
console.log('array1:', array1); // 预期输出: "array1:" Array ["three", "two", "one"]

8.6.8、shift()

从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

var array1 = [1, 2, 3]; 
var firstElement = array1.shift(); 
console.log(array1); // 预期输出: Array [2, 3] 
console.log(firstElement); // 预期输出: 1

8.6.9、 slice()

返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; 
console.log(animals.slice(2)); // 预期输出: Array ["camel", "duck", "elephant"] 
console.log(animals.slice(2, 4)); // 预期输出: Array ["camel", "duck"] 
console.log(animals.slice(1, 5)); // 预期输出: Array ["bison", "camel", "duck", "elephant"] 
console.log(animals.slice(-2)); // 预期输出: Array ["duck", "elephant"] 
console.log(animals.slice(2, -1)); // 预期输出: Array ["camel", "duck"]

8.6.10、 sort()

对数组的元素进行排序，并返回数组。

var months = ['March', 'Jan', 'Feb', 'Dec']; 
months.sort(); 
console.log(months); // 预期输出: Array ["Dec", "Feb", "Jan", "March"] 
var array1 = [1, 30, 4, 21, 100000]; 
array1.sort(); 
console.log(array1); // 预期输出: Array [1, 100000, 21, 30, 4]

// 如果sort()方法调用的时候没有传入回调函数，会将数组转成字符串然后进行大小比较并升序排列，字符串的大小比较是按照字典顺序进行的。所以10000会比21小。

// 如果sort()方法调用的时候传入了回调函数，会按回调函数的返回值来决定相邻两个元素的排序，例如：
var array1 = [1, 30, 4, 21, 100000]; 
array1.sort(function (item1, item2) {
return item1 - item2
}); 
console.log(array1); // 预期输出: Array [1, 4, 21, 30, 100000]

// 这里面的item, item2参数就是array1里面相邻的两个元素
// 如果这个回调函数返回的结果大于0，那么item2将排在item1的前面
// 如果这个回调函数返回的结果小于0，那么item1将排在item2的前面
// 如果这个回调函数返回的是0，那么item1和item2的位置不变

8.6.11、 unshift()

将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

var array1 = [1, 2, 3]; 
console.log(array1.unshift(4, 5)); // 预期输出: 5 
console.log(array1); // 预期输出: Array [4, 5, 1, 2, 3]

9、字符串常见方法与属性

9.1、string对象属性

属性名称	作用	示例	结果
length	获取字符串入的长度	'abcd'.length	4

9.2、string对象的常用方法

方法名称	作用	示例	结果
charAt()	获取指定位置的字符	'abcd'.charAt(2)	c
indexOf()	检索指定的字符串值在字符串中首次出现的位置	'abcd'.indexOf('a')	0
lastIndexOf()	从后往前查询所要搜索的字符串在原字符串中第一次出现的位置（索引），找不到则返回-1	'abcdabc'.lastIndexOf('a')	4
search()	检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串	'abcd'.search('c')	2
match()	字符串内检索指定的值，或找到一个或多个正则表达式的匹配	'abcdabc'.match('a')	['a', index: 0, input: 'abcdabc']
substring()	字符串截取方法，它可以接收两个参数，分别是要截取的开始位置和结束位置，它将返回一个新的字符串	'abcdabc'.substring(1, 4)	bcd
slice()	与substring()方法非常类似，它传入的两个参数也分别对应着开始位置和结束位置。而区别在于，slice()中的参数可以为负值	'abcdabc'.slice(1, 4)	bcd
replace()	用来进行字符串替换操作，它可以接收两个参数，前者为被替换的子字符串，后者为用来替换的文本	'abcd'.replace('a', 'A')	Abcd
split()	于把一个字符串分割成字符串数组	'abcd'.split('')	['a', 'b', 'c', 'd']
toLowerCase()	可以把字符串中的大写字母转换为小写	'Abcd'.toLowerCase()	abcd
toUpperCase()	可以把字符串中的小写字母转换为大写	'Abcd'.toUpperCase()	ABCD

要想以下JavaScript代码符合预期，空格处应该填什么整数？
var str = "JavaScript是一门动态类型的语言"
console.log(str.substring(4, ____))
预期输出结果：
Script

字符串的substring方法是截取原字符串的一部分。截取的规则是从第一个参数表示的索引位置开始（包含该字符），到第二个参数表示的索引为止结束（不包含该位置字符）。

如果第一个参数等于第二个参数，substring 返回一个空字符串。

如果省略第二个参数，substring 提取字符一直到字符串末尾。

如果任一参数小于 0 或为 NaN，则被当作 0。

如果任一参数大于 str.length，则被当作 str.length。

如果第一个参数大于第二个参数，则 substring 的执行效果就像两个参数调换了一样。

答案： 10