javascript的for、数组、字符串、map用法

javascript的for、数组、字符串、map用法

1.for

1.1 正常使用

var arr = ['Apple', 'Google', 'Microsoft'];
var i, x;
for (i=0; i<arr.length; i++) {
    x = arr[i];
    console.log(x);
}

1.2 for in用法

1.2.1针对对象

//输出对象
var o = {
    name: 'Jack',
    age: 20,
    city: 'Beijing'
};
for (var key in o) {
    console.log(key); // 'name', 'age', 'city'
}

1.2.2针对数组(除了遍历数组元素以外,还会遍历自定义属性。)

//输出数组
var a = ['A', 'B', 'C'];
a.name = 'hello';
for (var i in a) {
    console.log(i); // '0', '1', '2', 'name'
    console.log(a[i]);//'A', 'B', 'C', 'hello'
}

1.3 for of用法（主要针对数组）

在遍历数组的时候的时候使用for…of
循环对象属性的时候，使用for…in，无法使用for of

//遍历数组
var a = ['A', 'B', 'C'];
for (var i of a) {
    console.log(i); // 'A', 'B', 'C'
}

2.数组

2.1Array.map()方法

此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组

    let` `arr = [1, 2, 3, 4, 5]
  ``let` `newArr = arr.map(x => x*2)
  ``//arr= [1, 2, 3, 4, 5]  原数组保持不变
  ``//newArr = [2, 4, 6, 8, 10] 返回新数组

2.2Array.forEach()

此方法是将数组中的每个元素执行传进提供的函数，没有返回值，注意和map方法区分

数据数组是改变不了的，对象数组是可以改变的

基本数据类型 -> 死都改不动原数组！

    let` `arr = [1, 2, 3, 4, 5]
  ``num.forEach(x => x*2)
  ``// arr = [1, 2, 3, 4, 5] 数组不改变,注意和map区分

如果真的想改动的话呢，就修改arr[i]

// 基本类型可以欧~
const numArr = [33,4,55];
numArr.forEach((ele, index, arr) => {
    if (ele === 33) {
        arr[index] = 999
    }
})
console.log(numArr);  // [999, 4, 55]

引用类型 -> 类似对象数组可以爽快改变偶~

const objArr = [{
    name: 'wxw',
    age: 22
}, {
    name: 'wxw2',
    age: 33
}]
objArr.forEach(ele => {
    if (ele.name === 'wxw2') {
        ele.age = 88
    }
})
console.log(objArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 88}]

2.3 Array.filter()

此方法是将所有元素进行判断，将满足条件的元素作为一个新的数组返回

  ``let` `arr = [1, 2, 3, 4, 5]
  ``const isBigEnough = value => value >= 3
  ``let` `newArr = arr.filter(isBigEnough )
  ``//newNum = [3, 4, 5] 满足条件的元素返回为一个新的数组

2.4 Array.every()

此方法是将所有元素进行判断返回一个布尔值，如果所有元素都满足判断条件，则返回true，否则为false：

	let` `arr = [1, 2, 3, 4, 5]
  ``const isLessThan4 = value => value < 4
  ``const isLessThan6 = value => value < 6
  ``arr.every(isLessThan4 ) ``//false
  ``arr.every(isLessThan6 ) ``//true

2.5 Array.some()

此方法是将所有元素进行判断返回一个布尔值，如果存在元素都满足判断条件，则返回true，若所有元素都不满足判断条件，则返回false：

let` `arr= [1, 2, 3, 4, 5]
  ``const isLessThan4 = value => value < 4
  ``const isLessThan6 = value => value > 6
  ``arr.some(isLessThan4 ) ``//true
  ``arr.some(isLessThan6 ) ``//false

2.6 Array.reduce()

此方法是所有元素调用返回函数，返回值为最后结果,传入的值必须是函数类型：

	let` `arr = [1, 2, 3, 4, 5]
  ``const add = (a, b) => a + b
  ``let` `sum = arr.reduce(add)
  ``//sum = 15 相当于累加的效果
  ``与之相对应的还有一个 Array.reduceRight() 方法，区别是这个是从右向左操作的

2.7 Array.push()

此方法是在数组的后面添加新加元素，此方法改变了数组的长度：

2.8 Array.pop()

此方法在数组后面删除最后一个元素，并返回数组，此方法改变了数组的长度：

let` `arr = [1, 2, 3, 4, 5]
  ``arr.pop()
  ``console.log(arr) ``//[1, 2, 3, 4]
  ``console.log(arr.length) ``//4

2.9 Array.shift()

此方法在数组后面删除第一个元素，并返回数组，此方法改变了数组的长度：

let` `arr = [1, 2, 3, 4, 5]
  ``arr.shift()
  ``console.log(arr) ``//[2, 3, 4, 5]
  ``console.log(arr.length) ``//4 

2.10Array.unshift()

此方法是将一个或多个元素添加到数组的开头，并返回新数组的长度：

let` `arr = [1, 2, 3, 4, 5]
  ``arr.unshift(6, 7)
  ``console.log(arr) ``//[6, 7, 1, 2, 3, 4, 5]
  ``console.log(arr.length) ``//7 

2.11 Array.isArray()

判断一个对象是不是数组，返回的是布尔值

2.12 Array.concat()

此方法是一个可以将多个数组拼接成一个数组：

let` `arr1 = [1, 2, 3]
   ``arr2 = [4, 5]
 ``let` `arr = arr1.concat(arr2)
 ``console.log(arr)``//[1, 2, 3, 4, 5]

2.13 Array.toString()

此方法将数组转化为字符串：

let` `arr = [1, 2, 3, 4, 5];
  ``let` `str = arr.toString()
  ``console.log(str)``// 1,2,3,4,5

2.14 Array.join()

此方法也是将数组转化为字符串：

通过例子可以看出和toString的区别，可以设置元素之间的间隔~

let` `arr = [1, 2, 3, 4, 5];
  ``let` `str1 = arr.toString()
  ``let` `str2 = arr.toString(``','``)
  ``let` `str3 = arr.toString(``'##'``)
  ``console.log(str1)``// 12345
  ``console.log(str2)``// 1,2,3,4,5
  ``console.log(str3)``// 1##2##3##4##5

2.15 Array.splice(开始位置， 删除的个数，元素)

万能方法，可以实现增删改：

let` `arr = [1, 2, 3, 4, 5];
   ``let` `arr1 = arr.splice(2, 0 ``'haha'``)
   ``let` `arr2 = arr.splice(2, 3)
   ``let` `arr1 = arr.splice(2, 1 ``'haha'``)
   ``console.log(arr1) ``//[1, 2, 'haha', 3, 4, 5]新增一个元素
   ``console.log(arr2) ``//[1, 2] 删除三个元素
   ``console.log(arr3) ``//[1, 2, 'haha', 4, 5] 替换一个元素

3 Map

3.1定义Map数据类型

3.1.1构造函数形式 — 在声明时,同时赋值

• 参数必须是：

  1. 二维数组的形式

  2. 二维数组的键名是 Map单元数据的键名

  3. 二维数组的数值是 Map单元数据的数值

     	const m = new Map([ [键名1,数据1] , [键名2,数据2] ]);   //语法格式
         const m = new Map([ ['name','张三'] , ['age',18] ]);   //案例展示
     

3.1.2构造函数声明之后再赋值

• 书写方式：Map对象.set(键名 , 数值)

  	const m = new Map();   //声明构造函数
  	m.set(name , '张三');  //赋值
  

3.2获取Map数据类型中的数据

语法形式：Map数据类型.get(‘键名’) ------> m.get(‘name’)

    const m = new Map([ ['name','张三'] , ['age',18] ]); //Map数据类型
    console.log(m.get('name'));  //获取Map数据类型并在控制台打印
    m.get["测试"]  //也可以这样写：

3.3删除Map数据类型中,指定的键名

语法形式：Map数据类型.delete(‘键名’) ------> m.delete(‘name’);

    const m = new Map([ ['name','张三'] , ['age',18] ]); //Map数据类型
    m.delete('name');
    console.log(m)  //打印出来m，展示结果

3.4清除Map数据类型中,所有的键名和数据

语法形式：Map数据类型.clear()

    const m = new Map([ ['name','张三'] , ['age',18] ]); //Map数据类型
    m.clear();
    console.log(m)  //打印出来m，展示结果

3.5判断是否是Map的成员

语法形式：Map数据类型.has(‘键名’)

    const m = new Map([ ['name','张三'] , ['age',18] ]); //Map数据类型
    console.log(m.has('a'));
    console.log(m.has('name'));

3.6循环遍历

使用forEach() 语法,循环遍历 Map 数据类型

    const m = new Map([ ['name','张三'] , ['age',18] ]); //Map数据类型
    m.forEach(function(item,key){
        console.log(item,key)
    })

4 字符串

4.1CharAt()

charAt()方法返回给定的索引位置的字符,索引从0开始；

let str="abcdefg";
conlose.log(charAt(3)); // d

4.2concat()

将一个或多个字符串拼接成一个新的字符串。

let str="hello";
let re=str.concat(" world!");
console.log(re);// hello world!

concat()可以接收一个或多个参数；

let str="hello";
let re=str.concat(" world","!");
console.log(re);// hello world!

4.3 返回调用字符串的一个子串

slice():第一个表示子字符串开始的位置，第二个表示子字符串结束的位置。

substring():第一个表示子字符串开始的位置，第二个表示子字符串结束的位置。

substr():第一个表示子字符串开始的位置,第二个参数是子串的长度

三个方法都可以省略第二个参数

如果参数是负数，
slice()：所有负数 当做字符串长度加上负数的结果
substr()：第一个参数负值当成字符串长度加上负值，第二个参数当做0
substring()：会将所有负参数当做0

let str="hello world";
console.log(str.slice(3));// lo world
console.log(str.substr(3));// lo world
console.log(str.substring(3));// lo world

console.log(str.slice(3,7));// lo w
console.log(str.substr(3,7));// lo worl
console.log(str.substring(3,7));// lo w

console.log(str.slice(-3));// rld
console.log(str.substr(-3));// rld
console.log(str.substring(-3));// hello world

console.log(str.slice(3,-4));// lo w
console.log(str.substr(3,-4));//
console.log(str.substring(3,-4));// hel 

4.4 indexOf()、lastindexOf()

两个方法都返回传入字符在字符串中的位置。
区别在于
indexOf()：从字符串开头开始查找，从前往后；
lastindexOf()：从字符串末尾开始查找，从后往前；
这两个方法接收第二个参数，表示开始查找的位置；

let str="hello world";
console.log(str.indexOf("o"));// 4
console.log(str.lastIndexOf("o"));// 7 
console.log(str.indexOf("o",5));// 7
console.log(str.lastIndexOf("o",6));// 4

4.5 trim()

trim()方法会创建一个字符串的副本，删除前后所有的空格，返回结果。
trim()返回的是字符串的副本，原字符串不会受到影响。
另外 trimLeft()和trimRight()分别用于清楚字符串开头和末尾的空格。

4.6 repeat()

repeat()方法接收一个整数参数，表示需要将字符串复制多少次，然后返回拼接所有副本后的结果。
padStart(): 复制字符串，若小于指定长度，在左边填充字符。 第二个参数表示用于填充的字符；
padEnd(): 复制字符串，若小于指定长度，在右边填充字符。 第二个参数表示用于填充的字符；

4.7 字符串的大小写转换

toUpperCase(): 将字符串转换为大写；
toLowerCase(): 将字符串转换为小写。

4.8 split()

split()方法接收两个参数，第一个是一个字符串或者正则表达式，第二个是指定返回数组的最大长度（可选）；

会创建一个字符串的副本，删除前后所有的空格，返回结果。
trim()返回的是字符串的副本，原字符串不会受到影响。
另外 trimLeft()和trimRight()分别用于清楚字符串开头和末尾的空格。

4.6 repeat()

repeat()方法接收一个整数参数，表示需要将字符串复制多少次，然后返回拼接所有副本后的结果。
padStart(): 复制字符串，若小于指定长度，在左边填充字符。 第二个参数表示用于填充的字符；
padEnd(): 复制字符串，若小于指定长度，在右边填充字符。 第二个参数表示用于填充的字符；

4.7 字符串的大小写转换

toUpperCase(): 将字符串转换为大写；
toLowerCase(): 将字符串转换为小写。

4.8 split()

split()方法接收两个参数，第一个是一个字符串或者正则表达式，第二个是指定返回数组的最大长度（可选）；

方法返回字符串分割成的字符串数组。