JavaScript基础入门

JavaScript基础

1.概述

概念: 客户端脚本语言(脚本语言:不需要编译,直接被浏览器解析执行)

作用:增强用户和html页面的交互过程,控制html元素,增强用户体验

2.基本语法

2.1内部js

<script>
    alert('hello world');
</script>

2.1外部js

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script src="js1.js"></script>
    
    <!--<script>
        alert('hello world');
    </script>-->
</head>
注意:
可以放任意位置 但是会受位置影响 在他前边的会先执行
script 可以定义多个

2.3注释

1.单行注释

//单行注释

2.多行注释

/*  多行*/

2.4数据类型

1.(原始)基本数据类型

a、number 整数、小数、NaN(not a number 一个不是数字的数字类型)

console.log(isNaN(12));//false

isNaN 判断是否为非数字 结果为false 说明不是非数字 即数字

可以验证用户输入的数据

b、string

alert('放,啦【积分是丰富\n的非暗示领导立刻拉多少;\n"阿萨德d"sF非空FE');

注意 转义字符 还有 外双内单 外单内双

②字符串拼接

字符串+任何类型=字符串

var as='abc de';
console.log((as.length));
var aw=as+123;
console.log(aw);

空格也算一个字符

console.log('10'+10);//1010

结果依然是字符串

c、boolean

d、null

e、undefined 未定义

2.引用数据类型

对象

2.3.1数据类型转换

1.把数字转为字符串

  • toString( )
  • String(变量)
  • 拼接 变量+’ ’

2.转化为数字类型

paserInt( ) 注意:取整了

paserFloat( ) 浮点数

Number( )强转

运用算数运算 如 ’12‘ - 0 隐式转换 //12

2.4变量 *

一小块存储数据的内存空间

js不同于Java

Java是强类型语言 在开辟变量存储空间的同时,定义了空间将来存储的数据的数据类型,只能存储固定类型的数据

而JavaScript是弱类型。不定义数据类型 可以存放任意类型的数据

var a=10;

输出到页面

br换行

var a=1;
var b=1.2;
var c=NaN;

document.write(a+'<br>');
document.write(b+'<br>');
document.write(c);

var a1='abc';
document.write(a1);

var a01=true;
document.write(a01+'<br>');

var b1=null;
var b01=undefined;
document.write(b1+'<br>');
document.write(b01+'<br>');

显示检测到的数据类型

ocument.write(a+'---'+typeof(a)+'<br>');
document.write(b+'<br>');
document.write(c+'<br>');


var a1='abc';
document.write(a1+'---'+typeof(a1)+'<br>');

var a01=true;
document.write(a01+'---'+typeof(a01)+'<br>');

var b1=null;
var b01=undefined;
document.write(b1+'---'+typeof(b1)+'<br>');
document.write(b01+'---'+typeof(b01)+'<br>');

在这里插入图片描述

这个object正常 因为null相当于占位符
在这里插入图片描述

案例:

1.输入用户名并弹出显示用户名

var myname=prompt('请输入你的用户名');
alert(myname);

2.更新变量

var myname='smy';
console.log(myname);

此时myname为smy

myname='hhh';
console.log(myname);

此时为hhh

3.声明多个变量

用,

var age=18,
    address='baoding';

特殊情况:

3.1只声明不赋值

var sex;
console.log(sex);//undefined

3.2不声明不赋值会报错

3.3不声明直接赋值

aa=10;
console.log(aa);//10

2.5运算符

同Java

1.一元运算符:只有一个运算数的运算符

如:++ – +(正号)

在js中,如果运算数不是运算符所要求的的类型,那么js引擎会自动的将运算数进行类型转换

其他类型转number:

string按照字面值转换,如果不是数字,则转为NaN

boolean转,true为1 false为0

var a=1;
var b= -a;
document.write(b+'<br>');
document.write(a);

在这里插入图片描述

var a=+'123';
var b=1+a;
document.write(b+'<br>');
document.write(a);

在这里插入图片描述

var a=+'abc';
var b=1+a;
document.write(b+'<br>');
document.write(a);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fXgXq9Kh-1593511979441)(C:\Users\68508\AppData\Roaming\Typora\typora-user-images\image-20200626102456081.png)]

2.算数运算符

如:+ - * /等

3.赋值运算符

= += -= 。。。。

4.比较运算符

< > >= <= == ===(全等于)

类型相同的

不是数字,而是字符串的话,按照字典顺序比较,按位比较,直到得出大小位置

document.write('abc'>'acd'+'<br>')

//false

c比b大 d比c大

类型不同的。先进行类型转换,在比较

document.write(('123'>1)+'<br>')

true

5.逻辑运算符

&& || !

6.三元运算符

? :

2.6分支语句等

同Java

3.数组

一组数据的集合,存储在单个变量下

3.1创建数组

1.new

var 数组名=new Array();

2.利用数组字面量( [ ] )创建

var 数组名=[ 1,2,23];

4.函数

函数是封装了一段可以被重复执行调用的代码块

目的:让大量代码重复使用

*注意:在js中 如果实参的个数多于形参个数 会取到形参个数

​ 如果小于, 因为形参看作是不用声明的变量 ,此时形参没有接受值 定义为undefined 数字+undefined=NaN

4.1return

return是把结果返回给调用者 且终止函数

只返回一个值,返回的结果是最后一个值;

可以通过数组 返回多个结果:

function g(num1,num2){
    return [num1,num2];
}
console.log(g(1,2));

如果没有return 则返回undefined

4.2return,break,continue的区别

return:退出循环,返回值,同时结束当前函数体代码

break:结束当前循环体

continue:跳出本次循环,继续执行下次循环

4.3arguments

arguments是函数的一个内置对象,所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参

4.3.1使用

function f() {
    console.log(arguments);
}
f(1,2,3);

在这里插入图片描述
伪数组:

1.具有数组的length属性

2.按照索引方式进行存储

3.没有真正数组的一些方法 如pop() push()等

例:

function getMax() {
    var max=arguments[0];
    for (var i=1;i<arguments.length;i++){
        if (arguments[i]>max){
            max=arguments[i];
        }
    }
    return max;
}
console.log(getMax(1,34,23,45));

4.4函数的声明

1.利用函数关键字自定义函数(命名函数

function f(){

}

2.函数表达式(匿名函数

var f=function(){

};

注意:函数表达式中的 f是变量名,不是函数名,里面存的是值,

而函数表达式中存的是函数

js内可以函数内定义函数

5.预解析*

1.js引擎运行js分为:预解析,代码执行

​ 预解析 js引擎会把js里面所有的var 和function 提升到当前作用域的最前面

​ 代码执行:从上往下

2.预解析分为:变量预解析(变量提升)和函数与解析(函数提升)

变量提升: 就是把所有的变量声明提升到当前作用域最前面 不提升赋值操作

console.log(num);//undefined
var num=10;

函数提升:就是把所有的函数声明提升到当前作用域最前面 不调用函数

f();
function f(){
    console.log(22);
}//相当于先声明了把这整个函数提到前边去 之后在调用

案例:

var num=10;
f();  //undefined
function f() {

    console.log(num);
    var num=20;
}

相当于:

var num;
function f() {
    
    var num;
    console.log(num);
    num=20;
}
num=10;
f();

经典案例:

f();
console.log(c);
console.log(b);
console.log(a);
function f() {
    var a=b=c=9;
    console.log(a);
    console.log(b);
    console.log(c);

}

var a=b=c=9; 相当于: var a=9; b=9; c=9; b,c直接复制没声明 当全局变量看

不是集体声明 var a=9,b=9,c=9;

相当于

function f() {
    var a;
    a=b=c=9;
    console.log(a);
    console.log(b);
    console.log(c);
}
f();
console.log(c);
console.log(b);
console.log(a);

在这里插入图片描述
由于var a是局部变量 所以最后的a没有定义过 报错

另外

f();
console.log(c);
console.log(b);
console.log(a);
function f() {
    var a,b,c=9;
    console.log(a);
    console.log(b);
    console.log(c);

}

在这里插入图片描述

只有var c=9;

6.对象

什么是对象?在js中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串,数值、数组、函数等

对象由 属性 和 方法 组成

属性:事物的特征,在对象中用属性来表示(常用名词)

方法:事物的行为,在对象中用方法来表示(常用动词)

为什么需要对象?信息表达结构更清晰

6.1创建对象三种方式

6.1

字面量

var obj={};

var obj={
    name:'my',
    age:18,
    sex:'man',
    sayHi:function () {
        console.log('hi!')
    }

}

注意:

a、里面的属性或方法采用键值对形式 键 属性名 : 值 属性值

b、用逗号, 隔开

c、方法冒号后边跟的是一个匿名函数

使用对象:

a、调用对象的属性,采用 对象名.属性名

console.log(obj.age);

b、调用属性方法二 对象名[‘属性名’]

console.log(obj['age']);

c、调用对象的方法 对象名.方法名( ) 不要忘记( )

obj.sayHi();

2.new

补充:变量、属性、函数、方法的区别?

1.变量和属性 都是用来存数据的

变量 :单独声明并赋值,使用的时候直接写变量名 单独存在

属性 :在对象里面的不需要声明,使用的时候必须是 对象. 属性

var num=18;
var obj={
    age:18
}
console.log(num);
console.log(obj.age);

2.函数和方法 都是用来实现某种功能 做某件事

函数:是单独声明 并且调用的 函数名( ) 单独存在的

方法:在对象里面 调用的时候 对象.方法( )

var obj={
    age:18,
    hh:function () {
        console.log('fd');
    }
}
function f(){
    
}

6.2 new Object

var obj=new Object( );//创建了一个空的对象

var obj=new Object( );
obj.name='smy';
obj.age=18;
obj.sex='man';
obj.sayHi=function () {
    console.log('hi');
}
console.log(obj.age);
obj.sayHi();

注意:

1.利用= 等号赋值的方法 添加对象的属性和方法

2.每个属性和方法之间 用 分号; 结束

6.3利用构造函数

为什么要是用构造函数?

因为前面两种创建对象的方式 一次只能创建一个对象 有的很多属性和方法是相同的 这样只能复制 ,想要重复这些相同的代码 ,就要把函数变成构造函数,里面封装的不是普通代码,而是对象。构造函数就是把对象里面一些相同的属性和方法抽象出来封装到函数里面去

6.3.1语法格式:

/*function 构造函数名() {
    this.属性=值;
    this.方法=function () {}
}
new 构造函数名();*/

function Stu(name,age,sex) {
    this.name=name;
    this.age=age;
    this.sex=sex;
    this.job=function (job) {
        console.log(job);
    }
}
var xm= new Stu('小明',18,'男');//调用函数返回的是一个对象
console.log(xm.age);
xm.job('code');
var nana=new Stu('nana',17,'女');
console.log(nana.sex);

规范:

1.构造函数名字首字母要大写

2.构造函数不需要return就可以返回结果

3.调用构造函数 用new

4.只要new Stu( ) 调用函数就创建一个对象

5.属性和方法前面必须添加this

6.3.2构造函数和对象的区别?

1.构造函数 泛指某一大类 抽象了对象的公共部分

​ 类似于Java里的class类 如学生

2.对象是一个具体事物 如小明同学

3.利用构造函数创建对象的过程也称为对象的实例化

6.3.3new关键字执行过程

1.new 构造函数 在内存中创建一个空的对象

2.this就会指向刚才创建的空对象

3.执行构造函数里面的代码,给这个空对象添加属性和方法

4.返回这个对象(所以不需要return)

6.4遍历对象for…in

for(变量 in 对象){

}

var obj={
    name:'xm',
    age:18,
    hh:function () {
        console.log('fd');
    }
}
for(var k in obj){
    console.log(k);//k 变量 输出 得到的是属性名
    console.log(obj[k]);//得到的是属性值
}

在for in里面的变量 一般写作k 或key

7.内置对象

7.1概述

js中的对象分为3种:自定义对象、内置对象、浏览器对象

内置对象是指js语言自带的一些对象,供开发者使用,并提供了一些常用的或最基本而必要的功能(属性和方法)

常见的有:Math、Date、Array、String等

7.2查文档

MDN/W3C

https://developer.mozilla.org/zh-CN/

7.3Math

1.Math数学对象 不是一个构造函数,所以不需要用new来调用,而是直接使用里面的属性和方法即可

console.log(Math.PI);
console.log(Math.max(23,1,34));

封装自己的数学对象;

var myMath={
    PI:3.141592653,
    max:function () {
        var max=arguments[0];
        for (var i=1;i<arguments.length;i++){
            if(arguments[i]>max){
                max=arguments[i];
            }
        }
        return max;
    },
    min:function () {
        var min=arguments[0];
        for (var i=1;i<arguments.length;i++){
            if(arguments[i]<min){
                min=arguments[i];
            }
        }
        return min;
    }
}
console.log(myMath.PI);
console.log(myMath.max(2,4,5));
console.log(myMath.min(3,1,0));

2.绝对值abs

console.log(Math.abs(-1));//1
console.log(Math.abs('-1'));// 1 隐式转换
console.log(Math.abs('pink'));//NaN

3.取整

console.log(Math.floor(1.1));//1
console.log(Math.floor(1.9));//1 向下取整

console.log(Math.ceil(1.1));//2 向上取整
console.log(Math.ceil(1.9));//2

//四舍五入
console.log(Math.round(1.1));//1
console.log(Math.round(1.4));//1
console.log(Math.round(1.5));//2
//注意
console.log(Math.round(-1.1));//-1
console.log(Math.round(-1.4));//-1
console.log(Math.round(-1.5));//结果是-1  其他数字都是四舍五入 但5特殊,往大了取
console.log(Math.round(-1.6));//-2

4.随机数

左闭右开

console.log(Math.random());//[0,1) 小数
console.log(Math.random()*(10-0)+0);//[0,10)的数 小数或整数


// Math.floor(Math.random()*(max-min)+min)取整
//  Math.floor(Math.random()*(max-min+1)+min)左闭右闭

//封装成函数
function getRandom(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);

}
console.log(getRandom(1,10));
var stu=['xm','xa','aa'];
console.log(stu[getRandom(0,stu.length-1)]);

随机数案例:
var min=prompt('请输入范围最小值');
var max=prompt('请输入范围最大值');
function getRandom(min,max) {
    return Math.floor(Math.random()*(max-min+1)+min);

}

var result=getRandom(min,max);
var num=prompt('请输入猜测的数');
pd(num);
function pd(num){
    if (num==result){
        console.log('恭喜你猜对了!答案是:'+result);

    }else{
        if(num>result){
            var num1= prompt('大了,请重新输入');
            pd(num1);

        }else{
             var num2=prompt('小了,请重新输入');
             pd(num2);
        }
    }
}

7.4Date

处理日期和时间

Date( )日期对象 是一个构造函数 必须实例化

使用new来调用创建我们的日期对象

使用:

1.使用Date 如果没有参数,返回当前系统当前时间

var date =new Date();
console.log(date);

2.参数常用的写法 数字型 2020,06,29 或者是字符串型 ‘2020-6-29 8:8:8’

var date1=new Date(2020,6,29);
console.log(date1);//返回的是七月
//Wed Jul 29 2020 00:00:00 GMT+0800 (中国标准时间)
console.log(date.getFullYear());//返回当前的年
console.log(date.getMonth()+1);//返回的月份小一个月 所以记得月份+1
console.log(date.getDate());
console.log(date.getDay());//0-6 周日为0

日期:


    var date =new Date();
    var year=date.getFullYear();
    var month=date.getMonth()+1;
    var dates=date.getDate();
    var arr=['周日','周一','周二','周三','周四','周五','周六'];
    var day=date.getDay();
    console.log(year+'年'+month+'月'+dates+'日'+arr[day]);

//2020年6月29日周一

时间:

function getTime(){
    var time=new Date();
    var hour=time.getHours();
   hour= hour<10?'0'+hour:hour;
    var mi=time.getMinutes();
   mi= mi<10?'0'+mi:mi;
    var s=time.getSeconds();
    s =s< 10 ? '0' + s : s ;
    return hour+':'+mi+':'+s;
}

console.log(getTime());//17:34:02

获取日期的总的毫秒数(时间戳:永远不会重复):

Date对象基于1970年1月1号

所以获得Date总的毫秒数 不是当前时间的毫秒数,而是距离1970年1月1号过了多少毫秒数

​ 方法a:通过valueOf() getTime()

var date=new Date();
console.log(date.valueOf());//距1970.1.1的毫秒数
console.log(date.getTime());//同上

​ 方法b:简单写法(最常用写法)

var date1= + new Date();//+ new Date() 返回的是总的毫秒数
console.log(date1);

​ 方法c:最最简单写法(h5新增)所以需要考虑兼容性

console.log(Date.now());

倒计时案例***

注意:

1、核心算法:输入的时间减去现在的时间=倒计时

​ 但是!不能用时分秒相减 比如02-20=-18

2、用时间戳来做,用户输入时间总的毫秒数,得到的就是剩余时间的毫秒数

3、把剩余时间总的毫秒数转换为天、时、分、秒(时间戳转换为时分秒)

function countDown(time) {//countDown 倒计时 传入的是用户输入时间
    var nowTime=+new Date();//返回的是当前时间总的毫秒数
   var inputTime= + new Date(time);//返回的是用户输入时间总的毫秒数
    var times= (inputTime-nowTime)/1000;//time是剩余时间总的毫秒数  /1000变成秒
    
    var d=parseInt(times/60/60/24);//天数
     d =d< 10 ? '0' + d : d ;
    var h=parseInt(times/60/60%24);//时
     h =h< 10 ? '0' + h : h;
    var m=parseInt(times/60%60);//分
     m =m< 10 ? '0' + m : m ;
    var s=parseInt(times%60);//当前的秒
     s =s< 10 ? '0' + s : s ;
    
    return d+'天'+h+'时'+m+'分'+s+'秒';
}
var date=new Date();
console.log('现在是'+date);

console.log('距离目标时间还有:'+countDown('2020-6-29 23:00:00'));
//
/*
现在是Mon Jun 29 2020 22:18:51 GMT+0800 (中国标准时间)
js1.js (294,1)

距离目标时间还有:00天00时41分08秒*/

7.5数组对象Array

复习:创建数组的两种方式

1.利用数组字面量

var arr=[1,2,3];

console.log(arr[0]);

2.利用new Array()

var arr1=new Array();//创建了一个空数组

var arr1=new Array(2);//这个2表示数组的长度为 2 里面有2个空的数组元素;

var arr1=new Array(2,3);//等价于[2,3]这样写表示里面有2数组元素 是2和3

7.5.1检测是否为数组:

1.instanceof 运算符

//翻转数组
function reverse(arr) {
if(arr instanceof Array){
var newArr=[];
for (var i=arr.length-1;i>=0;i++){
newArr[newArr.length]=arr[i];

}
return newArr;

}else{
return '这个参数要求必须是数组格式[1,2,3]';
}
}

console.log(reverse([1,2,3]));
console.log(reverse(1,2,3));
//3,2,1
//这个参数要求必须是数组格式[1,2,3]

2.Array.isArray() H5新增 ie9以上版本支持

 var arr=[];
 var obj={};
console.log(arr instanceof Array);
console.log(obj instanceof Array);

console.log(Array.isArray(arr))
console.log(Array.isArray(obj));

7.5.2添加删除数组元素的方法

1.push( ) 在数组末尾 添加一个或多个数组元素 push推

var arr=[1,2,3];
arr.push(4,'xm');
console.log(arr);//[object Array]: [1, 2, 3, 4, "xm"]
console.log(arr.push(4,'xm'));//5 返回的是新数组长度

2.unshift() 在数组开头 添加一个或多个数组元素

arr.unshift('red');
console.log(arr);
console.log(arr.length);
//[object Array]: ["red", 1, 2, 3, 4, "xm"]  6
console.log(arr.unshift('red'));//6 返回的是新数组长度

3.pop() 删除数组最后一个元素

arr.pop();
console.log(arr);//[object Array]: ["red", 1, 2, 3, 4]
console.log(arr.pop());//xm 返回的是删除的元素

4.shift() 删除第一个元素

arr.shift();
console.log(arr);//[object Array]: [1, 2, 3, 4]
console.log(arr.shift());//red

案例:筛选数组

var arr=[1500,2000,2000,1800,2000,2100,2000];
var newArr=[];
for (var i=0;i<arr.length;i++){
    if (arr[i]!=2000){
        newArr.push(arr[i]);
    }
}
console.log(newArr);//[object Array]: [1500, 1800, 2100]

7.5.3数组排序

1.翻转数组 recerse()

var arr=[1,2,4];
arr.reverse();
console.log(arr);//[object Array]: [4, 2, 1]

2.数组排序(冒泡排序) **

var arr0=[2,1,7,4];
arr0.sort();
console.log(arr0);//[object Array]: [1, 2, 4, 7]

var arr=[1,2,4,23,21,6];
arr.sort();
console.log(arr);//[object Array]: [1, 2, 21, 23, 4, 6]

多了十位数就不行了 下面是解决方案

arr.sort(function (a,b) {
    return a-b;//升序
});
console.log(arr);//[object Array]: [1, 2, 4, 6, 21, 23]

arr.sort(function (a,b) {
    return b-a;//降序
});
console.log(arr);//[object Array]: [23, 21, 6, 4, 2, 1]

7.5.4数组索引

1.indeOf()

var arr=[1,'red',23,'ww','red'];
var n=arr.indexOf('red');
console.log(n);// 1  只返回第一个满足条件的索引号
console.log(arr.indexOf('blue'));//-1 表示没有
console.log(arr.lastIndexOf('red'));//4 从后面开始查找 但是索引号不会变
console.log(arr.lastIndexOf('blue'));//-1

利用indexOf()的数组去重案例***

重点案例

目标:把旧数组中不重复的放到新数组里,重复的保留一个放进去

var arr=[1,2,3,1,4,3,5,6,4,1];
function unique(arr) {
    var newArr=[];
    for (var i=0;i<arr.length;i++){
        if(newArr.indexOf(arr[i]) === -1){//新数组里没有这个元素
            newArr.push(arr[i]);//就添加进去
        }
    }
    return newArr;
}

console.log(unique(arr));//[object Array]: [1, 2, 3, 4, 5, 6]

7.5.5数组转化为字符串

1.toString()

var arr=[1,2,3];
console.log(arr.toString());//1,2,3

2.join(分隔符)

console.log(arr.join());//1,2,3
console.log(arr.join('&'));//1&2&3

3.在这里插入图片描述

7.6字符串对象

var str='jenny';
console.log(str.length);//5

字符串简单数据类型 按说复杂数据类型 对象 才有属性和方法

此时的简单数据类型为什么有 length属性?

因为:此时成为了基本包装类型

7.6.1基本包装类型:就是把简单数据类型 包装成为了 复杂数据类型

String Number Boolean 都有

包装步骤:

1.把简单数据类型包装为复杂数据类型

var temp=new String('jenny');

2.把临时变量的值 给 str

str =temp;

3.销毁这个临时变量

temp=null;

7.6.2字符串的不可变性

var str='andy';
console.log(str);//andy
str='red';
console.log(str)//red

表面变了 其实在内存空间里存在着

不变是指里边的值不可变 是地址变了 内存中新开辟了一个内存空间
在这里插入图片描述
所以不要大量拼接字符串

var str='';
for (var i=1;i<=100;i++){
    str+=i;
}
console.log(str);//如果数再大就会卡会等好久

7.6.3根据字符返回位置

1.indeOf()

var str='改革春风吹满地,春天来了';
console.log(str.indexOf('春'));//2
console.log(str.indexOf('春',[3]));//8

【3】从索引为3处开始查找

案例:返回字符位置

查找o出现的位置和次数

算法:找出第一个o出现的位置,利用当前索引+1,继续找,只要indexOf返回的结果不是-1,就继续往后找

var str='sjfosdbfoooscsop';
var index=str.indexOf('o');
var num=0;
while (index !== -1){
    console.log(index);//先输出 再找下一轮结果
    index=str.indexOf('o',index+1);
    num+=1;
}
console.log(num);
var arr=['red','blue','red','red','pink'];
var index=arr.indexOf('red');
var num=0;

while (index !== -1){
    console.log(index);//先输出 再找下一轮结果
    index=arr.indexOf('red' ,index+1);
    num+=1;
}
console.log(num);

7.6.4根据位置返回字符***

1.charAt(index)根据位置返回字符

var str='andy';
console.log(str.charAt(3));//y
//遍历所有字符
for (var i=0;i<str.length;i++){
    console.log(str.charAt(i));
}
2**.charCodeAt(index) 返回相应索引号的字符ASCII值

目的:判断用户按下了哪个键

3.str[index] h5新增

获取指定位置字符

console.log(str[0]);//a

案例:判断一个字符串 中出现次数最多的字符,并统计次数

对象[‘属性名’]

算法:利用charAt 遍历字符串,把每个字符都存处给对象,如果对象没有该属性,就为1(当遇到第一个x时,里面还没有属性所以为1,当出现第二个x,对象里存在这个属性了,所以+1,设为1为了好计算次数),存在了就+1,遍历对象,得到最大值和该字符

var str='sjfosdbfoooscsop';
var num={};
for (var i=0;i<str.length;i++){
    var chars=str.charAt(i);
    if (num[chars]){
        num[chars]++;

    }else{
        num[chars]=1;//得到的是属性值
    }
}
console.log(num);
/*b: 1
c: 1
d: 1
f: 2
j: 1
o: 5
p: 1
s: 4*/
//遍历对象
var max=0;
var ch='';
for (var k in num){
    if (num[k] >max){
    max=num[k];
    ch=k;
    }
}
console.log(max);
console.log('最多的字符是:'+ch);
/*
5
最多的字符是:o*/

7.6.5字符串的操作***

1.拼接 conact(‘str1’,‘str2’,‘str3’)

var str='andy';
console.log(str.concat('red'));//andyred

2.截取 substr(‘截取的起始位置’,‘截取几个字符’)

var str='改革春风吹满地';
console.log(str.substr(2,2));//春风

3.替换 replace(‘被替换的字符’,‘替换为的字符’)

var str='andy';
console.log(str.replace('a','b'));//bndy
var str='andyandy';
console.log(str.replace('a','b'));//bndyandy  只替换第一个字符

案例*:把里面所有的fuck替换为****

敏感词

利用循环,indexOf

var str='sdadfuckfdsfuckssa';
while (str.indexOf('fuck')!==-1){
    str=str.replace('fuck','****');
}
console.log(str);//sdad****fds****ssa

4.字符串转换为数组 split(‘分隔符’)

var str='red,pink,green';
console.log(str.split(','));//[object Array]: ["red", "pink", "green"]

5.转换大小写

var str='aBc';
console.log(str.toLowerCase());//abc
console.log(str.toUpperCase());//ABC

8.小结***:简单数据类型与复杂数据类型

8.1简单数据类型与复杂数据类型

简单类型又叫做基本数据类型或者值类型

复杂类型又叫做引用类型

1.值类型:在存储变量中存储的是值本身,因此叫做值类型

如:string number boolean undefined null

null特殊:

var timer=null;
console.log(typeof timer);//返回的是一个空的对象 object
//如果有个变量我们打算以后存储为对象,暂时没想好放啥,这时候就给null

2.引用类型:在存储变量中存储的仅仅是地址(引用),因此叫做引用数据类型

通过new关键字创建的对象(系统对象、自定义对象),如Object,Array,Date等

8.2堆和栈

堆栈空间分配区别:

1.栈(操作系统):由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈;

简单数据类型存放到栈里面。

2.堆(操作系统):;存储复杂类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收。

复杂数据类型存放到堆里面

js中并没有堆栈概念,通过堆栈来理解执行方式

8.3简单类型的内存分配

简单类型变量的数据直接存放在变量(栈空间)中

里面直接开辟一个空间存放的是值

8.4复杂类型的内存分配

首先在栈里边存放地址,十六进制表示

然后这个地址指向堆里的数据

在这里插入图片描述

8.5简单类型传参

在这里插入图片描述

在这里插入图片描述

8.6复杂类型传参

函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同-个对象。

展开阅读全文

Git 实用技巧

11-24
这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值