0
点赞
收藏
分享

微信扫一扫

JS基础知识

阎小妍 2022-04-30 阅读 93
javascript前端

JavaScript基础

JS的组成

1.ECMAScript——JavaScript语法

2.DOM——页面文档对象模型 ↘

Web APIs

3.BOM——浏览器对象模型 ↗

三种引入方式

1.行内式

直接写到元素内部。可读性差，在HTML中编写js大量代码时，不方便阅读。在特殊情况下使用。

2.内嵌式

写在 <script> </script> 标签里

3.外部js

<script src = "*js路径*" >*这里不可以写代码*</script>

  • 分离了 HTML 和代码
  • 使 HTML 和 JavaScript 更易于阅读和维护
  • 已缓存的 JavaScript 文件可加速页面加载

输入输出语句

1.prompt()

prompt()方法用于显示可提示用户进行输入的对话框。

这个方法返回用户输入的字符串。

语法
prompt(msg,defaultText)
参数描述
msg可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。
defaultText可选。默认的输入文本。

2.alert()

显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。

语法

window.alert(message);

3.console()

浏览器控制台打印输出信息

console.log(); 打印内容的通用方法

4.document.write()

写入 HTML 输出。

出于测试目的，使用 document.write() 比较方便

3.innerHTML

写入HTML元素

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容。

  • 注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：

变量

1.声明变量

var varname = value;

JavaScript有三种声明方式。

  • var

    声明一个变量，可选初始化一个值。

  • let

    声明一个块作用域的局部变量，可选初始化一个值。

  • const

    声明一个块作用域的只读常量。

2.参数值

参数描述
varname必须。指定变量名。变量名可以包含字母，数字，下划线和美元符号。 1.变量名必须以字母开头 2.变量名也可以以$和_开头（但一般不这么用） 3.变量名是大小写敏感的（y和Y是不同的变量） 4.保留字（如JavaScript关键字）不能作为变量名使用
value可选。指定变量的值。 注意： 如果变量声明未指定值，其默认值为 undefined安上的
  • 同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。

例如：

var age = 10,
	name = 'abc',
	add = 'world';

数据类型

js的变量数据类型只有程序在运行过程中，根据等号右边的值才能确定。

js是动态语言，变量的数据类型可以变化。

1.数字型

NaN

全局属性 NaN 的值表示不是一个数字（Not-A-Number）。

NaN如果通过 == 、 != 、 === 、以及 !==与其他任何值比较都将不相等 – 包括与其他 NAN值进行比较。必须使用 Number.isNaN() 或 isNaN() 函数。

**isNaN（）和Number.isNaN（）之间的区别：**如果当前值是NaN，或者将其强制转换为数字后将是NaN，则前者将返回true。而后者仅当值当前为NaN时才为true：

2.字符串型String

String可以是引号中的任意文本，其语法为双引号或单引号。

JS可以用单引号嵌套双引号（或双引号嵌套单引号）

获取字符串长度

str.length()

字符串拼接（+）

字符串 + 任何类型 = 拼接之后的新字符串

3.布尔型

true or false

4.undefined 和 null

4.1 如果一个变量声明未赋值 就是undefined 未定义数据类型

undefined + “str” = undefinedstr

undefined + 1 = NaN

4.2 一个声明变量给null值，里面存的值为空

null + “str” = nullstr

null + 1 = 1

获取数据类型

typeof var

eg: console.log(typeof true); >输出> boolean

数据类型转换

1.转换为字符串

1.1 变量.toString() 返回一个表示该对象的字符串。

1.2 String(变量)

1.3 加号拼接字符串

2.转换为数字型

2.1 parseInt(string) string -> int eg: parseInt('78')

2.2 parseFloat(string) string -> float eg: parseFloat('7.8')

2.3 Number() string ->number

2.4 js隐式转换（ - * / ） 利用算数运算隐式转换为数值型

3.转换为布尔型

Boolean()

  • 代表空、否定的值会被转换为false ， 如 "、0、NaN、null、undefined

  • 其余值都会被转换为true

运算符

算术运算符

  • 浮点数不能直接拿来进行比较是否相等（例如 0.1 不能被二进制完整得表示）

函数

在JS中，如果实参的个数和形参的个数一致，则正常输出结果；

如果实参个数多于形参的个数，无视多出的实参。

如果实参个数小于形参的个数，未传值的形参是undefined，结果是NaN。

两种声明方式

1.命名函数

function fn(){
		……
}

2.匿名函数

var **fun()** = function(){
		……
}

fun();
  • fun是变量名，不是函数名，自己随便取

Arguments对象

你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引0处。例如，如果一个函数传递了三个参数，你可以以如下方式引用他们：

arguments[0]
arguments[1]
arguments[2]

参数也可以被设置：

arguments[1] = 'new value';

arguments对象不是一个 Array 。它类似于Array，但除了length属性和索引元素之外没有任何Array属性。例如，它没有 pop 方法。但是它可以被转换为一个真正的Array：

作用域

  • 在函数内部没有声明就直接赋值的变量，也是全局变量。

作用域链

预解析

预解析分为两种

1.变量预解析（变量提升）

把所有的变量声明提升到当前的作用域的最前面，但不提升赋值操作

2.函数预解析（函数提升）

把所有的函数声明提升到当前的作用域的最前面，但不调用

黑马js p142 案例

对象

创建对象三种方式

1.利用字面量创建对象

花括号{}里面包含属性和方法

var 对象名 = {		//注意等于号
	属性1:…… ,
	属性2:…… ,
}

2.利用 new Object() 创建对象

var 对象名 = new Object();
对象名.属性1 = ……;
对象名.属性2 = ……;

3.利用构造函数创建对象

function 构造函数名(){
	this.属性 = 值;
	this.方法 = function(){}
}

调用构造函数

new 构造函数名();
  • 构造函数名首字母要大写（规范）

例：

function Star(name, age, sex){
	this.name = name;
	this.age = age;
	this.sex = sex;
    this.sing = function(song){
        console.log(song)
    }
}
var xiaoming = new Star('小明',18,'男');
xiaoming.sing('菊花台');

调用对象两种方式

1.对象名.属性名

2.对象名[‘属性名’] （要加单引号）

new关键字

new在执行时会做四件事情：

1.在内存中创建一个空对象

2.让this指向这个新的对象

3.执行构造函数里面的代码，给这个新对象添加属性和方法

4.返回这个新对象（所以构造函数里面不需要return）

遍历对象属性 —— for in

for(var 变量名 in 对象名){
	console.log(变量名);			// 括号里写 变量名 得到的是 属性名
	console.log(对象名[变量名]); 	  // 括号里写 对象名[变量名] 得到的是 属性值  **注意[]不加引号**
}

变量名一半写 k 或者 key

内置对象

内置对象是指js语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）。js提供了多个内置对象：Math、Date、Array、String等。

Math对象

Math.PI

Math.sqrt()

Math.abs()

Math.floor()

Math.ceil()

Math.round()

Math.random()

Date（）日期对象

  • Date（）日期对象是一个构造函数，必须使用new创建对象
//不加参数时，输出当前时间
var date = new Date();
console.log(date);
//加参数，输出参数时间
new Date('2020-3-12');
new Date('2020/3/12');

getFullYear()

getHours()

getMonth()

getDay()

//格式化日期：以 a 年 b 月 c 日 星期 d 的格式输出
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day = date.getDay();
console.log('现在是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);

Date.now()

数组对象

检测是否为数组

1.变量 instanceof 类型（数组是Array）

2.Array.isArray(数组名)

在数组末尾添加一个或者多个数组元素

arr.push(element1, ..., elementN)

在数组开头添加一个或者多个数组元素

arr.unshift(element1, ..., elementN)

删除数组的第一个元素

arr.shift()

删除数组的最后一个元素

arr.pop()

翻转数组

arr.reverse()

数组排序（冒泡排序）

arr.sort([compareFunction])

返回数组索引号

arr.indexOf(searchElement[, fromIndex])

arr.indexOf(searchElement[,fromIndex])

数组转换为字符串

toString

arr.join([separator])

合并数组

concat()

数组删除/修改/插入

splice(索引号，删几个，插入什么元素)

  • 可以利用splice去重

分割字符串

split()

根据位置返回字符

str.charAt(index)

str[index]

截取字符串

str.substring(indexStart[, indexEnd])

举报

相关推荐

js基础知识

随笔

js基础知识04

javascript

JS基础知识（一）

javascript前端开发语言

js基础知识（对象）

javascript开发语言

js基础知识总结

javascript前端html

js基础知识03

其他数据库网络

JS基础知识总结

javascript原型模式开发语言

JS基础知识梳理01

javascript前端html

JS基础知识学习笔记全

golang数据结构

D3.js-基础知识

d3数据可视化svg赛贝尔曲线xmlJavaScript前端开发
0 条评论