JavaScript简介

1.什么是JavaScript?

JavaScript是运⾏在浏览器上的脚本语⾔。简称JS。

JavaScript是王景公司（NetScape)的布兰登·艾奇开发的，最初叫做LiveScript。LiveScript的出现让浏览器更加⽣动，使得页⾯更具有交互性。

JavaScript（简称“JS”）是⼀种具有函数优先的轻量级，解释型或即时编译型的编程语⾔。虽然它是作为开发Web页⾯的脚本语⾔⽽出名的，但是它也被⽤到了很多⾮浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语⾔，并且⽀持⾯向对象、命令式和声明式（如函数式编程）风格。

JavaScript在1995年由Netscape公司的Brendan Eich，在⽹景导航者浏览器上⾸次设计实现⽽成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript和java没有任何关系，只是语法类似。JavaScript运⾏在浏览器中，代码由浏览器解释后执⾏。⽽Java运⾏在JVM中。

JavaScript的“⽬标程序”以普通⽂本形式保存，这种语⾔都叫做"脚本语⾔“。

Java的⽬标程序已.class形式存在，不能使⽤⽂本编辑器打开，不是脚本语⾔。

1998年⽹景公司由“美国在线”公司收购。王景公司最著名的就是“领航者浏览器”：Navigator浏览器。

LiveScript的出现，最初的时候是为Navigator浏览器量⾝定制⼀门语⾔，不⽀持其他浏览器。

微软⼀看不⾏，研发了只⽀持IE浏览器的脚本语⾔。JScript。

在两者语⾔共存的时代，程序员需要写两套程序。这时⼀个叫做ECMA组织（欧洲计算机协会）根据JavaScript制定了ECMA-262标准，叫做ECMA-Script.

JavaScript是⼀种属于⽹络的脚本语⾔,已经被⼴泛⽤于Web应⽤开发,常⽤来为⽹页添加各式各样的动态功能,为⽤户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌⼊在HTML中来实现⾃⾝的功能的。

2.区分JSP和JS

JSP：JavaServer Pages（⾪属Java）

JS: JavaScrip

HTML中嵌⼊JavaScript

1.HTML嵌⼊JavaScript的第一种⽅式（行内）

在JS中有很多事件，其中⼀个事件叫做：⿏标单击，单词：click。并且任何事件都会对应⼀个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：事件句柄是在事件单词前添加⼀个on】，⽽事件是以HTML标签的属性存在的。

onclick="js代码“，执⾏原理是什么？

页⾯打开的时候，js代码并不会执⾏，只是把这段代码注册到按钮的click事件上了。等这个按钮发⽣click之后，注册在onclick后⾯的js代码会被浏览器⾃动调⽤。

1.1 行内执行js第一种方式

*js的字符串可以使用单引号，也可以使用双引号。 *JS的⼀条语句结束之后可以使⽤分号“；”,也可以不使⽤。例如：

<!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>HTML中嵌⼊JavaScript</title>
    <style>
        div {
            width: 500px;
            height: 200px;
            background-color: pink;
        }
    </style>
    
</head>
<body>
    <div onclick="console.log(111)">行内执行js第一种方式</div>
 </body>

页面中这个 div, 鼠标单击一下, 会在控制台打印 111

1.2 行内执行js第二种方式

*怎么使⽤JS代码弹出消息框。

在JS中有⼀个内置对象叫做window,全部⼩写，可以直接拿来使⽤，window代表的是浏览器对象。

*window对象有⼀个函数叫做：alert，⽤法是：window.alert("消息”）;这样就可以弹窗了。

*JS的字符串可以使⽤双引号，也可以使⽤单引号。

*JS的⼀条语句结束之后可以使⽤分号“；”,也可以不使⽤。例如：

<!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>HTML中嵌⼊JavaScript</title> 
</head>
<body>
    <!--点击按钮弹出消息框-->
    <input type="button" value="Hello" onclick="window.alert('Hello JavaScript!')"/>

运行后可以通过点击出现弹窗 Hello JavaScript!

从上可看出，JS是⼀门事件驱动型的编程语⾔，依靠时间去驱动，然后执⾏对应的程序。可以通过script标签，需要运行的js代码可以写在标签里面，但这种方法在js代码多的时候会让编程里的html页面看起来繁杂乱，所以这种方法适合简单的js运行，不适合用于开发过程。

2.HTML嵌⼊JavaScript的第⼆种⽅式（推荐）

引用外部js文件⽅式：

引⼊js脚本⽂件的语句：同⼀个脚本⽂件可以引⼊多次。

脚本⽂件直接写语句就好了。

<script type="text/javascript" src="路径和⽂件名“></script>

结束的< /script>标签必须有，不能⽤反斜杠取代，引⼊⽂件时，其中间的代码不会执⾏。

JavaScript标识符和变量

1.标识符的命名规则

规则：不遵守会报错

变量名可以有字母; 数字; $符号; _下划线组成但是!!! 数字不能开头

不能用 JS 的关键字作为变量名: var if for let

保留字也不行 let

变量名区分大小

规范：不遵守不会报错, 但是不道德多个单词连在一起时推荐使用驼峰命名

2.变量：

声明变量：

var 变量名；赋值：

变量名=值

javascript是⼀种弱类型语⾔，没有编译阶段，⼀个变量可以随意给其赋值。什么类型的都可以。

变量没有⼿动赋值时，默认赋值为：undefined。

未声明变量使⽤会报错。

2.局部变量和全局变量

全局变量：在函数体之外声明。浏览器关闭的时候才会销毁。

局部变量:在函数体内部声明。在函数体执⾏完后才销毁。

3.当⼀个变量声明的时候没有使⽤var关键字，那么不管这个变量是在哪⾥声明的，都是全局变量

JS的数据类型

1.JS数据类型有:原始类型，应⽤类型。

原始类型：Undefined,Number,String,Boolean,Null

引⽤类型:Object以及⼦类。

1.2.在ES6规范后，⼜基于以上6种类型添加了⼀种新的类型：Symbol。

1.3 JS中有⼀个运算符叫做typeof,这个运算符可以在程序的运⾏阶段动态地获取变量的数据类型。 typeof运算符的语法格式：

typeof 变量名

typeof运算符的运算结果时以下6个字符串(全⼩写）结果之⼀：

“undefined"

“number”

“string”

“boolean”

“object”

“function”

var d=null;

alert(typeof d);//“object”

⽐较字符串时⽤双等号。

1.4.Undefined数据类型只有⼀个值。这个值就是undefined，当⼀个变量没有⼿动赋值，系统默认赋值为undefined，当然也可以⼿动赋值为undefined。

2 number数据类型

如：NaN，表⽰Not a Number不是⼀个数字，但是属于Number类型。

Infinity，表⽰⽆穷⼤。

0,-1,123,…⼩数，复数，⽆穷⼤都是属于number类型。

除数为0时，结果为⽆穷⼤。

函数isNaN（数据）：结果为true表⽰不是⼀个数字。

parseInt()函数：可以将字符串⾃动转换成数字。保留Int

parseFloat()函数：将字符串转换成数字。

Math.Ceil()函数：向上取整。2.1会变为3。

3 .boolean数据类型

在boolean类型中有⼀个Boolean（）函数，会将⾮boolean类型，转换成boolean类型。

当某个地⽅⼀定是boolean类型时，会⾃动转换成boolean类型。例如if后⾯的括号。

NaN,0,"",null,undefined会⾃动转换成false.

boolean运算包括：!(求反运算)、&&(与运算)、||(或运算

4.String数据类型

1.在JS当中，怎么创建字符串对象

第⼀种：var s=“str”;（⼩String，属于String类型）

第⼆种：var s2= new String(“ab”);（⼤String，属于Object类型）

Sting是⼀个内置的类，可以直接使⽤。

2.⽆论是⼩String还是⼤Sting字符串的长度相同。其中⼜⼀个length属性求长度(x.length)

常⽤函数：s

indexof: 获取指定字符串在当前字符串中第⼀次出现的索引

lastIndexof

replace

substr

substring

toLowerCase

toUpperCase cde spilt 拆分字符串

例如:alert(“abcde".indexof(“cde”));

replace只替换最前⾯⼀个⼦字符串

如果想全部替换需要使⽤正则表达式。

substr和substring的区别。

substr(startIndex length)

substring(startIndex endIndex)左闭右开。

5.Object数据类型

1.Object类型是所有类型的超类，⾃定义的任何类型，默认继承Object。

2.Object的prototype属性

作⽤：给类动态地扩展属性和函数。

3.Object类的函数：

toString()

valueof()

toLocalString()

4.在JS中定义的类默认继承Object的属性和函数。

JavaScript运算

1.基本运算符

基本运算符有+、-、*、%、++、--、=、类似+=的运算符，其使用方式与编程语言(Java、C、C#等)基本一样。

2.Boolean运算(!(求反运算)、&&(与运算)、||(或运算))

变量 && / || 变量

&& 特点: 前一个(符号左边)为真, 返回后一个前一个为假, 返回前一个

|| 特点：前一个为真, 返回前一个前一个为假, 返回后一个

!变量：取反, 将变量值的布尔值,做一个取反的操作

3. 赋值运算符

每种主要的算术运算以及其他几个运算都有复合赋值运算符：乘法/赋值（*=）

除法/赋值（/=）

取模/赋值（%=）

加法/赋值（+=）

减法/赋值（-=）

4.关系运算(<、>、<=、>=、==、!= !==)

小于 <

大于 >

小于等于 <=

大于等于 >=

等于 ==

不等于 !=

不全等 !==

5.自增自减运算符

++ 、 --

语法：

1.++变量

2.变量++

4.--变量

5.变量--

作用: 将自身 +1 或者 -1

区别：

符号在前, 先运算自减或自加, 然后参与周围表达式

符号在后, 先参与周围表达式运算, 然后自减或自加

JavaScript语句

1.分支语句

1.1 if...else...语句

if else 特点： else {}只要前边没有 if 判断成功, 那么他一定执行，如果前边有一个 if 判断成功, 那么他不会执行

1.2 switch

switch 的判断使用的是全等

语法: switch (判断条件) {

case 条件1:

满足条件1执行的代码

break;

case 条件2: 满足条件2执行的代码

break;

default:

上述条件都不满足时执行的代码 }

穿透现象:

寻找到满足的条件后, 如果没有 break

会继续往下执行, 直到发现 break 或者结束

循环语句

1.for循环

l for循环的使用格式

格式1：

for (变量=开始值;变量<=结束值;变量=变量+步进值)

{ 需执行的代码}

格式2：

for (property in expression)

{ 需执行的代码 }

2.while循环

While循环的使用格式

格式1：

while (expression) { 需执行的代码 }

格式2：

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

3.使用break和continue退出循环

break 命令可以终止循环的运行，然后继续执行循环之后的代码（如果循环之后有代码的话）。continue 命令会终止当前的循环，然后从下一个值继续运行。

JavaScript函数

1.函数的定义与调用

1.1定义函数 function 函数名(var1,var2,...,varX){代码．．．(return) }

在函数内申明的变量，只能在函数中访问(其生存期就在整个函数中)。在函数外申明的变量，在整个HTML页面内都有效(生存期在整个HTML页面)。

1.2调用函数

函数的定义分两种方式, 调用只有1种语法: 函数名()

2.函数的参数

为什么要有参数?

如果没有参数, 那么函数的功能相对单一, 不够灵活函数的参数他的作用 ---> 能够让函数的功能更加灵活, 更方便在多个地方调用参数也可以让我们的函数更具有差异性

参数语法

形参 ---> function或者函数名后的小括号
实参 ---> 函数调用时的小括号中

参数的作用

形参 ---》每书写一个形参, 就相当于在函数内部创建一个变量, 形参的值是由实参传递进来的
实参---》按照书写顺序一一对应, 传递给形参

函数参数的数量：

参数数量不一致

形参少, 实参多
实参少, 形参多

3.使用Function类的length属性

l 使用Function类的valueOf()方法和toString()方法


<html>

<head>

<script type= *"text/javascript"*  language= *"javascript"* >

function fun()

{

document.write("HELLO");

}

</script>

</head>

 

<body>

<script type= *"text/javascript" >

document.write(fun.toString());//输出函数的源代码

</script>

</body>

</html>

这两个方法返回的都是函数的源代码，在调试时尤其有用

### 4.闭包

闭包就是：函数可以使用函数之外定义的变量。

<html>

<head>

<script type= *"text/javascript"*  language= *"javascript"* >

var aNum=100;

function  fun(iNum1, iNum2)

{

   function myFn()

   {

    return    iNum1 + iNum2 + aNum;//使用函数外的变量

   }

  return myFn();

}
</script>

</head>

<body>

<script >

document.write(fun(1,3));

</script>

</body>

</html>

就像使用任何高级函数一样，使用闭包要小心，因为它们可能会变得非常复杂。

JavaScript对象和数组

1.JavaScript对象简介

JvaScript对象也是有属性和方法的

1.1对象属性的使用

var txt="hellow";

document.write(txt.length);//输出3</script>

1.2对象方法的使用

<script type= *"text/javascript"*  language= *"javascript"* >

******var** txt="abcd";

document.write(txt.toUpperCase());//输出ABCD

</script>

2.对象的作用域

1 JavaScript对象只有公用作用域

由于缺少私有作用域，开发者确定了一个规约，说明哪些属性和方法应该被看做私有的。这种规约规定在属性前后加下划线：obj.color = "blue";下划线并不改变属性是公用属性的事实，它只是告诉其他开发者，应该把该属性看作私有的。

2 JavaScript对象没有静态作用域

严格来说，JavaScript并没有静态作用域。不过，它可以给构造函数提供属性和方法。构造函数只是函数，函数也是对象，对象可以有属性和方法。

<script type= *"text/javascript"*  language= *"javascript"* >

******function** sayHello()//构造函数，sayHello是一个类名

{

document.write("hello<br>");

}

sayHello.alternate = **function**()//构造函数的方法成员，可以看成静态方法

{

document.write("hi<br>");

}

sayHello.message="你好";//构造函数的属性，可以看成静态属性

sayHello();//输出 "hello"

sayHello.alternate();//输出 "hi"

document.write(sayHello.message);//输出“你好”

</script>

3 对象的操作

1 对象的操作 (增删改查)

点语法
中括号语法(数组语法)

var obj = { name: 'QF' }console.log(obj)

    // // 1. 点语法

    // // 1.1 查   (对象.key)
    // console.log(obj.name)

    // // 1.2 修改 (对象.key = 新值)
    // obj.name = 'QF666'
    // console.log(obj)

    // // 1.3 增加 (对象.新key = 值)
    // obj.age = 18    // 向 对象 obj 中 新增一个 key --> age  对应的值为 18
    // console.log(obj)

    // // 1.4 删除 (delete obj.key)
    // delete obj.name
    // console.log(obj)

    var obj = {
        name: 'QF'
    }

2. 中括号语法(数组语法)

    // 2.1 查 (对象['key'])
    console.log(obj['name'])

    // 2.2  修改 (对象['key'] = 新值)
    obj['name'] = 'QF999'
    console.log(obj)

    // 2.3 增加 (对象['新key'] = 值)
    obj['age'] = 18
    console.log(obj)

    // 2.4 删除 delete 对象['key']
    delete obj['name']
    console.log(obj)

3遍历对象

遍历对象就是拿到对象的所有键值

for...in 循环

    for (var key in obj) {
        // console.log(key)    // 每一轮循环拿到的都是 对象 的 key 

        console.log(key, obj[key])
    }

数组

什么时数组？存放一些数据的集合就是数组

1 创建数组

1.1 字面量

var arr = [1, 2, 3, 4, 5] console.log(arr) 打印结果为 1 2 3 4 5

1.2 内置构造函数

var arr1 = new Array() console.log(arr1) // 空数组

var arr2 = new Array(5) console.log(arr2)// 创建一个长度为 5 的数组(虽然有长度, 但是实际的值为空)

var arr3 = new Array(5, 10) console.log(arr3) // 创建一个有内容的数组, 第一个值为 5 第二个值为 10

1.3数组的 length

代表了数组的成员数量 ---》语法: 数组.length

1.4 数组的索引值(下标)

数组的索引就代表了当前数据在数组的第几个位置(注意!!! 下标从 0开始)

var arr = [1, 2, 3, 4, 5] console.log(arr) // 下标 0 1 2 3 4

// 通过下标获取数组对应的成员 console.log(arr[0]) // 1 获取数组的第一个成员

1.5 遍历数组

拿到数组的每一个成员

var arr = [1, 2, 3, 4, 5] // 下标 0 1 2 3 4

for (var i = 0; i < arr.length; i++) { // console.log(i) console.log(arr[i]) }

2 数组排序法

1.1冒泡排序

原理：

比较相邻的元素。如果第一个比第二个大，就交换他们两个。

对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。

针对所有的元素重复以上的步骤，除了最后一个。

持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比比较

白话就是：比如有6个数，你需要比较5趟，这个是固定死的

但是每一趟比较的次数，是递减的

例如：已知一个排序好的数组将数字按照原有顺序插入到数组内 javascript var origin = [10, 20, 30, 40, 50]; var n = 11;

code run here ...

[ 10, 20, 30, 40, 50, 11]

结果: [ 10, 11, 20, 30, 40, 50 ]

解：for (var k = 0; k < arr.length - 1; k++) {

for (var i = 0; i < arr.length - 1 - k; i++) {

console.log(arr[i], arr[i + 1])

if (arr[i] > arr[i + 1]) {

var temp = arr[i]

arr[i] = arr[i + 1]

arr[i + 1] = temp

}

1.2选择排序

选择排序是一种简单直观的排序算法，无论什么数据进去都是 O(n²) 的时间复杂度。所以用到它的时候，数据规模越小越好。唯一的好处可能就是不占用额外的内存空间。

1.2.1基本思想

首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。选择排序的思想其实和冒泡排序有点类似，都是在一次排序后把最小的元素放到最前面，或者将最大值放在最后面。但是过程不同，冒泡排序是通过相邻的比较和交换。而选择排序是通过对整体的选择，每一趟从前往后查找出无序区最小值，将最小值交换至无序区最前面的位置。

1.2.2 算法步骤

首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置。

再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。

重复第二步，直到所有元素均排序完毕

3遍历数组的方法

数组的遍历方法 forEach; map; filter; find; findIndex; every; some; reduce;

     *  1. forEach
     *      * 语法: 数组.forEach(function(item, index, origin){})
     *      * 参数: 
     *              1. 数组实际每一项的值
     *              2. 数组每一项对应的下标
     *              3. 原数组
     *      * 作用: 遍历数组
     *      * 返回值:   返回值是 undefined  哪怕你手写了 return 也是 undefined
     * 
     *  2. map
     *      * 语法: 数组.map(function (item, index, origin) {})
     *      * 参数: 
     *              1. 数组每一项实际的值
     *              2. 数组每一项实际的值对应的下标
     *              3. 原数组
     *      * 作用: 映射数组
     *      * 返回值: 返回一个和原数组长度一样的数组, 返回的数组的每一个值, 取决参数的return怎么写
     * 
     *  3. filter; 
     *      * 语法: 数组.filter(function (item, index, origin) {})
     *      * 参数: 
     *              1. 数组每一项实际的值
     *              2. 数组每一项实际的值对应的下标
     *              3. 原数组
     *      * 作用: 过滤数组
     *      * 返回值: 过滤数组后的新数组, 过滤条件取决于 参数的 return 怎么写
     *  4. find; 
     *      * 语法: 数组.find(function (item, index, origin) {})
     *      * 参数: 
     *              1. 数组每一项实际的值
     *              2. 数组每一项实际的值对应的下标
     *              3. 原数组
     *      * 作用: 查找数据
     *      * 返回值: 在数组内找到的第一个数据(不是数组)
     *  5. findIndex;
     *      * 语法: 数组.findIndex(function (item, index, origin) {})
     *      * 参数:
     *              1. 数组每一项实际的值
     *              2. 数组每一项实际的值对应的下标
     *              3. 原数组
     *      * 作用: 查找数据 第一次出现的 下标
     *      * 返回值: 在数组内找到的第一个数据出现的下标
     * 
     *  6. every; 
     *      * 语法: 数组.every(function(item, index, origin){})
     *      * 参数:
     *              1. 数组第一项实际的值
     *              2. 数组第一项实际的值对应的下标
     *              3. 原数组
     *      * 作用: 判断数组内数据是否全都满足条件
     *      * 返回值: 一个布尔值
     *          true ---> 数组内数据全都符合条件
     *          false ---> 数组内起码有一个数据 不符合条件
     *  
     *  7. some;
     *      * 语法: 数组.some(function (item, index, origin) {})
     *      * 参数:
     *              1. 数组每一项实际的值
     *              2. 数组每一项实际的值对应的下标
     *              3. 原数组
     *      * 作用: 判断数组内数据是否  有一项 满足条件的
     *      * 返回值: 一个布尔值
     *          true: 表示数组内至少有一项满足条件
     *          false: 数组内数据全都不满足条件
     * 
     *  8. reduce;
     *      * 语法: 数组.reduce(function (prve, item, index, origin) {}, init)
     *      * reduce方法的参数: 
     *              1. 如果传递第二个参数 init, 执行次数和数组长度相同
     *              2. 如果不传递第二个参数 init, 默认第一值为数组第一项的值, 并且执行次数在数组长度上 减1
     *      * 参数1的函数中4个形参的含义:
     *              1. 表示初始值或者数组第一项的值(具体是什么取决于是否传递 init)
     *              2. 数组每一项实际的值
     *              3. 数组每一项实际的值对应的下标
     *              4. 原数组
     *      * 作用: 累加(叠加)
     *      * 返回值: 循环运行结束后得到的值
     
     例如：
      var arr = [1, 2, 3, 4, 5]
    // 1. forEach
    // var num = arr.forEach(function(item, index, origin) {
    //     // console.log(item, index, origin)
    //     return item
    // })
    // console.log(num)
    // arr.forEach(function(item) {
    //     console.log(item)
    // })

    // 2. map
    // var newArr = arr.map(function (item, index, origin) {
    //     // console.log(item, index, origin)
    //     return item * 2
    // })
    // console.log('newArr ---> ', newArr)

    // 3. filter
    // arr.filter(function (item, index, origin) {
    //     console.log(item, index, origin)
    // })
    // var newArr = arr.filter(function (item, index, origin) {
    //     return item > 3
    // })
    // console.log(newArr)

    // 4. find
    // arr.find(function (item, index, origin) {
    //     console.log(item, index, origin)
    // })
    // var num = arr.find(function (item, index, origin) {
    //     return item > 3
    // })
    // console.log(num)

    // 5. findIndex
    // arr.findIndex(function (item, index, origin) {
    //     console.log(item, index, origin)
    // })
    // var num = arr.findIndex(function (item, index, origin) {
    //     return item > 3
    // })
    // console.log(num)

    // 6. every
    // arr.every(function (item, index, origin) {
    //     console.log(item, index, origin)
    // })
    // var num = arr.every(function (item, index, origin) {
    //     console.log(item, index, origin)
    //     return item > 0
    // })
    // console.log(num)
    
    // 7. some
    // arr.some(function (item, index, origin) {
    //     console.log(item, index, origin)
    // })
    // var num = arr.some(function (item, index, origin) {
    //     return item > 300
    // })
    // console.log(num)

    // 8. reduce
    // arr.reduce(function (prve, item, index, origin) {
    //     console.log(prve, item, index, origin)
    // })
    // var num = arr.reduce(function (prve, item, index, origin) {
    //     console.log(prve)
    //     return prve + item
    // }, 'init--->')
    var num = arr.reduce(function (prve, item, index, origin) {
        return prve * item
    }, 1)
    console.log(num)

JavaScript字符串

1 字符串

什么是字符串：引号包裹的内容就是字符串单引号; 双引号; 反引号

反引号的字符串也叫做模板字符串(ES6新)

以前的创建字符串方式都是通过字面量

包装类型：字符串在正常查询使用的时候, 就是引号包裹起来的内容但是如果想要使用字符串上的方法, JS 内部会先将字符串包装为一个字符串对象, 这个对象上有一些方法, 使用完毕后, 将字符串对象恢复为普通对象

字面量

var str1 = "zzz"

var str2 = 'asd'

console.log(str1)

构造函数

var str4 = new String()

console.log(str4)

var str5 = new String('qwe')

2字符串的length与下标

字符串也是有length与下标的

length 长度

索引(下标): 获取到字符串中指定位置的值但是! 是只读

var str = 'abcdef'

console.log(str.length)

console.log(str[0])

3字符串的方法

charAt

语法: 字符串.charAt(索引)

作用: 查询指定下标的值

返回值: 查询到的值, 没有查询到就是一个空字符串

charCodeAt

语法: 字符串.charCodeAt(索引)

作用: 查询指定下标的值对应的十进制码

返回值: 查询到的值对应的十进制码, 没有查询到就是 NaN

toLowerCase

语法: 字符串.toLowerCase()

作用: 将字符串转换为小写

返回值: 转换后的字符

toUpperCase

语法: 字符串.toUpperCase()

作用: 将字符串转换为大写

返回值: 转换后的字符

5.ubstr MDN 说明这个方法将来的某一天可能会删除, MDN 推荐使用 substring 语法: 字符串.substr(开始索引, 多少个) 作用: 截取指定字符串返回值: 截取到的字符串

substring

语法: 字符串.substring(开始下标, 结束下标) 参数包前不包后

结束下标不传, 相当于写了 length

作用: 截取指定字符串

返回值: 截取到的字符串e

slice

语法: 字符串.slice(开始下标, 结束下标) 参数包前不包后

结束下标不传, 相当于写了 length

开始下标不传, 相当于写了 0

作用: 截取指定字符串

返回值: 截取到的字符串

7.concat

语法: 字符串.concat(数据1, 数据2, 数据3)

作用: 将字符串和参数传递的数据拼接

返回值: 拼接后的字符串

8.indexOf

语法: 字符串.indexOf(数据, 开始下标)

作用: 寻找数据在字符串中的位置

返回值: 找到的时候返回下标, 找不到返回 -1

9.lastIndexOf

语法: 字符串.lastIndexOf(数据, 开始下标)

作用: 寻找数据在字符串中出现的位置(倒叙查找)

返回值: 找到返回下标, 找不到返回 -1

10.split

语法: 字符串.split('符号')

参数如果传递的是空字符串, 会将字符串全部分隔开

作用: 在字符串中找到分隔符, 将其分割, 并放置到数组中

返回值: 数组形式的

trim

语法: 字符串.trim()

作用: 去掉字符串两侧的空格

返回值: 将去掉空格的字符串返回

12.trimStart ---> trimLeft()

语法: 字符串.trimStart()

作用: 去掉字符串左侧(开始位置)的空格

返回值: 将去掉空格的字符串返回

trimEnd ---> trimRight()

语法: 字符串.trimEnd()

作用: 去掉字符串右侧(结束位置)的空格

返回值: 将去掉空格的字符串返回

includes

语法: 字符串.includes(字符串片段)

作用: 判断当前字符串中是否拥有指定字符串片段

返回值: true ---> 拥有; false ---> 没有

startsWith

语法: 字符串.startsWith('字符串片段')

作用: 查询字符串开头是不是指定的字符串片段

返回值: true: 是开头; false: 不是开头

endsWith

语法: 字符串.endsWith('字符串片段')

作用: 查询字符串结尾是不是指定的字符串片段

返回值: true: 是结尾; false: 不是结尾

replace

语法: 字符串.replace('要被替换的字符', '替换的字符')

作用: 找到当前字符串中第一个参数对应的值, 然后将其替换为第二个参数传入的数据

返回值: 替换完成的字符串

2.反转字符串

1.转化为数组字符串.split(分隔符)

2.反转数组

3.将数组的每一项合并为一个字符串

var str = 'aabbccdd' var str1 = str.split('')----》 console.log(str1)

var str2 = str1.reverse()----》 console.log(str2)

var str3 = str2.join('')----》 console.log(str3)

通过代码处理后变成 ---> ddccbbaa

JavaScript数字的方法

1.常用方法

random

语法: Math.random()

作用: 得到一个0~1之间的随机数, 包含0,不包含1

round

语法: Math.round()

作用: 将数据四舍五入取整

ceil

语法: Math.ceil()

作用: 将数据向上取整

floor

语法: Matn.floor()

作用: 将数据向下取整

语法: Math.abs()

作用: 取数据的绝对值

sqrt

语法: Math.sqrt()

作用: 求平方根

语法: Math.pow(基数, 幂)

作用: 求一个基数的 X 次幂

语法: Math.max(数据1, 数据2, 数据3, ...)

作用: 求参数中的最大值

语法: Math.min(数据1, 数据2, 数据3, ...)

作用: 求参数中的最小值

语法: Math.PI

作用: 求圆周率

2 计时器

1 计时器 (setInterval)

语法: setInterval(function(){每次执行定时器时要做的事}, 时间) 时间的单位是毫秒

返回值: (时间ID) ---> 值取决于你当前的定时器是这个页面的第几个定时器, 返回值可以用于关闭定时器

关闭定时器: clearInterval(时间ID)

2 倒计时器 (setTimeout)

语法 setTimeout(function () {倒计时时间满足时, 要执行的一段代码}, 时间) 时间的单位是毫秒

返回值: (时间ID) ---> 值取决于你当前的定时器是这个页面的第几个定时器, 返回值可以用于关闭定时器

关闭倒计时器: clearTimeout(时间ID)

关闭定时器: clearInterval 和 clearTimeout

正常来说两个方法可以混用, 不会出错,

但是根据语义来说 clearTimeout 用于关闭 setTimeout; clearInterval 用于关闭 setInterval

JavaScript的基本知识

JavaScript简介

1.什么是JavaScript?

2.区分JSP和JS

HTML中嵌⼊JavaScript

1.HTML嵌⼊JavaScript的第一种⽅式（行内）

1.1 行内执行js第一种方式

1.2 行内执行js第二种方式

2.HTML嵌⼊JavaScript的第⼆种⽅式（推荐）

JavaScript标识符和变量

1.标识符的命名规则

2.变量：

2.局部变量和全局变量

JS的数据类型

1.JS数据类型有:原始类型，应⽤类型。

2 number数据类型

3 .boolean数据类型

4.String数据类型

5.Object数据类型

JavaScript运算

1.基本运算符

2.Boolean运算(!(求反运算)、&&(与运算)、||(或运算))

3. 赋值运算符

4.关系运算(<、>、<=、>=、==、!= !==)

5.自增自减运算符

JavaScript语句

1.分支语句

循环语句

1.for循环

2.while循环

3.使用break和continue退出循环

JavaScript函数

1.函数的定义与调用

2.函数的参数

3.使用Function类的length属性

JavaScript对象和数组

1.JavaScript对象简介

2.对象的作用域

1 JavaScript对象只有公用作用域

2 JavaScript对象没有静态作用域

3 对象的操作

1 对象的操作 (增删改查)

3遍历对象

数组

1 创建数组

2 数组排序法

3遍历数组的方法

JavaScript字符串

1 字符串

2字符串的length与下标

3字符串的方法

2.反转字符串

JavaScript数字的方法

1.常用方法

2 计时器