JavaScript快速入门

JavaScript

文章目录

JavaScript

1.快速入门

typore生产目录[TOC]

1.1 引入

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

    <!--script 内部标签-->
    <!--<script>
        alert('hello World!');
    </script>-->

    <!--外部引入-->
    <script src="first.js"></script>

</head>
<body>

</body>
</html>

1.2 语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- script 严格区分大小写 -->
    <script>
        // 1 定义变量  变量类型  变量名 = 变量值
        var score = 1;
        if(score == 1){
            alert(score);
        }

        /*
         *  console.log(score) 在浏览器控制台打印变量
        */
    </script>
</head>
<body>

</body>
</html>

1.3 数据类型

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

number

js不区分小数和整数

字符串

1.转义字符： \；

\n 换行
\' 
\t

2.多行字符

var msg = `
 a
 b
 c
`

3.模板字符串

let name = 'mrh';
let msg = `你好呀 ,${name}`

布尔值

false true

逻辑运算

&& || !

比较运算符

==   // 等于（类型不一样但值一样也会返回true）
===  // 绝对等于(类型和值一样才能返回true)

尽量使用绝对等于

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TArwgQyI-1587998235215)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200426181332316.png)]

Nan和所有变量包括自己都不相等

浮点数问题

console.log(1/3 == (1-2/3))   返回false，存在精度问题

null 和 undefined

null 空
undefined 未定义

数组

var arr = {1, 2, 'a', 1.23， null, true}

取数组下标越界就会undefined

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pm5sK61f-1587998235217)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200426185415746.png)]

slice() 截取数组的一部分，返回一个新数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hn6Yc6sS-1587998235219)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200426185636602.png)]

push, pop 添加和取出元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OroODesy-1587998235221)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200426185811023.png)]

unshift(), shift()  压入和取出头部元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cy3TiRGV-1587998235223)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200426185956859.png)]

reverse()  元素翻转
不会修改数组，而是返回一个新数组

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3JsRhLjp-1587998235224)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200426190112439.png)]

jion(" ") 打印数组元素使用指定字符连接后的字符串

对象

可以看作若干个键值对

每个属性之间用逗号隔开

//定义对象
var person = {
    name: "mrh",
    age: 3,
    tag:['mrh', 3]
}

动态删减，添加属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fYs147Dp-1587998235225)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200426214903724.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RjDkrRtD-1587998235225)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200426214950702.png)]

判断一个属性是否在对象中

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

判断一个属性是否是对象自身拥有的

person.hasOwnProprety('name')
true

1.4 Map和Set

Map的定义：键–>值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D5wHnXs7-1587998235227)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200427135028530.png)]

添加，显示值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3bUFxUrp-1587998235228)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200427135044415.png)]

Set的定义：无序不重复的集合

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MVAC8Tny-1587998235229)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200427135346183.png)]

添加，显示，删除

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P2nCwvKq-1587998235230)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200427135713574.png)]

遍历

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-znCkKzMH-1587998235231)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200427141201530.png)]

2.函数及面向对象

2.1 定义函数

function abs(x) {
    if(x < 0){
        x = -x;
    }
    return x;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cKHthh3u-1587998235232)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200427142214039.png)]

参数问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZxFxEore-1587998235233)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200427142412924.png)]

可以传递多个参数，也可以不传递参数，需要函数自身判断

if(typeof x !== 'number'){
    throw 'not a number';
}

2.2 变量的作用域

在函数体中定义的变量不能作用域函数外

如果函数中定义了一个和外部变量同名的变量，则会屏蔽外部变量， 使用内部变量
原理与双亲委派机制相反，在从内向外查找过程中如果找到就会停止查找

全局对象window

var x = 'xx';
alert(x);
alert(window.x)  // 默认所有的全局变量都会绑定在windows对象上

alert()本身也是一个window对象

javascript实际上只有一个全局作用域，任何变量（函数也看作变量），假设没有在函数作用域中找到就会向外查找，如果在全局作用域也没有找到就会产生 RefrenceError

规范

如果将所有的全局变量都绑定到window上，不同的js文件用到了相同名称的变量就会产生冲突

如何解决上述问题

//定义一个唯一全局变量
var M = {};

//定义全局变量
M.name = 'mrh';
M.age = '20';
M.add = function(a, b){
	return a+b;
}

局部作用域 let

function a(){
	for(var i = 0; i < 100; i++){
	}
	console.log(i);   // RefrenceError ： i is not defined
}

常量 const

const声明的变量不能修改

const PI = '3.14';  //只读变量
console.log(PI);  //3.14
PI = 1;   // TypeError : Assignment to constant variable
console.log(PI)  //3.14

2.3 方法

定义方法

把函数放到对象中就是方法

对象中的函数和方法要跟 ： 而不是 =

var m = {
            name : 'mrh',
            birthYear : 1999,
            age : function () {
                var now = new Date().getFullYear() - this.birthYear;
                return now;
            }

        }

3. 内部对象

标准对象

number
string
boolean
Object
function
undefined

3.1 Data

var date = new Date();
        console.log(date.getFullYear()); //年
        console.log(date.getMonth()); //月
        console.log(date.getDate());//日
        console.log(date.getDay());//星期
        console.log(date.getHours());//时
        console.log(date.getMinutes());//分
        console.log(date.getSeconds());//秒
        console.log(date.getTime()); //时间戳 全世界同一 从1970.1.1 0:00:00至今的毫秒数

3.2 JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

早期所有数据交换传输习惯使用XML文件，由于XML的复杂性，使得JSON顺应而生

简洁和清晰的层次结构
抑郁热阅读和编写，易于机器解析和生成，并有效地提升网络传输效率

javascript语法格式

对象用{}
数组用[]
键值对用 key : value

JSON定义

var user = {
    name : 'mrh',
    age : 19,
    id : 1
}
//对象转化为JSON
var jsonUser = JSON.stringify(user);

//JSON转对象, 传入的参数必须以字符串的形式所以{}外面要加上引号
//并且为了防止引号和里面的错乱，必须和里面所用的引号错开（即单引号和双引号）
var user2 = JSON.parse('{"name":"m","age":20,"id":2}');

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iOETZzuS-1587998235234)(C:%5CUsers%5CAdministrator%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20200427223008975.png)]

json实际上是一个字符串

posted @ 2020-04-27 22:38 IzuruKamuku 阅读(90) 评论(0) 收藏举报

刷新页面返回顶部

Cynicism-m