第三章变量

声明变量

var 变量名;

3.1 基本数据类型

整型 number
字符串 str
boolean
undefined 未定义的
null

var a = 2;
var b = '2' + a;--变成22，转换成字符串拼接
var c = true;
console.log(typeof c)---检查数据类型


先声明后定义
var e;
console.log(a); --值undefined
console.log(typeof a); --类型undefined


var f= null;
console.log(f); --空值
console.log(typeof f);  ---空对象

3.2 引用数据类型

Array 数组

var arr = [1,2,3];  --长度3，还有索引
console.log(arr);

object 对象

var obj = {name:'jj',age:19};
console.log(obj);
定义在对象中的函数叫做对象的方法
var obj = {name:'jj',age:19,
          fav:function(){
              console.log(this) #this指的是当前对象obj
          }
};
obj.fav();

function 函数函数作用域

#普通函数的声明
function add(a,b){
    return a + b
}
console.log(add(2,4)); #6

#函数表达式
var add2 = function(){  ---匿名函数
    
};
#自执行函数
(function(){
    alert(111)
})();


js中只有两个作用域一个是全局作用域，一个是函数作用域

3.3递增和递减运算符

var a= 1;
a ++;  # a++相当于 a +=1；
console.log(a);  # 2


var a = 4; 先让a的值赋值给c，在对a++赋值给a
var c = a ++;
console.log(c); #4
console.log(a); # 5



var a = 4; 先让a的值加在赋值给c，在赋值给a
var c =  ++a;
console.log(c); #5
console.log(a); # 5

3.4 字符串的拼接

var name = 'wusir',age = 28;
var str = name + '今年是'+ age +'岁了';
es6的模板字符串``
var str2 = `${name}今年${age}岁了`;
console.log(str2);

3.5 数组的创建

var arr = [1,'2','alex'];
解释器解释代码时遇到var声明的变量，会把var声明的变量提升到全局作用域下（除了函数之外的变量）
for (var i = 0;i <arr.length;i++){
    var c = 2;
}
console.log(c);

arr.length;#3

3.6 条件判断

if(条件){}。。。。else{}

var score = 70;
if (score >80){
    console.log('可以玩了');       
}else{
    console.log('继续学习');
}

switch

var weather = prompt('请输入今天的天气');
switch (weather){
    case '晴天':
        console.log('出去玩')
        break;
    case '下雨':
        console.log('睡觉')
        break;
    default:
        console.log('学习')
        break;
}

值比较

var a = 2;
var b = '2';
console.log(a == b); # true 比较的是值
console.log(a === b); # false  比较的是值和数据类型

===比较的是值和数据类型
==比较的是值

3.7 循环

var arr = [8,9,10];
初始化循环的变量，循环条件，更新循环变量
for (var i = 0;i < arr.length; i++){
    console.log(arr[i]);
}

var a = ;
while(a <=100){
    console.log(a);
    a++;
}

3.8 函数的作用

为了封装，解决冗长的代码

function fn(){
    alert(111);
}
fn();  函数的调用可以在任意位置，因为调用提升


function fun(a,b){
    console.log(c); # undefined
}
func(2,3);

function fun(){
    console.log(arguments); arguments得到实参的个数
}
func(2,3,4);


函数的承载:相同的函数名，传入不同的参数，调用不同的方法
function funC(){
    console.log(arguments); 
    switch (arguments.length){
        case 2:
            console.log('2个参数')
            break;
         case 3:
            console.log('3个参数')
            break;
    }
}
func(2,3);
func(2，3，4);

3.9 对象

#自变量创建方式
var obj ={};
obj.name = 'alex'; #点语法 set和get
obj.fav = function(){
    console.log(this); #alex，当前对象
}
obj.fav();
console.log(obj.name);

    #构造函数创建
var obj2 = new object();
console.log(obj2);
obj2.name = 'alex';  --赋值



console.log(this);---window
function add(x,y){
    console.log(this.name);
    console.log(x);
    console.log(y);
}
add();
add.call(obj,1,2) --call可以改变this指向，从window到obj这个对象，1，2分别给x，y赋值
add.apply(obj,[1,2])--apply也可以改变this指向，赋值是用数组的方式
函数中的this不一定是window，因为可以改变


全局作用域下、函数作用域下、自执行作用域下的this都指向window

3.10 数组的常用方式

创建方式

var colors = new Array();

r colors = [];

检测是否是数组

var colors = ['red','green','blue'];
console.log(Array.isArray(colors))

返回值是true这是数组
返回值是false 则不是数组

转换方法,调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。

var colors = ['red','green','blue'];
console.log(colors.toString());//red,green,blue

分割字符串,join('') 以什么分割

var colors = ['red','blue','green'];
colors.join('||'); //red||blue||green

栈方法

push()可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
pop()从数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。

var colors = ['red','blue','green'];
console.log(colors.push('purple'));返回数组的长度4

var colors = ['red','blue','green','purple'];
conlose log(colors.pop());返回删除的内容purple

队列方法

shift()，删除第一个位置的内容
unshift()方法,往数组的第一个位置添加内容

var colors = ['red','blue','green'];
var item = colors.shift();//取得第一项
alert(item); //"red"
alert(colors.length); //2

var colors = [];
var count  = colors.unshift('red','green'); //推入两项
alert(count); //2
console.log(colors); // ["red", "green"]

splice,指定位置添加或者删除

var names = ['女神','wusir','太白'];
names.splice(1,0,'日天','包子');表示在索引1这个位置不删除，而是添加日天，包子
names.splice(1,1);返回删除的元素
names.splice(1,1,'alex');替换
conlose log(names);

concat（）数组拼接,数组合并方法，一个数组调用concat()方法去合并另一个数组，返回一个新的数组。concat()接收的参数是可以是任意的。

参数为一个或多个数组，则该方法会将这些数组中每一项都添加到结果数组中。
参数不是数组，这些值就会被简单地添加到结果数组的末尾

var colors = ['red','blue','green'];
colors.concat('yello');//["red", "blue", "green", "yello"]
colors.concat({'name':'张三'});//["red", "blue", "green", {…}]
colors.concat({'name':'李四'},['black','brown']);// ["red", "blue", "green", {…}, "black", "brown"]

slice() 删除，插入，替换,它能够基于当前数组中一个或多个项创建一个新数组。slice()方法可以接受一或两个参数，既要返回项的起始和结束位置。

一个参数的情况下，slice()方法会返回从该参数指定位置开始到当前数组默认的所有项
两个参数的情况下，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
如果slice()方法的参数中有一个负数，则用数组长度加上该数来确定响应的位置。例如，在一个包含5项的数组上调用slice(-2,-1)与调用slice(3,4)得到的结果相同。如果技术位置小于起始位置，则返回空数组

var colors = ['red','blue','green','yellow','purple'];
colors.slice(1);//["blue", "green", "yellow", "purple"]
colors.slice(1,4);// ["blue", "green", "yellow"]#顾头不顾尾

var colors = ['red','blue','green','yellow','purple'];
colors.slice(-2,-1);//["yellow"] 相当于5-2，5-1即3，4
colors.slice(-1,-2);//[]

位置方法,indexOf()和 lastIndexOf()。这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中，indexOf()方法从数组的开头(位置 0)开始向后查找，lastIndexOf()方法则从数组的末尾开始向前查找。

var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3 3 是索引，找到第一个就不找了
alert(numbers.lastIndexOf(4));// 5，从后往前找，但是索引还是从前往后数的
alert(numbers.indexOf(4,4));//5，从索引4开始往后找4，
alert(numbers.lastIndexOf(4,4));//3 从索引4开始从后往前找4，
var person = {name:"mjj"};
var people = [{name:'mjj'}];
var morePeople = [person];
alert(people.indexOf(person)); //-1 查不到返回值-1
alert(morePeople.indexOf(person));// 0

迭代方法

forEach()它只是对数组中的每一项运行传入的函数。这个方法没有返回值，本质上与使用 for 循环迭代数组一样。来看一个例子。

//执行某些操作 10
var numbers = [1,2,3,4,5,4,3,2,1];
numbers.forEach(function(item, index, array){
});

3.11 字符串的常用方法

长度

var stringValue = "hello world"; 
alert(stringValue.length);     //"11"

charAt(),charCodeAt()

var stringValue = "hello world"; 
alert(stringValue.charAt(1));   //"e"


如果你想得到的不是字符而是字符编码，那么就要像下面这样使用 charCodeAt()了。
var stringValue = "hello world";
alert(stringValue.charCodeAt(1)); //输出"101"

concat()

var stringValue = "hello ";
var result = stringValue.concat("world"); alert(result); //"hello world" alert(stringValue); //"hello"

slice(),substring(),substr

var stringValue = "hello world";
alert(stringValue.slice(3));//"lo world"
alert(stringValue.substring(3));//"lo world"
alert(stringValue.substr(3));//"lo world"
alert(stringValue.slice(3, 7));//"lo w"
alert(stringValue.substring(3,7));//"lo w"
alert(stringValue.substr(3, 7));//"lo worl" #意思取7个字符

var stringValue = "hello world";
alert(stringValue.slice(-3));//"rld" 11-3=8第八个开始
alert(stringValue.substring(-3));//"hello world"
alert(stringValue.substr(-3)); //"rld"
alert(stringValue.slice(3, -4));//"lo w" 
alert(stringValue.substring(3, -4));//"hel"
alert(stringValue.substr(3, -4)); //""(空字符串)

trim()方法,删除字符串的前后空格

var stringValue = "   hello world   ";
var trimmedStringValue = stringValue.trim();
alert(stringValue);        //"   hello world   "
alert(trimmedStringValue);     //"hello world"

大小写转换toLocaleUpperCase(),toLocaleLowerCase()

var stringValue = "hello world";
alert(stringValue.toLocaleUpperCase());  //"HELLO WORLD"
alert(stringValue.toUpperCase());        //"HELLO WORLD"
alert(stringValue.toLocaleLowerCase());  //"hello world"
alert(stringValue.toLowerCase());        //"hello world"

字符串位置方法,从一个字符串中搜索给定的子字符串，然后返回子字符串的位置(如果没有找到该子字符串，则返回-1)。这两个方法的区别在于:indexOf()方法从字符串的开头向后搜索子字符串，而 lastIndexOf()方法是从字符串的末尾向前搜索子字符串

var stringValue = "hello world";
alert(stringValue.indexOf("o"));             //4
alert(stringValue.lastIndexOf("o"));         //7
alert(stringValue.indexOf("o", 6));         //7
alert(stringValue.lastIndexOf("o", 6));     //4

3.12 日期 date

要创建一个日期对象，使用 new 操作符和 Date 构造函数即可

var now = new Date([parameters]);
无参数 : 创建今天的日期和时间，例如： var today = new Date();.
个符合以下格式的表示日期的字符串: “月 日, 年 时:分:秒.” 例如： var Xmas95 = new Date("December 25, 1995 13:30:00")。如果
你省略时、分、秒，那么他们的值将被设置为0。
一个年，月，日的整型值的集合，例如： var Xmas95 = new Date(1995, 11, 25)。
一个年，月，日，时，分，秒的集合，例如： var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);
var date = new Date();
date.getDate();
date.getMonth(); Month+1
date.getDay();
date.getHours();
date.getMinutes();
date.getSeconds();

date.toLocaleString() 2018/08/21 21:30:23

方法

toDateString()——以特定于实现的格式显示星期几、月、日和年;
toTimeString()——以特定于实现的格式显示时、分、秒和时区;
toLocaleDateString()——以特定于地区的格式显示星期几、月、日和年;
toLocaleTimeString()——以特定于实现的格式显示时、分、秒;
toUTCString()——以特定于实现的格式完整的 UTC 日期。

yDate.toLocaleDateString();//"2020/5/15"

例题返回了用数字时钟格式的时间

var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
var temp = "" + ((hour > 12) ? hour - 12 : hour);
if (hour == 0)
    temp = "12";
temp += ((minute < 10) ? ":0" : ":") + minute;
temp += ((second < 10) ? ":0" : ":") + second;
temp += (hour >= 12) ? " P.M." : " A.M.";
alert(temp);

3.13 字符串数值之间的转换

字符串转数值 parseInt转整型，parseFloat浮点型

var str = '123.0000111';
console.log(parseInt(str));--取整123
console.log(typeof parseInt(str));
console.log(parseFloat(str));
console.log(typeof parseFloat(str));--浮点型123.000
console.log(Number(str));

toString

var num  = 1233.006;
// 强制类型转换
console.log(String(num));
console.log(num.toString());
// 隐式转换
console.log(''.concat(num));
// toFixed()方法会按照指定的小数位返回数值的字符串 四舍五入
console.log(num.toFixed(2));

3.14 global全局对象

var color = "red";
function sayColor(){
    alert(window.color);
}
window.sayColor();  //"red"

3.15 math对象

对象的属性
min和max

var max = Math.max(3, 54, 32, 16);
alert(max);    //54
var min = Math.min(3, 54, 32, 16);
alert(min);    //3


要找到数组中最大或最小值,可以像下面这样用apply()方法
var values = [1,2,36,23,43,3,41];
var max = Math.max.apply(null, values);null是空对象

舍入方法

Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数;
Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数;
Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则)。

var num = 25.7;
var num2 = 25.2;
alert(Math.ceil(num));//26 天花板函数
alert(Math.floor(num));//25  地板函数
alert(Math.round(num));//26
alert(Math.round(num2));//25 四舍五入

random 随机数

Math.random()方法返回大于等于 0 小于 1 的一个随机数

100-400的数
100+math.random（）*（400-100）


获取min到max的范围的整数
function random(lower, upper) {
    return Math.floor(Math.random() * (upper - lower)) + lower;
}

产生一个随机的rgb颜色
 * @return {String}  返回颜色rgb值字符串内容，如：rgb(201, 57, 96)
 */
function randomColor() {
    // 随机生成 rgb 值，每个颜色值在 0 - 255 之间
    var r = random(0, 256),
        g = random(0, 256),
        b = random(0, 256);
    // 连接字符串的结果
    var result = "rgb("+ r +","+ g +","+ b +")";
    // 返回结果
    return result;
}

 获取随机验证码
 function createCode(){
    //首先默认code为空字符串
    var code = '';
    //设置长度，这里看需求，我这里设置了4
    var codeLength = 4;
    //设置随机字符
    var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O',
'P','Q','R', 'S','T','U','V','W','X','Y','Z');
    //循环codeLength 我设置的4就是循环4次
    for(var i = 0; i < codeLength; i++){
        //设置随机数范围,这设置为0 ~ 36
        var index = Math.floor(Math.random()*36);
        //字符串拼接 将每次随机的字符 进行拼接
        code += random[index]; 
    }
    //将拼接好的字符串赋值给展示的Value
    return code
}

posted @ 2020-05-05 17:06 炜琴清阅读(173) 评论(0) 编辑收藏举报

刷新页面返回顶部

第三章 变量