首页 > 编程语言 > 详细

JavaScript入门学习笔记

时间:2020-04-04 17:48:02      阅读:64      评论:0      收藏:0      [点我收藏+]

1、什么是JavaScript

1.1、概述

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

Java、JavaScript 并没有什么关系。

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

1.2、历史

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

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

最新版本已经到es6版本~

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

开发环境---线上环境,版本不一致

2、快速入门

2.1、引入JavaScript

1、内部引入

<script>
    //...
</script>    

2、外部引入

ads.js

//...

test.html

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

测试代码:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>MyFirstJavaScriptCoding</title>

        <!-- <script>
            alert(‘Hello,World‘);
        </script> -->

        <!--外部引入-->
		<!-- 注意script标签必须成对出现 -->
        <script src="js/qj.js"></script>
        
        <!--不用显示定义type,也就默认是JavaScript-->
        <script type="text/javascript">
            
        </script>
    </head>
    <body>
        
        <!--这里也可以放置-->
    </body>
</html>

2.2、基本语法入门

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>

        <!--JavaScript严格区分大小写-->
        <script>
            // 1.定义变量 变量类型 变量名 = 变量值;
            var num = 1;
            // alert(num);
            // 2.条件控制
            if(num == 1) {
                alert("true");
            }

            //console.log(num) 在浏览器的控制台打印变量 相当于sout
        </script>
    </head>
    <body>

    </body>
</html>

2.3、数据类型

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

变量

var num

number

JS不区分小数和整数、number

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

字符串

‘abd‘ "abc"

布尔值

true false

逻辑运算

&& 
|| 
!

比较运算符

= 赋值
== 等于(类型不一样、值一样,也会判断为true)
=== 绝对等于(类型一样、值一样,结果为true)
var a = ‘1‘;
undefined
var b = 1;
undefined
console.log(a == b);
VM1217:1 true
undefined
console.log(a === b);
VM1232:1 false
undefined

这是JS的缺陷,坚持不要使用 == 比较。

须知:

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

浮点数问题:

1/3 == (1 - 2/3)
false

尽量避免使用浮点数进行计算,存在精度问题

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

null和undefined

  • null 空
  • undefined 未定义

数组

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

new Array(1,2,3,‘hello‘,null,true);

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

undefined

对象

对象是大括号,数组是中括号

每个属性之间使用逗号隔开,最后一个不用写逗号

var person = {
    name: "January",
    age: 22,
    tags: [‘js‘, ‘java‘, ‘python‘, ‘...‘]
}

取对象的值

person.name
"January"

2.4、严格检查模式

技术分享图片

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <!--
        前提:
        IDEA需要设置支持ES6语法
        ‘use strict‘; 严格检查模式,预防JavaScript的随意性导致产生的一些问题
        必须写在JavaScript的第一行
        局部变量建议都是用let去定义
    -->
    <script>
        ‘use strict‘;
        // 全局变量
        let i = 1;
        // ES6 let 
    </script>
    </body>
</html>

3、数据类型

3.1、 字符串

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

2、注意转义字符 \

\‘
\n
\t
\u4e2d \u#### Unicode字符
\x41				Ascll字符

3、多行字符串编写

//tab键上边esc键下边 
console.log(`
            你好,IU
            你好,奈良
            你好,世界
            `)

4、模板字符串

let name = "xionglei";
let age = 22;
let msg = `你好啊, ${name}`;

5、字符串长度

str.length

6、字符串的可变性,不可变

技术分享图片

7、大小写转换

//注意这里是方法,不是属性
name.toUpperCase();
name.toLowerCase();

8、获取指定字符串的索引

indexOf() lastIndexOf()

技术分享图片

9、截取字符串

substring() slice() split()

name.substring(1,3);	//左闭右开 [1,3)
//slice() 与 substring() 功能基本相同,下面是不同点
name.substring(2,-2);	//xi [0,2) 
name.slice(2,-2);		//ongl [2,name.length-2)即[2,6)
name.substring(-2,2);	//xi [0,2)
name.slice(-2,2);		//""

这些方法执行后都是返回新的字符串,不会改变原始字符串。

技术分享图片

技术分享图片

注意:

如果把空字符串 ("") 用作 separator,那么 stringObject 中的每个字符之间都会被分割。

String.split() 执行的操作与 Array.join 执行的操作是相反的。

3.2、数组

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

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

1、长度

arr.length

注意:假如给arr.length赋值,数组大小就会发生变化。如果赋值过小,元素就会丢失。

2、indexOf()通过元素或得下标索引

arr.indexOf(2)
1

字符串的“1”与数字1是不同的。

3、slice()截取Array的一部分,与字符串中的slice几乎相同。

4、push() pop() 尾部

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

5、unshift() shift() 头部

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

6、排序 sort()

arr = ["a","c","b"];
arr.sort();
> (3) ["a","b","c"];

7、元素反转

arr = ["a","b","c"];
arr.reverse();
> (3) ["c","b","a"]

8、concat()

arr = ["a","b","c"];
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、多维数组

arr = [[1,2],[3,4],[‘5‘,"6"]];
(3)?[Array(2), Array(2), Array(2)]
arr[1][1];
4

11、fill() 给数组对应索引上的元素赋值

arr = [1,2,3];
(3)?[1, 2, 3]
arr.length = 10;
10
arr
(10)?[1, 2, 3, empty × 7]
arr.fill(0, 3, -1);
(10)?[1, 2, 3, 0, 0, 0, 0, 0, 0, empty]

数组:存储数据。(如何存 如何取,方法都可以自己实现)

3.3、对象

若干个键值对

var 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}
//定义了一个person对象,有四个属性
var person = {
                name : "xionglei",
                age : 22,
                email : "xionglei1614@163.com",
                score : 145
            }

JavaScript中对象,{......}表示一个对象,键值对描述属性xxx: xxx,多个属性之间用逗号隔开,最后一个属性不加逗号!

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

1、对象赋值

person.name = "IU";
"IU"
person.name
"IU"

2、使用一个不存在的对象属性,不会保存

person.IU
undefined

3、动态的删减属性

delete person.name;
true
person
{age: 22, email: "xionglei1614@163.com", score: 145}

4、动态的添加属性

person.IU = "IU";
"IU"
person
{age: 22, email: "xionglei1614@163.com", score: 145, IU: "IU"}

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

‘age‘ in person;
true
//继承
‘toString‘ in person;
true

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

person.hasOwnProperty(‘toString‘);
false
person.hasOwnProperty(‘age‘);
true

3.4、流程控制

if判断

let age = 3;
if(age < 3) {
    alert("wuwu");
}else if(age === 3) {
    alert("heihei");
}else{
    alert("haha");
}

while 循环,避免死循环

let age = 90;
while(age < 100) {
    console.log(age);
    age++;
}

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

for循环

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

forEach循环

arr = [1,2,3,4,5,6,"1",‘2‘];
arr.forEach(function (value) {
    console.log(value);
});

for...in

arr
(8)?[1, 2, 3, 4, 5, 6, "1", "2"]
for(let index in arr){
    console.log(arr[index]);
};

3.5、 Map和Set

ES6中的新特性

Map:

let map = new Map([[‘tom‘, 100], [‘jack‘, 90], [‘LiMing‘, 88]]);
undefined
map.get(‘tom‘);//获取
100
map.set(‘XiaoMei‘, 99);//新增或修改
Map(4)?{"tom" => 100, "jack" => 90, "LiMing" => 88, "XiaoMei" => 99}
map.delete(‘tom‘);//删除

Set: 无序不重复的集合

let set = new Set([3,1,1,1,2,2]);
set.add(4);//增
Set(4)?{3, 1, 2, 4}
set.delete(1);//删除
true
set.has(4);//判断是否存在
true

3.6、iterator

作业:使用iterator来遍历迭代Map、Set!

?

JavaScript入门学习笔记

原文:https://www.cnblogs.com/BearBird/p/12632449.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!