前端之路-JavaScript 提升

1. JS操作符

1. 算术运算符

算数运算符(基础数字运算) + - * / %

  • 当不是数字之间的运算的时候,+号两边一旦有字符串(引号引起的部分),那么+号就不再是数学运算了,而是拼接,最终结果是字符串。

  • -/*% 尽量将字符串转换成数字(隐式类型转换)

  • NaN: Not a Number number

// var a = 1
// var a = "a"
var b = 3
// var c = a + b  
// 当不是数字之间的运算,+号两边一旦有字符串,那么+号就是拼接,最终结果是字符串。 
var c = a * b // NaN: Not a Number
console.log(c)
console.log(typeof c)

2. 赋值运算符

+= -= *= /= = 这些是基本的赋值运算符,除此之外还有++ --,这两个都存在隐式类型转换,会全部转成数字。

var nu = 1;
nu += 5;
console.log(nu);

var na = 6;
var nb = na ++  // nb = na ; na = na + 1;
console.log(na,nb)
var nb = ++ na // na = na + 1; nb = na
console.log(na,nb)

3. 逻辑运算

针对布尔值 true false
&& 与 两边都为真,结果才为真,其他为假
|| 或 两边都为假,结果才为假,其他都真
! 非 取反,真变假,假变真

当逻辑运算符,两边不一定是布尔值的时候
&&遇到假就停,但是不会进行类型转换
|| 遇到真就停,但是不会进行类型转换
! 隐式类型转换,将后面的数据先转换为布尔值再取反

var bo = true && false;
console.log(bo, typeof bo);

// var ba = 1 && true && true; // 遇到假就停
var ba = 1 && true && 3; // && 不会把内容转换成布尔值
console.log(ba, typeof ba)

// var bc = 0 || false || true;
var bc = 0 || false || 5; // 同样不会转换,遇到真就停
console.log(bc, typeof bc)

var bn = !3 // 隐式类型转换,将后面的数据先转换为布尔值再取反
console.log(bn, typeof bn)

4. 比较运算符

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

==:称为等值符,当等号两边的类型相同时,直接比较值是否相等,若不相同,则先转化为类型相同的值,再进行比较;

===:称为等同符,当两边值的类型相同时,直接比较值,若类型不相同,直接返回false;

类型转换规则:

1)如果等号两边是boolean、string、number三者中任意两者进行比较时,优先转换为数字进行比较。

2)如果等号两边出现了null或undefined,null和undefined除了和自己相等,就彼此相等

注意:NaN==NaN //返回false,NaN和所有值包括自己都不相等。

1 != 1
1 == 1   // 等值符,当等号两边的类型相同时,直接比较值是否相等
1 == '1' // 若不相同,则先转化为类型相同的值,再进行比较;
1 === 1  // 等同符,当两边值的类型相同时,直接比较值
1 ==='1' // 若类型不相同,直接返回false;
null == undefined
NaN == NaN

比较运算中的操作数可以是任意类型的值,但是在执行运算时,会被转换为数字或字符串,然后再进行比较。如果是数字,则比较大小;如果是字符串,则根据字符编码表中的编号值从左到右逐个比较每个字符。

具体说明如下:

  1. 如果两个操作数都是数字,或者一个是数值,另一个可以转换成数字,则将根据数字大小进行比较。
    console.log( 4 > 3 );
    console.log(“4” > Infinity );

  2. 如果两个操作数都是字符串,则执行字符串比较。
    console.log(“4” >“3”);
    console.log(“a” > “b”);
    console.log(“ab” >“cb”);
    console.log(“abd” > “abc”);

  3. 如果一个操作数是数字,或者被转换为数字,另一个是字符串,或者被转换为字符串,则使用 parseInt() 将字符串转换为数字(对于非数字字符串,将被转换为 NaN),最后以数字方式进行比较。

  4. 如果一个操作数为 NaN,或者被转换为 NaN,则始终返回 false。
    console.log(“a” >“3”); //返回true,字符a编码为61,字符3编码为33
    console.log(“a” > 3); //返回false,字符a被强制转换为NaN

5)如果一个操作数是对象,则先使用 valueOf() 取其值,再进行比较;如果没有 valueOf() 方法,则使用 toString() 取其字符串表示,再进行比较。

  1. 如果一个操作数是布尔值,则先转换为数值,再进行比较。

  2. 如果操作数都无法转换为数字或字符串,则比较结果为 false。

字符比较是区分大小写的,一般小写字符大于大写字符。如果不区分大小写,则建议使用 toLowerCase() 或 toUpperCase() 方法把字符串统一为小写或大写形式之后再比较。

2. JS流程控制

在JS中同样也有流程控制主要有if ... else if ... elseswitch(xx) {case xxx: break; ....} 两种

使用if的时候,最好直接是布尔型,类型转换是需要浪费时间的。

1. if判断

if判断中,以下会有判定为并强制转化为false: 0、false、“”、null、undefined、NaN

var weather = "sunny";
// if判断中,以下会判定为false: 0、false、""、null、undefined、NaN
if (weather === "rain"){
  console.log("reading");
}else if(weather === "sunny"){
  console.log("shopping");
}else{
  console.log("sleep");
} // 有花括号结尾的地方,可以不用加;

// 简化写法
if (weather) console.log(weather);
var a = 1;
a>1?2:3; // 表达式?为真的值 : 为假的值
a>=1?2:3;

2. switch用法

switch (weather){
  case "rain":
    console.log("reading");
    break; // 如果不加break,那么最后则会运行default
  case "sunny":
    console.log("shopping");
    break;
  default:
    console.log("sleep");
    break;
}

3. JS循环

1. for循环

for(var i = 1;i<9;i++){
  for (var j = 1;j < 3; j++){
    console.log(i,j);
  }
  if (i==5){
    break;
  }
}

结合点击事件一起使用

var aLi = document.getElementsByTagName("li")
var len = aLi.length
// 当时间很多的时候,必然会需要用的循环来处理
aLi[0].onclick = function(){ 
  alert(0)
}
// 直接循环i是最后
for(var i = 0; i < len; i++){
  aLi[i].onclick = function(){
    alert(i); // 这里的i是循环结束的i
  }
}

for(var i = 0; i < len; i++){
  aLi[i].index = i // index是自定义的变量,类似于python添加属性				
  aLi[i].onclick = function(){
    alert(this.index); // 用this代替元素本身
  }
}

for(let i = 0;i<len;i++){ // ES6 新增语法 let不可以重复定义,是一个块级作用域
  aLi[i].onclick = function(){
    alert(i)
  }
}

for其他用法

var i,j = 0;
var sum = 0;
for(i = 1, j = 10; i<10;i++,j--){ // JS中的for还有可以同时多个变量同时变化,但是判断只能有一个
  sum += i * j
}
console.log(sum)
for(var i in [1, 2, 3]){ // JS 中的for也有和Python一样的用法
  console.log(i);
}

2. while循环

var count = 0;
while (count < 10){ // while用法和python中基本类似
  console.log(count);
  count++
}

3. do/while 循环

var i = 0;
var j = 10
var sum = 0;
do { // do/while 和循环非常相似,只不过它是在循环的尾部而不是顶部检测循环表达式
  sum += i * j; // 循环会至少执行一次
  i ++
}while(i<10); // 实际使用中,那种必须要循环一次的情形并不多见
console.log(sum) 

4. JS字符串方法

JS中的字符串也有很多方法

var st = "this_is_string"
console.log(st)
console.log(st.length)
console.log(st[2]) // 和	python类似
// str[0] = "S" // 同样也是不可更改的
console.log(Object.keys(st)) // 查看对象的方法
var nu = 123
console.log(typeof nu.toString()) // 转变成字符串
console.log(st.substring(1, 5)) //字符串截断 后面部分可选
console.log(st.slice(1, 5)) // 字符串切片 同上,都是不左闭右开的 支持负索引
console.log(st.substr(0,3)); // 起始位置,截取长度
console.log(st.split('t')) // 分割
console.log(st.indexOf("i")) // 查找, 没有返回-1


数据结构分类

数据结构是指相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成 。
常用的数据结构有:数组,栈,链表,队列,树,图,堆,散列表等,如图所示:
这里写图片描述

5. 数组方法

什么是数组

所谓数组,是有序的元素序列。若将有限个类型相同的变量的集合命名,那么这个名称为数组名。组成数组的各个变量称为数组的分量,也称为数组的元素,有时也称为下标变量。用于区分数组的各个元素的数字编号称为下标。数组是在程序设计中,为了处理方便, 把具有相同类型的若干元素按无序的形式组织起来的一种形式。这些无序排列的同类数据元素的集合称为数组。

数组是用于储存多个相同类型数据的集合

数组方法

var arr = [1, 2, 3, 4, 5]
console.log(arr.length) // 长度
arr.push('Python', "JS") // 追加
console.log(arr)
arr.unshift("JavaScript") // 添加
console.log(arr)
arr.pop() // 后删
console.log(arr)
arr.shift() // 前删
console.log(arr)
console.log(arr[1]) // 索引查找
console.log(arr.indexOf(1)) // 查找元素
arr[2] = 200  // 修改元素
console.log(arr)
arr.splice(2, 1) // 从下标2开始,删除1位
console.log(arr)
arr.splice(2, 0, 'C++', 'C#') // 从下标2开始,删除0个,插入多个

var arr = new Array();  // 也是定一个数组,两种方法都是可以定义一个数组
arr[0] = "Python";
arr[1] = "JS";

var arr = [3, -5,-1,8]
console.log(arr.sort())   // 根据ascii码来排序的
arr.sort(function(a,b){
  return a - b; // 从小到大
  // return b - a; // 从大到小
  // return 1; // 倒序
  // return 0; //不变
});


数组方式

第一种:通过new关键字,具体如下

var arr = new Array();

arr[0] = “张三”;

arr[1] = 20;

第二种:通过new关键字,限制元素具体如下

var arr = new Array(3);

arr[0] = “张三”;

arr[1] = 20;

arr[2] = false;//false代表已婚,true代表未婚

第三种:直接定义

var arr = [‘张三’,20,‘已婚’];

数组更新内容

concat()

可以用于连接2或者多个数组,该方法不会改变现有数组

语法:arrayObject.concat(array1,array2,…arrayx);

var arr1 = [1,2,3],
    arr2 = [4,5,6],
    arr3 = [7,8,9,1,2,3];
console.log(arr1.concat(arr2,arr3)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3]

Join()

该方法是把数组中的所有元素放入一个字符串中,元素通过指定的分隔符进行分割的。

语法如下:arrayObject.join(separator);

separator: 指定分隔符对数组中的元素进行分割,如果省略该参数,则会使用逗号作为分隔符


var arrs = [];
arrs[0] = "aa";
arrs[1] = "bb";
arrs[2] = "cc";
console.log(arrs.join()); // aa,bb,cc
console.log(arrs.join("/")); // aa/bb/cc
console.log(arrs.join("-")); // aa-bb-cc

pop()

该方法删除数组的最后一个元素,把数组的长度减1,并且返回它被删除元素的值,如果数组变为空,则该方法不改变数组,返回undefine值。如下代码演示:


var arrs = [1,2,3,4];
console.log(arrs.pop()); // 4
console.log(arrs);  // [1,2,3]

push()

该方法是向数组末尾添加一个或者多个元素,并返回新的长度。

**基本语法:**arrayObject.push(newElem1,newElem2,…newElemX);

var arrs = [1,2,3];
arrs.push(4); 
console.log(arrs);  // [1,2,3,4]
arrs.push(5,6); 
console.log(arrs);  // [1,2,3,4,5,6]

.reverse()

该方法用于颠倒数组中元素的顺序;

语法如下:arrayObject.reverse();

var arrs = [1,2,3,4];
console.log(arrs.reverse()); //[4,3,2,1]

.shift()

该方法用于把数组的第一个元素从其中删除,并返回被删除的值。如果数组是空的,shift方法将不进行任何操作,返回undefined的值。

[复制代码](javascript:void(0)😉

var arrs = [1,2,3,4];
console.log(arrs.shift());// 1
console.log(arrs); // [2,3,4]

var arrs2 = [];
console.log(arrs2.shift()); // undefined
console.log(arrs2); // []

sort()

\1. 该方法是对数组的元素进行排序;sortby参数规定排序顺序,且必须是函数。

如果该方法没有使用参数,则是按字母的字符编码的顺序进行排序。

\2. 如果想按其他标准进行排序,就需要提供比较函数,该函数比较2个值,然后返回一个用于说明这2个值的相对顺序的数字,比如比较a与b,返回值如下:

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

若a等于b,在排序后的数组中 a等于b 则返回0;

若a大于b,则返回一个大于0的值;

var arrs = ["tugenhua","longen","alibaba"];
console.log(arrs.sort());   // ["alibaba", "longen", "tugenhua"]

var arrs2 = ["15","5","8","12"];
console.log(arrs2.sort(function(a,b){
    return a - b;  // ["5", "8", "12", "15"]
}));



判断一个数组中是否有相同的元素

function isRepeat1(arrs) {
            if(arrs.length > 0) {
                var s = arrs.join(","); 
                for(var i = 0,ilen = arrs.length; i < ilen; i+=1) {
                    if(s.replace(arrs[i],"").indexOf(arrs[i])>-1) {
                        return true;
                    }
                }
            }
            return false;
         }

方案二

 // 方案二
         function isRepeat2(arrs) {
            var hash = {};
            if(arrs.length > 0){
                for(var i = 0,ilen = arrs.length; i < ilen; i+=1) {
                    if(hash[arrs[i]]) {
                        return true;
                    }
                    hash[arrs[i]] = true;
                }
            }
            return false;
         }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值