Bilibili_kuangstudy_JavaScript-CFANZ编程社区

1、什么是JavaScript？

1.1 概述

JavaScript是一门世界上最流行的脚本语言

1.2 历史

ECMAScript可以理解为JavaScript的一个标准

2、快速入门

2.1 引入JavaScript

1、内部标签

2、外部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--script标签内，写JavaScript代码;;此段也可放在body标签内-->
    <!--<script>-->
    <!--    alert("hello world")-->
    <!--</script>-->

    <!--外部引入-->
    <!--注意：script标签必须成对出现-->
    <script src="JS/test.js"></script>

    <!--不用显示定义type，也默认就是JavaScript-->
    <script type="text/javascript">

    </script>
    
</head>
<body>

</body>
</html>

2.2 基本语法入门

 <!--JavaScript严格区分大小写-->
    <script>
        // 1、定义变量 ---变量类型 变量名  =  变量值；(java中，。值有可能是对象，)
        var score = 71;// 只有var这个变量名
        //alert(num);
        // 2、 条件控制
        if(score>60 && score<70){
            alert("60~70");
        }else if(score>70 && score<80){
            alert("70~80")
        }else{
            alert("other")
        }

        //console.log(score) 在浏览器的控制台打印变量！ SOUT--system.out.println
    </script>

浏览器必备调试须知：

在这里插入图片描述

2.3 数据类型

数值、文本、图形、音频、视频.....

变量

var name  //不可以数字开头

number

JS不区分整数和小数 number

NaN // not a number
Infinity  //表示无穷大

字符串、布尔值、逻辑运算、

比较运算符（重要！）

=
==  等于 （类型不一样，值一样，也会判断true）
=== 绝对等于（类型一样，值也一样，结果为true）
坚持不要使用==比较

须知:

NaN===NaN,这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题

console.log( (1/3) === (1-2/3) )

Math.abs(1/3- (1-2/3) )

null 和 undefined

null 空

undefined 未定义

数组

Java的数值必须是相同类型的对象，JS中不需要这样

 //保证代码的可读性，尽量使用[]   //数组用中括号，对象用大括号
var arr = [1,2,3,4,5,"hello",null,true];

        new Array(1,2,3,4,5,"hello");

取数组下标：如果越界了，就会undefined

对象

//Person person = new Person(1,2,3,4,5);
    var person = {
        name:"Donger",
        age:18,
        tags:['handsome','honest','very nice','...']
    }

2.4 严格检查格式

  <!--
    'use strict'严格检查模式，预防JS的随意性导致产生的一些问题
    必须写在第一行
    -->
    <script>
        'use strict';
        //全局变量
        var i = 1;//在ES6中用let定义局部变量
    </script>

3、数据类型

3.1 字符串

1、正常字符串我们使用单引号，或者双引号包裹

2、注意转义字符

\'
\n
\t
\u4e2d
\x41  Ascll字符

3、多行字符串编写

 var msg = `
            hello
            world
            你好
        `

4、模板字符串

let name = "donger";
let age = 18;

let msg = `${name}你好棒`
//输出结果
donger你好棒

5、字符串长度

str.length

6、字符串的可变性—不可变

在这里插入图片描述

7、大小写转换

//注意，这里是方法不是属性
>console.log(student.toLocaleUpperCase())
<STUDENT

>console.log(student.toLocaleLowerCase())
<student

8、获取元素下标

>console.log(student.indexOf('u'))
<2

9、 substrng

[)
student.substring(0) //从第一个字符串截取到最后一个字符串
student.substring(1,3)  //[1,3]---->tu

3.2 数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5]

1、长度

arr.length

注意：加入给arr.length赋值，数组大小就会发生变化

在这里插入图片描述

2、indexOf()，通过元素获得下标索引

arr = [1,2,3,4,5,6,"1","2"]
>arr.indexOf(1)
<0
>arr.indexOf("1")
<6

字符串的 1 和数字 1 是不同的

3、slice（）截取Array的一部分，返回一个新数组，类似于String中的substring

>arr.slice(3)
<(5) [4, 5, 6, '1', '2']

>arr.slice(1,5)
<(4) [2, 3, 4, 5]

4、push()—压入到尾部， pop()—弹出尾部的一个元素

5、unshift()—压入到头部, shifit() 弹出头部的一个元素

在这里插入图片描述

6、排序sort()

7、元素反转reverse()

8、concat()

["C","B","A"]
>arr.concat([1,2,3])
<["C","B","A",1,2,3]

注意:concat()并没有修改数组，只是会返回一个新的数组

9、连接符join

打印拼接数组，使用特定的字符串连接

["C","B","A"]
>arr.join('-')
<"C-B-A"

10、多维数组（了解）

数组：存储数据（如何存和取方法都可以实现）

3.3 对象

若干个键值对

var 对象名 = {
            属性名 ： 属性值，
            属性名 ： 属性值，
            属性名 ： 属性值
        }
var person = {
            name:"donger",
            age: 18,
            tel: 10010，
            score:404
        }

JS中对象，{…}表示一个对象，键值对描述属性 xxxx : xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号。

JavaScript中的所有键都是字符串，值都是任意对象

1、对象赋值

2、使用一个不存在的对象属性，不会报错！-----undefined

3、动态的删减属性，通过delete删除对象的属性

4、动态的添加，直接给新的属性添加值即可

5、判断属性是否在这个对象中！ xxx in xxx

6、判断一个属性是否是这个对象自身拥有的–hasOwnProperty()

3.4 流程控制

if判断

var age = 1;
if(age>5){ //第一个判断
    alert("haha");
}else if(age<3){ //第一个判断
    alert("wawa");
}else{  //否则
    alert("balabala");
}

循环（for、while、数组、ForEach）

3.5 Map 和 Set

Map:

var map = new Map([['tom',100],['jack',100],['smith',80]]);
    var name = map.get('smith'); //通过key获value
    map.set('admin',70);
    map.delete('jack');

Set: 无序不重复的集合

var set = new Set([5,6,6,6]); //Set可以去重
  set.add(2); //添加
  set.delete(5); //删除
  console.log(set.has(6));  //是否包含某个元素

3.6 iterator

遍历数组

//通过for of 实现。。。//for in 打印的是下标
var arr = [3,4,5]
for (var x of arr){
  console.log(x)
}

遍历map

var map = new Map([['tom',100],['jack',100],['smith',80]]);
    for(let x of map){
        console.log(x)
    }

遍历set

var set = new Set([5,6,7]);
    for (let x of set){
        console.log(x)
    }

4、函数

4.1 定义函数

绝对值函数

function abs(x){
  if (x>0){
    return x;
  }else{
    return -x;
  }
}

一旦执行到return代表函数结束，返回结果；如果没有执行return，函数执行完也会返回结果，结果就是undefined

 var abs = function(x)
  if (x>0){
    return x;
  }else{
    return -x;
  }
}

function(x){…}这是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数！方式一方式二等价。

参数问题：JavaScript可以传任意个参数，也可以不传参数

参数进来是否存在的问题：

假设参数不存在，如何规避？

var abs = function (x) {
  //手动抛出异常来判断
    if(typeof x !== 'number'){
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

var abs = function (x){
    console.log("x=>"+x);

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

    if(x>0){
        return x;
    }else{
        return -x;
    }
}

问题：arguments包含所有参数，我们有时想使用多余的参数来进行附加操作，需要排除已有的参数

以前

function aaa(a,b){
        console.log("a=>"+a);
        console.log("b=>"+b);
        if(arguments.length>2){
            for (let i = 0; i < arguments.length; i++) {
                //。。。。。。。
            }
        }
    }

ES6引入新特性，获取除了已经定义的参数之外的所有参数~ // . . .

function aaa(a,b,...rest){
      console.log("a=>"+a);
      console.log("b=>"+b);
      console.log(rest);
  }
  
//rest只能写在后面，必须用...标识

在这里插入图片描述

4.2 变量的作用域

在JavaScript中，var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用，（非要想用的话，之后可以研究闭包）

function qj() {
      var x = 1;
      x = x + 1;
  }
    x = x + 2; //Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
内部函数可以访问外部函数，反之则不行

function qj() {
    var x = 1;

   //内部函数可以访问外部函数，反之则不行
    function qj2() {
        var y = x + 1;  //2
    }

    var z = y+1;  //Uncaught ReferenceError: z is not defined
}

假设，内部函数变量和外部函数的变量，重名

function qj(){
  var x = 1;
   
  function qj2(){
    var x = 'A';
    console.log('inner'+x);//outer1
  }
  console.log('outer'+x);//innerA
  qj2()
  
}

qj()

假设在JavaScript中函数查找变量从自身函数开始，由“内”向“外” 查找。假设外部存在这个同名的函数变量，则在内部函数会屏蔽外部函数的变量。

function qj(){
  var x = "x" + y;
  console.log(x);
  var y = 'y';
}

//结果： xundefined

说明:JS执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

function qj2(){
  var y；
  var x = "x" + y;
  console.log(x);
  y = 'y';
}

这个是在JavaScript建立之初就存在的特性。养成规范：所有变量定义都在函数的头部，不要乱发过，便于代码维护；

function qj2(){
  var x = 1；
  y = x + 1;
  z,i,a;  //undefined
}

//全局函数
x = 1;

function f(){
  console.log(x);
}
f();
console.log(x);

全局对象window

var x = 'xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下

alert这个函数本身也是一个window变量

var x = 'xxx';

window.alert(x);

var old_alert = window.alert;

//old_alert(x);

window.alert = function(){
  
};
//发现alert()失效了
window.alert(123);

//恢复
window.alert = old_alert;
window.alert(456);

JavaScript实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有任何函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突。 —如何减少冲突？

//唯一全局变量

var chenApp = {};

//定义全局变量
chenApp.name = 'donger';
chenApp.add = function(a,b){
  return a + b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名的冲突的问题。jQuery可以解决。

jQuery. 等价 $()

function aaa() {
    for (var i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1)//问题：i出了作用域还可以使用
}

ES6 let 关键字，解决局部作用域冲突问题

建议使用 let 去定义局部作用域的变量

function aaa() {
    for (var i = 0; i < 100; i++) {
        console.log(i)
    }
    console.log(i+1)//Uncaught ReferenceError : i is not defined
}

4.3 方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var chen = {
    name　: 'donger',
    birth : 1999,
    //方法
    age : function (){
        //今年 - 出生年
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}

//属性
chen.name
//方法
chen.age()

this. 代表什么？拆开上面的代码看看

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}

var chen = {
    name　: 'donger',
    birth : 1999,
    age : getAge
}

//chen.age()     ok
//getAge()       NaN   window

this 是无法指向的，是默认指向调用它的那个对象；

在JS中可以控制this 的指向！

function getAge() {
        var now = new Date().getFullYear();
        return now - this.birth;
    }

    var chen = {
        name　: 'donger',
        birth : 1999,
        age : getAge
    }
    
    var EASON = {
        name　: 'Eason',
        birth : 1999,
        age : getAge
    }

    getAge.apply(chen,[]);//this,指向了chen这个对象，参数为空
    //getAge.apply(EASON,[]);

5、内部对象

在这里插入图片描述

5.1 Date

基本使用

在这里插入图片描述

转换

在这里插入图片描述

5.2 JSON

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pBBTCC0n-1646231188931)(658cb017f2efd87c0ad7a262057cef88.png)]

在JavaScript中一切皆为对象、任何JS支持的类型都可以用JSON来表示；

格式：

对象都用 {}
数组都用 []
所有的键值对都是用key:value

JSON字符串和 JS 对象的转化

var user = {
    name : "donger",
    age : 3,
    gender : '男'
  }
  
  //对象转化为json字符串--->{"name":"donger","age":3,"gender":"男"}
  var jsonUser = JSON.stringify(user)
  
  //json 字符串转化为对象  参数为 json 字符串
  var obj = JSON.parse('"name":"donger","age":3,"gender":"男"')

JSON 和 JS 对象的区别

var obj = {a:'hello', b:'hi'};
var json = '{"a":"hello", "b":"hi"}'

5.3 Ajax

原生的js写法 xhr 异步请求
jQuery封装好的方法 $("#name").ajax("")
axios 请求

未完待续。。。。

1、什么是JavaScript？

1.1 概述

1.2 历史

2、快速入门

2.1 引入JavaScript

1、内部标签

2、外部引入

2.2 基本语法入门

2.3 数据类型

2.4 严格检查格式

3、数据类型

3.1 字符串

1、正常字符串我们使用 单引号，或者双引号包裹

2、注意转义字符

3、多行字符串编写

4、模板字符串

5、字符串长度

6、字符串的可变性—不可变

7、大小写转换

8、获取元素下标

9、 substrng

3.2 数组

1、长度

2、indexOf()，通过元素获得下标索引

3、slice（）截取Array的一部分，返回一个新数组，类似于String中的substring

4、push()—压入到尾部， pop()—弹出尾部的一个元素

5、unshift()—压入到头部, shifit() 弹出头部的一个元素

6、排序sort()

7、元素反转reverse()

8、concat()

9、连接符join

10、多维数组（了解）

3.3 对象

3.4 流程控制

3.5 Map 和 Set

3.6 iterator

4、函数

4.1 定义函数

4.2 变量的作用域

4.3 方法

5、内部对象

5.1 Date

5.2 JSON

5.3 Ajax

1、正常字符串我们使用单引号，或者双引号包裹