0
点赞
收藏
分享

微信扫一扫

Bilibili_kuangstudy_JavaScript

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 请求

未完待续。。。。

举报

相关推荐

0 条评论