这篇文章主要是原生JavaScript基础,他是我们日常开发中80%用到语法总结;如果你只是一个初学者这80%足够你完成一个小而美的前端项目,如果你想学习更高级的语法,那就期待下一篇文章《原生JavaScript 的20%》。
1.0 数据类型
在编程过程中,数据类型是重要的概念。
为了能够操作变量,了解数据类型是很重要的
JavaScript 中有五种可包含值的数据类型:
字符串(string)
数字(number)
布尔(boolean)
对象(object)
函数(function)
有三种对象类型:
对象(Object)
日期(Date)
数组(Array)
同时有两种不能包含值的数据类型:
null
undefined
1.1 JavaScript数据类型包括:数值、字符串值、数组、对象
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; //对象
1.2 什么对象(object)
1.2.1 JS本身就是一门面向对象的语言,在JS的语法中我们需要具备万物皆对象的思维,有了这种思维模型我们才能面向对象开发(OOP思想)
1.2.2 对象分类 JS可以将对象分为“内部对象”、“宿主对象”和“自定义对象”三种。
- 内部对象
js中的内部对象包括: Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象,包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
其中Global和Math这两个对象又被称为“内置对象”,这两个对象在脚本程序初始化时被创建,不必实例化这两个对象。
- 宿主对象
宿主对象就是执行JS脚本的环境提供的对象。对于嵌入到网页中的JS来说,其宿主对象就是浏览器提供的对象,所以又称为浏览器对象,如IE、Firefox等浏览器提供的对象。
不同的浏览器提供的宿主对象可能不同,即使提供的对象相同,其实现方式也大相径庭!这会带来浏览器兼容问题,增加开发难度。 浏览器对象有很多,如Window和Documen,Element,form,image,等等。
- 自定义对象
顾名思义,就是开发人员自己定义的对象。JS允许使用自定义对象,使JS应用及功能得到扩充
2.0 函数 function()
2.1 函数的概念: 函数在程序中使我们封装的方法,是去执行我们的代码逻辑。
2.2函数的类型:
2.2.1字面量函数:
var foo = function(){
console.log('hello world');
}
2.2.2 匿名函数
function(){
console.log("hello 匿名函数")
}
2.2.3立即执行函数
(function() {
console.log("init...")
})();
等同于:
(函数体)()
//第一个括号写函数体,也就是你的代码逻辑
//第二个括号是调用你写的函数去执行
3.0 JavaScript 运算符
3.1 算数运算符
+ 加法
- 减法
* 乘法
/ 除法
% 系数
++ 递加
-- 递减
3.2 JavaScript 赋值运算符
运算符 例子 等同于
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
加法赋值运算符(+=)向变量添加一个值。
3.3 "+"不仅仅用于计算number还可以 string拼接
//数字计算
var a = 10 ;
var b = 20;
var c = a + b ; //30
//字符串拼接
var str1 = "hello";
var str2 = "world";
var str = str1 +str2;//hello world
4.0 数据类型检测 typeof
4.1 typeof 实例
typeof "Bill" // 返回 "string"
typeof 3.14 // 返回 "number"
typeof NaN // 返回 "number"
typeof false // 返回 "boolean"
typeof [1,2,3,4] // 返回 "object"
typeof {name:'Bill', age:62} // 返回 "object"
typeof new Date() // 返回 "object"
typeof function () {} // 返回 "function"
typeof myCar // 返回 "undefined" *
typeof null // 返回 "object"
5.0 parseInit("num",基数)
看实例
parseinit(1.8) //1
parseinit(08,10) //如果数字前有0则以8进制转化,这时就会用到基数控制进制了
6.0 浮点数计算
化零为整
我们常遇到非整数计算,浮点数计算正是JavaScript的一个缺陷,任何一门语言都有自己鸡肋糟粕的东西,这一个是我用一天时间看《JavaScript精粹》知道的。在金融类项目中,对于精确度要求非常严格。
例如:
0.1 + 0.2 !== 0.3;
//例如常用离岸金融项目常会用到汇率兑换等
//假设:1$ = 6.987¥
在计算过程中肯定会有误差我们不妨 * 1000倍
1000$ = 6987¥ 这样就没有误差
7.0 的数组操作
7.1数组元素的添加/删除
- shift() 移除第一个元素
- pop() 移除最后一个元素
- unshift() 在首部添加元素
- push() 在尾部添加元素
var arr = [1,2,3];
arr.shift(item)//[2,3]
arr.pop()//[1,2]
//************************************
arr.unshift(0)//[0,1,2,3]
arr.push(4)//[1,2,3,4]
7.2数组翻转:arr.reverse()
arr.reverse()//[3,2,1]
7.3数组排序:arr.sort()
var arr = [2,1,5,8];
arr.sort()//[1,2,5,8]
7.4数组截取
7.4.1 arr.slice(start ,end)
start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。
//原数组不发生改变
var arr = ['aa','bb','cc'];
arr.slice(1)//['bb','cc']
7.4.2 arr.splice(start,deletecount,item) 移除一个或多个元素,并用新的item替换;返回被截取的值,原数组发生改变。
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,1,"William")
document.write(arr)
//输出
George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin
8.0 Number操作
8.1 toFixed(保留小数点位数):
把number转化成十进制数形式的字符串
//toFixed()可保留位数范围(0~20)
3.1415926.toFixed(2)//3.14
3.1415926.toFixed(0)//3
8.2 toPrecision() //保留小数点位数范围(0~21)
8.3 tostring() //保留位数(2~36)