【前端从0开始】JavaSript——Object对象和String对象

对象

javascript中的对象分为3种:自定义对象,内置对象,浏览器对象
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。
在 JavaScript 中,对象是拥有属性和方法的数据。

属性是与对象相关的值。
方法是能够在对象上执行的动作。.关键词()
举例:汽车就是现实生活中的对象。

汽车的属性:
car.name=Fiat 名称
car.model=500 型号
car.weight=850kg 重量
car.color=white 颜色

汽车的方法:
car.start() 启动
car.drive() 驾驶
car.brake() 刹车

Object对象

创建对象

var 对象名称=new Object();

设置对象属性

对象名称.属性名=值;

设置对象方法

对象名称.方法名=function(){ }

调用对象属性

 对象名称.属性名

调用对象方法

对象名称.方法名()

String对象

创建String对象
var strOb = new String(“abcefg”);
var strOb = String(“abcefg”);
var strOb = “abcefg”;
属性
length (字符串长度)

思考:字符串为什么又length长度?【js的基本包装类型】
为了方便操作基本数据类型,js提供了三个特殊的引用类型:string、,Number,Boolean
基本包装类型:就是把简单数据类型包装为复杂数据类型,这样基本数据类型就有了属性和方法

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

按道理基本数据类型是没有属性和方法的,而对象才有属性和方法,但上面的代码却可以执行。这是因为js辉吧基本数据类型包装为复杂数据类型,其执行过程如下

// 1. 声明临时变量,把简单数据类型包装为复杂数据类型
var temp = new String('hello');
// 2. 赋值给我们声明的字符串变量
str = temp;
// 3. 销毁临时变量
temp = null;

方法

  1. 子字符串位置
    indexOf(string,[index]) //返回子字符串abc在字符串中第一次出现的位置(从0开始计算),不存在返回-1
    string : 查找的字符串的内容,必填项
    index:开始查找位置,可有可无
    返回值:返回值是查找到的子字符串的位置(下标),默认情况下,返回的是第一个被查找到的内容;如果被查找的内容不存在,则返回-1
  2. lastIndexOf(string,[index]) //返回子字符串abc在字符串中最后一次出现的位置
    string :子字符串,查找的字符串的内容,必填项
    index:开始查找位置,可有可无
    返回值:返回值是查找到的子字符串的位置(下标),默认情况下,返回的是第一个被查找到的内容;如果被查找的内容不存在,则返回-1
// 案例:查找 afgdtywgbfnjekagrn 字符串中有多少次 g 
var str = new String('afgdtywgbfnjekagrn');
var index = str.indexOf('g'); // 2
// 统计次数
var num = 0;
while(index !== -1){ // 查找
    num++;
    index = str.indexOf('g',index + 1);
}
console.log('g一共出现了'+num+'次');
// 封装函数 - 查找子字符串出现的次数
function counts(str,cStr){
    var index = str.indexOf(cStr);
    var num = 0; // 出现的次数

    while(index != -1){
        num++; // 每出现一次,次数+1
        index = str.indexOf(cStr,index+1);
    }
    return num;
}
var n = counts('38qhdahwdqjk24hjoiyowuierfy8','o');
alert('O一共出现了'+n+'次');
  1. slice(start,end) 获取字符串的某个部分
    截取是前包含,后不包含
    start 表示开始位置,从0开始到正无穷
    end 表示结束位置,可以为正值,也可以为负值
// 基础使用
var str = 'hello wolrd';
console.log(str.slice(3,5));
console.log(str.slice(3,-1));

// 案例:使用slice和定时器,实现内容的输出
var str = '我的名字叫张三,我今年十三岁了';
var oBox = document.querySelector('#box');
var i = 0;
function show(){
    if(i<str.length){
        oBox.innerHTML += str.slice(i,++i); // 方法一
        oBox.innerHTML += str.charAt(i++); // 方法二
        setTimeout(show,100);
    }
}
show();
  1. 截取
    substr(起始位置,[截取长度]) //截取不写则代 表截取到字符串未尾
    起始位置:可以自定义,从0开始
    截取长度:可以是一个数字,还可以不写;如果不写长度,表示截取到字符串的末尾
    返回值:截取出来的字符串

    substring(起始位置,[结束位置]) //不包括截取结果的右边界字符
    起始位置:是一个下标值,不能为负值
    结束位置:是一个下标值,不能为负值(不包括截取结果的右边界字符)

// 需求:判断图片是什么类型; 照片的格式必须是 png/jpg txt
// 获取文件名的后缀 - 后缀名开始的下标 - lastIndexOf / substr
function getSuffix(){
   var file = document.getElementById('files');
   var pic = file.value;// 图片的路径
   // var pic = '.././images/banner/one.txt'; 
   var suffix = pic.substr(pic.lastIndexOf('.')+1);
   if(suffix=='png'||suffix=='pneg'||suffix=='jpg'||suffix=='jpeg'){
       alert('图片格式正确');
   }else{
       alert('格式不正确!');
    }
}
<!-- 上传文件,判断文件格式是否正确 -->
<input type="file" id='file'>
<button id='btn'>提交</button>
<script>
    var oBtn = document.querySelector('#btn');
    var oFile = document.querySelector('#file');
    oBtn.onclick = function(){
        var res = getStr(oFile.value);
        if(res){
            alert('上传成功')
        }else{
            alert('图片格式不正确')
        }
    }
</script>
  1. 替换
    replace(‘子字符串1’,‘子字符串2’) //将字符串中子字符串1替换为子字符串2,
    a. 在替换的时候要注意有些字符是需要加转移字符\,不然会把它认为成其他字符。例如“*”
var str='My name is apple. So I like to eat apple very much!';
// 1. 普通替换
alert(str.replace('apple','banana'));
alert(str.replace(/apple/g,'banana'));

// 2. 将所有的数字替换为 空格
var str2 = '张三1李四2王五3马六';
alert(str2.replace(/[0-9]/g,' '));

// 3. 将所有的小写字母替换为空格
var str2 = '张三w李四f王五n马六';
var newStr2 = str2.replace(/[a-zA-Z]/g,' '); 
console.log(newStr2);

//  4. 将所有的字母 替换为 空格【不区分大小写】
var str2 = '张三w李四F王五n马六';
// var newStr2 = str2.replace(/[a-zA-Z]/g,' '); 
var newStr2 = str2.replace(/[a-z]/gi,' '); 
console.log(newStr2);
  1. 获取指定位置的字符
    charAt(n) 默认为第一个字符
    n 表示的是下标,范围是 0-正无穷,不能使用负值

  2. 获取指定字符的ASCII编码 str.charCodeAt()
    String.fromCharCode() 根据ascii返回对应的字符

var str1 = 'helloworld';
var getStr1 = str1.charCodeAt(2);
console.log(getStr1);

var num = 97;
console.log(String.fromCharCode(num)) // a
  1. 转换大小写
    toLowerCase()
    toUpperCase()

<input type="text" id='inp'><span>tR4wCspan><br/>
<button id='btn'>按钮button>
<script>
    // 模拟验证码的规则
    // 1. 找到按钮
    var oBtn = document.querySelector('#btn');
    // 3. 获取input里面的内容
    var oInp = document.querySelector('#inp');
    // 4. 获取span里面的内容
    var oSpan = document.querySelector('span');
    // 2. 添加点击事件
    oBtn.onclick = function(){
        // 5. 将input里面的内容转为大写
        var inp = oInp.value.toUpperCase();
        // 6. 将span里面的内容转为大写
        var yanzheng = oSpan.innerText.toUpperCase();
        if(inp == yanzheng){
            console.log('验证成功');
        }else{
            console.log('验证失败');
        }
    }
script>
  1. 将字符串分割为数组
    split(分割符,[返回数组的最大长度])
    分隔符:是一个字符串类型 或者是 正则表达式
    返回值:数组
// 基础案例
var str = 'I am student my name is jack'; 
console.log(str.split()); // 将整个字符串分割为一个整体
console.log(str.split(' ')); // 按照空格进行分割
console.log(str.split('')); // 将字符串中的每个字符都进行分割

var str1 = '张三*20211203*10';
console.log(str1.split('*')); // 按照*进行分割

var str1 = "jack1Rose2Box3Tom4Jerry";
console.log(str1.split(/[0-9]/)); // 按照数字进行分割

var str1 = "张三t里斯r王五p马六";
console.log(str1.split(/[a-z]/)); // 按照字母进行分割
  1. 显示字符串效果
    bold() 加粗
    italics() 斜体
    strike() 删除
    fontcolor(‘#f00’) 字符串颜色
    fontsize(1-7) 字符串大小
    sup() 上标标签
    sub() 下标标签
var oFont = document.getElementById('font');
var val = oFont.innerText;
oFont.innerHTML = val.big().fontcolor('red').strike().fontsize(18);
// oFont.innerHTML = val.sub()
console.log(val.sub());
  1. 设为超链接
    link(url)
var oBox = document.querySelector('#box');
oBox.innerHTML = str.strike().fontsize(7).fontcolor('red').italics().link('http://www.baidu.com');

案例:string方法相关案例

  1. 如何判断一个文件是否是图片(截取图片文件的后缀名)
function getFileExtension2(filename) {
  	return filename.split('.').pop();
}
  1. 面试题:编写一个函数,按下面的输入结果和输出内容编写
function strChange(title){
  // 此次编写代码
}
var resultStr = strChange("Hello*Books*Sword*A*World");
console.log(resultStr ) // 返回 “hello-books-sworld-a-world”

3.str=“one two thr for fiv six”
将字符串中所有的f换成F,并将字符串转成数组
4.扩展:创建一个按钮,点击上传图片,判断上传的文件是否是一张图片

你可能感兴趣的:(前端从0开始,前端)