JavaScript基础知识整理篇

JS简介

JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JavaScript驱动的。

简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言、 非编译型语言、 解释性语言、 弱类型语言。

解释性语言：读取一行就运行一行

JavaScript的语法和Java语言类似，每个语句以;结束，语句块用{…}。但是，JavaScript并不强制要求在每个语句的结尾加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。

JS的用途

用户交互 表单的验证
后台服务器 node.js JavaEE python

JS的组成

ES：JS的核心 ECMAScript ECMA(定义了一套规范) 网景 微软JScript IE
DOM：Document Object Model 文档对象模型
BOM：Browser Object Model 浏览器对象模型

JS的书写位置(基于谷歌浏览器)

• 行内式：写在标签的属性中(不推荐使用)

<button onclick="alert('点击了')">按钮</button>

• 内嵌式：写在HTML文件中;需要写在script标签中 script标签可以有多个；通常放在body中；

<script>
    alert("hello");
    alert("你好");
    alert("hi");
</script>

• 外链式：外部定义一个JS文件，通过script标签引入，src属性中写JS文件路径；
  

<script src="../js/first.js"></script>

注意：外链式的script标签中，不能再写JS代码了

JS的各种弹窗

• alert(内容)

alert('js');

• confirm(内容) 确认框

confirm("确定删除？");

• prompt(内容) 输入确定框

prompt("请输入年龄：");

• console.log()在控制台打印 常用

console.log("hello,js");

• console.dir() 以对象的形式打印出来

console.dir("");

• document.write('hello world ') 向浏览器中写内容;能够识别标签

document.write("<h2>hello,js</h2>");

JS变量和常量

• js中变量或者常量定义的时候是无需指定数据类型的 弱类型语言
  变量：表示变化的
  var 或 let （ES6支持） 用来定义一个变量；建议使用let
• 常量 是不可变的；
  使用 const 定义
  1，常量的定义必须要给值
  2，赋值之后不能改动

<script>
    var a = 10;
    let b = 20;
    a="hello,js";
    console.log(a);

    const c = 10;
</script>

JS的数据类型

JS也分为基本数据类型和引用数据类型

基本数据类型(值类型)：

• string 字符串类型 (对单引号和双引号都支持)

• number 数值类型(包含整型和浮点型)

• boolean 布尔类型 true false

• null 空类型 null

• undefined 未定义的 undefined 尚未赋值的

  基本数据类型使用 typeof 查看

引用数据类型

• Object

• Function

• Array

  引用数据类型使用 instanceof 查看
  注意点：在控制台中：蓝色字体是数字；黑色字体是字符串(谷歌浏览器)

<script>
    let a = "abc";
    console.log(typeof a);//string
    console.log(a);//abc
    let b = 9.8;
    console.log(typeof b);//number
    console.log(b);//9.8
    let c = true;
    console.log(typeof c);//boolean
    let d = null;
    console.log(typeof d);//object
    let e;
    console.log(e);//undefined

    console.log(f);//发生错误后，不在往后执行
    console.log(a);
</script>

结果：

JS数据类型之间的转换

1、数值转字符串

10 + ";(常用)
toString();

let a = 10;
    console.log(a);
    console.log(a + "");
    console.log(a.toString());

2、字符串转数值
parseInt(b),parseFloat(b)
b-0
+b

let b = "10.2";
    console.log(b);
    console.log(parseInt(b));
    console.log(parseFloat(b));
    console.log(b - 0);
    console.log(+b);

3、其他数据类型转布尔类型

0，空字符串，null，undefined，NaN 转boolean时为 false；其他都会转为true

if(undefined){
        console.log("条件为true")
    }else {
        console.log("条件为false")
    }

NaN

NaN : Not a Number 不是一个数字

js 函数
isNaN()表示是 不是一个数字吗

• true 表示不是数字
• false 表示是一个数字

<script>
    let a = "aaa";
    console.log(isNaN(a));//true

    let b = "123";
    console.log(isNaN(b));//false

    let c = 123;
    console.log(isNaN(c));//false
</script>

JS运算符

• 赋值运算符
  =
• 算术运算符
  + - * / % += -= /= *= %= ++ --
• 条件运算符 得到布尔类型的结果
  > < >= <= == != 不同的： === !==
• 逻辑运算符
  & && | || ！ 建议使用 && ||
• 三目运算符
  条件？表达式1：表达式2

== 只比较值 ===即比较类型又比较值
!=只比较值 !==值和类型都要看

<script>
    let a = 10;
    console.log(a / 2);
    console.log(a % 3);
    a += 10;
    console.log(a);
    // == 只比较值  ===即比较类型又比较值  !=只看值 !==值和类型都要看

    if ('20' === 20) {
        console.log("条件为真")
    } else {
        console.log("条件为假")
    }
    if (a > 10 && 20 > 10) {
        console.log("条件为真")
    }

    let c = a > 10 ? "真" : "假";
    console.log(c);
</script>

结果：

JS流程控制

1、分支结构

if(){
}else if(){
}else{}

switch(){  比较的时候使用的是===
   case值:
        逻辑语句；
        break;
   case值:
        逻辑语句；
        break;
   default:
   		逻辑语句；

let a =10;
    if(a>20){
        console.log(true);
    }else if(a>10){
        console.log(false);
    }else {
        console.log('a')
    }

    let str = "10";
    switch (str){
        case 10:
            console.log("number==");
            break;
        case "10":
            console.log("string ===");
            break;
        default:
            console.log();
    }

结果：

2、循环结构

for
while
do.. while 至少执行一次

for (let i = 0; i < 10; i++) {
        console.log(i)
    }

    let b = 0;
    while (b < 10) {
        console.log(b);
        b++;
    }

    let count = 0;
    do {
        console.log(count);
        count++;
    } while (count < 10);

JS数组

JS中数组和Java中的数组是不同的：
JS中数组的长度可以改变，可以存放不同的数据类型，这点和Java中的集合很像。

JS数组的几种定义方式：

• 直接赋值 let arr = []; 空数组 最常用
• new Array(长度|数组元素);
• 相关函数 Array.of(...items);
• string转为数组，Array.from(str);

<script>
    let ar = [];//空数组
    //直接赋值
    let arr = [10, 20, "abc", true, null, undefined];
    arr[10] = 20;
    console.log(arr);
    //new Array 数组长度为10
    let arr2 = new Array(10);
    //new Array(数组元素)
    let arr3 = new Array(10, 20, 30);
    console.log(arr2);
    console.log(arr3);

    //Array.of(数组元素)
    let numbers = Array.of(10);
    console.log(numbers);

    //string 转数组
    let str = "hello";
    let strings = Array.from(str);
    console.log(strings);
</script>

结果：

JS数组的存和取值

数组的长度 有个属性length 数组长度
数组索引值从0开始，0到length-1
取值：
数组名[索引]
赋值
数组名[索引] = 值
分为2种情况 如果索引存在就是替换 不存在就是新增

<script>
//数组的存和取值
    let arr = [10,20,30,40,50];
    console.log(arr.length);
    console.log(arr[2]);
    arr[10] = 'abc';
    console.log(arr);
    console.log(arr[8]);
</script>

结果：

JS数组的遍历

有三种方式：

1、普通for循环
2、增强for循环
3、forEach 箭头函数

<script>
    //数组的遍历方式
    let arr = [10, 20, 30, 40, 50];
    //普通for
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }

    //增强for of 输出值
    for (let a of arr) {
        console.log(a);
    }

    //增强for in 输出索引值
    for (let i in arr) {
        console.log(i);
    }

    //forEach
    arr.forEach((a, index) => {
        console.log(index + ":" + a);
    })
</script>

结果：

JS中数组的方法

• push()表示追加,可以追加多个元素,会影响源数组
• pop()删除数组最后一个元素,返回的是删除的元素；会影响源数组
• unshift()从数组头部进行插入，可以添加多个；会影响源数组
• shift()删除的是数组的第一个元素； 会影响源数组
• slice(startIndex,endIndex) 数组的截取，返回新的数组 [)，不会改动源数组
• concat(newArray)数组的拼接 会返回拼接后的新的数组 不会改动源数组
• reverse() 翻转数组，会影响源数组
• arr.join(’-’) 把数组元素按照指定的连接符拼接为字符串；默认使用逗号连接
• splice(index,number,newItem…) 根据index找到位置然后删除指定number个数组元素，然后把newItem插入进来
• indexOf() 数组元素第一次出现的索引号
• lastIndexOf()数组元素最后一次出现的索引号
• findIndex() 找到符合要求的第一次索引号

代码演示：
1、push()表示追加,可以追加多个元素,会影响源数组

<script>
    let arr = [10, 20, 30, 40, 50]; 
    arr.push(60,70,'abc');
    console.log(arr);
</script>

2、pop()删除数组最后一个元素,返回的是删除的元素；会影响源数组

<script>
    let arr = [10, 20, 30, 40, 50]; 
	arr.pop();
    console.log(arr);
</script>

3、shift()删除的是数组的第一个元素； 会影响源数组

<script>
    let arr = [10, 20, 30, 40, 50]; 
	arr.shift();
    console.log(arr);
</script>

4、unshift()从数组头部进行插入，可以添加多个；会影响源数组

<script>
    let arr = [10, 20, 30, 40, 50]; 
	arr.unshift(1,2,3);
    console.log(arr)
</script>

5、slice(startIndex,endIndex) 数组的截取，返回新的数组 [)，不会改动源数组

<script>
    let arr = [10, 20, 30, 40, 50]; 
	var numbers = arr.slice(0,3);
    console.log(numbers);
</script>

6、concat(newArray)数组的拼接 会返回拼接后的新的数组 不会改动源数组

<script>
    let arr = [10, 20, 30, 40, 50]; 
	var numbers = arr.concat(1,2,3);
    console.log(numbers);
</script>

7、reverse() 翻转数组，会影响源数组

<script>
    let arr = [10, 20, 30, 40, 50]; 
	console.log(arr.reverse());
</script>

8、arr.join(’-’) 把数组元素按照指定的连接符拼接为字符串；默认使用逗号连接

<script>
    let arr = [10, 20, 30, 40, 50]; 
	var s = arr.join('-');
    console.log(s);
</script>

9、splice(index,number,newItem…) 根据index找到位置然后删除指定number个数组元素，然后把newItem插入进来

<script>
    let arr = [10, 20, 30, 40, 50]; 
	arr.splice(1,2,6);
    console.log(arr);
</script>

9.1、splice(index,number,newItem…) 相当于替换

<script>
    let arr = [10, 20, 30, 40, 50]; 
	arr.splice(1,1,6);
    console.log(arr);
</script>

9.2、splice(index,number,newItem…) 指定位置进行插入

<script>
    let arr = [10, 20, 30, 40, 50]; 
	arr.splice(1,0,6);
    console.log(arr);
</script>

10、indexOf() 数组元素第一次出现的索引号、lastIndexOf()数组元素最后一次出现的索引号

let arr = [10, 20, 30, 40, 40, 40, 50];
    console.log(arr.indexOf(40));//3
    console.log(arr.lastIndexOf(40));//5

11、findIndex() 找到符合要求的第一个索引号

<script>
    let arr = [10, 20, 30, 40, 50]; 
	console.log(arr.findIndex(a => {
        if (a > 20) {
            return true;
        }
    }));
</script>

JS函数定义

js的函数就是Java的方法,定义函数时形参只写名字 没有数据类型；有return就是有返回值 没有return就是没有返回值

js的函数定义分为2种
    普通命名函数
        function 函数名(){
            逻辑代码；
        }
    变量的方式
        let me = function(){
            逻辑代码；
        }

函数调用的方式都是一样的；函数名(实参);

匿名函数，立即执行的函数

代码演示：

<script>
    function add() {
        console.log("function invoked")
        console.log("function invoked")
    }
    add();

    let add2 = function () {
        console.log("add2 invoked")
    }
    add2();

    function add3(a ,b) {
        let c = a+b;
        return c;
    }

    let d = add3(10,20);
    console.log(d);

    (function f() {
        console.log("立即执行")
    })();
</script>

结果：

关于var定义变量可能存在的问题

1，JS预解析问题：js会把变量(var 修饰的 )的声明部分 和 函数的命名部分，提到当前作用域之前正常逻辑来写 变量先声明在赋值再使用 function先声明在使用

2，var修饰的变量 没有局部作用域的限制 ;在函数中使用var修饰时可以限制作用域

ES6推荐使用let定义变量

JS对象

JS对象中包括：
属性
方法
对象是引用数据类型

属性的取值 stu.name stu[‘age’]
对属性进行赋值,当属性名存在就是替换属性值，如果不存在就是新增属性
stu.age = 88;
stu[‘age’] = 16;
删除对象的属性 delete stu.name;

对象的成员与成员之间用逗号隔开

<script>
    let obj = {};//空对象
    let obj1 = new Object(); //obj 和 obj1等价

    let stu = {
        name: 'tom',
        age: 19,
        study: function () {
            console.log("学生在学习");
        },
        //方法的简写
        study1(){
            console.log("学生在学习。。。");
        }
    };
    //取属性值的两种写法
    console.log(stu.name);
    console.log(stu['name']);

    console.log(stu);
    stu.study1();
    console.log(stu instanceof Object);//true
    stu.name='jack';
    stu.gender='f';
    //删除对象属性
    delete stu.gender;
    console.log(stu);
</script>

效果：

JS对象的遍历

1,for循环对象成员的遍历

2，Object.keys(对象) 返回keys的数组

对象中存在对象属性

<script>
    let stu = {
        name:'tom',
        age:18,
        study(){
            console.log("学生的学习");
        },
        computer:{
            cpu:'AMD',
            display:'红米1A'
        }
    };

    // 1， for循环对象成员的遍历 取处对象的成员
    for(let key in stu){
        console.log(key);
    }

    // 2,Object.keys(对象) 返回keys的数组
   let strings =  Object.keys(stu);
    console.log(strings);

    //对象中有对象的取出
    console.log(stu.computer.cpu);
    console.log(stu['computer']['cpu']);
</script>

效果：

JS的内置对象

内置对象 表示js当中本身就存在的对象 不需要你new 不需要你创建

Math
	Math.PI
	Math.pow()
	Math.ceil() 向上取整（最小）
	Math.floor() 向下取最大
	Math.round()
	Math.random() 0-1之间的随机值

String 对象和Java方法大都一样
	length属性 得到字符串的长度
	charAt()
	trim() 去除前后空格
	indexOf() 首次出现的索引值
	lastIndexOf() 最后出现的索引值
	split() 按指定的字符进行切分
	subString(start,end) 截取字串，包含start索引对应的字符但是不包含end对应的字符
	subStr(start,length) 截取字串，从start索引开始截取length长度的字串
	startWith() 前缀的判断
	endWith() 后缀的判断

代码演示：

<script>
    console.log(Math.abs(-10));//10
    console.log(Math.PI);//3.141592653589793
    console.log(Math.pow(10,3));//1000
    console.log(Math.ceil(3.6));//4
    console.log(Math.floor(3.6));//3
    console.log(Math.round(3.2));//3


    for (let i = 0; i <10 ; i++) {
        console.log(Math.random());
    }

    let str = 'javasm';
    console.log(str.length);//6
    console.log(str.charAt(2));//v
    console.log(str.trim());//去除前后空格
    console.log(str.indexOf('a'));//1
    console.log(str.lastIndexOf('a'));//3
    var strings = str.split('a');
    console.log(strings);//j , v, sm
    console.log(str.substring(0,4));//java
    console.log(str.substr(1,3));//ava
    console.log(str.startsWith('ja'));//true
    console.log(str.endsWith('sm'));//true
    console.log(str.toUpperCase());//JAVASM
    console.log(str.toLowerCase());//javasm
</script>

JS中的日期

日期对象 Date
    常用方法
        getFullYear()
        getMonth()
        getDate()
        getHours()
        getMinutes()
        getDay()
   格式化
        toLocaleDateString()
        toISOString()
        toDateString()

代码演示

<script>

    let date = new Date();
    console.log(date);//Tue Jan 26 2021 19:50:36 GMT+0800 (中国标准时间)
    console.log(date.getFullYear());//2021
    console.log(date.getMonth() + 1);//1
    console.log(date.getDate());//26
    console.log(date.getHours());//19
    console.log(date.getMinutes());//50
    console.log(date.getSeconds());//36
    console.log(date.getDay());//2


    console.log(date.toLocaleDateString());//2021/1/26
    console.log(date.toLocaleTimeString());//下午7:50:36
    console.log(date.toLocaleString());//2021/1/26 下午7:50:36
    console.log(date.toISOString());//2021-01-26T11:50:36.226Z
    console.log(date.toDateString());//Tue Jan 26 2021

</script>

getDate()返回的是一个月的某一天(几号),getDay()是返回一周的某一天(周几)

JS作用域问题

• 全局变量
  1、不在任何局部作用域中的声明的变量
  2、一个变量没有任何修饰符，也是一个全局变量
• 局部变量
  在局部作用域中声明

<script>
    //全局变量
    let a = 10;

    if(true){
        //局部变量
        let c = 100;
    }

    function add() {
        //局部变量
        let b = 20;
        console.log(a);
    }
    add();
    console.log(c);
    console.log(b);
</script>