前端三剑客之js基础

1、js简介

netscape网景公司的开发的js,IE模仿开发起名为javascript，网景命名为LiveScript。后来统一标准ECMAScript

Bridan Eich用十天开发出的语言。

• 基本语法：借鉴C语言和Java语言。
• 数据结构：借鉴Java语言，包括将值分成原始值和对象两大类。
• 函数的用法：借鉴Scheme语言和Awk语言，将函数当作第一等公民，并引入闭包。
• 原型继承模型：借鉴Self语言（Smalltalk的一种变种）。
• 正则表达式：借鉴Perl语言。
• 字符串和数组处理：借鉴Python语言。

2、js的引入

<script>
    console.log("嵌入脚本按照文档从前向后的顺序加载")
</script>
<script src="hello.js"></script>

3、js变量

//方式1:先声明，再赋值
var username;
username="yuan"

//方式2:声明并赋值
var username="yuan"

//方式3:一次声明多个变量，并且类型可以不同
var username="yuan", age=23, high=1.7;

//如果不用var，表示该变量是全局变量

4、注释

//单行注释

/*
多行注释
*/

5、语句分隔

换行和分号都表示语句分隔

6、数据类型

1）数字类型

var x=3.14
var y=10
console.log(x,typeof x);//3.14 'number'

console.log(y,typeof y);//10 'number'

2)字符串

//字符串创建有两种方式
var str1="字符串1";
var str2=new String("字符串2");

3)字符串操作

var str="hello world";
//字符传长度
console.log(str.length);//11

//把字符转换成大写
console.log(str.toUpperCase());//HELLO WORLD
//把字符转换成小写
console.log("HELLO".toLowerCase());//hello

//搜索字符在字符串的位置,字符串也有下标可以使用类似str[2]访问
console.log(str.indexOf("e"));//1

//正则匹配 match和python中使用的字符是一样的
var str = "我的电话是: 13312345678,你的电话: 13512345678";
var ret = str.match(/\d{11}/g); // 匹配,提取数据
console.log(ret);//['13312345678', '13512345678']

//正则替换 replace
var str = "我的电话是: 13512345678";
var ret = str.replace(/(\d{3})\d{4}(\d{4})/,"$1****$2"); // 正则 的 捕获模式  $1$2表示的正则中第一个和第二个小括号捕获的内容
console.log(ret);//我的电话是: 135****5678

//正则查找，找到返回下标，找不到返回-1
var str = "hello";
var ret = str.search(/l/);
console.log(ret);//2

//切片slice 可以是负数slice（开始下标，结束下标）
var str = "helloworld";
var ret = str.slice(3,6); // 开区间,不包含结束下标的内容low

//split 分割字符串
var str="上海-深圳-北京";
console.log(str.split("-"));//['上海', '深圳', '北京']

//join 合并数组
ll=['上海', '深圳', '北京']
console.log(ll.join("-"));//上海-深圳-北京

//trim() 去除两边空格

//substr(下标，数量)截取字符串
var str = "hello world";
var ret = str.substr(0,3);
console.log(ret); // hel

4)布尔值

在运算中，true=1,false=0

5)空值（undefined和null）

(1) 当声明的变量未初始化时，该变量的默认值是 undefined。

(2)s 当函数无明确返回值时，返回的也是值 undefined;

(3)如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

7、类型转换（强制类型转换和自动转换）

parseInt(100);//转换成整型
parseFloat(10.7);//转换成浮点型

var box3 = "3.14";   // 使用Number转换的数据里面必须是纯数字!!!!否则都会转换失败
// var box3 = "3.1.4";  // 转换失败!
console.log( Number(box3) );

//转换失败即为NAN,也是Number数据类型

//转换成字符串类型的两种方式
var box4 = 3.14;
var ret = box4.toString();
console.log(ret);

ret = String(box4);
console.log(ret);

//布尔类型转换
Boolean(1);//true

8、原始值和引用值

原始值存储在栈中，当把一个原始变量赋值给另一个变量时，相当于复制了一个值给新的变量（变量和值都在栈中）；

引用对象的变量在栈中，对象在堆中；把引用赋值到另一个变量的时候，是把对象的指针给了新变量，假如有一个改变，则都改变；

var key="name";
var key1=key;
key="age";
console.log(key);//age
console.log(key1);//name

// 对象类型
var arr1=[1,2];
arr2 = arr1;
arr1.push(3);
console.log(arr1)// [1,2,3]
console.log(arr2)// [1,2,3]

9、运算符

//求值运算符
+、-、*、/、 %求余、**求幂、++a、--b、a++、b--

//赋值运算符
=、+=、-=、*=、/=、%=、**=

//比较运算符
>、 >= 、<、 <=、 !=、==

！==//不全等，既要判断值，又要判断类型
===//全等于，既要判断值，又要判断类型

//逻辑运算符
&& 与  and.  //两边结果都为true,结果为true
|| 或  or.  //两边结果都为false,结果为false
!  非  not  //结果为false,结果为true;反之亦然

//短路
var a = false || 2;//2
var b = true && "hahah"//hahah

//三目运算符
a="sss"? "111":"222";
console.log(a);//111,true返回第一个，false返回第二个值

10、流程控制语句

//条件判断
if(判断条件){
  语句块。。
}else if(判断条件){
  语句块。。
}else{
  语句块。。
}

//分支语句
switch(条件){
  case 结果：
    代码块。。
    break；
  case 结果：
    代码块。。
    break；
  。。。
  default:
    代码块。。

}

//循环语句
while(条件){
   代码块。。
}

//for循环
for(var i=0;i<5;i++){
   执行的代码块。。。
}

//方法二
var arr = [111,222,333]
for (var i in arr){
    console.log(i,arr[i])
}

//break退出当前整个循环，continue退出当次循环

11、数组对象

1）数组的创建方式

var arr=["lan",23,'nan'];//方式一
var arr1=new Array("lan",23,"nv");//方式二
console.log(arr);//['lan', 23, 'nan']
console.log(arr1);//['lan', 23, 'nv']

2）数组的方法

var a=['a','b','c'];
console.log(a);//['a', 'b', 'c']

//push和pop，从后面追加数据或者删除数据
a.push("d");
console.log(a);//['a', 'b', 'c', 'd']
a.pop();
console.log(a);//['a', 'b', 'c']

//unshift和shift从前面添加或删除数据
var a=['a','b','c'];
a.unshift("0")
console.log(a);//['0', 'a', 'b', 'c']
a.shift();
console.log(a);//['a', 'b', 'c']

//进阶版删除和插入
var a=['a','b','c'];
a.splice(1,1);//从下标1开始删除，删除一个元素
console.log(a);//['a', 'c']

//插入
var a=['a','b','c'];
a.splice(1,0,["d","e"]);
console.log(a);//['a',['d','e'], 'b', 'c']
var a=['a','b','c'];
a.splice(1,0,'d','e');
console.log(a);//['a', 'd', 'e', 'b', 'c']

//切片
var a=['a','b','c'];
console.log(a.slice(1,2));//['b']. 从下标1开始切到下标2截止，不包括下标2

//拼接
var arr1 = [1,2,3];
var arr2 = [4,5,7];
var ret = arr1.concat(arr2);
console.log( ret );//[1, 2, 3, 4, 5, 7]

//排序，默认排序方式是从最左边值比价ascii码
var arr1 = [1,11,2,3];
arr1.sort();
console.log(arr1);//[1, 11, 2, 3]

arr1.sort(function(a,b){return a-b;});
console.log(arr1);//[1, 2, 3, 11]升序

arr1.sort(function(a,b){return b-a;});
console.log(arr1);//[11, 3, 2, 1] 降序


//split和join
var arr1 = [1,2,3];
str=arr1.join("->");
console.log(str);//1->2->3
arr=str.split("->");
console.log(arr1);//[1, 2, 3]

//find 返回符合条件的第一个值
var arr=[5,6,7,8];
var func=(num)=>{
   if(num%2==0){
        return num;
}
}
arr.find(func);//6,返回第一个符合条件的值

//filter返回所有符合条件的值
var arr = [4,6,5,7];
function func(num){  // 也可以使用匿名函数或者箭头函数
    if(num%2===0){
        return num;
    }
}
var ret = arr.filter(func);  // 所有的函数名都可以作为参数传递到另一个函数中被执行
console.log( ret );//[4, 6]

// (13) map() 对数组的每一个成员进行处理,返回处理后的每一个成员
var arr = [1,2,3,4,5];
var ret = arr.map((num)=>{
    return num**3;
});
console.log( ret  ); // [1, 8, 27, 64, 125]