JavaScript学习笔记（上）_var i for arr.length-CSDN博客

本文链接：https://blog.csdn.net/qq_46485137/article/details/123231875

2.4 严格检查模式（'use strict';）

3.1.8 根据字符获取下标（indexOf()）

3.1.9 截取字符串（substring( , )）⭐

3.2.4 通过元素获取下标索引（indexOf()）

3.2.5 截取并返回新数组（slice()）

3.2.6 在尾部添加和删除（push()、pop()）⭐

3.2.7 在头部添加和删除（unshift()、shift() ）⭐

3.2.8 排序 sort()

3.2.9 元素反转 reverse()

3.2.10 拼接数组 concat() ⭐

一、JavaScript简介

1.1 概述

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

一个合格的后端人员，必须要精通JavaScript

1.2 发展历史

初衷：功能不需要太强，语法简单，容易学习和部署。

1995年，他们雇佣程序员十天时间就设计完成了这种语言的第一版。

ECMAScript 是 JavaScript 的一个标准，最新版本es6 ，但是大部分浏览器还只停留在支持es5代码上。

es版本调整方法：

默认是5.1 建议选择6更加严谨，然后apply

二、快速入门

2.1 引入JavaScript

2.1.1 内部标签<script>

在<script> 标签内，写js代码，注意java规范，加分号

这个标签，可以放在html文件中的任何地方，推荐放在<head>中或<body>开始的地方

    <!-- 内部引入，-->
    <script type="text/javascript">
        /*在标签内，写js代码*/
        alert('hello world!');/*弹窗*/
    </script>

注：不用显式定义type,也默认就是javascript

2.1.2 外部引入

外部引入JavaScript文件

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

注意：script标签必须成对出现，不能写成 <script/>

2.2 基本语法入门

JavaScript语法同Java语法，严格区分大小写

    <script>
        /*注：JavaScript严格区分大小写*/

        // 1. 用var关键字定义变量
        var num = 1;
        var name = "boot";

        // 2. 条件判断   可以嵌套使用
        if(num>0){
            alert("true");
        }else if(num<0) {
            alert("false");
        }else{
            alert("none");
        }
    </script>

注，用var 关键字定义变量可以不考虑类型

2.3 浏览器控制台的使用

浏览器上右键 --> 审查元素 / 检查（F12）

常用部分：

Element （元素）：复刻网站时可以用这个，查看代码

Console（控制台）：调试 js 代码

Source（源代码）：查看源代码，跑断点

Network（网络）：查看网络请求数据，抓包

Application（应用）：查看cookie

1、Console控制台的使用

① 用 alert(num) 弹框输出num 的值

② 用 console.log(num) 在浏览器控制台打印变量，相当于sout (System.out.println())

2、Source 源代码的使用

打断点的步骤：

①先在左边网页（page）里选中想要调试的代码文件， ②在需要打断点的某一行前边打上断点，出现蓝色标志即定位成功 ③再刷新页面，即可进入断点 ④ 鼠标移动到变量附近，即可显示该变量的值

⑤断点的调试：

第一个图标：resume 将断电执行过程重启

第二个图标：如果遇到一个函数，会直接执行完这个函数，进入下一步，不显示细节

第三个图标：如果遇到一个函数，进入函数内部，进行执行

第四个图标：如果用了图标三进入了函数内部，可以用这个执行完函数的剩下部分

ps：剩下的例如网络啥的，等我用多了再来补充吧💪

2.4 严格检查模式（'use strict';）

'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题，必须写在JavaScript的第一行

局部变量建议使用let 去定义，前提，IDEA 支持ES6语法

'use strict';  // 在JavaScript的第一行声明严格检查模式

let i = 1; // 局部变量

var j = 2; // 全局变量

k = 0; // 因为设置了严格检查模式，所以 k 会报错

三、数据类型

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

3.1 字符串

3.1.1 正常字符串

我们使用单引号，或者双引号，例如：

'abc' "abc"

3.1.2 注意转义字符 \

    \'               输出 引号  '

    \n               换行

    \t               table
  
    \u####           Unicode字符，中文编码    例如：\u4e2d  “中”

    \x##             ASCⅡ字符               例如  \x41  "A"

3.1.3 多行字符串编写 ` `

用 table 上边的那个引号 ``，实现多行字符串编写

    var message = `你好啊
    how are you
    谢谢你`

3.1.4 模板字符串

    let name = "boot";
    let age = 18;

    let msg = `你好，${name}`

3.1.5 字符串长度

    console.log(str.length)

3.1.6 字符串的可变性——>不可变

字符串定义后，不可变

3.1.7 大小写转换

    // 注意： 这里是方法，不是属性，记得加括号（）
    str.toUpperCase()
    str.toLowerCase()

3.1.8 根据字符获取下标（indexOf()）

    str.indexOf('e')

3.1.9 截取字符串（substring( , )）⭐

substring 的规则，左闭右开[)

    str.substring(1,3)  // [1,3)

    str.substring(1)  // 从第一个字符串截取到最后一个字符串

3.2 数组

Java数组必须是一系列相同类型的对象，js的数组中，类型可以不相同

3.2.1 数组声明的方式：

    //方法一：
    var arr = [1, 2, 3, 5, 'hello', true, null]


    //方法二：
    new Array(1, 2, 3, 5, 'hello', true, null);

为了保证代码的可读性，尽量使用 方法一 的方式

3.2.2 取值和赋值：

    var arr = [1,2,3,4,5]; //通过下标取值和赋值
    arr[0]
    arr[0] = 1

如果越界了，就会 undefined

3.2.3 长度

    arr.length

注意：假如给 arr.length赋值，数组大小就会发生变化，如果赋值变大，多的地方是空元素，如果赋值过小，只显示前几个，剩余元素就会丢失

3.2.4 通过元素获取下标索引（indexOf()）

    var arr = [1,2,3,4,5,"1","2","3"]
    arr.indexOf(1)
    arr.indexOf("1")

注意：字符串的“1”和数字1 是不一样的

3.2.5 截取并返回新数组（slice()）

截取Array的一部分，并返回一个新数组，类似于String中的substring

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

3.2.6 在尾部添加和删除（push()、pop()）⭐

push()：压入到尾部

pop()：弹出尾部的一个元素

arr.push('1',1)
console.log(arr)
> (7) [1,2,3,4,5,'1',1]

arr.pop()
console.log(arr)
> (6) [1,2,3,4,5,'1']

3.2.7 在头部添加和删除（unshift()、shift() ）⭐

unshift：压入到头部

shift：弹出头部的一个元素

var arr = [1,2,3,4,5]
arr.unshift(1)
console.log(arr)
> (6) [1,1,2,3,4,5]

arr.shift()
console.log(arr)
> (5) [1,2,3,4,5]

3.2.8 排序 sort()

升序排列

> (3) ['C','A','B']
arr.sort()
> (3) ['A','B','C']

3.2.9 元素反转 reverse()

> (3) ['C','A','B']
arr.reverse()
> (3) ['B','A','C']

3.2.10 拼接数组 concat() ⭐

> (3) ['C','B','A']
arr.concat([1,2,3])
> (6) ['C','B','A',1,2,3]
arr
> (3) ['C','B','A']

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

3.2.11 打印数组 join()

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

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

3.2.12 多维数组

var arr = [[1,2],[2,3],['5',6]]

arr[1][1]
> 3

3.3 对象

1、对象的声明：

    var 对象名 = {
        属性名: 属性值,
        属性名: 属性值,
        属性名: 属性值
    }

    //定义了一个person对象,他有4个属性
    //Java中的定义方法:Person person = new Person(    );
    var person ={
        name: "boot",
        age: 18,
        tags: ['js','java','web','...']
        
    }

js中,数组是中括号[]，对象是大括号{ }, 键值对描述属性 XXX : XXX, 每个属性之间用逗号隔开，最后一个不需要逗号!

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

2、对象赋值

person.name = "little"
> "little"

person.name
> "little"

3、对象的取值

person.name
> "boot"
person.age
> 18

使用一个不存在的对象属性，不会报错，提醒 undefined

4、动态的删减属性

通过delete删除对象的属性

delete person.name

5、动态的添加

直接给新的属性添加值即可

person.haha = "haha"

6、判断属性值是否在这个对象中

'age' in person
> true


// 继承，他的原始方法中，有toString
'toString' in person
> true

如果判断一个属性是否是这个对象自身所拥有的 用 hasOwnProperty()

person.hasOwnProperty('toString')
> false

persn.hasOwnProperty('age')
> true

3.4 流程控制

1、 if 判断

        var num = 1;
        if(num>0){  //第一个判断
            alert("true");
        }else if(num<0) { //第二个判断
            alert("false");
        }else{    //第三个判断
            alert("none");
        }

2、while循环

var num = 3;

while(num<100){
    num = num + 1;
    console.log(num)
}


do{
    num = num + 1;
    console.log(num)
}while(num < 100)

注意：避免程序死循环

3、for循环

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

4、forEach遍历 >ES5.1

var age = [1,2,3,4,5,6];

age.forEach(function (value)){
    console.log(value)
})

5、for...in/of 遍历

var nums = [24,23,31,4,5];


// for(var index in object){}  用in 的时候，，是下标
for(var i in nums){
    console.log(nums[i])
}

// for(Type value of object){}  用of的时候，打印具体的值
for(var num in nums){
    console.log(num)
}

3.5 Map和Set

ES6的新特性

Map:

    // ES6 Map
    // 学生的成绩，学生的姓名
    // var names = ["lucy", "jack", "xiaoming"];
    // var scores = [90,99,95];

    // 定义一个map
    var map =  new Map([['lucy', 90],['jack',99],['xiaoming',95]]);
    
    var score = map.get('jack'); // 通过key获得value
    
    map.set('admin', 100); // 在map里 新增或修改
   
    map.delete('admin')； // 删除

Set：无序不重复的集合

    // 声明一个 set
    var set = new Set([3,1,1,1]); //set去除重复
    > Set(2) {3,1}

    set.delete(1); // 删除 set中的元素
    
    set.add(2); // 新增元素

    set.has(3);// 判断是否含有该元素

3.6 iterator

> ES6 新特性

for of/in 遍历数组：

// 通过for of/in 实现遍历数组 
var arr = [3,4,5]
for(var i of arr){
    console.log(i)
}

for of/in 遍历map:

var map =  new Map([['lucy', 90],['jack',99],['xiaoming',95]]);
for(let x of map){
    console.log(x)
}

for of/in 遍历set 同理：

var set = new Set([3,1,1,1]); 
for(var i of set){
    console.log(i)
}

3.7 其他

1、数值

js 不区分小数和整数，Number

    123      // 整数123
    123.1    // 浮点数123.1 
    1.123e3  // 科学计数法
    -99      // 负数
    NaN      // not a number
    Infinity // 表示无限大

注：（1/3）=== （1-2/3）结果为false，因为有精度的误差

所以：尽量避免使用浮点数进行计算

拓：可以用 Math.abs(1/3-(1-2/3))<0.00000001 结果为true

2、布尔值

true false

3、逻辑运算

    &&  两个都为真，结果为真
    ||  一个为真，结果为真
    ！   非，真即假，假即真

4、比较运算符 ⭐

    =    赋值符号
    ==   等于（类型不一样，值一样，结果true）
    ===  绝对等于(类型一样，值一样，结果才为true)

这是JS的一个缺陷，坚持不要使用==

注： NaN===NaN，这个与所有的数值不相等，包括自己

只能通过isNaN(NaN)来判断这个数是否是NaN

5、null 和 undefined

null 是空，，undefined 是未定义

四、函数及面向对象

4.1 函数定义

1、定义方式一（推荐）:

// 绝对值函数
function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

一旦执行到return 代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

2、定义方式二：

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

function(x){....}这是一个匿名函数。但是可以把结果赋值给abs，通过abs就可以调用函数。

3、函数的调用

abs(10) //10
abs(-1) //1

4、参数问题

JavaScript可以传任意个参数，也可以不传递参数，这样会引发一些问题：

①假设不传参数，如何规避？——在函数开始，手动抛出异常

function abs(x){

    // 手动抛出异常
    if(typeof x !== 'number'){
        throw 'Not a Number';
    }

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

②假设传递的参数较多？

——Ⅰ通过 arguments 拿到传递进来的所有参数，是一个数组，这是js免费赠送的关键字。

function abs(x){
    console.log("x=>"+x) //控制台输出x的值

    //遍历arguments里的元素
    for(var i = 0; i<arguments.length;i++){
        console.log(arguments[i])
    }

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

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

——Ⅱ 通过 rest 获取除了一定义的参数之外的所有参数（ES6引入的新特性）

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

4.2 变量作用域

1、在JavaScript中，var定义变量是作用域的。

① 在函数体中声明，在函数体外不可以使用❌ ~（非要想实现的话，参考4.3 闭包）

function aa(){
    var x = 1;
    x = x+1;
}

x = x + 2; // 报错: Uncaught ReferenceError: x is not defined

② 如果两个函数使用相同的变量名，只要在各自函数内部，就不冲突 🙆‍

function aa(){
    var x = 1;
    x = x+1;
}
function bb() {
    var x = 1;
    x = x+1;
}

③ 内部函数可以访问外部函数的成员，反之不行

function aa(){
    var x = 1;
    
    // 内部函数可以访问外部函数的成员，反之不行
    function bb() {
        var y = x + 1; // 2 🙆
        console.log(y)
    }

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

④ 如果内部函数变量与外部函数变量重名，自己用自己的

function aa(){
    var x = 1;

    function bb() {
        var x = 'a'
        console.log('inner'+x) // innera
    }
    console.log('outer'+x)  // outer1
    bb()
}

假设在JavaScript中，函数查找变量从自身函数开始，由内向外查找，假设内

function f1() {
    var x = 'x',
        y = 'y',
        z,i;  // 先定义
    
    //后边随便用
    x = x +y;
    z = 'z';
}

外都有同名函数变量，则内部屏蔽外部的

2、变量作用域的提升

function f1() {
    var x = 'x'+y;
    console.log(x); //xundefined
    var y = 'y';
}

结果： xundefined

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

养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护，更改为：

function f1() {
    var x = 'x',
        y = 'y',
        z,i;  // 先定义
    
    //后边随便用
    x = x +y;
    z = 'z';
}

3、全局对象

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 OnlySpace ={};

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

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

例如 jQuery（简化符号：$）

4、局部作用域 let

function aaaa(){
    for(var i=0;i<100;i++){
        console.log(i)
    }
    console.log(i+1); //输出101，问题？ 出了这个作用域还可以使用
}

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

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

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

5、常量const

在ES6之前，怎么定义常量：只有用全部大写的字母命名就是常量，不建议修改这样的值

var PI = "3.14";
console.log(PI);

PI = '123'; //可以改变这个值
console.log(PI);

在ES6 引入了常量关键字 const，只读常量

const PI = '3.14'; //只读常量
console.log(PI);
PI = '234'; // TypeError: Assignment to constant variable

建议使用 const 定义常量

4.3 方法

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

1、方法的定义和调用

var am = {
    name:'boot',
    birth: 2000,
    // 定义方法
    age: function () {
        //今年-出生的年
        var now = new Date().getFullYear();
        return now - this.birth; //注意这里的this
    }
}

// 属性的调用
am.name;
// 方法的调用，一定要带（）
am.age();

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

function  getAge() {
    //今年-出生的年
    var now = new Date().getFullYear();
    return now - this.birth; //注意这里的this
}


var amm = {
    name:'boot',
    birth: 2000,
    age:getAge
}

amm.age() //可以
getAge() //NaN，因为如果直接调用getAge this 指的是window，但是他里边并没有birth

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

3、可以指向的apply

getAge.apply(amm,[]); // this，指向了amm，参数为空，可以输出age信息

五、常用内部对象

标准对象

typeof 123
> 'number'
typeof '123'
> 'string'
typeof true
> 'boolean'
typeof NaN
> 'number'
typeof []
> 'object'
typeof {}
> 'object'
typeof Math.abs
> 'function'
typeof undefined
> 'undefined'

5.1 Date

1、基本使用

var now = new Date(); // 打印当前时间
now.getFullYear(); // 年
now.getMonth(); // 月  0~11 代表月
now.getDate(); // 日
now.getDay(); //星期几
now.getHours(); // 时
now.getMinutes(); //分
now.getSeconds(); // 秒

now.getTime(); //时间戳，从1970年1月1日 0:00:00 到现在的毫秒数

console.log(new Date(1234343)) ;// 通过时间戳 转为 具体时间
> Thu Jan 01 1970 08:20:34 GMT+0800 (中国标准时间)

2、转换

now = new Date(1232434354)
> Thu Jan 15 1970 14:20:34 GMT+0800 (中国标准时间)
now.toLocaleString //注意，调用是一个方式，不是一个属性！
> ƒ toLocaleString() { [native code] }
now.toLocaleString()
> '1970/1/15 14:20:34'
now.toGMTString() //转换时区
> 'Thu, 15 Jan 1970 06:20:34 GMT'

5.2 JSON

1、json 是什么?

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

早期，所有数据传输习惯使用XML文件。

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

2、json的格式

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

3、JSON字符串和JS对象的转化

<script>

    var user = {
        name: "boot",
        age: 3,
        sex: '女'
    }

    // 对象转化为json字符串 {"name":"boot", "age":3, "sex": "女"}
    var jsonUser = JSON.stringify(user)
    
    // json 字符串转化为对象
    var obj = JSON.parse(' {"name":"boot", "age":3, "sex": "女"}')

</script>