JavaScript学习_基础_16_ES5与ES6字符串、数组的相关方法

一、ES5严格模式

严格模式是什么?

顾名思义,是一种使得Javascript代码在更严格的条件下运行的模式。

为什么要使用严格模式?
  • 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为。
  • 消除代码运行的一些不安全之处,保证代码运行的安全。
  • 提高编译器效率,增加运行速度。
  • 为未来新版本的Javascript做好铺垫。
严格模式主要都做了什么?怎么玩?
  1. "use strict"(严格模式开启指令)在针对所有代码时,写在代码的第一行;在针对函数时写在函数的体的第一行。
  2. 变量声明必须写var,不写var报错。
  3. 禁止this指向window,如果构造函数忘记写new那么this不会影响全局。
  4. 禁止随意删除变量。
  5. 函数不能有重复的参数。
举例说明

未使用var定义变量:

<script type="text/javascript">
"use strict"
a = 1;
console.log(a); //报错
</script>

禁止this指向window:

<script type="text/javascript">
"use strict"
function add(a,b){
    console.log(this); //undefined
    return a + b;
}
add(10,20);
</script>

构造函数忘记写new:

<script type="text/javascript">
//"use strict" 未开启严格模式
function Person(name,age){
    this.name = name;
    this.age = age;
}

var p = Person('zs',23); //没写new
// 在Window对象里面添加
</script>
<script type="text/javascript">
"use strict"
function Person(name,age){
    this.name = name;
    this.age = age;
}

var p = Person('zs',23); //没写new
// 报错,因为此时this是undefined
</script>

删除变量:

<script type="text/javascript">
//"use strict" 未开启严格模式
var b = 10;
delete b; //删除指令,但这里啥也不干
console.log(b); //10
</script>
<script type="text/javascript">
"use strict"
var b = 10;
delete b;
console.log(b); 
// 报错
</script>

函数参数重复:

<script type="text/javascript">
//"use strict" 未开启严格模式
var b = 0;
function add(a,a,c){
    return a + b + c;
}

console.log(add(10,20,30)); //a发生覆盖
//50
</script>
<script type="text/javascript">
"use strict"
var b = 0;
function add(a,a,c){
    return a + b + c;
}

console.log(add(10,20,30)); 
//报错
</script>

二、ES6定义变量

ES6都是处于严格模式下的

let使用及特点
  • let是在块级作用域声明变量(在花括号内声明就仅作用于花括号内)
  • let定义的变量不会进行预解析
  • let变量不允许重复定义
let举例
var a = 10;
let b = 20;
if(a > 0)
{
    let b = 10;
    console.log(b); //10
}
console.log(b); //20
var a = 10;
let b = 20;
if(a > 0)
{
    let b = 10;
    let b = 5;
    console.log(b); //报错,重复定义
}
console.log(b); 
//报错
var a = 10;
console.log(b);
let b = 20;
//报错,不进行预解析
var a = 10;
if(a > 0)
{
    let b = 10;
    console.log(b); //10
}
console.log(b); //报错
const使用及特点
  • 声明一个变量,变量的值无法更改,也是在块级作用域生效。
  • const定义的变量不可以被修改,而且必须初始化。
const举例
const a;
a = 10;
console.log(a); //报错,变量的值无法更改,而且必须初始化
const a = 10;
console.log(a); //10
const a = 10;
a = 14;
console.log(a); //报错,变量的值无法更改,而且必须初始化
var b = 10;
if(b > 1)
{
    const c = 20;
    console.log(c); //20
}
console.log(c); //报错,只在块级作用域生效

三、ES5字符串相关方法

var str = 'asydg123ASD asdh asd12A';
charAt
console.log(str.charAt(8)); // A
// 某个索引位置的字符(从0开始)
charCodeAt
console.log(str.charCodeAt(索引)); 
// 返回字符的unicode码
concat
console.log(str.concat('haha'));
// 返回在末尾拼接后的新字符串,原串未改变
// asydg123ASD asdh asd12Ahaha
// 一般拼接直接用加法就行了
fromCharCode
console.log(String.fromCharCode(49)); // 1
// 根据unicode码返回字符串 
indexOf
console.log(str.indexOf('123')); // 5
// 返回子串在字符串中的位置,(索引)位置是第一次查到的位置

console.log(str.indexOf('12',22)); // -1
// 第二个参数允许你指定从哪开始查;如果查到则返回位置,没有查到则返回-1;
// 第二个参数可写可不写,不写的话默认从头开始查。
lastIndexOf
console.log(str.lastIndexOf('12',20)); // 6
// 返回子串在字符串中的位置(索引),第一次查到的位置。
// 和上一个的区别在于是从后往前查,第二个参数允许你指定从哪开始查;如果查到返回位置,没有查到返回-1。
// 如果不指定开始位置,默认从最后向前查。

console.log(str.lastIndexOf('12')); // 21
length
console.log(str.length);
// 属性,直接返回字符串的长度
localeCompare
console.log(str.localeCompare('1asydg123ASD asdh asd12A'));
// 返回 0 1 或者 -1
// 1代表字符串比你传进来的串要大  -1代表小  0 代表相等
slice
console.log(str.slice(6,-2));
// 抽取子串,传递参数起始位置和结束位置,但是子串不包含结束位置的字符。
// 参数可以是负数(负数则代表从后往前计算,最后一个字符为-1,没有-0这一说法。)
split
console.log(str.split('12'));
// 以传递的参数为分割标志,将字符串转化为数组,传递的参数在数组当中将不复存在。

console.log(str.split(''));
// 若里面什么都不写,则是把每个字符都当做数组的元素。如果里面是空格,则空格字符就会作为分割标志并消失。
substr
console.log(str.substr(6,3));
// 抽取子串,传递的参数是起始位置和子串长度。
substring
console.log(str.substring(6,9));
// 这个方法和slice作用一样,唯一不同是参数不能传递负数
toUpperCase&toLowerCase
console.log(str.toUpperCase()); // 字符串中小写字母转大写字母
console.log(str.toLowerCase()); // 字符串中大写字母转小写字母
toString&valueOf
console.log(str.toString());
// 转化为字符串,但现在本身就是字符串。
console.log(str.valueOf());
// 返回值,返回的还是字符串本身

注意:

  1. 字符串方法返回的都是一个新串,和原来的字符串没关系。
  2. 所有的方法一定要搞定的三要素: 功能 参数 返回值。
  3. 字符串也可以使用下标进行操作。

四、ES6字符串相关方法

  1. includes(str) : 判断是否包含指定的字符串

    console.log(str.includes('WW')); // false
    // 判断子串是否在字符串当中,在就是true,不在就是false
    
  2. startsWith(str) : 判断是否以指定字符串开头

    console.log(str.startsWith('2asy')); // false
    // 判断字符串是不是以子串开头的,返回true和false
    
  3. endsWith(str) : 判断是否以指定字符串结尾

    console.log(str.endsWith('sd12A')); // true
    // 判断字符串是不是以子串结尾的,返回true和false
    
  4. repeat(count) : 重复指定次数

    console.log(str.repeat(2));
    // 参数是0和正数,负数会报错,返回的是字符串重复你指定的次数拼成的串。
    // NaN  null  undefined 都会被转化为0,0次的返回结果是一个空串。
    

五、ES5数组相关方法(重要)

var arr = [2,13,3,44,5];

定义一个arr数组,后续操作基于此进行举例。

concat
console.log(arr.concat(4,5,6,7));
console.log(arr.concat([4,5,6,7]));
// 这两个方法的结果一样
// 返回一个新数组,新数组是原数组后面拼接你给的参数,原数组并没有发生改变。
// 这个参数可以是一个或者多个,甚至可以是一个数组,但是数组还是被拆解,跟直接写参数一样。
length
console.log(arr.length); // 求数组长度
join
console.log(arr.join('*;')); // 1*;2*;3*;4*;5
// 和字符串的split是一个逆运算
// 如果括号里面什么都不写,则返回的字符串默认使用逗号分隔每个字符。如果里面是''(空字符串),则返回一个没有分隔的字符串。其余不管写什么,就用什么分隔每一个字符。
// 返回的是一个字符串,并不影响原数组。
console.log('1,2,3'.split(',')); // (3)['1','2','3']
// 通过指定的字符(串)去分割字符串的元素成为一个数组。

console.log(['1','2','3'].join()); // 1,2,3
reverse
console.log(arr.reverse());
//会返回经过翻转的原数组(直接操作原数组);没有参数
slice
console.log(arr.slice(1,4)); // 数组[13,3,44]
// (开始,结束)但不包括结束位置
// 抽取一部分元素,当做一个数组。
// 返回一个新的数组
sort
console.log(arr.sort());
// 排序数组内的元素,会影响原数组,是在原数组上进行排序的。
// 如果不传参,会按照unicode码进行比较排序, 这种排序类似于字符串比较。

// 如果传参数,则需要传递一个回调函数。
console.log(arr.sort(function(a,b){
                        return a - b;
                    }))
// 按照从小到大排序:return (第一个参数 - 第二个参数);
// 按照从大到小排序:return (第二个参数 - 第一个参数);
// 一定注意:排序是在原数组上进行的;

案例一

不传参数,将不会按照数值大小排序,按照字符编码的顺序进行排序。

var arr = ['General','Tom','Bob','John','Army'];
var resArr = arr.sort();
console.log(resArr);
// ["Army", "Bob", "General", "John", "Tom"]
var arr2 = [30,10,111,35,1899,50,45];
var resArr2 = arr2.sort();
console.log(resArr2);
// [10, 111, 1899, 30, 35, 45, 50]

案例二

传入参数,实现升序,降序。

var arr3 = [30,10,111,35,1899,50,45];
arr3.sort(function(a,b){
	return a - b;
})
console.log(arr3);
// [10, 30, 35, 45, 50, 111, 1899]
var arr4 = [30,10,111,35,1899,50,45];
arr4.sort(function(a,b){
	return b - a;
})
console.log(arr4);
// [1899, 111, 50, 45, 35, 30, 10]

案例三

根据数组中的对象的某个属性值排序。

var arr5 = [{id:10},{id:5},{id:6},{id:9},{id:2},{id:3}];
arr5.sort(function(a,b){
        return a.id - b.id
})
console.log(arr5);
输出新的排序:
{id: 2}
{id: 3}
{id: 5}
{id: 6}
{id: 9}
{id: 10}

案例四

根据数组中的对象的多个属性值排序,多条件排序。

var arr6 = [{id:10,age:2},{id:5,age:4},
            {id:6,age:10},{id:9,age:6},
            {id:2,age:8},{id:10,age:9}];
arr6.sort(function(a,b){
    if(a.id === b.id)
    {
        // 如果id相同,按照age的降序
        return b.age - a.age
    }
    else
    {
        return a.id - b.id
    }
})
console.log(arr6);
输出新的排序:
{id: 2, age: 8}
{id: 5, age: 4}
{id: 6, age: 10}
{id: 9, age: 6}
{id: 10, age: 9}
{id: 10, age: 2}
push
console.log(arr.push(1));
console.log(arr.push(1,2));
console.log(arr.push([1,2]));
// 在原数组的末尾添加元素,返回添加后数组的长度
// 影响原数组
// push参数,可以是一个或者多个,也可以是一个或者多数组。如果是数组,原数组就会成为二维数组。
pop
console.log(arr.pop());
// 没有参数,唯一作用就是从原数组的末尾删除一个元素,返回被删除的那一个元素,原数组发生改变。
// 影响原数组
unshift
console.log(arr.unshift(1,2));
// 在原数组的头部添加元素,返回添加后数组的长度
// 影响原数组
// unshift参数,可以是一个或者多个,也可以是一个或者多数组。
// 如果参数是数组,原数组就会成为二维数组
shift
console.log(arr.shift());
// 就是从原数组的头部删除一个元素,返回删除的元素
// 影响原数组
splice

数组的splice方法,是一个万能的方法。可以增,可以删,可以改,都是在原数组基础进行的。这个方法原本是为了删除元素发明出来,但变化参数的书写格式可以实现不同功能。

删除:

var arr = [1,2,3,4,5];
console.log(arr.splice(1,3)); // [2,3,4]
console.log(arr); // [1,5]
// 返回被删除的元素组成的新数组
// 会影响原数组
// 第一个参数是开始位置,第二个参数是长度。

增加:

var arr = [1,2,3,4,5];
console.log(arr.splice(1,0,'zly','ym')); // []
// 增加返回空数组(因为第二个参数是0)
console.log(arr); // (7) [1, "zly", "ym", 2, 3, 4, 5]
// 会影响原数组
var arr = [1,2,3,4,5];
console.log(arr.splice(1,1,'zly','ym')); // [2]
console.log(arr); // (6) [1, "zly", "ym", 3, 4, 5]

// 删除功能还是存在的,只进行增加操作的话第二个参数(长度)必须为0。
// 在第一个参数(开始位置)位置处进行增加,这个参数对应的原来的元素会被往后挤。

更改:

var arr = [1,2,3,4,5];
console.log(arr.splice(1,2,'rb','ty')); // (2) [2, 3]
// 返回由被删除的元素组成的新数组
console.log(arr); // (5) [1, "rb", "ty", 4, 5]
// 会影响原数组
toString&toLocaleString
var arr = [1,2,3,4,5];			
console.log(arr.toString()); // 1,2,3,4,5
// 把数组转化为字符串,其实就是数组中的内容
// console.log(arr.toLocaleString()); // 1,2,3,4,5

这俩都不常用,因为上面的arr.join('')比他俩更强,都常用它。

六、ES5数组相关方法(了解)

  1. Array.prototype.indexOf(value):返回value在数组中的第一个下标(从前面开始找),第二个参数可以指定从哪开始找。
var arr = [1,1,2,3,1];
console.log(arr.indexOf(1));   // 0
console.log(arr.indexOf(1,2)); // 4 从2号位(2)开始往后找
  1. Array.prototype.lastIndexOf(value):得到value在数组中的最后一个下标(从后面开始找),第二个参数可以指定从哪开始找。

    var arr = [1,1,2,3,1];
    console.log(arr.lastIndexOf(1));   // 4
    console.log(arr.lastIndexOf(1,3)); // 1 从3号位(3)开始往前找
    
  2. Array.prototype.forEach(function(item, index){}):遍历数组。

    var arr = [1,1,2,3,1];
    console.log(arr.forEach(function(item,index){
                    console.log(item,index);
                }));
    // forEach是遍历数组的另外一个手段,需要传递一个回调函数参数,
    // 这个方法返回undefined;也就是没有返回值return
    
    结果:
      1 0
      1 1
      2 2
      3 3
      1 4
    undefined
    
    var arr = [1,1,2,3,1];
    arr.forEach(function(item,index){
            console.log(item,index);
    });
    // 把值赋给item,把下标赋给index
    
    结果:
      1 0
      1 1
      2 2
      3 3
      1 4
    
  3. Array.prototype.map(function(item, index){}):遍历数组并返回一个新的数组,返回加工之后的值。

    注意点:

    • map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
    • map() 方法按照原始数组元素顺序依次处理元素。
    • map() 不会对空数组进行检测。
    • map() 不会改变原始数组。
    输出数组元素乘2后结果
    var arr = [1,1,2,3,1];
    console.log(arr.map(function(item,index){
                    return item * 2;
                }));  // [2, 2, 4, 6, 2]
    
    // 这个方法返回一个新数组,不会影响原数组
    console.log(arr);  // [1, 1, 2, 3, 1]
    
  4. Array.prototype.filter(function(item, index){}):遍历过滤出一个新的子数组, 返回条件为true的值,所以要设置过滤条件。

    var arr = [1,1,2,3,1];
    console.log(arr.filter(function(item,index){
                    return item >= 2;
                }));  // [2, 3]
    // 过滤条件为大于等于2
    
    console.log(arr);  // [1, 1, 2, 3, 1]
    // 这个方法返回一个新数组,不会影响原数组
    

七、ES6数组相关方法

  1. Array.from(v):将伪数组对象或可遍历对象转换为真数组。
var arr1 = '12345';
// 返回新数组,不会影响原数据
console.log(Array.from(arr1)); 
// ["1", "2", "3", "4", "5"]
console.log(arr1); // 12345
  1. Array.of(v1, v2, v3):将一系列值转换成数组。
console.log(Array.of(1,2));
// [1,2]
console.log(Array.of(1,2,'3','11'));
// [1, 2, "3", "11"]
console.log(Array.of(3)); // [3]
// 只有一个元素
  1. find(function(value, index, arr){return true}):找出第一个满足条件返回true的元素。
var arr = [1,2,18,9];			
console.log(arr.find(function(item,index){
        return item > 10;
}));  // 18
  1. findIndex(function(value, index, arr){return true}):找出第一个满足条件返回true的元素的下标。
var arr = [1,2,18,9];			
console.log(arr.findIndex(function(item,index){
        return item > 10;
}));  // 2

八、强化练习

注意:所有的方法都要注意三要素,功能、参数、返回值。

反转字符串

思路: 字符串不能翻转,但数组可以翻转,可以先把字符串转化为数组,翻转以后再把数组转化为字符串。

var str = 'aisudhasiduhas;dll123';
var arr = str.split(''); // 转化为数组
arr.reverse(); // 翻转
str = arr.join(''); // 转化为字符串

console.log(str);
数组,字符串的替换操作
var arr = [1,2,3,4,5];
arr.splice(2,3,'赵丽颖');
console.log(arr);
// (3) [1, 2, "赵丽颖"]

var str = '1233211234qweiuyeqwzhaoliyingyangmi';
console.log(str.replace('yangmi','dilireba'));
// 1233211234qweiuyeqwzhaoliyingdilireba
求字符串当中出现次数最多的字符以及位置
var str = '1213411231142';
var obj = {};
for(var i = 0; i < str.length; i++)
{
    if(obj[str[i]])
    {
        obj[str[i]]++;
    }
    else
    {
        obj[str[i]] = 1;//这行代码就是遵循那句“有则更改,无则添加”。
    }
}
console.log(obj);
结果:
1: 6
2: 3
3: 2
4: 2
// 三目运算符简化代码

var str = '1213411231142';
var obj = {};
for(var i = 0; i < str.length; i++)
{
    obj[str[i]] ? obj[str[i]]++ : obj[str[i]] = 1;
}
console.log(obj);

上面这些只搞定了出现次数,接下来我们来搞定位置。

var str = '1213411231142';
var obj = {};
for(var i = 0; i < str.length; i++)
{
    obj[str[i]] ? obj[str[i]]++ : obj[str[i]] = 1;
    if(obj[str[i]+'——arr'])
    {
        obj[str[i]+'——arr'].push(i);
    }
    else
    {
        obj[str[i]+'——arr'] = [i];
    }
}
console.log(obj);
// i=0时,obj[str[i]+'——arr']就是obj['1——arr'],有则改无则加
运行结果:
1: 6
1——arr: (6) [0, 2, 5, 6, 9, 10]
2: 3
2——arr: (3) [1, 7, 12]
3: 2
3——arr: (2) [3, 8]
4: 2
4——arr: (2) [4, 11]
// 三目运算符简化代码

var str = '1213411231142';
var obj = {};
for(var i = 0; i < str.length; i++)
{
    obj[str[i]] ? obj[str[i]]++ : obj[str[i]] = 1;
    obj[str[i]+'——arr'] ? obj[str[i]+'——arr'].push(i) : obj[str[i]+'——arr'] = [i];
}
console.log(obj);

接下来我们搞定次数最多。

var max = 0;
var resultKey = '';
for(var key in obj)
{
    if(typeof obj[key] == 'number')
    {
        if(obj[key] >= max)
        {
            max = obj[key];
            resultKey = key;
        }
    }
}
console.log(resultKey,obj[resultKey+'——arr']);

“次数最多”过程分析:

  1. key拿的是属性名,obj[key]拿的是属性名对应的值。
  2. 进入if,先判断属性名后的值是不是number类型。如果是number,那这个值就是字符的出现次数,因为我不需要那个“位置数组”。
  3. 现在拿次数进行比较,比较出这些次数中的最大值
  4. 因为key拿的是属性名,在这里就是单个字符,把它赋给一个空字符变量,就可以拿到次数最多对应的那个的属性名(字符)了。
  5. 最后输出那个字符,和字符对应的位置数组

完整代码:

var str = '1213411231142';
var obj = {};
for(var i = 0; i < str.length; i++)
{
    var charS = str[i];
    obj[charS]?obj[charS]++:obj[charS]=1;
    obj[charS+'——arr']?obj[charS+'——arr'].push(i):obj[charS+'——arr'] = [i];

}


var max = 0;
var resultKey = '';
for(var key in obj)
{
    if(typeof obj[key] == 'number')
    {
        if(obj[key] >= max)
        {
            max = obj[key];
            resultKey = key;
        }
    }
}
console.log(obj);
console.log(resultKey,obj[resultKey+'——arr']);

结果如下图:
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值