JavaScript基础一

一、ECMA Script和JavaScript

ECMA Script是一个标准,JavaScript是一种实现规则的版本。

 

二、JavaScript的导入方式

① 直接将js代码写到页面上的script标签中

② 把代码写到单独的JS文件中,然后通过script标签的src属性导入

<!--JS的导入-->
<script src="jsdome.js"></script>
<body>
<script>
    alert('haha')
</script>
</body>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert('haha')
    </script>
</head>

 

三、JavaScript的语言规范

JavaScript的语句要以分号为结束符;

注释:
// 单行注释
/*多行注释
多行注释
多行注释*/

 

四、JavaScript变量的声明

① JavaScript的变量名可以使用下划线_,数字,字母,$,组成,不能以数字开头

② 声明变量使用var 变量名 来声明

注意:

1.变量名是区分大小写

2.推荐使用驼峰式命名规则

3.保留字不能用做变量名

 

补充:

ES6新增了let命令,用于声明变量。其用法类似于var,但是所声明的变量只在let命令所在的代码块内有效。例如:for循环的计数器就很适合使用let命令。

ES6新增const用来声明常量。一旦声明,其值就不能改变。

 

 

五、JavaScript的数据类型

①.数值Number

不区分整型和浮点型,只有一种数字类型

NaN是数字类型,表示不是一个数字

// 字符串转换为整型
parseInt('123')     
123

// 字符串转换为浮点型
parseFloat('123.789');
123.789

// 字符串转换为整型,无法转换返回NaN,NaN是数字类型
parseInt('abc');
NaN

 

②.字符串String

// 字符串拼接+
var s1 = 'Good ';
var s2 = 'morning';
s1+s2
"Good morning"
// 字符串常用方法
var s2 = '   Hello   '      //定义字符串
s2.length;                  //字符串获取长度
11
s2.trim();                  //移除字符串两端空格,形成新的字符串
"Hello"
s2.trimLeft();              //移除字符串左端空格,形成新的字符串
"Hello   "
s2.trimRight();             //移除字符串右端空格,形成新的字符串
"   Hello"

//定义字符串
var s1 = 'When you think you’re not happy with ' +
    'your life, always remember that someone is happy simply ' +
    'because you exist.';
s1.charAt(10)               //获取第10个字符
"h"

var s2 = 'hello';
s2.concat(' boy');          //字符串拼接,形成新的字符串
"hello boy"

var s1 = 'Good morning'
s1.indexOf('o',5);          //获取字符在字符串的索引
6

s1.substring(-5,4);         //字符串切片,不支持负数,负数会变0
"Good"
s1.substring(0,-5);         //字符串切片,不支持负数,负数会变0,获取不到返回空字符串
""

s1.slice(0,-3);             //字符串切片,支持负数
"Good morn"

s1.toLowerCase();           //字符串所有字符变为小写,形成新的字符串
"good morning"
s1.toUpperCase();           //字符串所有字符变为大写,形成新的字符串
"GOOD MORNING"

s1.split(' ',1);            //字符串以空格分割,可加参数(返回结果的个数),返回的是数组
["Good"]

s1.split(' ',3);            //字符串以空格分割,可加参数(返回结果的个数),返回的是数组
["Good", "morning"]

补充:

ES6中引入了模板字符串。模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

// 普通字符串
`这是普通字符串!`
// 多行文本
`这是多行的
文本`
// 字符串中嵌入变量
var name = "xiaoming", time = "today";
`Hello ${name}, how are you ${time}?`

③.布尔值Boolean

True和False

""(空字符串)、0、null、undefined、NaN都是false

④.null

null表示值是空,可以手动指定

⑤.undefined

undefined表示当声明一个变量但未初始化时,变量的默认值是undefined

函数没有明确指定返回值,默认返回的就是undefined

⑥.对象Object

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...此外,JavaScript 允许自定义对象。

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

数组(Array)

数组对象的作用是:使用单独的变量名来存储一系列的值。类似于Python中的列表。

//数组常用方法:
var li = ['a','b','c','d','e','f']      // 定义数组
li.length;                              // 获取数组的长度
6
li.push('k');                           // 数组末尾追加元素
7
li                                      // 数组
(7) ["a", "b", "c", "d", "e", "f", "k"]0: "a"1: "b"2: "c"3: "d"4: "e"5: "f"6: "k"length: 7__proto__: Array(0)
li.pop();                               // 删除数组末尾的元素并返回
"k"
li
(6) ["a", "b", "c", "d", "e", "f"]
li.unshift('z');                        // 数组头部插入元素
7
li.shift();                             // 删除数组头部的元素并返回
"z"
li                                      // 数组
(6) ["a", "b", "c", "d", "e", "f"]

li.slice(2,5);                          // 数组的切片
(3) ["c", "d", "e"]
li.reverse();                           // 翻转数组,在数组的基础上改变
(6) ["f", "e", "d", "c", "b", "a"]

li.join('+');                           // 将数组的元素拼接成字符串,数组的元素必须字符串类型
"f+e+d+c+b+a"

li.sort();                              // 数组的排序,在数组的基础上改变
(6) ["a", "b", "c", "d", "e", "f"]

li.concat('z','x','c');                 // 数组的连接,类似列表的expend,形成新的数组,不改变原来数组
(9) ["a", "b", "c", "d", "e", "f", "z", "x", "c"]

li.splice(1,3,'z','x','c','v','n');     //删除元素,并向数组添加元素,参数(下标,删除的个数,插入的值),在原数组上
(3) ["b", "c", "d"]
li
(8) ["a", "z", "x", "c", "v", "n", "e", "f"]

关于sort()需要注意:

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
若 a 等于 b,则返回 0。
若 a 大于 b,则返回一个大于 0 的值。

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

自定义对象(类似于python中的字典)

var dic = {name:'xiaoming',age:20};

dic
{name: "xiaoming", age: 20}

六、类型查询

// 字符串的判断
typeof 'abc'
"string"
typeof 123.456;
"number"
typeof null;            // object类型
"object"
typeof undefined;       // undefined类型
"undefined"
typeof NaN              // number类型
"number"

七、运算符

① 算术运算符

+、-、*、/、%、++、--

② 比较运算符

>  、 <  、 <=  、  >=   、  !=   、  ==    、=== 、 !==

!= :判断两边的值是否不相等

!==:判断两边的值和类型是否不相等

1 != '1';                  //false
1 !== '1';                 //true

==:弱等于,判断两边的值是否相等

===:强等于,判断两边的值和类型是否相等

1 == '1';               //true
1 === '1';              //false

③ 逻辑运算符

&&  与

||      或

!       非

④ 赋值运算符

= 、 +=  、 -=  、*=  、 /=

原文地址:https://www.cnblogs.com/st-st/p/9778236.html