原生JavaScript 的80%

137 阅读5分钟

这篇文章主要是原生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)