js 系列(1) 基本语法 逻辑 函数

Posted on Posted in js

基本

1. alert 警示框

alert("abc");

2. prompt 对话框

prompt("对话框","内容"); 
prompt("输入"); // 第二个参数可以不写

3. console.log 控制台输出

console.log("控制台");

4. 特殊字符串

  • \n 换行
  • \t Tab制表
  • ' 单引号
  • \” 双引号
  • \ 反斜杠

5. 变量

var abc; // 定义变量
abc = 12;
console.log(abc);

变量声明提升:先引用变量,后定义,不会报错

console.log(a); // 输出undefined,但不会报红错
var a = 12;
// 相当于
var a;
console.log(a);
a = 12;

6. 检查数据类型 typeof

var a = 9;
console.log(typeof a); // typeof作为一个关键字,可以不写小括号,后面跟一个空格,再写检测的数据,也可以进行检测。
console.log(typeof(a));

7. 字符串数字互转

console.log(1+2);
console.log(1+"2");
console.log(1+""); // 数字转字符串,加一个空的字符串

console.log(parseInt(123.82)); // 对数字取整,去掉小数部分

逻辑

三元运算

var a = 7 > 8 ? 1 : 0;
console.log(a)

switch

var xingzuo = "双子座";
switch(xingzuo){
    case "白羊座":
        alert("会有旧朋友约见面,还有一两场的应酬,相对是比较有口福的一天,但是要注意别饮食过量,引起肠胃不适,另外还需要花费一笔钱。爱情不太稳定,会有点的小状况,部...");
        break;
    case "金牛座":
        alert("今天运势佳,生活无忧无虑,爱情欢乐浪漫,时刻能感受到激情的乐趣,单身者寻寻觅觅,真爱可能就在身边。另一半会是你工作上的好帮手,能为你解决许多问题。");
        break;
    case "双子座":
        alert("今日头脑清醒,思路也变得清晰许多,时间比较宽裕,可以多看看书,多补充一些额外的专业知识,对以后的发展会有帮助。对投资理财有点兴趣,领悟能力不错");
        break;
    default:
        alert("不好意思,查不到了");
        break;
}

for

for(var i = 1; i<100; i++){
    console.log(i);
}

do while

在第一次测试条件之前,结构体会提前执行一次。

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

while

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

break

//碰到5的倍数,就停止循环
for(var i = 1 ; i < 40 ; i++){
    console.log(i);
    if(i % 5 == 0){
        break;
    }
}
// 给外层循环加一个标签,标签可以代表外层循环,在break后面加这个标签,就会终止标签对应的这一层循环
waiceng : for(var i = 1 ; i <= 4 ; i++){
    for(var j = 1 ; j <= 4 ; j++){
        console.log(i,j);
        if(j == 2){
            break waiceng;
        }
    }
}

continue

终止当前这一次的循环,直接进入下一次循环。

for(var i = 1 ; i <= 10 ; i++){
    //如果你不能被3整除,直接跳过看下一个可能性
    if(i % 3 != 0){
        continue;
    }
    console.log(i);
}
// 控制外层循环:给外层循环加一个标签,将标签名写在continue后面,就可以控制了
waiceng:for(var i = 1 ; i < 4; i++){
    for(var j = 1 ; j < 4 ; j++){
        if(j == 2){
            //这不是我要的,继续下一次循环
            continue waiceng;
        }
        console.log(i,j);
    }
}

函数

递归

//输出第几项斐波那契数列的值
function fib(a){
    if(a == 1 || a == 2){
        return 1;
    }else{
        return fib(a-1) + fib(a-2);
    }
}
console.log(fib(9));

匿名函数

匿名函数:函数没有名字。也叫拉姆达函数

//定义:将一个函数赋值给变量
//这种定义方式最后要加分号,相当于一个普通的语句给变量赋值。
var fun = function(){
    console.log(1);
};
// 调用使用变量加小括号
//因为变量内部的值是一个函数,数据类型是函数的类型,函数能加小括号执行。
fun();

作用域

全局与局部

var b = 2;
function fun(){
    var a = 1;
    console.log(a);
    console.log(b);
}
fun();

作用域链

当遇见一个变量时,JS引擎会从其所在的作用域依次向外层查找,查找会在找到第一个匹配的标识符的时候停止。在多层嵌套的作用域中可以定义同名的标识符,发生“遮蔽效应”。

var a = 1;
function outer(){
    var a = 2;
    function inner(){
        //var a = 3;
        console.log(a);
    }
    inner();
}
outer();

如果函数内部定义变量时,没有写var关键字,认为我们自动在全局进行了变量的声明,我们创建的不在是局部变量,而是全局变量。会造成一个全局污染。

var a = 1;
function outer(){
    a = 2;
    function inner(){
        //var a = 3;
        console.log(a);
    }
    inner();
}
outer();
console.log(a);

在全局定义变量,忘了写var关键字,只要有赋值,变量会自动在全局进行声明。

闭包函数

//函数定义在另一个函数内部,在外面是访问不到
function outer(){
    var a = 1;
    function inner(){           //只能在定义域内使用
        console.log(a);
    }
    return inner;       //返回值得到一个inner函数的定义
}
// 将函数执行结果赋值给一个变量
var fun = outer();    //其实将inner函数赋值给了fun
//函数如果执行,需要在定义域范围去找变量a。全局没有,正常输出了一个1
//执行fun函数,其实是执行指向的那个函数原型,它会在自己定义的作用域内执行
// inner定义时作用域内有一个a = 1,inner函数记住了这个定义域
// 哪怕在outer函数外面使用inner的时候,我也可以访问到a的定义
// console.log(typeof fun);
// console.log(fun);
fun();

eg1

function outer(x){
    function inner(y){   //如果执行函数outer,才会定义inner
        console.log(x + y);
    }
    return inner;  //一定不要加小括号,如果加了,就立即执行
}
var i = outer(3);   //inner函数定义的位置,环境x = 3
// x = 3;
// i = function inner(y){
//  console.log(x + y);
// }
console.log(i);
i(5);

eg2

function fun1(m,n){
    function fun2(m){
        console.log(m + n);
    }
    return fun2;
}
var f = fun1(3,4);    //fun2定义的位置
f(6); // 10

函数这个闭包里的变量并不是一成不变,可以通过函数调用发生一些变化。

function outer(){
    var i = 9;
    function inner(){
        return i++;
    }
    return inner;
}
var inn = outer();  //新建了一个函数,函数是inner,赋值给了变量inn
console.log(inn());
console.log(inn());
console.log(inn());

函数定义一次,可以进行多次调用。
我们可以认为,每次重新定义,都会产生新的闭包。新的闭包指的是,语句全新,所处环境也是全新的。

function outer(){
    var i = 9;
    function inner(){
        return i++;
    }
    return inner;
}
var inn = outer();  //新建了一个函数,函数是inner,赋值给了变量inn
var inn2 = outer();  //新建了一个函数,函数是inner,赋值给了变量inn2
console.log(inn());
console.log(inn());
console.log(inn());
console.log(inn2());  //新的函数,闭包是全新的,9

数组

数组的遍历

//数组可以存一组数据     
var arr = [1,2,3,4,5];
for(var i = 0 ; i <= arr.length - 1 ; i++){
    console.log(arr[i]);
}

组中每一项的阶乘的和

//数组可以存一组数据     
var arr = [1,2,3,4,5,6,7];
//累加器
var sum = 0;
for(var i = 0 ; i < arr.length ; i++){
    sum += jiecheng(arr[i]);
}
console.log(sum);
//阶乘函数
function jiecheng(a){           
    if(a == 0){
        return 1;
    }else{
        //累乘器
        var mul = 1;
        for(var i = 1 ; i <= a ; i++){
            mul *= i;
        }
        return mul;
    }           
}

操作数组

  1. 首尾操作
  • push() 在数组末尾添加一个或多个元素,并返回数组操作后的长度。
  • pop() 从数组移出最后一个元素,并返回该元素。
  • shift() 从数组移出第一个元素,并返回该元素。
  • unshift() 在数组开头添加一个或多个元素,并返回数组的新长度。

push:推。在数组最后一项后面推入一个新数据。返回值是新的长度。

var arr = [1,2,3,4,5];
//console.log(arr.push(8));
console.log(arr.push("8",10,true,[2,3]));
console.log(arr);
//pop() 从数组移出最后一个元素,并返回该元素。
console.log(arr.pop());
console.log(arr);
//unshift() 在数组开头添加一个或多个元素,并返回数组的新长度。
console.log(arr.unshift("haha"));
console.log(arr);
//shift() 从数组移出第一个元素,并返回该元素。
console.log(arr.shift());
console.log(arr);

//将第一项删除,添加到最后一项
arr.push(arr.shift());
console.log(arr);
arr.push(arr.shift());
console.log(arr);
//最后一项给第一项
arr.unshift(arr.pop());
console.log(arr);
  1. 合并拆分

concat() 连接两个数组并返回一个新的数组。对原数组或数据没有任何影响。

//数组可以存一组数据     
var arr = [1,2,3,4,5];
var arr2 = [6,7,8,9];
//合并
var arr3 = arr.concat(arr2);
console.log(arr);
console.log(arr2);
console.log(arr3);

slice() 从数组提取一个片段,并作为一个新数组返回。

语法:array.slice(start,end);
截取到的新数组:原数组的第start项开始到end结束(不包含end位置)的这一段数据。start、end表示的index索引值。

参数为正数:从start开始到end结束,不包含end。
不写end:表示从start开始截取到最后一个数据。
参数为负数:从最后一个数据往前数多少个,从开始位置截取到最后位置不包含结束位置。
参数为负,不写end:表示从start截取到最后。

var arr = [1,2,3,4,5,6,7,8,9,10,11,12];
//拆分
var arr2 = arr.slice(3,8);
console.log(arr);
console.log(arr2);
var arr4 = arr.slice(-6,-3);
  1. 删除、插入、替换

splice() 方法用于插入、删除或替换数组的元素。

前两个参数必须写。后面的参数可以选择。
删除:只写前两个参数。index表示删除的开始位置,howmany表示从这个位置开始删除多少个元素。

var arr = [1,2,3,4,5,6,7,8,9,10,11,12];
//删除.表示从起始位置下标为3开始删除5个
arr.splice(3,5);
console.log(arr);

插入:写三个参数,要求第二个参数必须为0.插入位置是在index元素的前面。

//插入数据,写三个参数,第二个参数为0
arr.splice(3,0,"haha");
console.log(arr);

替换:写三个或以上的参数,将一部分数据删除,用另外的数据替代。

// 替换数据
arr.splice(3,5,"haha",true,[2,3]);
console.log(arr);
  1. 倒序和排序

倒序:reverse() 颠倒数组元素的顺序:第一个变成最后一个,最后一个变成第一个。

var arr = [1,2,3,4,5,6,7,8,9,10,11,12];     
//倒序
arr.reverse();
console.log(arr);

排序:sort();可以穿参数,也可以不传。
如果没有指明比较函数(没有传参数),那么元素会被转换为字符串并按照字符编码顺序顺序排序。例如 "Cherry" 会被排列到 "banana" 之前。当对数字进行排序的时候, 9 会出现在 80 之后,因为他们会先被转换为字符串,而 "80" 比 "9" 要靠前。

//排序、默认情况,比较字符编码顺序
arr.sort();
console.log(arr);

sort函数有一个参数,叫做比较函数,规定了我们排序的依据。
如果指明了 compareFunction ,那么数组会按照调用该函数的返回值排序。记 a 和 b 是两个将要被比较的元素:
如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前;
如果 compareFunction(a, b) 等于 0 , a 和 b 的相对位置不变。
如果 compareFunction(a, b) 大于 0 , b 会被排列到 a 之前。

//升序排列,能控制的是条件
arr.sort(function(a,b){
    if(a > b){
        return -1;
    }else if(a < b){
        return 1;
    }else{
        return 0;
    }
});
console.log(arr);
  1. 转字符串

join() 将数组的所有元素连接成一个字符串。
join加入的意思,在数组数据之间加入一个连字符,整体连城一个字符串。
连字符:join方法的参数。不传参数,默认逗号是连字符。
数组转成字符串,用新变量接收。

//数组可以存一组数据     
var arr = [1,52,23,4,75,36,7,88,90,10,11,12];       
var str = arr.join();
var str2 = arr.join("(ㄒoㄒ)");
console.log(arr);
console.log(str);
console.log(str2);

字符串属性和方法

length属性

//数组可以存一组数据     
var str = "今天要多讲一会儿了hahaha,你能怎 样?";
console.log(str.length);

方法

charAt() 方法可返回指定位置的字符。
char:character,字符
at:在哪儿
index:字符索引值,从0开始。

语法:str.charAt(index);

var str = "今天要多讲一会儿了hahaha,你能怎 样?";
console.log(str.charAt(3));

concat() 方法用于连接两个或多个字符串。
原字符串不会被改变。

//concat() 方法用于连接两个或多个字符串。
var str2 = str.concat("不怎么样啊");
console.log(str);
console.log(str2);

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
得到的结果是字符串的索引值。
注意:区分字母大小写。如果找不到对应的字符,返回-1.

//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
console.log(str.indexOf("多讲"));

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。
注意:输出的还是索引值,它是从后面找第一次出现的位置。

console.log(str.indexOf("a"));
console.log(str.lastIndexOf("a"));

slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
生成新的字符串,对原字符串没影响。

//slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
var str2 = str.slice(4,8);
console.log(str);
console.log(str2);

split() 方法用于把一个字符串分割成字符串数组。
参数:分隔符。

var str2 = "lsdfowekfsdfowekdowfefsfwepp";
var arr = str2.split("f");
console.log(str2);
console.log(arr);

toLowerCase() 方法用于把字符串转换为小写。
toUpperCase() 方法用于把字符串转换为大写。

var str4 = str3.toUpperCase();
var str5 = str4.toLowerCase();
console.log(str3);
console.log(str4);
console.log(str5);

substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
start:开始的索引值。可以为正、可以为负。
length:截取的字符串数量。可以写可以不写,不写截取到字符串结尾。

var str4 = str3.substr(5,6);
console.log(str3);
console.log(str4);

substring() 方法用于提取字符串中介于两个指定下标之间的字符。
substring() 方法返回的子串包括 start 处的字符,但不包括 end 处的字符。与slice一样。
不一样:substring参数不能为负。两个参数位置可以互换,第一个参数字符位置可以在第二个参数位置之后。
如果 start 比 end 大,那么该方法在提取子串之前会先交换这两个参数。
end参数可以不写。

//substring() 方法用于提取字符串中介于两个指定下标之间的字符。
var str4 = str3.substring(4,9);
var str5 = str3.substring(9,4);
console.log(str3);
console.log(str4);
console.log(str5);

总结:slice、substring、substr方法异同
substring、slice都有start、end两个参数,substring不能为负,参数可以互换。substr第二个参数不是index值,而是长度。其他的属性跟slice一样,参数可以为负。

Leave a Reply

Your email address will not be published. Required fields are marked *

4 × 4 =