孙希弘优秀作者
原创内容 来源:小居数码网 时间:2024-07-29 09:33:01 阅读() 收藏:44 分享:41 爆
导读:您正在阅读的是关于【数码知识】的问题,本文由科普作家协会,生活小能手,著名生活达人等整理监督编写。本文有7008个文字,大小约为26KB,预计阅读时间18分钟。
JS基础(ECMAScript)如何使用JS1. HTML标签内使用JS,要求写在onclick等事件属性或者href属性中。(不推荐使用)2. 页面中的script标签内可以直接写JS代码。3. script标签的src属性可以用来引入第三方js文件。(推荐使用)变量变量的概念 变量就是计算机内存中存储的数据的标识符,根据变量名可以调用到内存中的数据。变量的声明方式/*使用var的方式声明和赋值一个变量*/ var num=10; /*使用变量*/ console.log(num); /*使用let的方式声明和赋值一个变量*/ let age=20; /*使用变量*/ console.log(age); /*使用const的方式声明和赋值一个变量*/ const sex="男"; console.log(sex);变量声明方式的区别作用域不同:let和const为块作用域,var为函数作用域let、const变量在声明之前不能使用,var可以let和const变量不能重复声明,var可以const要求变量声明时必须赋值,后续不可更改,let和var声明时可以不赋值,后续可更改。变量命名规则变量名由英文大小写、数字、美元符号($)和下划线(_)组成。变量名首字符不能是数字。不能使用系统保留的关键字。可以使用中文变量名,但是不推荐。推荐使用驼峰命名法。数据类型六种数据类型number数字类型,包含整数和小数string字符串类型,使用双引号或者单引号都可以boolean布尔类型,只有true或者false两种取值null类型,变量主动赋值为null的数据类型,用于释放内存空间undefined未定义类型,变量只声明未赋值时的数据类型object类型,也叫做复杂数据类型,包罗万象。数组也属于object类型。获取变量类型 /*typeof关键字用来返回指定变量的数据类型*/ let age=18; console.log(typeof age);数据类型转换转换String类型使用toString()的方式使用字符串拼接的方式 /*toString方式转换字符串*/ let age=18; console.log(typeof age); //number age=age.toString(); console.log(typeof age); //string /*字符串拼接的方式*/ let num=20; console.log(typeof num); //number num=num+""; console.log(typeof num); //string转换Number类型parseInt()函数转换整数parseFloat()函数转换浮点数 /*parseInt的使用方式*/ /*小数转整数,直接向下取整*/ let num1=parseInt(12.3); console.log(num1); //12 /*字符串转整数,系统会自动把字符串中有效小数的整数部分保留*/ let num2=parseInt("12.3"); console.log(num2); //12 /*被转换的字符串不是以数字开头的则无法转换*/ let num3=parseInt("abc12"); console.log(num3); //NaN 表示not a number(NaN也属于number类型) /*0x开头表示十六进制数字,也可以被转换*/ let num4=parseInt("0xC"); console.log(num4); //12 /*parseFloat的使用方式*/ /*字符串转小数,系统会自动把字符串中有效的小数部分保留*/ let num5=parseFloat("12.3"); console.log(num5); //12.3 /*字符串转小数,系统只认第一个小数点*/ let num6=parseFloat("12.4.5"); console.log(num6); //12.4 /*被转换的字符串不是以数字开头则无法转换*/ let num7=parseFloat("abc12.4"); console.log(num7); //NaN操作符算数运算符 + - * / %一元运算符只有一个操作运算符的单位被称为一元运算符
1. HTML标签内使用JS,要求写在onclick等事件属性或者href属性中。(不推荐使用)2. 页面中的script标签内可以直接写JS代码。3. script标签的src属性可以用来引入第三方js文件。(推荐使用)
/*使用var的方式声明和赋值一个变量*/ var num=10; /*使用变量*/ console.log(num); /*使用let的方式声明和赋值一个变量*/ let age=20; /*使用变量*/ console.log(age); /*使用const的方式声明和赋值一个变量*/ const sex="男"; console.log(sex);
number数字类型,包含整数和小数string字符串类型,使用双引号或者单引号都可以boolean布尔类型,只有true或者false两种取值null类型,变量主动赋值为null的数据类型,用于释放内存空间undefined未定义类型,变量只声明未赋值时的数据类型object类型,也叫做复杂数据类型,包罗万象。数组也属于object类型。
/*typeof关键字用来返回指定变量的数据类型*/ let age=18; console.log(typeof age);
使用toString()的方式使用字符串拼接的方式
/*toString方式转换字符串*/ let age=18; console.log(typeof age); //number age=age.toString(); console.log(typeof age); //string /*字符串拼接的方式*/ let num=20; console.log(typeof num); //number num=num+""; console.log(typeof num); //string
parseInt()函数转换整数parseFloat()函数转换浮点数
/*parseInt的使用方式*/ /*小数转整数,直接向下取整*/ let num1=parseInt(12.3); console.log(num1); //12 /*字符串转整数,系统会自动把字符串中有效小数的整数部分保留*/ let num2=parseInt("12.3"); console.log(num2); //12 /*被转换的字符串不是以数字开头的则无法转换*/ let num3=parseInt("abc12"); console.log(num3); //NaN 表示not a number(NaN也属于number类型) /*0x开头表示十六进制数字,也可以被转换*/ let num4=parseInt("0xC"); console.log(num4); //12 /*parseFloat的使用方式*/ /*字符串转小数,系统会自动把字符串中有效的小数部分保留*/ let num5=parseFloat("12.3"); console.log(num5); //12.3 /*字符串转小数,系统只认第一个小数点*/ let num6=parseFloat("12.4.5"); console.log(num6); //12.4 /*被转换的字符串不是以数字开头则无法转换*/ let num7=parseFloat("abc12.4"); console.log(num7); //NaN
+ - * / %
使用时,++/--可以放在操作符的前面,也可以放在操作符的后面 ++/--在前表示先计算,后执行 ++/--在后表示先执行,后计算
代码演示
let num=5; num++; /*++的操作和输出的操作是分开的,这种情况下++在前和在后没有区别*/ console.log(num); //6 let num2=5; /*++操作和输出一起执行,此时++在后表示先执行输出的操作,再自动加一*/ console.log(num2++); //5 /*上方代码已经执行完毕,num+1的操作也自动执行过了,此时再次输出结果是6*/ console.log(num2); //6 let num3=5; console.log(num3++); //5 /*上方代码已经执行完毕,此时num的值是6,接着++num和输出一起执行,表示需要先计算,后输出,所以结果是7*/ console.log(++num3); //7
> < >= <= == === != !==
代码演示==和===的区别
/* * ==只进行值的比较 * ===要求值和类型都相等 * */ console.log(1=="1");//true console.log(1==true);//true console.log(1==="1");//false console.log(1===true);//false
function show(name){ //name如果不为null或者undefined则name赋值,否则赋值为张三 name = name || "张三"; console.log(name); } show(); show("李四");
/* 可用操作符如下 = += -= *= /= %= */ /*演示+=的用法*/ /*正常用法*/ let age=18; age=age+5; console.log(age); /*+=用法*/ let age2=18; age+=5; console.log(age);
let age=25; console.log(age>18?"成年人":"未成年");//成年人
1.while循环和do-while循环用于不确定次数的循环,for循环用于确定次数的循环 2.for循环能实现的功能,while和do-while一定能实现,反之不一定 3.while循环先判断条件,后执行内容,如果条件不成立则一次都不会执行 4.do-while先执行一次,再判断条件,不管条件是否成立,都至少执行一次
/*求1-100的和*/ let sum=0; for(let i=1;i<=100;i++){ sum+=i; } console.log(sum);
双层for循环:外部循环执行一次,内部循环执行全部。
/*打印九九乘法表*/ let str=""; for(let i=1;i<=9;i++){ for(let j=1;j<=i;j++){ str+=j+"*"+i+"="+i*j+"t"; } str+="n"; } console.log(str);
多个元素(可以是不同类型,但是推荐存放相同类型的值)按照一定的顺序放入一个集合,这个集合我们就称之为数组。 数组有长度和下标的概念。下标是从0开始叠加的整数。 长度和下标的关系:下标最大值=数组长度-1;
/*1.定义一个空数组*/ let arr=[]; /*2.定义数组并赋值*/ let arr2=[1,3,5,7,9]; /*3.使用Array对象初始化数组*/ let arr3=new Array(); /*4.使用Array对象初始化数组并赋值*/ let arr4=new Array(2,4,6,8,10);
console.log(arr2[0]); //下标0的值就是数组中第一个的值1 console.log(arr2[3]); //下标3的值就是数组中第四个的值7 console.log(arr2[7]); //下标7不存在,取到的结果是undefined
let arr=[1,3,5,7,9]; for(let i = 0;i < arr.length; i++){ console.log(arr[i]); }
let arr=[1,3,5,7,9]; let sum=0; for(let i = 0;i < arr.length; i++){ sum+=arr[i]; } console.log(sum);
/*追加数组内容*/ let arr=[1,3,5]; arr[arr.length]=7; //利用下标的方式来追加数组内容,不推荐使用 let arr2=[2,4,6]; arr2.push(8); //使用push()函数来追加数组内容,推荐使用 /*删除数组内容*/ arr2.slice(2,1);//表示从数组下标2开始删除1个的长度 console.log(arr2);//[2,4,8]
/*冒泡排序*/ let arr=[7,5,3,1,9,16,22,8]; console.log("原始数组:"+arr); for(let i=0;i<arr.length-1;i++){ for(let j=0;j<arr.length-i-1;j++){ if(arr[j]>arr[j+1]){ let temp=arr[j]; arr[j]=arr[j+1]; arr[j+1]=temp; } } } console.log("排序后数组:"+arr);
/*二分查找法:要求数组已经排序且无重复值*/ let arr=[1,3,5,7,8,9,16,22]; /*初始化结果下标*/ let index=-1; /*初始化最小下标值*/ let minIndex=0; /*初始化最大下标值*/ let maxIndex=arr.length-1; /*定义要查找的值*/ let num=16; /*循环查找*/ while (minIndex<=maxIndex){ /*获取中间下标*/ let midIndex=parseInt((maxIndex+minIndex)/2); /*判断中间值是否为寻找值*/ if(arr[midIndex]===num){ /*内容匹配则找到对应下标*/ index=midIndex; /*找到后终止循环*/ break; } /*中间值大于寻找值*/ if(arr[midIndex]>num){ maxIndex=midIndex-1; } /*中间值小于寻找值*/ if(arr[midIndex]<num){ minIndex=midIndex+1; } } console.log(index);
把一段相对独立的具有特定功能的代码封装起来,使其形成一个独立体,在其他位置可以反复调用。可以减少重复代码。
/*声明式函数*/ function show(){ //函数体 } /*匿名函数(表达式函数)*/ let show2=function (){ //函数体 } //调用函数:函数名(); show(); show2();
/*函数声明时,括号内可以指定参数列表,参数个数可以有多个,多个之间用逗号隔开*/ /*声明函数时的参数称为形参,可以理解为为这个函数声明的变量*/ function show(name,age,sex,...){ } /*调用时括号内的参数称为实参,表示给形参的赋值*/ show("zhangsan",18,"boy");
JS中所有函数其实都有返回值,如果没有显示的写return自己进行返回,那么JS默认会返回undefined
function sum(x,y){ return x+y; console.log(x); //该语句无效,return关键字下的代码都不会被执行 } /*有返回值的函数,调用时需要使用一个变量来接收*/ let num=sum(3,5); console.log(num); //8
/*一般用于匿名函数对自身的调用*/ (function (){ console.log("我是一个匿名函数,被自动调用"); })();
/*回调函数在js应用中非常常见,要牢牢掌握*/ function show(fn){ fn(); } /*函数作为参数使用的方式一*/ function myFn(){ console.log("我是传递的函数类型的参数"); } /*已经存在的命名函数作为参数传递时,只写方法名,不能带括号。因为带了括号就表示执行这个函数,执行函数就会得到函数的返回值,而函数名表示的就是函数本身的代码。去想象自调用函数*/ show(myFn); /*函数作为参数的使用方式二*/ show(function(){ console.log("我是一个匿名函数作为参数传递"); });
function show(){ return function(){ alert("我是函数中返回的函数"); } } /*调用1*/ show()(); /*调用2*/ let show2=show(); show2();
预解析过程:1. var声明的变量会把声明提高到当前作用域的最前面,赋值保留在原地不动。(JS不支持声明即赋值的用法)2. 函数会把声明提高到当前作用域的最前面,调用保留在原地不动。3. var的优先级高于function
/*书写代码*/ console.log(age); var age=28; /*预解析后的代码*/ /*上方代码在执行时的结构如下,所以结果是undefined*/ var age; console.log(age); age=28; /*书写代码*/ show(); function show() { console.log("预解析函数"); } /*预解析后的代码*/ function show() { console.log("预解析函数"); } show(); /*书写代码*/ /*var预解析时的优先级高于function*/ console.log(test); function test(){ return "test函数"; } var test="test变量"; /*预解析后的代码*/ var test; function test() { return "test函数"; } console.log(test); test="test变量"; /*------------函数内预解析情况------------*/ var num=10; fn(); function fn() { console.log(num); var num=20; } console.log(num); /*解析后代码如下*/ var num; function fn() { var num; console.log(num); num=20; } num=10; fn(); //undefined console.log(num); //10
万物皆对象 任何能够被行为和特征所描述的都称之为对象。
编程语言中的对应关系
let obj={ name:"张三", age:18, show:function(){ console.log(name+age); } }; console.log(obj.name);//调用属性 console.log(obj.age);//调用属性 obj.show();//调用方法
let obj=new Object(); obj.name="张三"; //给对象设置name属性的值,如果name属性不存在,则添加该属性,否则覆盖该属性的值。 obj.age=18; obj.show=function(){ console.log(name+age); } console.log(obj.name);//调用属性 console.log(obj.age);//调用属性 obj.show();//调用方法
function createObj(name,age){ /*购买原材料*/ let obj=new Object(); /*加工原材料*/ obj.name=name; obj.age=age; obj.show=function(){ console.log(name+age); } /*销售产品*/ return obj; } let obj1=createObj("张三",18); console.log(obj1.name);//调用属性 console.log(obj1.age);//调用属性 obj1.show();//调用方法 let obj2=createObj("李四",20); console.log(obj2.name);//调用属性 console.log(obj2.age);//调用属性 obj2.show();//调用方法
function Person(name,age){ this.name=name; this.age=age; this.show=function(){ console.log(this.name+this.age); } } let person1=new Person("张三",18); console.log(person1.name);//调用属性 console.log(person1.age);//调用属性 person1.show();//调用方法 let person2=new Person("李四",20); console.log(person2.name);//调用属性 console.log(person2.age);//调用属性 person2.show();//调用方法
let obj={ name:"张三", age:18, "my-sex":"男" }; console.log(obj.name); //普通属性名 console.log(obj["my-sex"]); //不符合命名规范的属性名 let nian="age"; console.log(obj[nian]); //变量表示的属性名
new关键在调用构造函数时使用,目的是初始化对象。
new关键字会自动执行以下内容
js中this关键字表示某个对象的引用。(指向某个对象/代表某个对象)
this的几个特点如下
let obj={ name:"张三", age:18, sex:"男" }; /*for-in循环中,key会自动遍历得到对象的所有属性名*/ for(let key in obj){ console.log("属性名:"+key+",属性值:"+obj[key]); } /*删除sex属性*/ delete obj.sex; /*再次遍历结果中不会再有sex属性*/ for(let key in obj){ console.log("属性名:"+key+",属性值:"+obj[key]); }
console.log("π的值:"+Math.PI); console.log("3.14的绝对值:"+Math.abs(3.14)); console.log("-3.14的绝对值:"+Math.abs(-3.14)); console.log("3和5的最大值:"+Math.max(3,5)); console.log("3,5,8,2,6的最大值:"+Math.max(3,5,8,2,6)); console.log("3和5的最小值:"+Math.min(3,5)); console.log("3,5,8,2,6的最小值:"+Math.min(3,5,8,2,6)); console.log("3的5次方:"+Math.pow(3,5)); console.log("3.00001向上取整:"+Math.ceil(3.00001)); console.log("3.99999向下取整:"+Math.floor(3.99999)); console.log("3.4四舍五入:"+Math.round(3.4)); console.log("3.5四舍五入:"+Math.round(3.5)); /*生成0-1之间的随机数,包含0不包含1*/ console.log(Math.random()); /*指定范围的随机数*/ let r=Math.floor(Math.random*(max-min)+1)+min; console.log(r);
//1.获取当前日期对象 let d=new Date(); console.log("本地化时间格式:"+d.toLocaleString()); console.log("获取时间戳:"+d.getTime()); /*获取四位数年份*/ let year=d.getFullYear(); console.log(year); /*获取月份,范围是0-11*/ let month=d.getMonth()+1; console.log(month); /*获取日期*/ let date=d.getDate(); console.log(date); /*获取星期,范围是0-6,周日是0*/ let day=d.getDay(); console.log(day); /*获取小时,范围0-23*/ let hours=d.getHours(); console.log(hours); /*获取分钟*/ let minutes=d.getMinutes(); console.log(minutes); /*获取秒*/ let seconds=d.getSeconds(); console.log(seconds); /*自定义格式日期*/ let dateTime=year+"-"+formatterNumber(month)+"-"+formatterNumber(date)+" "+formatterNumber(hours)+":"+formatterNumber(minutes)+":"+formatterNumber(seconds); console.log(dateTime); function formatterNumber(number){ return number<10?"0"+number:number; } /*构造函数初始化日期对象:给日期格式的字符串*/ let d2=new Date("2018-10-21"); console.log(d2.toLocaleString()); /*根据时间戳初始化日期对象*/ let d3=new Date(1616378558725); console.log(d3.toLocaleString()); /*根据给定的参数决定日期对象*/ let d4=new Date(2008,7,8,20,8,8); console.log(d4.toLocaleString()) /*设置年月日时不关心当前状态,自动叠加值进行换月或者换年份的操作*/ // d.setMonth(12);/*设置月份计算范围0-11,设置12年份自动+1*/ // d.setDate(28); d.setDate(d.getDate()+7);
let str="my name is Kakarot"; console.log(str); console.log("字符串长度为:"+str.length); console.log("获取字符串中下标为3的值(ES6的方式):"+str[3]); console.log("获取字符串中下标为3的值(ES5的方式):"+str.charAt(3)); console.log("获取字符a在字符串中首次出现的位置:"+str.indexOf("a")); console.log("获取字符a在字符串中最后一次出现的位置:"+str.lastIndexOf("a")); console.log("字符串内容全部转换为大写:"+str.toUpperCase()); console.log("字符串内容全部转换为小写:"+str.toLowerCase()); console.log("把字符串abc拼接到str后面:"+str.concat("abc"));/*concat和加号没有区别*/ console.log("把字符串abc、字符串qwer拼到str后面:"+str.concat("abc","qwer")); /*js中表示范围都是含头不含尾*/ /* substring截取的内容长度是后面下标-前面下标的值 */ console.log("截取字符串中下标为5-9的内容:"+str.slice(5,9)); console.log("截取字符串中下标从5-9的内容:"+str.substring(5,9)); /*substr截取的字符长度固定为第二个参数的值*/ console.log("从下标5开始截取6个字符的长度:"+str.substr(5,6)); console.log("把字符串中所有的小写字母a替换为大写字母A:"+str.replaceAll("a","A")); console.log("把字符串中第一个的小写字母a替换为大写字母A:"+str.replace("a","A")); /*根据给定的规则拆分字符串*/ let ss=str.split(" "); console.log(ss); let name=" abc def "; console.log("name的值是:"+name+",长度是:"+name.length); /*trim函数清楚字符串两端的空白*/ let name2=name.trim(); console.log("name2的值是:"+name2+",长度是:"+name2.length);
/*简单数组排序*/ let arr=[9,6,5,2,8,4,3]; console.log("原始数组:"+arr); arr.sort(function (n1,n2) { /*sort函数的返回值三种情况: n1表示n2后面的值 * 1.正数:表示后面的数字大于前面的数字,不需要换位 * 2.0:表示两个相邻的数字相等,不需要换位 * 3.负数:表示后面的数字小于前面的数字,需要换位 * */ return n1-n2; }); console.log("排序后数组:"+arr); //[2,3,4,5,6,8,9] /*复杂数组排序*/ let stuArr = [ {name: "张三",age: 25,score: 40}, {name: "李四",age: 29,score: 65}, {name: "张小花",age: 25,score: 66}, {name: "王二狗",age: 22,score: 99} ]; /*原始数组*/ console.log(stuArr); /*排序规则:按照年龄升序排序,年龄如果相同则按照成绩降序排序*/ stuArr.sort(function (s1,s2) { /*计算年龄差*/ let age=s1.age-s2.age; /*年龄相等需要再次匹配成绩*/ if(age===0){ return s2.score-s1.score; } return age; }); /*排序后数组*/ console.log(stuArr);
/*检验数组中是否存在偶数*/ let arr=[1,3,5,7,9,10]; /*只要有一个符合条件的结果就为true*/ let bool=arr.some(function (item,index,array){ return item%2===0; }); console.log(bool); //true /*必须全部符合条件结果才为true */ let bool2=arr.every(function (item){ return item%2!=0; }); console.log(bool2); //false
let arr=[1,3,5,7,9,,13]; arr.length=10; /*for循环方式遍历数组*/ for(let i=0;i<arr.length;i++){ console.log(arr[i]); } /*for in 循环遍历数组(对于未定义内容不会进行输出)*/ for(let i in arr){ console.log(arr[i]); } /*forEach循环遍历数组: 1.对于未定义内容不会进行输出 2.continue和break对其无效 */ arr.forEach(function (item,index,array){ console.log(item); });
/*筛选出数组中所有的偶数组成新数组*/ let arr=[1,2,3,4,5,6,7,8,9,10]; /* * filter的回调函数中返回true则保留该数据到新数组中 */ let arr2=arr.filter(function (item,index,array){ return item%2==0; }); console.log(arr2);
function Student(name,age,sex){ this.name=name; this.age=age; this.sex=sex; } let stuArr=[new Student("张三丰",20,"男"), new Student("张小花",22,"女"), new Student("王铁锤",15,"男"), new Student("刘晓涵",16,"女"), new Student("赵大莲",29,"女") ]; console.log(stuArr); let stuArr2=stuArr.map(function (item){ return { "姓名":item.name, "性别":item.sex, "年龄":item.age }; }); console.log(stuArr2);
let arr=[1,3,5,7,9]; /*末尾追加*/ arr.push(11); //[1,3,5,7,9,11] /*末尾删除*/ arr.pop(); //[1,3,5,7,9] /*前置添加*/ arr.unshift(11); //[11,1,3,5,7,9] /*前置删除*/ arr.shift(); //[1,3,5,7,9] /*指定删除:splice(index,length),表示从下标index开始删除length个*/ arr.splice(1,2); //[1,7,9]
let arr=[1,3,5,7,9]; //方案一(推荐使用) arr=[]; //方案二 arr.length=0; //方案三 arr.splice(0,arr.length);
上面就是小居数码小编今天给大家介绍的关于(js基础知识点总结)的全部内容,希望可以帮助到你,想了解更多关于数码知识的问题,欢迎关注我们,并收藏,转发,分享。
94%的朋友还想知道的:
(363)个朋友认为回复得到帮助。
部分文章信息来源于以及网友投稿,转载请说明出处。
本文标题:js基础学完了感觉很没学一样(js基础知识点总结):http://sjzlt.cn/shuma/152492.html