失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > JavaScript快速入门通俗易懂

JavaScript快速入门通俗易懂

时间:2018-07-10 17:58:40

相关推荐

JavaScript快速入门通俗易懂

一、概述

JavaScript是一门脚本语言命名是为了当时蹭Java语言的热度

二、快速入门

1、引入JavaScript

内部引入

<!-- script标签内 写JavaScript代码--><script>alert("hello World!!")</script>

外部引入

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

2、基本语法入门

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!-- JavaScript 严格区分大小写--><script>// 定义变量 : 变量类型 变量名 = 变量值;var num = 1;alert("num = " + num);// 条件控制var score = 59;if (score>60) {alert("Happy Ending");} else {alert("Hollyshit");}// console.log(score) 在浏览器的控制台打印变量 == System.out.println(score);</script></body></html>

浏览器调试 ----> F12

3、数据类型

​ 数值,文本,图像,音频,视频…

变量不能以数字命名

numberjs不区分小数和整数

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

字符串

“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.00000001

null、undefinednull 空undefined 未定义数组

Java的数组必须是相同类型的对象,JS则不必

如果数组越界了,则会显示undefined

var arr = [1, 2, 3, 4, null, 'hello', true];

对象

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

每个属性之间使用逗号分开

// Person person = new Person(1,2,3);var person = {name: "abc",age: 3,tags: ["html","css","JavaScript"]}

取对象的值:

4、严格检查模式

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

三、数据类型

1、字符串

正常字符使用''""来包裹注意转义字符 \

\n 换行

\t 一个tab距离

\u4e2d Unicode字符

\x41 ASCII字符

多行字符串编写 ``(Tab与Esc之间的按键)

var msg =`helloworld你好`

模板字符串

let name = "耳冉";let age = 18;let msg2 =`早哇 ${name}`

字符串长度以及可单独获取某一元素 字符串的不可变性 大小写转换

注意,这里是调用方法,而不是student的属性

console.log(student.toUpperCase())

console.log(student.toLowerCase())

获取下标

console.log(student.indexOf(‘u’))

2

substring 相当于[)左闭右开

console.log(student.substring(1,3))

tu

2、数组

Array可以包含任意数据类型

var arr = [1,2,"1","2",null,true,'a']; // 通过下标取值、赋值

长度 arr.length

注:在给arr.length赋值时,数组大小会发生变化,若赋值小于数组长度,则多余元素就会丢失

通过元素获得下标索引 arr.indexOf(num)slice() 截取Array的一部分,返回一个新的数组 类似于substringpush()、pop() 尾部 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() 拼接

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

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

join() 连接符

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

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

多维数组

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

3、对象

若干个键值对

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

Js中对象,{…}表示一个对象,键值对描述属性

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

对象赋值

person.age18person.age = 2121person.age21

动态的删减属性

person{name: "Java", age: 21, email: "401446424@", score: 0}delete person.scoretrueperson{name: "Java", age: 21, email: "401446424@"}

动态添加

person{name: "Java", age: 21, email: "401446424@"}person.add = "Hello""Hello"person{name: "Java", age: 21, email: "401446424@", add: "Hello"}

判断属性值是否在对象中

'age' in persontrue'toString' in personfalse

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

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

4、流程控制

判断 if if-else if-else循环 while(避免死循环) do-while forforEach循环

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

for… in

for (var num in arr) {console.log(arr[num]);}

for… of

for (var num of arr) {console.log(num);}

5、Map和Set

Map: get、set、delete

let map = new Map([['tom',100],['Jack',90],['John',80]]);// 通过get获得valuelet name = map.get('tom');console.log(name);

mapMap(3) {"tom" => 100, "Jack" => 90, "John" => 80}map.set('admin',70)Map(4) {"tom" => 100, "Jack" => 90, "John" => 80, "admin" => 70}map.delete('John')truemapMap(3) {"tom" => 100, "Jack" => 90, "admin" => 70}

Set: 无序不重复的集合(与Java相同)

如果觉得《JavaScript快速入门通俗易懂》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。