当前位置:   article > 正文

Js之基础语法整理篇_、丶←′丶'j:∴一

、丶←′丶'j:∴一

一、数据类型

1.1 基本数据类型

1.1.1 Number型

  • Number型又叫数字型,默认为0
  • Number型常见的进制数:二进制、八进制、十六进制
var num1 = 010; //八进制数0~7,在数字面前加0,表示八进制数
var num2 = 0x9; //十六进制0~9 a~f 在数字面前0x,表示十六进制数
  • 1
  • 2
  • 数字型有范围,最大值(Number.MAX_VALUE),最小值(Number.MIN_VALUE)
  • 数字型三个特殊值:Infinity(无穷大)、-Infinity(无穷小)、NaN(非数字)
//isNaN()用于判断该数是否为数字 若是数字则返回false,若不是返回true
console.log(isNaN(12)); //返回false
console.log(isNaN('Hsu'));//返回true
  • 1
  • 2
  • 3

1.1.2 Boolean

  • Boolean型又叫布尔型,只有两个值:true、false,在加法运算时,true当作1,false当作0。

1.1.3 String型

  • String型又称字符串型,其语法为" " 或 ’ ’
  • 字符串转义符:
  • \n :换行符
  • \ :斜杠
  • ‘:单引号’
  • \t:tab缩进
  • \b:空格
  • 检测获取字符串长度的方式:str.length (空格也算一个字符)
  • 字符串的拼接方式:str1 + str2 + …
console.log('沙漠'+'骆驼'); //显示沙漠骆驼
console.log(12+12); //显示24
console.log('12'+12); //显示1212 字符串与任何其他类型相拼接,最终结果为字符串型
  • 1
  • 2
  • 3

1.1.4 Undefined、Null、数据类型转换

  • 如果一个变量声明未赋值,就是undefined型,undefined型与数字相加结果为NaN。
  • 如果一个变量赋值为NUll型,与数字相加结果为数字本身
  • 获取变量数据类型的方式:typeof 变量名
var num = 10;
console.log(typeof(num)); //输出为Number
//prompt取过来的值时字符串型的
var age = prompt('请输入您的年龄');
console.log(typeof(age)); //输出为string 
//在控制台中,显示的结果若为黑色就是string型,紫色为Number、蓝色为Boolean、浅灰色为undefined和null
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 转换为字符串型:toString()、String()、加号拼接字符串
var str = 变量名.toString();
console.log(String(变量名));
console.log(变量名 + '');
  • 1
  • 2
  • 3
  • 转换为数字型的方式:parseInt(string)\parseFloat(string)\Number()\通过运算转换(- * /)
console.log(parseInt(3.14));//显示为3 自动取整
console.log(parseInt(120px)); //自动去掉单位
  • 1
  • 2
  • 转换为布尔型:Boolean(),代表空/否定的值会转换为false,常见的有’ ’ 、0、NaN、null、undefined
  • 进制转换 parseInt(str,n) :将n进制数的字符串转换为10进制数
parseInt(str,2);
parseInt(str,8);
parseInt(str,16);
  • 1
  • 2
  • 3

1.2 复杂数据类型

二、标识符、运算符

2.1 标识符、关键字、保留字的概念

1.标识符:开发人员为变量、属性、函数、参数取得名字,不能是关键字或保留字。

2.关键字:JS本身已经使用了的字,不能当变量名的方法名。break、case、catch、continue等等。

3.保留字:预留的关键字,如boolean、byte、char、class、const等。

2.2 运算符

2.2.0 运算符的优先级

小括号>一元运算符(++ – !)>算术运算符>关系运算符>相等运算符>逻辑运算符>赋值运算符>逗号运算符

2.2.1 算术运算符

  • 用于执行两个变量或值得算术运算:加、减、乘、除、取余,在运算符左右要加两个空格,优先级为:先乘除后加减
  • 尽量避免浮点数的运算和浮点数的比较

2.2.2 递增/递减运算符

  • ++ 变量名:前置递增运算符,先执行加1再返回值
  • 变量名++:后置递增运算符,先执行返回值后执行加1
  • 递减运算符用法同递增运算符

2.2.3 关系运算符

  • 用于两个数据进行比较时所用的运算符,返回值为一个布尔值
  • 常见的关系运算符有:> 、<、 >=、 <=、 !=、 ===(全相等:比较对象的类型、值都相等)

2.2.4 逻辑运算符

  • &&:逻辑与
//逻辑与短路运算 表达式1&&表达式2 若1为真,则返回2;若1为假,则返回1
    console.log(123 && 456); //456 除了0之外的所有数字都为真
    console.log(0 && 456); //0
    console.log(0 && 1 + 2 && 456 * 56789); //0
    console.log('' && 1 + 2 && 456 * 56789); //''
    //如果有空的或者否定的为假 其余是真的 0 '' null undefined NaN
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • ||:逻辑或
//逻辑或短路运算 表达1||表达式2 若1为真,则返回1;若1为假,则返回2
    console.log(123 || 456); //123
    console.log(123 || 456 || 456 + 123); //123
    console.log(0 || 456 || 456 + 123); //456
  • 1
  • 2
  • 3
  • 4
  • !:逻辑非

2.2.4 赋值运算符

  • 概念:用来把数据赋值给变量的运算符 = 、+=、-=、*=、/=、%=

三、流程控制-分支

3.1 分支流程控制

3.1.1 if、else、else if

  • 语法格式如下:
//if else语法结构
    if(条件表达式){
        //执行语句1
    } else{
        //执行语句2
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 典型案例:判断用户输入是否为闰年
if(year % 4 == 0 && year % 100 != 0 || year % 400 == 0){
	return true
}else{
	return false
}
  • 1
  • 2
  • 3
  • 4
  • 5

3.1.2 三元表达式方式

  • 语法格式
//条件表达式 ? 表达式1 :表达式2
//执行思路:若条件表达式为true执行表达式1 否则执行表达式2
num > 5 ? '大于5' : '不大于5';
  • 1
  • 2
  • 3

3.1.3 switch语句

  • 针对特定值的选项执行不同的语句
  • 语法格式
switch(表达式){
        case value1:
            执行语句1;
            break;
        case value2:
            执行语句2;
            break;
        default:
            执行最后的语句;
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

四、循环结构

4.1 for循环

  • 语法格式
//语法结构
    for (初始化变量; 条件表达式; 操作表达式){
        //循环体
    }
  • 1
  • 2
  • 3
  • 4

4.2 while循环

  • 语法格式
//while 循环语法结构
    while(条件表达式){
        //循环体
    } //先判断后执行
  • 1
  • 2
  • 3
  • 4

4.3 do…while循环

<script>
    //语法结构
    do{
        //循环体
    }while(条件表达式) //先执行后判断
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

4.4 contiunue、break

  • Continue关键字用于立即跳出本次循环,继续下次循环
  • break关键字用于立即跳出整个循环

五、数组

5.1 数组的基本操作

  • 创建数组
  • 1.利用new创建
var arr = new Array(); //创建了一个空的数组
  • 1
  • 2.利用数组字面量创建数组(常用)
var arr = [];
  • 1
  • 数组初始化,数据用逗号分隔
var arr = [1, 2, 3, 4];
  • 1
  • 修改数组长度
arr.length = 5; //改成数组长度为5,且未定义元素为undefined
  • 1
  • 新增数组元素
  • 1.通过数组下标新增数组元素
  • 2.通过length将新的元素插入数组最后(常用,因为一般数组长度未知)
newArr[new.Arr.length] = arr [i];
  • 1
  • 遍历数组
  • 1.通过for循环遍历数组
  • 2
  • [ ]

5.2 数组排序之冒泡排序

  • 冒泡排序的概念:把一系列数据按照一定的顺序进行排列显示
  • 冒泡排序的算法思想:重复的走访要排序的数列,一次比较两个元素,如果顺序错误就交换至到走访完所有的数列为止
//外层for循环:一共需要的趟数 length-1
//里层for循环:每一趟需要交换的次数 length-次数+1
var arr = [5,4,3,2,1];
for(var i = 0; 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;
		}
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

六、函数、作用域

6.1 函数的基本概念和使用

  • 函数的概念:封装了一块能够被重复调用执行的代码块
  • 函数的使用:声明函数 + 调用函数
//声明函数
    function 函数名(){
        //函数体
    }
//调用函数
    函数名();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 函数的参数:形参/实参
  • 形参:在声明函数的小括号里的参数
  • 实参:在函数调用的小括号里的参数
  • 函数的返回值:return语句

6.2 arguments

  • arguments的使用:函数的一个内置对象,所有函数都内置了一个arguments对象,对象中存储了传递的所有实参
  • arguments是伪数组,具有数组的length属性,按照索引的方式进行存储,但是没有数组的一些方法

6.3 作用域

  • 概念:代码在某个范围内起的作用和效果,目的是提高程序的可靠性。
  • 有全局作用域和局部作用域两种,局部作用域采取就近原则
  • 预解析:JS解析器在运行js代码的时候分为两步:预解析和执行。js会把js里面的所有的var还有function提升到当前作作用域的最前面,然后再按照代码的书写顺序从上往下执行。预解析分为变量预解析和函数预解析
  • 变量预解析(变量提升):把所有的变量声明提升到当前作用域的最前面,不提升赋值操作。
  • 函数预解析(函数提升):把所有的函数声明提升到当前作用域的最前面,不提示调用函数。

七、对象和内置对象

7.1 对象的基本知识

  • 对象是一组无序的相关属性和方法的集合,是由属性和方法组成的。所有的事物都是对象,例如字符串、数值、数组、函数等。属性是事物的特征,方法是事物的行为。

  • 创建对象的三种方式:利用字面量创建对象、利用new Object创建对象、利用构造函数创建对象。

  • 1.利用对象字面量创建对象

var obj = {
    //对象的一些属性
	uname:'Hsu',
	//对象的方法
	sayHi:function(){
		console.log('Hi');
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 2.利用new Object创建对象
var obj = new Object();
obj.unmae = 'Xu';
obj.sayHi = function(){
	console.log("你好!");
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 3.利用构造函数创建对象
function 构造函数名(){
	this.属性 =;
	this.方法 = function(){}
}
new 构造函数名();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 变量对象:for … in 遍历对象
for(遍历 in 对象){};
  • 1

7.2 内置对象

7.2.1 数学对象Math.

  • Math对象不是一个构造函数,不需要new来调用
Math.PI圆周率
Math.max(a,b,c)输出a、b、c中的最大值
Math.min(a,b,c)输出a、b、c中的最小值
Math.abs()取绝对值
Math.ceil()向上取整
Math.floor()向下取整
Math.round()四舍五入
random()随机数

7.2.2 日期对象Date()

  • 只能通过调用date()构造函数来实例化日期对象,没有字面量
  • 日期对象的调用方式
//1.使用Date() 如果没有参数返回当前系统的当前时间
    var date = new Date();
	//常用写法
	var date2 = new Date('2020-4-26 8:8:8');
  • 1
  • 2
  • 3
  • 4
日期的格式化语法概念
date.getFullYear()返回当前日期的年
date.getMonth()返回当前的月份(0-11)
date.getDate()返回几号
date.getDay()返回周几,周日为0

7.2.3 数组对象

  • 常见的数组内置对象
语法格式概念
instanceof(arr)判断是否为数组
Array.isArray(arr)判断是否为数组
arr.push()将参数添加到arr数组中最后位
arr.unshift()在数组最前面添加元素
arr.pop()删除数组的最后一个元素
shift()删除数组的第一个元素
arr.reverse(数组名)翻转数组
arr.sort()数组排序 有bug
arr.indexOf(x)返回x的索引号,有多个x的时候返回第一个的索引号,若找不到元素,返回-1
arr.toString()数组转换为字符串
arr.join()用括号里的数分隔数组,且输出为字符串
  • 数组排序的完美写法
//升序排序
arr.sort(function(a, b){
	return a - b;
})
//降序排序
arr.sort(function(a, b){
	return b - a;
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 数组去重操作
function unique(arr){
	var newArr = [];
	for(var i = 0; i < arr.length; i++){
		if(newArr.indexOf(arr[i] === -1){
			newArr.push(arr[i]);
		}
	}
	return newArr;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/424062
推荐阅读
相关标签
  

闽ICP备14008679号