JavaScript-es5与字符串


typora-copy-images-to: media

ES5的语法

js在产生的时候,年代比较早,当时的web需求比较少,所以刚开始的js功能比较少,语法没有特别严谨。随着时代的发展和web应用的普及,js需要更多的功能,以及更严谨的语法,所以,js会有版本的升级。第一版的js是ECMA一开始统一了标准以后的版本。我们现在的所使用的语法,大多是ECMAScript版本3的语法,简称es3。到目前为止,已经有了es7,8,9,甚至es10 的版本了。近几年,基本每年都会有新的版本更新。

每个版本的更新,都需要浏览器支持才能运行,但浏览器不会在js更新之后,立马更新。所以有的版本出来之后,需要在很长时间之后,浏览器才会兼容他。到目前为止,我们公认,es5是兼容性最好的版本。

es5比起我们所正在使用的es3,语法没有什么变化,增加了一个严格模式,还有一些数组的方法。

严格模式

由于js的作用域和隐式声明变量等语法会造成很多预想不到的错误,所以ES5中新增了一个严格模式的语法,用于严格规范代码的书写。

使用语法:

"use strict";

使用说明:

  1. 要放在代码的最前面,也就是在script标签中的第一行或者某个函数中的第一行,否则会失效
  2. 严格模式可以规范当前script标签或者当前函数中的代码,不能规范别的script标签中的代码和别的函数

规范的语法:

  1. 不允许隐式声明变量
  2. 禁止函数中的形参重名
  3. 禁止函数中的this代表window

为什么要使用严格模式?

  1. 可以让代码更加规范
  2. 可以让代码运行起来更快,提高运行效率

this的表示内容:

  1. 全局的this代表window
  2. 普通函数中的this代表window
  3. 自调用函数中的this代表window
  4. 事件函数中的this代表事件源
  5. 对象方法中的this代表当前对象

新增数组方法

indexOf方法

查找某个元素在数组中第一次出现的位置

语法:

arr.indexOf(元素,[开始查找的起始下标]);
# 参数1:将要查找的元素
# 参数2:可选项。从哪个下标开始往后查找
# 返回值:如果找到了,就返回这个元素在数组中的下标,如果没有找到,就返回-1

例:

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); // 2 - 查找数字5在数组中第一次出现的下标
console.log(arr.lastIndexOf(5)); // 5 - 查找数字5在数组中最后一次出现的位置
console.log(arr.indexOf(5,3)); // 5 - 从下标2开始查找数字5在数组中第一次出现的位置
console.log(arr.lastIndexOf(5,4)); // 2 - 从下标4开始查找数字5在数组中最后一次出现的下标
console.log(arr.indexOf("5")); // -1 - 数组中全是数字,找不到字符串5,所以返回-1

forEach方法

用于遍历数组

语法:

arr.forEach(function(值, 下标, 当前数组){
    // 代码段
});
# 在这个方法中需要传入一个函数参数,这个函数的参数说明如下:
# 参数1:数组遍历出来的每个值
# 参数2:可选项。数组遍历出来的每个值对应的下标
# 参数3:可选项。被遍历的当前数组

例:

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
    console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为:
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

使用说明:

这个方法没有返回值,返回值为undefined,不会改变原来数组的值。

map方法

遍历数组,并将每个元素经过函数处理后,形成新的元素,所有新元素组成新数组返回

语法:

arr.map(function(值,下标,当前数组){
    return 新的值 - 通常新的值是由旧的值处理以后得到
});

例:

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
    return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

使用说明:

这个方法主要用于以同样的规则处理数组中的每个值,并组成新的数组返回

filter方法

将数组中满足指定条件的值,组成新的数组返回

语法:

arr.filter(function(值, 下标, 当前数组){
    return 筛选条件
});

例:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(v, index) {
    return v>5
}); 
console.log(arr2); //[6, 7, 8, 9, 10]

使用说明:

使用方法和功能跟map方法很像,只是运行规则不一样。map方法中的函数,用于返回新的元素,而filter方法中的函数,根据返回true或false来筛选元素

字符串

字符串的重新认识

字符串定义:

var str = '';
var str = "";
var str = new String()

这三种定义方式没有区别。

字符串中字符的个数:字符串.length

字符串中获取某个字符的时候,可以根据下标来获取:

var str = "abcdef";
var s = str[1]
console.log(s) // 'b'
var s1 = str[0] 
console.log(s1) // 'a'

所以字符串也是可以进行遍历的:

var str = "abcdef";
for(var i=0;i<str.length;i++){
    console.log(str[i],i)
}

那字符串是否也可以像数组一样,通过下标更改其中的某个字符呢?

var str = 'abcdef';
str[str.length] = 'g'

str[0] = 'g'
console.log(str) // abcdef

操作后,字符串并没有新增和更改。

因为字符串是只读数据,只能读,不能增删改。

字符串可以进行比较,我们在前面的时候,有过这样的比较:

console.log('12'>'5') // false
console.log('12'<'5') // true

字符串可以比较,但是规则跟数字比较是不一样的。

字符串比较的规则是逐字符进行比较,大小由阿斯克码来决定。

阿斯克码

计算机内部只能识别2进制数据,不能识别字母等字符。

为了能让计算机识别字符,科学家制定了一个对照表,当输入一段2进制指令的时候,就能显示成某个字符。

这个对照表叫做阿斯克码表,其中包含了128个常用字符跟2进制的对照关系。

通过阿斯克码表,我们可以得出一些字符串比较的规律:

  1. 字母比数字大
  2. 小写字母比大写字母大
  3. 字母越靠后越大

字符串能比较大小,中文汉字也是字符串,中文汉字也能比较大小:

console.log('我'>'你') // true
console.log('你'>'我') // false

中文汉字的大小由unicode来决定。

阿斯克码总共128个,包含符号、大小写英文字母、数字。阿斯克码是由美国人创建的,所以对于英文的支持非常好。后来随着计算机的普及,各个国家在使用计算机的时候,没办法使用本国文字,这样用起来非常困难。所以众多国家的科学家一起制定了一个更大的对照表,包含各个国家的文字符号,所以称之为万国码,也叫作unicode。

其实unicode就是更大的阿斯克码。

字符串方法

  • charCodeAt - 根据指定下标获取对应的字符的阿斯克码

    var str = 'abcdef';
    // 获取下标为3的字符的阿斯克码
    var res = str.charCodeAt(0); // 参数为指定的下标
    console.log(res); // 97
    
  • String.fromCharCode - 根据指定的阿斯克码得到对应的字符

    // 获取98对应的字符
    var res = String.fromCharCode(98); // 参数为指定的阿斯克码
    console.log(res); // b
    
  • indexOf - 查找字符或子字符串在大字符串中第一次出现的位置

    var str = 'i love you';
    // 找到o字符在str中第一次出现的位置
    var s = str.indexOf('o'); // 参数为要查找的字符
    console.log(s); // 3
    
    var s = str.indexOf('o',4); // 参数2为开始查找的下标
    console.log(s) // 8
    
    var s = str.indexOf('a') // 查找a字符在字符串中第一次出现的下标
    console.log(s) // -1 - 找不到就返回-1
    
  • lastIndexOf - 查找字符在字符串中最后一次出现的下标

    var str = 'i love you';
    // 找到o字符在str中最后一次出现的位置
    var s = str.lastIndexOf('o');
    console.log(s); // 8
    
    var s = str.lastIndexOf('o',7) // 将下标7当做字符串末尾,查找字符o在字符串中最后一次出现的下标
    console.log(s) // 3
    
    var s = str.lastIndexOf('a')
    console.log(s) // -1 - 找不到就返回-1
    
  • slice - 截取字符串

    var str = 'abcdef';
    // 从下标1截取到下标4
    var s = str.slice(1,4) // 参数1是开始截取的下标,参数2是截取的结束下标
    console.log(s) // bcd - 结果中不包含结束下标对应的字符
    
    var s = str.slice(1) // 省略第二个参数,默认能截取到字符串末尾
    console.log(s) // bcdef
    
    var s = str.slice(-3,-1) // 下标可以使用负数表示,-3表示倒数第3个字符,-1表示倒数第1个字符
    console.log(s) // def
    
    var s = str.slice(-1,-3) // 如果开始下标比结束下标大,会截取到空
    console.log(s) // ''
    
  • split - 将字符串使用指定的分隔符分割为数组

    var str = 'a-b-c-d';
    var arr = str.split('-') // 参数为分隔符,使用-将字符串分割为一个数组
    console.log(arr) // ['a','b','c','d']
    
    var arr = str.split('-',3) // 参数2表示数组中要保留前几个元素
    console.log(arr) // ['a','b','c']
    
    var str = 'abcd';
    var arr = str.split() // 省略了分隔符,默认就不分割,将整个字符串当做一个元素放在数组中
    console.log(arr) // ['abcd']
    
    var arr = str.split('')
    console.log(arr) // ["a", "b", "c", "d"]
    
  • replace - 使用新字符串将字符串中某一部分替换掉

    var str = '你的头发还好吗?';
    str = str.replace('头发','眉毛') // 参数1是被替换的字符串中的部分,参数2是新内容
    console.log(str) // '你的眉毛还好吗?'
    
    str = str.replace('','哈哈') // 参数1为空,就会将新内容添加到原字符串的最前面
    console.log(str) // '哈哈你的眉毛还好吗?'
    
  • trim - 去除字符串两端空白

    var str = '    aaa          ';
    str = str.trim()
    console.log(str) // 'aaa' - 左右两端的空白被去掉了
    
    str = str.trimLeft() // 去除左边的空白
    console.log(str) // 'aaa          '
    
    str = str.trimRight() // 去除右边的空白
    console.log(str) // '    aaa'
    
  • toUpperCase - 将字符串中字母转为大写

    var str = 'i love you';
    str = str.toUpperCase()
    console.log(str) // 'I LOVE YOU'
    
  • toLowerCase - 将字符串中字母转为小写

    var str = 'I LOVE YOU';
    str = str.toLowerCase()
    console.log(str) // 'i love you'
    
  • substr - 截取字符串

    var str = 'abcdef';
    str = str.substr(1,3) // 参数1是开始截取的下标,参数2是截取的字符串长度
    console.log(str) // bcd
    
    str = str.substr(1) // 省略参数2默认截取到字符串末尾
    console.log(str) // bcdef
    
    str = str.substr(-4,2) // 开始截取的下标可以用负数表示
    console.log(str) // 'cd'
    
    str = str.substr(1,20) // 长度超出最大下标,就相当于省略了参数2
    console.log(str) // cdef
    
  • substring - 截取字符串

    var str = 'abcdef'
    str = str.substring(1,4) // 参数1是开始截取的下标,参数2是结束下标
    console.log(str) // bcd - 结果不包含结束下标对应的字符
    
    str = str.substring(1) // 省略参数2,默认截取到末尾
    console.log(str) // bcdef
    
    str = str.substring(1,1) // 开始下标和结束下标相等就截取到空字符串
    console.log(str) // ''
    
    str = str.substring(4,1) // 开始下标大于结束下标,就先交换两个参数位置,然后再截取
    console.log(str) // 'bcd'
    
    str = str.substring(-5,4) // 开始下标或结束下标是负数,就先替换为0,然后开始截取
    console.log(str) // abcd
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容