JavaScript初级(ECMAScript)

其他 2020-03-29 15:41:32 阅读次数: 0

文章目录

1.初识js

  • js运行在客户端
  • js是脚本语言，由浏览器解释执行，不编译

2.浏览器的组成

  • 渲染引擎，即内核，如chrome现版本的blink、老版本的webkit
  • JS引擎，如chrome的V8

3.js的组成

  • 包括ECMAScript基础语法，DOM文档对象模型和BOM浏览器对象模型
  • DOM用于操作页面中的元素，BOM用于操作浏览器的状态
    在这里插入图片描述

4.js的书写位置

  • 和css一样，有行内、内嵌、外部三种方法
  • js中的引号为单引号
  • 行内式，一般以on开头
<input type="button" onclick="alert('Hello World!')">
  • 内嵌式，写在head中
<head>
	<script>
		alert('Hello World!');
	</script>
</head>
  • 外部式，设置script标签中的src属性
<script src="./index.js"></script>

5.js的注释

  • 有单行注释和多行注释
// 我是单行注释

/*
	我是
	多行注释
*/

6.js的输入输出功能

  • prompt()用户输入框
prompt('请输入你的内容');

在这里插入图片描述

  • alert()弹出警示框
alert('Hello!');

在这里插入图片描述

  • console.log()控制台输出
console.log('Hello!');

在这里插入图片描述

7.变量

  • 使用var声明变量
var age=18;
  • 利用变量存储prompt()获取的值
var myname = prompt('请输入你的名字');
alert('myname');
  • 变量使用的特殊情况
情况 效果
已声明，未赋值就使用 undefined
未声明，赋值后使用 正常
未声明，也未赋值就使用 报错
  • name在浏览器中有特殊含义，不要作为变量名
console.log(name);	// name未定义未赋值，直接使用，但不会报错

在这里插入图片描述

8.基本数据类型

  • js是弱类型语言，变量声明时不指定数据类型，根据使用情况确定
var x = 100;
x = 'Hello';
  • 基本数据类型的种类
数据类型 含义 默认值
Number 数字型 0
Boolen 布尔型 false
String 字符串型 ‘’
Undefined 变量声明后未赋值 undefined
Null 空值 null

9.数字型Number

  • 包括整型和浮点型
  • 八进制以0开头，十六进制以0x开头
var x = 010;
var y = 0x1f;
  • 最大值Number.MAX_VALUE，最小值Number.MIN_VALUE
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);

在这里插入图片描述

  • 三个特殊值：无穷大Infinity、无穷小-Infinity和非数字NaN
console.log(Number.MAX_VALUE*2);
console.log(-Number.MAX_VALUE*2);
console.log(100-'hello');

在这里插入图片描述

  • isNan()判断是否为非数字，Not a Number，结果是布尔类型
console.log(isNaN('hello'));

在这里插入图片描述

10.字符串型String

  • 可使用单引号和双引号，推荐使用单引号
var x = 'hello';
var y = "world";
  • 字符串型引号嵌套，外引号和内引号类型要不同，才能正常显示
console.log('我是一个"高富帅"程序员');

在这里插入图片描述

  • 转义字符
转义字符 效果
\n 换行
\b 空格
\t tab缩进
\\ 反斜杠\
\’ 单引号
\" 双引号
  • length获取字符串长度
var x = 'hello';
console.log(x.length);

在这里插入图片描述

  • +号拼接字符串，其他类型遇到字符串，自动转换为String
var x = 'world'
console.log('hello' + 100 + x);

在这里插入图片描述

11.布尔型Boolean，Undefined型和Null型

  • 布尔型的true可等效于1，false可等效于0
var flag = true;
console.log(flag + 1);

在这里插入图片描述

  • Undefined型和数字运算，结果是NaN
var x = undefined;
console.log(x + 1);

在这里插入图片描述

  • Null型和数字运算，结果是数字的值
var x = null;
console.log(x + 1);

在这里插入图片描述

12.typeof获取变量的数据类型

var a = 10;
var b = 'hello';
var c= true;
var d= undefined;
var e= null;
console.log(typeof a);
console.log(typeof b);
console.log(typeof c);
console.log(typeof d);
console.log(typeof e);

在这里插入图片描述

  • 注意null的数据类型是object，对象
  • 用typeof可知prompt获取的是字符串型
var a = prompt('请输入');
console.log(typeof a);

在这里插入图片描述

13.转换为字符串型

  • toString()方法
var x = 18;
var str = x.toString();
  • String()方法，强制转换
var x = 18;
var str = String(x);
  • 利用+号，拼接空字符串，隐式转换，比较常用
var x = 18;
var str = x + '';

14.转换为数字型

  • parseInt()方法，转换为整型，小数部分自动去除
var str = '18';
var x = parseInt(str);
  • parseFloat()方法，转换为浮点数
var str = '18.5';
var x = parseFloat（str）;
  • parseInt()和parseFloat()方法可以忽略字符串中数字后面的字符，比较常用
var str = '120px';
console.log(parseInt(str));

在这里插入图片描述

  • Number()方法，强制转换
var str = '18.5';
var x = Number（str）;
  • 利用-、*、/运算符，隐式转换
var str = '18.5';
var x = str - 0;
var y = str * 1;
var z = str / 1;

15.转换为布尔型

  • 通过Boolean()方法，代表零、空、否定的值转换成false，其余有内容的都是true
console.log(Boolean(0));
console.log(Boolean(''));
console.log(Boolean(NaN));
console.log(Boolean(null));
console.log(Boolean(undefined));
console.log('---------------------');
console.log(Boolean(123));
console.log(Boolean('hello'));

在这里插入图片描述

16.运算符

  • ==运算符比较数字型和字符型时，会自动类型转换，把字符型转换为数字型
console.log(18 == '18');

在这里插入图片描述

  • ===,全等运算符，要求数值和数据类型都相同
console.log(18 === '18');
console.log(18 !== '18');

在这里插入图片描述

  • 数字、字符串或特殊值也可参与&&运算、||运算，因为都能转换为布尔型
  • 表达式1&&表达式2，表达式1为真时返回表达式2，为假时返回表达式1，可理解为1真时往后运算1假时短路
console.log(123 && 456);
console.log(null && 789);
console.log(123 && 456 && null);

在这里插入图片描述

  • 表达式1||表达式2，表达式1为真时返回表达式1，为假时返回表达式2，可理解为1假时往后运算1真时短路
console.log(123 || 456);
console.log(null || 789);
console.log(null || '' || 456);

在这里插入图片描述

  • &&逻辑与运算的优先级比||逻辑或的高
console.log(true || true && false);	// 若先算true || true，结果是false

在这里插入图片描述

  • 运算符优先级一览
优先级 运算符
1 小括号()
2 一元运算符，包括!
3 算术运算符
4 关系运算符
5 逻辑运算符，是多元运算符中优先级最低的
6 赋值运算符
7 逗号运算符，如定义多个变量时的,

17.prompt自动类型转换

  • prompt获取的变量是字符串型，但进行数值运算时，会自动转换为数字型
var x = prompt('请输入');
if (x >= 20) {
	console.log('x大于等于20');
}

在这里插入图片描述

18.switch-case匹配时要求全等

var num = '3'
switch (num){
	case 3:
		console.log('匹配成功');
		break;
	default:
		console.log('匹配失败')
}

在这里插入图片描述

19.js数组

  • 可通过new关键字定义数组
var arr = new Array();
  • 可通过字面量定义数组，较为常用
var arr = [1,2,3];
  • 数组内数据类型不受限制，可不相同
var arr = [1,'hello',true];
  • 越界访问数组元素，输出undefined
var arr = [1,2,3];
console.log(arr[3]);

在这里插入图片描述

  • 直接输出数组名，会显示数组详细信息
var arr = [1,2,3];
console.log(arr);

在这里插入图片描述

  • 可通过修改length扩充数组，新增元素自动设置为undefined
var arr = [1,2,3];
arr.length = 5;
console.log(arr);
console.log(arr[3]);
console.log(arr[4]);

在这里插入图片描述

  • 可通过索引为数组新增元素，扩充数组，较为常用
var arr = [1,2,3];
arr[3] = 4;
arr[4] = 5;
console.log(arr);

在这里插入图片描述

  • 若为数组名直接赋值，会修改其数据类型，丢失原有数据
var arr = [1,2,3];
arr = 4;
console.log(arr);

在这里插入图片描述

  • 利用length自动增加的特点，arr[arr.length]指向扩充的第一个元素，复制数组
// 复制原数组大于等于10的元素
var arr = [2,0,6,1,77,0,52,0,25,7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
	if (arr[i] >= 10) {
		newArr[newArr.length] = arr[i];
	}
}
console.log(newArr);

在这里插入图片描述

20.冒泡排序

  • n个元素，需要排序n-1趟
  • 第i趟，需要比较n-i次
  • i可以从1开始，j必须从0开始，因为是数组的索引
var arr = [5, 4, 7, 8, 3, 2, 0, 9, 1, 6];
for (var i = 1; i < arr.length; i++) {
	for (var j = 0; j < arr.length - i; j++) {
		if (arr[j] > arr[j + 1]) {
			var temp = arr[j];
			arr[j] = arr[j + 1];
			arr[j + 1] = temp;
		}
	}
}
console.log(arr);

21.函数

  • 可通过function关键字定义函数
function sayHello() {
	console.log('hello');
}
  • 还可通过函数表达式定义函数，称为匿名函数
var fun = function() {
	console.log('我是函数表达式声明的函数');
}
fun();

var 变量名 = function() {}，此处fun不是函数名，只是变量名

  • 函数的形参不需要定义，直接使用
function getSum(num1, num2)
{

}
  • 形参个数和实参个数不匹配的情况
情况 效果
实参多于形参 取有效位形参
实参小于形参 未赋值形参为undefined，结果NaN 
function getSum(num1, num2) {
	console.log(num1 + num2);
}
getSum(1,2,3);
getSum(1);

在这里插入图片描述

  • return只能返回一个值，有多个值时返回最后一个
function test() {
	return 1,2,3;
}
console.log(test());

在这里插入图片描述

  • 所有函数都有返回值，无return显式指明时，返回undefined
function test() {

}
console.log(test());

在这里插入图片描述

22.arguments处理可变个数的参数

  • 所有函数都有arguments，它是一个内置对象
  • arguments是一个伪数组，存储了用户输入的所有实参
function fn() {
	console.log(arguments);	
}
fn(1,2,3);

在这里插入图片描述

  • 伪数组有3个特点
    • 具有数组的length属性
    • 可以按索引访问
    • 不具有数组特有的方法，如pop()、push()
  • 利用arguments求任意个数的最大值
function getMax() {
	var max = arguments[0];
	for (var i = 0; i < arguments.length; i++) {
		max = max < arguments[i] ? arguments[i] : max;
	}
	return max;
}
console.log(getMax(1,2,3));
console.log(getMax(1,2,3,4));

在这里插入图片描述

22.特殊的全局变量

  • 在函数内部，未使用var声明，就直接使用的变量，也属于全局变量
function fn() {
	num = 20;
}
fn();
console.log(num);

在这里插入图片描述

23.作用域链

  • 指内部函数使用变量时，出现重名情况，选择哪个变量的规则
  • 由内往外，就近原则
var num = 456;
function f1() {
	var num = 123;
	function f2() {
		console.log(num);
	}
	f2();	
}
f1();

在这里插入图片描述
在这里插入图片描述

24.js预解析

  • js代码在执行前，先进行预解析
  • 在当前作用域下，把var声明变量和function声明函数提前，再依次执行其余的js代码
  • 变量预解析（变量提升），把var声明提升到作用域最前，但不进行赋值
console.log(num);
var num = 10;

相当于

var num;
console.log(num);
num = 10;

在这里插入图片描述

  • 函数预解析（函数提升），把function声明提升到作用域最前，但不会调用函数
fn();
function fn() {
	console.log('hello');
}

相当于

function fn() {
	console.log('hello');
}
fn();

在这里插入图片描述

  • 函数表达式声明函数，进行的是变量提升，而不是函数提升，会出现非函数的错误提示
fn();
var fn = function() {
	console.log('hello');
}

相当于

var fn;
fn();
fn = function() {
	console.log('hello');
}

在这里插入图片描述

25.预解析相关题目

  • 由于预解析的存在，可能出现代码执行结果与预期不同，是因为代码中使用变量或函数的顺序，在它们的定义之前
  • 题目1
var num = 10;
fun();
function fun() {
	console.log(num);
	var num = 20;
}

相当于

var num;
function fun() {
	var num;
	console.log(num);
	num = 20;
}
num = 10;
fun();

在这里插入图片描述

  • 题目2
var num = 10;
function fn(){
	console.log(num);
	var num = 20;
	console.log(num);
} 
fn();

相当于

var num;
function fn() {
	var num;
	console.log(num);
	num = 20;
	console.log(num);
}
num = 10;
fn();

在这里插入图片描述

  • 题目3
var a = 18;
f1();
function f1() {
	var b = 9;
	console.log(a);
	console.log(b);
	var a = '123';
}

相当于

var a;
function f1() {
	var b;
	var a;
	b = 9;
	console.log(a);
	console.log(b);
	a = '123'; 
}
a = 18;
f1();

在这里插入图片描述

  • 题目4
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
	var a = b = c = 9;
	console.log(a);
	console.log(b);
	console.log(c);
}

注意var a = b = c = 9，后面的b和c没有用var定义，是全局变量，相当于

var a = 9;
b = 9;
c = 9

题目代码相当于

function f1() {
	var a;
	a = 9;
	console.log(a);
	console.log(b);
	console.log(c);
}
b = 9;
c = 9;
f1();
console.log(c);
console.log(b);
console.log(a);

在这里插入图片描述

26.创建对象

  • 利用字面量创建对象，属性用逗号隔开，方法是匿名函数，结尾有分号
var obj = {
	name : '小明',
	age : 18,
	sayHi : function() {
		console.log('hello');
	}
};
  • 利用new关键字创建空对象，创建完成后再追加属性和方法
var obj = new Object();
obj.name = '小明';
obj.age = 18;
obj.sayHi = function() {
	console.log('hello');
}
  • 利用构造函数创建对象,构造函数类似于Java中的类，首字母大写，通过new关键字调用构造函数
function Singer (name, age, sex) {
	this.name = name;
	this. age = age;
	this.sex = sex；
}
var liuDeHua = new Singer('刘德华', 55, '男');

27.访问对象

  • 通过点和[ ]都可以访问对象的属性，[ ]中的属性名要加引号
console.log(obj.name);
console.log(obj['name'])
  • 调用对象方法时，注意()不能漏
obj.sayHi();
  • 利用for…in循环，可以遍历对象的属性，注意k是属性名，obj[k]才是属性值，类似数组与其索引
for(k in obj) {
	console.log(k);
	console.log(obj[k]);
}

28.Math对象

  • Math对象不属于构造函数，不能通过实例化调用其属性和方法，其属性和方法类似Java的静态属性、静态方法，通过Math直接调用
  • 有如下常用属性和方法
属性、方法 作用
PI 圆周率
floor() 向下取整
ceil() 向上取整
round() 四舍五入
abs() 绝对值
max()、min() 任意个数的最大、最小值
random() [0,1)范围的随机浮点数
  • 注意round方法在负数时的取值，如Math.round(-3.5)为-3
  • 注意灵活扩充随机数的范围，如求两个数之间的随机整数，且取到两端的值，应该设置为
function getRandom(min, max) {
	return Math.floor(Math.random() * (max-min + 1)) + min;
	// 可理解成以min为起点，长度是max-min+1向下取整
	// 因为要取到大端，所以要+1
}

29.Date对象

  • 常用方法如下
方法 作用
Date() 构造函函数
getFullYear() 获取年份
getMonth() 获取月份，注意是0~11
getDate() 获取日
getDay() 获取星期，注意周日是0
getHours() 获取小时
getMinutes() 获取分
getSeconds() 获取秒
  • Date构造函数，无参数生成当前时间，有参数按参数生成
var date1 = new Date();
var date2 = new Date('2020-01-01 10:08:08');
console.log(date1);
console.log(date2);

在这里插入图片描述

30.获取时间戳

  • 通过valueOf()或getTime()方法
var date1 = new Date();
console.log(date1.valueOf());
console.log(date1.getTime());
  • 通过+new Date()
var dateStamp = + new Date();
console.log(dateStamp);
  • H5新增，Date.now()方法
var dateStamp = Date.now();
console.log(dateStamp);
  • 时间戳转换为天、时、分、秒的方法
day = parseInt(总秒数/60/60/24);
hour = parseInt(总秒数/60/60%24);
minute = parseInt(总秒数/60%60);
second = parseInt(总秒数%60);

30.Array对象

  • 判断变量是否为数组，可用instanceof和Array.isArray()方法
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));

在这里插入图片描述

  • 为数组添加一个或多个元素元素，push()方法在末尾添加，unshift()方法在头部添加，返回值为数组长度
var arr = [1, 2, 3];
console.log(arr.unshift(0));
console.log(arr.push(4));
console.log(arr);

在这里插入图片描述

  • pop()和shift()方法只能删除一个数组元素，pop在尾部shift在头部，返回值是被删除的元素
var arr = [0, 1, 2, 3, 4];
console.log(arr.shift());
console.log(arr.pop());
console.log(arr);

在这里插入图片描述

  • reverse()方法倒置数组
var arr = [1, 2, 3];
arr.reverse()；
console.log(arr);

在这里插入图片描述

  • sort()方法排序数组，需要为其添加排序规则的参数，否则只按Unicode编码顺序排序
var arr = [1, 11, 2, 22, 3];
arr.sort();
console.log(arr);

在这里插入图片描述
添加排序规则后

var arr = [1, 11, 2, 22, 3];
arr.sort(function(a,b) {
	return b - a; // b-a是降序
	// return a - b;// a-b是升序
});
console.log(arr);

在这里插入图片描述

  • indexOf()、lastIndexOf()方法查找给定元素的索引，查询不到返回-1，可利用其进行数组去重
var arr = ['c', 'a', 'b', 'a', 'c', 'd'];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
	if (newArr.indexOf(arr[i]) == -1) {
		newArr.push(arr[i]);
	}
}
console.log(newArr);

在这里插入图片描述

  • toString()、join(‘分隔符’)方法，可把数组转换为字符串
var arr = ['c', 'a', 'b', 'a', 'c', 'd'];
console.log(arr.toString());
console.log(arr.join('&'));

在这里插入图片描述

  • 拼接、截取数组
方法 效果
concat(otherArr) 连接另一个数组，返回新数组，不影响原数组
slice(begin, end) 按起始和终止索引截取数组，返回不包含终止索引的新数组，不影响原数组
splice(begin, length) 按起始索引和长度截取数组，改变原数组 
var arr = ['c', 'a', 'b', 'b', 'a'];
console.log(arr.concat(['d', 'e']));
console.log(arr.slice(2, 3));
console.log(arr.splice(1, 3));

在这里插入图片描述

31.基本包装类型

  • js把基本数据类型变成包装类型，以str变量为例，步骤如下
var temp = new String('hello');
str = temp;
temp = null;

32.String对象

  • 和Array一样，有indexOf()和lastIndexOf()方法,并且都可以在参数中添加查找的起始位置
  • 利用indexOf和查找位置，统计字符串abcoefoxyozzopp中o出现的次数
var str = 'abcoefoxyozzopp';
var count = 0;
var index = str.indexOf('o');
// 利用while循环，遍历直到返回-1
while (index != -1) {
	count ++;
	index = str.indexOf('o',index+1);
}
console.log(count);

在这里插入图片描述

  • 根据在字符串中的位置，返回字符，索引值也是从0开始
方法 作用
charAt() 返回字符
charCodeAt() 返回Ascii码
str[] 将字符串作为数组看待，H5新增
  • 与Array类似，也有拼接、截取字符串的方法
方法 作用
concat(otherStr) 拼接字符串，与+等效
slice(begin, end) 与Arry相同，end取不到
substr(begin, length) 与Array的splice相同
  • 其他方法
方法 作用
replace(‘被替换的字符串’, ‘替换后的字符串’) 替换字符
split(‘分隔符’) 分割带有特定格式的字符串，返回数组
toUpperCase()、toLowerCase() 转换大小写 
var str = 'a,b,c,d';
console.log(str.split(','));

在这里插入图片描述

32.基本数据类型与引用数据类型

  • 基本数据类型存储在栈中，直接存储其数值
    在这里插入图片描述
  • 传参时，只从栈中将其数值复制一份，不改变栈中原有的数据
function fn(a) {
	a++;
}
var x = 10;
fn(x);
console.log(x);

在这里插入图片描述

  • 引用数据类型首先在栈中存储一个地址，指向堆的一个空间，真正的数值存储在堆中
    在这里插入图片描述
  • 传参时，直接将栈中存储的地址传递过去，操作其在堆中的空间，因此会改变原有的数据
function Person(name) {
	this.name = name;
}

function fn(a) {
	a.name = '张学友';
}

var x = new Person('刘德华');
fn(x);
console.log(x.name);

在这里插入图片描述

Suikoigia
发布了115 篇原创文章 · 获赞 0 · 访问量 2562
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_35764106/article/details/104981147
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022