Web ----- JavaScript 一语言基础(一)

一.JavaScript概述

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

核心（ECMAScript）
文档对象模型（DOM） Document object model (整合js，css，html)
浏览器对象模型（BOM） Broswer object model（整合js和浏览器）

简单地说，ECMAScript 描述了JavaScript语言本身的相关内容。

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

二.JavaScript的引入方式

　　Script标签内写代码

<script>
  // 在这里写你的JS代码
</script>

　　引入额外的JS文件

<script src="myscript.js"></script>

三 .JavaScript语言规范

　　注释

// 这是单行注释

/*
这是
多行注释
*/

　　结束符

JavaScript中的语句要以分号（;）为结束符。

四.JavaScript语言基础

　　1.var 声明变量 :

　　　　命名规则:不能以数字开头,可以用下划线,$,数字,字母

　　变量名区分大小写

var age = 18 ;
var sex = "男" ;

　　　　const 声明常量.一旦声明,值不可变

const PI = 3.1415 ;

PI   // 3.1415

PI = 3  //  报错 TypeError: "PI" is read-only

五.JavaScript数据类型

　　1.数字(Number)

　　　　JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 3.14 ;
var b = 3 ;
var c = 3e2 ;  // 300
var d = 3e-2 ;  // 0.03
// 还有一种NaN，表示不是一个数字（Not a Number

　　常用方法 :

// 字符串类型转 Number类型

parseInt('123') ; // 返回123
parseInt("abc") ; // 返回NaN  ,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseInt('1.11') ; // 返回1.11

　　2.字符串(String)

var s1 = 'hello' ;
var s2 = 'world' ;
var s = s1+s2 ;
console.log(s)

　　常用方法:

var s1 = 'hello' ;
var s2 = 'world';
var s = s1+s2 ;
console.log(s.length)

　　　　.trim() 移除空白

　　　　 .trimLeft() 移除左边的空白

　　　　.trimRight() 移除右边的空白

var a = ' Hello World ';
console.log(a.trim()) ;  //去除左右两边,不去中间
console.log(a.trimLeft()) ; //去除左边
console.log(a.trimRight()) ;  //去除右边

　　　　.charAt(n) 返回第N个字符

 var a = ' Hello World ';
 console.log(a.charAt(3));

　　　　.indexOf(substring, start) 子序列位置

var a = ' Hello World ';
console.log(a.indexOf('ll'));   //查看某个字符或字符组在字符串中出现的位置(索引)

　　　　.substring(from, to) 根据索引获取子序列

var a = ' Hello World ';
console.log(a.substring(5,6))

console.log(a.substring(5,3))

// 字符串中索引为五的元素,n,m开始到结束位置,顾头不顾尾 console.log(a.substring(5)) // 索引5开始,一直到最后 console.log(a.substring(5,8)) // 索引5-8

　　　　.slice(start, end) 切片.此方法比上面的.substring()更好用

　　　　　　可以负数倒着取,substring不可以

var a = ' Hello World ';
console.log(a.slice(3,-1));
console.log(a.slice(-5,-1));

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

string.slice(start, stop)和string.substring(start, stop)

　　　　.toLowerCase() 小写

　　　　.toUpperCase() 大写

var a = ' Hello World ';
console.log(a.toLowerCase());
console.log(a.toUpperCase());

　　　　.split() 切割,得到列表

 var a = ' Hello World ';
 console.log(a.split(' '));

//像python的格式化输出

var name = "q1mi", time = "today";
`Hello ${name}, how are you ${time}?`

补充

　　3.Boolean(布尔值)

　　　　区别于Python，true和false都是小写。

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

var a = true;
var b = false;

　　4. null 和 undefined

　　　　null :表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;

　　　　undefined : 声明未定义

var x;  // 此时x是undefined

　　null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

　　5.对象(Object)

　　JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许

　　　　自定义对象。

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

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

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

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

　　常用方法:

　　　　.length 　　　　　　数组大小(长度)

　　　　.slice(start, end)　　切片

　　　　.push(ele)　　　　　尾部追加元素

var lst = [11,'abc',22,'33',55];
lst.push(66);
console.log(lst);

　　　　.pop() 　　　　　获取尾部元素

var lst = [11,'abc',22,'33',55];     
console.log(lst.pop());

　　　　.unshift(ele) 　　　头部插入元素

　　　　.shift()　　　　　　头部移除元素

var lst = [11,'abc',22,'33',55];
lst.unshift(0);
console.log(lst);

lst.shift();
console.log(lst);

　　　　.reverse()　　　　　反转

var lst = [11,'abc',22,'33',55];
lst.reverse();
console.log(lst);

　　　　.join(seq)　　　　将数组元素连接成字符串

　　　　.concat(val, ...)　　连接数组把元素追加到后面

var lst = [11,'abc',22,'33',55];
console.log(lst.join("__"))

console.log(lst.concat('__',"aaa"));

　　　　.sort()　　　　排序

var num = [55,22,44,88,2,3];
console.log(num.sort());  //结果 [2, 22, 3, 44, 55, 88]
var s = ['e','w','a','p','l'];
console.log(s.sort());
// 按unicode编码顺序排位

 /*关于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)

注意

　　　　.splice()　　　　　　删除元素,并向数组添加新元素.

　　　　splice(index,howmany,item1,.....,itemX)

　　　　index (必须):从什么位置开始删 howmany(必须):删除多少 items(可选):要添加的元素

// 从哪里开始删除就从哪开始添加
var lst = [11,'abc',22,'33',55];
lst.splice(1,2,'ABC',22222,33333);
console.log(lst) // 结果:[11, "ABC", 22222, 33333, "33", 55]

　　　　.map()　　　　　　返回一个数组元素调用函数处理后的值的新数组

　　　　.forEach() 将数组的每个元素传递给回调函数

　　　　forEach(function(currentValue, index, arr), thisValue)

　　　　map(function(currentValue,index,arr), thisValue)

　　　　function(必须) :函数,数组中每个元素都会执行这个函数

　　　　　　currentValue (必须):当前元素的值

　　　　　　index (可选):当前索引 arr(可选) : 当前元素属于的数组对象

　　　　thisValue (可选): 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。
　　　　如果省略了 thisValue ，"this" 的值为 "undefined"

 var lst = [11,'abc',22,'33',55];
 console.log( lst);
 console.log(typeof"abc") ; // "string"
 console.log(typeof null) ; // "object"
 console.log(typeof true) ;  // "boolean"
 console.log(typeof 123) ; // "number"

typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。

六.运算符

　　1.算数运算符

+ - * / % ++ --

　　2.比较运算符

> ,  >=  ,  <   ,  <=  ,
!=   ,==   ,  ===   ,   !==

1 == “1” // true 
1 === "1" // false  //判断类型和值是否都相等

　　3.逻辑运算符

&& || !

1&&0   // 0
1 || 0  // 1
! 0  // true
! 1  // false

　　4.赋值运算符

= += -= *= /=

七.流程控制

1. if else

var a = 10;
if (a > 5){
  console.log("yes");
}
else {
  console.log("no");
}

2. if else if else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

3.switch

        var  c= 3 ;
        switch (c) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('都不是')
        }

switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。

4.for

for (var i=0;i<10;i++) {
  console.log(i);
}

5.while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

6.三元运算符

var a = 1;
var b = 2;
var c = a > b ? a : b

Web ----- JavaScript 一 语言基础(一)

一.JavaScript概述

二.JavaScript的引入方式

Script标签内写代码

三 .JavaScript语言规范

注释

四.JavaScript语言基础

1.var 声明变量 :

五.JavaScript数据类型

1.数字(Number)

2.字符串(String)

3.Boolean(布尔值)

4. null 和 undefined

5.对象(Object)

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

六.运算符

1.算数运算符

2.比较运算符

3.逻辑运算符

4.赋值运算符

七.流程控制

1. if else

2. if else if else

3.switch

4.for

5.while

6.三元运算符

Web ----- JavaScript 一语言基础(一)

　　Script标签内写代码

　　注释

　　1.var 声明变量 :

　　1.数字(Number)

　　2.字符串(String)

　　3.Boolean(布尔值)

　　4. null 和 undefined

　　5.对象(Object)

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

　　1.算数运算符

　　2.比较运算符

　　3.逻辑运算符

　　4.赋值运算符