美文网首页
JavaScript-基础篇(一)基本概念及内置对象

JavaScript-基础篇(一)基本概念及内置对象

作者: greenteaObject | 来源:发表于2017-05-26 17:26 被阅读0次

基本概念

数据类型

基本数据类型: Undefined Null Boolean Number String
复杂数据类型: Object

typeof
var name = 'greentea';
console.log(typeof name)
console.log(typeof(name))  //两种都可以

Undefined

表示变量没有定义

Null

表示一个空对象指针,如果将来用于保存对象,最好将变量初始化为null
undefined是派生子null的,因此undefined == null 是true

Number

表示整数和浮点数

NaN

即非数值(Not a Number),是一个特殊的数值
1.任何涉及NaN的操作(例如NaN/10)都会返回NaN
2.NaN与任何值都不相等,包括NaN它本身

isNaN()

检测是否是非数值,返回true/false

var age = 16
var name = '16'
console.log(isNaN(age))  //false
console.log(isNaN(name))  //false  转化为number

isNaN()对接收的数值,先尝试转换为数值,再检测是否是非数值

数值转换

有三个函数可以把非数值转换为数值
Number parseInt() parseFloat()

var c = 'abc10'
id = Number(id)
var topval=parseInt('28px');
console.log(topval - 10);  //18
console.log(parseInt(c));  //NaN

parseInt(),parseFloat() 的变量必须以数字开头

String

用于表示0个或多个16位Unicode字符组成的字符序列,即字符串,由""或''表示

toString() String()

str.toString(),将str转换为字符串,返回str的一个副本,str可以是数值,布尔,对象,字符串.
在不知道是不是Null 或 Undefined的情况下,还可以使用String()函数.

var id= 999;
var idstr = id.toString()
console.log(typeof idstr)   //string
console.log(type String(idstr))   //string

Boolean

true/false
注意
1.除0意外的所有数字,转换为布尔都为true
2.除""(空字符串)之外的所有字符,转换为布尔都为true
3.null和undefined转换为布尔为false

var x = 1,y = 0
console.log(Boolean(x))  //true
console.log(Boolean(y))  //false

操作符

算数操作符

+ - * / %
运算操作会将字符串尝试转为数字
1.递增 a++ a--
区别:
++a先韩慧递增之后的a的值
a++先返回a的原值,再返回递增之后的值
2.递减同理

var num1 = 10,
    num2 = 5,
    num3 = ++num1 + num2;       //++num1 num1 = num1 + 1
    //另一种情况
    num3 = num1++ - num2;
console.log(num1);      //11    //11
console.log(num3);      //16    //5 它是先不加1的
赋值操作符

简单: =
复合: += -= *= /= %=

比较操作符

> < >= <= == === != !==
== 只比较值是否相等
=== 比较值的同时比较数据类型是否相等

null == undefined      //true
null === undefined      //false
三元操作符

条件? 执行代码1 : 执行代码2

逻辑操作符

&& || !

console.log(0 && 1)      //0
console.log(0 || 1)      //1

函数

//声明
function myFun(){
    alert('我是一个函数');
}
//调用
myFun();
arguments

在函数体内通过arguments对象来访问这个数组参数
1.arguments对象只是与数组类似,并不是Array的实例
2.[]语法访问它的每个元素
3.length属性确定传递参数的个数

function inner(){
        arguments[0] = 88;      //严格模式是不能修改的
    console.log(arguments.length);
    console.log(arguments[0])   //88
}
inner(10,5);

求任意一组数的平均值

function getAvg(){
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    console.log(sum)
}
getAvg(1,23,4,2345,63456);

内置对象

Array

创建数组

1.new Array()
var colors = new Array();
//() 
//1.预先知道数组要保存的项目数量
//2.向Array构造函数中传递数组应包含的项
2.[]
var cols = ['red','yellow','green'];

数组长度

var arr = [1,2,3,4];
console.log(arr.length);      //4

栈方法

1.push()

把它的参数顺序添加到array的尾部
返回值:把指定的值添加到数组后的新长度

var cols = ['red','yellow','green'];
var len = cols.push('blue','blank');
console.log(len);      //5

2.unshift()

把它的参数顺序添加到array的开头
返回值:把指定的值添加到数组后的新长度

var cols = ['red','yellow','green'];
cols.unshift('blue');
console.log(cols);      //["blue", "red", "yellow", "green"]

3.pop()

删除array的最后一个元素
返回值:被删除的那个元素

var n = cols.pop();
console.log(cols);      //["blue", "red", "yellow"]

4.shift()

删除array的第一个元素
返回值:被删除的那个元素

var m = cols.shift();
console.log(m)      //blue

join()

用于把数组中的所有元素放入一个字符串
返回值:字符串

reverse()

用于颠倒数组中元素的顺序
返回值:数组

//join
var nums = [2,4,5];
var str = nums.join();  //2,4,5
console.log(typeof str);    //string
var words = ['a','b','c'];
var wordstr = words.join("");
console.log(wordstr);   //abc
//reverse
nums.reverse();
console.log(nums);  //[5,4,2]

sort()

用于对数组的顺序进行排序
返回值:数组
1.即使数组中的每一项都是数值,sort()方法比较的也是字符串
2.sort()方法可以接收一个比较函数作为参数

var arr = [9,23,15,32,99];
//降序
console.log(arr.sort(function(a,b){ return b-a }));
//升序
console.log(arr.sort(function(a,b){ return a-b }));

concat()

用于连接两个或多个数组
返回值:数组

var arr1 = [1,2,3],
    arr2 = [4,5,6],
    arr3;
arr3 = arr1.concat(arr2,[7,8,9]);
console.log(arr3);  //[1, 2, 3, 4, 5, 6, 7, 8, 9]

slice()

从已有的数组中返回选定的元素
参数:
start(必须)规定从何处开始选取,如果是负数,从数组尾部开始算起
end(可选)规定从何处结束选取,是数组片段结束处的数组下标
1.没设定end,切分的数组包含从start到数组结束的所有元素
2.如slice()方法的参数中有一个负数,则用数组长度加上该数来确定相应的位置
3.start和end是索引值,截取的元素是start到end-1的元素
返回值:数组

var colors = ['red','green','blue','yellow','orange'];
var newColors = colors.slice(1)
console.log(newColors);     //["green", "blue", "yellow", "orange"]
console.log(colors.slice(1,2));     //["green"]
console.log(colors.slice(-2,4));    //-2+colors.length,4-1  ["yellow"]  

splice()

1.删除
arrayObject.splice(index,count)
删除从index处开始的0个或多个元素
返回值:含有被删处的元素的数组
count是要删除的项目数量,如果设置为0,则不会删除项目,如果不设置,则删除从index开始的所有值
2.插入
arrayObject.splice(index,0,item0,....,intemX)
3,替换
arrayObject.splice(index,count,item0,....,intemX)

var arr = [1,2,3,4,5,6,7,8,9];
//删除
var delArr = arr.splice(2,2);
console.log(arr);       //[1, 2, 5, 6, 7, 8, 9]
console.log(delArr);    //[3, 4]
//插入
var insertArr = arr.splice(3,0,'m','n');
console.log(arr);   //[1, 2, 3, "m", "n", 4, 5, 6, 7, 8, 9]
console.log(insertArr);     //[]
//替换
var replaceArr = arr.splice(1,2,'y','z');
console.log(arr);       //[1, "y", "z", 4, 5, 6, 7, 8, 9]
console.log(replaceArr);        //[2, 3]

indexOf()

arrayObject.indexOf(searchvalue,startIndex)
从数组的开头(位置0)开始向后查找
参数:
searchvalue:必须,要查找的项
startIndex:可选,起点位置的索引
返回值:
number,查找的项在数组中的位置,没有找到的情况下返回-1
lastIndexOf()
同理

var nums = [1,2,54,2,64,7,5,1];
var pos = nums.indexOf(2);
console.log(2);     //2

String

charAt()

stringObject.charAt(index)
返回stringObject中index位置的字符

charCodeAt()

stringObject.charCodeAt(index)
返回stringObject中index位置的字符编码

indexOf()

stringObject.indexOf('o')
从一个字符串中搜索给定的字符串,返回子字符串的位置
返回值:数值
说明:如果没有找到返回-1

var email = 'greentea@qq.com';
console.log(email.indexOf('@'));    //8

lastIndexOf()

同理

截取

slice()

stringObject.slice(start,end)
截取字符串
参数:
1.start(必须),需指定字符串的开始位置
2.end(可选),表示子字符串到哪里结束,end本身不在截取范围之内,省略时截取至字符串的结尾

var str = 'hello world';
//截取orl
console.log(str.slice(7,10));   //orl

substring()

语法和功能和slice()完全一样
区别:
1.当参数为负数时,自动将参数转换为0

console.log(str.substring(-7,5));   //0,5

substr()

stringObject.substr(start,len)
截取字符串
参数:
1.start(必须),需指定字符串的开始位置
2.len(可选),表示截取的字符的总数`,省略时截取至字符串的结尾
3.len为负数时,返回空字符串

console.log(str.substr(7,3));    //orl
//获取扩展名
var url = "http://baidu.com/index.txt";
function getFileFormat(url){
    //获取.在url中出现的位置
    var pos = url.lastIndexOf('.');
    console.log(pos);
    return url.substr(pos+1);
}
var formatName = getFileFormat(url);
console.log(formatName);

split()

stringObject.split(separator)
把一个字符串分割成字符串的数组
返回值:Array
separator:必须,分隔符

var str = 'welcome-to-beijing';
var strArray = str.split('-');
console.log(strArray);      //["welcome", "to", "beijing"]

replace()

stringObject.replace(regexp/substr,replacement)
在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串
返回值:String
regexp:必须,规定子字符串或要替换的模式的RegExp对象
replacement:必须,一个字符串值

var tel = '110,119,120';
var newTel = tel.replace(','," ");
console.log(newTel);      //110 119,120

toUpperCase()

stringObject.toUpperCase()
字符串转换为大写

toLowerCase()

stringObject.toLowerCase()
字符串转换为小写

Math

Math.max()

Math.max(num1,num2...)
求一组数的最大值
返回值:Number

Math.min()

同理

var min = Math.min(6,34,2,4,74,-9);
var max = Math.max(6,34,2,4,74,-9)
console.log(min);
console.log(max);

Math.ceil()

Math.ceil(num)
向上取整,返回大于num的最小整数
返回值:Number

console.log(Math.ceil(188.88));     //189

Math.floor()

Math.floor(num)
向下取整,返回小于num的最小整数
返回值:Number

console.log(Math.floor(188.88));        //188

Math.round()

Math.round(num)
四舍五入
返回值:Number

console.log(Math.round(188.48));        //188
console.log(Math.round(188.58));        //189

Math.abs()

Math.abs(num)
绝对值
返回值:Number

Math.random()

返回大于0小于1的随机数
说明:
求n到m之间的随机整数的公式

random = Math.floor(Math.random()*(m-n+1)+n)

Date

new Date()

创建一个日期时间对象
返回值:不传承的情况下,返回当前的日期时间对象

//创建一个日期时间对象
var today = new Date();
console.log(today);

获取年月日时分秒及星期的方法
1.getFullYear() :返回四位数的年份
2.getMonth():返回日期中的月份,返回值为0-11
3.getDate():返回月份中的天数
4.getDay():返回星期,返回值为0-6
5.getHours():返回小时
6.getMinutes():返回分
7.getSeconds():返回秒
8.getTime():返回日期的毫秒数

设置年月日时分秒及星期的方法
1.setFullYear() :设置四位数的年份
2.setMonth():设置日期中的月份,返回值为0-11
3.setDate():设置月份中的天数
4.setDay():设置星期,返回值为0-6
5.setHours():设置小时
6.setMinutes():设置分
7.setSeconds():设置秒
8.setTime():设置日期的毫秒数

相关文章

网友评论

      本文标题:JavaScript-基础篇(一)基本概念及内置对象

      本文链接:https://www.haomeiwen.com/subject/edexfxtx.html