前端入门03--JavaScript详解

最新推荐文章于 2023-01-19 09:16:51 发布

Younglin666

最新推荐文章于 2023-01-19 09:16:51 发布

阅读量340

点赞数

本文链接：https://blog.csdn.net/IBM06602/article/details/108688280

版权

1、什么是JavaScript

1.1.概述

Javascript是一门世界上最流行的脚本语言（十天开发完成）

一个合格的后端，必须精通Javascript

1.2.历史

https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript它可以理解为是一个Javascript的一个标准
最新版本已经到ES6版本
但是大部分浏览器只停留在支持ES5代码上！
webpack：解决开发环境—线上环境，版本不一致
- 提供模块化的开发方式和编译打包功能就是webpack的核心，其他很多功能都围绕它们展开。

2、快速入门

2.1.引入Javascript

内部标签和外部引入

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

    <!--script标签引入，写Javascript代码-->
    <script>
        alert("hello world!")
    </script>

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

    <!--不用显示定义type，也默认就是-->
    <script type="text/javascript"></script>
</head>
<body>
</body>
</html>

2.2.基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--Javascript严格区分大小写-->
    <script>
        // 1. 定义变量   变量类型    变量名 = 变量值
        var num = 1;
        var name = "kuangshen";
        'hello,world';

        // 2.条件控制
        if(num>60 && num < 70){
    
            alert(true);
        }else if(num > 70){
    
            alert(false);
        }else {
    
            alert("other")
        }

        //console.log(log);//在浏览器控制台打印变量

    </script>
</head>
<body>

</body>
</html>

2.3.数据类型

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

number

123	//整数
123.3	//浮点
1.123e3	//科学计数法
-99	//复数
NaN	//not a number
Infinity	//无限大

字符串

‘abc’
“abc”

布偶值

true，false

逻辑运算符

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

比较运算符

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

须知：

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

浮点数问题

console.log((1/3)===1-2/3);//false
//尽量避免使用浮点数进行运算，存在进度问题
console.log(Math.abs(1/3-(1-2/3))<0.00000001);//true

null和undefined
- null：空
- undefined：未定义
数组：

//保证代码可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello',null,true);
//取数组下标：如果越界,返回undefined
console.log(arr[8])//undefined

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

//Person person = new Person(1,2,3,4,5);
var person = {
   
    name: "liusx",
    age: 3,
    tages: ['Java','Javascript']
}

2.4.严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        前提：IDEA 需要设置支持ES6语法
        'use strict';
        严格检查模式，预防Javascript随意性导致一些问题
    -->
    <script>
        'use strict';
        //默认全局变量
        i = 1;
    </script>
</head>
<body>


</body>
</html>

3、数据类型

3.1.字符串

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

2、注意转义符\

\'
\n
\t
\u4e2d	Unicode字符
\x41	Ascll字符

3、多行字符串编写``

//tab上面，esc键下面
var msg = 
    `hello
nihao .`

4、模板字符串

let name = 'liusx';
let age = 3;
let msg = `你好啊，${
     name}`;
console.log(msg)//你好啊，liusx
1234

5、字符串长度

str.length

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

7、字符串的方法

//注意：这里是方法，不是属性
'student'.toUpperCase();//转大写
'student'.toLowerCase();//转小写

'studen't.indexOf('t');//1	获取指令的下标0开始
'student'.substring(1);//"tudent"
'student'.substring(1,3);//tu

在这里插入图片描述

3.2.数组

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

var arr = [1,2,3,4,5,6];
arr[0]//取值
arr[1] = 1//赋值

1、长度

arr.length

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

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

//字符串的"1"和数字1是不同的
var arr = [1,2,3,4,5,6,"1","2"];
arr.indexOf(1)//返回0
arr.indexOf("1")//返回6

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

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

4、push()、pop() 尾部

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

5、unshift()、shifu() 头部

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

6、排序：sort()

var arr = ['B','A','C']
arr.sort()
['A','B','C']

7、元素反转：reverse()

var arr = ['A','B','C']
arr.reverse();
['C','B','A']

8、合并数组：concat()

var arr = ['A','B','C']
arr.concat([1,2,3]);//返回新数组
['A','B','C',1,2,3]

注意：concat()并没有修改原数组，知识返回一个新的数组

9、连接符，数组转字符串：join()

var arr = ['A','B','C']
arr.join('-');
'A-B-C'

10、多维数组

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

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

3.3.对象

若干个键值对

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

var person = {
   
    name: 'liusx',
    age: 3,
    email: '8629303@qq.com',
    score: 0
}

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

JavaScript中的所有

1、对象赋值

person.name = 'xxxxxx'
"xxxxxx"
12

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

person.haha
undefined
12

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

delete person.name
true
12

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

person.haha = 'haha';
'haha'
12

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

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

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

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

3.4.流程控制

if判断

var age = 3;
if(age>3){
   
    alert(3);
}else if(age<5){
   
    alert(5);
}else{
   
    alert(haha);
}
12345678

while循环，避免死循环

while(age < 100){
   
    age = age + 1

最低0.47元/天解锁文章

Younglin666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门03--JavaScript详解

1、什么是JavaScript1.1.概述Javascript是一门世界上最流行的脚本语言（十天开发完成）一个合格的后端，必须精通Javascript1.2.历史https://blog.csdn.net/kese7952/article/details/79357868ECMAScript它可以理解为是一个Javascript的一个标准最新版本已经到ES6版本但是大部分浏览器只停留在支持ES5代码上！webpack：解决开发环境—线上环境，版本不一致提供模块化的开发方式和编译打包功
复制链接

扫一扫