JavaScript详解

最新推荐文章于 2024-07-24 11:09:48 发布

牛魔瘦了

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量1.2k

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/yinuo_chao/article/details/123036561

版权

JavaScript详解视频

前后端必备技能！点击跳转JavaScript详解(07:24:54)

在这里插入图片描述

与万物的和谐自由，也是与自己的和解自由，更是同宇宙的合一自由。

超链接

点击跳转JavaScript教程

点击跳转廖雪峰的官方网站

点击跳转jQuery 文档工具站cuishifeng

点击跳转jQuery官网

点击跳转cdn jQuery

P1 聊聊JavaScript这个东西

概述

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

Java、JavaScript

10天~

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

历史

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

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

最新版本已经到es6版本~

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

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

P2 基本使用及HelloWorld

快速入门

引入JavaScript

内部标签
外部引入

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

    <!--script标签内，写JavaScrpt代码-->
    <script>
        alert('hello,world');
    </script>

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

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

</head>
<body>


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

js/test.js

alert('I Love You !');

P3 浏览器控制台使用

<!--JavaScript严格区分大小写-->
<script>
    // 1. 定义变量  变量类型  变量名 = 变量值；
    var score = 62;

    // 2. 条件控制
    if (score>60 && score<70){
     
        alert("60~70");
    }else if(score>70 && score<80){
     
        alert("70~80");
    }else{
     
        alert("other");
    }

    //console.log(score); 在浏览器的控制台打印变量！System.out.println();
    /*
        注释
     */
</script>

浏览器必备调试须知：
在这里插入图片描述

P4 数据类型快速浏览

数据类型

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

变量

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

number

js不区分小数和整数，Number

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

字符串

‘abc’ “abc”

布尔值

true , false

逻辑运算

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

||  一个为真，结果为真

！  真即假，假即真

比较运算符！！！重要！

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

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

须知：

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

浮点数问题：

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

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

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

null和undefined

null 空
undefined 未定义

数组

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

//保证代码的可读性，尽量使用 []
var arr = [1,2,3,4,5,'hello',null,true];

new Array(1,12,3,4,5,'hello');

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

undefined

对象

对象是大括号，数组是中括号~~

每个属性之间使用逗号隔开，最后一个不需要添加

//Person person = new Person(1,2,3,4,5);
var person = {
   
    name: "冰墩墩",
    age: 3,
    tags: ['js','java','web','...']
}

取对象的值

person.name
> '冰墩墩'
person.age
> 3
person.tags
> (4) ['js', 'java', 'web', '...']

P5 严格检查模式strict

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <!--
    前提：IDEA 需要设置支持ES6语法
    'use strict'; 严格检查模式，预防JavaScript的随意性导致产生的一些问题
    必须写在JavaScript的第一行！
    局部变量建议都使用 let 去定义~
    -->

    <script>
        'use strict';
        // 全局变量
        let i = 1;
        // ES6 let
    </script>

</head>
<body>

</body>
</html>

P6 字符串类型详解

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

2、注意转义字符 \

\'
\n
\t
\u4e2d \u####  unicode字符
\x41   Ascll字符

3、多行字符串编写

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

4、模板字符串

//tab  上面  esc键下面
let name = '冰墩墩';
let age = 3;

let msg2 = `你好呀，${
     name}!`

5、字符串长度

str.length

6、字符串的可变性，不可变
在这里插入图片描述

7、大小写转换

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

8、student.indexOf(‘t’)

9、substring

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

P7 数组类型详解

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

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

1、长度

arr.length

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

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

arr.indexOf(2)

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

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

4、push，pop

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

5、unshift()，shift() 头部

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

6、排序sort()

(3) ['b', 'c', 'a']
arr.sort()
(3) ['a', 'b', 'c']

7、元素反转 reverse()

(3) ['a', 'b', 'c']
arr.reverse()
(3) ['c', 'b', 'a']

8、concat()

(3) ['c', 'b', 'a']
arr.concat([1,2,3])
(6) ['c', 'b', 'a', 1, 2, 3]
arr
(3) ['c', 'b', 'a']

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

9、连接符join

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

(3) ['c', 'b', 'a']
arr.join('-')
'c-b-a'

10、多维数组

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

数组：存储数组（如何存，如何取，方法都可以自己实现！）

P8 对象类型详解

若干个键值对

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

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

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

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

1、对象赋值

person.name = "abc"
'abc'
person.name
'abc'

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

person.haha
undefined

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

delete person.name
true
person

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

person.haha = "haha"
'haha'
person

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

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

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

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

P9 分支和循环详解

流程控制

if判断

var age = 3;
if(age>3 && age<=10){
     //第一个判断
    alert("haha");
}else if(age>10){
     //第二个判断
    alert("leia~");
}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

最低0.47元/天解锁文章

牛魔瘦了

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript详解

JavaScript详解视频前后端必备技能！点击跳转JavaScript详解(07:24:54)与万物的和谐自由，也是与自己的和解自由，更是同宇宙的合一自由。超链接点击跳转JavaScript教程点击跳转廖雪峰的官方网站点击跳转jQuery 文档工具站cuishifeng点击跳转jQuery官网点击跳转cdn jQueryP1 聊聊JavaScript这个东西概述JavaScript是一门世界上最流行的脚本语言Java、JavaScript10天~一个合格的后端人员
复制链接

扫一扫