字符串

字符串就是一串字符，由双（单）引号括起来。

创建字符串

//方式一：字面量（推荐）
var str = '城市套路深，我想回农村';
​
//方式二：构造函数
//PS：用new产生的变量都是引用类型的变量，也叫对象
var str = new String('我不是黄蓉，我不会武功');

字符串的属性和方法

属性

• length: 表示字符串的长度，只读（只能读取）

获取值方法

• charAt(3) //获取下标为3的字符

• 备注：es5可以通过索引获取字符，例如 str[3]

查找索引方法

• indexOf/lastIndexOf(keyword [,startIndex]) 从开头/尾部向后查找字符串keyword第一次出现的位置,如果没找到返回-1

案例：输出所有1-100之间7的倍数和包含7的数字

for(var num=1;num<=100;num++){
    if(num%7===0 || String(num).indexOf(7)>=0){
        document.write(num + ', ')
    }
}

案例：16进制随机背景色

var str = '0123456789abcdef';//15
var res = '#';
var randomIdx；
for(var i=0;i<6;i++){
    randomIdx = parseInt(Math.random()*str.length）；
    res += str[randomIdx];
}
//封装成函数

字符串分割成数组方法

• split(分割符)：根据分割字符，把字符串拆分成数组

字符串替换方法

• replace(str|regExp,’‘) 替换字符串

  字符串的替换只能执行一次，不能够进行全局匹配，如果需要全局匹配，则应使用正则表达式

案例：过滤不文明用语

//1.获取元素
//2.点击按钮，获取输入信息，将输入信息添加到数组，渲染到页面上。
//3.定义敏感字符，用数组存放（可以先写成字符串，转成数组）
//4.将输入信息添加到数组前，先替换不文明用语
arr_mingan.forEach(function(item){
    //初级写法： _msg = _msg.replace(item,'**');
    // * 不能过滤大小写
    // * 不能过滤多个
    // 解决办法：利用构造函数创建正则表达式
    var reg = new RegExp(item,'ig');
    _msg = _msg.replace(reg,'**');
})

字符串的截取方法

• substring(start[,end])：不包括end所在字符，end省略表示截取到最后

• substr(start[,len])：支持负数，len为截取的数量

• slice(start[,end]) ：截取start到end(不包括end)的字符串，支持负数

案例：获取url参数

var url = 'https://www.baidu.com/s?name=laoxie&age=18&sex=male&';
//1. 查找?号所在的索引值
var idx = url.indexOf('?');
//2.截取到参数字符串
var params = url.slice(idx+1,-1);//name=laoxie&age=18&sex=male
//3.生成参数数组
params = params.split('&');//['name=laoxie','age=18','sex=male']
// 4.遍历数组，获取所有属性/属性值，并组成一个对象
var obj = {};//{key:value}
params.forEach(function(kv){
    var arr = kv.split('=');
    obj[arr[0]] = arr[1]；
});

字符串大小写转换

• toLowerCase()：转换成小写

• toUpperCase()：转换成大写

ECMAscript5新增

• str[3]//通过下标获取

• trim()：删除前后所有空格，返回新的字符串

ASCII码和字符集

• 字符串.charCodeAt(3) //获取下标为3的字符的编码

• String.fromCharCode(97) //编码转换成字符

了解正则表达式(后面再深入了解)

//创建方式：直接量
var reg = //gi;
//构造函数的方式
var reg = new RegExp('');

• g:表示匹配所有

• i:不区分大小写

 

数组

一系列数据的集合，每一项可以保存任何类型的数据，称为数组的元素，每个元素之间用逗号隔开

数组格式：[1,2,3]

数组的声明（创建）

//1)字面量(推荐)
var arr = [1,2,3];
​
//2)使用构造函数创建
var arr = new Array();//创建一个空数组
var arr = new Array(7);//创建一个长度为7的数组（数组项都为undefined）
var arr = new Array('王大锤',18 ,'普通青年','广州');//创建数组并同时写入数据

数组操作

(1)数组的读取与写入

* 数组的索引 arr[index]

​ index代表索引值，从0开始计数。

var arr = ['html5','css3','javascript'];
​
//读取
arr[0]; //=> 'html5'
arr[2]; //=> 'javascript'
​
//写入
arr[3] = 'web前端';

(2)数组的遍历

* 数组的长度 arr.length

var arr = ['html5','css3','javascript'];
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}
//for...in(了解)
var arr=["a","b","c","d"];
for(var i in arr){
    console.log(i);
}    

*案例：创建一个数组，存放50个三位数的随机数。

var arr = [];
for(var i=0;i<50;i++){
    //三种写法：
    // arr[i] = randomNumber(100,999);
    // arr[arr.length] = randomNumber(100,999);
    // arr.push(randomNumber(100,999));
}

数组方法

（1）增删改

1. push： 往数组尾部添加一个或多个元素，返回数组新的长度

2. pop：删除数组最后一个元素，返回删除的元素

3. unshift：往数组开头添加一个或多个元素，返回数组新的长度

4. shift：删除数组第一个元素，返回删除的元素

5. splice(startIdx,deleteNum,…items)：在数组中插入、删除、替换的通用方法

*总结：

方法	返回值
增，例如push（）,unshift()	新数组的长度
删，改，例如pop(),shift(),splice()	被删除的元素

*案例1：找出小于10的元素并组成一个新的数组

var arr = [10,15,2,32,5,4,20,8,48,54,6];
// 创建空数组，用于存放所有小于10的数
var res = [];
for(var i=0;i<arr.length;i++){
    if(arr[i] < 10){
        //res[i] = arr[i];//稀疏数组：索引值不连续的数组
        res.push(arr[i]);
    }
}

*案例2：随机点名

//1.获取文本框及按钮
//2.生成数组，存放名字
var arr = ["刘少宁", "梁永昌", "陈飞鑫", "陈剑龙", "张聪聪", "熊家富", "吕运学","王乾坤", "何高峰", "彭琰", "江亲国", "谢卓新", "梁展航", "林夏祺", "卢进球", "杨海涛", "周子琪", "罗东伟", "陈曼娜", "徐文强", "黄武超", "颜子豪", "李展鸿", "欧飞悦", "陈嘉伟", "王访", "刘靖琛", "邹思明", "邱癸坚", "韦靖", "李志合", "覃珍珍", "王津", "陈彩", "张勇", "张敏芳", "卢宗铭"];
//3.声明函数，生成随机索引，获取数组中索引对应的值。
function getName(){
    // 获取随机索引值
    var idx = randomNumber(0,namelist.length-1);
    username.value = namelist[idx];
}
//4.执行函数
getName();
btn.onclick = function(){
    getName();
}       

（2）截取数组（原数组不变）

slice(start[,end])：返回数组的片段或子数组，从start开始到end(不包括end所对应的元素)

如果省略end参数，则截取到数组的最后一项支持负数

* 可应用于复制一个数组为新数组,通过slice(0)

（3）数组排序 (原数组改变)

sort：将数组中的元素排序，并返回排序后的数组

默认以字符串的排列方式（转换成ASCII码进行对比）

（4）数组倒序

reverse：将数组中的元素颠倒顺序，返回逆序后的数组

（5）将数组拼接成字符串

join(separator) 返回字符串值，其中包含了连接到一起的数组的所有元素

separator为分隔符，默认为逗号

（6）数组合并

concat() 返回一个新数组，这个新数组是由调用这个方法的数组和参数组成

参数可以是多个

数组排序算法

冒泡排序

• 遍历元素，跟其下一个元素对比

• 把最大的逐个往后排列

var arr = [12,3,44,343,55,1,23];
for(var i=0;i<arr.length-1;i++){
    for(var j=0;j<arr.length-i-1;j++){
        if(arr[j]>arr[j+1]){
            var current = arr[j];
            arr[j] = arr[j+1];
            arr[j+1] = current;
        }
    }
}
console.log(arr);

选择排序法

• 把当前元素分别跟后面所有的元素对比

• 把最小的逐个往前排列

var arr = [12,3,44,343,55,1,23];
for(var i=0;i<arr.length;i++){
    for(var j=i+1;j<arr.length;j++){
        if(arr[i]>arr[j]){
            var current = arr[i];
            arr[i] = arr[j];
            arr[j] = current;
        }
        console.log("666");
    }
}
console.log(arr);

快速排序法

/*
* 利用递归函数实现排序
* 每次获取数组中间元素cItem
* 把大于和小于cItem的元素分别放置在arrGt和arrLt两个数组中,
* 利用concat组合递归调用函数返回的值
* 直到数组的长度小于1时，直接返回原数组调出递归
*/
var arr = [10, 8, 20, 5, 6, 30, 11, 9]；
function fastSort(arr){
    //6. 递归退出条件
    if(arr.length<=1){
        return arr;
    }
    //1. 找出数组中间位置元素
    var cIdx = parseInt(arr.length/2);
​
    //2.删除中间元素，避免与自己本身进行对比而造成死循环
    var cItem = arr.splice(cIdx,1);//[6],arr=[10, 8, 20, 5, 30, 11, 9]
​
    //3. 创建两个空数组用于保存大于或小于cItem的数字
    var arrLt = [];//[5]
    var arrGt = [];//[10,8,20,30,11,9]
​
    // 4.遍历数组，分别与cItem进行对比
    // 把小于cItem的数写入arrLt
    // 把大于cItem的数写入arrGt
    for(var i=0;i<arr.length;i++){
        if(arr[i]<cItem[0]){
            arrLt.push(arr[i])
        }else{
            arrGt.push(arr[i]);
        }
    }
    // 5.组合排序后的数组
    return fastSort([5]).concat(cItem,fastSort(arrGt));
}
console.log(fastSort(arr));

sort排序

arr.sort(function(a,b){
    // 在函数内通过返回值告诉sort方法如何排序
    return a-b;
});

数组复制与传输

如何复制数组

var arr = ['西施','貂蝉','张飞','关羽','刘备'];
var res = [];
for(var i=0;i<arr.length;i++){
    res.push(arr[i]);//方式1，此时res改变一，不影响arr
}
//方式2：res = arr.slice(0);

*案例：编写一个map(arr)函数，把数组中的每一个数字都增加20%，并返回新的数组

数组作为参数传递

​ 具体详情请看基本数据类型与引用数据类型的区别

多维数组(数组里面包含数组)

var arr = [1,2,'html5',[3,4,'css3'],[5,6,'javascript']]
arr[3][2]; //=>'css3'

对象Object

创建对象

• 字面量（推荐）：var obj = {name:'小明',age:18}

• 构造函数：var obj = new Object();

对象的操作

键值对

​ 对象的组成部分 {键(属性)：值(属性值)，}

操作对象键对应的值

//方式1：点语法 obj.键
obj.sex;
//方式2：通过obj["具体的键"]
obj["sex"];
//obj[key] //key为所有键的统称变量，记住变量不加引号。

(1)添加、修改属性

obj.sex = '男';
obj['weight'] = 60；

(2)删除属性

var obj = {name:'laoxie',age:18,gender:'man'}
//删除age属性
delete obj.age;

(3)读取属性值

obj.name;//==>小明
//如果读取一个不存在的属性，返回undefined

(4)遍历对象for…in

    var obj = {name:'laoxie'，age:18，gender:'男'}；  
    for(var key in obj){
        //遍历obj对象里面所有的键key,Obj[key]操作所有键对应的值。
        document.write(obj[key]);//分别输出：'laoxie',18,'男'
    }

数组与对象的组合

 [{
        id:'001',
        name:'iphone7 plugs',
        nickname:'肾7',
        imgurl:'img/ip7.jpg',
        price:5899.00,
        sale:5888.00,
        color:'土豪金'
    },{
        id:'002',
        name:'Note7',
        nickname:'爆炸7',
        imgurl:'img/note7.jpg',
        price:3899.00,
        sale:998.00,
        color:'黑色'
    },{
        id:'003',
        name:'荣耀7',
        nickname:'牛x7',
        imgurl:'img/honor7.jpg',
        price:1999.00,
        sale:1899.00,
        color:'白色'
    }]

*案例：根据数据生成一个商品列表

ECMAScript5(ES5)Array新增方法

迭代（遍历）方法

（1）forEach(fn)

遍历方法，for循环没有太大差别，比for循环方便

arr.forEach(function(item){
    console.log(item)
});

（2）map(fn)

返回一个数量相等的数组，内容是什么取决于在fn中返回的值

• 案例：把数组中的每一个数字都增加20%，并返回新的数组

• 案例：利用map()快速生成商品列表

（3）filter(fn)

返回一个数组，存放执行fn后返回true的数组元素，利用这个方法可对数组元素进行过滤筛选

• 案例：找出数组中小于10的元素，组成新数组

var res = nums.filter(function(item){
    return item<10;
}); 

（4）some(fn)

如果该函数对任何一项返回 true，则返回true

（5）every(fn)

如果该函数每一项都返回 true，才返回true

以上方法都对数组中的每一项运行给定函数fn,，函数中有三个形参分别为- item：数组中的每一项,- index：遍历过程中对应的索引值,- array：对数组的引用

归并方法

这两个方法都会迭代数组中的所有项，然后生成一个最终返回值。

（1）reduce(fn,initVal)

（2）reduceRight(fn,initVal)

• fn(prev,cur,index,array): fn是每一项调用的函数，函数接受4个参数分别是

  • prev：函数上一次的返回值。（第一次的值参考initVal）

  • cur：当前值，

  • index：索引值，

  • array：当前数组，

• 函数需要返回一个值，这个值会在下一次迭代中作为prev的值

• initVal: 迭代初始值（可省略），如果缺省，prev的值为数组第一项

//对数组求和
var res = arr.reduce(function(prev,current,idx,arr){
    return prev+current;
},0);

静态方法

Array.isArray()

判断是否为数组，返回true/false

索引方法

区别就是一个从前往后找，一个从后往前找

indexOf/lastIndexOf(keyword [,startIndex])

• keyword: 要查找的项，

• startIndex：查找起点位置的索引，该参数可选，默认0

方法返回keyword所在数组中的索引值，如果数组不存在keyword，则返回-1

*应用：判断数组中是否存在某个值

arr.indexOf(key) != -1 //(1)
arr.indexOf(key) >= 0 //(2)
some() //(3)

案例：

1. 随机生成一个五位验证码，然后输出该验证码，每位分别是什么

//(1)用数组存放五位验证码
var res = [];
for(var i=0;i<5;i++){
    var num = parseInt(Math.random()*10);
    res.push(num);
}
console.log('该随机数是'+res.join(""));
//(2)得出每位分别是什么
var show = res.map(function(item,idx){
    return  '第'+(idx+1)+'位：' + item;
});
console.log(show.join());
​

2.以上数组的最大值，最小值和平均值，并输出他们的索引

//1. 最大值及对应索引，同理最小值
var maxIdx = 0;
var max = arr[0];
arr.forEach(function(item,idx){
    if(item>max){
        max = item;
        maxIdx = idx;
    }
});
//2.归并获取总数，求平均值
var total = arr.reduce(function(prev,current){
return prev+current;
},0);
var avg = total/arr.length;

3.显示10条最新消息

 

最后

以上就是无语裙子为你收集整理的js第六、七天 Array、string字符串了解正则表达式(后面再深入了解)数组对象ObjectECMAScript5(ES5)Array新增方法的全部内容，希望文章能够帮你解决js第六、七天 Array、string字符串了解正则表达式(后面再深入了解)数组对象ObjectECMAScript5(ES5)Array新增方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。