javascript基础
ECMAScript(ES): 规定了JS的一些基础核心的支持(变量,数据类型,语法规范,操作语句等,)
DOM: document object mode 文档对象模型,里面提供了一些属性和方法,可以让我们操作页面中的元素.
BOM: browser object model 浏览器对象模型,里面提供了也许属性和方法,可以让我们操作浏览器.
变量和常量
- 变量:值是可以变的
- 常量:值是不可变的
定义变量的方法:
//var 变量名 = 值 ; (ES6中定义变量使用 let) var num = 12;
Var str = “xxxx”
变量其实只是一个无意义的名字,他所代表的意义都是其储存的那个值,
//任何一个具体的数据值都是常量,例如:5就是个常量.
//和变量类似,我们设置一个常量,给其储存一个值,但是这个值不能修改.(const num = 5)
JS中的命名规范
1.JS中严格区分大小写,
2.遵循国际命名规则,驼峰命名法,(第一个单词小写,其余的每一个有意义的首字母要大写.)
//命名使用英文单词,不要使用拼音
//不是所有单词都能简写,我们需要保证大家看到名字后知道所代表的意思
3.命名的时候可以使用”$ _ 数字 字母 但不能数字开头.
4.JS中有很多关键词和保留词都不能随便用来命名;
JS中的数据类型
javascript数据类型
在javascript中有5种不同的数据类型
string
number
boolean
object
function
三种对象类型
Object
Date
Array
两个不包含任何值的数据类型
null
undefined
javascript类型转换
number()转换为数字
string()转换为字符串
boolean()转换为布尔值
constructor属性
Constructor 属性返回所有JavaScript变量的构造函数.
“John”.constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:’John’, age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }
- 基本数据类型(值类型)
- Number:数字
- String:字符串
- Boolean:布尔
- Null:空对象指针
- Undefined:未定义
>-引用数据类型
- Object对象数据类型
- +{普通对象}
- +[数字]
- +/^S/正则
- +function函数数据类型
JS如何检测数据类型
- typeof:检测数据类型的运算符
使用typeof检测,返回的结果是一个字符串,字符串中包含的内容证明了值是属于什么类型
1,局限性
.typeof null 不是”null”而是object”:因为null虽然是单独的一个数据类型,但它的本意是空对象指针,浏览器使用typeof检测的时候会把它按照对象来检测.
2.使用typeof无法具体细分出到底是数组还是正则,因为返回的值都是”object”,
- instanceof:检测某个实例是否属于这个类
- constructor:获取当前实例的构造器
- Object.prototype.toString.call:获取当前实例的所属类信息.
布尔
Boolean()
把其他数据类型的值转换成布尔类型
只有’0, NaN,空字符串,null, undefined’只有这5个数据值会转换成布尔类型的false,其余的都会变为true.
- –!—
!=:不等于
叹号在JS中还有一个作用:’取反’,先把值转换成布尔类型,然后在取反.
- –!!—
在一个叹号的基础上再取反,相当于没有操作,但是却把其他类型的值转换成布尔类型了,和Boolean()是相同的效果.
字符串
在JS中用单引号和双引号抱起来的都是字符串
常用方法:
charAt charCodeAt
Substr substring slice
toUpperCase toLowerCase
indexOf lastIndexOf
Split
Replace
Match
number 数字
JS中除了数字外多增加了一个number类型的数据:NaN
- –NaN—
not a number:不是一个数,但是属于number类型.
NaN ==NaN: false,NaN和任何其他值都不相等
- -isNaN()–
用来检测当前这个值是否是有效数字,如果不是有效数字检测的结果是true,反之是有效数字则为fase,
Number([ ]) =>把引用数据类型转换成number,首先要把引用数据类型转换为字符串(toString).在把字符串转换为number即可 例如:[ ]->’ ‘ ‘ ‘->0
Number([12]) => [12]->’12’->12
Number([12,13,14]) =>[12,13,14]->”12,13,14”->NaN
- -parseInt( )–
也是把其他数据类型值转换成number,和Number在处理字符串的时候有所区别,
提取数字规则:从左到右依次查找有效数字字符,直到遇见非有效数字字符为止,把找到的转换为数字.
- -parsefloat( )–
在parseint的基础上可以识别小数点,
null和undefined
null:空,没有
undefined:未定义,没有
‘ ‘:空字符串,没有
0:也可以理解为没有
空字符串和null的区别
空字符串相对于null来说开辟了内存,消耗了那么一丢丢性能,
null和undefined的区别
null一般都是暂时没有,预期中以后可能会有,(可能以后也没有)
undefined:完全没在预料之内的,
undefined和null的区别
null和undefined的值相等,类型不同
typeof undefined //undefined
typeof null //object
null===undefined //false
null==undefined //true
对象数据类型object
每一个对象都是由零到多组属性名(key键):属性值(value)组成的,每一组键值对中间用逗号分隔,
属性:描述这个对象特点特征的,
获取某个属性名的属性值
Var obj = {name:”xxx”,age:’xxxx’}
Obj[‘name’]
//->如果操作的属性名不在对象中,获取的值为undefined,
//=>设置/修改,一个对象的属性名是惟一的不能重复,如果之前存在就是修改属性操作,反之不存在的为设置属性的操作,
Obj.xxx=’xxx’
Obj[‘xxx’] = ‘xxx’
//=>假删除:让其属性值为null,但属性还在对象中
Obj.xxx=null
//=>真删除:把整个属性从对象中移除
Delete obj.xxx;
基本数据类型和引用数据类型的区别
JS是运行在浏览器中的(内核引擎),浏览器会为JS提供可以运行的环境,全局作用域window(global)
Var a = 12;
Var b = a;
B = 13 ;//=>把a的值赋值给B;
Console.log(a)=>12;
基本数据类型是按值操作的:基本数据类型在赋值时候.是直接把值赋值给变量即可.
Var n = {name:'hello'};
Var m = n;
m.name = 'hi';
Console.log(n.name)=>'hi';
引用数据类型是按照空间地址(引用地址)来操作的:
1.先创建一个变量n;
Var n = {name:'hello'};
2.浏览器首先会开辟一个新的内存空间,目的是把对象中需要存储的内容(键值对)分别的存储在这个空间中,为了方便后期找到这个空间,浏览器为这个空间设定了一个地址(16进制的);
3.把空间的地址赋值给了变量(所以才叫做引用数据类型)
函数数据类型
函数数据类型也是按照引用地址来操作的
函数:具备一定功能的方法;
判断操作语句
switch case
switch case 应用于if,else中一个变量在不同值情况下的不同操作
案例:
Var num=5;
Switch(num%2){//先把取余操作进行运算,在拿运算结果和case比较
Case 0:
num++;
break;//如果不加break,不管后面条件是否成立,都会继续向下执行,直到遇到break为止,
Case 1:
bum--;
break;//最后一项可以不加break,不加也可以跳出判断,
小应用:可以把符合某几项值都去执行同一件事情,使用不加break实现,
Switch case 中的比较使用的是绝对比较’===’,
循环操作语句
for循环
For(设置循环初始值;设置循环执行条件;步长累加){
//循环体}
案例:
for(var i=0;i<10;i++){
Console.log(i);
Continue;//结束本轮循环,继续执行下一轮:循环体中continue后面的代码都不会执行,它会直接去执行步长累加,再继续执行下一轮循环,
Break;//结束整个循环;
}
//自定义属性
for (var I = 0; i<olist.length; i++){
Olist[i].myindex = I;
Olist[i].onclick = function(){
//this:当前点击的这个li
//this.myindex:当前点击这个li的myindex这个自定义属性的值
Change(this.myindex);//这里需要传递当前点击这个li的索引
}
//使用闭包实现
//方法1
for (var I = 0; i<olist.length; i++){
function(i){
olist[i].onclick = function (){
Change(i);
}
}(i);
}
//方法2
for (var I = 0; i<olist.length; i++){
olist[i].onclick = (function (i){
Return function (){
Change(i);
}
})(i);
}
//方法3
for (let I = 0; i<olist.length; i++){
Olist[i].onclick =function(){
Change(i);
}
}
常用方法函数:
//列表排序 函数 **sort()**
let arr=[12,5,6,3,7,45,8,9,32,4]
arr.sort((n1,n2)=>{
return n1-n2;
}
);
//映射函数 **map()**
let score = [13,56,77,38,99,85];
let result = score.map( item => item>=60? ' 及格' : '不及格');
//汇总函数 **reduce()**
let arr = [34,63,23,86,4532,122]
let result = arr.reduce(function(tmp,item,index){
if(index !=arr.length - 1){
return tmp+item; //数组的求和
}else{
return (tmp+item)/arr.length //求数组的平均值
}
}
//过滤器函数 **filter()**
//例1
let arr = [32,53,12,33,67,69,54,65,25]
let result = arr.filter(item =>{
if ( item % 3 ===0){//输出列表中可被3整除的数
return true;
}else{
return false;
}
})
//可简写为 let result = arr.filter( item => item%3===0);
//例2:
let arr = [
{ title:'男士衬衫', price:75 },
{ title:'女式包', price:23540 },
{ title:'男士包', price:150 },
{ title:'女士鞋', price:12342 }
];
let result = arr.filter( json => json.price>= 5000 );
本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。