JavaScript学习笔记_function tolocalestring() { [native code] }-CSDN博客

本文链接：https://blog.csdn.net/qq_43021902/article/details/114876650

这篇博客详细介绍了JavaScript的基础知识，从语言概述、历史到快速入门，涵盖数据类型、流程控制、函数及面向对象编程等内容。重点讨论了BOM对象的操作，包括window、location、document等，并强调了DOM操作的重要性。此外，还提到了jQuery库的使用和学习建议。

摘要由CSDN通过智能技术生成

1 什么是JavaScript

1.1 概述

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

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

1.2 历史

https://blog.csdn.net/kese7952/article/details/79357868

ECMAScript它可以解释为JavaScript的一个标准

最新版本已经到es6版本

但是浏览器还只停留在支持es5代码上

开发环境–线上环境，版本不一致

2 快速入门

2.1 引入JavaScript

内部标签

<script>
      alert('hello,world');
   </script>

外部引入

qj.js

//,,,

test.html

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

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!-- script标签内，写JavaScript代码   -->
<!--    <script>-->
<!--        alert('hello,world');-->
<!--    </script>-->

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

    </script>
</head>
<body>
<!--这里也可以存放JavaScript-->
</body>
</html>

2.2 基本语法入门

<!-- JavaScript严格区分大小写！ -->
    <script>
        // 1.定义变量  变量类型   变量名=变量值；
        var score=71;
        // 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) 在浏览器的控制台打印变量！
    </script>

浏览器必备调试须知：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cZdQMmUu-1615870468732)(C:\Users\AG\AppData\Roaming\Typora\typora-user-images\image-20210312140401863.png)]

2.3 数据类型

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

2.3.1 变量

var 王者荣耀="倔强青铜"；

2.3.2 number

js不区分小数和整数，Number

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

2.3.3 字符串

‘abc’“abc”

2.3.4 布尔值

true，false

2.3.5 逻辑运算

&& 两个都为真，结果为真

|| 一个为真，结果为真

! 真即假，假即真

2.3.6 比较运算符（重要）

=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）

这是一个js的缺陷，坚持不要使用==比较

须知：

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

浮点数问题：

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

尽量避免使用浮点数进行运算，存在精度问题！

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

2.3.7 null和undefined

null 空
undefined 未定义

2.3.8 数值

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

var arr=[123,'heelo',null,ture]

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

undefined

2.3.9 对象

对象是大括号，数组是中括号，每个属性用逗号隔开,注意不要使用’=’，而是’:’!!!

var person={
name:"xiaoming",
age:3,
tags:['js','java','web','...']
}

取对象的值

person.age
>3
person.name
>"xiaoming"

2.4 严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    'use strict' 严格检查模式，预防JavaScript的随意性产生的一些问题
        必须写到JavaScript的第一行
        局部变量建议都使用let签约定义
-->
    <script>
    'use strict';
        //全局变量
        let i=1;
        //ES6 <let></let>
    </script>
</head>
<body>

</body>
</html>

3 数据类型

3.1 字符串

正常字符串我们使用单引号或者双引号包裹
注意转义字符\

\'
\n
\t
\u4e2d  \u### Unicode字符
\x41   Asc11字符

多行字符串编写

//tab 上面 esc下面
var msg=
`hello
world
你好ya
您好`

模板字符串

//tab 上面  esc下面
let name="sean";
let age=3;
let msg = `你好啊，${
     name}`

字符串长度

console.log(str.length)

字符串的可变性：不可变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-owYekI3D-1615870468733)(C:\Users\AG\AppData\Roaming\Typora\typora-user-images\image-20210313085251205.png)]

大小写转换

//注意，这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()

student.indexOf(‘t’)
substring

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

3.2 数组

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

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

长度

arr.length

注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

indexOf，通过元素获得下标索引

arr.indexOf(2)
1

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

slice()截取Array的一部分，返回一个新数组，类似于String中的substring
push()，pop() 尾部

push：压入到尾部
pop：弹出尾部的一个元素

unshift(),shift() 头部

unshift：压入到头部
shift：弹出头部的一个元素

排序sort()

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

元素反转 reverse()

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

concat()

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

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

连接符 join

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

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

多维数组

arr=[[1,2],[3,4]["5","6"]];
arr[1][1]
4

数组：存储数据（如何存，如何取）

3.3 对象

若干个键值对

var 对象名={
   
属性名：属性值，
属性名：属性值，
属性名：属性值
}

//定义了一个person对象，它有四个属性！
var person={
   
    name:"sean",
    age:3,
    email:"952812117@qq.com"
    score:0
    
}

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

对象赋值

person.name="guan"
"guan"
person.name
"guan"

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

person.haha
undefined

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

delete person.name
true
person

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

person.haha="haha"
"haha"
person

判断属性值是否在这个对象中！ xxx in xx

'age'in person
true
//继承
'toSring' in person
true

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

person.hasOwnProperty('toSring')
false
person.hasOwnProperty('age')
true

3.4 流程控制

if判断

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

while循环，避免程序死循环

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

for循环

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

forEach循环

5.1引入

var age=[12,3,12,3];

//函数
age.forEach(function (value){
   
    console.log(value)
})

for…in

//for(var index in object){}
for(var num in age){
   
    if(age.hasOwnProperty(num)){
   
         console.log("存在")
         console.log(age[num])
    }
}

3.5 Map和Set

Map：

//ES6 Map
//学生的成绩，学生的名字
//var names=["tom","jack","haha"];
//var scores=[100,90,80];

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